update: 大转盘

src/views/game/dzp/form.vue

@@ -115,6 +115,26 @@
                 </template>
               </template>
             </el-table-column>
+            <el-table-column prop="img" :render-header="labelImg" align="left" :min-width="160">
+              <template slot-scope="scope" v-if="scope.row.prizeType !== 3">
+                <template v-if="isAdd || scope.row.inOpt">
+                  <el-row type="flex" align="middle">
+                    <el-upload action="http://gicdev.demogic.com/api-marketing/upload-game-image" :disabled="!!scope.row.prizeImage" :data="{ requestProject: 'marketing' }" with-credentials accept="jpg,png" class="avatar-uploader" :show-file-list="false" :before-upload="beforeUpload" :on-success="onUploaded(scope.row)" :on-error="onUploadError">
+                      <img v-if="scope.row.prizeImage" :src="scope.row.prizeImage" style="width:30px;height:30px;object-fit:contain" />
+                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                      <i class="el-icon-error" v-if="scope.row.prizeImage" @click="scope.row.prizeImage = ''"></i>
+                    </el-upload>
+                    <div style="line-height:17px;font-size:12px;color:#909399;margin-left:10px;margin-top:5px">
+                      <div>图片建议尺寸</div>
+                      <div>320*200px</div>
+                    </div>
+                  </el-row>
+                </template>
+                <div v-else-if="scope.row.prizeImage" style="line-height:0">
+                  <img :src="scope.row.prizeImage" style="width:32px;height:32px;object-fit:contain" />
+                </div>
+              </template>
+            </el-table-column>
             <el-table-column prop="prizeQuantity" label="商品数量" align="left" :min-width="160">
               <template slot-scope="scope" v-if="scope.row.prizeType !== 3">
                 <template v-if="isAdd || (scope.row.inOpt && scope.row.prizeType != 2)"> <el-input-number controls-position="right" v-model="scope.row.prizeCount" type="number" :min="0" :disabled="isInfo" class="width50" size="small"></el-input-number> 件 </template>
@@ -230,6 +250,7 @@ export default {
       sortList: [{ label: '奖品1', value: 1 }, { label: '奖品2', value: 2 }, { label: '奖品3', value: 3 }, { label: '奖品4', value: 4 }, { label: '奖品5', value: 5 }, { label: '奖品6', value: 6 }, { label: '奖品7', value: 7 }, { label: '奖品8', value: 8 }, { label: '随机', value: null }], // eslint-disable-line
       tableList: Array(8)
         .fill({
+          prizeImage: '',
           prizeId: '',
           prizeType: 3,
           prizeCount: null,
@@ -311,6 +332,25 @@ export default {
     }
   },
   methods: {
+    beforeUpload(file) {
+      if (!['image/jpeg', 'image/png'].includes(file.type)) {
+        return this.$message.warning('图片格式错误');
+      } else if (file.size > 1024 * 1024) {
+        return this.$message.warning('图片大小超过1MB');
+      }
+    },
+    onUploaded(row) {
+      return function(res, file, fileList) {
+        if (res.errorCode === 0) {
+          row.prizeImage = res.result.qcloudImageUrl;
+        } else {
+          this.$message.warning(res.message);
+        }
+      };
+    },
+    onUploadError() {
+      this.$message.error('图片上传失败');
+    },
     // 更新游戏奖品
     updateGamePrize(index) {
       const current = this.tableList[index];
@@ -335,6 +375,7 @@ export default {
       }
 
       const params = {
+        prizeImage: current.prizeImage,
         gameId: this.$route.params.id,
         gamePrizeId: current.prizeId,
         type: current.prizeType, // 奖品类型，1：积分，2：卡券，3：谢谢参与
@@ -368,6 +409,7 @@ export default {
       this.tableList[index].prizeCount = 0;
       this.tableList[index].prizeCardId = '';
       this.tableList[index].cardName = '';
+      this.tableList[index].prizeImage = '';
     },
     // 添加规则
     addRule(i) {
@@ -619,6 +661,7 @@ export default {
           this.tableList.forEach((v, i) => {
             if (v.prizeType === 1) {
               list.push({
+                prizeImage: v.prizeImage,
                 prizeIntegral: v.prizeIntegral,
                 prizeCount: v.prizeCount, // 奖品数量
                 prizeRate: 0,
@@ -711,6 +754,21 @@ export default {
         </el-tooltip>
       );
     },
+    labelImg(h, { column, $index }) {
+      return (
+        <span>
+          <span class="fw500">奖项图片</span>
+          <el-tooltip class="item" effect="dark" placement="top-start">
+            <i style="margin-left:2px" class="iconfont icon-xinxixianshi minor-font-color fz14" />
+            <div style="line-height:18px" slot="content">
+              <div>可上传自定义图片，非必传，未上传展示默认图标；</div>
+              <div>格式：jpg，png；</div>
+              <div>大小：1MB以内。</div>
+            </div>
+          </el-tooltip>
+        </span>
+      );
+    },
     downloadWheelSkinPsd() {
       window.location = downloadWheelSkinPsd;
     }
@@ -724,6 +782,36 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.avatar-uploader /deep/ {
+  font-size: 0;
+  line-height: 0;
+  margin-top: 5px;
+  .el-upload {
+    border: 1px dashed #dcdfe6;
+    border-radius: 2px;
+    cursor: pointer;
+    position: relative;
+  }
+  .avatar-uploader-icon {
+    font-size: 16px;
+    color: #303133;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+  }
+  .el-icon-error {
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translate(40%, -40%);
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.4);
+    &:hover {
+      color: rgba(0, 0, 0, 0.8);
+    }
+  }
+}
 .skin-box {
   display: block;
   width: 220px;