update

src/api/admin.js

@@ -5,7 +5,9 @@ const adminApi = {
   userListApi: '/api/admin/user/list',
   postListApi: '/api/admin/video/post',
   setHotVideoApi: '/api/admin/video/sethot',
-  dataSourceApi: '/api/spider/data/source'
+  dataSourceApi: '/api/spider/data/source',
+  adminMessageApi: '/api/admin/message',
+  approveMessageApi: '/api/admin/message/approve',
 }
 
 // 获取站点公告
@@ -18,6 +20,14 @@ export function updateSiteNotice(data) {
   return post(adminApi.siteNoticeApi, data)
 }
 
+export function getMessages() {
+  return get(adminApi.adminMessageApi)
+}
+
+export function approveCharge(data) {
+  return post(adminApi.approveMessageApi, data)
+}
+
 // 获取用户列表
 export function getUserList(page) {
   return get(adminApi.userListApi, page)

src/api/mall.js

@@ -4,6 +4,8 @@ const mallApi = {
   productApi: '/api/content/mall/product',
   cartApi: '/api/content/mall/cart',
   orderApi: '/api/content/mall/order',
+  payApi: '/api/content/mall/pay',
+  payOrderApi: '/api/content/mall/pay/order',
   walletApi: '/api/content/mall/wallet',
   chargeWalletApi: '/api/content/mall/wallet/charge',
   payWalletApi: '/api/content/mall/wallet/pay',
@@ -38,6 +40,10 @@ export function submitOrder(data) {
   return post(mallApi.orderApi, data)
 }
 
+export function payOrder(orderId) {
+  return post(mallApi.payOrderApi + '/' + orderId)
+}
+
 export function createWallet() {
   return post(mallApi.walletApi)
 }

src/router/admin.js

@@ -0,0 +1,48 @@
+// ********************************************************************************************************************
+// 后台主页
+// ********************************************************************************************************************
+const Admin = () => import('views/admin/Admin')
+const SiteConfig = () => import('views/admin/SiteConfig')
+const Message = () => import('views/admin/Message')
+const UserList = () => import('views/admin/UserList')
+const PostList = () => import('views/admin/PostList')
+const DataSource = () => import('views/admin/DataSource')
+
+export default {
+  path: '/admin',
+  name: 'Admin',
+  component: Admin,
+  meta: { needAuth: true },
+  children: [
+    {
+      path: '',
+      name: 'SiteConfig',
+      component: SiteConfig,
+      meta: { needAuth: true }
+    },
+    {
+      path: '/admin/message',
+      name: 'Message',
+      component: Message,
+      meta: { needAuth: true }
+    },
+    {
+      path: '/admin/account/user',
+      name: '用户列表',
+      component: UserList,
+      meta: { needAuth: true }
+    },
+    {
+      path: '/admin/content/video',
+      name: '稿件列表',
+      component: PostList,
+      meta: { needAuth: true }
+    },
+    {
+      path: '/admin/content/datasource',
+      name: '数据源',
+      component: DataSource,
+      meta: { needAuth: true }
+    }
+  ]
+}

src/router/disk.js

@@ -0,0 +1,69 @@
+// ********************************************************************************************************************
+// 网盘主页
+// ********************************************************************************************************************
+const Disk = () => import('views/disk/Disk')
+const DiskOverview = () => import('views/disk/DiskOverview')
+const FileList = () => import('views/disk/FileList')
+const UploadFile = () => import('views/disk/UploadFile')
+const FileTrash = () => import('views/disk/FileTrash')
+const FileImage = () => import('views/disk/FileImage')
+const FileVideo = () => import('views/disk/FileVideo')
+const FileAudio = () => import('views/disk/FileAudio')
+const FileText = () => import('views/disk/FileText')
+
+export default {
+  path: '/disk',
+  name: 'Disk',
+  component: Disk,
+  meta: { needAuth: true },
+  children: [
+    {
+      path: '',
+      name: '概览',
+      component: DiskOverview,
+      meta: { needAuth: true }
+    },
+    {
+      path: '/disk/list',
+      name: '文件',
+      component: FileList,
+      meta: { needAuth: true }
+    },
+    {
+      path: '/disk/upload',
+      name: '上传',
+      component: UploadFile,
+      meta: { needAuth: true }
+    },
+    {
+      path: '/disk/image',
+      name: '图片',
+      component: FileImage,
+      meta: { needAuth: true }
+    },
+    {
+      path: '/disk/video',
+      name: '视频',
+      component: FileVideo,
+      meta: { needAuth: true }
+    },
+    {
+      path: '/disk/audio',
+      name: '音频',
+      component: FileAudio,
+      meta: { needAuth: true }
+    },
+    {
+      path: '/disk/text',
+      name: '文本',
+      component: FileText,
+      meta: { needAuth: true }
+    },
+    {
+      path: '/disk/trash',
+      name: 'Trash',
+      component: FileTrash,
+      meta: { needAuth: true }
+    }
+  ]
+}

src/router/index.js

@@ -1,20 +1,21 @@
 import VueRouter from 'vue-router'
 import Vue from 'vue'
+import MallRouter from './mall'
+import DiskRouter from './disk'
+import AdminRouter from './admin'
 
 // 懒加载引入页面组件，es6语法
 // ********************************************************************************************************************
-// 应用主页
 const Index = () => import('views/Index')
+
 const Home = () => import('views/home/Index')
 const TimelineIndex = () => import('views/home/Timeline')
 const VideoIndex = () => import('views/home/Video')
 const ShortVideoIndex = () => import('views/home/ShortVideo')
 const VideoPage = () => import('views/home/VideoPage')
 const VideoList = () => import('views/home/VideoList')
-
 const LivePage = () => import('views/cam/LivePage')
 const RecordPage = () => import('views/cam/RecordPage')
-
 const AudioIndex = () => import('views/home/Audio')
 const AudioPage = () => import('views/home/AudioPage')
 const ImageIndex = () => import('views/home/Image')
@@ -26,7 +27,6 @@ const Search = () => import('views/home/Search')
 const DiscoverIndex = () => import('views/home/Discover')
 const BdMap = () => import('views/home/BdMap')
 const AMap = () => import('views/home/AMap')
-const Vip = () => import('views/vip/Vip')
 
 // ********************************************************************************************************************
 // 用户前台主页
@@ -43,16 +43,12 @@ const My = () => import('views/my/My')
 const MyProfile = () => import('views/my/MyProfile')
 const MyContact = () => import('views/my/MyContact')
 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')
-// 浏览记录
 const HistoryIndex = () => import('views/my/History')
-
 const CamList = () => import('views/cam/CamList')
 
 // 发布稿件
@@ -72,45 +68,13 @@ const PostEditImage = () => import('components/upload/EditImage')
 const UserPostArticle = () => import('views/post/ArticlePost')
 const PostEditArticle = () => import('components/upload/EditArticle')
 
-// ********************************************************************************************************************
-// 后台主页
-// ********************************************************************************************************************
-const Admin = () => import('views/admin/Admin')
-const SiteConfig = () => import('views/admin/SiteConfig')
-const UserList = () => import('views/admin/UserList')
-const PostList = () => import('views/admin/PostList')
-const DataSource = () => import('views/admin/DataSource')
-
-// ********************************************************************************************************************
-// 网盘主页
-// ********************************************************************************************************************
-const Disk = () => import('views/disk/Disk')
-const DiskOverview = () => import('views/disk/DiskOverview')
-const FileList = () => import('views/disk/FileList')
-const UploadFile = () => import('views/disk/UploadFile')
-const FileTrash = () => import('views/disk/FileTrash')
-const FileImage = () => import('views/disk/FileImage')
-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)
 const routes = [
+  MallRouter,
+  DiskRouter,
+  AdminRouter,
   {
     path: '/my',
     name: 'My',
@@ -279,18 +243,6 @@ const routes = [
         component: CamList,
         meta: { needAuth: true }
       },
-      /* {
-        path: '/my/cam/live',
-        name: '实时录像',
-        component: LivePage,
-        meta: { needAuth: true }
-      },
-      {
-        path: '/my/cam/record',
-        name: '历史录像',
-        component: RecordPage,
-        meta: { needAuth: true }
-      },*/
       {
         path: '/my/cam/live/:camId',
         name: 'LivePage',
@@ -306,175 +258,6 @@ const routes = [
     ]
   },
   // ********************************************************************************************************************
-  {
-    path: '/admin',
-    name: 'Admin',
-    component: Admin,
-    meta: { needAuth: true }
-  },
-  {
-    path: '/admin/site',
-    name: '站点',
-    component: Admin,
-    meta: { needAuth: true },
-    children: [
-      {
-        path: '/admin/site/config',
-        name: '站点配置',
-        component: SiteConfig,
-        meta: { needAuth: true }
-      }
-    ]
-  },
-  {
-    path: '/admin/account',
-    name: '帐号',
-    component: Admin,
-    meta: { needAuth: true },
-    children: [
-      {
-        path: '/admin/account/user',
-        name: '用户列表',
-        component: UserList,
-        meta: { needAuth: true }
-      }
-    ]
-  },
-  {
-    path: '/admin/content',
-    name: '内容',
-    component: Admin,
-    meta: { needAuth: true },
-    children: [
-      {
-        path: '/admin/content/video',
-        name: '稿件列表',
-        component: PostList,
-        meta: { needAuth: true }
-      },
-      {
-        path: '/admin/content/datasource',
-        name: '数据源',
-        component: DataSource,
-        meta: { needAuth: true }
-      }
-    ]
-  },
-  // ********************************************************************************************************************
-  {
-    path: '/disk',
-    name: 'Disk',
-    component: Disk,
-    meta: { needAuth: true },
-    children: [
-      {
-        path: '',
-        name: '概览',
-        component: DiskOverview,
-        meta: { needAuth: true }
-      },
-      {
-        path: '/disk/list',
-        name: '文件',
-        component: FileList,
-        meta: { needAuth: true }
-      },
-      {
-        path: '/disk/upload',
-        name: '上传',
-        component: UploadFile,
-        meta: { needAuth: true }
-      },
-      {
-        path: '/disk/image',
-        name: '图片',
-        component: FileImage,
-        meta: { needAuth: true }
-      },
-      {
-        path: '/disk/video',
-        name: '视频',
-        component: FileVideo,
-        meta: { needAuth: true }
-      },
-      {
-        path: '/disk/audio',
-        name: '音频',
-        component: FileAudio,
-        meta: { needAuth: true }
-      },
-      {
-        path: '/disk/text',
-        name: '文本',
-        component: FileText,
-        meta: { needAuth: true }
-      },
-      {
-        path: '/disk/trash',
-        name: 'Trash',
-        component: FileTrash,
-        meta: { needAuth: true }
-      }
-    ]
-  },
-  // ********************************************************************************************************************
-  {
-    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',
@@ -654,12 +437,6 @@ const routes = [
         name: 'AMap',
         component: AMap,
         meta: { needAuth: false }
-      },
-      {
-        path: '/vip',
-        name: 'Vip',
-        component: Vip,
-        meta: { needAuth: false }
       }
     ]
   },

src/router/mall.js

@@ -0,0 +1,69 @@
+// ********************************************************************************************************************
+// 商城
+// ********************************************************************************************************************
+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')
+
+export default {
+  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 }
+    },
+  ]
+}

src/views/admin/Admin.vue

@@ -38,22 +38,10 @@
           class="el-menu-vertical-demo"
           :unique-opened="true"
         >
-<!--          <el-menu-item index="/admin/site">
-            <i class="el-icon-apple" />
-            <span slot="title">站点配置</span>
-          </el-menu-item>-->
-          <el-submenu index="/admin/site">
-            <template slot="title">
-              <i class="el-icon-user" />
-              <span slot="title">站点</span>
-            </template>
-            <el-menu-item-group>
-              <el-menu-item index="/admin/site/config">
-                <i class="el-icon-film" />
-                <span slot="title">站点配置</span>
-              </el-menu-item>
-            </el-menu-item-group>
-          </el-submenu>
+          <el-menu-item index="/admin/message">
+            <i class="el-icon-message" />
+            <span slot="title">消息</span>
+          </el-menu-item>
           <el-submenu index="/admin/account">
             <template slot="title">
               <i class="el-icon-user" />

src/views/admin/Message.vue

@@ -0,0 +1,148 @@
+<template>
+  <el-row>
+    <el-row>
+      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
+        <el-form-item>
+          <el-select v-model="searchForm.status" placeholder="状态" @change="search">
+            <el-option label="未下载" value="1" />
+            <el-option label="下载中" value="2" />
+            <el-option label="已下载" value="3" />
+            <el-option label="已发布" value="4" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="searchForm.title" placeholder="" />
+        </el-form-item>
+        <el-form-item>
+          <el-button size="mini" type="warning" @click="search">查询</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        :data="dataList"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="chargeId"
+          label="ID"
+        />
+        <el-table-column
+          prop="quantity"
+          label="金额"
+        />
+        <el-table-column
+          prop="owner"
+          label="Owner"
+        />
+        <el-table-column
+          label="操作"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="approve(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-row>
+</template>
+
+<script>
+import {approveCharge, getMessages} from '@/api/admin'
+
+export default {
+  name: 'DataSource',
+  data() {
+    return {
+      // 屏幕宽度, 为了控制分页条的大小
+      screenWidth: document.body.clientWidth,
+      currentPage: 1,
+      pageSize: 100,
+      totalSize: 0,
+      dataList: [],
+      searchForm: {
+        page: 1,
+        status: '1',
+        title: null
+      },
+      multipleSelection: []
+    }
+  },
+  created() {
+    document.title = '消息'
+    this.getData()
+  },
+  methods: {
+    handleCurrentChange(pageNumber) {
+      this.currentPage = pageNumber
+      this.searchForm.page = this.currentPage
+      this.getData()
+      // 回到顶部
+      scrollTo(0, 0)
+    },
+    getData() {
+      getMessages().then(resp => {
+        if (resp.code === 0) {
+          this.dataList = resp.data
+          // this.totalSize = resp.data.totalSize
+        } else {
+          this.$notify({
+            title: '提示',
+            message: resp.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'error',
+          duration: 3000
+        })
+      })
+    },
+    approve(row) {
+      approveCharge(row).then(resp => {
+        if (resp.code === 0) {
+          this.$notify({
+            message: row.title + ' 正在缓存中',
+            type: 'warning',
+            duration: 3000
+          })
+        } else {
+          this.$notify({
+            title: '提示',
+            message: resp.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      })
+    },
+    search() {
+      this.currentPage = 1
+      this.searchForm.page = this.currentPage
+      this.getData(this.searchForm)
+    },
+  }
+}
+</script>
+
+<style>
+</style>

src/views/mall/ConfirmOrder.vue

@@ -139,6 +139,7 @@ export default {
   methods: {
     submitOrder() {
       const jsonData = {}
+      jsonData.deliveryId = 110011
       jsonData.itemId = 1
       jsonData.num = 1
       submitOrder(jsonData).then(resp => {
@@ -154,7 +155,7 @@ export default {
             this.$router.push({
               path: '/mall/pay',
               query: {
-                pageNumber: 1
+                orderId: 1
               }
             })
           }, 5000);

src/views/mall/Order.vue

@@ -48,6 +48,10 @@
               <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
+            prop="status"
+            label="状态"
+          />
           <el-table-column
             label="操作"
           >
@@ -56,6 +60,10 @@
                 size="mini"
                 @click="cache(scope.row)"
               >移入关注</el-button>
+              <el-button
+                size="mini"
+                @click="cache(scope.row)"
+              >详情</el-button>
               <el-button
                 size="mini"
                 @click="cache(scope.row)"

src/views/mall/Pay.vue

@@ -1,23 +1,178 @@
 <template>
-  <el-row>
-    <span>支付页面</span>
+  <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="submitOrder">
+              支付订单
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </el-row>
+    </el-col>
   </el-row>
 </template>
 
 <script>
+import {payOrder} from "@/api/mall";
+
 export default {
   name: 'Pay',
   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 = '支付页面'
+    document.title = '支付订单'
   },
   methods: {
+    submitOrder() {
+      const orderId = 110011
+      payOrder(orderId).then(resp => {
+        if (resp.code === 0) {
+          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/order',
+            })
+          }, 1000);
+        }
+      })
+    }
   }
 }
 </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/vip/Vip.vue

@@ -1,60 +0,0 @@
-<template>
-  <div>
-    <el-row class="not-result">
-      <el-col :span="12" :offset="6">
-        <img src="@/assets/img/icon/not-collection.png">
-        <div>VIP 功能正在施工中</div>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Vip',
-  components: {},
-  data() {
-    return {
-      // 屏幕宽度, 为了控制分页条的大小
-      screenWidth: document.body.clientWidth,
-      currentPage: 1
-    }
-  },
-  created() {
-  },
-  mounted() {
-    // 当窗口宽度改变时获取屏幕宽度
-    window.onresize = () => {
-      return () => {
-        window.screenWidth = document.body.clientWidth
-        this.screenWidth = window.screenWidth
-      }
-    }
-  },
-  methods: {
-  }
-}
-</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%;
-}
-
-.not-result {
-  padding-top: 100px;
-  padding-bottom: 100px;
-  text-align: center;
-}
-</style>