TBtools-创建订单接口

htmldev/TBTools/src/router/index.js

@@ -188,11 +188,23 @@ const mallRoutes = [
     })
   },
   {
-    path: '/goods-order',
-    component: _import('modules/mall/goods-order'),
-    name: 'goodsOrder',
+    path: '/goods-create-order',
+    component: _import('modules/mall/goods-create-order'),
+    name: 'goodsCreateOrder',
     meta: {
-      title: '确认订单',
+      title: '创建订单',
+      isUseCache: false
+    },
+    props: (route) => ({
+      id: route.query.id
+    })
+  },
+  {
+    path: '/goods-order-detail',
+    component: _import('modules/mall/goods-order-detail'),
+    name: 'goodsOrderDetail',
+    meta: {
+      title: '订单详情',
       isUseCache: false
     },
     props: (route) => ({

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

@@ -0,0 +1,222 @@
+<template>
+  <el-row v-loading="dataListLoading">
+    <el-col :span="20" :offset="1">
+      <h3>请您根据步骤提示下单</h3>
+    </el-col>
+    <el-col :span="20" :offset="2">
+      <el-form :model="formData"
+               :rules="rules"
+               label-position="right"
+               ref="ruleForm">
+        <el-form-item>
+          <h4>1. 当前已经选择的礼品<span>(特别说明：下单后，每个人将收到的包裹将包含以上商品)</span></h4>
+          <el-table
+            :data="tableData"
+            border
+            style="width: 100%">
+            <el-table-column
+              prop="info"
+              label="商品信息">
+              <template slot-scope="scope">
+                <div class="TT-goods_info">
+                  <div class="photo">
+                    <img :src="scope.row.productImgUrl" alt="">
+                  </div>
+                  <p>{{ scope.row.productName }}</p>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="productPrice"
+              label="商品价格"
+              width="180">
+            </el-table-column>
+            <el-table-column
+              prop="warehouseName"
+              label="仓库"
+              width="200">
+            </el-table-column>
+          </el-table>
+        </el-form-item>
+        <el-form-item prop="miandan">
+          <h4>2. 选择收件人信息数据来源</h4>
+          <el-radio-group v-model="formData.miandan">
+            <el-radio :label="item.name"
+                      v-for="(item, index) in miandan"
+                      :key="index">{{ item.name }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item>
+          <h4>3. 填写收件人地址</h4>
+        </el-form-item>
+        <el-form-item class="TT-el-form-item" label="收件人姓名：" prop="reveiverName">
+          <el-input placeholder="请输入收件人姓名" v-model="formData.reveiverName"></el-input>
+        </el-form-item>
+        <el-form-item class="TT-el-form-item" label="收件人手机号：" prop="reveiverPhone">
+          <el-input type="tel" placeholder="请输入收件人手机号" v-model="formData.reveiverPhone"></el-input>
+        </el-form-item>
+        <el-form-item class="TT-el-form-item" label="收件人地址：" prop="reveiverAddress">
+          <el-input type="textarea" placeholder="请输入收件人地址" :rows="10" v-model="formData.reveiverAddress"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <h4>4. 提交</h4>
+          <el-button type="primary"
+                     :disabled="isDisabled"
+                     class="TT-submit-button"
+                     @click="submitForm('ruleForm')">确认提交
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import Crypto from '@/utils/crypto'
+
+export default {
+  name: 'goods-order',
+  props: {
+    id: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      dataListLoading: false,
+      isDisabled: false,
+      tableData: [],
+      miandanVal: [],
+      miandan: [],
+      formData: {
+        miandan: '',
+        reveiverName: '',
+        reveiverPhone: '',
+        reveiverAddress: ''
+      },
+      rules: {
+        miandan: [{ required: true, message: '请选择收件人信息数据来源', trigger: 'blur' }],
+        reveiverName: [{ required: true, message: '请输入收件人姓名', trigger: 'blur' }],
+        reveiverPhone: [{ required: true, message: '请输入收件人手机号', trigger: 'blur' }],
+        reveiverAddress: [{ required: true, message: '请输入收件人地址', trigger: 'blur' }]
+      }
+    }
+  },
+  created () {
+    this.funInit()
+  },
+  methods: {
+    funInit () {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/gift/product/detail'),
+        method: 'get',
+        params: this.$http.adornParams({
+          'id': Crypto.decrypt(this.id)
+        })
+      }).then(({ data }) => {
+        if (data.status) {
+          const { miandan } = data.data
+          this.tableData = [
+            {
+              ...data.data
+            }
+          ]
+          this.miandan = miandan
+        } else {
+          this.$message.error(data.msg)
+        }
+        this.dataListLoading = false
+      })
+    },
+    submitForm (formName) {
+      const { miandan, reveiverName, reveiverPhone, reveiverAddress } = this.formData
+      const postData = {
+        'id': Crypto.decrypt(this.id),
+        'miandan': miandan,
+        'receiverData': [
+          {
+            'reveiverName': reveiverName,
+            'reveiverPhone': reveiverPhone,
+            'reveiverAddress': reveiverAddress
+          }
+        ]
+      }
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          if (this.isDisabled) {
+            return
+          }
+          this.isDisabled = true
+          this.$http({
+            url: this.$http.adornUrl('/gift/order/create'),
+            method: 'post',
+            data: this.$http.adornData(postData)
+          }).then(({ data }) => {
+            this.isDisabled = false
+            if (data.status) {
+              return
+            }
+            this.$message.error(data.msg)
+          }).catch(() => {
+            this.isDisabled = false
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+h4 {
+  display: flex;
+  align-items: center;
+
+  span {
+    font-size: 12px;
+    color: #666;
+  }
+}
+
+.TT-goods_info {
+  display: flex;
+
+  .photo {
+    width: 100px;
+    height: 100px;
+    overflow: hidden;
+
+    img {
+      display: block;
+      width: 100%;
+    }
+
+    & + p {
+      flex: 1;
+      word-break: break-all;
+      margin-left: 6px;
+    }
+  }
+}
+
+.TT-el-form-item {
+  display: flex;
+  align-items: flex-start;
+
+  /deep/ .el-form-item__label {
+    width: 9em;
+  }
+
+  /deep/ .el-form-item__content {
+    width: 60%;
+  }
+}
+
+.TT-submit-button {
+  width: 200px;
+  margin-top: 20px;
+}
+</style>

htmldev/TBTools/src/views/modules/mall/goods-detail.vue

@@ -26,7 +26,7 @@
           <span class="col_f64f6f">¥{{ info.warehousePrice >= 0 ? info.warehousePrice.toFixed(2) : '' }}</span>
         </el-form-item>
         <el-form-item class="margin-top_30">
-          <el-button type="primary" @click="$router.push({name: 'goodsOrder', query: {id: id}})">立即购买</el-button>
+          <el-button type="primary" @click="$router.push({name: 'goodsCreateOrder', query: {id: id}})">立即购买</el-button>
         </el-form-item>
       </el-form>
     </el-col>

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

@@ -1,10 +1,10 @@
 <template>
-  <div>goods-order</div>
+  <div>goods-create-order</div>
 </template>
 
 <script>
 export default {
-  name: 'goods-order'
+  name: 'goods-order-detail'
 }
 </script>
 

htmldev/TBTools/src/views/modules/mall/index.vue

@@ -55,7 +55,7 @@
               </div>
               <div class="mask"
                    :class="{'active': activeGoodsInedex === index}">
-                <el-button @click="funJumpGoodsOrder(item)">立即购买</el-button>
+                <el-button @click="funJumpGoodsCreateOrder(item)">立即购买</el-button>
                 <el-button @click="funJumpGoodsDetail(item)">查看详情</el-button>
               </div>
             </div>
@@ -152,9 +152,9 @@ export default {
         return value ? val1 - val2 : val2 - val1
       })
     },
-    funJumpGoodsOrder (item = {}) {
+    funJumpGoodsCreateOrder (item = {}) {
       const { id } = item
-      this.$router.push({ name: 'goodsOrder', query: { id: Crypto.encrypt(id.toString()) } })
+      this.$router.push({ name: 'goodsCreateOrder', query: { id: Crypto.encrypt(id.toString()) } })
     },
     funJumpGoodsDetail (item = {}) {
       const { id } = item