update mall

src/api/mall.js

@@ -3,6 +3,7 @@ import { delete0, get, post } from '@/utils/request'
 const mallApi = {
   productApi: '/api/mall/product',
   cartApi: '/api/mall/cart',
+  updateCartApi: '/api/mall/cart/update',
   orderApi: '/api/mall/order',
   payApi: '/api/mall/pay',
   payOrderApi: '/api/mall/pay/order',
@@ -10,6 +11,7 @@ const mallApi = {
   chargeWalletApi: '/api/mall/wallet/charge',
   payWalletApi: '/api/mall/wallet/pay',
   walletBillApi: '/api/mall/wallet/bill',
+  deliveryApi: '/api/mall/delivery',
 }
 
 export function addProduct(data) {
@@ -28,6 +30,10 @@ export function addCart(data) {
   return post(mallApi.cartApi, data)
 }
 
+export function updateCart(data) {
+  return post(mallApi.updateCartApi, data)
+}
+
 export function deleteFromCart(itemId) {
   return delete0(mallApi.cartApi + '/' + itemId)
 }
@@ -71,3 +77,7 @@ export function chargeWallet(data) {
 export function pay(data) {
   return post(mallApi.payWalletApi, data)
 }
+
+export function getUserDelivery() {
+  return get(mallApi.deliveryApi)
+}

src/views/mall/Cart.vue

@@ -45,7 +45,7 @@
             label="数量"
           >
             <template slot-scope="scope">
-              <el-input-number v-model="scope.row.num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
+              <el-input-number v-model="scope.row.num" @change="handleNumChange(scope.row)" :min="1" :max="10" label="描述文字"></el-input-number>
             </template>
           </el-table-column>
           <el-table-column
@@ -76,10 +76,8 @@
           @prev-click="handleCurrentChange"
           @next-click="handleCurrentChange"
         />-->
+        <el-divider/>
         <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>
@@ -101,16 +99,7 @@
 </template>
 
 <script>
-import {
-  addDiskFolder,
-  deleteDiskFile,
-  getFileDetail,
-  getFileList,
-  getFileUrl,
-  getFolderTree,
-  moveDiskFile
-} from "@/api/disk";
-import {deleteFromCart, getCartItems} from "@/api/mall";
+import {deleteFromCart, getCartItems, updateCart} from "@/api/mall";
 
 export default {
   name: 'Cart',
@@ -125,7 +114,7 @@ export default {
       checked: false,
       multipleSelection: [],
       totalSelected: 0,
-      totalPrice: '0.00'
+      totalPrice: 0.00
     }
   },
   created() {
@@ -168,7 +157,11 @@ export default {
       })
     },
     handleSelectionChange(val) {
+      this.totalPrice = 0.00
       this.multipleSelection = val
+      for (const item of val) {
+        this.totalPrice += item.price * item.num
+      }
     },
     deleteMultiple() {
       if (this.multipleSelection.length === 0) {
@@ -198,11 +191,22 @@ export default {
         })
       })
     },
-    handleChange(value) {
-      console.log(value);
+    handleNumChange(value) {
+      const jsonData = {}
+      jsonData.itemId = value.itemId
+      jsonData.num = value.num
+      updateCart(jsonData).then(resp => {
+        if (resp.code === 0) {
+        }
+      })
     },
     buy() {
-      console.log(this.multipleSelection)
+      var items = []
+      for (const item of this.multipleSelection) {
+        items.push(item)
+      }
+
+      window.sessionStorage.setItem('cart0', JSON.stringify(items))
       this.$router.push({
         path: '/mall/order/confirm',
         query: {

src/views/mall/ConfirmOrder.vue

@@ -6,7 +6,7 @@
         <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-radio v-model="radio" :label=item.deliveryId>{{item.address}}</el-radio>
           </el-row>
         </div>
       </el-row>
@@ -26,10 +26,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>
@@ -79,72 +79,47 @@
 </template>
 
 <script>
-import {submitOrder} from "@/api/mall";
+import {getUserDelivery, submitOrder} from "@/api/mall";
 
 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,
-      productId: null
+      addresses: [],
+      radio: null,
+      dataList: [],
+      totalPrice: 0.00,
+      productId: null,
+      formData: {
+        deliveryId: null
+      }
     }
   },
   created() {
     this.productId = this.$route.query.productId
+    var items = window.sessionStorage.getItem('cart0')
+    this.dataList = JSON.parse(items)
+    for (const item of this.dataList) {
+      this.totalPrice += item.price * item.num
+    }
 
     document.title = '确认订单'
+    getUserDelivery().then(resp => {
+      if (resp.code === 0) {
+        // console.log(resp.data)
+        this.addresses = resp.data
+      }
+    })
   },
   methods: {
     submitOrder() {
       const jsonData = {}
       jsonData.deliveryId = 110011
-      jsonData.itemId = this.productId
-      jsonData.num = 1
+      jsonData.items = []
+      for (const item of this.dataList) {
+        jsonData.items.push({itemId: item.itemId, num: item.num, shopId: item.shopId, sellerId: item.sellerId})
+      }
+
       submitOrder(jsonData).then(resp => {
         if (resp.code === 0) {
           const orderId = resp.data

src/views/mall/Mall.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-container style="border: 1px solid #eee">
+  <el-container style="border: 1px solid #eee; height: 720px">
     <el-header style="text-align: right; font-size: 12px">
       <el-row>
         <el-col :md="2">

src/views/mall/Order.vue

@@ -2,36 +2,67 @@
   <el-row class="movie-list">
     <el-col>
       <el-row>
-        <el-col v-for="(item, index) in dataList" :key="item.orderId" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-          <el-card class="box-card">
-            <div slot="header" class="clearfix">
-              <span>添加摄像头</span>
-            </div>
-            <div class="text item">
-              <el-col :md="18">
-                <el-form label-width="80px">
-                  <el-form-item label="设备 ID">
-                    <el-input v-model="item.orderId" />
-                  </el-form-item>
-                  <el-form-item label="设备名字">
-                    <el-input v-model="item.orderId" />
-                  </el-form-item>
-                </el-form>
-              </el-col>
-              <el-col :md="2">
-                <el-button size="mini" type="danger" @click="cache">立即添加</el-button>
-              </el-col>
-              <el-col :md="2">
-                <el-button size="mini" type="danger" @click="cache">立即添加</el-button>
-              </el-col>
-              <el-col :md="2">
-                <el-button size="mini" type="danger" @click="cache">立即添加</el-button>
-              </el-col>
-            </div>
-          </el-card>
-        </el-col>
-      </el-row>
-      <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.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.itemId}`">
+                    <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="collect(scope.row)"
+              >移入关注</el-button>
+              <el-button
+                size="mini"
+                @click="deleteOne(scope.row)"
+              >删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
         <el-pagination
           background
           :small="screenWidth <= 768"
@@ -152,14 +183,6 @@ export default {
     },
     handleChange(value) {
       console.log(value);
-    },
-    buy() {
-      this.$router.push({
-        path: '/mall/order/confirm',
-        query: {
-          productId: 1
-        }
-      })
     }
   }
 }

src/views/mall/Pay.vue

@@ -11,7 +11,7 @@
         </div>
       </el-row>
       <el-row>
-        <h3>订单信息</h3>
+        <h3>订单金额</h3>
         <el-divider/>
         <el-table
           :data="dataList"
@@ -86,51 +86,9 @@ export default {
   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,
+      addresses: [],
+      dataList: [],
+      totalPrice: 0.00,
       order: null
     }
   },

src/views/mall/Product.vue

@@ -21,6 +21,9 @@
           <el-radio-button label="深圳" />
         </el-radio-group>
       </el-row>
+      <el-form style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+        <span>库存: {{product.stock}}</span>
+      </el-form>
       <el-form style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
         <el-form-item>
           <el-input-number v-model="num" :min="1" :max="10" label="描述文字" @change="handleChange" />
@@ -89,7 +92,7 @@ export default {
       console.log(this.product)
       const jsonData = {}
       jsonData.itemId = this.product.itemId
-      jsonData.num = 1
+      jsonData.num = this.num
       addCart(jsonData).then(resp => {
         if (resp.code === 0) {
           this.$message('已添加到购物车')