TBtools-订单详情

htmldev/TBTools/src/views/modules/mall/goods-create-order.vue

@@ -1,8 +1,6 @@
 <template>
   <el-row v-loading="dataListLoading"
-          :element-loading-text="isDisabled ? '订单创建中' : '拼命加载中'"
-          element-loading-spinner="el-icon-loading"
-          element-loading-background="rgba(0, 0, 0, 0.8)">
+          :element-loading-text="isDisabled ? '订单创建中' : '拼命加载中'">
     <el-col :span="20" :offset="1">
       <h3>请您根据步骤提示下单</h3>
     </el-col>
@@ -44,7 +42,7 @@
         <el-form-item prop="miandan">
           <h4>2. 选择收件人信息数据来源</h4>
           <el-radio-group v-model="formData.miandan">
-            <el-radio :label="item.name"
+            <el-radio :label="item.value"
                       v-for="(item, index) in miandan"
                       :key="index">{{ item.name }}
             </el-radio>

htmldev/TBTools/src/views/modules/mine/order/order-check-order.vue

@@ -36,13 +36,14 @@
         prop="orderNumber"
         header-align="center"
         align="center"
-        width="80"
+        width="160"
         label="订单编号">
       </el-table-column>
       <el-table-column
         prop="orderName"
         header-align="center"
         align="center"
+        width="220"
         label="订单名称">
       </el-table-column>
       <el-table-column
@@ -55,15 +56,15 @@
         prop="orderPrice"
         header-align="center"
         align="center"
-        width="150"
+        width="80"
         :show-overflow-tooltip="true"
-        label="订单总价">
+        label="订单总价(金币)">
       </el-table-column>
       <el-table-column
         prop="createdAt"
         header-align="center"
         align="center"
-        width="150"
+        width="180"
         :show-overflow-tooltip="true"
         label="创建时间">
       </el-table-column>
@@ -71,7 +72,7 @@
         prop="orderStatus"
         header-align="center"
         align="center"
-        width="150"
+        width="120"
         :show-overflow-tooltip="true"
         label="订单状态">
         <template slot-scope="scope">
@@ -82,18 +83,22 @@
         prop="orderPayAt"
         header-align="center"
         align="center"
+        width="180"
         label="订单支付时间">
       </el-table-column>
       <el-table-column
         fixed="right"
         label="操作"
-        width="100">
+        width="200">
         <template slot-scope="scope">
-          <el-button @click="handleClick(scope.row)" type="text" size="small" v-if="scope.row.orderStatus === '1'">
-            查看包裹
+          <!--orderStatus：0未支付 1已支付 2已取消-->
+          <el-button size="small" @click="funJumpOrderCheckPackage(scope.row)">查看包裹
           </el-button>
-          <el-button @click="handleClick(scope.row)" type="text" size="small" v-else>
-            {{ scope.row.orderStatus === '0' ? '去支付' : '查看订单详情'}}
+          <el-button type="primary"
+                     size="small"
+                     :disabled="isDisabled"
+                     v-if="scope.row.orderStatus === 0"
+                     @click.stop="submitForm(scope.row, scope.$index)">支付
           </el-button>
         </template>
       </el-table-column>
@@ -130,7 +135,8 @@ export default {
       pageSize: 10,
       totalPage: 0,
       dataListLoading: false,
-      selectionDataList: []
+      selectionDataList: [],
+      isDisabled: false
     }
   },
   activated () {
@@ -153,7 +159,37 @@ export default {
       let preDays = new Date(preYear, preMonth, 1)
       return [`${preYear}-${preMonth}-${preDays.getDate()} 00:00:00`, `${year}-${month}-${day} 00:00:00`]
     },
-    handleClick () {},
+    funJumpOrderCheckPackage (obj = {}) {
+      const { orderNumber } = obj
+      this.$router.push({ name: 'orderCheckPackage', query: { orderNumber: orderNumber } })
+    },
+    submitForm (obj = {}, index) {
+      const { id, orderNumber } = obj
+      this.isDisabled = true
+      this.$http({
+        url: this.$http.adornUrl('/gift/order/pay'),
+        method: 'get',
+        params: this.$http.adornParams({
+          'id': id
+        })
+      }).then(({ data }) => {
+        this.isDisabled = false
+        if (data.status) {
+          this.$set(this.dataList[index], 'orderStatus', 1)
+          this.$message({
+            type: 'success',
+            message: data.msg,
+            onClose: () => {
+              this.$router.push({ name: 'orderCheckPackage', query: { orderNumber: orderNumber } })
+            }
+          })
+          return
+        }
+        this.$message.error(data.msg)
+      }).catch(() => {
+        this.isDisabled = false
+      })
+    },
     // 获取数据列表
     getDataList () {
       const { time, orderMiandan, orderNumber } = this.dataForm