2023.10.30 - 完善商家字段

src/api/address.js

@@ -0,0 +1,21 @@
+import request from '@/utils/request'
+
+// 获取一级地址
+export function getProvinceList(params = {}) {
+  return request({
+    url: '/cityManageArea/getTreeClass',
+    method: 'GET',
+    params
+  })
+}
+
+// 查询子地区
+export function getChildAreaList(parentId) {
+  return request({
+    url: 'cityManageArea/getTreeOne',
+    method: "GET",
+    params: {
+      parentId
+    }
+  })
+}

src/styles/element-ui.scss

@@ -15,7 +15,6 @@
   display: none;
 }
 
-
 // to fixed https://github.com/ElemeFE/element/issues/2461
 .el-dialog {
   transform: none;
@@ -39,7 +38,7 @@
 // dropdown
 .el-dropdown-menu {
   a {
-    display: block
+    display: block;
   }
 }
 
@@ -47,3 +46,11 @@
 .el-range-separator {
   box-sizing: content-box;
 }
+
+.b-shop-rate {
+  .el-form-item__content {
+    div {
+      line-height: 51px;
+    }
+  }
+}

src/utils/request.js

@@ -48,7 +48,7 @@ service.interceptors.response.use(
       console.log(response.data)
       return response.data
     }
-    if (res.code !== '') {
+    if (res.code !== '' && res.code != 200) {
       Message({
         message: res.message || 'Error',
         type: 'error',

src/views/business/businessClass/index.vue

@@ -31,12 +31,8 @@
 </template>
 
 <script>
-import {
-  commdityClassDelete
-} from '@/api/renovation'
-import { fullPicUrl } from '../../../utils'
-
-import { businessClassList, deleteBusinessClass } from '../../../api/business'
+import { fullPicUrl } from '@/utils'
+import { businessClassList, deleteBusinessClass } from '@/api/business'
 import EditDialog from './Edit'
 export default {
   components: {

src/views/business/businessList/index.vue

@@ -32,10 +32,8 @@
       </div>
       <!-- 表格 -->
       <div class="tableBox">
-        <el-table
-          ref="multipleTable" :data="tableData" border
-          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
-        >
+        <el-table ref="multipleTable" :data="tableData" border
+          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%">
           <el-table-column label="店铺名称" width="220">
             <template slot-scope="scope">{{ scope.row.shopName }}</template>
           </el-table-column>
@@ -72,24 +70,19 @@
           </el-table-column>
         </el-table>
         <div class="fenye">
-          <el-pagination
-            :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="10"
+          <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="10"
             layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-          />
+            @current-change="handleCurrentChange" />
         </div>
       </div>
       <!-- ******************************************************弹框开始****************************************************** -->
       <!-- 新建商家弹框 -->
-      <el-dialog
-        :title="userState === 0
-          ? '新增商家'
-          : userState === 1
-            ? '修改商家'
-            : '查看商家'
-        " :visible.sync="dialogVisible" width="30%" center
-        :close-on-click-modal="false"
-      >
+      <el-dialog :title="userState === 0
+        ? '新增商家'
+        : userState === 1
+          ? '修改商家'
+          : '查看商家'
+        " :visible.sync="dialogVisible" width="30%" center :before-close="closeFn" :close-on-click-modal="false">
         <div>
           <el-tabs v-model="activeName" @tab-click="handleClick">
             <el-tab-pane label="授权信息" name="first">
@@ -101,15 +94,24 @@
                   <el-input v-model="ruleForm.chargePersonName" maxlength="20" :disabled="disabled" />
                 </el-form-item>
                 <el-form-item label="负责人电话" prop="chargePersonPhone">
-                  <el-input
-                    v-if="cpPhoneShow" :value="hidden(ruleForm.chargePersonPhone, 3, 4)" maxlength="11"
-                    :disabled="disabled" @focus="focuscpPhoneInput"
-                  />
-                  <el-input
-                    v-else ref="cpPhoneCls" v-model="ruleForm.chargePersonPhone" maxlength="11"
-                    clearable
-                    :disabled="disabled" @change="changecpPhoneInput"
-                  />
+                  <el-input v-if="cpPhoneShow" :value="hidden(ruleForm.chargePersonPhone, 3, 4)" maxlength="11"
+                    :disabled="disabled" @focus="focuscpPhoneInput" />
+                  <el-input v-else ref="cpPhoneCls" v-model="ruleForm.chargePersonPhone" maxlength="11" clearable
+                    :disabled="disabled" @change="changecpPhoneInput" />
+                </el-form-item>
+                <el-form-item label="请选择区域" prop="areaId">
+                  <el-cascader v-if="!isEdit" :disabled="disabled" :props="areaData" ref="cascaderRef"
+                    @change="handleCascaderChange"></el-cascader>
+                  <div v-else>
+                    {{ ruleForm.areaId }}
+                    <el-button :disabled="disabled" size="mini" type="primary" style="margin-left: 15px;"
+                      @click="isEdit = !isEdit">{{ isEdit ? '修改' : '取消' }}</el-button>
+                  </div>
+                </el-form-item>
+
+                <el-form-item label="请选择门店分类" prop="classificationId">
+                  <el-cascader :disabled="disabled" v-model="ruleForm.classificationId" :options="allShopCategoryList"
+                    :props="{ label: 'storeName', value: 'id', children: 'childs' }"></el-cascader>
                 </el-form-item>
                 <el-form-item label="店铺地址" prop="shopAdress">
                   <el-input ref="addressCls" v-model="ruleForm.shopAdress" maxlength="60" :disabled="disabled" />
@@ -118,16 +120,12 @@
                   </div> -->
                 </el-form-item>
                 <el-form-item label="生效日期" prop="effectiveDate">
-                  <el-date-picker
-                    v-model="ruleForm.effectiveDate" :disabled="disabled" value-format="yyyy-MM-dd"
-                    type="date" placeholder="选择日期"
-                  />
+                  <el-date-picker v-model="ruleForm.effectiveDate" :disabled="disabled" value-format="yyyy-MM-dd"
+                    type="date" placeholder="选择日期" />
                 </el-form-item>
                 <el-form-item label="生效年限" prop="effectiveYear">
-                  <el-input
-                    v-model="ruleForm.effectiveYear" type="text" :disabled="disabled" placeholder="请输入内容"
-                    maxlength="4" class="elipt" style="width: 50%" show-word-limit
-                  />
+                  <el-input v-model="ruleForm.effectiveYear" type="text" :disabled="disabled" placeholder="请输入内容"
+                    maxlength="4" class="elipt" style="width: 50%" show-word-limit />
                   <span class="elspan">年</span>
                 </el-form-item>
                 <el-form-item label="合同状态" prop="contractState">
@@ -150,6 +148,29 @@
                     </el-radio>
                   </el-radio-group>
                 </el-form-item>
+
+                <el-form-item v-if="ruleForm.shopType === 2" prop="startTime" label="营业开始时间" :rules="[
+                  { required: true, message: '请选择营业开始时间', trigger: 'blur' }]">
+
+                  <el-time-select :disabled="disabled" placeholder="起始时间" v-model="ruleForm.startTime" :picker-options="{
+                    start: '08:30',
+                    step: '00:05',
+                  }">
+                  </el-time-select>
+
+                </el-form-item>
+
+                <el-form-item v-if="ruleForm.shopType === 2" prop="endTime" label="营业结束时间" :rules="[
+                  { required: true, message: '请选择营业开始时间', trigger: 'blur' }]">
+
+                  <el-time-select :disabled="disabled" placeholder="营业结束时间" v-model="ruleForm.endTime" :picker-options="{
+                    step: '00:05',
+                    end: '18:30',
+                    minTime: ruleForm.endTime
+                  }">
+                  </el-time-select>
+                </el-form-item>
+
                 <el-form-item label="是否支持代金卷" prop="isVoucher">
                   <el-radio-group v-model="ruleForm.isVoucher">
                     <el-radio :disabled="disabled" :label="1">
@@ -160,6 +181,15 @@
                     </el-radio>
                   </el-radio-group>
                 </el-form-item>
+                <el-form-item v-if="ruleForm.isVoucher === 1" :rules="[
+                  { required: true, message: '请输入代金券返还比例', trigger: 'blur' },
+                  { type: 'number', max: 100, min: 0, message: '请输入正确的代金券返还比例，0 ~ 100', trigger: ['blur', 'change'] }
+                ]" label="代金券返还比例" prop="voucherReturn">
+                  <el-input :disabled="disabled" placeholder="请填写代金券返还比例，范围0 ~ 100"
+                    v-model.number="ruleForm.voucherReturn">
+                    <template slot="append">%</template>
+                  </el-input>
+                </el-form-item>
                 <el-form-item label="直播间审核" prop="auditLive">
                   <el-radio-group v-model="ruleForm.auditLive">
                     <el-radio :disabled="disabled" :label="1">
@@ -180,15 +210,35 @@
                     </el-radio>
                   </el-radio-group>
                 </el-form-item>
+
+                <el-form-item class="b-shop-rate" prop="score" label="评分">
+                  <el-rate :disabled="disabled" v-model="ruleForm.score"></el-rate>
+                </el-form-item>
+
+                <el-form-item prop="monthlySales" label="月售">
+                  <el-input :disabled="disabled" placeholder="请输入商家月售额" v-model.number="ruleForm.monthlySales"
+                    type="number"></el-input>
+                </el-form-item>
+
+                <el-form-item prop="perCapita" label="人均">
+                  <el-input :disabled="disabled" type="number" placeholder="请输入人均消费额" v-model.number="ruleForm.perCapita"
+                    closeable></el-input>
+                </el-form-item>
+
+                <el-form-item prop="advertisement" label="广告图">
+                  <el-upload :disabled="disabled" class="avatar-uploader" list-type="picture-card"
+                    :file-list="advertisementList" :action="action" :on-success="handleAvatarSuccess"
+                    :on-remove="handleRemovePic">
+                    <i class="el-icon-plus avatar-uploader-icon" />
+                  </el-upload>
+                </el-form-item>
               </el-form>
             </el-tab-pane>
             <el-tab-pane label="客户信息" name="second">
               <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
                 <el-form-item label="账号" prop="shopPhone">
-                  <el-input
-                    v-if="shopPhoneShow" :value="hidden(ruleForm.shopPhone, 3, 4)" :disabled="disabled"
-                    maxlength="20" @focus="focusShopPhoneInput"
-                  />
+                  <el-input v-if="shopPhoneShow" :value="hidden(ruleForm.shopPhone, 3, 4)" :disabled="disabled"
+                    maxlength="20" @focus="focusShopPhoneInput" />
                   <el-input v-else ref="shopPhoneCls" v-model="ruleForm.shopPhone" :disabled="disabled" maxlength="20" />
                 </el-form-item>
                 <el-form-item label="密码" prop="shopPassword">
@@ -219,6 +269,9 @@ import {
   businessListStart,
   delBusinessById
 } from '@/api/business'
+import { uploadUrl } from '@/utils/request'
+import { getProvinceList, getChildAreaList } from '@/api/address'
+import { businessClassList } from '@/api/business'
 
 export default {
   // eslint-disable-next-line vue/match-component-file-name
@@ -227,8 +280,33 @@ export default {
   data() {
     // 这里存放数据
     return {
+      action: uploadUrl,
+      advertisementList: [],
+      allShopCategoryList: [],
+      areaData: {
+        lazy: true,
+        label: 'name',
+        value: 'id',
+        lazyLoad(node, resolve) {
+          const { level, value } = node;
+          if (level === 0) {
+            getProvinceList().then(res => {
+              resolve(res.data)
+            })
+          } else if (level != 0) {
+            getChildAreaList(value).then(res => {
+              resolve(res.data.map(item => {
+                item.leaf = level === 3
+                return item
+              }))
+            })
+          }
+        }
+      },
       // 新建商家弹框
       dialogVisible: false,
+      isEdit: false, // 是否是编辑
+      originShopDetailInfo: null, // 点击编辑上架2详情原始数据
       activeName: 'first',
       formInline: {
         shopName: '', // 店铺名称
@@ -252,7 +330,13 @@ export default {
         auditLive: 1,
         auditLiveProduct: 1,
         shopPhone: '', // 账号
-        shopPassword: '' // 密码
+        shopPassword: '', // 密码
+        perCapita: "", //人均
+        score: 5, // 评分
+        advertisement: '',
+        classificationId: null, // 商家分类id
+        startTime: "",
+        endTime: ""
       },
       showPhone: false,
       showAddress: false,
@@ -295,6 +379,9 @@ export default {
             trigger: 'change'
           }
         ],
+        perCapita: [
+          { required: true, message: "请输入人均消费额", trigger: "blur" }
+        ],
         isVoucher: [
           {
             required: true,
@@ -322,6 +409,34 @@ export default {
             message: '请选择日期',
             trigger: 'change'
           }
+        ],
+        score: [
+          {
+            required: true,
+            message: '请选择商家评分',
+            trigger: 'change'
+          }
+        ],
+        monthlySales: [
+          {
+            required: true,
+            message: '请输入商家月售额',
+            trigger: 'trigger'
+          }
+        ],
+        // advertisement: [
+        //   {
+        //     required: true,
+        //     message: '请上传广告图',
+        //     trigger: 'trigger'
+        //   }
+        // ],
+        areaId: [
+          {
+            required: true,
+            message: "请选择地址",
+            trigger: 'blur'
+          }
         ]
       },
       rules: {
@@ -360,6 +475,7 @@ export default {
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     this.getAll(this.formInline)
+    this.getCategoryList()
     this.privacyTime = localStorage.getItem('privacyTime')
     console.log(this.privacyTime)
   },
@@ -416,50 +532,59 @@ export default {
         auditLive: 1,
         auditLiveProduct: 1,
         shopPhone: '', // 账号
-        shopPassword: '' // 密码
+        shopPassword: '', // 密码
+        advertisement: '', // 广告图
+        areaId: '', // 区域id
+        longitude: '', // 经纬度
+        latitude: '', // 经纬度
       }
       this.dialogVisible = true
-      console.log(this.userState)
     },
     next() {
       this.activeName = 'second'
     },
     closeFn() {
       this.$nextTick(() => {
+        this.$refs.ruleForm.resetFields()
         this.$refs.ruleForm.clearValidate()
         this.$refs.ruleFormInfo.clearValidate()
         this.dialogVisible = false
       })
     },
     // 新建商家确定
-    addCheck(ruleForm) {
-      this.$refs[ruleForm].validate((valid) => {
+    addCheck() {
+      const submitData = JSON.parse(JSON.stringify(this.ruleForm))
+      submitData.advertisement = this.advertisementList.map(item => item.url).join(',')
+      console.log(submitData)
+
+      this.$refs['ruleFormInfo'].validate((valid) => {
         if (valid) {
           console.log(this.userState)
-          console.log(this.ruleForm)
           if (this.personPhone !== '') {
-            this.ruleForm.chargePersonPhone = this.personPhone
+            submitData.chargePersonPhone = this.personPhone
           }
           if (this.newAddress !== '') {
-            this.ruleForm.shopAdress = this.newAddress
+            submitData.shopAdress = this.newAddress
           }
           if (this.userPhone !== '') {
-            this.ruleForm.shopPhone = this.userPhone
+            submitData.shopPhone = this.userPhone
           }
-          if (this.ruleForm.shopName === '') {
+          if (submitData.shopName === '') {
             this.$message.error('请输入店铺名称')
             return
           }
-          if (this.ruleForm.effectiveDate === '') {
+          if (submitData.effectiveDate === '') {
             this.$message.error('请输入生效日期')
             return
           }
-          if (this.ruleForm.effectiveYear === '') {
+          if (submitData.effectiveYear === '') {
             this.$message.error('请输入生效年限')
             return
           }
+
+          submitData.classificationId = submitData.classificationId[2]
           if (!this.userState) {
-            businessListSave(this.ruleForm).then((res) => {
+            businessListSave(submitData).then((res) => {
               console.log(res)
               if (res.code === '') {
                 this.$message({
@@ -472,7 +597,7 @@ export default {
               this.$refs.ruleForm.clearValidate()
             })
           } else {
-            businessListUpdate(this.ruleForm).then((res) => {
+            businessListUpdate(submitData).then((res) => {
               console.log(res)
               if (res.code === '') {
                 this.$message({
@@ -503,6 +628,17 @@ export default {
         this.disabled = true
         this.ruleForm = res.data
         this.dialogVisible = true
+        this.initShopClassPath(this.ruleForm.classificationId)
+        this.ruleForm.voucherReturn *= 1
+        const advertisementStr = this.ruleForm.advertisement
+        if (advertisementStr && typeof advertisementStr === 'string') {
+          this.advertisementList = advertisementStr.split(',').map(item => {
+            return {
+              url: item,
+              uid: item + Math.random() + new Date()
+            }
+          })
+        }
       }
     },
     // 编辑
@@ -515,7 +651,19 @@ export default {
       const res = await businessListGetById({ shopId: row.shopId })
       this.ruleForm = res.data
       this.dialogVisible = true
-      console.log(this.ruleForm)
+      this.isEdit = true
+      this.originShopDetailInfo = JSON.parse(JSON.stringify(res.data))
+      this.initShopClassPath(this.ruleForm.classificationId)
+      this.ruleForm.voucherReturn *= 1
+      const advertisementStr = this.ruleForm.advertisement
+      if (advertisementStr && typeof advertisementStr === 'string') {
+        this.advertisementList = advertisementStr.split(',').map(item => {
+          return {
+            url: item,
+            uid: item + Math.random() + new Date()
+          }
+        })
+      }
     },
     // 删除
     async del(row) {
@@ -615,7 +763,65 @@ export default {
       return (
         str.substring(0, frontLen) + xing + str.substring(str.length - endLenData)
       )
-    }
+    },
+
+    handleAvatarSuccess(response) {
+      const { url } = response.data
+      this.advertisementList.push({
+        url, uid: url + Math.random() + Date.now()
+      })
+    },
+
+    handleRemovePic(e) {
+      const { uid } = e
+      this.advertisementList = this.advertisementList.filter(item => item.uid !== uid)
+    },
+
+    // 获取省数据
+    handleCascaderChange() {
+      const checkedNode = this.$refs.cascaderRef.getCheckedNodes()
+      const nodeData = checkedNode[0].data
+      this.ruleForm.areaId = nodeData.id
+      this.ruleForm.longitude = nodeData.longitude
+      this.ruleForm.latitude = nodeData.latitude
+    },
+
+    // 获取所有商家分类
+    async getCategoryList() {
+      const res = await businessClassList({
+        page: 1,
+        pageSize: 100
+      })
+
+      this.allShopCategoryList = res.data.records.map(item => {
+        item.childs.map(item2 => {
+          item2.childs.map(item3 => {
+            delete item3.childs
+            return item3
+          })
+          return item2
+        })
+        return item
+      })
+    },
+
+    // 获取路径信息
+    initShopClassPath(classId) {
+      const allLevelThereList = []
+      this.allShopCategoryList.forEach(item => {
+        item.childs.forEach(item1 => {
+          allLevelThereList.push(...item1.childs)
+        })
+      })
+
+      const currentClassInfo = allLevelThereList.find(item => {
+        return item.levelId.includes(classId)
+      })
+
+      if (currentClassInfo) {
+        this.ruleForm.classificationId = currentClassInfo.levelId.slice(1).split('/').map(item => item * 1)
+      }
+    },
   }
 }
 </script>
@@ -627,18 +833,18 @@ export default {
 @import url("../../../styles/elDialog.scss");
 
 .pending {
-	padding: 30px;
+  padding: 30px;
 }
 
 .fenye {
-	margin-top: 20px;
+  margin-top: 20px;
 }
 
 .elipt {
-	width: 50%;
+  width: 50%;
 }
 
 .elspan {
-	margin-left: 10px;
+  margin-left: 10px;
 }
 </style>