解决图片不显示问题和奖品数量问题

peng

2025-11-11 4d0896eae7fe6ea2b762a4142415e47596f69a29

 manager/src/views/activity-prize/index.vue

@@ -78,7 +78,7 @@
              @click="publishPrizeActivity(row)"
              :loading="row.statusLoading"
            >
              {{row.enableStatus === 'on' ? '关闭' : '开启'}}
              {{row.enableStatus === 'ON' ? '关闭' : '开启'}}
            </Button>
            <Button
              type="info"
@@ -88,18 +88,27 @@
            <Button
              type="info"
              size="small"
              :disabled="!row.canSet"
              @click="setPrize(row)"
            >奖品设置</Button>
            <Button
              type="info"
              size="small"
              @click="openEdit(row)"
            >编辑</Button>
            <Button
              type="error"
              size="small"
              @click="delById(row)"
            >删除</Button>
              :disabled="row.popup"
              @click="setPopup(row)"
              >
              弹窗活动
            </Button>
<!--            <Button-->
<!--              type="info"-->
<!--              size="small"-->
<!--              @click="openEdit(row)"-->
<!--            >编辑</Button>-->
<!--            <Button-->
<!--              type="error"-->
<!--              size="small"-->
<!--              @click="delById(row)"-->
<!--            >删除</Button>-->

          </div>
        </template>
@@ -185,26 +194,26 @@
                />
              </FormItem>
            </Col>
            <Col span="24">
              <FormItem label="活动图片：" prop="activityImg">
                <Upload
                  v-if="!imgTempUrl"
                  :before-upload="(file) => handleBeforeUpload(file, 'content')"
                  :format="['jpg','jpeg','png','gif']"
                  :max-size="20480"
                  action=""
                  accept="image/*"
                >
                  <Button icon="ios-cloud-upload-outline">上传封面图片</Button>
                </Upload>
                <div v-else class="upload-file-info">
                  <img :src="imgTempUrl" alt="活动图片" class="preview-image-limit">
                  <Button type="text" @click="handleRemove('content')">删除</Button>
                </div>
<!--            <Col span="24">-->
<!--              <FormItem label="活动图片：" prop="activityImg">-->
<!--                <Upload-->
<!--                  v-if="!imgTempUrl"-->
<!--                  :before-upload="(file) => handleBeforeUpload(file, 'content')"-->
<!--                  :format="['jpg','jpeg','png','gif']"-->
<!--                  :max-size="20480"-->
<!--                  action=""-->
<!--                  accept="image/*"-->
<!--                >-->
<!--                  <Button icon="ios-cloud-upload-outline">上传封面图片</Button>-->
<!--                </Upload>-->
<!--                <div v-else class="upload-file-info">-->
<!--                  <img :src="imgTempUrl" alt="活动图片" class="preview-image-limit">-->
<!--                  <Button type="text" @click="handleRemove('content')">删除</Button>-->
<!--                </div>-->

                <!-- 基于elementUi的上传组件 el-upload end-->
              </FormItem>
            </Col>
<!--                &lt;!&ndash; 基于elementUi的上传组件 el-upload end&ndash;&gt;-->
<!--              </FormItem>-->
<!--            </Col>-->
            <Col span="24">
              <FormItem label="活动封面：" prop="activityCover">
                <Upload
@@ -282,8 +291,8 @@
          <Col span="24">
            <div class="detail-item">
              <label>活动状态：</label>
              <Tag :color="detailData.enableStatus === 'on' ? 'success' : 'default'">
                {{ detailData.enableStatus === 'on' ? '已启用' : '未启用' }}
              <Tag :color="detailData.enableStatus === 'ON' ? 'success' : 'default'">
                {{ detailData.enableStatus === 'ON' ? '已启用' : '未启用' }}
              </Tag>
            </div>
          </Col>
@@ -334,7 +343,7 @@
                    </span>
                        </Col>
                        <Col span="12">
                          <span>概率: {{ prize.probability}}%</span>
                          <span>概率: {{ prize.prizeProbability}}%</span>
                        </Col>
                      </Row>
                    </div>
@@ -373,9 +382,9 @@
                ref="table"
                class="prize-table"
              >
                <template slot-scope="{ row }" slot="prizeCoverUrl">
                <template slot-scope="{ row }" slot="prizeImgUrl">
                  <img
                    :src="row.prizeCoverUrl"
                    :src="row.prizeImgUrl"
                    alt="奖品封面"
                    class="thumbnail"
                  >
@@ -418,8 +427,8 @@
                :loading="choiceLoading"
              >
                <!-- 奖品图片 slot -->
                <template slot-scope="{ row }" slot="prizeCoverUrl">
                  <img :src="row.prizeCoverUrl" alt="奖品封面" style="width: 50px; height: 50px; object-fit: cover;">
                <template slot-scope="{ row }" slot="prizeImgUrl">
                  <img :src="row.prizeImgUrl" alt="奖品封面" style="width: 50px; height: 50px; object-fit: cover;">
                </template>
                <!-- 数量 slot -->
                <template slot-scope="{ row, index }" slot="maxPreDay">
@@ -437,7 +446,7 @@
                    v-model="row.prizeNum"
                    :min="1"
                    :max="999999"
                    placeholder="请输入每日最大中奖数"
                    placeholder="数量"
                    style="width: 100%"
                    @on-change="(val) => handlePrizeNumChange(val, index)"
                  ></InputNumber>
@@ -489,7 +498,8 @@
  del,
  addActivityRefPrizeList,
  getActivityRefPrizeByActivityId,
  publishPrizeActivity
  publishPrizeActivity,
  popup
} from '@/api/activity-prize.js'
import {delByKey, uploadFileByLmk} from "../../api/common";

@@ -506,7 +516,7 @@
      choiceColumns:[
        {
          title: '奖品图片',
          slot: 'prizeCoverUrl',
          slot: 'prizeImgUrl',
          width: 80,
          align: 'center'
        },
@@ -556,8 +566,8 @@
      prizeColumns:[
        {
          title: '奖品封面',
          key: 'prizeCoverUrl',
          slot:'prizeCoverUrl',
          key: 'prizeImgUrl',
          slot:'prizeImgUrl',
          align: 'center',
          minWidth: 100,
        },
@@ -642,9 +652,9 @@
        activityCover: [
          {required: true, message: '请选择活动封面', trigger: 'blur'}
        ],
        activityImg: [
          {required: true, message: '请选择活动图片', trigger: 'blur'}
        ],
        // activityImg: [
        //   {required: true, message: '请选择活动图片', trigger: 'blur'}
        // ],
      },
      activityFrom:{
        id:'',
@@ -656,7 +666,7 @@
        prizeNum:0,
        activityImg:'',
        activityCover:'',
        enableStatus:'off'
        enableStatus:''
      },
      loading:false,
      columns:[
@@ -707,9 +717,9 @@
          render: (h, params) => {
            return h('Tag', {
              props: {
                color: params.row.enableStatus  === 'on' ? 'green' : 'default'
                color: params.row.enableStatus  === 'ON' ? 'green' : 'default'
              }
            }, params.row.enableStatus === 'on' ? '开启' : '关闭')
            }, params.row.enableStatus === 'ON' ? '开启' : '关闭')
          }
        },
        {
@@ -746,6 +756,16 @@
    this.init();
  },
  methods: {
    setPopup(row){
      popup(row.id).then(res =>{
        if (res.code === 200){
          this.$Message.success(res.msg)
          this.getPage()
        }else {
          this.$Message.error(res.msg)
        }
      })
    },
    handleProbabilityInput(event, index) {
      const inputValue = event.target.value;
      let numericValue = parseFloat(inputValue);
@@ -787,7 +807,6 @@

    // 格式化奖品类型
    replaceText(type) {
      console.log(type)
      if (type === "coupon") {
        return "优惠券";
      }
@@ -820,22 +839,24 @@
    },
    // 检查奖品是否已被选择
    isPrizeChosen(prizeId) {
      return this.choiceData.some(item => item.id === prizeId);
      return this.choiceData.some(item => item.prizeId === prizeId);
    },
    choicePrize(row){
      //判断数组长度
      if(this.choiceData.length >= 5){
        this.$Message.warning("最多添加5个奖品")
        return;
      }
      // if(this.choiceData.length >= 5){
      //   this.$Message.warning("最多添加5个奖品")
      //   return;
      // }
      console.log(row.prizeId)
      if (this.isPrizeChosen(row.id)){

        this.$Message.warning("已添加")
        return;
      }
      this.choiceLoading = true;

      const prizeToAdd = {
        prizeCoverUrl:row.prizeCoverUrl,
        prizeImgUrl:row.prizeImgUrl,
        prizeType: row.prizeType,
        prizeName: row.prizeName,
        prizeNum: 1, // 默认数量为1
@@ -895,11 +916,11 @@
    //奖品设置
    setPrize(row){
      //判断是否启动，若启动则，无法编辑
      if("on" === row.enableStatus){
      if("ON" === row.enableStatus){
        this.$Message.error("抽奖已开启，不能编辑!")
        return
      }

      //判断是否已有奖品有的话不让设置
      this.activityPrizeId = row.id;
      this.getPrizeList();
      this.prizeSettingShow = true;
@@ -908,6 +929,9 @@
      getActivityRefPrizeByActivityId(row.id).then(res =>{
        this.choiceLoading = false;
        if (res.code === 200){
          res.data.forEach(item =>{
            item.id =null;
          })
          this.choiceData = res.data
        }

@@ -1068,25 +1092,29 @@
      console.log(this.detailData)

    },
    openEdit(row){
      this.modelShow = true;
      this.modelTitle = "编辑活动";
      this.activityFrom= {
        id:row.id,
        activityName:row.activityName,
        activityDes:row.activityDes,
        beginTime:this.formatDate(row.beginTime, 'YYYY-MM-DD HH:mm:ss'),
        endTime: this.formatDate(row.endTime, 'YYYY-MM-DD HH:mm:ss'),
        maxPrize:row.maxPrize,
        prizeNum:row.prizeNum,
        activityImg:row.activityImg,
        activityCover:row.activityCover,
        enableStatus:row.enableStatus,
      }
      this.coverTempUrl = row.activityCoverUrl;
      this.imgTempUrl = row.activityImgUrl;

    },
    // openEdit(row){
    //   if("ON" === row.enableStatus){
    //     this.$Message.error("抽奖已开启，不能编辑!")
    //     return
    //   }
    //   this.modelShow = true;
    //   this.modelTitle = "编辑活动";
    //   this.activityFrom= {
    //     id:row.id,
    //     activityName:row.activityName,
    //     activityDes:row.activityDes,
    //     beginTime:this.formatDate(row.beginTime, 'YYYY-MM-DD HH:mm:ss'),
    //     endTime: this.formatDate(row.endTime, 'YYYY-MM-DD HH:mm:ss'),
    //     maxPrize:row.maxPrize,
    //     prizeNum:row.prizeNum,
    //     activityImg:row.activityImg,
    //     activityCover:row.activityCover,
    //     enableStatus:row.enableStatus,
    //   }
    //   this.coverTempUrl = row.activityCoverUrl;
    //   this.imgTempUrl = row.activityImgUrl;
    //
    // },

    handleSearch(type,value){
      if (type === 'beginTime') {
@@ -1098,6 +1126,7 @@
    },
    openAdd(){
      this.$refs.form.resetFields()
      this.activityFrom.id = null;
      this.modelShow = true;
      this.modelTitle = "新增活动";
      this.coverTempUrl = null;
@@ -1105,48 +1134,54 @@
      this.prizeImg = null;
      this.imgTempUrl = null;
    },
    delById(row){
      del(row.id).then(res=>{
        if (res.code === 200){
          this.$Message.success(res.msg)
        }else {
          this.$Message.error(res.msg)
        }
        this.getPage()
      })
    },
    // delById(row){
    //   if("ON" === row.enableStatus){
    //     this.$Message.error("抽奖已开启，无法删除!")
    //     return
    //   }
    //   //若关联商品不让删
    //   del(row.id).then(res=>{
    //     if (res.code === 200){
    //       this.$Message.success(res.msg)
    //     }else {
    //       this.$Message.error(res.msg)
    //     }
    //     this.getPage()
    //   })
    // },
    // 获取富文本编辑器的内容
    // 初始化数据
    init() {
      this.getPage()
    },
    changePage(){
    changePage(v){
      this.searchForm.pageNumber = v
      this.getPage()
    },
    changePageSize(v){
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = pageSize
      this.searchForm.pageSize = v
      this.getPage()
    },
    changePageSize(){
      this.searchForm.pageNumber = page
      this.getPage()
    prizeChangePage(v){
      this.prizeSearchForm.pageNumber = v
      this.prizeSearchForm.pageSize = 1
      this.getPrizeList()
    },
    prizeChangePage(){
    prizeChangePageSize(v){
      this.prizeSearchForm.pageNumber = 1
      this.prizeSearchForm.pageSize = pageSize
      this.prizeSearchForm.pageSize = v
      this.getPrizeList()
    },
    prizeChangePageSize(){
      this.prizeSearchForm.pageNumber = page
      this.getPrizeList()
    },
    publishPrizeActivity(row){
      publishPrizeActivity(row.id).then(res =>{
    async publishPrizeActivity(row){
      await publishPrizeActivity(row.id).then(res =>{
        if (res.code === 200){
          this.$Message.success(res.msg)
        }else{
          this.$Message.error(res.msg)
        }
      })
      this.getPage()
      await this.getPage()
    },

  },