浏览代码

红包设置

lilei 2 年之前
父节点
当前提交
e0503c4cd5

+ 11 - 0
src/api/redPacket.js

@@ -69,4 +69,15 @@ export const rewardRuleShelfQueryPage = params => {
     data: params,
     data: params,
     method: 'POST'
     method: 'POST'
   })
   })
+}
+// 货架加入列表
+export const shelfJoinQueryPage = params => {
+  const url = `/rewardRuleStore/shelf/joinQueryPage/${params.pageNo}/${params.pageSize}`
+  delete params.pageNo
+  delete params.pageSize
+  return axios({
+    url: url,
+    data: params,
+    method: 'POST'
+  })
 }
 }

+ 1 - 1
src/components/UploadFile/index.vue

@@ -20,7 +20,7 @@
         <a-button> <a-icon type="upload" /> {{ upText }} </a-button>
         <a-button> <a-icon type="upload" /> {{ upText }} </a-button>
       </div>
       </div>
     </a-upload>
     </a-upload>
-    <a-modal :visible="previewVisible" :footer="null" centered :maskClosable="false" @cancel="handleCancel">
+    <a-modal :visible="previewVisible" :footer="null" centered :maskClosable="true" @cancel="handleCancel">
       <video v-if="fileType=='video/mp4'" controls="controls" style="width: 100%" :src="previewImage" />
       <video v-if="fileType=='video/mp4'" controls="controls" style="width: 100%" :src="previewImage" />
       <img v-else alt="example" style="width: 100%" :src="previewImage" />
       <img v-else alt="example" style="width: 100%" :src="previewImage" />
     </a-modal>
     </a-modal>

+ 9 - 2
src/config/router.config.js

@@ -155,7 +155,6 @@ export const asyncRouterMap = [
                 meta: {
                 meta: {
                   title: '编辑红包活动',
                   title: '编辑红包活动',
                   hidden: true,
                   hidden: true,
-                  replaceTab: true
                 }
                 }
               },
               },
               {
               {
@@ -165,7 +164,15 @@ export const asyncRouterMap = [
                 meta: {
                 meta: {
                   title: '新增红包活动',
                   title: '新增红包活动',
                   hidden: true,
                   hidden: true,
-                  replaceTab: true
+                }
+              },
+              {
+                path: 'detail/:sn',
+                name: 'redPacketDetail',
+                component: () => import('@/views/numsGoodsShelves/redPacket/detail.vue'),
+                meta: {
+                  title: '红包活动详情',
+                  hidden: true,
                 }
                 }
               },
               },
             ]
             ]

+ 183 - 0
src/views/numsGoodsShelves/redPacket/detail.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="redPacketSetDetail-page">
+    <a-spin :spinning="spinning" tip="Loading...">
+      <a-page-header :ghost="false" :backIcon="false" class="redPacketSetDetail-baseInfo">
+        <template slot="subTitle">
+          <a href="javascript:;" @click="handleBack" id="redPacketSetDetail-handleBack">
+            <a-icon type="left"></a-icon> 返回列表
+          </a>
+          <span style="margin: 0 15px;color: #666;font-weight: bold;">红包活动详情</span>
+        </template>
+      </a-page-header>
+      <a-card :bordered="false" size="small" class="pages-wrap">
+        <div class="redPacketSetDetail-baseInfo">
+          <a-form-model
+            id="redPacketSetDetail-form"
+            ref="ruleForm"
+            :model="form"
+            :rules="rules"
+            :label-col="formItemLayout.labelCol"
+            :wrapper-col="formItemLayout.wrapperCol"
+          >
+            <a-row :gutter="24">
+              <a-row>
+                <a-col :span="12">
+                  <a-form-model-item label="活动名称">
+                    {{ form.ruleName }}
+                  </a-form-model-item>
+                </a-col>
+                <!-- <a-col :span="12">
+                  <a-form-model-item label="活动截止时间" prop="activeTime" help="活动成发布后即刻开始,无需设置开始时间">
+                    <a-input id="redPacket-time" style="width: 70%;margin-right:10px;" allowClear v-model.trim="form.activeTime" placeholder="请输入活动截止时间(精确到小时)"/>
+                    <a-checkbox>永久</a-checkbox>
+                  </a-form-model-item>
+                </a-col> -->
+              </a-row>
+              <a-row>
+                <a-col :span="24">
+                  <a-form-model-item label="参与货架" prop="joinNum" :label-col="{span: 3}" :wrapper-col="{span: 20}">
+                    <span v-if="form.joinNum">已选{{ form.joinNum }}货架</span>
+                    <a-button type="link" class="button-info" @click="openModal=true">点击查看</a-button>
+                  </a-form-model-item>
+                </a-col>
+              </a-row>
+              <!-- <a-row>
+                <a-col :span="24">
+                  <a-form-model-item label="活动范围" prop="activeOrg" :label-col="{span: 3}" :wrapper-col="{span: 20}">
+                    <div style="color:#999">修配易码通用户下单后可获得红包奖励</div>
+                    <a-checkbox-group
+                      v-model="form.activeOrg"
+                      name="checkboxgroup"
+                      :options="plainOptions"
+                    />
+                  </a-form-model-item>
+                </a-col>
+              </a-row> -->
+              <a-row>
+                <a-col :span="24">
+                  <a-form-model-item label="客服微信" prop="serviceQrcode" :label-col="{span: 3}" :wrapper-col="{span: 20}">
+                    <img :src="form.serviceQrcode" width="100px"></img>
+                  </a-form-model-item>
+                </a-col>
+              </a-row>
+              <a-row>
+                <a-col :span="24">
+                  <a-form-model-item label="备注" :label-col="{span: 3}" :wrapper-col="{span: 20}">
+                    {{ form.remarks }}
+                  </a-form-model-item>
+                </a-col>
+              </a-row>
+            </a-row>
+            <a-form-model-item :label-col="{span: 0}" :wrapper-col="{span: 24}" style="text-align: center;">
+              <a-button type="default" @click="handleBack" style="margin-right:20px;" id="redPacketSetDetail-cansel">返回列表</a-button>
+            </a-form-model-item>
+          </a-form-model>
+        </div>
+      </a-card>
+      <!-- 选择货架弹窗 -->
+      <shelfDetail ref="shelfDetail" :itemData="form" :visible="openModal" @close="openModal=false"></shelfDetail>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import { VSelect, Upload } from '@/components'
+import { rewardRuleDetail } from '@/api/redPacket.js'
+import shelfDetail from './shelfDetail.vue'
+export default {
+  components: { shelfDetail, VSelect, Upload },
+  data () {
+    return {
+      spinning: false,
+      openModal: false, // 货位模板弹窗初始状态
+      formItemLayout: {
+        labelCol: { span: 6 },
+        wrapperCol: { span: 14 }
+      },
+      plainOptions: [{ label: '货架订单', value: '1' }],
+      pageInfo: null,
+      form: {
+        ruleName: '', // 活动名称
+        joinNum: '', // 参与数
+        ruleStoreList: [], // 参与门店
+        serviceQrcode: '', // 客服二维码图片
+        remarks: ''
+      },
+      rules: {}
+    }
+  },
+  computed: {
+    isEdit () {
+      return this.$route.params.sn
+    }
+  },
+  methods: {
+    handleBack () {
+      this.form = {
+        ruleName: '', // 活动名称
+        joinNum: '', // 参与数
+        ruleStoreList: [], // 参与门店
+        serviceQrcode: '', // 客服二维码图片
+        remarks: ''
+      }
+      this.$refs.ruleForm.resetFields()
+      this.$router.push({ name: 'redPacketList' })
+    },
+    // 活动详情
+    getDetail () {
+      this.spinning = true
+      rewardRuleDetail({
+        rewardRuleSn: this.$route.params.sn
+      }).then(res => {
+        if (res.status == 200) {
+          const storeList = []
+          res.data.rewardRuleStoreList.map(item => {
+            storeList.push({
+              shelfSn: item.shelfSn
+            })
+          })
+          this.form = {
+            ruleName: res.data.ruleName, // 活动名称
+            joinNum: res.data.joinNum, // 参与数
+            ruleStoreList: storeList, // 参与门店
+            serviceQrcode: res.data.serviceQrcode, // 客服二维码图片
+            remarks: res.data.remarks,
+            rewardRuleSn: res.data.rewardRuleSn
+          }
+        }
+        this.spinning = false
+      })
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      // 编辑
+      if (vm.$route.params.sn) {
+        vm.getDetail()
+      }
+    })
+  }
+}
+</script>
+
+<style lang="less">
+  .redPacketSetDetail-page{
+    position: relative;
+    height: 100%;
+    padding-bottom: 51px;
+    box-sizing: border-box;
+    .redPacketSetDetail-baseInfo{
+      margin-bottom: 10px;
+      .ant-input-number-handler-wrap{
+        display: none;
+      }
+    }
+    .bzj-collapse{
+      margin-top: 10px;
+      .ant-collapse-content-box{
+        padding: 10px !important;
+      }
+    }
+
+  }
+</style>

+ 4 - 12
src/views/numsGoodsShelves/redPacket/edit.vue

@@ -94,7 +94,6 @@
 import { VSelect, Upload } from '@/components'
 import { VSelect, Upload } from '@/components'
 import { rewardRuleDetail, rewardRuleCreate, rewardRuleModify } from '@/api/redPacket.js'
 import { rewardRuleDetail, rewardRuleCreate, rewardRuleModify } from '@/api/redPacket.js'
 import shelfModal from './shelfModal.vue'
 import shelfModal from './shelfModal.vue'
-import { toThousands } from '@/libs/tools.js'
 export default {
 export default {
   components: { shelfModal, VSelect, Upload },
   components: { shelfModal, VSelect, Upload },
   data () {
   data () {
@@ -116,17 +115,9 @@ export default {
       },
       },
       rules: {
       rules: {
         ruleName: [ { required: true, message: '请输入活动名称', trigger: 'change' } ],
         ruleName: [ { required: true, message: '请输入活动名称', trigger: 'change' } ],
-        joinNum: [ { required: true, message: '请选择参与货架', trigger: 'blur' } ],
-        serviceQrcode: [ { required: true, message: '请上传客服二维码图片', trigger: 'change' } ]
-      },
-      // 表头
-      columns: [
-        { title: '序号', dataIndex: 'no', width: '10%', align: 'center', customRender: function (text, record, index) { return index + 1 || '--' } },
-        { title: '创建时间', dataIndex: 'createDate', width: '20%', align: 'center', customRender: function (text) { return text || '--' } },
-        { title: '保证金金额', dataIndex: 'bondAmount', width: '30%', align: 'right', customRender: function (text) { return toThousands(text, 2) || '--' } },
-        { title: '状态', dataIndex: 'stateDictValue', width: '20%', align: 'center', customRender: function (text) { return text || '--' } },
-        { title: '支付时间', width: '20%', align: 'center', dataIndex: 'payDate' }
-      ]
+        joinNum: [ { required: true, message: '请选择参与货架', trigger: 'change' } ],
+        serviceQrcode: [ { required: true, message: '请上传客服微信二维码图片', trigger: 'change' } ]
+      }
     }
     }
   },
   },
   computed: {
   computed: {
@@ -158,6 +149,7 @@ export default {
       this.form.ruleStoreList = data
       this.form.ruleStoreList = data
       this.openModal = false
       this.openModal = false
       this.form.joinNum = data.length
       this.form.joinNum = data.length
+      this.$refs.ruleForm.validateField('joinNum')
     },
     },
     // 活动详情
     // 活动详情
     getDetail () {
     getDetail () {

+ 21 - 8
src/views/numsGoodsShelves/redPacket/list.vue

@@ -35,6 +35,9 @@
         :scroll="{ y: tableHeight }"
         :scroll="{ y: tableHeight }"
         :defaultLoadData="false"
         :defaultLoadData="false"
         bordered>
         bordered>
+        <template slot="shelf" slot-scope="text, record">
+          共 <a title="查看参与货架" @click="viewShelf(record)">{{ text }}</a> 个货架
+        </template>
         <template slot="action" slot-scope="text, record">
         <template slot="action" slot-scope="text, record">
           <a-button v-if="record.ruleStatus == 'wait'" size="small" type="link" class="button-info" @click="handlePublish(record)">发布</a-button>
           <a-button v-if="record.ruleStatus == 'wait'" size="small" type="link" class="button-info" @click="handlePublish(record)">发布</a-button>
           <a-button v-if="record.ruleStatus == 'release'" size="small" type="link" class="button-info" @click="handleEnd(record)">终止</a-button>
           <a-button v-if="record.ruleStatus == 'release'" size="small" type="link" class="button-info" @click="handleEnd(record)">终止</a-button>
@@ -44,6 +47,7 @@
         </template>
         </template>
       </s-table>
       </s-table>
     </a-spin>
     </a-spin>
+    <shelfDetail ref="shelfDetail" :itemData="itemData" :visible="showModal" @close="closeModal"></shelfDetail>
   </a-card>
   </a-card>
 </template>
 </template>
 
 
@@ -52,9 +56,10 @@ import { STable, VSelect } from '@/components'
 import { rewardRuleList, rewardRuleRelease, rewardRuleDelete, rewardRuleClose } from '@/api/redPacket.js'
 import { rewardRuleList, rewardRuleRelease, rewardRuleDelete, rewardRuleClose } from '@/api/redPacket.js'
 import dealerList from '@/views/common/dealerList.vue'
 import dealerList from '@/views/common/dealerList.vue'
 import storeList from '@/views/common/storeList.vue'
 import storeList from '@/views/common/storeList.vue'
+import shelfDetail from './shelfDetail.vue'
 export default {
 export default {
   name: 'UserList',
   name: 'UserList',
-  components: { STable, VSelect, storeList, dealerList },
+  components: { STable, VSelect, storeList, dealerList, shelfDetail },
   data () {
   data () {
     return {
     return {
       spinning: false,
       spinning: false,
@@ -73,12 +78,12 @@ export default {
         { title: '活动名称', dataIndex: 'ruleName', width: '17%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
         { title: '活动名称', dataIndex: 'ruleName', width: '17%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
         { title: '活动发布时间', dataIndex: 'releaseDate', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
         { title: '活动发布时间', dataIndex: 'releaseDate', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
         { title: '活动截止时间', dataIndex: 'expireDate', width: '10%', align: 'center', customRender: function (text, record) { return record.neverExpireFlag == 1 ? '永久' : text } },
         { title: '活动截止时间', dataIndex: 'expireDate', width: '10%', align: 'center', customRender: function (text, record) { return record.neverExpireFlag == 1 ? '永久' : text } },
-        { title: '参与货架', dataIndex: 'joinNum', width: '8%', align: 'center', customRender: function (text) { return text ? ('共' + text + '个货架') : '--' } },
+        { title: '参与货架', dataIndex: 'joinNum', width: '8%', align: 'center', scopedSlots: { customRender: 'shelf' } },
         { title: '活动范围', dataIndex: 'bizTypes', width: '8%', align: 'center', customRender: function (text) { return '货架订单' } },
         { title: '活动范围', dataIndex: 'bizTypes', width: '8%', align: 'center', customRender: function (text) { return '货架订单' } },
         { title: '活动状态', dataIndex: 'ruleStatusDictValue', width: '8%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
         { title: '活动状态', dataIndex: 'ruleStatusDictValue', width: '8%', align: 'center', customRender: function (text) { return (text || text == 0) ? text : '--' } },
         { title: '备注', dataIndex: 'remarks', width: '12%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
         { title: '备注', dataIndex: 'remarks', width: '12%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
         { title: '创建时间', dataIndex: 'createDate', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
         { title: '创建时间', dataIndex: 'createDate', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
-        { title: '操作', width: '12%', align: 'left', scopedSlots: { customRender: 'action' } }
+        { title: '操作', width: '12%', align: 'center', scopedSlots: { customRender: 'action' } }
       ],
       ],
       // 加载数据方法 必须为 Promise 对象
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
       loadData: parameter => {
@@ -116,6 +121,19 @@ export default {
         this.$router.push({ name: 'redPacketAdd' })
         this.$router.push({ name: 'redPacketAdd' })
       }
       }
     },
     },
+    // 详情
+    handleDetail (row) {
+      this.$router.push({ name: 'redPacketDetail', params: { sn: row.rewardRuleSn } })
+    },
+    // 查看参与货架详细
+    viewShelf (row) {
+      this.showModal = true
+      this.itemData = row
+    },
+    closeModal () {
+      this.showModal = false
+      this.itemData = null
+    },
     // 发布
     // 发布
     handlePublish (row) {
     handlePublish (row) {
       this.spinning = true
       this.spinning = true
@@ -159,11 +177,6 @@ export default {
         }
         }
       })
       })
     },
     },
-    // 详情
-    handleDetail (row) {
-      this.showModal = true
-      this.itemData = row
-    },
     pageInit () {
     pageInit () {
       const _this = this
       const _this = this
       _this.$refs.table.refresh()
       _this.$refs.table.refresh()

+ 116 - 0
src/views/numsGoodsShelves/redPacket/shelfDetail.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <a-modal
+      centered
+      wrapClassName="settlementModifyModal-modal"
+      :footer="null"
+      :maskClosable="false"
+      title="查看参与货架"
+      v-model="isshow"
+      @cancle="handleBack"
+      width="70%">
+      <a-spin :spinning="spinning" tip="Loading...">
+        <div style="padding: 15px 0;" v-if="itemData">
+          活动名称:{{ itemData.ruleName }}
+        </div>
+        <s-table
+          class="sTable"
+          ref="table"
+          size="small"
+          rowKey="shelfSn"
+          :columns="columns"
+          :data="loadData"
+          :defaultLoadData="false"
+          :scroll="{ y: 350 }"
+          bordered>
+        </s-table>
+        <div style="padding:10px;text-align:center;">
+          <a-button type="default" @click="handleBack">关闭</a-button>
+        </div>
+      </a-spin>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { STable, VSelect } from '@/components'
+import { shelfJoinQueryPage } from '@/api/redPacket.js'
+import dealerList from '@/views/common/dealerList.vue'
+import storeList from '@/views/common/storeList.vue'
+export default {
+  name: 'ShelfModal',
+  components: {
+    STable, VSelect, storeList, dealerList
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    itemData: {
+      type: Object,
+      default: function () {
+        return null
+      }
+    }
+  },
+  data () {
+    return {
+      spinning: false,
+      isshow: this.visible,
+      // 表头
+      columns: [
+        { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
+        { title: '货架名称', dataIndex: 'shelfName', width: '27%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '配件经销商', dataIndex: 'dealerName', width: '27%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '汽车修理厂', dataIndex: 'storeName', width: '26%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '货架状态', dataIndex: 'stateDictValue', width: '15%', align: 'center', customRender: function (text) { return text || '--' } }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        this.spinning = true
+        return shelfJoinQueryPage(Object.assign(parameter, { rewardRuleSn: this.itemData.rewardRuleSn })).then(res => {
+          let data
+          if (res.status == 200) {
+            data = res.data
+            const no = (data.pageNo - 1) * data.pageSize
+            for (let i = 0; i < data.list.length; i++) {
+              const _item = data.list[i]
+              _item.no = no + i + 1
+            }
+          }
+          this.spinning = false
+          return data
+        })
+      },
+      rowSelectionInfo: null
+    }
+  },
+  methods: {
+    handleBack () {
+      this.$emit('close')
+    }
+  },
+  watch: {
+    visible (newValue, oldValue) {
+      this.isshow = newValue
+    },
+    isshow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+      } else {
+        this.$nextTick(() => {
+          this.$refs.table.refresh(true)
+        })
+      }
+    }
+  }
+}
+</script>
+<style lang="less">
+.settlementModifyModal-modal{
+  .ant-input-number-handler-wrap{
+    display: none;
+  }
+}
+</style>

+ 14 - 3
src/views/numsGoodsShelves/redPacket/shelfModal.vue

@@ -41,11 +41,19 @@
           size="small"
           size="small"
           rowKey="shelfSn"
           rowKey="shelfSn"
           :columns="columns"
           :columns="columns"
-          :row-selection="{ columnWidth: 40 }"
+          :row-selection="{ columnWidth: 40, getCheckboxProps: record => ({ props: { disabled: !!record.rewardRuleStoreList && !checkedList.find(item=>item.shelfSn==record.shelfSn) } })}"
           @rowSelection="rowSelectionFun"
           @rowSelection="rowSelectionFun"
           :data="loadData"
           :data="loadData"
+          :defaultLoadData="false"
           :scroll="{ y: 350 }"
           :scroll="{ y: 350 }"
           bordered>
           bordered>
+          <template slot="ruleName" slot-scope="text, record">
+            <div v-if="record.rewardRuleStoreList">
+              <div v-for="item in record.rewardRuleStoreList" :key="item.id">
+                {{ item.rewardRule.ruleName }}({{ item.rewardRule.ruleStatusDictValue }})
+              </div>
+            </div>
+          </template>
         </s-table>
         </s-table>
         <div style="padding:10px;text-align:center;">
         <div style="padding:10px;text-align:center;">
           <a-button type="default" @click="handleBack" style="margin-right:20px;">取消</a-button>
           <a-button type="default" @click="handleBack" style="margin-right:20px;">取消</a-button>
@@ -96,7 +104,7 @@ export default {
         { title: '配件经销商', dataIndex: 'dealerName', width: '20%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
         { title: '配件经销商', dataIndex: 'dealerName', width: '20%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
         { title: '汽车修理厂', dataIndex: 'storeName', width: '20%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
         { title: '汽车修理厂', dataIndex: 'storeName', width: '20%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
         { title: '货架状态', dataIndex: 'stateDictValue', width: '11%', align: 'center', customRender: function (text) { return text || '--' } },
         { title: '货架状态', dataIndex: 'stateDictValue', width: '11%', align: 'center', customRender: function (text) { return text || '--' } },
-        { title: <div>已参加活动&nbsp;<a-tooltip placement='top' title='如果货架存在未开始或进行中的红包活动,则不能再参与其它红包活动。'><a-icon type="question-circle" /></a-tooltip></div>, width: '20%', align: 'center', dataIndex: 'storeName1', customRender: function (text) { return text || '--' } }
+        { title: <div>已参加活动&nbsp;<a-tooltip placement='top' title='如果货架存在未开始或进行中的红包活动,则不能再参与其它红包活动。'><a-icon type="question-circle" /></a-tooltip></div>, width: '20%', align: 'center', scopedSlots: { customRender: 'ruleName' } }
       ],
       ],
       // 加载数据方法 必须为 Promise 对象
       // 加载数据方法 必须为 Promise 对象
       loadData: parameter => {
       loadData: parameter => {
@@ -111,7 +119,10 @@ export default {
               _item.no = no + i + 1
               _item.no = no + i + 1
             }
             }
           }
           }
-          this.setCheckList(data.list)
+          // 编辑
+          if (this.checkedList && this.checkedList.length) {
+            this.setCheckList(data.list)
+          }
           this.spinning = false
           this.spinning = false
           return data
           return data
         })
         })