添加编辑优惠券详情字段

src/views/business/coupon/add.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="app-container coupon-add">
     <br>
+    <el-form ref="addItem" :model="addData" :rules="rules" label-width="160px">
     <el-row :gutter="10">
-      <el-col  :xs="{span: 22, offset: 0}" :sm=" {span: 18, offset: 0}" :lg="{span: 10, offset: 0}">
-        <el-form ref="addItem" :model="addData" :rules="rules" label-width="160px">
+      <el-col :xs="{span: 22, offset: 0}" :sm=" {span: 18, offset: 0}" :lg="{span: 10, offset: 0}">
           <el-form-item label="券名称:" prop="title">
             <el-input v-model="addData.title" :readonly="readonly" placeholder="请输入券名称" :maxlength="32" show-word-limit />
           </el-form-item>
@@ -14,11 +14,7 @@
             </el-radio-group>
           </el-form-item>
           <el-form-item v-if="addData.type === 1" label="是否新用户注册发放:">
-            <el-switch :disabled="readonly"
-              v-model="addData.isNewUserCoupon"
-              :active-value="1"
-              :inactive-value="0"
-            />
+            <el-switch :disabled="readonly" v-model="addData.isNewUserCoupon" :active-value="1" :inactive-value="0" />
           </el-form-item>
           <el-form-item label="券金额:" prop="discount">
             <el-input v-model.number="addData.discount" :readonly="readonly" type="number" :min="0" placeholder="请输入券券金额">
@@ -39,7 +35,7 @@
             </el-input>
             <div class="tip">若门店承担100%，则核销后公司不需要打款给门店，依此类推。</div>
           </el-form-item>
-          
+
           <el-form-item label="最低消费金额:" prop="minOrderAmt">
             <el-input v-model="addData.minOrderAmt" :readonly="readonly" type="number" placeholder="请输入可使用的最低消费金额">
               <template slot="append">元</template>
@@ -64,7 +60,7 @@
             <div style="color:#606266">{{ addData.usedQty }}</div>
           </el-form-item>
           <el-form-item label="使用说明:" prop="description">
-            <el-input type="textarea" rows="4" :readonly="readonly" v-model="addData.description" placeholder="请输入使用说明 对用户可见"/>
+            <el-input type="textarea" rows="4" :readonly="readonly" v-model="addData.description" placeholder="请输入使用说明 对用户可见" />
           </el-form-item>
           <el-form-item v-if="addData.type === 2" label="使用范围:" prop="useArea">
             <el-radio-group v-model="addData.useArea" :disabled="readonly || addData.status === 'on' || addData.status === 'off'">
@@ -81,68 +77,75 @@
               <el-radio :label="1">指定盲票</el-radio>
             </el-radio-group>
           </el-form-item>
-        </el-form>
+
       </el-col>
     </el-row>
     <el-row :gutter="18">
-     <el-col :span="18" :offset="2">
-       <div v-if="addData.useArea === 1 && addData.type === 1" style="padding: 0 20px">
-         <el-table :data="addData.ticketBoxList" height="300px">
-           <el-table-column label="盲票ID" prop="boxId" min-width="90" />
-           <el-table-column label="盲票图片" prop="picUrl" align="center">
-             <template slot-scope="{row}">
-               <a target="_black" v-if="row.picUrl && row.picUrl.split(',').length > 0" :href="`${IMG_URL + row.picUrl}`"><img :src="`${IMG_URL + row.picUrl.split(',')[0]}`" style="max-height: 37px;max-width: 54px"></a>
-               <span v-else>-</span>
-             </template>
-           </el-table-column>
-           <el-table-column label="盲票名称" prop="title" />
-           <el-table-column label="盲票面值" prop="facePrice" >
-             <template slot-scope="{row}">
-               ¥{{$numberFormat(row.facePrice)}}
-             </template>
-           </el-table-column>
-           <el-table-column label="盲票类型" prop="type">
-             <template slot-scope="{row}">
-               {{ row.type && JSON.parse(row.type).desc }}
-             </template>
-           </el-table-column>
-           <el-table-column label="盲票状态" prop="status">
-             <template slot-scope="{row}">
-               <el-tag :type="row.status && JSON.parse(row.status).value === 'on' ? 'success' : 'info'">{{ row.status && JSON.parse(row.status).desc }}</el-tag>
-             </template>
-           </el-table-column>
-           <el-table-column v-if="!readonly" prop="date" label="操作">
-             <template slot-scope="{ $index }">
-               <el-button type="text" class="del" @click="addData.ticketBoxList.splice($index, 1)">删除</el-button>
-             </template>
-           </el-table-column>
-         </el-table>
-         <br>
-         <el-button v-if="!readonly" type="primary" size="small" plain @click="funSelectShow">选择盲票</el-button> <span style="margin-left: 10px">已选盲票（{{ addData.ticketBoxList.length }}）</span>
-       </div>
-       <div v-if="addData.useArea === 1 && addData.type === 2" style="padding: 0 20px">
-         <el-table :data="channelList" height="300px">
-           <el-table-column label="门店编号" prop="channelId" min-width="90" />
-           <el-table-column label="门店名称" prop="name" />
-           <el-table-column label="手机号码" prop="mobile" />
-           <el-table-column label="上级渠道" prop="parentsName"/>
-           <el-table-column label="认证状态" prop="status">
-             <template slot-scope="{row}">
-               <el-tag :type="row.certifyStatus && JSON.parse(row.certifyStatus).value === 'y' ? 'success' : 'info'">{{ row.certifyStatus && JSON.parse(row.certifyStatus).desc }}</el-tag>
-             </template>
-           </el-table-column>
-           <el-table-column v-if="!readonly" prop="date" label="操作">
-             <template slot-scope="{ $index }">
-               <el-button type="text" class="del" @click="channelList.splice($index, 1)">删除</el-button>
-             </template>
-           </el-table-column>
-         </el-table>
-         <br>
-         <el-button v-if="!readonly" type="primary" size="small" plain @click="funChannelShow">选择门店</el-button> <span style="margin-left: 10px">已选门店（{{ channelList.length }}）</span>
-       </div>
-     </el-col>
+      <el-col :span="18" :offset="2">
+        <div v-if="addData.useArea === 1 && addData.type === 1" style="padding: 0 20px">
+          <el-table :data="addData.ticketBoxList" height="300px">
+            <el-table-column label="盲票ID" prop="boxId" min-width="90" />
+            <el-table-column label="盲票图片" prop="picUrl" align="center">
+              <template slot-scope="{row}">
+                <a target="_black" v-if="row.picUrl && row.picUrl.split(',').length > 0" :href="`${IMG_URL + row.picUrl}`"><img :src="`${IMG_URL + row.picUrl.split(',')[0]}`" style="max-height: 37px;max-width: 54px"></a>
+                <span v-else>-</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="盲票名称" prop="title" />
+            <el-table-column label="盲票面值" prop="facePrice">
+              <template slot-scope="{row}">
+                ¥{{$numberFormat(row.facePrice)}}
+              </template>
+            </el-table-column>
+            <el-table-column label="盲票类型" prop="type">
+              <template slot-scope="{row}">
+                {{ row.type && JSON.parse(row.type).desc }}
+              </template>
+            </el-table-column>
+            <el-table-column label="盲票状态" prop="status">
+              <template slot-scope="{row}">
+                <el-tag :type="row.status && JSON.parse(row.status).value === 'on' ? 'success' : 'info'">{{ row.status && JSON.parse(row.status).desc }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column v-if="!readonly" prop="date" label="操作">
+              <template slot-scope="{ $index }">
+                <el-button type="text" class="del" @click="addData.ticketBoxList.splice($index, 1)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <br>
+          <el-button v-if="!readonly" type="primary" size="small" plain @click="funSelectShow">选择盲票</el-button> <span style="margin-left: 10px">已选盲票（{{ addData.ticketBoxList.length }}）</span>
+        </div>
+        <div v-if="addData.useArea === 1 && addData.type === 2" style="padding: 0 20px">
+          <el-table :data="channelList" height="300px">
+            <el-table-column label="门店编号" prop="channelId" min-width="90" />
+            <el-table-column label="门店名称" prop="name" />
+            <el-table-column label="手机号码" prop="mobile" />
+            <el-table-column label="上级渠道" prop="parentsName" />
+            <el-table-column label="认证状态" prop="status">
+              <template slot-scope="{row}">
+                <el-tag :type="row.certifyStatus && JSON.parse(row.certifyStatus).value === 'y' ? 'success' : 'info'">{{ row.certifyStatus && JSON.parse(row.certifyStatus).desc }}</el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column v-if="!readonly" prop="date" label="操作">
+              <template slot-scope="{ $index }">
+                <el-button type="text" class="del" @click="channelList.splice($index, 1)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <br>
+          <el-button v-if="!readonly" type="primary" size="small" plain @click="funChannelShow">选择门店</el-button> <span style="margin-left: 10px">已选门店（{{ channelList.length }}）</span>
+        </div>
+      </el-col>
     </el-row>
-
+    <el-row :gutter="18">
+      <el-col :span="18" :offset="0" style="margin-top: 30px;">
+        <el-form-item label="优惠券详情:" prop="couponDetail">
+          <wang-editor ref="editor" v-model="addData.couponDetail" />
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
     <el-row v-if="!readonly">
       <el-col :span="23" style="text-align: center">
         <el-button type="info" @click="$router.go(-1)">取消</el-button>
@@ -151,25 +154,27 @@
     </el-row>
 
     <!-- 弹出层 -->
-    <SelectTicket :select-show="selectShow" :value="addData.ticketBoxList" :excludeBoxIds="excludeBoxIds" @close="selectShow = false" @selectTicket="selectTicket"   v-if="selectShow"/>
+    <SelectTicket :select-show="selectShow" :value="addData.ticketBoxList" :excludeBoxIds="excludeBoxIds" @close="selectShow = false" @selectTicket="selectTicket" v-if="selectShow" />
     <!-- 弹出层 -->
-    <ChannelTicket :channel-show="channelShow" :value="channelList" :excludeChannelIds="excludeChannelIds" @close="channelShow = false" @channelTicket="channelTicket"   v-if="channelShow"/>
+    <ChannelTicket :channel-show="channelShow" :value="channelList" :excludeChannelIds="excludeChannelIds" @close="channelShow = false" @channelTicket="channelTicket" v-if="channelShow" />
   </div>
 </template>
 <script>
 import Upload from '@/components/ImageUpload'
+import WangEditor from '@/components/WangEditor'
 import SelectTicket from './components/selectTicket'
 import ChannelTicket from './components/channelTicket'
 import { publicFileGetUrl } from '@/api/common'
 import { getCouponDetail, addCoupon } from '@/api/business/coupon'
 import { accDiv, accMul } from '@/utils/util'
-import {addData} from "../../../api/system/dict/data";
+import { addData } from "../../../api/system/dict/data";
 export default {
   name: 'CouponAdd',
   components: {
     Upload,
     SelectTicket,
-    ChannelTicket
+    ChannelTicket,
+    WangEditor
   },
   data() {
     return {
@@ -178,13 +183,13 @@ export default {
       readonly: this.$route.name === 'CouponQuery',
       channelList: [],
       addData: {
-        ticketBoxList:[],
+        ticketBoxList: [],
         useArea: 5,
         isNewUserCoupon: 0,
         dueDays: 90,
         type: 2,
-        channelSharedRate:0,
-        minOrderAmt:0,
+        channelSharedRate: 0,
+        minOrderAmt: 0,
         status: '',
       },
       addIng: false,
@@ -223,26 +228,29 @@ export default {
   created() {
     if (this.id) {
       getCouponDetail(this.id).then(res => {
-        const { couponId, title,isNewUserCoupon, quantity, discount, channelSharedRate, minOrderAmt, dueDays, description,usedQty, ticketBoxList, channelList, status } = res.data
+        const { couponId, title, isNewUserCoupon, quantity, discount, channelSharedRate, minOrderAmt, dueDays, description, usedQty, ticketBoxList, channelList, status,couponDetail } = res.data
         this.addData = {
           type: JSON.parse(res.data.type).value,
           useArea: JSON.parse(res.data.useArea).value,
-          isNewUserCoupon: isNewUserCoupon ? 1 : 0 ,
+          isNewUserCoupon: isNewUserCoupon ? 1 : 0,
           status: JSON.parse(res.data.status).value,
           discount: accDiv(discount, 100),
           minOrderAmt: accDiv(minOrderAmt, 100),
-          couponId, title, quantity, channelSharedRate, dueDays, description, ticketBoxList,usedQty
+          couponId, title, quantity, channelSharedRate, dueDays, description, ticketBoxList, usedQty,couponDetail
+        }
+        if (couponDetail) {
+          this.$refs.editor.setContent(couponDetail)
         }
         this.channelList = channelList
       })
     }
   },
   methods: {
-    funSelectShow(){
+    funSelectShow() {
       this.excludeBoxIds = this.addData.ticketBoxList.map(item => { return item.boxId })
       this.selectShow = true
     },
-    funChannelShow(){
+    funChannelShow() {
       this.excludeChannelIds = this.channelList.map(item => { return item.channelId })
       this.channelShow = true
     },
@@ -254,7 +262,7 @@ export default {
     },
     update() {
       if (this.addData.type == 1) {
-        if(this.addData.useArea !== 0 && this.addData.useArea !== 1 && this.addData.useArea !== 3 && this.addData.useArea !== 4) {
+        if (this.addData.useArea !== 0 && this.addData.useArea !== 1 && this.addData.useArea !== 3 && this.addData.useArea !== 4) {
           this.$message({
             message: '请选择使用范围！',
             type: 'warning'
@@ -263,7 +271,7 @@ export default {
         }
       } else if (this.addData.type == 2) {
         this.addData.isNewUserCoupon = null
-        if(this.addData.useArea !== 2 && this.addData.useArea !== 0 && this.addData.useArea !== 1 ) {
+        if (this.addData.useArea !== 2 && this.addData.useArea !== 0 && this.addData.useArea !== 1) {
           this.$message({
             message: '请选择使用范围！',
             type: 'warning'
@@ -274,18 +282,18 @@ export default {
       this.$refs.addItem.validate((valid, items) => {
         if (valid) {
           this.addIng = true
-          if(this.addData.useArea === 1 && this.addData.type === 1) {
+          if (this.addData.useArea === 1 && this.addData.type === 1) {
             this.addData.boxIds = this.addData.ticketBoxList.map(item => { return item.boxId }).toString()
           }
-          if(this.addData.useArea === 1 && this.addData.type === 2) {
+          if (this.addData.useArea === 1 && this.addData.type === 2) {
             let arr = []
             for (let i = 0; i < this.channelList.length; i++) {
               arr.push(this.channelList[i].channelId)
             }
             this.addData.channelIdList = arr
           }
-          const { discount, minOrderAmt, ...rest } = this.addData
-          addCoupon({...rest, ...{ discount: accMul(discount, 100), minOrderAmt: accMul(minOrderAmt, 100),}}).then(res => {
+          const { couponDetail, discount, minOrderAmt, ...rest } = this.addData
+          addCoupon({ ...rest, ...{ discount: accMul(discount, 100), minOrderAmt: accMul(minOrderAmt, 100), couponDetail: encodeURI(couponDetail)} }).then(res => {
             this.addIng = false
             if (res.code === 0) {
               this.$message({