奖品大球是动态的,根据后台配置奖品来显示

<!-- 奖品大球 -->
                    <span v-for="(item, index) in empHaveImgArr"
                        :class="'qiu_' + (index + 1) + ' ' + 'diaol_' + (index + 1)">
                        <img :src="item.imgUrl" alt="" :class="'diaol_' + (index + 1)">
                    </span>
                    <!-- 图片小球 -->
                    <span class="qiu_12 diaol_12"></span>
                    <span class="qiu_13 diaol_13"></span>
                    <span class="qiu_14 diaol_14"></span>
                    <span class="qiu_15 diaol_15"></span>
                    <span class="qiu_16 diaol_16"></span>
                    <span class="qiu_17 diaol_17"></span>
                    <span class="qiu_18 diaol_18"></span>
                    <span class="qiu_19 diaol_19"></span>
                    <span class="qiu_20 diaol_20"></span>
                    <span class="qiu_21 diaol_21"></span>
                    <span class="qiu_22 diaol_22"></span>
                    <span class="qiu_23 diaol_23"></span>
                    <span class="qiu_24 diaol_24"></span>
                    <span class="qiu_25 diaol_25"></span>
                    <span class="qiu_26 diaol_26"></span>
                    <span class="qiu_27 diaol_27"></span>
                    <span class="qiu_28 diaol_28"></span>
                    <span class="qiu_29 diaol_29"></span>
                    <span class="qiu_30 diaol_30"></span>
                    <span class="qiu_31 diaol_31"></span>
                    <span class="qiu_32 diaol_32"></span>
                    <span class="qiu_33 diaol_33"></span>
                    <span class="qiu_34 diaol_34"></span>
                    <span class="qiu_35 diaol_35"></span>
                    <span class="qiu_36 diaol_36"></span>

const newActivityInfo = Object.assign({}, activityInfo) // 将 activityInfo 对象的所有属性和值复制到一个新对象中
console.log(activityInfo,'activityInfo')
console.log((newActivityInfo), 'newActivityInfo')
const neweArry = Array.from(newActivityInfo.optionList)
const empHaveImgArr = [] //返回数据的每一个元素的有imgUrl组成的数组有imgUrl才能有span才能有图片不然不需要有图片
const empArr = [] //返回数据的每一个元素
neweArry.forEach(i => {
    empArr.push(Object.assign({}, i))
});
console.log(empArr, 'empArr')
empArr.forEach(i => {
    if (i.imgUrl !== "") {
        empHaveImgArr.push(i)
    }
});
console.log(empHaveImgArr, 'emphaveimgarr?')

因为返回的activityInfo数据:

 是proxy包含的,所以我们需要使用Object.assign({}, activityInfo)进行修改,

然后外层数据恢复正常:

 细看发现里面的optionList是我们的大球数据,但是还是proxy类型,还需要Array.from(newActivityInfo.optionList)修改:

因为上面是Proxy(Object)我们使用了Object.assign({}, activityInfo),这里是Proxy(array)所以使用Array.from(newActivityInfo.optionList),newArray是这样的:

数据还是不对,通过forEach和(Object.assign({}, i))继续修改,改成常规数据:

 

 然后将有imgUrl的数据放进一个空数组,进行使用,这就是大球的图片数组,而谢谢惠顾和实物奖品是没有imgUrl的所以,所以不放入数组,所以有了empHaveImgArr

猜你喜欢

转载自blog.csdn.net/kuang_nu/article/details/131008851