update

.config.dev.js

 module.exports = {
   domain: 'dev.ezijing.com',
-  url: 'https://learn-api.ezijing.com/api',
+  url: 'https://shop-admin2.ezijing.com/api',
   webpack: {
     externals: {
       CKEDITOR: 'window.CKEDITOR',
@@ -9,16 +9,16 @@ module.exports = {
       regeneratorRuntime: 'window.regeneratorRuntime',
       wx: 'window.wx',
       WeixinJSBridge: 'window.WeixinJSBridge'
-    },
-    devServer: {
-      proxy: {
-        '/api/shop': {
-          target: 'http://172.16.3.11:8089',
-          changeOrigin: true,
-          pathRewrite: { '^/api/shop': '' }
-        }
-      }
     }
+    // devServer: {
+    //   proxy: {
+    //     '/api/shop': {
+    //       target: 'http://172.16.3.11:8089',
+    //       changeOrigin: true,
+    //       pathRewrite: { '^/api/shop': '' }
+    //     }
+    //   }
+    // }
   },
   ProvidePlugin: {},
   others: {

src/api/base.js

@@ -27,3 +27,8 @@ export function uploadFile(data) {
     headers: { 'Content-Type': 'multipart/form-data' }
   })
 }
+
+// 搜索用户
+export function userSearch(params) {
+  return httpRequest.get('/api/usercenter/server/user/search-user', { params })
+}

src/api/order.js

@@ -13,9 +13,23 @@ export function getOrderSearchList(data) {
 export function getOrderList(data) {
   return httpRequest.post('/api/shop/order/search', data)
 }
+
 /**
  * 创建订单
  */
 export function addOrder(data) {
   return httpRequest.post('/api/shop/order/add', data)
 }
+
+/**
+ * 获取商品规格
+ */
+export function getSkuList(data) {
+  return httpRequest.post('/api/shop/commodity/spu/spec/value/search', data)
+}
+/**
+ * 获取商品规格
+ */
+export function orderSearch(data) {
+  return httpRequest.post('/api/shop/pay/order/search', data)
+}

src/components/base/userAutocomplete.vue

+<template>
+  <div class="user-autocomplete">
+    <el-select v-model="searchType" style="width: 120px">
+      <el-option label="用户名" value="username"></el-option>
+      <el-option label="手机号" value="mobile"></el-option>
+      <el-option label="邮箱" value="email"></el-option>
+      <el-option label="昵称" value="nickname"></el-option>
+    </el-select>
+    <el-select
+      placeholder="搜索"
+      filterable
+      remote
+      style="width: 100%"
+      :remote-method="fetchUserList"
+      :loading="loading"
+      @change="handleChange"
+      v-bind="$attrs"
+      v-on="$listeners"
+    >
+      <el-option :label="user.realname || user.nickname" :value="user.id" v-for="user in userList" :key="user.id">
+        <div style="display: flex">
+          <span>
+            {{ user.realname || user.nickname }}
+            <template v-if="user.mobile">(手机号：{{ user.mobile }})</template>
+          </span>
+          <span class="t1" v-if="user.email">邮箱：{{ user.email }}</span>
+          <span class="t1" v-else>ID：{{ user.id }}</span>
+        </div>
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+<script>
+import { userSearch } from '@/api/base'
+
+export default {
+  data() {
+    return {
+      searchType: 'username',
+      searchValue: '',
+      userList: [],
+      loading: false
+    }
+  },
+  methods: {
+    fetchUserList(searchValue) {
+      const params = {}
+      params[this.searchType] = searchValue
+      this.loading = true
+      userSearch(params)
+        .then(response => {
+          this.userList = response.items
+        })
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    handleChange(userId) {
+      const user = this.userList.find(user => user.id === userId)
+      this.$emit('change', userId, user)
+    }
+  }
+}
+</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/components/layout/sidebar.vue

@@ -50,7 +50,7 @@ export default {
           children: [
             { name: '店铺信息', path: '/setting/info' },
             { name: '联系我们', path: '/setting/contact' },
-            { name: '通用设置', path: '/setting/general' },
+            // { name: '通用设置', path: '/setting/general' },
             { name: '商品设置', path: '/setting/goods' }
           ]
         }

src/pages/order/add.vue

@@ -2,19 +2,35 @@
   <div>
     <el-form :model="ruleForm" :rules="rules" label-position="top" ref="ruleForm" @submit.native.prevent>
       <app-card title="用户信息">
-        <el-form-item label="关联用户" prop="customer_id">
-          <el-input v-model="ruleForm.customer_id" />
-        </el-form-item>
+        <user-autocomplete v-model="ruleForm.customer_id"></user-autocomplete>
       </app-card>
       <app-card title="商品信息">
-        <el-form-item label="关联商品" prop="customer_id">
-          <el-input v-model="ruleForm.customer_id" />
+        <el-form-item label="关联商品" prop="spu_id">
+          <el-input v-model="ruleForm.spu_id" />
+        </el-form-item>
+        <el-form-item label="商品规格" prop="sku_id">
+          <el-radio-group v-model="ruleForm.sku_id">
+            <el-radio border :label="item.sku_id" :key="item.sku_id" v-for="item in skuList">
+              <span class="sku-name">{{ item.spec_values }} </span><span class="sku-price">￥{{ item.price }}</span>
+            </el-radio>
+          </el-radio-group>
         </el-form-item>
-        <el-form-item label="商品规格" prop="customer_id">
-          <el-input v-model="ruleForm.customer_id" />
+        <el-form-item label="商品数量" prop="buy_count">
+          <el-input-number v-model="ruleForm.buy_count" :min="1"></el-input-number>
         </el-form-item>
       </app-card>
-      <app-card title="外部订单信息"></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>
+      </app-card>
       <div class="form-footer">
         <div class="inner">
           <el-button type="primary">取消</el-button>
@@ -27,18 +43,30 @@
 
 <script>
 import AppCard from '@/components/base/card'
+import UserAutocomplete from '@/components/base/userAutocomplete'
+import { addOrder, getSkuList, orderSearch } from '@/api/order'
 export default {
-  components: { AppCard },
+  components: { AppCard, UserAutocomplete },
   data() {
     return {
       ruleForm: {
-        spu_id: '',
-        customer_id: ''
+        customer_id: '',
+        spu_id: '6805043172159258624',
+        sku_id: '',
+        buy_count: 1,
+        payment_order_id: ''
       },
       rules: {
         spu_name: [{ required: true, message: '商品名称不可为空', trigger: 'blur' }],
         chart_oss: [{ required: true, message: '最少需要添加一张商品图', trigger: 'blur' }]
-      }
+      },
+      skuList: [],
+      payList: []
+    }
+  },
+  watch: {
+    'ruleForm.spu_id': skuId => {
+      this.getSkuList(skuId)
     }
   },
   computed: {
@@ -51,7 +79,26 @@ export default {
     submit() {
       this.$refs.ruleForm.validate().then(this.handleAdd)
     },
-    handleAdd() {}
+    handleAdd() {
+      const params = Object.assign({ shop_id: this.shopId }, this.ruleForm)
+      params.buy_count = params.buy_count.toString()
+      addOrder(params).then(response => {
+        console.log(response)
+      })
+    },
+    getSkuList(skuId) {
+      getSkuList({ shop_id: this.shopId, spu_id: skuId }).then(response => {
+        this.skuList = response.data
+      })
+    },
+    fetchPayList(value) {
+      orderSearch({ payment_order_id: value }).then(response => {
+        console.log(response)
+      })
+    }
+  },
+  beforeMount() {
+    this.getSkuList(this.ruleForm.spu_id)
   }
 }
 </script>
@@ -60,6 +107,17 @@ export default {
 ::v-deep .el-form--label-top .el-form-item__label {
   padding: 0;
 }
+::v-deep .el-radio {
+  margin: 0 20px 20px 0 !important;
+}
+::v-deep .el-form-item__content {
+  line-height: unset;
+}
+.sku-price {
+  margin-left: 10px;
+  padding-left: 10px;
+  border-left: 1px solid #dcdfe6;
+}
 .form-footer {
   position: sticky;
   bottom: 0;