Skip to content

G
gxpt_wechat
Commit f876425d by zhangzhen
Options

抽奖活动

parent 7269f86c
Showing with 619 additions and 1 deletions
api/activity.js 0 → 100644
import http from "@/common/vmeitime-http/index.js"
// 查询活动列表
export const getActivityList=()=>{
let url=`/wheelGame/query`
return http.get(url)
}
export const activityDraw=(data)=>{
let url=`/wheelGame/draw`
return http.post(url,data)
}
components/roundTurntable/index.vue 0 → 100644
<template>
<view class="turntable" ref="turntable">
<view class="myTurntable" :style="{transform: rotateAngle, transition: rotateTransition}">
<view class="prize-container">
<image class="img" :src="imgJson.turnTableAward" mode="scaleToFill" alt />
<view v-for="(item, k) in prizeData" class="item" :key="k" :style="{transform: 'rotate('+item.angle+'deg)'}">
<text class="margin-top">
{{item.prizeName}}
</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "round-turntable",
props: {
prizeData: {
required: true
},
rotateCircle: {
default: 6
},
turntableStyleOption: {
default: () => {
return {
// 背景色
prizeBgColors: [
"#AE3EFF",
"#4D3FFF",
"#FC262C",
"#3A8BFF",
"#EE7602",
"#FE339F"
],
// 转盘的外边框颜色
borderColor: "#199301"
};
}
},
duringTime: {
default: 4.5
},
imgJson: {
type: Object
}
},
mounted() {},
data() {
return {
// 开始转动的角度
startRotateDegree: 0,
rotateAngle: 0,
rotateTransition: "",
};
},
methods: {
rotate(index) {
this.rotateAngle = 0;
// 运转时长
const duringTime = this.duringTime;
const rotateAngle = this.startRotateDegree + this.rotateCircle * 360 + 360 - (360 / this.prizeData
.length) * index - (this.startRotateDegree % 360);
this.startRotateDegree = rotateAngle;
this.rotateAngle = `rotate(${rotateAngle}deg)`;
this.rotateTransition = `transform ${duringTime}s cubic-bezier(0.250, 0.460, 0.455, 0.995)`;
setTimeout(() => {
this.$emit("endRotation");
}, duringTime * 1000 + 500);
}
}
};
</script>
<style scoped lang="scss">
.turntable {
transform: translateZ(0);
width: 100%;
height: 100%;
position: relative;
.myTurntable {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
}
.prize-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
.img {
display: block;
width: 96%;
height: 96%;
}
.item {
/*background: pink;*/
position: absolute;
top: 0;
width: 40%;
height: 50%;
transform-origin: center bottom;
>text {
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
</style>
\ No newline at end of file
pages.json
......@@ -299,6 +299,13 @@
"navigationBarTitleText": "邀请好友注册",
"enablePullDownRefresh" : false
}
},
{
"path" : "activity/prizeDraw",
"style" :
{
"navigationBarTitleText" : "转盘抽奖"
}
}
]
}
......
pages/order/order.vue
......@@ -265,7 +265,7 @@
<view class="flex-1 flex-between">
<view class="flex-row-center">
<text>可用余额: </text>
<text class="text-pink text-bold">￥{{computePriceInfo.availableBalance}}</text>
<text class="text-pink text-bold">￥{{computePriceInfo.availableBalance || 0}}</text>
</view>
<view class="flex-row-center margin-right-sm">
<!-- <text>{{userInfo.memberConfig.levelName}}: <text class="text-pink text-bold">{{userInfo.memberConfig.discountRatio}}</text>折</text> -->
......
setting/activity/prizeDraw.vue 0 → 100644
<template>
<view class="turntable">
<!-- <img class="bg" :src="imgJson.bg" alt=""> -->
<view class="turn-table-content">
<!-- <view class="logo">-->
<!-- <img src="../../assets/images/cny/turntable/logo.png" alt/>-->
<!-- </view>-->
<!-- 转盘内容 -->
<view v-if="imgJson" class="zhuanpan-box">
<!-- <view class="bracket">
<img :src="imgJson.bracket" alt="">
</view> -->
<view class="round-turntable">
<view class="round-turntable-bg">
<roundTurntable v-if="prizeData" ref="roundTurntable" :prizeData="prizeData"
:rotateCircle="rotateCircle" :duringTime="duringTime"
:turntableStyleOption="turntableStyleOption" @endRotation="endRotation" class="turntable"
:imgJson="imgJson" />
</view>
<view class="pointer">
<view class="pointer-box" @click="onStartRotate">
<!-- <img v-if="pointStatus==1" :src="imgJson.closePoint" alt /> -->
<image class="img" :src="imgJson.turnTableCenter" mode="widthFix" alt />
<!-- <img v-else :src="imgJson.openedAwardPoint" alt=""> -->
</view>
</view>
</view>
</view>
<view class="flex-row-center">
<text class="text-title">剩余抽奖次数：</text>
<text class="text-pink">{{userInfo.prizeDrawNumbr || 0}}</text>
</view>
</view>
</view>
</template>
<script>
import config from "@/config/index.config"
import roundTurntable from "@/components/roundTurntable";
import moment from "@/common/moment.js";
import {
getActivityList,activityDraw
} from "@/api/activity.js";
import {
getUserInfo
} from "@/api/index.js"
export default {
components: {
roundTurntable
},
data() {
return {
loading: true, //加载中的效果
// 用户信息
userInfo: uni.getStorageSync('userInfo')||{},
// 获奖结果
awardResult: "",
activity:'',
show: "",
// 转盘上的奖品数据
prizeData: [],
// 转动的圈数
rotateCircle: 6,
// 转动需要持续的时间（s）
duringTime: 4.5,
// 转盘样式的选项
turntableStyleOption: {
// 背景色
prizeBgColors: [
"#AE3EFF",
"#4D3FFF",
"#FC262C",
"#3A8BFF",
"#EE7602",
"#FE339F"
],
// 转盘的外边框颜色
borderColor: "#199301"
},
// 用来锁定转盘，避免同时多次点击转动
isLocking: true,
index: "",
imgJson: {
turnOutBg: `${config.assetsPath}/turntable/out_bg.png`,
turnTableAward: `${config.assetsPath}/turntable/turntable-number.png`,
turnTableCenter: `${config.assetsPath}/turntable/center-point.png`
},
redPackageAward: false, //控制中奖红包弹框显隐
actRuleModal: false, //控制活动规则弹框显隐
pointStatus: 1, //1：还没资格开奖 2：可以抽奖 3：已抽奖了
};
},
onLoad() {
this.onGetUserInfo();
this.onGetActivityList();
},
methods: {
onGetUserInfo() {
getUserInfo().then(res => {
if (res.data.code == 200) {
this.userInfo = res.data.data
}
})
},
onGetActivityList() {
getActivityList().then(res => {
if(res.data && res.data.code == 200 && res.data.data && res.data.data.length){
let arr = res.data.data.filter(item => item.isOpen);
console.log(arr, '活动列表')
if(arr && arr.length){
this.activity =arr[0];
if(this.activity.prizeList && this.activity.prizeList.length){
this.prizeData = this.activity.prizeList.map((item,index) =>{
return {
...item,
angle: 360 /this.activity.prizeList.length * index
}
});
console.log(this.prizeData)
}
}
}
})
},
onSetWindowTop() {
window.scrollTo(0, 0)
},
onScanCode() {
this.scanQRcodeBybase();
},
onStartRotate() {
if (!this.isLocking) return;
this.isLocking = false;
if (this.userInfo && this.userInfo.prizeDrawNumbr) {
this.onOpenAward();
} else {
uni.showToast({
title:'暂无抽奖次数'
})
this.isLocking = true;
}
},
onOpenAward() {
activityDraw(this.activity).then(res =>{
console.log(res,"抽奖结束后的奖品")
if(res.data.code == 200 && res.data.data){
this.awardResult = res.data.data;
this.onGetUserInfo();
this.startRotation();
}
})
},
startRotation() {
this.prizeData.forEach((val, index) => {
if (val.id == this.awardResult.id) {
this.index = index;
}
});
this.$refs.roundTurntable.rotate(this.index);
},
// 已经转动完转盘触发的函数
endRotation() {
// 提示中奖
// this.redPackageAward = true;
// 解锁
this.isLocking = true;
uni.showToast({
title:this.awardResult.prizeName
})
},
onOpenActRule() {
this.actRuleModal = true;
},
onClose() {
this.show = "";
},
setRangeWidth() {
if (this.userInfo.num < this.userInfo.lotteryNeedNum && this.userInfo.usedNum < this.userInfo
.lotteryNeedNum) {
this.pointStatus = 1;
} else if (this.userInfo.num >= this.userInfo.lotteryNeedNum && this.userInfo.usedNum < this.userInfo
.lotteryNeedNum) {
this.pointStatus = 2;
} else {
this.pointStatus = 3;
}
},
//查询活动奖励
onGetTurnTableAward() {
}
}
};
</script>
<style lang="scss" scoped>
.turntable {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.bg {
display: block;
width: 100%;
height: auto;
}
.turn-table-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
.logo {
position: absolute;
top: 0;
left: 0;
width: 50%;
display: flex;
>img {
display: block;
width: 100%;
height: auto;
}
}
.theme-slogan {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
>view {
>img {
display: block;
width: 100%;
height: auto;
}
}
}
.zhuanpan-box {
display: flex;
width: 100vw;
height: 100vw;
justify-content: center;
align-items: center;
position: relative;
.bracket {
position: absolute;
bottom: -4%;
width: 50%;
>img {
display: block;
width: 100%;
height: auto;
}
}
.round-turntable {
width: 96vw;
height: 96vw;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
.round-turntable-bg {
width: 100%;
height: 100%;
}
.pointer {
position: absolute;
top: 0;
left: 0;
z-index: 50;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.pointer-box {
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
height: 30%;
.img {
display: block;
width: 100%;
height: 100%;
}
}
}
}
.myYB-num {
position: absolute;
left: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
>view {
display: flex;
width: 60%;
justify-content: center;
align-items: center;
padding: 5px 0;
background-color: #a22325;
border: 2px solid #fae8bc;
border-radius: 4px;
span {
font-size: 14px;
color: #fae8bc;
font-weight: bold;
}
}
}
}
.scan-code-info {
margin-top: 2%;
>img {
display: block;
width: 100%;
height: auto;
}
}
.act-details {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
>ul {
display: flex;
flex-direction: row;
width: 84%;
background: rgba(255, 255, 255, 0.6);
border: 2px solid #ee6310;
border-radius: 4px;
padding: 3%;
li {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
p {
font-size: 14px;
color: #333333;
white-space: nowrap;
}
span {
font-size: 12px;
color: #333333;
}
}
.middle-part {
flex: 1;
align-items: flex-start;
padding: 0 2%;
.range-icon {
width: 100%;
height: 8px;
position: relative;
background-color: #ffc600;
border-radius: 6px;
padding: 2px;
box-shadow: 0 0 8px #ffc600;
margin: 4px 0;
>view {
width: 100%;
height: 100%;
background-color: #858081;
border-radius: 4px;
}
i {
display: flex;
height: 100%;
width: 0;
transition: width 2s;
border-radius: 6px;
}
}
}
li:first-child {
width: 20%;
.img {
display: block;
width: 100%;
}
}
li:last-child {
width: 20%;
.img {
display: block;
width: 100%;
}
}
}
}
}
.rules {
position: fixed;
top: 20px;
right: 0;
z-index: 66;
.img {
display: block;
width: 24px;
height: 88px;
}
}
}
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment