update mall

src/views/mall/ConfirmOrder.vue

@@ -3,16 +3,16 @@
     <el-col :md="20">
       <el-row>
         <h3>确认收货地址</h3>
-        <el-divider/>
+        <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="radio" :label=item.deliveryId>{{item.address}}</el-radio>
+            <el-radio v-model="radio" :label="item.deliveryId">{{ item.address }}</el-radio>
           </el-row>
         </div>
       </el-row>
       <el-row>
         <h3>确认订单信息</h3>
-        <el-divider/>
+        <el-divider />
         <el-table
           :data="dataList"
           :show-header="true"
@@ -30,7 +30,7 @@
                 </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>
+                    <span>{{ scope.row.title }}</span>
                   </router-link>
                 </el-col>
               </el-row>
@@ -44,31 +44,36 @@
             label="单价"
           >
             <template slot-scope="scope">
-              <span style="color: red">￥{{scope.row.price}}</span>
+              <span style="color: red">￥{{ scope.row.price }}</span>
             </template>
           </el-table-column>
           <el-table-column
             prop="num"
             label="数量"
-          />
+          >
+            <template slot-scope="scope">
+              <el-input-number v-model="scope.row.num" :min="1" :max="20" style="margin-left: 5px" />
+            </template>
+          </el-table-column>
           <el-table-column
             prop="num"
             label="小计"
           />
         </el-table>
-        <el-divider/>
+        <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 style="color: red">{{ dataList.length }}</span> 件
             </span>
             <span style="position: relative; bottom: 0; right: 0; color:blue">
-              合计（不含运费）： <span style="color: red">{{totalPrice}}</span> 元
+              合计（不含运费）： <span style="color: red">{{ totalPrice }}</span> 元
             </span>
             <el-button
               size="mini"
               type="danger"
-              @click="submitOrder">
+              @click="submitOrder"
+            >
               提交订单
             </el-button>
           </el-form-item>
@@ -79,7 +84,7 @@
 </template>
 
 <script>
-import {getUserDelivery, submitOrder} from "@/api/mall";
+import {getProduct, getUserDelivery, submitOrder} from '@/api/mall'
 
 export default {
   name: 'ConfirmOrder',
@@ -96,14 +101,25 @@ export default {
     }
   },
   created() {
+    document.title = '确认订单'
     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
+    if (items !== null) {
+      this.dataList = JSON.parse(items)
+      for (const item of this.dataList) {
+        this.totalPrice += item.price * item.num
+      }
+    } else {
+      getProduct(this.productId).then(resp => {
+        if (resp.code === 0) {
+          const item = resp.data
+          item.num = 1
+          this.dataList.push(item)
+          this.totalPrice = item.price
+        }
+      })
     }
 
-    document.title = '确认订单'
     getUserDelivery().then(resp => {
       if (resp.code === 0) {
         // console.log(resp.data)
@@ -117,7 +133,7 @@ export default {
       jsonData.deliveryId = 110011
       jsonData.items = []
       for (const item of this.dataList) {
-        jsonData.items.push({itemId: item.itemId, num: item.num, shopId: item.shopId, sellerId: item.sellerId})
+        jsonData.items.push({ itemId: item.itemId, num: item.num, shopId: item.shopId, sellerId: item.sellerId })
       }
 
       submitOrder(jsonData).then(resp => {
@@ -128,16 +144,16 @@ export default {
             text: '订单已提交, 跳转到支付页面',
             spinner: 'el-icon-loading',
             background: 'rgba(0, 0, 0, 0.7)'
-          });
+          })
           setTimeout(() => {
-            loading.close();
+            loading.close()
             this.$router.push({
               path: '/mall/pay',
               query: {
                 orderId: orderId
               }
             })
-          }, 1000);
+          }, 1000)
         }
       })
     }

src/views/mall/Order.vue

@@ -3,18 +3,16 @@
     <el-col>
       <el-row>
         <el-table
-          ref="multipleTable"
           :data="dataList"
           :show-header="true"
           border
           style="width: 100%"
-          @selection-change="handleSelectionChange"
         >
           <el-table-column
-            type="selection"
+            prop="createAt"
+            label="创建时间"
           />
           <el-table-column
-            fixed="left"
             label="商品信息"
           >
             <template slot-scope="scope">
@@ -24,7 +22,7 @@
                 </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>
+                    <span>{{ scope.row.title }}</span>
                   </router-link>
                 </el-col>
               </el-row>
@@ -38,27 +36,31 @@
             label="单价"
           >
             <template slot-scope="scope">
-              <span style="color: red">￥{{scope.row.price}}</span>
+              <span style="color: red">￥{{ scope.row.price }}</span>
             </template>
           </el-table-column>
           <el-table-column
+            prop="amount"
             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>
+                @click="getDetail(scope.row)"
+              >详情</el-button>
               <el-button
                 size="mini"
-                @click="deleteOne(scope.row)"
+                type="warning"
+                @click="handleStatus(scope.row)"
+              >
+                {{ scope.row.statusText }}
+              </el-button>
+              <el-button
+                size="mini"
+                @click="deleteOrder(scope.row)"
               >删除</el-button>
             </template>
           </el-table-column>
@@ -76,11 +78,29 @@
         />
       </el-row>
     </el-col>
+
+    <el-dialog
+      title="支付"
+      append-to-body
+      :visible.sync="payDialog"
+      width="30%"
+      center
+    >
+    </el-dialog>
+
+    <el-dialog
+      title="物流"
+      append-to-body
+      :visible.sync="deliveryDialog"
+      width="30%"
+      center
+    >
+    </el-dialog>
   </el-row>
 </template>
 
 <script>
-import {getOrders} from "@/api/mall";
+import { getOrders } from '@/api/mall'
 
 export default {
   name: 'Order',
@@ -102,7 +122,9 @@ export default {
       multipleSelection: [],
       totalSelected: 0,
       totalPrice: '0.00',
-      productId: null
+      productId: null,
+      payDialog: false,
+      deliveryDialog: false
     }
   },
   created() {
@@ -141,48 +163,28 @@ export default {
         })
       })
     },
-    getDetail(fileId) {
+    getDetail(row) {
+      this.$message.info('订单 ' + row.orderId + ' 详情')
     },
-    cache(row) {
+    deleteOrder(row) {
+      this.$message.info(row.orderId)
+    },
+    handleStatus(row) {
+      const status = row.status
+      if (status === 1) {
+        this.payDialog = true
+      } else if (status === 2) {
+        this.deliveryDialog = true
+      } else if (status === 3) {
+        this.$message.info('待确认')
+      }
     },
     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);
     }
   }
 }

src/views/mall/Overview.vue

@@ -23,7 +23,7 @@
               </div>
               <div style="padding: 14px">
                 <span style="left: 0;margin-bottom: 0px;color: red;">
-                  {{item.price}}
+                  ¥{{item.price}}
                 </span>
                 <span style="right: 0;margin-bottom: 0px;color: black;">
                   {{item.monthSale}}

src/views/mall/Pay.vue

@@ -3,16 +3,16 @@
     <el-col :md="20">
       <el-row>
         <h3>收货地址</h3>
-        <el-divider/>
-        <div v-for="(item, index) in addresses">
+        <el-divider />
+        <div v-for="(item, index) in addresses" :key="index">
           <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="item.radio" label="1">{{ item.address }}</el-radio>
           </el-row>
         </div>
       </el-row>
       <el-row>
         <h3>订单金额</h3>
-        <el-divider/>
+        <el-divider />
         <el-table
           :data="dataList"
           :show-header="true"
@@ -26,11 +26,11 @@
             <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}`">
-                    <span>{{scope.row.title}}</span>
+                    <span>{{ scope.row.title }}</span>
                   </router-link>
                 </el-col>
               </el-row>
@@ -44,11 +44,11 @@
             label="单价"
           >
             <template slot-scope="scope">
-              <span style="color: red">￥{{scope.row.price}}</span>
+              <span style="color: red">￥{{ scope.row.price }}</span>
             </template>
           </el-table-column>
           <el-table-column
-            prop="num"
+            prop="amount"
             label="数量"
           />
           <el-table-column
@@ -56,19 +56,41 @@
             label="小计"
           />
         </el-table>
-        <el-divider/>
+      </el-row>
+      <el-row>
+        <el-card shadow="hover" style="width: 100%;">
+          <div style="width: 100%; display: inline-block; ">
+            <el-statistic
+              :value="deadline2"
+              format="HH:mm:ss"
+              time-indices
+              title="🎉付款倒计时🎉"
+              @finish="hilarity"
+            >
+              <template slot="prefix">
+                请在
+              </template>
+              <template slot="suffix">
+                分钟内付款
+              </template>
+            </el-statistic>
+          </div>
+        </el-card>
+      </el-row>
+      <el-row>
         <el-form>
           <el-form-item>
             <span style="position: relative; bottom: 0; right: 0; color:blue">
-              已选商品 <span style="color: red">{{dataList.length}}</span> 件
+              已选商品 <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 style="color: red">{{ totalPrice }}</span> 元
             </span>
             <el-button
               size="mini"
               type="danger"
-              @click="payOrder">
+              @click="payOrder"
+            >
               支付订单
             </el-button>
           </el-form-item>
@@ -79,7 +101,7 @@
 </template>
 
 <script>
-import {getOrder, payOrder} from "@/api/mall";
+import { getOrder, payOrder } from '@/api/mall'
 
 export default {
   name: 'Pay',
@@ -89,7 +111,8 @@ export default {
       addresses: [],
       dataList: [],
       totalPrice: 0.00,
-      order: null
+      order: null,
+      deadline2: Date.now() + 1000 * 60 * 15
     }
   },
   created() {
@@ -97,12 +120,17 @@ export default {
     getOrder(orderId).then(resp => {
       if (resp.code === 0) {
         this.order = resp.data
+        this.totalPrice = this.order.price * this.order.amount
+        this.dataList.push(this.order)
       }
     })
 
     document.title = '支付订单'
   },
   methods: {
+    hilarity() {
+      this.$message.info('订单超时')
+    },
     payOrder() {
       payOrder(this.order.orderId).then(resp => {
         if (resp.code === 0) {
@@ -111,13 +139,23 @@ export default {
             text: '订单已支付, 跳转到已购买商品页面',
             spinner: 'el-icon-loading',
             background: 'rgba(0, 0, 0, 0.7)'
-          });
+          })
+          setTimeout(() => {
+            loading.close()
+            this.$router.push({
+              path: '/mall/order'
+            })
+          }, 1000)
+        } else {
+          this.$notify.error({
+            title: '提示',
+            message: resp.msg
+          })
           setTimeout(() => {
-            loading.close();
             this.$router.push({
-              path: '/mall/order',
+              path: '/mall/order'
             })
-          }, 1000);
+          }, 1000)
         }
       })
     }

src/views/mall/Product.vue

@@ -1,39 +1,52 @@
 <template>
-  <el-row class="movie-list">
-    <el-col :md="12">
-      <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.monthSale }}</span>
-        <h2 style="color: red">¥{{ product.price }}</h2>
+  <el-container>
+    <el-main>
+      <el-row>
+        <el-col :span="8">
+          <el-row class="card-style">
+            <el-card>
+              <el-image :src="product.picUrl" min-width="30" height="20" />
+            </el-card>
+          </el-row>
+        </el-col>
+        <el-col :span="8">
+          <el-row class="card-style">
+            <el-card>
+              <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+                <h1>{{ product.title }}</h1>
+                <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">
+                <span>配送: {{ product.from }} 至 {{ to }} </span>
+              </el-row>
+              <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+                <div style="margin-top: 10px">
+                  <span>分类: </span>
+                  <el-radio-group v-model="radio1" size="medium" @change="onClick">
+                    <el-radio style="margin-top: 5px" label="1" border>北京</el-radio>
+                    <el-radio style="margin-top: 5px" label="2" border>上海</el-radio>
+                    <el-radio style="margin-top: 5px" label="3" border>广州</el-radio>
+                    <el-radio style="margin-top: 5px" label="4" border>深圳</el-radio>
+                  </el-radio-group>
+                </div>
+              </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-input-number v-model="num" :min="1" :max="10" label="描述文字" @change="handleChange" />
+              </el-form>
+              <el-form style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+                <el-button round type="danger" @click="buy">立即购买</el-button>
+                <el-button round type="danger" @click="addCart">加入购物车</el-button>
+              </el-form>
+            </el-card>
+          </el-row>
+        </el-col>
       </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 label="北京" />
-          <el-radio-button label="广州" />
-          <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" />
-        </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-divider />
-  </el-row>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
@@ -106,16 +119,12 @@ export default {
 <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%;
+.card-style {
+  padding-top: 3px;
+  padding-bottom: 3px;
+  padding-left: 3px;
+  padding-right: 3px;
 }
 </style>