编辑优惠券

src/views/member/coupon/components/good-dialog.vue

@@ -134,6 +134,9 @@ export default {
     },
     handleAddProConfirm() {
       // 确认选择商品
+      this.productRadio.pcStatus = 1
+      this.productRadio.appletsStatus = 1
+      this.productRadio.sort = 1
       this.$emit('confirm', this.productRadio)
     },
     handleCanle() {

src/views/member/coupon/edit.vue

@@ -3,7 +3,7 @@
     <div v-if="editType === 'add'" class="filter-container">
       <div class="filter-control">
         <span style="color: red;">在本页面，对每三个月给超级会员自动发放的优惠券进行配置，配置完成后下一阶段才生效（最少配置1个，最多5个）。</span>
-        <el-button type="primary" :disabled="disabled" @click="handleAddList">新增优惠券</el-button>
+        <el-button type="primary" icon="el-icon-plus" size="mini" :disabled="disabled" @click="handleAddList">新增优惠券</el-button>
       </div>
     </div>
     <div v-else class="filter-container">
@@ -16,21 +16,21 @@
           start-placeholder="开始月份"
           end-placeholder="结束月份"
         />
-        <el-button type="primary" :disabled="disabled" style="margin-left: 30px;" @click="handleAddList">新增优惠券</el-button>
+        <el-button type="primary" icon="el-icon-plus" size="mini" :disabled="disabled" style="margin-left: 30px;" @click="handleAddList">新增优惠券</el-button>
       </div>
     </div>
-    <el-card v-for="(item,index) in formList" :key="item.key" :data-key="item.key" class="box-card" style="position: relative;margin-bottom: 20px;">
-      <el-form :model="item" label-width="100px">
-        <el-form-item label="优惠券:" style="margin-bottom: 10px;">
-          <el-radio-group v-model="item.radio">
+    <el-form ref="couponFrom" :model="form" label-width="100px">
+      <div v-for="(formItem,index) in form.formList" :key="formItem.key" class="form-cell" :data-key="formItem.key">
+        <el-form-item :label="`优惠券${index+1}:`" style="margin-bottom: 10px;">
+          <el-radio-group v-model="formItem.radio">
             <el-radio :label="0">活动券</el-radio>
             <el-radio :label="1">品类券</el-radio>
             <el-radio :label="3">店铺券</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="供应商" :hidden="item.radio === 3 ? false : true" style="margin-bottom: 10px;">
+        <el-form-item label="供应商" :hidden="formItem.radio === 3 ? false : true" style="margin-bottom: 10px;">
           <el-button type="primary" :hidden="!hiddenItem" autofocussize="mini" size="mini" icon="el-icon-plus" @click="handleShopDialogVisible(index)">选择供应商</el-button>
-          <el-table :data="item.shopData" border :hidden="hiddenItem" width="1000">
+          <el-table :data="formItem.shopData" border :hidden="hiddenItem" width="1000">
             <el-table-column prop="name" label="供应商名称" align="center" width="300" />
             <el-table-column prop="sname" label="供应商简称" align="center" width="200" />
             <el-table-column prop="linkMan" label="联系人" align="center" width="100" />
@@ -44,23 +44,25 @@
             </el-table-column>
           </el-table>
         </el-form-item>
-        <el-form-item label="优惠券金额:" style="margin-bottom: 10px;">
-          <el-input v-model="item.couponAmount" style="width: 150px" size="mini" />
+        <el-form-item label="优惠券金额:" :prop="`formList.${index}.couponAmount`" :rules="rules.couponAmount">
+          <el-input v-model="formItem.couponAmount" style="width: 150px" size="mini" />
         </el-form-item>
-        <el-form-item label="优惠条件:" style="margin-bottom: 10px;">
-          <span>订单商品总额满：</span>
-          <el-input v-model="item.touchPrice" style="width: 150px" size="mini" />
+        <el-form-item label="优惠条件:" :prop="`formList.${index}.touchPrice`" :rules="rules.touchPrice">
+          <el-input v-model="formItem.touchPrice" style="width: 200px" size="mini">
+            <template slot="prepend" style="padding: 0 10px;">订单商品总额满：</template>
+          </el-input>
         </el-form-item>
-        <el-form-item label="优惠商品:" :hidden="item.radio === 0 ? false : true" style="margin-bottom: 10px;">
-          <el-radio-group v-model="item.productType">
+        <el-form-item label="优惠商品:" :hidden="formItem.radio === 0 ? false : true" style="margin-bottom: 10px;">
+          <el-radio-group v-model="formItem.productType">
             <el-radio :label="1">全商城商品</el-radio>
             <el-radio :label="2">指定商品</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item :hidden="item.productType === 2 && item.radio === 0 ? false : true" style="margin-bottom: 10px;">
-          <el-button type="primary" size="mini" @click="dialogGoodVisible = true">添加</el-button>
+        <el-form-item :hidden="formItem.productType === 2 && formItem.radio === 0 ? false : true" style="margin-bottom: 10px;">
+          <el-button type="primary" icon="el-icon-sort" size="mini" @click="handleOnInputBlur(formItem,index)">一键排序</el-button>
+          <el-button type="primary" icon="el-icon-plus" size="mini" @click="dialogGoodVisible = true">添加商品</el-button>
           <el-form-item :hidden="hiddenProduct">
-            <el-table :data="item.associateList" border>
+            <el-table :data="formItem.associateList" border>
               <el-table-column property="mainImage" label="商品图片" align="center" width="80">
                 <template slot-scope="{ row }">
                   <el-popover
@@ -76,9 +78,21 @@
               </el-table-column>
               <el-table-column property="name" label="商品名称" align="center" />
               <el-table-column property="shopName" label="供应商" align="center" width="150" />
-              <el-table-column property="sort" label="网站状态" align="center" width="150" />
-              <el-table-column property="pcStatus" label="小程序状态" align="center" width="150" />
-              <el-table-column property="appletsStatus" label="排序" align="center" width="50" />
+              <el-table-column property="sort" label="网站状态" align="center" width="80">
+                <template slot-scope="{row}">
+                  <el-switch v-model="row.pcStatus" :active-value="1" :inactive-value="0" active-color="#1890ff" inactive-color="#DCDFE6" @change="handlePcStatusChange(row)" />
+                </template>
+              </el-table-column>
+              <el-table-column property="pcStatus" label="小程序状态" align="center" width="80">
+                <template slot-scope="{row}">
+                  <el-switch v-model="row.appletsStatus" :active-value="1" :inactive-value="0" active-color="#1890ff" inactive-color="#DCDFE6" @change="handleAppStatusChange(row)" />
+                </template>
+              </el-table-column>
+              <el-table-column property="appletsStatus" label="排序" align="center" width="100">
+                <template slot-scope="{row}">
+                  <el-input v-model="row.sort" maxlength="4" minlength="1" />
+                </template>
+              </el-table-column>
               <el-table-column property="addTime" label="添加时间" align="center" width="100" />
               <el-table-column label="操作" align="center">
                 <template>
@@ -88,20 +102,18 @@
             </el-table>
           </el-form-item>
         </el-form-item>
-        <el-form-item label="优惠品类:" :hidden="item.radio === 1 ? false : true" style="margin-bottom: 10px;">
+        <el-form-item label="优惠品类:" :hidden="formItem.radio === 1 ? false : true" style="margin-bottom: 10px;">
           <template>
-            <el-radio v-model="item.categoryType" label="1">产品</el-radio>
-            <el-radio v-model="item.categoryType" label="2">仪器</el-radio>
+            <el-radio v-model="formItem.categoryType" label="1">产品</el-radio>
+            <el-radio v-model="formItem.categoryType" label="2">仪器</el-radio>
           </template>
         </el-form-item>
-      </el-form>
-      <el-button class="delete_label" :disabled="disabled1" icon="el-icon-delete" size="mini" type="danger" @click="handleDelete(item,index)">删除</el-button>
-    </el-card>
-    <div class="filter-container">
-      <div class="filter-control">
-        <el-button @click="goBack">返回</el-button>
-        <el-button type="primary" @click="onSubmit">保存</el-button>
+        <el-button class="delete_label" :disabled="disabled1" icon="el-icon-delete" size="mini" type="danger" @click="handleDelete(formItem,index)">删除</el-button>
       </div>
+    </el-form>
+    <div class="el-dialog__footer">
+      <el-button @click="goBack">返回</el-button>
+      <el-button type="primary" @click="onSubmit('couponFrom')">保存</el-button>
     </div>
     <!-- 供应商弹框 -->
     <shop-dialog v-if="dialogShopVisible" ref="shopDialog" @cancel="handleShopCancel" @confirm="handleShopConfirm" />
@@ -112,7 +124,7 @@
 </template>
 
 <script>
-import { svipCoupon } from '@/api/member/member'
+import { svipCoupon, saveVipCoupon } from '@/api/member/member'
 import goodDialog from './components/good-dialog'
 import shopDialog from './components/shop-dialog'
 const defaultForm = () => {
@@ -134,15 +146,12 @@ export default {
   components: { goodDialog, shopDialog },
   data() {
     return {
-      formList: [],
+      form: {
+        formList: []
+      },
       doctorId: '',
       editType: 'add',
       time: '',
-      form: {
-        radio: 0,
-        productType: '', // 优惠商品
-        categoryType: '' // 优惠品类
-      },
       hiddenItem: true,
       dialogTableVisible: false,
       shopTotal: 0,
@@ -156,15 +165,19 @@ export default {
       productTotal: 0,
       addIndex: 0,
       dialogShopVisible: false,
-      dialogGoodVisible: false
+      dialogGoodVisible: false,
+      rules: {
+        couponAmount: [{ required: true, message: '优惠券金额不能为空', trigger: 'blur' }],
+        touchPrice: [{ required: true, message: '优惠条件不能为空', trigger: 'blur' }]
+      }
     }
   },
   computed: {
     disabled() {
-      return this.formList.length === 5
+      return this.form.formList.length === 5
     },
     disabled1() {
-      return this.formList.length === 1
+      return this.form.formList.length === 1
     }
   },
   created() {
@@ -177,17 +190,17 @@ export default {
   methods: {
     initForm(type) {
       if (type === 'add') {
-        for (let i = 0; i < 3; i++) {
-          this.formList.push(defaultForm())
-        }
-        console.log('formList', this.formList)
+        // for (let i = 0; i < 3; i++) {
+        //   this.form.formList.push(defaultForm())
+        // }
+        this.svipCoupon(1, 0)
       } else {
-        this.svipCoupon(this.doctorId)
+        this.svipCoupon(0, this.doctorId)
         console.log('edit')
       }
     },
-    async svipCoupon(id) {
-      const res = await svipCoupon({ id: id, configure: 0 })
+    async svipCoupon(configure, id) {
+      const res = await svipCoupon({ id: id, configure: configure })
       console.log('RES', res.data)
     },
     handleShopDialogVisible(index) {
@@ -198,19 +211,14 @@ export default {
     // 清除供应商
     deleteShop(index) {
       this.hiddenItem = true
-      this.formList[index].shopData = []
-    },
-    // 清除商品数据
-    deleteProduct() {
-      this.productTable = []
-      this.hiddenProduct = true
+      this.form.formList[index].shopData = []
     },
     handleShopConfirm(data) {
       // 确认选择供应商
       console.log('addIndex', this.addIndex)
       console.log('data', data)
-      this.formList[this.addIndex].shopData.push(data)
-      console.log('shopData', this.formList[this.addIndex].shopData)
+      this.form.formList[this.addIndex].shopData.push(data)
+      console.log('shopData', this.form.formList[this.addIndex].shopData)
       this.hiddenItem = false
       this.handleShopCancel()
     },
@@ -218,12 +226,35 @@ export default {
       // 确认选择商品
       console.log('data', data)
       console.log('addIndex', this.addIndex)
-      this.formList[this.addIndex].associateList.push(data)
-      console.log('addIndex', this.formList[this.addIndex])
-      console.log('formList', this.formList)
+      this.form.formList[this.addIndex].associateList.push(data)
+      console.log('addIndex', this.form.formList[this.addIndex])
+      console.log('formList', this.form.formList)
       this.hiddenProduct = false
       this.handleGoodCancel()
     },
+    onSubmit(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          this.$confirm('是否提交数据', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            this.saveVipCoupon(this.form.formList)
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    async saveVipCoupon(params) {
+      // 保存超级会员优惠券
+      await saveVipCoupon(params)
+      this.$message.success('保存成功')
+      setTimeout(() => {
+        this.$router.push({ path: '/member/coupon/list' })
+      }, 1000)
+    },
     handleShopCancel() {
       // 取消选择供应商
       this.dialogShopVisible = false
@@ -236,15 +267,37 @@ export default {
     },
     handleAddList() {
       // 新增优惠券
-      this.formList.push(defaultForm())
+      this.form.formList.push(defaultForm())
     },
     handleDelete(item, index) {
       // 删除单挑优惠券
       this.formList.splice(index, 1)
     },
+    handleOnInputBlur(formItem, row, index) {
+      // 商品排序
+      console.log('formItem', formItem)
+      console.log('row', row)
+      console.log('index', index)
+    },
+    handlePcStatusChange(row) {
+      // PC状态开启关闭
+      if (row.pcStatus === 0) {
+        row.pcStatus = 1
+      } else {
+        row.pcStatus = 0
+      }
+    },
+    handleAppStatusChange(row) {
+      // 小程序状态开启关闭
+      if (row.appletsStatus === 0) {
+        row.appletsStatus = 1
+      } else {
+        row.appletsStatus = 0
+      }
+    },
     goBack() {
       // 调用全局挂载的方法,关闭当前标签页
-      this.$store.dispatch('tagsView/delView', this.$route)
+      // this.$store.dispatch('tagsView/delView', this.$route)
       // 返回上一步路由，返回上一个标签页
       this.$router.go(-1)
     }
@@ -253,6 +306,15 @@ export default {
 </script>
 
 <style>
+.form-cell{
+  border: 1px solid #e1e1e1;
+  border-radius: 8px;
+  box-sizing: border-box;
+  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);
+  padding: 20px;
+  position: relative;
+  margin-bottom: 20px;
+}
 .delete_label{
   position: absolute;
   right: 2%;