瀏覽代碼

抽奖配置

lilei 4 年之前
父節點
當前提交
b080eee1f5
共有 3 個文件被更改,包括 296 次插入106 次删除
  1. 1 4
      src/components/UploadFile/index.vue
  2. 32 32
      src/config/router.config.js
  3. 263 70
      src/views/market/addlotterySetModal.vue

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

@@ -72,7 +72,6 @@ export default {
   },
   watch: {
     value (a, b) {
-      console.log(a, '=--====')
       this.comVal = a || ''
       if (a == undefined) {
         this.fileList = []
@@ -115,9 +114,7 @@ export default {
       if (this.listType == 'text') {
         return
       }
-      console.log(file, '8888888888')
       this.previewImage = file.url || file.thumbUrl
-      // this.previewImage = file.response.data
       this.previewVisible = true
     },
     handleChange ({ file, fileList }) {
@@ -127,6 +124,7 @@ export default {
       }
       this.fileList = this.validaFile(file, fileList)
       this.$emit('change', this.formatFile())
+      this.$emit('input', this.formatFile())
     },
     // 格式化文件列表数据,给表单
     formatFile () {
@@ -146,7 +144,6 @@ export default {
       if (filesList.length == 0) {
         return []
       }
-
       console.log(file, filesList, this.beforeUpload(file, 0))
       if (!this.beforeUpload(file, 0) && file.status != 'removed') {
         const index = filesList.findIndex(item => item.uid == file.uid)

+ 32 - 32
src/config/router.config.js

@@ -241,38 +241,38 @@ export const asyncRouterMap = [{
       }
     ]
   },
-  // {
-  //   path: '/market',
-  //   redirect: '/market/winingRecord',
-  //   component: PageView,
-  //   meta: {
-  //     title: '营销',
-  //     icon: 'gift'
-  //     // permission: 'M_winingRecord_list'
-  //   },
-  //   children: [
-  //     {
-  //       path: '/market/winingRecord',
-  //       name: 'winingRecord',
-  //       component: () => import(/* webpackChunkName: "market" */ '@/views/market/winingRecord.vue'),
-  //       meta: {
-  //         title: '中奖记录',
-  //         icon: 'file-done'
-  //         // permission: 'M_winingRecord_list'
-  //       }
-  //     },
-  //     {
-  //       path: '/market/lotterySettings',
-  //       name: 'lotterySettings',
-  //       component: () => import(/* webpackChunkName: "market" */ '@/views/market/lotterySettings.vue'),
-  //       meta: {
-  //         title: '大转盘设置',
-  //         icon: 'edit'
-  //         // permission: 'M_lotterySettings'
-  //       }
-  //     }
-  //   ]
-  // },
+  {
+    path: '/market',
+    redirect: '/market/winingRecord',
+    component: PageView,
+    meta: {
+      title: '营销',
+      icon: 'gift'
+      // permission: 'M_winingRecord_list'
+    },
+    children: [
+      {
+        path: '/market/winingRecord',
+        name: 'winingRecord',
+        component: () => import(/* webpackChunkName: "market" */ '@/views/market/winingRecord.vue'),
+        meta: {
+          title: '中奖记录',
+          icon: 'file-done'
+          // permission: 'M_winingRecord_list'
+        }
+      },
+      {
+        path: '/market/lotterySettings',
+        name: 'lotterySettings',
+        component: () => import(/* webpackChunkName: "market" */ '@/views/market/lotterySettings.vue'),
+        meta: {
+          title: '大转盘设置',
+          icon: 'edit'
+          // permission: 'M_lotterySettings'
+        }
+      }
+    ]
+  },
   {
     path: '/shopSetting',
     redirect: '/shopSetting/bannerSetting',

+ 263 - 70
src/views/market/addlotterySetModal.vue

@@ -1,5 +1,13 @@
 <template>
   <div>
+    <!-- 奖品类型 -->
+    <v-select
+      ref="jpType"
+      code="RUBBISH_TYPE"
+      v-show="false"
+    >
+    </v-select>
+
     <a-modal
       v-model="isShow"
       @cancle="isShow = false"
@@ -35,7 +43,17 @@
             </a-form-model-item>
           </a-col>
           <a-col :span="6">
-            <a-form-model-item ref="cjRc" label="抽奖人次" prop="cjRc">
+            <a-form-model-item
+              ref="cjRc"
+              label="抽奖人次"
+              prop="cjRc"
+              :required="!form.bxCjRc"
+              :rules="{
+                required: !form.bxCjRc,
+                message: '请输入抽奖人次',
+                trigger: ['blur','change'],
+              }"
+            >
               <a-input-number
                 id="addLottery-cjRc"
                 style="width: 50%;margin-right: 20px;"
@@ -87,34 +105,96 @@
         </a-row>
 
         <h3 class="form-titles">奖品设置</h3>
-        <a-row :gutter="48">
-          <a-col :span="24">
-            <div class="form-item">
-              <div style="margin-right: 10px;"><span class="red">*</span>请选择转盘类型</div>
-              <a-select style="width: 300px;" @change="zpTypeChange" v-model="form.zpType" placeholder="请选择转盘类型">
-                <a-select-option value="5">
-                  五等分
-                </a-select-option>
-                <a-select-option value="6">
-                  六等分
-                </a-select-option>
-              </a-select>
-            </div>
-            <div class="form-item" v-for="(item, index) in form.jpList" :key="index">
-              <div style="margin-right: 10px;"><span class="red">*</span> 奖品{{ index+1 }}</div>
-              <a-select style="width: 120px;margin-right: 5px;" v-model="item.jpType" placeholder="请选择奖品类型">
-                <a-select-option value="0">
-                  送实物
-                </a-select-option>
-                <a-select-option value="1">
-                  送乐豆
-                </a-select-option>
-                <a-select-option value="2">
-                  未中奖
-                </a-select-option>
+        <div class="form-item">
+          <a-form-model-item style="margin: 0;" ref="zpType" label="请选择转盘类型" prop="zpType">
+            <a-select style="width: 300px;" @change="zpTypeChange" v-model="form.zpType" placeholder="请选择转盘类型">
+              <a-select-option value="5">
+                五等分
+              </a-select-option>
+              <a-select-option value="6">
+                六等分
+              </a-select-option>
+            </a-select>
+          </a-form-model-item>
+        </div>
+
+        <a-row
+          type="flex"
+          align="middle"
+          v-for="(item, index) in form.jpList"
+          :key="index"
+          v-if="form.jpList.length"
+          :gutter="10"
+        >
+          <a-col span="1">
+            <a-form-model-item>
+              <span class="red">*</span> 奖品{{ index+1 }}
+            </a-form-model-item>
+          </a-col>
+          <a-col span="3">
+            <a-form-model-item
+              :label="''"
+              :required="true"
+              :label-col=" { span: 0 }"
+              :wrapper-col=" { span: 24 }"
+              :prop="'jpList.' + index + '.jpType'"
+              :rules="{
+                required: true,
+                message: '请选择奖品类型',
+                trigger: ['blur','change'],
+              }"
+            >
+              <a-select
+                :id="'jpList-jpType'+index"
+                style="width: 100%;"
+                v-model="item.jpType"
+                placeholder="请选择奖品类型">
+                <a-select-option
+                  v-for="item in $refs.jpType.getOptionDatas()"
+                  :key="item.code"
+                  :value="item.code">{{ item.dispName }}</a-select-option>
               </a-select>
-              <a-input style="width: 200px;margin-right: 5px;" v-model="item.name" placeholder="请输入奖品名称,10个字以内"/>
-              <a-select style="width: 120px;margin-right: 5px;" v-model="item.isZj" placeholder="是否中奖">
+            </a-form-model-item>
+          </a-col>
+          <a-col span="3">
+            <a-form-model-item
+              :label="''"
+              :required="true"
+              :label-col=" { span: 0 }"
+              :wrapper-col=" { span: 24 }"
+              :prop="'jpList.' + index + '.name'"
+              :rules="{
+                required: true,
+                message: '请输入奖品名称',
+                trigger: ['blur','change'],
+              }"
+            >
+              <a-input
+                :id="'jpList-name'+index"
+                style="width: 100%;"
+                v-model="item.name"
+                :maxLength="10"
+                placeholder="请输入奖品名称,10个字以内"/>
+            </a-form-model-item>
+          </a-col>
+          <a-col span="3">
+            <a-form-model-item
+              :label="''"
+              :required="true"
+              :label-col=" { span: 0 }"
+              :wrapper-col=" { span: 24 }"
+              :prop="'jpList.' + index + '.isZj'"
+              :rules="{
+                required: true,
+                message: '是否中奖',
+                trigger: ['blur','change'],
+              }"
+            >
+              <a-select
+                :id="'jpList-isZj'+index"
+                style="width: 100%;"
+                v-model="item.isZj"
+                placeholder="是否中奖">
                 <a-select-option value="1">
                 </a-select-option>
@@ -122,81 +202,152 @@
                 </a-select-option>
               </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col span="3">
+            <a-form-model-item
+              :label="''"
+              :required="true"
+              :label-col=" { span: 0 }"
+              :wrapper-col=" { span: 24 }"
+              :prop="'jpList.' + index + '.glv'"
+              :rules="{
+                required: true,
+                message: '请输入中奖概率',
+                trigger: ['blur','change'],
+              }"
+            >
               <a-input-number
-                style="width: 150px;margin-right: 5px;"
+                style="width: 100%;"
+                :id="'jpList-glv'+index"
                 v-model="item.glv"
                 :min="0"
                 :max="100"
                 :precision="2"
                 placeholder="请输入中奖概率(%)"
                 allowClear />
+            </a-form-model-item>
+          </a-col>
+          <a-col span="3">
+            <a-form-model-item
+              :label="''"
+              :required="true"
+              :label-col=" { span: 0 }"
+              :wrapper-col=" { span: 24 }"
+              :prop="'jpList.' + index + '.nums'"
+              :rules="{
+                required: true,
+                message: '请输入奖品数量',
+                trigger: ['blur','change'],
+              }"
+            >
               <a-input-number
-                style="width: 150px;margin-right: 5px;"
+                style="width: 100%;"
+                :id="'jpList-nums'+index"
                 v-model="item.nums"
                 :min="0"
                 :max="999999"
                 :precision="0"
                 placeholder="请输入奖品数量"
                 allowClear />
+            </a-form-model-item>
+          </a-col>
+          <a-col span="8">
+            <a-form-model-item
+              :label="''"
+              :label-col=" { span: 0 }"
+              :wrapper-col=" { span: 24 }"
+              :prop="'jpList.' + index + '.image'"
+            >
               <Upload
-                class="upload"
+                :id="'jpList-image'+index"
                 v-model="item.image"
-                ref="homeImage"
                 :fileSize="0.25"
                 listType="picture-card">
               </Upload>
               <span class="upload-desc">请上传奖品图片,300*300px,0.25MB 以内。</span>
-            </div>
+            </a-form-model-item>
           </a-col>
         </a-row>
-
+        <div style="height: 1px;background-color: #eee;margin-bottom: 20px;" ></div>
         <a-row :gutter="48">
           <a-col :span="12">
             <div class="form-item">
               <div style="margin-right: 10px;"><span class="red">*</span>中奖限制:</div>
-              <a-select mode="multiple" style="width: 300px;" v-model="form.zjXz" placeholder="请选择中奖限制">
-                <a-select-option value="5">
-                  中奖后抽奖XXX次内不能再次中奖
-                </a-select-option>
-                <a-select-option value="6">
-                  每天最多可中奖XXX次
-                </a-select-option>
-                <a-select-option value="6">
-                  每人最多可中奖XXX次
-                </a-select-option>
+              <a-select mode="multiple" style="width: 300px;" @change="zjxzChange" v-model="form.zjXz" placeholder="请选择中奖限制">
+                <a-select-option
+                  v-for="item in zjXz"
+                  :key="item.code"
+                  :value="item.code">{{ item.dispName }}</a-select-option>
               </a-select>
             </div>
-            <div class="form-item">
-              <div v-for="(item,index) in form.zjXz" :key="index">
+            <div class="form-item" v-for="(item,index) in form.zjXzCs" :key="index">
+              <a-form-model-item
+                style="margin: 0;"
+                :label="''"
+                :required="true"
+                :label-col=" { span: 0 }"
+                :wrapper-col=" { span: 24 }"
+                :prop="'zjXzCs.' + index + '.nums'"
+                :rules="{
+                  required: true,
+                  message: '请输入次数',
+                  trigger: ['blur','change'],
+                }"
+              >
+                {{ index+1 }}.
+                {{ item.name.split('XXX')[0] }}
                 <a-input-number
-                  style="width: 150px;margin-right: 5px;"
+                  style="width: 100px;"
+                  :id="'zjXzCs-nums'+index"
                   v-model="item.nums"
                   :min="0"
                   :max="100"
-                  :precision="2"
-                  placeholder="请输入中奖概率(%)"
+                  :precision="0"
+                  placeholder="请输入次数"
                   allowClear />
-              </div>
+                {{ item.name.split('XXX')[1] }}
+              </a-form-model-item>
             </div>
           </a-col>
           <a-col :span="12">
             <div class="form-item">
               <div style="margin-right: 10px;"><span class="red">*</span>赠送抽奖次数规则:</div>
-              <a-select mode="multiple" style="width: 300px;" v-model="form.cjGz" placeholder="请选择">
-                <a-select-option value="5">
-                  新用户登录送抽奖
-                </a-select-option>
-                <a-select-option value="6">
-                  用户首次投递送抽奖
-                </a-select-option>
-                <a-select-option value="6">
-                  分享给好友或朋友圈送抽奖
-                </a-select-option>
-                <a-select-option value="6">
-                  3个月内无投递记录送抽奖
-                </a-select-option>
+              <a-select mode="multiple" style="width: 300px;" @change="cjGzChange" v-model="form.cjGz" placeholder="请选择">
+                <a-select-option
+                  v-for="item in cjGz"
+                  :key="item.code"
+                  :value="item.code">{{ item.dispName }}</a-select-option>
               </a-select>
             </div>
+            <div class="form-item" v-for="(item,index) in form.cjGzCs" :key="index">
+              <a-form-model-item
+                style="margin: 0;"
+                :label="''"
+                :required="true"
+                :label-col=" { span: 0 }"
+                :wrapper-col=" { span: 24 }"
+                :prop="'cjGzCs.' + index + '.nums'"
+                :rules="{
+                  required: true,
+                  message: '请输入次数',
+                  trigger: ['blur','change'],
+                }"
+              >
+                {{ index+1 }}.
+                {{ item.name }}, 赠送
+                <a-input-number
+                  style="width: 100px;"
+                  :id="'cjGzCs-nums'+index"
+                  v-model="item.nums"
+                  :min="0"
+                  :max="100"
+                  :precision="0"
+                  placeholder="请输入次数"
+                  allowClear />
+                次
+              </a-form-model-item>
+            </div>
           </a-col>
         </a-row>
 
@@ -249,15 +400,29 @@ export default {
         cjDesc: '',
         zpType: undefined,
         jpList: [],
-        zjXz: [],
-        cjGz: []
+        zjXz: undefined,
+        zjXzCs: [],
+        cjGz: undefined,
+        cjGzCs: []
       },
+      zjXz: [
+        { dispName: '(单个用户)中奖后抽奖XXX次内不能再次中奖', code: 0 },
+        { dispName: '(所有用户)每天最多可中奖XXX次', code: 1 },
+        { dispName: '(活动时间内)每人最多可中奖XXX次', code: 2 }
+      ],
+      cjGz: [
+        { dispName: '新用户登录', code: 0 },
+        { dispName: '新用户首次投递', code: 1 },
+        { dispName: '历史注册用户首次投递', code: 2 },
+        { dispName: '分享给好友或朋友圈', code: 3 },
+        { dispName: '老用户回归', code: 4 }
+      ],
       rules: {
         name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
         time: [{ required: true, message: '请选择活动时间', trigger: 'blur' }],
-        cjRc: [{ required: true, message: '请输入抽奖人次', trigger: 'blur' }],
         price: [{ required: true, message: '请输入付费抽奖规则', trigger: 'blur' }],
         jpDesc: [{ required: true, message: '请输入奖品说明', trigger: 'blur' }],
+        zpType: [{ required: true, message: '请选择转盘类型', trigger: 'blur' }],
         jpTj: [{ required: true, message: '请输入抽奖条件', trigger: 'blur' }],
         cjDesc: [{ required: true, message: '请输入抽奖说明', trigger: 'blur' }]
       }
@@ -269,22 +434,50 @@ export default {
       console.log(e)
       if (e.target.checked) {
         this.form.cjRc = ''
+        this.$refs.ruleForm.clearValidate('cjRc')
       }
     },
     // 选择转盘类型
     zpTypeChange (val) {
       console.log(val)
-      const _this = this
+      this.form.jpList = []
       for (let i = 0; i < val; i++) {
-        _this.form.jpList[i] = {
+        this.form.jpList.push({
           jpType: undefined,
           name: '',
-          isZj: '0',
+          isZj: undefined,
           glv: '',
           nums: '',
           image: ''
-        }
+        })
       }
+      this.$refs.ruleForm.clearValidate()
+    },
+    // 中奖限制
+    zjxzChange (val) {
+      console.log(val)
+      this.form.zjXzCs = []
+      this.form.zjXz && this.form.zjXz.map(item => {
+        const row = this.zjXz.find(k => k.code == item)
+        this.form.zjXzCs.push({
+          code: item,
+          name: row.dispName,
+          nums: ''
+        })
+      })
+    },
+    // 抽奖规则
+    cjGzChange (val) {
+      console.log(val)
+      this.form.cjGzCs = []
+      this.form.cjGz && this.form.cjGz.map(item => {
+        const row = this.cjGz.find(k => k.code == item)
+        this.form.cjGzCs.push({
+          code: item,
+          name: row.dispName,
+          nums: ''
+        })
+      })
     },
     // 保存
     onSubmit () {