openid: "",//OPENID | openid: "",//OPENID | ||||
session_key: "",//session_key | session_key: "",//session_key | ||||
openidSuccessFuc: null,//方法回调 | openidSuccessFuc: null,//方法回调 | ||||
nowPage:'3',//当前tabBar | |||||
nowPage:'1',//当前tabBar | |||||
isRegister:false,//是否已注册 | isRegister:false,//是否已注册 | ||||
userMobile:null,//用户手机号 | userMobile:null,//用户手机号 | ||||
isFirstLogin:true,//是否为第一次登录 | isFirstLogin:true,//是否为第一次登录 |
"pages/myCenter/myCenter", | "pages/myCenter/myCenter", | ||||
"pages/luckyStar/luckyStar", | "pages/luckyStar/luckyStar", | ||||
"pages/scout/register/register", | "pages/scout/register/register", | ||||
"pages/scout/share/share" | |||||
"pages/scout/share/share", | |||||
"pages/prizes/prizes", | |||||
"pages/poster/poster", | |||||
"pages/coupon/coupon" | |||||
], | ], | ||||
"window": { | "window": { | ||||
"backgroundTextStyle": "light", | "backgroundTextStyle": "light", |
url: '../star/star' | url: '../star/star' | ||||
}) | }) | ||||
} else if (page == '3'){ | } else if (page == '3'){ | ||||
wx.showToast({ | |||||
title: '暂未开启', | |||||
icon:'none' | |||||
}) | |||||
// wx.redirectTo({ | |||||
// url: '../index/index' | |||||
// wx.showToast({ | |||||
// title: '暂未开启', | |||||
// icon:'none' | |||||
// }) | // }) | ||||
wx.redirectTo({ | |||||
url: '../luckyStar/luckyStar' | |||||
}) | |||||
} else if (page == '4'){ | } else if (page == '4'){ | ||||
wx.redirectTo({ | wx.redirectTo({ | ||||
url: '../myCenter/myCenter' | url: '../myCenter/myCenter' |
color: black; | color: black; | ||||
} | } | ||||
.tabBarText2{ | .tabBarText2{ | ||||
color: #1D7EAF; | |||||
color: #345486; | |||||
} | } | ||||
.tabBar1{ | .tabBar1{ | ||||
width: 46rpx; | width: 46rpx; |
// pages/coupon/coupon.js | |||||
const app = getApp() | |||||
Page({ | |||||
/** | |||||
* 页面的初始数据 | |||||
*/ | |||||
data: { | |||||
imgUrl: app.globalData.urlStatic,//图片路径 | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面加载 | |||||
*/ | |||||
onLoad: function (options) { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面初次渲染完成 | |||||
*/ | |||||
onReady: function () { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面显示 | |||||
*/ | |||||
onShow: function () { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面隐藏 | |||||
*/ | |||||
onHide: function () { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面卸载 | |||||
*/ | |||||
onUnload: function () { | |||||
}, | |||||
/** | |||||
* 页面相关事件处理函数--监听用户下拉动作 | |||||
*/ | |||||
onPullDownRefresh: function () { | |||||
}, | |||||
/** | |||||
* 页面上拉触底事件的处理函数 | |||||
*/ | |||||
onReachBottom: function () { | |||||
}, | |||||
/** | |||||
* 用户点击右上角分享 | |||||
*/ | |||||
onShareAppMessage: function () { | |||||
}, | |||||
receive:function(){//立即领取 | |||||
wx.redirectTo({ | |||||
url: '../index/index', | |||||
}) | |||||
} | |||||
}) |
{ | |||||
"navigationBarTitleText": "东风启辰星探计划", | |||||
"usingComponents": { | |||||
"tabBar": "../component/tabBar/index" | |||||
} | |||||
} |
<!--pages/coupon/coupon.wxml--> | |||||
<view class="all"> | |||||
<view class="main"> | |||||
<image class="couponBg" src="{{imgUrl+'/images/couponBg.png'}}"></image> | |||||
<view class="prizeFrame"> | |||||
<image class="coupon" src="{{imgUrl+'/images/coupon.png'}}"></image> | |||||
<view class="getPrizeNumGroup"> | |||||
<view class="getPrizeNum">全国已有 581人获得了500元启辰星购车券</view> | |||||
</view> | |||||
<view bindtap="receive" class="receiveBtn">立即领取</view> | |||||
</view> | |||||
</view> | |||||
<tabBar></tabBar> | |||||
</view> | |||||
/* pages/coupon/coupon.wxss */ | |||||
image{ | |||||
display: block; | |||||
} | |||||
view{ | |||||
-webkit-overflow-scrolling: touch; | |||||
} | |||||
.main{ | |||||
height: calc(100vh - 150rpx); | |||||
overflow: auto; | |||||
position: relative; | |||||
} | |||||
.couponBg{ | |||||
width: 750rpx; | |||||
height: 734rpx; | |||||
} | |||||
.prizeFrame{ | |||||
position: absolute; | |||||
top: 672rpx; | |||||
left: 50%; | |||||
transform: translateX(-50%); | |||||
width: 750rpx; | |||||
height: auto; | |||||
display: flex; | |||||
align-items: center; | |||||
flex-direction: column; | |||||
padding-bottom: 34rpx; | |||||
} | |||||
.coupon{ | |||||
width: 627rpx; | |||||
height: 581rpx; | |||||
} | |||||
.receiveBtn{ | |||||
width:653rpx; | |||||
height:70rpx; | |||||
text-align: center; | |||||
line-height: 70rpx; | |||||
font-size:30rpx; | |||||
font-family:PingFang; | |||||
font-weight:400; | |||||
color:rgba(255,255,255,1); | |||||
background-color: #29558D; | |||||
border-radius: 20rpx; | |||||
margin-top: 23rpx; | |||||
} | |||||
.getPrizeNumGroup{ | |||||
position: relative; | |||||
width: 750rpx; | |||||
height: 0; | |||||
} | |||||
.getPrizeNum{ | |||||
position: absolute; | |||||
left: 0; | |||||
top: -60rpx; | |||||
width: 750rpx; | |||||
height: 24rpx; | |||||
line-height: 24rpx; | |||||
font-size:24rpx; | |||||
font-family:PingFang; | |||||
font-weight:bold; | |||||
color:rgba(248,197,109,1); | |||||
text-align: center; | |||||
} |
}) | }) | ||||
this.getUserLocation();//获取用户当前位置 | this.getUserLocation();//获取用户当前位置 | ||||
if (e.detail.errMsg=='getPhoneNumber:ok'){ | if (e.detail.errMsg=='getPhoneNumber:ok'){ | ||||
this.setData({ | |||||
siteSelect: true, | |||||
}) | |||||
app.wxRequest(app.globalData.urlRoot + "userInfo/getUserPhoneNumber", { encryptedData: e.detail.encryptedData, iv: e.detail.iv }, res => { | app.wxRequest(app.globalData.urlRoot + "userInfo/getUserPhoneNumber", { encryptedData: e.detail.encryptedData, iv: e.detail.iv }, res => { | ||||
if (res.code == 200) { | if (res.code == 200) { | ||||
this.data.subscribeData.mobile = res.data.decodeData.phoneNumber; | this.data.subscribeData.mobile = res.data.decodeData.phoneNumber; | ||||
}) | }) | ||||
} | } | ||||
}, this,"POST"); | }, this,"POST"); | ||||
}else{ | |||||
this.setData({ | |||||
siteSelect: true, | |||||
}) | |||||
} | } | ||||
}, | }, | ||||
getUserLocation:function(e){ | getUserLocation:function(e){ | ||||
}, | }, | ||||
fail:(res)=>{ | fail:(res)=>{ | ||||
this.getDistributorList("", ""); | this.getDistributorList("", ""); | ||||
}, | |||||
complete:(res)=>{ | |||||
this.setData({ | |||||
siteSelect: true, | |||||
}) | |||||
} | } | ||||
}) | }) | ||||
}, | }, |
height:54rpx; | height:54rpx; | ||||
line-height: 54rpx; | line-height: 54rpx; | ||||
text-align: center; | text-align: center; | ||||
background-color: #005EFF; | |||||
background-color: #345489; | |||||
color: white; | color: white; | ||||
font-size: 29rpx; | font-size: 29rpx; | ||||
margin-top: 18rpx; | margin-top: 18rpx; |
data: { | data: { | ||||
imgUrl: app.globalData.urlStatic,//图片路径 | imgUrl: app.globalData.urlStatic,//图片路径 | ||||
ruleShow: false,//是否显示游戏玩法 | ruleShow: false,//是否显示游戏玩法 | ||||
ruleCloseShow: true,//是否显示游戏玩法关闭按钮 | |||||
ruleCloseShow: false,//是否显示游戏玩法关闭按钮 | |||||
clawTop:95,//爪子的top值 | |||||
clawLeft: 293,//爪子的left值 | |||||
clawScale: 1,//爪子的scale值 | |||||
downNum:30,//倒计时时间 | |||||
setInt:null,//倒计时元素 | |||||
pizeTip:0,//抓奖提示框 | |||||
setGroup:{ | |||||
left:null, | |||||
right: null, | |||||
top: null, | |||||
bottom: null, | |||||
} | |||||
}, | }, | ||||
/** | /** | ||||
ruleShow: true | ruleShow: true | ||||
}) | }) | ||||
}, | }, | ||||
strolClaw:function(){//开始控制爪子方向 | |||||
gameStart: function () {//开始游戏 | |||||
if (!this.data.ruleCloseShow) { | |||||
this.downTimeFun(); | |||||
} | |||||
this.setData({ | |||||
ruleShow: false, | |||||
ruleCloseShow: true | |||||
}) | |||||
}, | }, | ||||
endClaw:function(){//结束爪子动作 | |||||
startClaw:function(e){//开始控制爪子方向 | |||||
let direction = e.currentTarget.dataset.direction; | |||||
if (direction == "L") {//向左 | |||||
if (this.data.clawLeft <= 130) { | |||||
return; | |||||
} | |||||
this.data.setGroup.left = setInterval(() => { | |||||
this.setData({ | |||||
clawLeft: this.data.clawLeft-=2 | |||||
}) | |||||
if (this.data.clawLeft <= 130) { | |||||
clearInterval(this.data.setGroup.left); | |||||
} | |||||
},20); | |||||
} else if (direction == "R") {//向右 | |||||
if (this.data.clawLeft >= 445) { | |||||
return; | |||||
} | |||||
this.data.setGroup.right = setInterval(() => { | |||||
this.setData({ | |||||
clawLeft: this.data.clawLeft += 2 | |||||
}) | |||||
if (this.data.clawLeft >= 445) { | |||||
clearInterval(this.data.setGroup.right); | |||||
} | |||||
}, 20); | |||||
} else if (direction == "T") {//向后 | |||||
if (this.data.clawScale <= 0.5) { | |||||
return; | |||||
} | |||||
this.data.setGroup.top = setInterval(() => { | |||||
this.setData({ | |||||
clawScale: this.data.clawScale -= 0.01 | |||||
}) | |||||
if (this.data.clawScale <= 0.5) { | |||||
clearInterval(this.data.setGroup.top); | |||||
} | |||||
}, 20); | |||||
} else if (direction == "B") {//向前 | |||||
if (this.data.clawScale >= 1.5) { | |||||
return; | |||||
} | |||||
this.data.setGroup.bottom = setInterval(() => { | |||||
this.setData({ | |||||
clawScale: this.data.clawScale += 0.01 | |||||
}) | |||||
if (this.data.clawScale >= 1.5) { | |||||
clearInterval(this.data.setGroup.bottom); | |||||
} | |||||
}, 20); | |||||
} | |||||
}, | |||||
endClaw:function(e){//结束爪子动作 | |||||
let direction = e.currentTarget.dataset.direction; | |||||
if (direction == "L") {//向左 | |||||
clearInterval(this.data.setGroup.left); | |||||
} else if (direction == "R") {//向右 | |||||
clearInterval(this.data.setGroup.right); | |||||
} else if (direction == "T") {//向后 | |||||
clearInterval(this.data.setGroup.top); | |||||
} else if (direction == "B") {//向前 | |||||
clearInterval(this.data.setGroup.bottom); | |||||
} | |||||
}, | |||||
getClaw:function(){//抓取 | |||||
this.setData({ | |||||
clawTop: this.data.clawScale > 1 ? 490 - (2 * (this.data.clawScale-1) * 90) : 490 + (2 * (1 - this.data.clawScale) * 90 ) | |||||
}) | |||||
this.closeSetInt(); | |||||
}, | |||||
downTimeFun:function(){//游戏倒计时 | |||||
this.data.setInt = setInterval(()=>{ | |||||
this.data.downNum -= 1; | |||||
if (this.data.downNum<10){ | |||||
this.data.downNum = '0' + this.data.downNum; | |||||
} | |||||
this.setData({ | |||||
downNum: this.data.downNum | |||||
}) | |||||
if (this.data.downNum < 1) { | |||||
this.closeSetInt(); | |||||
} | |||||
},1000); | |||||
}, | |||||
closeSetInt:function(){//关闭倒计时 | |||||
clearInterval(this.data.setInt); | |||||
this.setData({ | |||||
downNum: 30, | |||||
clawTop: this.data.clawScale > 1 ? 455 - (2 * (this.data.clawScale - 1) * 90) : 455 + (2 * (1 - this.data.clawScale) * 90) | |||||
}) | |||||
setTimeout(()=>{ | |||||
this.setData({ | |||||
downNum: 30, | |||||
clawTop: 95, | |||||
clawLeft: 293, | |||||
clawScale:1 | |||||
}) | |||||
}, 1200); | |||||
}, | |||||
prizeLook:function(){//活动奖品 | |||||
wx.navigateTo({ | |||||
url: '../prizes/prizes' | |||||
}) | |||||
} | } | ||||
}) | }) |
<view class="all"> | <view class="all"> | ||||
<view class="main"> | <view class="main"> | ||||
<view class="gameMain"> | <view class="gameMain"> | ||||
<image class="gameStarBg" src="{{imgUrl+'/images/gameStarBg.png'}}"></image> | |||||
<image class="gameStarBg" src="{{imgUrl+'/images/gameStarBg.png?v=002'}}"></image> | |||||
<view class="gameTitle">幸运星抓手</view> | <view class="gameTitle">幸运星抓手</view> | ||||
<view class="downTime">00:29</view> | |||||
<image class="gameClaw" src="{{imgUrl+'/images/gameClaw.png'}}"></image> | |||||
<image class="prizeIcon2" src="{{imgUrl+'/images/prizeIcon2.png'}}"></image> | |||||
<image class="prizeIcon1" src="{{imgUrl+'/images/prizeIcon1.png'}}"></image> | |||||
<view class="scrollText"> | |||||
<view class="scrollFrame"> | |||||
<view class="scrollView">恭喜XXX获得头等舱机票一张,恭喜XX获得20元美团代金券一张</view> | |||||
<view class="scrollView">恭喜XXX获得头等舱机票一张,恭喜XX获得20元美团代金券一张</view> | |||||
</view> | |||||
<view class="downTime">{{'00:'+downNum}}</view> | |||||
<image class="prizeIcon2" src="{{imgUrl+'/images/prizeIcon2.png?v=002'}}"></image> | |||||
<image class="gameClaw" style="top:{{clawTop}}rpx;left:{{clawLeft}}rpx;transform: scale({{clawScale}});" src="{{imgUrl+'/images/gameClaw.png'}}"></image> | |||||
<image class="prizeIcon1" src="{{imgUrl+'/images/prizeIcon1.png?v=002'}}"></image> | |||||
<view class="getPrizeTip"> | |||||
<view class="prizeTipLine"></view> | |||||
<view class="prizeTipText">他们都中奖了</view> | |||||
<view class="prizeTipLine"></view> | |||||
</view> | |||||
<view class="tipContentGroup"> | |||||
<view class="tipContent">恭喜XXX获得头等舱机票一张,恭喜XX获得20元美团代金券一张</view> | |||||
</view> | |||||
<view class="prizeLookGroup"> | |||||
<view class="prizeLook" bindtap="prizeLook">活动奖品</view> | |||||
</view> | </view> | ||||
<view class="gameControlFrame"> | <view class="gameControlFrame"> | ||||
<view class="gameControlGroup"> | <view class="gameControlGroup"> | ||||
<view class="btnControlL" bindtouchstart="strolClaw" bindtouchend="endClaw" data-direction="L"></view> | |||||
<view class="btnControlR" bindtouchstart="strolClaw" bindtouchend="endClaw" data-direction="R"></view> | |||||
<view class="btnControlT" bindtouchstart="strolClaw" bindtouchend="endClaw" data-direction="T"></view> | |||||
<view class="btnControlB" bindtouchstart="strolClaw" bindtouchend="endClaw" data-direction="B"></view> | |||||
<view class="btnControlL" bindtouchstart="startClaw" bindtouchend="endClaw" data-direction="L"></view> | |||||
<view class="btnControlR" bindtouchstart="startClaw" bindtouchend="endClaw" data-direction="R"></view> | |||||
<view class="btnControlT" bindtouchstart="startClaw" bindtouchend="endClaw" data-direction="T"></view> | |||||
<view class="btnControlB" bindtouchstart="startClaw" bindtouchend="endClaw" data-direction="B"></view> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<view class="gameGetBtn"></view> | |||||
<view class="prizeLook">活动奖品</view> | |||||
<view class="gameGetBtn" bindtap="getClaw"></view> | |||||
</view> | </view> | ||||
<view bindtap="openGameRule" class="gameRuleBtn {{ruleShow?'gameRuleBtn2':''}}">游戏玩法</view> | <view bindtap="openGameRule" class="gameRuleBtn {{ruleShow?'gameRuleBtn2':''}}">游戏玩法</view> | ||||
<view class="gameTip">500元待领取</view> | <view class="gameTip">500元待领取</view> | ||||
<view class="ruleGroup"> | <view class="ruleGroup"> | ||||
<image class="gameRuleIcon" src="{{imgUrl+'/images/gameRuleDesc.png'}}"></image> | <image class="gameRuleIcon" src="{{imgUrl+'/images/gameRuleDesc.png'}}"></image> | ||||
<image class="gameRuleClose" wx:if="{{ruleCloseShow}}" bindtap="closeRule" src="{{imgUrl+'/images/gameRuleClose.png'}}"></image> | <image class="gameRuleClose" wx:if="{{ruleCloseShow}}" bindtap="closeRule" src="{{imgUrl+'/images/gameRuleClose.png'}}"></image> | ||||
<view class="gameStrat">开始游戏</view> | |||||
<view class="gameStrat" bindtap="gameStart">开始游戏</view> | |||||
</view> | |||||
</view> | |||||
<view class="successPop" wx:if="{{pizeTip}}"> | |||||
<view class="successGroup" wx:if="{{pizeTip==1}}"> | |||||
<image class="gameRuleClose" style="top:-31rpx;right:-29rpx;" src="{{imgUrl+'/images/gameRuleClose.png'}}"></image> | |||||
<image class="successIcon" src="{{imgUrl+'/images/successIcon.png'}}"></image> | |||||
<view class="titleGroup"></view> | |||||
<view class="successTip">幸运满格,大奖到手</view> | |||||
<image class="prizePic" src="{{imgUrl+'/images/prizePic1.png'}}"></image> | |||||
<view class="prizeName">头等舱机票一张</view> | |||||
<view class="startRegister">立即领奖</view> | |||||
</view> | |||||
<view class="successGroup" wx:if="{{pizeTip==2 || pizeTip==3}}"> | |||||
<image class="gameRuleClose" style="top:-31rpx;right:-29rpx;" src="{{imgUrl+'/images/gameRuleClose.png'}}"></image> | |||||
<image class="successIcon" src="{{imgUrl+'/images/failIcon.png'}}"></image> | |||||
<view class="titleGroup"></view> | |||||
<view class="failText" style="margin-top:113rpx;">运气就差一点点</view> | |||||
<view class="failText" style="margin-top:20rpx;margin-bottom:82rpx;">重整旗鼓再来抓</view> | |||||
<view class="startRegister">{{pizeTip==2?"邀请好友一起来玩":"立即注册,探索更多星探好礼"}}</view> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</view> | </view> |
image{ | image{ | ||||
display: block; | display: block; | ||||
} | } | ||||
view{ | |||||
-webkit-overflow-scrolling: touch; | |||||
} | |||||
.main{ | .main{ | ||||
height: calc(100vh - 150rpx); | height: calc(100vh - 150rpx); | ||||
overflow: auto; | overflow: auto; | ||||
.gameMain{ | .gameMain{ | ||||
position: relative; | position: relative; | ||||
width: 750rpx; | width: 750rpx; | ||||
height: 1471rpx; | |||||
} | } | ||||
.gameStarBg{ | .gameStarBg{ | ||||
width: 100%; | |||||
height: 100%; | |||||
width: 750rpx; | |||||
height: 1038rpx; | |||||
} | } | ||||
.gameTitle{ | .gameTitle{ | ||||
position: absolute; | position: absolute; | ||||
left: 50%; | left: 50%; | ||||
top: 10rpx; | |||||
top: 0; | |||||
transform: translateX(-50%); | transform: translateX(-50%); | ||||
width: 342rpx; | width: 342rpx; | ||||
height: 124rpx; | |||||
line-height: 124rpx; | |||||
height: 70rpx; | |||||
line-height: 70rpx; | |||||
font-size:40rpx; | font-size:40rpx; | ||||
font-family:PingFangSC; | font-family:PingFangSC; | ||||
color:rgba(35,33,34,1); | color:rgba(35,33,34,1); | ||||
} | } | ||||
.downTime{ | .downTime{ | ||||
position: absolute; | position: absolute; | ||||
top: 58rpx; | |||||
top: 20rpx; | |||||
right: 80rpx; | right: 80rpx; | ||||
font-size:34rpx; | font-size:34rpx; | ||||
line-height: 34rpx; | line-height: 34rpx; | ||||
} | } | ||||
.gameClaw{ | .gameClaw{ | ||||
position: absolute; | position: absolute; | ||||
left: 50%; | |||||
transform: translateX(-50%); | |||||
top: 130rpx; | |||||
left: 293rpx; | |||||
top: 95rpx; | |||||
width: 164rpx; | width: 164rpx; | ||||
height: 259rpx; | height: 259rpx; | ||||
} | |||||
.scrollText{ | |||||
position: absolute; | |||||
left: 50%; | |||||
transform: translateX(-50%); | |||||
bottom: 428rpx; | |||||
width: 700rpx; | |||||
height: 30rpx; | |||||
overflow: hidden; | |||||
} | |||||
.scrollFrame{ | |||||
width: 100%; | |||||
height: 100%; | |||||
position: relative; | |||||
overflow: hidden; | |||||
} | |||||
.scrollView{ | |||||
position: absolute; | |||||
width: auto; | |||||
height: 30rpx; | |||||
line-height: 30rpx; | |||||
font-size:20rpx; | |||||
font-family:PingFangSC; | |||||
font-weight:600; | |||||
color:rgba(255,255,255,1); | |||||
left: 60%; | |||||
} | |||||
.prizeLook{ | |||||
position: absolute; | |||||
left: 50%; | |||||
transform: translateX(-50%); | |||||
bottom: 161rpx; | |||||
width:710rpx; | |||||
height:70rpx; | |||||
background-color: #355483; | |||||
line-height: 70rpx; | |||||
text-align: center; | |||||
font-size:30rpx; | |||||
font-family:PingFangSC; | |||||
font-weight:400; | |||||
color:rgba(255,255,255,1); | |||||
border-radius: 20rpx; | |||||
transition: top 0.8s linear; | |||||
transform: scale(2); | |||||
transform-origin:50% 0 0; | |||||
} | } | ||||
.prizeIcon2{ | .prizeIcon2{ | ||||
position: absolute; | position: absolute; | ||||
left: 115rpx; | left: 115rpx; | ||||
top: 610rpx; | |||||
width: 523rpx; | |||||
height: 171rpx; | |||||
top: 562rpx; | |||||
width: 527rpx; | |||||
height: 169rpx; | |||||
} | } | ||||
.prizeIcon1{ | .prizeIcon1{ | ||||
position: absolute; | position: absolute; | ||||
left: 72rpx; | |||||
top: 640rpx; | |||||
left: 64rpx; | |||||
top: 592rpx; | |||||
width: 624rpx; | width: 624rpx; | ||||
height: 265rpx; | height: 265rpx; | ||||
} | } | ||||
.gameGetBtn{ | .gameGetBtn{ | ||||
position: absolute; | position: absolute; | ||||
right: 70rpx; | right: 70rpx; | ||||
top: 1086rpx; | |||||
top: 920rpx; | |||||
width: 304rpx; | width: 304rpx; | ||||
height: 80rpx; | height: 80rpx; | ||||
} | } | ||||
.gameControlFrame{ | .gameControlFrame{ | ||||
position: absolute; | position: absolute; | ||||
left: 130rpx; | left: 130rpx; | ||||
top: 1078rpx; | |||||
top: 910rpx; | |||||
width: 174rpx; | width: 174rpx; | ||||
height: 106rpx; | height: 106rpx; | ||||
} | } | ||||
width: 50rpx; | width: 50rpx; | ||||
height: 47rpx; | height: 47rpx; | ||||
/* background-color: rgba(233, 222, 111, 0.5); */ | /* background-color: rgba(233, 222, 111, 0.5); */ | ||||
} | |||||
.successPop{ | |||||
position: fixed; | |||||
top: 0; | |||||
left: 0; | |||||
width: 100%; | |||||
height: calc(100vh - 150rpx); | |||||
background-color: rgba( 000, 000, 000, 0.3); | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
} | |||||
.successGroup{ | |||||
position: relative; | |||||
width:455rpx; | |||||
height:426rpx; | |||||
background-color: white; | |||||
display: flex; | |||||
flex-direction: column; | |||||
align-items: center; | |||||
border-radius: 20rpx; | |||||
} | |||||
.successIcon{ | |||||
position: absolute; | |||||
top: -33rpx; | |||||
left: 50%; | |||||
transform: translateX(-50%); | |||||
width: 114rpx; | |||||
height: 114rpx; | |||||
} | |||||
.titleGroup{ | |||||
width: 100%; | |||||
height: 63rpx; | |||||
background-color: #355485; | |||||
border-top-left-radius: 20rpx; | |||||
border-top-right-radius: 20rpx; | |||||
} | |||||
.startRegister{ | |||||
width:278rpx; | |||||
height:50rpx; | |||||
background-color: #345489; | |||||
border-radius: 15rpx; | |||||
text-align: center; | |||||
font-size:21rpx; | |||||
font-family:PingFangSC; | |||||
font-weight:400; | |||||
color:rgba(255,255,255,1); | |||||
line-height:50rpx; | |||||
} | |||||
.prizePic{ | |||||
width: 310rpx; | |||||
height: 116rpx; | |||||
margin-bottom: 10rpx; | |||||
} | |||||
.successTip{ | |||||
font-size:28rpx; | |||||
font-family:PingFangSC; | |||||
font-weight:bold; | |||||
color:rgba(52,84,132,1); | |||||
line-height: 28rpx; | |||||
text-align: center; | |||||
margin-top: 50rpx; | |||||
margin-bottom: 13rpx; | |||||
} | |||||
.prizeName{ | |||||
font-size:21rpx; | |||||
font-family:PingFangSC; | |||||
font-weight:400; | |||||
color:rgba(0,0,0,1); | |||||
line-height:21rpx; | |||||
text-align: center; | |||||
margin-bottom: 30rpx; | |||||
} | |||||
.failText{ | |||||
font-size:28rpx; | |||||
font-family:PingFangSC; | |||||
font-weight:bold; | |||||
color:rgba(52,84,132,1); | |||||
line-height:28rpx; | |||||
text-align: center; | |||||
} | |||||
.getPrizeTip{ | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
margin-top: 50rpx; | |||||
margin-bottom: 16rpx; | |||||
} | |||||
.prizeTipLine{ | |||||
width:80rpx; | |||||
height:5rpx; | |||||
background-color: #1F4C76; | |||||
} | |||||
.prizeTipLine:first-child{ | |||||
margin-right: 20rpx; | |||||
} | |||||
.prizeTipLine:last-child{ | |||||
margin-left: 20rpx; | |||||
} | |||||
.prizeTipText{ | |||||
font-size:24rpx; | |||||
font-family:PingFangSC; | |||||
font-weight:600; | |||||
color:rgba(21,83,136,1); | |||||
line-height:24rpx; | |||||
} | |||||
.tipContentGroup{ | |||||
width:712rpx; | |||||
height:72rpx; | |||||
margin: 0 auto; | |||||
box-sizing: border-box; | |||||
border: 1rpx solid #4B6782; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
border-radius: 20rpx; | |||||
} | |||||
.tipContent{ | |||||
font-size:21rpx; | |||||
font-family:PingFangSC; | |||||
font-weight:400; | |||||
color:rgba(21,83,136,1); | |||||
line-height:21rpx; | |||||
} | |||||
.prizeLookGroup{ | |||||
padding-top:40rpx; | |||||
padding-bottom: 45rpx; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
} | |||||
.prizeLook{ | |||||
width:710rpx; | |||||
height:70rpx; | |||||
background-color: #355483; | |||||
line-height: 70rpx; | |||||
text-align: center; | |||||
font-size:30rpx; | |||||
font-family:PingFangSC; | |||||
font-weight:400; | |||||
color:rgba(255,255,255,1); | |||||
border-radius: 20rpx; | |||||
} | } |
*/ | */ | ||||
data: { | data: { | ||||
imgUrl: app.globalData.urlStatic,//图片路径 | imgUrl: app.globalData.urlStatic,//图片路径 | ||||
phoneInputShow: false,//是否显示电话输入框 | |||||
siteSelect: false,//是否显示位置选择框 | |||||
isLogin:false,//登录状态 | isLogin:false,//登录状态 | ||||
selectNow:0,//现在的选项 | selectNow:0,//现在的选项 | ||||
taskNow:1,//现在的任务类型 | taskNow:1,//现在的任务类型 | ||||
this.data.subscribeData.agent_code = this.data.storeArr[this.data.storeValue].agent_code; | this.data.subscribeData.agent_code = this.data.storeArr[this.data.storeValue].agent_code; | ||||
}else{ | }else{ | ||||
app.globalData.myCenterData = {}; | app.globalData.myCenterData = {}; | ||||
this.getUserLocation(); | |||||
this.getOrderInfo(); | this.getOrderInfo(); | ||||
} | } | ||||
if (this.data.optionsData){ | if (this.data.optionsData){ | ||||
}, | }, | ||||
fail: (res) => { | fail: (res) => { | ||||
this.getDistributorList("", ""); | this.getDistributorList("", ""); | ||||
}, | |||||
complete: (res) => { | |||||
this.setData({ | |||||
siteSelect: true, | |||||
}) | |||||
} | } | ||||
}) | }) | ||||
}, | }, | ||||
}) | }) | ||||
} | } | ||||
},this) | },this) | ||||
}, | |||||
getUserPhone: function (e) {//获取用户手机号 | |||||
this.setData({ | |||||
phoneInputShow: true | |||||
}) | |||||
this.getUserLocation();//获取用户当前位置 | |||||
if (e.detail.errMsg == 'getPhoneNumber:ok') { | |||||
app.wxRequest(app.globalData.urlRoot + "userInfo/getUserPhoneNumber", { encryptedData: e.detail.encryptedData, iv: e.detail.iv }, res => { | |||||
if (res.code == 200) { | |||||
this.data.subscribeData.mobile = res.data.decodeData.phoneNumber; | |||||
this.setData({ | |||||
subscribeData: this.data.subscribeData | |||||
}) | |||||
} else { | |||||
wx.showToast({ | |||||
title: res.msg, | |||||
icon: "none" | |||||
}) | |||||
} | |||||
}, this, "POST"); | |||||
} | |||||
} | } | ||||
}) | }) |
</view> | </view> | ||||
<view class="inputGroup"> | <view class="inputGroup"> | ||||
<input class="inputCode" bindinput="getMobile" type="number" value="{{subscribeData.mobile}}" maxlength='11' placeholder="请输入您的联系电话"></input> | <input class="inputCode" bindinput="getMobile" type="number" value="{{subscribeData.mobile}}" maxlength='11' placeholder="请输入您的联系电话"></input> | ||||
<view class="getPhoneFrame" wx:if="{{!phoneInputShow}}"> | |||||
<button class="getPhoneBtn" style="width: 652rpx;height: 65rpx;margin: 0;padding: 0;min-height: 0;" open-type="getPhoneNumber" bindgetphonenumber="getUserPhone"></button> | |||||
</view> | |||||
</view> | </view> | ||||
<view class="inputGroup"> | <view class="inputGroup"> | ||||
<input class="inputCode" style="width:500rpx;" bindinput="getCaptcha" placeholder="请输入验证码"></input> | <input class="inputCode" style="width:500rpx;" bindinput="getCaptcha" placeholder="请输入验证码"></input> | ||||
<view class="codeTime" bindtap="getCode">{{verificationCode}}</view> | <view class="codeTime" bindtap="getCode">{{verificationCode}}</view> | ||||
</view> | </view> | ||||
<picker mode='selector' range="{{provinceArr}}" range-key="province" value="{{provinceValue}}" bindchange="provinceChane"> | |||||
<view class="selectSiteGroup"> | |||||
<text class="selectName">{{provinceArr[provinceValue].province}}</text> | |||||
<image src="{{imgUrl+'/images/selectIcon.png'}}" class="selectIcon"></image> | |||||
</view> | |||||
</picker> | |||||
<picker mode='selector' range="{{storeArr}}" range-key="agent_detail" value="{{storeValue}}" bindchange="storeChane"> | |||||
<view class="selectSiteGroup"> | |||||
<text class="selectName">{{storeArr[storeValue].agent_detail}}</text> | |||||
<image src="{{imgUrl+'/images/selectIcon.png'}}" class="selectIcon"></image> | |||||
</view> | |||||
</picker> | |||||
<view wx:if="{{siteSelect}}"> | |||||
<picker mode='selector' range="{{provinceArr}}" range-key="province" value="{{provinceValue}}" bindchange="provinceChane"> | |||||
<view class="selectSiteGroup"> | |||||
<text class="selectName">{{provinceArr[provinceValue].province}}</text> | |||||
<image src="{{imgUrl+'/images/selectIcon.png'}}" class="selectIcon"></image> | |||||
</view> | |||||
</picker> | |||||
<picker mode='selector' range="{{storeArr}}" range-key="agent_detail" value="{{storeValue}}" bindchange="storeChane"> | |||||
<view class="selectSiteGroup"> | |||||
<text class="selectName">{{storeArr[storeValue].agent_detail}}</text> | |||||
<image src="{{imgUrl+'/images/selectIcon.png'}}" class="selectIcon"></image> | |||||
</view> | |||||
</picker> | |||||
</view> | |||||
<view class="subscribeBtn" bindtap="subscribeFun">预约鉴赏</view> | <view class="subscribeBtn" bindtap="subscribeFun">预约鉴赏</view> | ||||
</view> | </view> | ||||
<view class="subscribeGroup" wx:if="{{selectNow==4 && isRegister}}"> | <view class="subscribeGroup" wx:if="{{selectNow==4 && isRegister}}"> |
margin: 0 auto; | margin: 0 auto; | ||||
width:307rpx; | width:307rpx; | ||||
height:49rpx; | height:49rpx; | ||||
background-color: #005CFE; | |||||
background-color: #345486; | |||||
border-radius: 10rpx; | border-radius: 10rpx; | ||||
text-align: center; | text-align: center; | ||||
font-size: 25rpx; | font-size: 25rpx; | ||||
line-height: 41rpx; | line-height: 41rpx; | ||||
font-size:21rpx; | font-size:21rpx; | ||||
border-radius: 10rpx; | border-radius: 10rpx; | ||||
border: 1rpx solid #4777D6; | |||||
border: 1rpx solid #345486; | |||||
color: black; | color: black; | ||||
} | } | ||||
.taskText2{ | .taskText2{ | ||||
background-color: #005CFE; | |||||
background-color: #345486; | |||||
color:white; | color:white; | ||||
} | } | ||||
.taskDetailGroup{ | .taskDetailGroup{ | ||||
color: white; | color: white; | ||||
font-size: 20rpx; | font-size: 20rpx; | ||||
line-height:40rpx; | line-height:40rpx; | ||||
background-color: #005AFD; | |||||
background-color: #345486; | |||||
border-radius: 20rpx; | border-radius: 20rpx; | ||||
} | } | ||||
.taskWaitBtn{ | .taskWaitBtn{ | ||||
.taskLine{ | .taskLine{ | ||||
height:15rpx; | height:15rpx; | ||||
width:0; | width:0; | ||||
background-color: #0260FF; | |||||
background-color: #345486; | |||||
border-radius: 20rpx; | border-radius: 20rpx; | ||||
} | } | ||||
.taskSignIcon{ | .taskSignIcon{ | ||||
width:368rpx; | width:368rpx; | ||||
height:57rpx; | height:57rpx; | ||||
border-radius: 10rpx; | border-radius: 10rpx; | ||||
background-color: #0060FE; | |||||
background-color: #345486; | |||||
text-align: center; | text-align: center; | ||||
line-height: 57rpx; | line-height: 57rpx; | ||||
font-size: 29rpx; | font-size: 29rpx; | ||||
align-items: center; | align-items: center; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
border: 1rpx solid #B4B4B4; | border: 1rpx solid #B4B4B4; | ||||
position: relative; | |||||
overflow: hidden; | |||||
} | } | ||||
.inputCode{ | .inputCode{ | ||||
height: 100%; | height: 100%; | ||||
height:65rpx; | height:65rpx; | ||||
line-height: 65rpx; | line-height: 65rpx; | ||||
text-align: center; | text-align: center; | ||||
background-color: #005EFF; | |||||
background-color: #345486; | |||||
color: white; | color: white; | ||||
font-size: 29rpx; | font-size: 29rpx; | ||||
margin-top: 18rpx; | margin-top: 18rpx; | ||||
line-height: 26rpx; | line-height: 26rpx; | ||||
margin-bottom: 26rpx; | margin-bottom: 26rpx; | ||||
text-align: center; | text-align: center; | ||||
} | |||||
.getPhoneFrame{ | |||||
position: absolute; | |||||
left: 0; | |||||
top: 0; | |||||
width: 652rpx; | |||||
height: 65rpx; | |||||
z-index: 2; | |||||
} | |||||
.getPhoneBtn{ | |||||
opacity: 0; | |||||
} | } |
// pages/poster/poster.js | |||||
const app = getApp() | |||||
Page({ | |||||
/** | |||||
* 页面的初始数据 | |||||
*/ | |||||
data: { | |||||
imgUrl: app.globalData.urlStatic,//图片路径 | |||||
canvasContron:null,//canvas | |||||
qrCodeUrl:"https://www.jiyou-tech.com/2020/496_qichen/static/images/testQrCode.png", | |||||
windowScale:0,//屏幕缩放比 | |||||
windowW: 0,//屏幕宽度 | |||||
windowH: 0,//屏幕高度 | |||||
posterUrl:null,//海报图片 | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面加载 | |||||
*/ | |||||
onLoad: function (options) { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面初次渲染完成 | |||||
*/ | |||||
onReady: function () { | |||||
this.data.canvasContron = wx.createCanvasContext('myCanvas'); | |||||
wx.getSystemInfo({ | |||||
success: res => { | |||||
this.data.windowScale = res.windowWidth / 750; | |||||
this.data.windowW = res.windowWidth; | |||||
this.data.windowH = res.windowHeight; | |||||
this.posterDrawing(); | |||||
} | |||||
}) | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面显示 | |||||
*/ | |||||
onShow: function () { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面隐藏 | |||||
*/ | |||||
onHide: function () { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面卸载 | |||||
*/ | |||||
onUnload: function () { | |||||
}, | |||||
/** | |||||
* 页面相关事件处理函数--监听用户下拉动作 | |||||
*/ | |||||
onPullDownRefresh: function () { | |||||
}, | |||||
/** | |||||
* 页面上拉触底事件的处理函数 | |||||
*/ | |||||
onReachBottom: function () { | |||||
}, | |||||
/** | |||||
* 用户点击右上角分享 | |||||
*/ | |||||
onShareAppMessage: function () { | |||||
return { | |||||
title: '500元购车券', | |||||
imageUrl: "", | |||||
path: "/pages/coupon/coupon" | |||||
} | |||||
}, | |||||
saveImg:function(){//保存到手机 | |||||
wx.chooseImage({ | |||||
success: function (res) { | |||||
console.log(res); | |||||
const tempFilePaths = res.tempFilePaths | |||||
wx.saveFile({ | |||||
tempFilePath: tempFilePaths[0], | |||||
success(res) { | |||||
console.log(res); | |||||
const savedFilePath = res.savedFilePath | |||||
} | |||||
}) | |||||
} | |||||
}) | |||||
}, | |||||
posterDrawing: function () {//海报绘制 | |||||
var ctx = this.data.canvasContron; | |||||
var scale = this.data.windowScale; | |||||
console.log(scale); | |||||
//背景 | |||||
ctx.drawImage(this.data.imgUrl + '/images/tempImg1.jpg', 0, 0, scale * 444, scale * 817);//defaultHead | |||||
ctx.setFillStyle("#FFFFFF"); | |||||
ctx.save(); | |||||
ctx.beginPath(); //开始绘制 | |||||
//先画个圆 前两个参数确定了圆心 (x,y) 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false,即顺时针 | |||||
ctx.arc(scale * 48 / 2 + scale * 49, scale * 48 / 2 + scale * 538, scale * 48 / 2, 0, Math.PI * 2, false); | |||||
ctx.clip(); //剪切 | |||||
ctx.drawImage(this.data.imgUrl + '/images/coupon.png', scale * 49, scale * 538, scale * 48, scale * 48); //头像 | |||||
ctx.restore(); //恢复之前保存的绘图上下文 | |||||
//名称 | |||||
ctx.setFontSize(scale * 28); | |||||
ctx.setFillStyle('#FFFFFF'); | |||||
ctx.setTextAlign('left'); | |||||
ctx.fillText("啦啦啦", scale * 102, scale *572); | |||||
//我是第XXX星探 | |||||
ctx.drawImage(this.data.imgUrl + '/images/posterNum.png', scale * 50, scale * 598, scale * 333, scale * 74); | |||||
//二维码 | |||||
ctx.drawImage(this.data.qrCodeUrl, scale * 282, scale * 672, scale * 105, scale* 106); | |||||
//绘制 | |||||
ctx.draw(); | |||||
}, | |||||
savePoster:function(){//生成海报 | |||||
wx.canvasToTempFilePath({ | |||||
width: 443 * this.windowScale, | |||||
height: 817 * this.windowScale, | |||||
destWidth: 443 * this.windowScale *this.data.windowW*3, | |||||
destHeight: 817 * this.windowScale * this.data.windowH*3, | |||||
canvasId: 'myCanvas', | |||||
success: res => { | |||||
wx.previewImage({ | |||||
urls: [res.tempFilePath] // 需要预览的图片http链接列表 | |||||
}) | |||||
// this.data.posterUrl = res.tempFilePath; | |||||
// console.log(this.data.posterUrl); | |||||
} | |||||
}) | |||||
} | |||||
}) |
{ | |||||
"navigationBarTitleText": "东风启辰星探计划", | |||||
"usingComponents": { | |||||
"tabBar": "../component/tabBar/index" | |||||
} | |||||
} |
<!--pages/poster/poster.wxml--> | |||||
<view class="all"> | |||||
<view class="main"> | |||||
<view class="selectTempFrame"> | |||||
<image class="posterChoose" src="{{imgUrl+'/images/posterChoose.png'}}"></image> | |||||
<canvas class="canvasDraw" canvas-id="myCanvas"></canvas> | |||||
</view> | |||||
<view class="lookBigPic" bindtap="savePoster"> | |||||
<image class="lookBigIcon" src="{{imgUrl+'/images/lookbigIcon.png'}}"></image> | |||||
<view class="lookBigText">查看大图</view> | |||||
</view> | |||||
<image class="selectPosterTip" src="{{imgUrl+'/images/selectPosterTip.png'}}"></image> | |||||
<view class="operationFrame"> | |||||
<view class="operationGroup" style="margin-right:55rpx;" bindtap="saveImg"> | |||||
<image class="saveIcon" src="{{imgUrl+'/images/saveIcon.png'}}"></image> | |||||
<view class="operationText">保存到手机</view> | |||||
</view> | |||||
<view class="operationGroup"> | |||||
<image class="saveIcon" src="{{imgUrl+'/images/shareIcon.png'}}"></image> | |||||
<view class="operationText">分享给好友</view> | |||||
<button class="shareBtn" open-type="share"></button> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<tabBar></tabBar> | |||||
</view> |
/* pages/poster/poster.wxss */ | |||||
image{ | |||||
display: block; | |||||
} | |||||
view{ | |||||
-webkit-overflow-scrolling: touch; | |||||
} | |||||
.main{ | |||||
height: calc(100vh - 150rpx); | |||||
overflow: auto; | |||||
position: relative; | |||||
} | |||||
.operationFrame{ | |||||
margin-top: 43rpx; | |||||
width: 750rpx; | |||||
height: 234rpx; | |||||
background-image: url('https://www.jiyou-tech.com/2020/496_qichen/static/images/posterBg.png?v=002'); | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content:center; | |||||
} | |||||
.operationGroup{ | |||||
width: 96rpx; | |||||
display: flex; | |||||
flex-direction: column; | |||||
align-items: center; | |||||
position: relative; | |||||
overflow: hidden; | |||||
} | |||||
.saveIcon{ | |||||
width: 96rpx; | |||||
height: 96rpx; | |||||
} | |||||
.operationText{ | |||||
margin-top: 12rpx; | |||||
line-height: 12rpx; | |||||
font-size:12rpx; | |||||
font-family:PingFang; | |||||
font-weight:bold; | |||||
color:rgba(113,112,113,1); | |||||
} | |||||
.shareBtn{ | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
width: 96rpx; | |||||
height: 96rpx; | |||||
margin: 0; | |||||
padding: 0; | |||||
opacity: 0; | |||||
} | |||||
.selectTempFrame{ | |||||
width:443rpx; | |||||
height:817rpx; | |||||
border: 10rpx solid #00548C; | |||||
position: relative; | |||||
margin: 0 auto; | |||||
margin-top: 92rpx; | |||||
} | |||||
.posterChoose{ | |||||
width: 73rpx; | |||||
height: 73rpx; | |||||
position: absolute; | |||||
left: 50%; | |||||
transform: translate(-50%,-50%); | |||||
top:0; | |||||
z-index: 2; | |||||
} | |||||
.canvasDraw{ | |||||
width:100%; | |||||
height:100%; | |||||
} | |||||
.lookBigPic{ | |||||
display: flex; | |||||
align-items: center; | |||||
flex-direction: column; | |||||
margin-top: 5rpx; | |||||
} | |||||
.lookBigIcon{ | |||||
width: 41rpx; | |||||
height: 41rpx; | |||||
} | |||||
.lookBigText{ | |||||
margin-top: 11rpx; | |||||
font-size:18rpx; | |||||
line-height: 18rpx; | |||||
font-family:PingFang; | |||||
font-weight:bold; | |||||
color:rgba(113,112,113,1); | |||||
} | |||||
.selectPosterTip{ | |||||
width: 278rpx; | |||||
height: 68rpx; | |||||
margin: 0 auto; | |||||
margin-top: 20rpx; | |||||
} |
// pages/prizes/prizes.js | |||||
const app = getApp() | |||||
Page({ | |||||
/** | |||||
* 页面的初始数据 | |||||
*/ | |||||
data: { | |||||
imgUrl: app.globalData.urlStatic,//图片路径 | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面加载 | |||||
*/ | |||||
onLoad: function (options) { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面初次渲染完成 | |||||
*/ | |||||
onReady: function () { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面显示 | |||||
*/ | |||||
onShow: function () { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面隐藏 | |||||
*/ | |||||
onHide: function () { | |||||
}, | |||||
/** | |||||
* 生命周期函数--监听页面卸载 | |||||
*/ | |||||
onUnload: function () { | |||||
}, | |||||
/** | |||||
* 页面相关事件处理函数--监听用户下拉动作 | |||||
*/ | |||||
onPullDownRefresh: function () { | |||||
}, | |||||
/** | |||||
* 页面上拉触底事件的处理函数 | |||||
*/ | |||||
onReachBottom: function () { | |||||
}, | |||||
/** | |||||
* 用户点击右上角分享 | |||||
*/ | |||||
onShareAppMessage: function () { | |||||
} | |||||
}) |
{ | |||||
"navigationBarTitleText": "活动奖品", | |||||
"usingComponents": { | |||||
"tabBar": "../component/tabBar/index" | |||||
} | |||||
} |
<!--pages/prizes/prizes.wxml--> | |||||
<view class="all"> | |||||
<view class="main"> | |||||
<view class="prizeTitleFrame"> | |||||
<view class="prizeTitle">活动奖品</view> | |||||
</view> | |||||
<view class="thirdAward" style="margin-top:0;">一等奖</view> | |||||
<view class="firstPrize"> | |||||
<image class="firstPrizePic" src="{{imgUrl+'/images/firstPrizePic.png'}}"></image> | |||||
<view class="firstPrizeText">欢乐谷全家一日游</view> | |||||
</view> | |||||
<view class="thirdAward">二等奖</view> | |||||
<view class="ticketGroup"> | |||||
<view class="prizeTicket"> | |||||
<image class="prizeTicketPic" src="{{imgUrl+'/images/prizeTicket1.png'}}"></image> | |||||
<view class="prizeTicketName">欢乐谷全家一日游</view> | |||||
</view> | |||||
<view class="prizeTicket"> | |||||
<image class="prizeTicketPic" src="{{imgUrl+'/images/prizeTicket2.png'}}"></image> | |||||
<view class="prizeTicketName">迪士尼全家一日游</view> | |||||
</view> | |||||
<view class="prizeTicket"> | |||||
<image class="prizeTicketPic" style="width:210rpx;" src="{{imgUrl+'/images/prizeTicket3.png'}}"></image> | |||||
<view class="prizeTicketName">长隆全家一日游</view> | |||||
</view> | |||||
</view> | |||||
<view class="thirdAward">三等奖</view> | |||||
<view class="thirdAwardGroup"> | |||||
<view class="threeFrame"> | |||||
<view class="threeGroup"> | |||||
<image class="three1" src="{{imgUrl+'/images/three1.png'}}"></image> | |||||
</view> | |||||
<view class="threeText">喜马拉雅智能音响</view> | |||||
</view> | |||||
<view class="threeFrame"> | |||||
<view class="threeGroup"> | |||||
<image class="three2" src="{{imgUrl+'/images/three2.png'}}"></image> | |||||
</view> | |||||
<view class="threeText">松下扫地机器人</view> | |||||
</view> | |||||
<view class="threeFrame"> | |||||
<view class="threeGroup"> | |||||
<image class="three3" src="{{imgUrl+'/images/three3.png'}}"></image> | |||||
</view> | |||||
<view class="threeText">索尼无线蓝牙耳机</view> | |||||
</view> | |||||
</view> | |||||
<view class="thirdAward">入门奖</view> | |||||
<view class="introductionGroup"> | |||||
<view class="introduction"> | |||||
<image class="introductionPic" src="{{imgUrl+'/images/Introduction1.png'}}"></image> | |||||
<view class="introductionText">美团外卖20元代金券</view> | |||||
</view><view class="introduction"> | |||||
<image class="introductionPic" src="{{imgUrl+'/images/Introduction2.png'}}"></image> | |||||
<view class="introductionText">饿了么15元代金券</view> | |||||
</view><view class="introduction"> | |||||
<image class="introductionPic" src="{{imgUrl+'/images/Introduction3.png'}}"></image> | |||||
<view class="introductionText">瑞幸咖啡免费券</view> | |||||
</view><view class="introduction"> | |||||
<image class="introductionPic" src="{{imgUrl+'/images/Introduction4.png'}}"></image> | |||||
<view class="introductionText">网易云音乐月卡一张</view> | |||||
</view><view class="introduction"> | |||||
<image class="introductionPic" src="{{imgUrl+'/images/Introduction5.png'}}"></image> | |||||
<view class="introductionText">腾讯视频月卡一张</view> | |||||
</view><view class="introduction"> | |||||
<image class="introductionPic" src="{{imgUrl+'/images/Introduction6.png'}}"></image> | |||||
<view class="introductionText">爱奇艺月卡一张</view> | |||||
</view> | |||||
</view> | |||||
<view class="immediateFetching"> | |||||
<view class="prizeTitle" style="margin-top:0;">立即抓取</view> | |||||
</view> | |||||
</view> | |||||
<tabBar></tabBar> | |||||
</view> |
/* pages/prizes/prizes.wxss */ | |||||
image{ | |||||
display: block; | |||||
} | |||||
view{ | |||||
-webkit-overflow-scrolling: touch; | |||||
} | |||||
.main{ | |||||
height: calc(100vh - 150rpx); | |||||
overflow: auto; | |||||
padding-top: 222rpx; | |||||
padding-bottom: 152rpx; | |||||
box-sizing: border-box; | |||||
} | |||||
.prizeTitle{ | |||||
width:710rpx; | |||||
height:70rpx; | |||||
background-color: #17528A; | |||||
border-radius: 20rpx; | |||||
margin: 0 auto; | |||||
line-height: 70rpx; | |||||
text-align: center; | |||||
font-size:30rpx; | |||||
font-family:PingFang; | |||||
font-weight:500; | |||||
color:rgba(255,255,255,1); | |||||
} | |||||
.ticketGroup{ | |||||
padding: 0 45rpx; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: space-between; | |||||
margin-top:35rpx; | |||||
} | |||||
.prizeTicket{ | |||||
display: flex; | |||||
flex-direction: column; | |||||
align-items: center; | |||||
} | |||||
.prizeTicketPic{ | |||||
width: 206rpx; | |||||
height: 83rpx; | |||||
} | |||||
.prizeTicketName{ | |||||
font-size:20rpx; | |||||
line-height: 20rpx; | |||||
font-family:PingFang; | |||||
font-weight:400; | |||||
color:rgba(35,33,34,1); | |||||
margin-top: 30rpx; | |||||
} | |||||
.thirdAward{ | |||||
width:128rpx; | |||||
height:30rpx; | |||||
background-color: #17528A; | |||||
font-size:18rpx; | |||||
line-height: 30rpx; | |||||
font-family:PingFang; | |||||
font-weight:400; | |||||
color:rgba(255,255,255,1); | |||||
border-radius: 20rpx; | |||||
text-align: center; | |||||
margin-top: 65rpx; | |||||
margin-left: 45rpx; | |||||
} | |||||
.thirdAwardGroup{ | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: space-between; | |||||
padding: 0 45rpx; | |||||
} | |||||
.threeFrame{ | |||||
display: flex; | |||||
flex-direction: column; | |||||
align-items: center; | |||||
margin-top: 45rpx; | |||||
} | |||||
.threeGroup{ | |||||
width: 168rpx; | |||||
height: 191rpx; | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
} | |||||
.three1{ | |||||
width: 86rpx; | |||||
height: 191rpx; | |||||
} | |||||
.three2{ | |||||
width: 168rpx; | |||||
height: 168rpx; | |||||
} | |||||
.three3{ | |||||
width: 147rpx; | |||||
height: 166rpx; | |||||
} | |||||
.threeText{ | |||||
line-height: 20rpx; | |||||
font-size:20rpx; | |||||
font-family:PingFang; | |||||
font-weight:400; | |||||
color:rgba(35,33,34,1); | |||||
margin-top: 30rpx; | |||||
} | |||||
.introductionGroup{ | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: space-between; | |||||
flex-wrap: wrap; | |||||
padding: 0 45rpx; | |||||
} | |||||
.introduction{ | |||||
display: flex; | |||||
flex-direction: column; | |||||
align-items: center; | |||||
padding-top: 15rpx; | |||||
} | |||||
.introductionPic{ | |||||
width: 194rpx; | |||||
height: 107rpx; | |||||
margin-bottom: 26rpx; | |||||
margin-top: 30rpx; | |||||
} | |||||
.introductionText{ | |||||
font-size:20rpx; | |||||
line-height: 20rpx; | |||||
font-family:PingFang; | |||||
font-weight:400; | |||||
color:rgba(35,33,34,1); | |||||
} | |||||
.immediateFetching{ | |||||
position: fixed; | |||||
left: 0; | |||||
bottom: 150rpx; | |||||
width: 750rpx; | |||||
padding-top: 37rpx; | |||||
padding-bottom: 45rpx; | |||||
background-color: white; | |||||
} | |||||
.firstPrize{ | |||||
display: flex; | |||||
flex-direction: column; | |||||
align-items: center; | |||||
margin-top: 35rpx; | |||||
} | |||||
.firstPrizePic{ | |||||
width:460rpx; | |||||
height:172rpx; | |||||
} | |||||
.firstPrizeText{ | |||||
line-height: 28rpx; | |||||
font-size:28rpx; | |||||
font-family:PingFang; | |||||
font-weight:400; | |||||
color:rgba(35,33,34,1); | |||||
margin-top: 30rpx; | |||||
} | |||||
.prizeTitleFrame{ | |||||
position: fixed; | |||||
top: 0; | |||||
left: 0; | |||||
padding-top: 87rpx; | |||||
padding-bottom:65rpx; | |||||
background-color: white; | |||||
width: 750rpx; | |||||
} |
"name": "幸运星抓手", | "name": "幸运星抓手", | ||||
"pathName": "pages/luckyStar/luckyStar", | "pathName": "pages/luckyStar/luckyStar", | ||||
"query": "" | "query": "" | ||||
}, | |||||
{ | |||||
"id": -1, | |||||
"name": "活动奖品", | |||||
"pathName": "pages/prizes/prizes", | |||||
"query": "" | |||||
}, | |||||
{ | |||||
"id": -1, | |||||
"name": "海报", | |||||
"pathName": "pages/poster/poster", | |||||
"query": "" | |||||
}, | |||||
{ | |||||
"id": -1, | |||||
"name": "优惠券", | |||||
"pathName": "pages/coupon/coupon", | |||||
"query": "" | |||||
} | } | ||||
] | ] | ||||
} | } |