添加 mall 模块

src/router/index.js

@@ -46,6 +46,7 @@ const MyRealname = () => import('views/my/MyRealname')
 // 消息
 const MessageIndex = () => import('views/my/Message')
 const MyVip = () => import('views/my/MyVip')
+const MyWallet = () => import('views/my/MyWallet')
 // 收藏夹
 const FavlistVideo = () => import('views/my/FavlistVideo')
 const FavlistImage = () => import('views/my/FavlistImage')
@@ -93,6 +94,19 @@ const FileVideo = () => import('views/disk/FileVideo')
 const FileAudio = () => import('views/disk/FileAudio')
 const FileText = () => import('views/disk/FileText')
 
+// ********************************************************************************************************************
+// 商城
+// ********************************************************************************************************************
+const Mall = () => import('views/mall/Mall')
+const Overview = () => import('views/mall/Overview')
+const Cart = () => import('views/mall/Cart')
+const Fav = () => import('views/mall/Fav')
+const Order = () => import('views/mall/Order')
+const ConfirmOrder = () => import('views/mall/ConfirmOrder')
+const Visit = () => import('views/mall/Visit')
+const Pay = () => import('views/mall/Pay')
+const Product = () => import('views/mall/Product')
+
 // ********************************************************************************************************************
 // 使用安装路由插件
 Vue.use(VueRouter)
@@ -132,6 +146,12 @@ const routes = [
         name: '小会员',
         component: MyVip,
         meta: { needAuth: true }
+      },
+      {
+        path: '/my/account/wallet',
+        name: '钱包',
+        component: MyWallet,
+        meta: { needAuth: true }
       }
     ]
   },
@@ -416,6 +436,63 @@ const routes = [
     ]
   },
   // ********************************************************************************************************************
+  {
+    path: '/mall',
+    name: 'Mall',
+    component: Mall,
+    meta: { needAuth: false },
+    children: [
+      {
+        path: '',
+        name: '概览',
+        component: Overview,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/mall/cart',
+        name: '购物车',
+        component: Cart,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/mall/fav',
+        name: '收藏夹',
+        component: Fav,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/mall/order',
+        name: '订单',
+        component: Order,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/mall/order/confirm',
+        name: 'ConfirmOrder',
+        component: ConfirmOrder,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/mall/visit',
+        name: '浏览记录',
+        component: Visit,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/mall/pay',
+        name: 'Pay',
+        component: Pay,
+        meta: { needAuth: false }
+      },
+      {
+        path: '/mall/item',
+        name: 'Product',
+        component: Product,
+        meta: { needAuth: false }
+      },
+    ]
+  },
+  // ********************************************************************************************************************
   {
     path: '/timeline',
     name: 'TimelineIndex',

src/views/mall/Cart.vue

@@ -0,0 +1,278 @@
+<template>
+  <el-row class="movie-list">
+    <el-col :md="20">
+      <el-row>
+        <el-table
+          ref="multipleTable"
+          :data="dataList"
+          :show-header="true"
+          border
+          style="width: 100%"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column
+            type="selection"
+          />
+          <el-table-column
+            fixed="left"
+            label="商品信息"
+          >
+            <template slot-scope="scope">
+              <el-row>
+                <el-col :md="4">
+                  <el-image :src="scope.row.coverUrl" min-width="30" height="20" />
+                </el-col>
+                <el-col :md="20">
+                  <router-link target="_blank" style="text-decoration-line: none" :to="`/mall/item?id=${scope.row.productId}`">
+                    <span>{{scope.row.title}}</span>
+                  </router-link>
+                </el-col>
+              </el-row>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="sku"
+            label="sku"
+          />
+          <el-table-column
+            label="单价"
+          >
+            <template slot-scope="scope">
+              <span style="color: red">￥{{scope.row.price}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="数量"
+          >
+            <template slot-scope="scope">
+              <el-input-number v-model="scope.row.num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+          >
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                @click="cache(scope.row)"
+              >移入关注</el-button>
+              <el-button
+                size="mini"
+                @click="cache(scope.row)"
+              >删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-row>
+      <el-row>
+<!--        <el-pagination
+          background
+          :small="screenWidth <= 768"
+          layout="prev, pager, next"
+          :page-size="pageSize"
+          :current-page="currentPage"
+          :total="totalSize"
+          @current-change="handleCurrentChange"
+          @prev-click="handleCurrentChange"
+          @next-click="handleCurrentChange"
+        />-->
+        <el-form :inline="true" class="demo-form-inline">
+          <el-form-item>
+            <el-checkbox v-model="checked">全选</el-checkbox>
+          </el-form-item>
+          <el-form-item>
+            <el-button size="mini" type="plain" @click="deleteMultiple">快速清理</el-button>
+            <el-button size="mini" type="plain" @click="deleteMultiple">移入关注</el-button>
+            <el-button size="mini" type="plain" @click="deleteMultiple">删除</el-button>
+          </el-form-item>
+          <el-form-item>
+            <span style="position: relative; bottom: 0; right: 0; color:blue">
+              已选商品 <span style="color: red">{{multipleSelection.length}}</span> 件
+            </span>
+            <span style="position: relative; bottom: 0; right: 0; color:blue">
+              合计（不含运费）： <span style="color: red">{{totalPrice}}</span> 元
+            </span>
+            <el-button size="mini" type="danger" @click="buy">结算</el-button>
+          </el-form-item>
+        </el-form>
+      </el-row>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import {
+  addDiskFolder,
+  deleteDiskFile,
+  getFileDetail,
+  getFileList,
+  getFileUrl,
+  getFolderTree,
+  moveDiskFile
+} from "@/api/disk";
+
+export default {
+  name: 'Cart',
+  data() {
+    return {
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 10,
+      totalSize: 0,
+      dataList: [
+        {
+          productId: 1,
+          title: '莽牛MN78长续航电池7.4V2500毫安MN99S兰达科技P06大容量MN82锂电',
+          price: 1.11,
+          num: 1,
+          coverUrl: '//pic4.zhimg.com/v2-40c2552d5f3f63c181c19d66644de7e9_r.jpg',
+        },
+        {
+          productId: 2,
+          title: '莽牛MN78长续航电池7.4V2500毫安MN99S兰达科技P06大容量MN82锂电',
+          price: 2.32,
+          num: 1,
+          coverUrl: '//pic4.zhimg.com/v2-40c2552d5f3f63c181c19d66644de7e9_r.jpg',
+        },
+        {
+          productId: 3,
+          title: '莽牛MN78长续航电池7.4V2500毫安MN99S兰达科技P06大容量MN82锂电',
+          price: 11.12,
+          num: 3,
+          coverUrl: '//pic4.zhimg.com/v2-40c2552d5f3f63c181c19d66644de7e9_r.jpg',
+        },
+        {
+          productId: 4,
+          title: '莽牛MN78长续航电池7.4V2500毫安MN99S兰达科技P06大容量MN82锂电',
+          price: 12.22,
+          num: 4,
+          coverUrl: '//pic4.zhimg.com/v2-40c2552d5f3f63c181c19d66644de7e9_r.jpg',
+        },
+      ],
+      checked: false,
+      searchForm: {
+        page: 1,
+        path: '/',
+        fileType: '0',
+        filename: null
+      },
+      multipleSelection: [],
+      totalSelected: 0,
+      totalPrice: '0.00'
+    }
+  },
+  created() {
+    const path = this.$route.query.path
+    if (path !== undefined && path !== null) {
+      this.searchForm.path = path
+    }
+
+    document.title = '购物车'
+    // this.getData(this.searchForm)
+  },
+  methods: {
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      this.searchForm.page = this.currentPage
+      this.getData(this.searchForm)
+    },
+    getData() {
+      this.dataList = []
+      getFileList(this.searchForm).then(resp => {
+        if (resp.code === 0) {
+          this.dataList = resp.data.fileList.list
+          this.totalSize = resp.data.fileList.totalSize
+        } else {
+          this.$notify({
+            title: '提示',
+            message: resp.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'error',
+          duration: 3000
+        })
+      })
+    },
+    getDetail(fileId) {
+      getFileDetail(fileId).then(resp => {
+        if (resp.code === 0) {
+          console.log(resp.data)
+        }
+      })
+    },
+    cache(row) {
+    },
+    search() {
+      this.currentPage = 1
+      this.searchForm.page = this.currentPage
+      this.getData(this.searchForm)
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    deleteMultiple() {
+      if (this.multipleSelection.length === 0) {
+        this.$notify({
+          message: '至少应选中一行',
+          type: 'warning',
+          duration: 3000
+        })
+        return
+      }
+
+      var fileIds = []
+      for (const item of this.multipleSelection) {
+        fileIds.push(item.fileId)
+      }
+
+      this.$confirm('确定要删除文件?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log('')
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
+    },
+    handleChange(value) {
+      console.log(value);
+    },
+    buy() {
+      this.$router.push({
+        path: '/mall/order/confirm',
+        query: {
+          pageNumber: 1
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px) {
+  .movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
+}
+
+.movie-list {
+  padding-top: 15px;
+  padding-left: 6%;
+  padding-right: 6%;
+}
+</style>

src/views/mall/ConfirmOrder.vue

@@ -0,0 +1,174 @@
+<template>
+  <el-row class="movie-list">
+    <el-col :md="20">
+      <el-row>
+        <h3>确认收货地址</h3>
+        <el-divider/>
+        <div v-for="(item, index) in addresses">
+          <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+            <el-radio v-model="item.radio" label="1">{{item.address}}</el-radio>
+          </el-row>
+        </div>
+      </el-row>
+      <el-row>
+        <h3>确认订单信息</h3>
+        <el-divider/>
+        <el-table
+          :data="dataList"
+          :show-header="true"
+          border
+          style="width: 100%"
+        >
+          <el-table-column
+            fixed="left"
+            label="商品信息"
+          >
+            <template slot-scope="scope">
+              <el-row>
+                <el-col :md="4">
+                  <el-image :src="scope.row.coverUrl" min-width="30" height="20" />
+                </el-col>
+                <el-col :md="20">
+                  <router-link target="_blank" style="text-decoration-line: none" :to="`/mall/item?id=${scope.row.productId}`">
+                    <span>{{scope.row.title}}</span>
+                  </router-link>
+                </el-col>
+              </el-row>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="sku"
+            label="sku"
+          />
+          <el-table-column
+            label="单价"
+          >
+            <template slot-scope="scope">
+              <span style="color: red">￥{{scope.row.price}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="num"
+            label="数量"
+          />
+          <el-table-column
+            prop="num"
+            label="小计"
+          />
+        </el-table>
+        <el-divider/>
+        <el-form>
+          <el-form-item>
+            <span style="position: relative; bottom: 0; right: 0; color:blue">
+              已选商品 <span style="color: red">{{dataList.length}}</span> 件
+            </span>
+            <span style="position: relative; bottom: 0; right: 0; color:blue">
+              合计（不含运费）： <span style="color: red">{{totalPrice}}</span> 元
+            </span>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="submit">
+              提交订单
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </el-row>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: 'ConfirmOrder',
+  data() {
+    return {
+      radio: '1',
+      addresses: [
+        {
+          radio: '1',
+          address: '云南省 迪庆藏族自治州 香格里拉县 小中甸镇'
+        },
+        {
+          radio: '2',
+          address: '云南省 昆明市 安宁市 连然街道'
+        },
+        {
+          radio: '3',
+          address: '四川省 成都市 武侯区 桂溪街道'
+        }
+      ],
+      dataList: [
+        {
+          productId: 1,
+          title: '莽牛MN78长续航电池7.4V2500毫安MN99S兰达科技P06大容量MN82锂电',
+          price: 1.11,
+          num: 1,
+          coverUrl: '//pic4.zhimg.com/v2-40c2552d5f3f63c181c19d66644de7e9_r.jpg',
+        },
+        {
+          productId: 2,
+          title: '莽牛MN78长续航电池7.4V2500毫安MN99S兰达科技P06大容量MN82锂电',
+          price: 2.32,
+          num: 1,
+          coverUrl: '//pic4.zhimg.com/v2-40c2552d5f3f63c181c19d66644de7e9_r.jpg',
+        },
+        {
+          productId: 3,
+          title: '莽牛MN78长续航电池7.4V2500毫安MN99S兰达科技P06大容量MN82锂电',
+          price: 11.12,
+          num: 3,
+          coverUrl: '//pic4.zhimg.com/v2-40c2552d5f3f63c181c19d66644de7e9_r.jpg',
+        },
+        {
+          productId: 4,
+          title: '莽牛MN78长续航电池7.4V2500毫安MN99S兰达科技P06大容量MN82锂电',
+          price: 12.22,
+          num: 4,
+          coverUrl: '//pic4.zhimg.com/v2-40c2552d5f3f63c181c19d66644de7e9_r.jpg',
+        },
+      ],
+      totalPrice: 22.22
+    }
+  },
+  created() {
+    document.title = '确认订单'
+  },
+  methods: {
+    submit() {
+      const loading = this.$loading({
+        lock: true,
+        text: '订单已提交, 跳转到支付页面',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      setTimeout(() => {
+        loading.close();
+        this.$router.push({
+          path: '/mall/pay',
+          query: {
+            pageNumber: 1
+          }
+        })
+      }, 5000);
+    }
+  }
+}
+</script>
+
+<style scoped>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px) {
+  .movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
+}
+
+.movie-list {
+  padding-top: 15px;
+  padding-left: 6%;
+  padding-right: 6%;
+}
+</style>

src/views/mall/Fav.vue

@@ -0,0 +1,23 @@
+<template>
+  <el-row>
+    <span>收藏夹</span>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: 'Fav',
+  data() {
+    return {
+    }
+  },
+  created() {
+    document.title = '我的收藏夹'
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/mall/Mall.vue

@@ -0,0 +1,100 @@
+<template>
+  <el-container style="height: 650px; border: 1px solid #eee">
+    <el-header style="text-align: right; font-size: 12px">
+      <el-row>
+        <el-col :md="2">
+          <ul class="el-menu--horizontal el-menu">
+            <li class="el-menu-item">
+              <a href="/mall" style="text-decoration-line: none">
+                <img src="@/assets/img/icon/logo.png" class="el-avatar--circle el-avatar--medium" alt="img">
+                mall
+              </a>
+            </li>
+          </ul>
+        </el-col>
+        <el-col :md="20">
+          <el-menu
+            :default-active="this.$route.path"
+            router
+            mode="horizontal"
+          >
+            <el-submenu index="/mall/my">
+              <template class="el-icon-user" slot="title">我的宝淘</template>
+              <el-menu-item index="/mall/order">
+                <template class="el-icon-s-order" slot="title">我的订单</template>
+              </el-menu-item>
+              <el-menu-item index="/mall/visit">
+                <template class="el-icon-shopping-cart-full" slot="title">浏览记录</template>
+              </el-menu-item>
+            </el-submenu>
+            <el-menu-item index="/mall/cart">
+              <template slot="title">
+<!--                <span class="el-icon-shopping-cart-full">购物车</span>-->
+                <span>购物车</span>
+                <el-badge class="item" :value="statusCount" :max="99"></el-badge>
+              </template>
+            </el-menu-item>
+            <el-menu-item index="/mall/fav">
+              <template class="el-icon-collection" slot="title">收藏夹</template>
+            </el-menu-item>
+          </el-menu>
+        </el-col>
+        <el-col :md="2">
+          <el-dropdown>
+            <img
+              :src="user.avatarUrl"
+              class="el-avatar--circle el-avatar--medium"
+              style="margin-right: 10px; margin-top: 15px"
+              alt=""
+            >
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item
+                icon="el-icon-s-home"
+                class="size"
+                @click.native="goToHome"
+              >主页</el-dropdown-item>
+              <el-dropdown-item
+                icon="el-icon-error"
+                class="size"
+                @click.native="goToLogout"
+              >退出</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </el-col>
+      </el-row>
+    </el-header>
+    <el-container>
+      <el-main>
+        <router-view />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+import { userMixin } from 'assets/js/mixin'
+import { getAuthedUser } from '@/utils/auth'
+
+export default {
+  name: 'Mall',
+  mixins: [userMixin],
+  data() {
+    return {
+      user: {
+        avatarUrl: '//picx.zhimg.com/v2-df2ee990a53f8fa8d86226026630c354_xl.jpg'
+      },
+      statusCount: 12
+    }
+  },
+  created() {
+    document.title = '商城'
+    const userInfo = getAuthedUser()
+    if (userInfo !== null) {
+      this.user = userInfo
+    }
+  }
+}
+</script>
+
+<style>
+</style>

src/views/mall/Order.vue

@@ -0,0 +1,254 @@
+<template>
+  <el-row class="movie-list">
+    <el-col :md="20">
+      <el-row>
+        <el-table
+          ref="multipleTable"
+          :data="dataList"
+          :show-header="true"
+          border
+          style="width: 100%"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column
+            type="selection"
+          />
+          <el-table-column
+            fixed="left"
+            label="商品信息"
+          >
+            <template slot-scope="scope">
+              <el-row>
+                <el-col :md="4">
+                  <el-image :src="scope.row.coverUrl" min-width="30" height="20" />
+                </el-col>
+                <el-col :md="20">
+                  <router-link target="_blank" style="text-decoration-line: none" :to="`/mall/item?id=${scope.row.productId}`">
+                    <span>{{scope.row.title}}</span>
+                  </router-link>
+                </el-col>
+              </el-row>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="sku"
+            label="sku"
+          />
+          <el-table-column
+            label="单价"
+          >
+            <template slot-scope="scope">
+              <span style="color: red">￥{{scope.row.price}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="数量"
+          >
+            <template slot-scope="scope">
+              <el-input-number v-model="scope.row.num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="操作"
+          >
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                @click="cache(scope.row)"
+              >移入关注</el-button>
+              <el-button
+                size="mini"
+                @click="cache(scope.row)"
+              >删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-row>
+      <el-row>
+        <el-pagination
+          background
+          :small="screenWidth <= 768"
+          layout="prev, pager, next"
+          :page-size="pageSize"
+          :current-page="currentPage"
+          :total="totalSize"
+          @current-change="handleCurrentChange"
+          @prev-click="handleCurrentChange"
+          @next-click="handleCurrentChange"
+        />
+      </el-row>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import {
+  getFileDetail,
+  getFileList,
+} from "@/api/disk";
+
+export default {
+  name: 'Order',
+  data() {
+    return {
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 10,
+      totalSize: 0,
+      dataList: [
+        {
+          productId: 1,
+          title: '莽牛MN78长续航电池7.4V2500毫安MN99S兰达科技P06大容量MN82锂电',
+          price: 1.11,
+          num: 1,
+          coverUrl: '//pic4.zhimg.com/v2-40c2552d5f3f63c181c19d66644de7e9_r.jpg',
+        },
+        {
+          productId: 2,
+          title: '莽牛MN78长续航电池7.4V2500毫安MN99S兰达科技P06大容量MN82锂电',
+          price: 2.32,
+          num: 1,
+          coverUrl: '//pic4.zhimg.com/v2-40c2552d5f3f63c181c19d66644de7e9_r.jpg',
+        },
+        {
+          productId: 3,
+          title: '莽牛MN78长续航电池7.4V2500毫安MN99S兰达科技P06大容量MN82锂电',
+          price: 11.12,
+          num: 3,
+          coverUrl: '//pic4.zhimg.com/v2-40c2552d5f3f63c181c19d66644de7e9_r.jpg',
+        },
+        {
+          productId: 4,
+          title: '莽牛MN78长续航电池7.4V2500毫安MN99S兰达科技P06大容量MN82锂电',
+          price: 12.22,
+          num: 4,
+          coverUrl: '//pic4.zhimg.com/v2-40c2552d5f3f63c181c19d66644de7e9_r.jpg',
+        },
+      ],
+      checked: false,
+      searchForm: {
+        page: 1,
+        path: '/',
+        fileType: '0',
+        filename: null
+      },
+      multipleSelection: [],
+      totalSelected: 0,
+      totalPrice: '0.00'
+    }
+  },
+  created() {
+    const path = this.$route.query.path
+    if (path !== undefined && path !== null) {
+      this.searchForm.path = path
+    }
+
+    document.title = '我的订单'
+    // this.getData(this.searchForm)
+  },
+  methods: {
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      this.searchForm.page = this.currentPage
+      this.getData(this.searchForm)
+    },
+    getData() {
+      this.dataList = []
+      getFileList(this.searchForm).then(resp => {
+        if (resp.code === 0) {
+          this.dataList = resp.data.fileList.list
+          this.totalSize = resp.data.fileList.totalSize
+        } else {
+          this.$notify({
+            title: '提示',
+            message: resp.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'error',
+          duration: 3000
+        })
+      })
+    },
+    getDetail(fileId) {
+      getFileDetail(fileId).then(resp => {
+        if (resp.code === 0) {
+          console.log(resp.data)
+        }
+      })
+    },
+    cache(row) {
+    },
+    search() {
+      this.currentPage = 1
+      this.searchForm.page = this.currentPage
+      this.getData(this.searchForm)
+    },
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    },
+    deleteMultiple() {
+      if (this.multipleSelection.length === 0) {
+        this.$notify({
+          message: '至少应选中一行',
+          type: 'warning',
+          duration: 3000
+        })
+        return
+      }
+
+      var fileIds = []
+      for (const item of this.multipleSelection) {
+        fileIds.push(item.fileId)
+      }
+
+      this.$confirm('确定要删除文件?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        console.log('')
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消'
+        })
+      })
+    },
+    handleChange(value) {
+      console.log(value);
+    },
+    buy() {
+      this.$router.push({
+        path: '/mall/order/confirm',
+        query: {
+          pageNumber: 1
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px) {
+  .movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
+}
+
+.movie-list {
+  padding-top: 15px;
+  padding-left: 6%;
+  padding-right: 6%;
+}
+</style>

src/views/mall/Overview.vue

@@ -0,0 +1,23 @@
+<template>
+  <el-row>
+    <span>my emall</span>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: 'Overview',
+  data() {
+    return {
+    }
+  },
+  created() {
+    document.title = '我的商城'
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/mall/Pay.vue

@@ -0,0 +1,23 @@
+<template>
+  <el-row>
+    <span>支付页面</span>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: 'Pay',
+  data() {
+    return {
+    }
+  },
+  created() {
+    document.title = '支付页面'
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/mall/Product.vue

@@ -0,0 +1,105 @@
+<template>
+  <el-row class="movie-list">
+    <el-col :md="12">
+      <el-image :src="product.coverUrl" min-width="30" height="20" />
+    </el-col>
+    <el-col :md="12">
+      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <h1>{{product.title}}</h1>
+        <span>已售 {{product.sellNum}}+</span>
+        <h2 style="color: red">¥{{product.price}}</h2>
+      </el-row>
+      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <span>配送: {{product.from}} 至 {{to}} </span>
+      </el-row>
+      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <span>分类: </span>
+        <el-radio-group v-model="radio1" @change="onClick">
+          <el-radio-button label="上海"></el-radio-button>
+          <el-radio-button label="北京"></el-radio-button>
+          <el-radio-button label="广州"></el-radio-button>
+          <el-radio-button label="深圳"></el-radio-button>
+        </el-radio-group>
+      </el-row>
+      <el-form style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <el-form-item>
+          <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
+        </el-form-item>
+        <el-button round type="danger" @click="buy">立即购买</el-button>
+        <el-button round type="danger" @click="addCart">加入购物车</el-button>
+      </el-form>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: 'Product',
+  data() {
+    return {
+      product: {
+        productId: 1,
+        title: '莽牛MN78长续航电池7.4V2500毫安MN99S兰达科技P06大容量MN82锂电',
+        price: 1.11,
+        sellNum: 200,
+        coverUrl: '//pic4.zhimg.com/v2-40c2552d5f3f63c181c19d66644de7e9_r.jpg',
+        from: '广东深圳'
+      },
+      num: 1,
+      radio1: '上海',
+      radio2: '上海',
+      radio3: '上海',
+      radio4: '上海',
+      to: '成都'
+    }
+  },
+  created() {
+    const itemId = this.$route.query.id
+    if (itemId === undefined) {
+      this.$message("没有 item id")
+      return
+    } else if (itemId === '') {
+      this.$message("item id 为空")
+      return;
+    }
+    console.log(itemId)
+    document.title = '商品页面'
+  },
+  methods: {
+    handleChange(value) {
+      console.log(value);
+    },
+    onClick(value) {
+      console.log(value)
+    },
+    buy() {
+      this.$router.push({
+        path: '/mall/order/confirm',
+        query: {
+          pageNumber: 1
+        }
+      })
+    },
+    addCart() {
+      this.$message("已加入到购物车")
+    }
+  }
+}
+</script>
+
+<style scoped>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px) {
+  .movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
+}
+
+.movie-list {
+  padding-top: 15px;
+  padding-left: 6%;
+  padding-right: 6%;
+}
+</style>

src/views/mall/Visit.vue

@@ -0,0 +1,23 @@
+<template>
+  <el-row>
+    <span>浏览记录</span>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: 'Visit',
+  data() {
+    return {
+    }
+  },
+  created() {
+    document.title = '我的收藏夹'
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/views/my/My.vue

@@ -62,6 +62,10 @@
                 <i class="el-icon-film" />
                 <span slot="title">小会员</span>
               </el-menu-item>
+              <el-menu-item index="/my/account/wallet">
+                <i class="el-icon-wallet" />
+                <span slot="title">钱包</span>
+              </el-menu-item>
             </el-menu-item-group>
           </el-submenu>
           <el-submenu index="/my/post">

src/views/my/MyWallet.vue

@@ -0,0 +1,98 @@
+<template>
+  <el-row>
+    <el-col :md="12">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>我的钱包</span>
+          <el-button style="float: right; padding: 3px 0" type="text" @click="getRecord">账单</el-button>
+        </div>
+        <div class="text item">
+          <el-row>
+            <h1>余额: <span style="color: red">￥{{wallet.balance}}</span></h1>
+          </el-row>
+          <el-row>
+            <el-button
+              size="medium"
+              type="success"
+              @click="handleVip"
+            >充值</el-button>
+          </el-row>
+        </div>
+      </el-card>
+    </el-col>
+
+    <el-dialog
+      title="充值"
+      append-to-body
+      :visible.sync="createFolderDialog"
+      width="30%"
+      center
+    >
+      <el-form ref="form" :model="createFolderForm">
+        <el-form-item label="充值金额">
+          <el-input
+            v-model="createFolderForm.folderName"
+            placeholder="0.00"
+            style="width: 70%; padding-right: 2px"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            @click="onCreateFolder"
+          >确定</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </el-row>
+</template>
+
+<script>
+import StampBadge from '@/components/StampBadge'
+import { vip } from '@/api/account'
+
+export default {
+  name: 'MyVip',
+  components: { StampBadge },
+  data() {
+    return {
+      createFolderDialog: false,
+      createFolderForm: {
+        parent: null,
+        folderName: null
+      },
+      wallet: {
+        balance: '0.00'
+      }
+    }
+  },
+  created() {
+    document.title = '我的钱包'
+  },
+  mounted() {
+  },
+  methods: {
+    handleVip() {
+      this.createFolderDialog = true
+    },
+    onCreateFolder() {
+    },
+    getRecord() {
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+}
+
+.clearfix:after {
+  clear: both;
+}
+</style>