12/16

src/main.less

@@ -196,4 +196,11 @@
     font-weight: bold;
     color      : rgba(0, 0, 0, 1);
   }
+}
+
+.van-picker__cancel,
+.van-picker__confirm {
+
+  color: #FF8F00;
+
 }

src/mixins/formatters.js

@@ -2,27 +2,13 @@ import { format } from 'date-fns';
 import { zhCN } from 'date-fns/locale';
 export default {
     methods: {
-        timeFormatter(row, column, cellValue, index) {
-            return format(new Date(cellValue), 'HH:mm', { locale: zhCN });
-        },
-        datetimeFormatter(row, column, cellValue, index) {
-            if (!cellValue) return '';
-            return format(new Date(cellValue), 'yyyy/MM/dd HH:mm', {
-                locale: zhCN
-            });
-        },
-        dateFormatter(row, column, cellValue, index) {
-            if (cellValue) {
-                return format(new Date(cellValue), 'yyyy/MM/dd', {
+
+        dateFormatter(value) {
+            if (value) {
+                return format(new Date(value), 'yyyy-MM-dd', {
                     locale: zhCN
                 });
             }
-        },
-        substrDate(row, column, cellValue, index) {
-            if (cellValue) {
-                return cellValue.substring(0, 16);
-            }
-            return '';
         }
     }
-};
+};

src/router/index.js

@@ -6,101 +6,110 @@ import Index from "@/views/Index";
 
 Vue.use(VueRouter);
 
-const routes = [
-  {
-    path: "/",
-    component: Index,
-    children: [
-      {
+const routes = [{
         path: "/",
-        redirect: "home"
-      },
-      {
-        path: "/home",
-        name: "home",
-        component: () => import("../views/Home.vue")
-      },
-      {
-        path: "/distribution",
-        name: "distribution",
-        component: () => import("../views/Distribution.vue")
-      },
-      {
-        path: "/user",
-        name: "user",
-        component: () => import("../views/User.vue"),
-        meta:{
-            title:"会员中心"
+        component: Index,
+        children: [{
+                path: "/",
+                redirect: "home"
+            },
+            {
+                path: "/home",
+                name: "home",
+                component: () =>
+                    import ("../views/Home.vue")
+            },
+            {
+                path: "/distribution",
+                name: "distribution",
+                component: () =>
+                    import ("../views/Distribution.vue")
+            },
+            {
+                path: "/user",
+                name: "user",
+                component: () =>
+                    import ("../views/User.vue"),
+                meta: {
+                    title: "会员中心"
+                }
+            }
+        ]
+    },
+    {
+        path: "/list",
+        name: "list",
+        component: () =>
+            import ("../views/List.vue"),
+        meta: {
+            title: "知琴阁"
+        }
+    },
+    {
+        path: "/detail",
+        name: "detail",
+        component: () =>
+            import ("../views/Detail.vue"),
+        meta: {
+            title: "商品详情"
+        }
+    },
+    {
+        path: "/addressList",
+        name: "addressList",
+        component: () =>
+            import ("../views/AddressList.vue"),
+        meta: {
+            title: "收货地址管理"
+        }
+    },
+    {
+        path: "/editAddress",
+        name: "editAddress",
+        component: () =>
+            import ("../views/EditAddress.vue"),
+        meta: {
+            title: "添加地址"
+        }
+    },
+    {
+        path: "/setting",
+        name: "setting",
+        component: () =>
+            import ("../views/Setting.vue"),
+        meta: {
+            title: "添加地址"
         }
-      }
-    ]
-  },
-  {
-    path: "/list",
-    name: "list",
-    component: () => import("../views/List.vue"),
-    meta:{
-        title:"知琴阁"
-    }
-  },
-  {
-    path: "/detail",
-    name: "detail",
-    component: () => import("../views/Detail.vue"),
-    meta:{
-        title:"商品详情"
-    }
-  },
-  {
-    path: "/addressList",
-    name: "addressList",
-    component: () => import("../views/AddressList.vue"),
-    meta:{
-        title:"收货地址管理"
-    }
-  },
-  {
-    path: "/about",
-    name: "about",
-    component: () => import("../views/About.vue")
-  },
-  {
-    path: "/editAddress",
-    name: "editAddress",
-    component: () => import("../views/EditAddress.vue"),
-    meta:{
-        title:"添加地址"
     }
-  }
 ];
 
 const router = new VueRouter({
-  routes
+    routes
 });
 
 router.beforeEach((to, from, next) => {
-  console.log(to);
-  if (to.params.isNext) {
-    store.commit("updateDirection", "forward");
-  } else {
-    store.commit("updateDirection", "reverse");
-  }
-  if (/\/http/.test(to.path)) {
-    let url = to.path.split("http")[1];
-    window.location.href = `http${url}`;
-  } else {
-    Toast.loading({
-      mask: true,
-      message: "加载中...",
-      loadingType: "spinner",
-      duration: 0
-    });
-    next();
-  }
+    console.log(to);
+    if (to.params.isNext) {
+        store.commit("updateDirection", "forward");
+    } else {
+        store.commit("updateDirection", "reverse");
+    }
+    if (/\/http/.test(to.path)) {
+        let url = to.path.split("http")[1];
+        window.location.href = `http${url}`;
+    } else {
+        Toast.loading({
+            mask: true,
+            message: "加载中...",
+            loadingType: "spinner",
+            duration: 0
+        });
+        next();
+    }
 });
 
 router.afterEach((to, from) => {
-  Toast.clear();
+    Toast.clear();
 });
 
-export default router;
+export default router;

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Setting.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="setting">
+    <van-cell-group>
+      <van-cell title="头像" value="内容" isLink>
+        <van-image
+          class="user-icon"
+          width="36"
+          height="36"
+          fit="cover"
+          radius="100"
+          src="https://img.yzcdn.cn/vant/cat.jpeg"
+        />
+      </van-cell>
+      <van-cell title="昵称" value="粉条" isLink />
+      <van-cell
+        title="性别"
+        :class="{notSet:!sex}"
+        :value="sex||'请选择性别'"
+        @click="showSex=true"
+        isLink
+      />
+    </van-cell-group>
+
+    <van-cell-group>
+      <van-cell
+        :class="{notSet:!birth}"
+        title="出生日期"
+        :value="birth?dateFormatter(birth):'请选择出生日期'"
+        @click="showTime=true"
+        isLink
+      />
+      <van-cell
+        title="所在城市"
+        :class="{notSet:!address}"
+        :value="address||'请选择所在城市'"
+        @click="show=true"
+        isLink
+      />
+    </van-cell-group>
+
+    <van-popup v-model="showName" position="bottom"></van-popup>
+
+    <van-popup v-model="show" position="bottom">
+      <van-area :area-list="areaList" :columns-num="2" @confirm="addressConfirm" />
+    </van-popup>
+
+    <van-popup v-model="showTime" position="bottom">
+      <van-datetime-picker
+        v-model="date"
+        type="date"
+        :max-date="maxDate"
+        :min-date="minDate"
+        @confirm="sureTime"
+      />
+    </van-popup>
+
+    <van-action-sheet v-model="showSex" :actions="actions" @select="onSelect" cancel-text="取消" />
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+import areaList from "../areaList";
+export default {
+  name: "setting",
+  data() {
+    return {
+      areaList,
+      show: false,
+      showTime: false,
+      address: "",
+      birth: "",
+      sex: "",
+      maxDate: new Date(),
+      minDate: new Date("1960-01-01"),
+      date: new Date(),
+      actions: [{ name: "男" }, { name: "女" }],
+      showSex: false,
+      showName: true
+    };
+  },
+  computed: {
+    ...mapState(["userInfo"])
+  },
+  methods: {
+    addressConfirm(addressList) {
+      var nameList = addressList.map(item => {
+        return item.name;
+      });
+      this.address = nameList.join(" ");
+      this.show = false;
+    },
+    sureTime(value) {
+      console.log(value);
+      this.birth = value;
+      this.showTime = false;
+    },
+    onSelect(sex) {
+      console.log(sex);
+      this.sex = sex.name;
+      this.showSex = false;
+    }
+  }
+};
+</script>
+<style lang='less' scoped>
+.setting {
+  background: rgba(242, 244, 245, 1);
+  padding: 15px;
+}
+
+.van-cell-group {
+  margin-bottom: 10px;
+  border-radius: 2px;
+  .van-cell {
+    line-height: 40px;
+    align-items: center;
+    color: #000;
+    font-weight: bold;
+
+    .van-cell__value {
+      font-size: 16px;
+      color: rgba(0, 0, 0, 1);
+      font-weight: normal;
+    }
+    .van-cell__value {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+
+  .van-cell:not(:last-child)::after {
+    right: 15px;
+  }
+
+  .notSet {
+    .van-cell__value {
+      font-size: 13px;
+      color: #aaacad;
+    }
+  }
+}
+</style>

src/views/User.vue

@@ -1,149 +1,167 @@
 <template>
-    <div class='user'>
-        <div class="top">
-            <van-image class="user-icon" width="72" height="72" fit="cover"
-                radius="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
-            <div class="user-name">粉条</div>
-        </div>
+  <div class="user">
+    <div class="top">
+      <van-image
+        class="user-icon"
+        width="72"
+        height="72"
+        fit="cover"
+        radius="100"
+        src="https://img.yzcdn.cn/vant/cat.jpeg"
+      />
+      <div class="user-name">粉条</div>
+    </div>
 
-        <div class="order">
-            <van-cell style="padding:13px 15px;" title-class="order-title"
-                value-class="order-val" title="我的订单" is-link value="查看全部订单" />
-            <van-grid :column-num="3" :border="false">
-                <van-grid-item text="付款确认">
-                    <img src="../assets/info_icon_dingdan_01.png"
-                        class="order-img" slot="icon" alt="">
-                </van-grid-item>
-                <van-grid-item text="收款确认">
-                    <img src="../assets/info_icon_dingdan_02.png"
-                        class="order-img" slot="icon" alt="">
-                </van-grid-item>
-                <van-grid-item icon="photo-o" text="委托代卖">
-                    <img src="../assets/info_icon_dingdan_03.png"
-                        class="order-img" slot="icon" alt="">
-                </van-grid-item>
-            </van-grid>
-        </div>
+    <div class="order">
+      <van-cell
+        style="padding:13px 15px;"
+        title-class="order-title"
+        value-class="order-val"
+        title="我的订单"
+        is-link
+        value="查看全部订单"
+      />
+      <van-grid :column-num="3" :border="false">
+        <van-grid-item text="付款确认">
+          <img src="../assets/info_icon_dingdan_01.png" class="order-img" slot="icon" alt />
+        </van-grid-item>
+        <van-grid-item text="收款确认">
+          <img src="../assets/info_icon_dingdan_02.png" class="order-img" slot="icon" alt />
+        </van-grid-item>
+        <van-grid-item icon="photo-o" text="委托代卖">
+          <img src="../assets/info_icon_dingdan_03.png" class="order-img" slot="icon" alt />
+        </van-grid-item>
+      </van-grid>
+    </div>
 
-        <div class="menu-list">
-            <van-cell-group :border='false'>
-                <van-cell title="我的钱包" title-class="menu-title" value="¥5823"
-                    is-link>
-                    <img src="../assets/info_list_icon_qianbao.png"
-                        class="menu-img" slot="icon" alt="">
-                </van-cell>
-                <van-cell title="我的关注" title-class="menu-title" is-link> <img
-                        src="../assets/info_list_icon_guanzhu.png"
-                        class="menu-img" slot="icon" alt="">
-                </van-cell>
-            </van-cell-group>
-            <van-cell-group :border='false' style="margin-top:10px;">
-                <van-cell title="收货地址" title-class="menu-title"
-                    value-class='menu-not-val' value="未填写" is-link @click="goNext('addressList')"> <img
-                        src="../assets/info_list_icon_dizhi.png"
-                        class="menu-img" slot="icon" alt="">
-                </van-cell>
-                <van-cell title="绑定手机号" title-class="menu-title"
-                    value-class='menu-not-val' value="未绑定" is-link>
-                    <img src="../assets/info_list_icon_shouji.png"
-                        class="menu-img" slot="icon" alt="">
-                </van-cell>
-                <van-cell title="绑定支付宝" title-class="menu-title"
-                    value-class='menu-not-val' value="未绑定" is-link>
-                    <img src="../assets/info_list_icon_zhifubao.png"
-                        class="menu-img" slot="icon" alt="">
-                </van-cell>
-            </van-cell-group>
-            <van-cell-group :border='false' style="margin-top:10px;">
-                <van-cell title="设置" title-class="menu-title" value="内容"
-                    is-link> <img src="../assets/info_list_icon_zhifubao(1).png"
-                        class="menu-img" slot="icon" alt="">
-                </van-cell>
-            </van-cell-group>
-        </div>
+    <div class="menu-list">
+      <van-cell-group :border="false">
+        <van-cell title="我的钱包" title-class="menu-title" value="¥5823" is-link>
+          <img src="../assets/info_list_icon_qianbao.png" class="menu-img" slot="icon" alt />
+        </van-cell>
+        <van-cell title="我的关注" title-class="menu-title" is-link>
+          <img src="../assets/info_list_icon_guanzhu.png" class="menu-img" slot="icon" alt />
+        </van-cell>
+      </van-cell-group>
+      <van-cell-group :border="false" style="margin-top:10px;">
+        <van-cell
+          title="收货地址"
+          title-class="menu-title"
+          value-class="menu-not-val"
+          value="未填写"
+          is-link
+          @click="goNext('addressList')"
+        >
+          <img src="../assets/info_list_icon_dizhi.png" class="menu-img" slot="icon" alt />
+        </van-cell>
+        <van-cell
+          title="绑定手机号"
+          title-class="menu-title"
+          value-class="menu-not-val"
+          value="未绑定"
+          is-link
+        >
+          <img src="../assets/info_list_icon_shouji.png" class="menu-img" slot="icon" alt />
+        </van-cell>
+        <van-cell
+          title="绑定支付宝"
+          title-class="menu-title"
+          value-class="menu-not-val"
+          value="未绑定"
+          is-link
+        >
+          <img src="../assets/info_list_icon_zhifubao.png" class="menu-img" slot="icon" alt />
+        </van-cell>
+      </van-cell-group>
+      <van-cell-group :border="false" style="margin-top:10px;">
+        <van-cell title="设置" title-class="menu-title" @click="goNext('setting')" is-link>
+          <img src="../assets/info_list_icon_zhifubao(1).png" class="menu-img" slot="icon" alt />
+        </van-cell>
+      </van-cell-group>
     </div>
+  </div>
 </template>
 <script>
 import { mapState } from "vuex";
 export default {
-    name: "",
-    data() {
-        return {};
-    },
-    computed: {
-        ...mapState(["userInfo"])
-    }
+  name: "",
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState(["userInfo"])
+  }
 };
 </script>
 <style lang='less' scoped>
 .user {
-    position: relative;
+  position: relative;
 }
 .top {
-    height: 190px;
-    background: rgba(255, 143, 0, 1);
-    overflow: hidden;
+  height: 190px;
+  background: rgba(255, 143, 0, 1);
+  overflow: hidden;
 
-    .user-icon {
-        margin: 20px auto 0;
-    }
+  .user-icon {
+    margin: 20px auto 0;
+  }
 
-    .user-name {
-        font-size: 20px;
-        font-weight: bold;
-        color: rgba(255, 255, 255, 1);
-        line-height: 28px;
-        text-align: center;
-        margin: 10px auto 0;
-    }
+  .user-name {
+    font-size: 20px;
+    font-weight: bold;
+    color: rgba(255, 255, 255, 1);
+    line-height: 28px;
+    text-align: center;
+    margin: 10px auto 0;
+  }
 }
 
 .order {
-    width: 345px;
-    height: 140px;
-    background: rgba(255, 255, 255, 1);
-    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
-    border-radius: 4px;
-    position: absolute;
-    top: 140px;
-    left: 15px;
-    overflow: hidden;
+  width: 345px;
+  height: 140px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
+  position: absolute;
+  top: 140px;
+  left: 15px;
+  overflow: hidden;
 
-    .order-title {
-        font-size: 14px;
-        font-weight: bold;
-        color: rgba(0, 0, 0, 1);
-    }
+  .order-title {
+    font-size: 14px;
+    font-weight: bold;
+    color: rgba(0, 0, 0, 1);
+  }
 
-    .order-val {
-        font-size: 12px;
-        color: rgba(153, 153, 153, 1);
-    }
+  .order-val {
+    font-size: 12px;
+    color: rgba(153, 153, 153, 1);
+  }
 
-    .order-img {
-        width: 36px;
-        height: 36px;
-    }
+  .order-img {
+    width: 36px;
+    height: 36px;
+  }
 }
 
 .menu-list {
-    margin: 110px 0 0;
-    background-color: #f7f9fa;
+  margin: 110px 0 0;
+  background-color: #f7f9fa;
 
-    .menu-img {
-        width: 24px;
-        height: 24px;
-        margin-right: 10px;
-    }
+  .menu-img {
+    width: 24px;
+    height: 24px;
+    margin-right: 10px;
+  }
 
-    .menu-title {
-        font-size: 14px;
-        color: rgba(0, 0, 0, 1);
-    }
+  .menu-title {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 1);
+  }
 
-    .menu-not-val {
-        font-size: 13px;
-        color: rgba(255, 143, 0, 1);
-    }
+  .menu-not-val {
+    font-size: 13px;
+    color: rgba(255, 143, 0, 1);
+  }
 }
 </style>