update

src/api/order.js

@@ -18,7 +18,7 @@ export function getOrderList(data) {
  * 创建订单
  */
 export function addOrder(data) {
-  return httpRequest.post('/api/shop/order/add', data)
+  return httpRequest.post('/api/shop/order/backend/add', data)
 }
 
 /**

src/components/base/userAutocomplete.vue

@@ -38,7 +38,6 @@ export default {
   data() {
     return {
       searchType: 'username',
-      searchValue: '',
       userList: [],
       loading: false
     }

src/components/order/orderAutocomplete.vue

+<template>
+  <div class="order-autocomplete">
+    <el-select
+      placeholder="支付流水号"
+      filterable
+      remote
+      style="width: 100%"
+      :remote-method="fetchPayList"
+      :loading="loading"
+      @change="handleChange"
+      v-bind="$attrs"
+      v-on="$listeners"
+    >
+      <el-option :value="item.third_transaction_id" v-for="item in payList" :key="item.id"></el-option>
+    </el-select>
+    <el-table border :data="tableData" style="width: 100%; margin-top: 20px" v-if="tableData.length">
+      <el-table-column align="center" prop="third_id" label="外部订单号"></el-table-column>
+      <el-table-column align="center" prop="paid_time" label="支付时间"></el-table-column>
+      <el-table-column align="center" prop="type" label="支付方式"></el-table-column>
+      <el-table-column align="center" prop="total_fee" label="支付金额"></el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { orderSearch } from '@/api/order'
+
+export default {
+  data() {
+    return {
+      payList: [],
+      loading: false,
+      tableData: []
+    }
+  },
+  methods: {
+    fetchPayList(searchValue) {
+      this.loading = true
+      orderSearch({ third_transaction_id: searchValue })
+        .then(response => {
+          this.payList = response.data
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    handleChange(id) {
+      const data = this.payList.find(item => item.third_transaction_id === id)
+      this.tableData = [data]
+      this.$emit('change', id, data)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.user-autocomplete {
+  display: flex;
+  .el-select + .el-select {
+    margin-left: 10px;
+  }
+  .t1 {
+    color: #8492a6;
+    font-size: 13px;
+    margin: 0 20px 0 10px;
+  }
+}
+</style>

src/pages/goods/goods/edit.vue

@@ -239,6 +239,7 @@ export default {
         try {
           this.ruleForm.chart_oss = data.chart_oss ? JSON.parse(data.chart_oss) : []
         } catch (error) {
+          this.ruleForm.chart_oss = []
           console.log('商品图片解析失败', error)
         }
         // 规格明细

src/pages/order/add.vue

@@ -2,7 +2,9 @@
   <div>
     <el-form :model="ruleForm" :rules="rules" label-position="top" ref="ruleForm" @submit.native.prevent>
       <app-card title="用户信息">
-        <user-autocomplete v-model="ruleForm.customer_id"></user-autocomplete>
+        <el-form-item prop="customer_id">
+          <user-autocomplete v-model="ruleForm.customer_id"></user-autocomplete>
+        </el-form-item>
       </app-card>
       <app-card title="商品信息">
         <el-form-item label="关联商品" prop="spu_id">
@@ -20,21 +22,24 @@
         </el-form-item>
       </app-card>
       <app-card title="外部订单信息">
-        <el-select
-          placeholder="支付流水号"
-          filterable
-          remote
-          style="width: 100%"
-          :remote-method="fetchPayList"
-          v-model="ruleForm.payment_order_id"
-        >
-          <el-option :label="item.name" :value="item.id" v-for="item in payList" :key="item.id" />
-        </el-select>
+        <template v-for="(item, index) in ruleForm.paymentOrderIds">
+          <el-form-item
+            label="外部订单号"
+            :prop="'paymentOrderIds.' + index"
+            :key="index"
+            :rules="{ required: true, message: '外部订单号不能为空', trigger: 'change' }"
+          >
+            <order-autocomplete v-model="ruleForm.paymentOrderIds[index]"></order-autocomplete>
+          </el-form-item>
+        </template>
+        <el-button type="text" @click="addOrderId">
+          <i class="el-icon-circle-plus-outline"></i>&nbsp;&nbsp;新增外部订单号
+        </el-button>
       </app-card>
       <div class="form-footer">
         <div class="inner">
-          <el-button type="primary">取消</el-button>
-          <el-button type="primary" @click="submit">新增</el-button>
+          <el-button type="primary" @click="onCancel">取消</el-button>
+          <el-button type="primary" @click="onSubmit">新增</el-button>
         </div>
       </div>
     </el-form>
@@ -44,9 +49,10 @@
 <script>
 import AppCard from '@/components/base/card'
 import UserAutocomplete from '@/components/base/userAutocomplete'
-import { addOrder, getSkuList, orderSearch } from '@/api/order'
+import OrderAutocomplete from '@/components/order/orderAutocomplete'
+import { addOrder, getSkuList } from '@/api/order'
 export default {
-  components: { AppCard, UserAutocomplete },
+  components: { AppCard, UserAutocomplete, OrderAutocomplete },
   data() {
     return {
       ruleForm: {
@@ -54,11 +60,13 @@ export default {
         spu_id: '6805043172159258624',
         sku_id: '',
         buy_count: 1,
-        payment_order_id: ''
+        payment_method: '99',
+        paymentOrderIds: ['']
       },
       rules: {
-        spu_name: [{ required: true, message: '商品名称不可为空', trigger: 'blur' }],
-        chart_oss: [{ required: true, message: '最少需要添加一张商品图', trigger: 'blur' }]
+        customer_id: [{ required: true, message: '请选择用户', trigger: 'change' }],
+        spu_id: [{ required: true, message: '请选择关联商品', trigger: 'change' }],
+        sku_id: [{ required: true, message: '请选择商品规格', trigger: 'change' }]
       },
       skuList: [],
       payList: []
@@ -72,29 +80,44 @@ export default {
   computed: {
     shopId() {
       return this.$store.state.shopId
+    },
+    activeSku() {
+      return this.skuList.find(item => item.sku_id === this.ruleForm.sku_id) || {}
+    },
+    price() {
+      const price = parseFloat(this.activeSku.price || 0)
+      return this.ruleForm.buy_count * price
     }
   },
   methods: {
+    // 取消
+    onCancel() {
+      this.$router.replace('/order')
+    },
     // 确定
-    submit() {
+    onSubmit() {
       this.$refs.ruleForm.validate().then(this.handleAdd)
     },
+    // 提交
     handleAdd() {
       const params = Object.assign({ shop_id: this.shopId }, this.ruleForm)
       params.buy_count = params.buy_count.toString()
+      params.payment_money = this.price.toString()
+      params.payment_order_id = this.ruleForm.paymentOrderIds.join(',')
       addOrder(params).then(response => {
-        console.log(response)
+        this.$message({ type: 'success', message: '新增成功' })
+        this.$router.push({ name: 'orderDetail', params: { id: response.order_id } })
       })
     },
-    getSkuList(skuId) {
-      getSkuList({ shop_id: this.shopId, spu_id: skuId }).then(response => {
+    // 获取sku列表
+    getSkuList(goodsId) {
+      getSkuList({ shop_id: this.shopId, spu_id: goodsId }).then(response => {
         this.skuList = response.data
       })
     },
-    fetchPayList(value) {
-      orderSearch({ payment_order_id: value }).then(response => {
-        console.log(response)
-      })
+    // 新增外部订单号
+    addOrderId() {
+      this.ruleForm.paymentOrderIds.push('')
     }
   },
   beforeMount() {