更新 mall 模块

src/api/mall.js

@@ -0,0 +1,55 @@
+import { delete0, get, post } from '@/utils/request'
+
+const mallApi = {
+  productApi: '/api/content/mall/product',
+  cartApi: '/api/content/mall/cart',
+  orderApi: '/api/content/mall/order',
+  walletApi: '/api/content/mall/wallet',
+  chargeWalletApi: '/api/content/mall/wallet/charge',
+  payWalletApi: '/api/content/mall/wallet/pay',
+  walletBillApi: '/api/content/mall/wallet/bill',
+}
+
+export function addProduct(data) {
+  return post(mallApi.productApi, data)
+}
+
+export function getProducts(page) {
+  return get(mallApi.productApi + '?page=' + page)
+}
+
+export function getProduct(itemId) {
+  return get(mallApi.productApi + '/' + itemId)
+}
+
+export function addCart(data) {
+  return post(mallApi.cartApi, data)
+}
+
+export function getCartItems() {
+  return get(mallApi.cartApi)
+}
+
+export function submitOrder(data) {
+  return post(mallApi.orderApi, data)
+}
+
+export function createWallet() {
+  return post(mallApi.walletApi)
+}
+
+export function getWallet() {
+  return get(mallApi.walletApi)
+}
+
+export function getWalletBill() {
+  return get(mallApi.walletBillApi)
+}
+
+export function chargeWallet(data) {
+  return post(mallApi.chargeWalletApi, data)
+}
+
+export function pay(data) {
+  return post(mallApi.payWalletApi, data)
+}

src/views/mall/Cart.vue

@@ -20,10 +20,10 @@
             <template slot-scope="scope">
               <el-row>
                 <el-col :md="4">
-                  <el-image :src="scope.row.coverUrl" min-width="30" height="20" />
+                  <el-image :src="scope.row.picUrl" 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}`">
+                  <router-link target="_blank" style="text-decoration-line: none" :to="`/mall/item?id=${scope.row.itemId}`">
                     <span>{{scope.row.title}}</span>
                   </router-link>
                 </el-col>
@@ -110,6 +110,7 @@ import {
   getFolderTree,
   moveDiskFile
 } from "@/api/disk";
+import {getCartItems} from "@/api/mall";
 
 export default {
   name: 'Cart',
@@ -120,69 +121,26 @@ export default {
       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',
-        },
-      ],
+      dataList: [],
       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)
+    this.getData()
   },
   methods: {
     handleCurrentChange(pageNumber) {
       this.currentPage = pageNumber
-      this.searchForm.page = this.currentPage
-      this.getData(this.searchForm)
+      this.getData()
     },
     getData() {
-      this.dataList = []
-      getFileList(this.searchForm).then(resp => {
+      getCartItems().then(resp => {
         if (resp.code === 0) {
-          this.dataList = resp.data.fileList.list
-          this.totalSize = resp.data.fileList.totalSize
+          this.dataList = resp.data
         } else {
           this.$notify({
             title: '提示',
@@ -200,20 +158,8 @@ export default {
         })
       })
     },
-    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
     },
@@ -249,6 +195,7 @@ export default {
       console.log(value);
     },
     buy() {
+      console.log(this.multipleSelection)
       this.$router.push({
         path: '/mall/order/confirm',
         query: {

src/views/mall/ConfirmOrder.vue

@@ -68,7 +68,7 @@
             <el-button
               size="mini"
               type="danger"
-              @click="submit">
+              @click="submitOrder">
               提交订单
             </el-button>
           </el-form-item>
@@ -79,6 +79,8 @@
 </template>
 
 <script>
+import {submitOrder} from "@/api/mall";
+
 export default {
   name: 'ConfirmOrder',
   data() {
@@ -135,22 +137,29 @@ export default {
     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);
+    submitOrder() {
+      const jsonData = {}
+      jsonData.itemId = 1
+      jsonData.num = 1
+      submitOrder(jsonData).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/pay',
+              query: {
+                pageNumber: 1
+              }
+            })
+          }, 5000);
+        }
+      })
     }
   }
 }

src/views/mall/Overview.vue

@@ -1,23 +1,113 @@
 <template>
   <el-row>
-    <span>my emall</span>
+    <el-row class="movie-list">
+      <el-col v-for="(item, index) in dataList" :key="index" :md="6" :sm="12" :xs="12">
+        <el-col style="padding-right: 7px; padding-left: 7px; padding-bottom: 7px">
+          <div style="cursor: pointer" :title="item.title">
+            <el-card :body-style="{ padding: '0px' }" class="card">
+              <router-link target="_blank" :to="`/mall/item?id=${item.itemId}`">
+                <div class="imgs">
+                  <el-image
+                    lazy
+                    fit="cover"
+                    :src="item.picUrl"
+                    class="coverImg"
+                  />
+                  <span style="position: absolute; top: 0; left: 0; color:red"/>
+                </div>
+              </router-link>
+              <div style="padding: 14px">
+                <router-link style="text-decoration-line: none" target="_blank" :to="`/mall/item?id=${item.itemId}`">
+                  <span style="left: 0;margin-bottom: 0px;color: black;">{{ item.title | ellipsis }}</span>
+                </router-link>
+              </div>
+              <div style="padding: 14px">
+                <span style="left: 0;margin-bottom: 0px;color: red;">
+                  {{item.price}}
+                </span>
+                <span style="right: 0;margin-bottom: 0px;color: black;">
+                  {{item.monthSale}}
+                </span>
+              </div>
+            </el-card>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
   </el-row>
 </template>
 
 <script>
+import {getProducts} from "@/api/mall";
+
 export default {
   name: 'Overview',
+  filters: {
+    ellipsis(value) {
+      if (!value) return ''
+      const max = 15
+      if (value.length > max) {
+        return value.slice(0, max) + '...'
+      }
+      return value
+    },
+    ellipsisUsername(value) {
+      if (!value) return ''
+      const max = 5
+      if (value.length > max) {
+        return value.slice(0, max) + '...'
+      }
+      return value
+    }
+  },
   data() {
     return {
+      dataList: []
     }
   },
   created() {
     document.title = '我的商城'
+    this.getData()
   },
   methods: {
+    getData() {
+      getProducts(1).then(resp => {
+        if (resp.code === 0) {
+          this.dataList = resp.data
+        }
+      })
+    }
   }
 }
 </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;
+}
+
+.el-carousel__item h3 {
+  color: #475669;
+  font-size: 18px;
+  opacity: 0.75;
+  line-height: 300px;
+  margin: 0;
+}
 </style>

src/views/mall/Product.vue

@@ -1,12 +1,12 @@
 <template>
   <el-row class="movie-list">
     <el-col :md="12">
-      <el-image :src="product.coverUrl" min-width="30" height="20" />
+      <el-image :src="product.picUrl" 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>
+        <span>已售 {{product.monthSale}}</span>
         <h2 style="color: red">¥{{product.price}}</h2>
       </el-row>
       <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
@@ -33,6 +33,8 @@
 </template>
 
 <script>
+import {addCart, getProduct} from "@/api/mall";
+
 export default {
   name: 'Product',
   data() {
@@ -62,10 +64,19 @@ export default {
       this.$message("item id 为空")
       return;
     }
-    console.log(itemId)
+
+    this.getData(itemId)
     document.title = '商品页面'
   },
   methods: {
+    getData(itemId) {
+      getProduct(itemId).then(resp => {
+        if (resp.code === 0) {
+          this.product = resp.data
+          document.title = this.product.title
+        }
+      })
+    },
     handleChange(value) {
       console.log(value);
     },
@@ -81,7 +92,14 @@ export default {
       })
     },
     addCart() {
-      this.$message("已加入到购物车")
+      const jsonData = {}
+      jsonData.itemId = this.product.itemId
+      jsonData.num = 1
+      addCart(jsonData).then(resp => {
+        if (resp.code === 0) {
+          this.$message("已添加到购物车")
+        }
+      })
     }
   }
 }

src/views/my/MyWallet.vue

@@ -4,7 +4,7 @@
       <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>
+          <el-button style="float: right; padding: 3px 0" type="text" @click="getBillRecord">账单</el-button>
         </div>
         <div class="text item">
           <el-row>
@@ -14,7 +14,7 @@
             <el-button
               size="medium"
               type="success"
-              @click="handleVip"
+              @click="showChargeDialog"
             >充值</el-button>
           </el-row>
         </div>
@@ -24,14 +24,14 @@
     <el-dialog
       title="充值"
       append-to-body
-      :visible.sync="createFolderDialog"
+      :visible.sync="chargeDialog"
       width="30%"
       center
     >
-      <el-form ref="form" :model="createFolderForm">
+      <el-form ref="form" :model="chargeForm">
         <el-form-item label="充值金额">
           <el-input
-            v-model="createFolderForm.folderName"
+            v-model="chargeForm.quantity"
             placeholder="0.00"
             style="width: 70%; padding-right: 2px"
             clearable
@@ -40,7 +40,7 @@
         <el-form-item>
           <el-button
             type="primary"
-            @click="onCreateFolder"
+            @click="chargeWallet"
           >确定</el-button>
         </el-form-item>
       </el-form>
@@ -49,18 +49,16 @@
 </template>
 
 <script>
-import StampBadge from '@/components/StampBadge'
-import { vip } from '@/api/account'
+
+import {chargeWallet, getWallet, getWalletBill} from "@/api/mall";
 
 export default {
-  name: 'MyVip',
-  components: { StampBadge },
+  name: 'MyWallet',
   data() {
     return {
-      createFolderDialog: false,
-      createFolderForm: {
-        parent: null,
-        folderName: null
+      chargeDialog: false,
+      chargeForm: {
+        quantity: null
       },
       wallet: {
         balance: '0.00'
@@ -69,17 +67,37 @@ export default {
   },
   created() {
     document.title = '我的钱包'
+    getWallet().then(resp => {
+      if (resp.code === 0) {
+        this.wallet = resp.data
+      }
+    })
   },
   mounted() {
   },
   methods: {
-    handleVip() {
-      this.createFolderDialog = true
-    },
-    onCreateFolder() {
+    showChargeDialog() {
+      this.chargeDialog = true
     },
-    getRecord() {
+    chargeWallet() {
+      if (this.chargeForm.quantity === null) {
+        this.$message('请填写充值金额')
+        return
+      }
 
+      this.chargeDialog = false
+      chargeWallet(this.chargeForm).then(resp => {
+        if (resp.code === 0) {
+          this.$message('充值请求已提交')
+        }
+      })
+    },
+    getBillRecord() {
+      getWalletBill().then(resp => {
+        if (resp.code === 0) {
+          console.log(resp.data)
+        }
+      })
     }
   }
 }