update: dist

src/views/game/cmh/base-config.vue

@@ -180,6 +180,7 @@ export default {
         const data = val[0];
         this.baseForm.templateId = data.templateId;
         this.handleTemplateArr(data);
+        this.$emit('change', this.baseForm);
       }
     }
   },
@@ -189,6 +190,7 @@ export default {
       this.baseForm.templateId = val;
       const data = this.templateArr.filter(item => item.templateId == val)[0];
       this.handleTemplateArr(data);
+      this.$emit('change', this.baseForm);
     },
     beforeAvatarUpload(file, key, size1 = 1) {
       console.log(file);
@@ -240,8 +242,9 @@ export default {
           let obj = data.materialMap[key][0];
           this.baseForm[key] = obj.materialValue;
           if (obj.materialSize) {
-            this.baseForm[key + 'Size0'] = JSON.parse(obj.materialSize).width + '*' + JSON.parse(obj.materialSize).height + 'px';
-            this.baseForm[key + 'Size1'] = JSON.parse(obj.materialSize).size + 'M';
+            const { width, height, size } = JSON.parse(obj.materialSize);
+            this.baseForm[key + 'Size0'] = width + '*' + height + 'px';
+            this.baseForm[key + 'Size1'] = size + 'M';
           }
         } else {
           this.backMusicOptions = data.materialMap['backMusicUrl'];

src/views/game/cmh/form.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="navtop">
       <div class="gameName">
-        <img src="../../../assets/img/recharge_phone.png" alt="" />
+        <img src="../../../assets/img/幸运盲盒.png" alt="" />
         <span>幸运盲盒</span>
       </div>
       <div class="rightBtn">
@@ -23,19 +23,19 @@
           <gameTemplate :bgImg="bgImg" :tipsImg="tipsImg" :boxImg="boxImg" :adImg="adImg" />
         </div>
         <div class="iphone" v-else>
-          <img :src="bcImg[menuActive]" />
+          <img :src="computedImg" />
         </div>
       </div>
       <div class="rightForm">
         <dm-steps :active="active" simple>
-          <dm-step title="步骤一" @click.native="active = 0"></dm-step>
-          <dm-step title="步骤二" @click.native="active = 1"></dm-step>
-          <dm-step title="步骤三" @click.native="active = 2"></dm-step>
+          <dm-step title="1.基础配置" @click.native="active = 0"></dm-step>
+          <dm-step title="2.奖项配置" @click.native="active = 1"></dm-step>
+          <dm-step title="3.规则配置" @click.native="active = 2"></dm-step>
         </dm-steps>
         <div class="formContent">
           <baseConfig :templateArr="templateData" v-show="active == 0" @change="handleBaseConfigChange" @nextStep="data => nextStep(1, data)" />
           <prizeConfig :prizeMax="prizeMax" :prizeMin="prizeMin" v-show="active == 1" @nextStep="data => nextStep(2, data)" />
-          <ruleConfig v-show="active == 2" />
+          <ruleConfig :shareCard="shareCard" :shareReport="shareReport" v-show="active == 2" />
         </div>
       </div>
     </div>
@@ -59,20 +59,26 @@ export default {
       prizeMax: 10,
       prizeMin: 1,
       gameName: '游戏名称',
-      bcImg: {
-        1: require('@/assets/img/mould_01_rule_page.png'),
-        2: require('@/assets/img/mould_01_prize_page.png'),
-        3: require('@/assets/img/mould_01_success_page.png'),
-        4: require('@/assets/img/mould_01_fail_page.png'),
-        5: require('@/assets/img/mould_01_share_page.png')
-      },
+      templateId: '',
       menuList: ['首页', '活动规则', '我的奖品', '中奖', '未中奖', '分享效果'],
-      bgImg: 'https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_bg.png',
-      tipsImg: 'https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/tips_btn.png',
-      boxImg: 'https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_box01.png',
+      bgImg: '',
+      tipsImg: '',
+      boxImg: '',
       adImg: ''
     };
   },
+  computed: {
+    computedImg() {
+      const bcImg = {
+        1: require(`@/assets/img/template${this.templateId}/mould_rule_page.png`),
+        2: require(`@/assets/img/template${this.templateId}/mould_prize_page.png`),
+        3: require(`@/assets/img/template${this.templateId}/mould_success_page.png`),
+        4: require(`@/assets/img/template${this.templateId}/mould_fail_page.png`),
+        5: require(`@/assets/img/template${this.templateId}/mould_share_page.png`)
+      };
+      return bcImg[this.menuActive];
+    }
+  },
   components: {
     'dm-steps': steps,
     'dm-step': step,
@@ -87,16 +93,27 @@ export default {
   destroyed() {
     this.$store.dispatch('setShowLayout', true);
   },
+  watch: {
+    templateId(val) {
+      const data = this.templateData.filter(item => item.templateId == val)[0];
+      const { prizeMax, prizeMin, materialMap } = data;
+      this.prizeMax = prizeMax;
+      this.prizeMin = prizeMin;
+      this.shareCard = materialMap.shareCard[0].materialValue;
+      this.shareReport = materialMap.shareReport[0].materialValue;
+    }
+  },
   methods: {
     handleBaseConfigChange(data) {
       console.log('handleBaseConfigChange----->');
       console.log(data);
-      const { backImageUrl, noticeImageUrl, adsImageUrl, gameName } = data;
+      const { backImageUrl, noticeImageUrl, adsImageUrl, gameName, templateId } = data;
       this.bgImg = backImageUrl;
       this.tipsImg = noticeImageUrl;
       this.boxImg = data.prizeStyleJson[0].imageNoSelectUrl;
       this.adImg = adsImageUrl;
       this.gameName = gameName;
+      this.templateId = templateId;
     },
     returnNext() {
       this.$store.dispatch('setShowLayout', true);
@@ -123,9 +140,9 @@ export default {
               item.materialMap = materialMap;
             });
             this.templateData = res.result;
-            const { prizeMax, prizeMin } = res.result[0];
-            this.prizeMax = prizeMax;
-            this.prizeMin = prizeMin;
+            const { templateId } = res.result[0];
+
+            this.templateId = templateId;
           }
           console.log(this.templateData);
         }