update

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <router-view style="height: 100vh" />
+    <router-view style="height: 99vh" />
   </div>
 </template>
 

src/frame/client.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="client">
-    <van-nav-bar :title="$metaInfo.title" left-text="返回" left-arrow @click-left="toBack" />
-    <router-view />
+    <van-nav-bar :title="$metaInfo.title" left-text="返回" left-arrow @click-left="toBack" fixed />
+    <router-view style="margin-top: 50px" />
   </div>
 </template>
 

src/plugins/element.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import Element from 'element-ui';
 const _ = require('lodash');
-const useList = ['Button', 'Row', 'Col', 'Image', 'Carousel', 'CarouselItem', 'Avatar', 'Divider', 'Tag'];
+const useList = ['Button', 'Row', 'Col', 'Image', 'Carousel', 'CarouselItem', 'Avatar', 'Divider', 'Tag', 'Link'];
 
 for (const key of useList) {
   const component = Element[_.upperFirst(key)];

src/plugins/vant.js

@@ -1,9 +1,38 @@
 import Vue from 'vue';
-import { Grid, GridItem, Sidebar, SidebarItem, NavBar, Card } from 'vant';
+import {
+  RadioGroup,
+  Radio,
+  Form,
+  Button,
+  Grid,
+  GridItem,
+  Sidebar,
+  SidebarItem,
+  NavBar,
+  Card,
+  SubmitBar,
+  Cell,
+  CellGroup,
+  Field,
+  Tab,
+  Tabs,
+  Image as VanImage,
+} from 'vant';
 
+Vue.use(RadioGroup);
+Vue.use(Radio);
+Vue.use(Button);
 Vue.use(Grid);
 Vue.use(GridItem);
 Vue.use(Sidebar);
 Vue.use(SidebarItem);
 Vue.use(NavBar);
 Vue.use(Card);
+Vue.use(SubmitBar);
+Vue.use(Cell);
+Vue.use(CellGroup);
+Vue.use(Form);
+Vue.use(Field);
+Vue.use(Tab);
+Vue.use(Tabs);
+Vue.use(VanImage);

src/router/index.js

@@ -20,6 +20,42 @@ const test = [
     component: () => import(/* webpackChunkName: "p2" */ '../views/test/p3.vue'),
   },
 ];
+const shop = [
+  {
+    path: '/shop',
+    name: 'shop',
+    meta: { title: '选择商品' },
+    component: () => import(/* webpackChunkName: "shop" */ '../views/shop/index.vue'),
+  },
+  {
+    path: '/shop/order',
+    name: 'shop_order',
+    meta: { title: '订单支付' },
+    component: () => import(/* webpackChunkName: "shop_order" */ '../views/shop/order.vue'),
+  },
+];
+const order = [
+  {
+    path: '/order',
+    name: 'order',
+    meta: { title: '订单查看' },
+    component: () => import(/* webpackChunkName: "order" */ '../views/order/index.vue'),
+  },
+];
+const address = [
+  {
+    path: '/address',
+    name: 'address',
+    meta: { title: '地址管理' },
+    component: () => import(/* webpackChunkName: "address" */ '../views/address/index.vue'),
+  },
+  {
+    path: '/address/detail',
+    name: 'address_detail',
+    meta: { title: '地址管理' },
+    component: () => import(/* webpackChunkName: "address_detail" */ '../views/address/detail.vue'),
+  },
+];
 
 const routes = [
   ...test,
@@ -37,14 +73,7 @@ const routes = [
     path: '/',
     name: 'client',
     component: () => import(/* webpackChunkName: "client" */ '../frame/client.vue'),
-    children: [
-      {
-        path: '/shop',
-        name: 'shop',
-        meta: { title: '选择商品' },
-        component: () => import(/* webpackChunkName: "shop" */ '../views/shop/index.vue'),
-      },
-    ],
+    children: [...shop, ...order, ...address],
   },
 ];
 

src/views/address/detail.vue

@@ -0,0 +1,57 @@
+<template>
+  <div id="detail">
+    <van-form @submit="onSubmit">
+      <van-field
+        v-model="form.address"
+        name="收货地址"
+        label="收货地址"
+        placeholder="请填写收货地址"
+        :rules="[{ required: true, message: '请填写收货地址' }]"
+      />
+      <van-field v-model="form.contact" name="联系人" label="联系人" placeholder="请填写联系人" :rules="[{ required: true, message: '请填写联系人' }]" />
+      <van-field label="性别" name="性别" :rules="[{ required: true, message: '请选择性别' }]">
+        <template #input>
+          <van-radio-group v-model="form.gender" direction="horizontal">
+            <van-radio name="先生">先生</van-radio>
+            <van-radio name="女士">女士</van-radio>
+          </van-radio-group>
+        </template>
+      </van-field>
+      <van-field v-model="form.phone" name="手机号" label="手机号" placeholder="请填写手机号" :rules="[{ required: true, message: '请填写手机号' }]" />
+      <div style="margin: 16px">
+        <van-button round block type="info" native-type="submit">提交</van-button>
+      </div>
+    </van-form>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'detail',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      form: {},
+    };
+  },
+  created() {},
+  methods: {
+    onSubmit() {
+      console.log('in function:');
+    },
+  },
+  computed: {
+    ...mapState(['user', 'menuParams']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/address/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div id="index">
+    <van-cell-group>
+      <van-cell>
+        <el-row type="flex" align="middle" :gutter="10">
+          <el-col :span="22">
+            <el-col :span="24" style="padding: 10px">
+              <el-tag size="mini" effect="dark" type="danger" class="tag__margin">默认</el-tag>
+              <el-tag size="mini" effect="dark" type="primary" class="tag__margin">公司</el-tag>
+              刘 先生 130****1234
+            </el-col>
+            <el-col :span="24">
+              <span class="address__title">前进大街1244号吉林省科技厅科研园小二楼</span>
+            </el-col>
+          </el-col>
+          <el-col :span="2">
+            <el-link type="primary" :underline="false" @click="toEdit()">
+              <i class="el-icon-edit"></i>
+            </el-link>
+          </el-col>
+        </el-row>
+      </van-cell>
+    </van-cell-group>
+    <div class="position__bottom">
+      <el-button type="primary" style="width: 80%" @click="toAdd()">新增地址</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'index',
+  props: {},
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {
+    toEdit() {
+      this.$router.push('/address/detail');
+    },
+    toAdd() {
+      this.$router.push('/address/detail');
+    },
+  },
+  computed: {
+    ...mapState(['user', 'menuParams']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tag__margin {
+  margin-right: 3px;
+}
+.address__title {
+  font-size: 16px;
+  font-weight: 700;
+}
+.position__bottom {
+  position: fixed;
+  bottom: 20px;
+  width: 100%;
+  text-align: center;
+}
+</style>

src/views/home.vue

@@ -0,0 +1,55 @@
+<template>
+  <div id="Home">
+    <template name="轮播">
+      <el-carousel :interval="4000" height="200px" arrow="always">
+        <el-carousel-item v-for="item in 3" :key="item">
+          <el-image style="width: 100%; height: 100%" :src="url" fit="fit"></el-image>
+        </el-carousel-item>
+      </el-carousel>
+    </template>
+    <template name="微信用户">
+      <el-row type="flex" :gutter="10" style="margin-bottom: 10px">
+        <el-col :span="5">
+          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="width: 70px; height: 70px"></el-avatar>
+        </el-col>
+        <el-col :span="19">
+          <el-col :span="24" style="margin-top: 10px">凪稀冥</el-col>
+        </el-col>
+      </el-row>
+    </template>
+    <template name="菜单">
+      <van-grid :column-num="3">
+        <van-grid-item icon="photo-o" text="购买" to="/shop" />
+        <van-grid-item icon="photo-o" text="我的订单" to="/order" />
+        <van-grid-item icon="photo-o" text="地址管理" to="/address" />
+      </van-grid>
+    </template>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'Home',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/order/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <div id="index">
+    <van-tabs v-model="act" sticky offset-top="45px" lazy-render>
+      <van-tab v-for="(t, ti) in tagList" :key="`tag${ti}`" :title="t.title" :name="t.name">
+        <list :list="list" :type="t.name"></list>
+      </van-tab>
+    </van-tabs>
+  </div>
+</template>
+
+<script>
+import list from './parts/list.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'index',
+  props: {},
+  components: { list },
+  data: function () {
+    return {
+      act: 'all',
+      tagList: [
+        { title: '全部', name: 'all' },
+        { title: '待付款', name: '0' },
+        { title: '待收货', name: '1' },
+        { title: '退款/售后', name: '-1' },
+      ],
+      list: [
+        {
+          name: '折扣商品-1',
+          id: 'discount-1',
+          money: 10,
+          images: [{ url: 'https://img.yzcdn.cn/vant/cat.jpeg' }],
+          tags: ['1人份', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml'],
+          num: 1,
+        },
+        {
+          name: '折扣商品-2',
+          id: 'discount-1',
+          money: 12,
+          images: [{ url: 'https://img.yzcdn.cn/vant/cat.jpeg' }],
+          tags: ['1人份', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml'],
+          num: 2,
+        },
+        {
+          name: '折扣商品-1',
+          id: 'discount-3',
+          money: 15,
+          images: [{ url: 'https://img.yzcdn.cn/vant/cat.jpeg' }],
+          tags: ['1人份', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml'],
+          num: 3,
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user', 'menuParams']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/order/parts/list.vue

@@ -0,0 +1,65 @@
+<template>
+  <div id="list">
+    <el-row style="padding: 20px 10px" v-for="i in 10" :key="`order-${i}`">
+      <el-col :span="24" style="text-align: right; font-size: 16px; color: #666">
+        {{ type === 'all' ? '已完成' : type === '0' ? '待付款' : type == '1' ? '待收货' : '退款/售后' }}
+      </el-col>
+      <el-col :span="23">
+        <el-row :gutter="5">
+          <el-col :span="6" v-for="k in i" :key="`k-${k}-i-${i}`" style="margin-top: 5px">
+            <el-col :span="24">
+              <van-image width="70" height="70" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
+            </el-col>
+            <el-col :span="24" style="font-size: 10px">商品</el-col>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="24" style="margin-top: 5px">
+        <el-row type="flex">
+          <el-col :span="16">
+            <span class="word__time">下单时间:2021-03-04 12:00:00</span>
+          </el-col>
+          <el-col :span="8" style="text-align: right">
+            <span class="word__time">合计:￥<span class="word__money">42.00</span></span>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'list',
+  props: {
+    list: { type: Array, default: () => [] },
+    type: { type: String },
+  },
+  components: {},
+  data: function () {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user', 'menuParams']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.word__time {
+  font-size: 10px;
+}
+.word__money {
+  font-size: 16px;
+  font-weight: 600;
+}
+</style>

src/views/shop/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div id="index">
-    <el-row type="flex" :gutter="10" style="height: 85vh">
+    <el-row type="flex" :gutter="10" style="height: 90vh">
       <el-col :span="6">
         <van-sidebar v-model="tag" @change="changeTab">
           <van-sidebar-item v-for="(tag, ti) in tagList" :key="`tag-${ti}`" :title="tag.title" />
         </van-sidebar>
       </el-col>
-      <el-col :span="19" style="overflow-y: auto" id="view">
+      <el-col :span="19" style="overflow-y: auto; margin-bottom: 30px" id="view">
         <template v-for="(gt, gti) in list" name="标签分割线">
           <el-divider :key="`good-tag-${gti}`" content-position="left" :id="gt.key">{{ gt.title }}</el-divider>
           <template name="商品">
@@ -28,6 +28,7 @@
         </template>
       </el-col>
     </el-row>
+    <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" />
   </div>
 </template>
 
@@ -48,6 +49,10 @@ export default {
     this.imitateGoodsList();
   },
   methods: {
+    onSubmit() {
+      console.log('in function:');
+      this.$router.push('/shop/order');
+    },
     changeTab(i) {
       const stag = this.tagList[i];
       const totag = document.getElementById(stag.key);

src/views/shop/order.vue

@@ -0,0 +1,123 @@
+<template>
+  <div id="order">
+    <el-row name="地址部分">
+      <el-col :span="24" style="padding: 10px">
+        <el-tag size="mini" effect="dark" type="danger" class="tag__margin">默认</el-tag>
+        <el-tag size="mini" effect="dark" type="primary" class="tag__margin">公司</el-tag>
+        刘 先生 130****1234
+      </el-col>
+      <el-col :span="24">
+        <van-cell-group>
+          <van-cell is-link>
+            <template #title>
+              <span class="address__title">前进大街1244号吉林省科技厅科研园小二楼</span>
+            </template>
+          </van-cell>
+        </van-cell-group>
+      </el-col>
+      <el-col :span="24">
+        <van-cell-group>
+          <van-cell>
+            <template #title>
+              <span class="word__title">立即送出</span>
+            </template>
+            <span class="word__send_time">大约23:00送达</span>
+          </van-cell>
+        </van-cell-group>
+      </el-col>
+    </el-row>
+    <template name="商品部分">
+      <van-card v-for="(g, gi) in goodsList" :key="`good-${gi}`" :price="g.money" :desc="g.desc" :title="g.name" :thumb="g.images[0].url" :num="g.num">
+        <template name="标签自定义" #tags>
+          <div style="margin: 3px 0" class="van-multi-ellipsis--l3">
+            <el-tag size="mini" v-for="(t, ti) in g.tags" :key="`g-t-${ti}-${gi}`" style="margin-right: 2px" plain>{{ t }}</el-tag>
+          </div>
+        </template>
+      </van-card>
+    </template>
+    <div style="padding-bottom: 50px">
+      <van-cell-group>
+        <van-cell value-class="value_class" title="配送费" value="5"></van-cell>
+        <van-cell value-class="value_class" title="商品金额" value="37"></van-cell>
+        <van-field v-model="remark" label="备注" placeholder="若有需求,请填写备注"></van-field>
+      </van-cell-group>
+    </div>
+    <van-submit-bar :price="4200" button-text="提交订单" @submit="onSubmit" />
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  name: 'order',
+  props: {},
+  components: {},
+  data: function () {
+    return {
+      remark: '',
+      goodsList: [
+        {
+          name: '折扣商品-1',
+          id: 'discount-1',
+          money: 10,
+          images: [{ url: 'https://img.yzcdn.cn/vant/cat.jpeg' }],
+          tags: ['1人份', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml'],
+          num: 1,
+        },
+        {
+          name: '折扣商品-2',
+          id: 'discount-1',
+          money: 12,
+          images: [{ url: 'https://img.yzcdn.cn/vant/cat.jpeg' }],
+          tags: ['1人份', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml'],
+          num: 2,
+        },
+        {
+          name: '折扣商品-1',
+          id: 'discount-3',
+          money: 15,
+          images: [{ url: 'https://img.yzcdn.cn/vant/cat.jpeg' }],
+          tags: ['1人份', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml', '微甜', '220ml'],
+          num: 3,
+        },
+      ],
+    };
+  },
+  created() {},
+  methods: {
+    onSubmit() {
+      console.log('in function:');
+    },
+  },
+  computed: {
+    ...mapState(['user', 'menuParams']),
+    pageTitle() {
+      return `${this.$route.meta.title}`;
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.tag__margin {
+  margin-right: 3px;
+}
+.address__title {
+  font-size: 20px;
+  font-weight: 700;
+}
+.word__title {
+  font-weight: 600;
+  font-size: 16px;
+}
+.word__send_time {
+  font-size: 16px;
+  color: orange;
+}
+.value_class {
+  color: #000;
+}
+</style>