微信小程序大转盘活动页面
项目需求运用到大转盘 可设置概率 可直接自定义结果 效果如下
创建动画区域 （animation） 动画可参考小程序官方API animationData动画参数 在点击开始的时候填充数据
| Animation 方法 | 描述 |
|---|---|
| wx.createAnimation(Object object) | 创建一个动画实例 animation。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性 |
| Animation.backgroundColor(string value) | 设置背景色 |
| Animation.bottom | 设置bottom 的值 |
| Animation.export | 导出动画队列。export 方法每次调用后会清掉之前的动画操作。 |
| Animation.height | 设置高 |
| Animation.left | 设置left的值 |
| Animation. matrix | 设置matrix的值 |
| Animation. matrix3d | 设置matrix3d的值 |
| Animation.opcity | 设置透明度的值 |
| Animation.right | 设置right的值 |
| Animation.rotate(number angle) | 从原点顺时针旋转一个角度 |
| Animation.rotate3d(number x, number y, number z, number angle) | 从 固定 轴顺时针旋转一个角度 |
| Animation.rotateX(number angle) | 从 X 轴顺时针旋转一个角度 |
| Animation.rotateY(number angle) | 从 Y 轴顺时针旋转一个角度 |
| Animation.rotateZ(number angle) | 从 Z 轴顺时针旋转一个角度 |
| Animation.scale(number sx, number sy) | 缩放 |
| Animation.scale3d(number sx, number sy, number sz) | 缩放 |
| Animation.scaleX(number scale) | 缩放X |
| Animation.scaleY(number scale) | 缩放Y |
| Animation.scaleZ(number scale) | 缩放Z |
| Animation.skew(number ax, number ay) | 对 X、Y 轴坐标进行倾斜 |
| Animation.skewX(number ax, number ay) | 对 X 轴坐标进行倾斜 |
| Animation.skewY(number ax, number ay) | 对 Y 轴坐标进行倾斜 |
| Animation.step(Object object) | 表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。 |
| Animation.top(number | string value) |
| Animation.translate(number tx, number ty) | 平移变换 |
| Animation.translate3d(number tx, number ty, number tz) | 对 xyz 坐标进行平移变换 |
| Animation.translateX(number translation) | 对 X 轴平移 |
| Animation.translateY(number translation) | 对 Y 轴平移 |
| Animation.translateZ(number translation) | 对 Z 轴平移 |
| Animation.width(number | string value) |
创建动画
let animationRun = wx.createAnimation({
duration: 4000,
timingFunction: 'ease'
})
执行动画
animationRun.rotate(app.runDegs).step()
导出动画
that.setData({
awardIndex: awardIndex,
animationData: animationRun.export()
})
全部js代码
// pages/activity/luckDraw/index.js
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
opoUpShow:false,
winsShow:false,
timesNoShow:false,
awardsList: {},
awardIndex:0,
list: [],
statusBarHeight: getApp().globalData.statusBarHeight,
scrollHeight: 200,
windowWidth:0,
windowHeight:0,
size: 600,
awardsConfig: {
slicePrizes: [
{id: '0', text: "金", img: "/images/activity/luckDraw/0.png", title: "", num: "", x: "" },
{id: '1', text: "佛", img: "/images/activity/luckDraw/1.png", title: "", num: "", x: "" },
{id: '8', text: "10积分", img: "/images/activity/luckDraw/7.png", title: "", num: "", x: "",font:true },
{id: '2', text: "山", img: "/images/activity/luckDraw/2.png", title: "", num: "", x: "" },
{id: '3', text: "谢谢参与", img: "/images/activity/luckDraw/3.png", title: "", num: "", x: "" ,font:true},
{id: '4', text: "南", img: "/images/activity/luckDraw/4.png", title: "", num: "", x: "" },
{id: '5', text: "川", img: "/images/activity/luckDraw/5.png", title: "", num: "", x: "" },
{id: '6', text: "福", img: "/images/activity/luckDraw/6.png", title: "", num: "", x: "" },
{id: '7', text: "积分奖励", img: "/images/activity/luckDraw/7.png", title: "", num: "", x: "",font:true },
],
},
res_set: {
isShow: false,
item: {}
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var that = this;
that.initAdards()
wx.getSystemInfo({
success: function (res) {
that.setData({
windowWidth: res.windowWidth,
windowHeight: res.windowHeight,
scrollHeight: res.windowHeight - res.windowWidth / 750 * (getApp().globalData.statusBarHeight * 2 + 98)
});
},
})
},
onReady: function(e) {
let that = this;
wx.getSystemInfo({
success: function(res) {
that.setData({
contentHeight: res.windowHeight
});
},
})
let list = that.data.awardsConfig.slicePrizes
//外框灯
that.setData({
list: list.concat(list)
});
},
//初始化奖品数据 计算角度
initAdards() {
var that = this,
awardsConfig = that.data.awardsConfig;
var t = awardsConfig.slicePrizes.length; // 选项长度
var e = 1 / t,
i = 360 / t,
r = i - 90;
for (var g = 0; g < t; g++) {
awardsConfig.slicePrizes[g].item2Deg = g * i + 90 - i / 2 + "deg"; //当前下标 * 360/长度 + 90 - 360/长度/2
awardsConfig.slicePrizes[g].afterDeg = r + "deg";
awardsConfig.slicePrizes[g].opacity = '1';
}
that.setData({
turnNum: e, // 页面的单位是turn
awardsConfig: awardsConfig,
})
},
/**
* 抽奖处理函数：
*/
getLottery: function () {
let that = this;
// 获取奖品配置
let awardsConfig = that.data.awardsConfig,
runNum = 10,
len = awardsConfig.slicePrizes.length,
awardIndex = 0;
awardIndex = parseInt(Math.random() * 6)
// 旋转抽奖
app.runDegs = app.runDegs || 0
app.runDegs = app.runDegs + (360 - app.runDegs % 360) + (360 * runNum - awardIndex * (360 / len))
//创建动画
let animationRun = wx.createAnimation({
duration: 4000,
timingFunction: 'ease'
})
that.animationRun = animationRun
animationRun.rotate(app.runDegs).step()
that.setData({
awardIndex: awardIndex,
animationData: animationRun.export()
})
},
animationend(){
let awardsConfig = this.data.awardsConfig, awardIndex = this.data.awardIndex
console.log('开奖了')
console.log(awardsConfig.slicePrizes[awardIndex])
wx.showToast({
title: '今日吃' + awardsConfig.slicePrizes[awardIndex].text,
})
this.setData({
['res_set.isShow']: true,
opoUpShow: true,
winsShow:true,
['res_set.item']: awardsConfig.slicePrizes[awardIndex],
})
},
recurChange(){
this.setData({
winsShow:false,
opoUpShow:false,
})
},
blurInput (e) {
this.setData({
addValue: e.detail.value
})
},
addChange (e) {
console.log(e)
let addValue = this.data.addValue,
awardsConfig = this.data.awardsConfig,
arr = []
if(addValue){
arr.push({ text: addValue, img: "/assets/coupon_gold.png", title: "x1", num: "100", x: "1" })
awardsConfig.slicePrizes.map(res=>{
if(arr.length<awardsConfig.slicePrizes.length) {
arr.push(res)
}
})
awardsConfig.slicePrizes = arr
this.setData({
awardsConfig: awardsConfig,
addValue: ''
})
this.initAdards()
} else {
wx.showToast({
title: '想吃什麽呢~~？？？',
icon: 'none'
})
}
}
})
全部css代码
/* pages/activity/luckDraw/index.wxss */
page {
height: 100%;
background: #D12C28;
}
.luckDraw{
width: 100%;
background-size: 100% 95.5%;
background-repeat: no-repeat;
}
.luck_adv{
text-align: center;
width: 90%;
margin: 30rpx 5%;
}
.luck_adv image{
width: 100%;
height: 114rpx;
}
.views {
background: #cdb193;
color: #fff;
padding: 20rpx;
margin-top: -20rpx;
}
.head {
/* background: url("http://tdf-crm-production.oss-cn-shenzhen.aliyuncs.com/icon_turn_back120200430/20200430150300_ul1s.png") no-repeat; */
background-size: 100% 100%;
height: 400rpx;
width: 100%;
}
.canvasl {
/* background: url("http://tdf-crm-production.oss-cn-shenzhen.aliyuncs.com/icon_turn_back220200430/20200430150300_ic8b.png") no-repeat; */
background-size: 100% 100%;
background-position-y: 50%;
width: 100%;
padding:30rpx 0
}
.content {
text-align: center;
position: relative;
padding-bottom: 20rpx;
width: 700rpx;
margin: auto;
}
.content-num {
position: absolute;
top: 20rpx;
left: 0;
color: #fff;
width: 100%;
text-align: center;
font-size: 24rpx;
}
.content-image {
margin-top: -20rpx;
width: 700rpx;
}
.content-list {
position: absolute;
left: 60rpx;
top: 150rpx;
height: 240rpx;
width: 600rpx;
overflow: auto;
font-size: 28rpx;
}
.content-activity {
position: absolute;
left: 40rpx;
top: 566rpx;
height: 80rpx;
line-height: 80rpx;
width: 614rpx;
overflow: auto;
font-size: 28rpx;
color: rgba(111, 89, 66, 1);
}
.canvas-litem-text-name {
padding-top: 20rpx;
color: #d41819;
font-size: 30rpx;
}
.canvas-litem-text-name-define{
padding-top: 20rpx;
color: #d41819;
font-size: 100rpx;
font-weight: bold;
}
.navigation-view {
width: 100%;
height: 80rpx;
line-height: 80rpx;
display: flex;
align-items: center;
}
.navigation-back {
width: 30%;
text-align: left;
}
.navigation-title {
width: 40%;
text-align: center;
}
.navigation-btn {
width: 30%;
text-align: right;
}
/* 转盘 */
.wrapper {
position: relative;
width: 100%;
}
.wrapper-content {
background: #e33c37;
border-radius: 50%;
width: 720rpx;
height: 720rpx;
padding: 40rpx;
position: relative;
box-sizing: border-box;
z-index: 101;
}
.canvas-container ul,
.canvas-container li {
margin: 0;
padding: 0;
list-style: none;
}
.canvas-container {
margin: 0 auto;
position: absolute;
left: 40rpx;
top: 40rpx;
width: 640rpx;
height: 640rpx;
border-radius: 100%;
}
.canvas-container-quiu {
width: 20rpx;
height: 20rpx;
border-radius: 100%;
position: absolute;
left: 10rpx;
top: 50%;
margin-top: -8rpx;
-webkit-transform-origin: 330rpx 50%;
transform-origin: 350rpx 50%;
z-index: 1001;
}
.canvas-content {
overflow: hidden;
box-sizing: content-box;
border: 20rpx solid #f6e66a;
position: absolute;
left: 0;
top: 0;
z-index: 1;
display: block;
width: 600rpx;
height: 600rpx;
border-radius: inherit;
background-clip: padding-box;
}
/* 分隔线 */
.canvas-litem-text {
position: absolute;
top: -26rpx;
left: 80rpx;
width: 340rpx;
text-align: center;
height: 60rpx;
font-size: 24rpx;
z-index: 10000;
transform: rotate(90deg);
color: #aa8b6b;
}
.canvas-litem-text-image {
position: relative;
}
.canvas-litem-text-image-num {
position: absolute;
top: 50%;
left: 50%;
margin-top: -14rpx;
margin-left: -40rpx;
width: 80rpx;
}
.canvas-btn {
display: flex;
flex-direction: column;
justify-content: space-around;
position: absolute;
left: 50%;
top: 50%;
margin-left: -110rpx;
margin-top: -110rpx;
width: 220rpx;
height: 220rpx;
border-radius: 50%;
color: #f4e9cc;
border: 10px solid #f4ac0c;
text-align: center;
font-size: 40rpx;
text-decoration: none;
box-sizing: border-box;
z-index: 10001;
}
.canvas-btn .canvas-btn-text {
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border-radius: 55%;
box-sizing: border-box;
/* padding: 22rpx 20rpx 0; */
background:#eb5a18;
/* background: linear-gradient(134deg, rgba(232, 219, 197, 1) 0%, rgba(205, 177, 147, 1) 100%); */
/* box-shadow:0px 5px 7px 0px rgba(255,255,255,1); */
margin: auto;
z-index: 102;
display: flex;
align-items: center;
justify-content: center;
}
.canvas-btn .canvas-btn-text-2 {
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
border-radius: 100%;
box-sizing: border-box;
padding: 22rpx 20rpx 0;
background: #fff;
/* box-shadow:0px 5px 7px 0px rgba(255,255,255,1); */
margin: auto;
z-index: 102;
}
.canvas-btn::after {
position: absolute;
display: block;
content: ' ';
left: 36%;
top: -83%;
width: 0;
height: 0;
overflow: hidden;
border-width: 80rpx 25rpx 80rpx 28rpx;
border-style: solid;
border-color: transparent;
border-bottom-color: #fff;
}
/* //css扇形 */
.canvas-item2 {
position: absolute;
left: 0px;
top: 0;
width: 620rpx;
height: 328rpx;
color: #e4370e;
font-weight: bold;
transform-origin: 330rpx 330rpx;
overflow: hidden;
}
.canvas-item2-after {
position: absolute;
top: 0;
left: 0;
width: 330rpx;
height: 330rpx;
transform-origin: 330rpx 330rpx;
opacity: 1;
}
.gb-wheel-list {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9;
}
.gb-wheel-item {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: #fff;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}
.gb-wheel-icontent {
position: relative;
display: block;
padding-top: 50rpx;
margin: 0 auto;
text-align: center;
transform-origin: 50% 328rpx;
color: #aa8b6b;
}
.opoUp-son {
position: fixed;
width: 90%;
left: 5%;
box-sizing: border-box;
top: 10%;
border-radius: 5px;
z-index: 10004;
padding: 30rpx;
/* background: url("http://tdf-crm-production.oss-cn-shenzhen.aliyuncs.com/bg_up/20200511/20200511165829_flij.png") no-repeat; */
background-size: 102% 66%;
background-position-y: 65rpx;
}
.bg_up {
position: absolute;
top: 70rpx;
left: 0;
width: 100%;
}
.opoUp-son-info {
font-size: 80rpx;
font-weight: 600;
color: rgba(255, 255, 255, 1);
letter-spacing: 2px;
text-align: center;
}
.opoUp-son-title {
color: #fff;
font-size: 28rpx;
padding: 30rpx 0 50rpx;
text-align: center;
}
.ticket-item {
margin-bottom: 20rpx;
padding: 30rpx;
color: #fff;
background: url("http://tdf-crm-production.oss-cn-shenzhen.aliyuncs.com/image/20200429/20200429155048_pxu6.png") no-repeat;
background-size: 100% 100%;
}
.ticket-title {
font-size: 24rpx;
padding: 20rpx;
padding-bottom: 10rpx;
border-top: 1px dashed #fff;
margin-top: 16rpx;
}
.ticket-title-date {
color: #ECD274;
}
.ticket-title-dates {
display: none;
}
.font72 {
margin-top: 30rpx;
}
.colorFF {
font-size: 32rpx;
}
.news {
background: #ECD274;
border-radius: 0px 12px 0px 12px;
padding: 2rpx 14rpx;
color: #6F5942;
font-size: 20rpx;
margin-right: 10rpx;
}
.past {
color: #828282;
background: url("http://tdf-crm-production.oss-cn-shenzhen.aliyuncs.com/image/20200430/20200430093820_rcj3.png") no-repeat;
background-size: 100% 100%;
}
.past .font72 {
color: #3D3E3E;
margin-top: 45rpx;
}
.past .ticket-title-date {
color: #828282;
}
.past .ticket-title {
border-top: 1px dashed #D5D5D5;
padding-bottom: 0;
}
.past .colorFF {
color: #FF9E1B;
}
.past .ticket-title-dates {
color: #FF9E1B;
display: block;
}
.opoUp-son-btn {
background: #D0AF8E;
color: #fff;
width: 520rpx;
font-size: 32rpx;
margin-top: 100rpx;
}
.recur {
text-align: center;
color: #fff;
padding: 32rpx;
font-size: 28rpx;
}
.opoUp-timesNo {
background: #fff;
text-align: center;
color: #ABACAC;
}
.opoUp-timesNo .opoUp-son-btn {
background: #0a655a;
width: 300rpx;
}
.header {
padding: 30rpx;
}
.header-input input {
border-radius: 5px;
border: 1px solid #666;
margin-right: 40rpx;
}
.header-btn {
background: #56B1FC;
font-size: 28rpx;
color: #fff;
}
/* luck_outlines */
.luck_tits{
height: 300px;
}
.luck_outline{
width: 86%;
margin:60rpx 7% 0 7%;
height: 137rpx;
background-size: cover;
position: relative;
}
.luck_outline_tit{
position: absolute;
text-align: center;
color: #FFCB86;
font-size: 26rpx;
width: 100%;
left: 0%;
top:4px;
}
.luck_outline_num{
display: flex;
padding: 8.8% 6%;
width: 100%;
}
.luck_outline_num_item{
width: 8%;
height: 29px;
background: linear-gradient(360deg, #FFBC6F 0%, #FFDFA4 100%);
border-radius: 2px;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #D12C28;
display: flex;
align-items: center;
justify-content: center;
margin-right: 11px;
}
.luck_sets{
margin: 19px 0 0 0;
position: relative;
}
.luck_order{
font-size: 14px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #F7AE1B;
text-align: center;
}
.luck_share{
position: absolute;
right:-6px;
height: 58rpx;
background: #FEDA9C;
border-radius: 50px 0 0 50px;
font-size: 15px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #7B240D;
top: 0;
display: flex;
align-items: center;
justify-content: center;
padding:0 25rpx;
}
.luck_share image{
width: 15px;
height: 15px;
margin-right: 10rpx;
}
.luck_btns{
display: flex;
width: 70%;
margin:0 15%;
height: 42px;
background: linear-gradient(360deg, #FFBC6F 0%, #FFDFA4 100%);
border-radius: 21px;
font-size: 19px;
color: #D12C28;
align-items: center;
justify-content: center;
}
.luck_num{
display: flex;
justify-content: center;
font-size: 15px;
padding:15px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FEEFCA;
}
.luck_bottom_set{
margin-bottom: 60rpx;
}
/* modal */
.modal{
width: 100%;
height: 100%;
position: fixed;
top:0;
left:0;
background: rgba(0, 0, 0, 0.75);
z-index: 9999;
overflow: hidden;
}
.modal_sets{
height: 42px;
background: linear-gradient(360deg, #FFBC6F 0%, #FFDFA4 100%);
border-radius: 8px;
width: 70%;
margin: 0 15%;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-family: STJTBZ;
color: #D12C28;
letter-spacing: 3px;
font-weight: bold;
}
.modal_imgs{
width: 80%;
margin: 10% 10%;
height: 395px;
}
.modal_cancel{
width: 43px;
height: 43px;
margin-left: calc( 50% - 43px );
margin-top: -20px;
}
全部html代码
<view class="luckDraw" style="background-image:url('/images/activity/luckDraw/luck_bg.png') ">
<view class="luck_tits">
<view class="luck_adv">
<image src="/images/activity/luckDraw/luck_adv_top.png"></image>
</view>
<view class="luck_adv">
<image src="/images/activity/luckDraw/luck_adv_top.png"></image>
</view>
<view class="luck_outline" style="background-image:url('/images/activity/luckDraw/luck_outline.png')">
<view class="luck_outline_tit">1月1日瓜分总奖池</view>
<view class="luck_outline_num">
<text class="luck_outline_num_item">1</text>
<text class="luck_outline_num_item">2</text>
<text class="luck_outline_num_item">3</text>
<text class="luck_outline_num_item">4</text>
<text class="luck_outline_num_item">5</text>
<text class="luck_outline_num_item">1</text>
<text class="luck_outline_num_item">1</text>
<text class="luck_outline_num_item">元</text>
</view>
</view>
<view class="luck_sets">
<view class="luck_order">活动规则</view>
<view class="luck_share">
<image src="/images/activity/luckDraw/luckDraw_share.png"></image> 分享
</view>
</view>
</view>
<view class="canvasl">
<view class="wrapper">
<view class="wrapper-content" style='margin:0 auto;'>
<view class="canvas-container-quiu" wx:for="{{list}}"
style="-webkit-transform: rotate({{index * (360/list.length)}}deg);transform: rotate({{index * (360/list.length)}}deg);{{index%2==0?'background:#F2E86D':'background:#ffffff'}}">
</view>
<view class="canvas-container">
<view animation="{{animationData}}" class="canvas-content" style='margin:0 auto;'
bindtransitionend='animationend'>
<!-- 扇形 -->
<view class="canvas-list">
<view class="canvas-item2" wx:for="{{awardsConfig.slicePrizes}}" wx:key="key"
style="transform: rotate({{item.item2Deg}});background-color:{{awardsConfig.slicePrizes.length==2?(index%2==0?'#faf5e7':'#f3e2c6'):''}};opacity:{{ awardsConfig.slicePrizes.length==2?item.opacity: awardsConfig.slicePrizes.length==3?item.opacity:''}};width:{{size}}rpx;height:{{size/2}}rpx;transform-origin:{{size/2}}rpx {{size/2}}rpx">
<view class="canvas-item2-after"
style="transform: rotate({{item.afterDeg}});background-color:{{index%2==0?'#fbdb00':'#faca00'}};opacity:{{ awardsConfig.slicePrizes.length==3?'':item.opacity}};width:{{size/2}}rpx;height:{{size/2}}rpx;transform-origin: {{size/2}}rpx {{size/2}}rpx">
</view>
<view wx:if='{{awardsConfig.slicePrizes.length==3}}' class="canvas-item2-after"
style="background-color:{{index%2==0?'#faf5e7':'#f3e2c6'}};width:{{size/2}}rpx;height:{{size/2}}rpx;transform-origin: {{size/2}}rpx {{size/2}}rpx">
</view>
</view>
</view>
<!-- 选项内容 -->
<view class="gb-wheel-list">
<view class="gb-wheel-item" data-index="{{index}}" wx:for="{{awardsConfig.slicePrizes}}" wx:key='key'>
<view class="gb-wheel-icontent"
style="height:262rpx;overflow:hidden;font-size:{{item.text.length>9?'20':'26'}}rpx;padding-top:5rpx;transform: rotate({{index*turnNum}}turn);transform-origin: 50% {{size/2-2}}rpx">
<view class="canvas-litem-text-name-define" wx:if="{{item.font}}"
style="font-size:40rpx;margin-top:40rpx">{{item.text}}</view>
<view class="canvas-litem-text-name-define" wx:else>{{item.text}}</view>
<view class="more_info" wx:if="{{false}}">
<view class="canvas-litem-text-name">{{item.text}}</view>
<view class="sec_tit">
<view class="canvas-litem-text-image">
<image src="{{item.img}}" mode="widthFix"
style="width:80rpx;max-height:60rpx;padding:10rpx 0 0;">
</image>
<view class="canvas-litem-text-image-num">100</view>
</view>
<view style="font-size:20rpx;" wx:if="{{item.num}}">{{item.num}}x1</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="canvas-btn" bindtap="getLottery">
<view class="canvas-btn-text-2"></view>
<view class="canvas-btn-text">
<view style="font-size:50rpx;color:#fff;padding-bottom:4rpx;">抽奖</view>
<!-- <view style="font-size:20rpx;color:#6F5942;font-weight:600;">点击抽奖</view> -->
</view>
</view>
</view>
</view>
</view>
</view>
<view class="luck_bottom_set">
<view class="luck_num">剩余抽奖机会：2次</view>
<view class="luck_btns">去做任务增加抽奖机会</view>
</view>
</view>
<!-- modal -->
<view class="modal" wx:if="{{res_set.isShow}}" catchtouchmove="true">
<image src="{{res_set.item.img}}" class="modal_imgs"></image>
<image src="/images/activity/luckDraw/close.png" class="modal_cancel" wx:if="{{res_set.item.font}}"></image>
<view class="modal_sets" wx:else >收下 “ {{res_set.item.text}} ” 字</view>
</view>
