Skip to content

Y
ybf
Commit fc538223 authored by leiqingsong's avatar leiqingsong
Browse files
Options

修改轮盘&修改送券活动领取&优惠券创建bug

parent 69a1d0ce
Hide whitespace changes
Inline Side-by-side
Showing with 431 additions and 82 deletions
wx_application/src/views/active/activeDetail.vue
View file @ fc538223
......@@ -30,10 +30,9 @@
<template v-if="active_type === 'wheel'">
<div class="wheel-container">
<p class="title">{{ activityName }}</p>
<div class="wheel">
<!-- <div class="wheel"
<div class="wheel-point" @click="Start_Game">开始</div>
<img src="../../../public/img/wheel.png" alt="wheel" />
<!-- <div class="circle"></div> -->
<div
class="wheel-bg"
:class="{freeze: freeze}"
......@@ -46,14 +45,24 @@
:style="`transform: rotate(${(360/ prizeList.length) * index }deg)`"
>
<div class="prize-name">{{ item.prizeName }}</div>
<div class="prize-icon">
<!-- <p>一等奖</p> -->
<!-- <img src="/img/counter.png" /> -->
</div>
<div class="prize-icon"></div>
</div>
</div>
</div>
</div>
</div>-->
<!-- <div class="wheel">
<img src="../../../public/img/wheel.png" alt="wheel" />
<div class="xttblog_box">
<canvas id="xttblog">抱歉！浏览器不支持。</canvas>
<canvas id="xttblog01" width="200px" height="200px">抱歉！浏览器不支持。</canvas>
<canvas id="xttblog03" width="200px" height="200px">抱歉！浏览器不支持。</canvas>
<canvas id="xttblog02" width="150px" height="150px">抱歉！浏览器不支持。</canvas>
<button id="tupBtn" class="taoge_btn"></button>
</div>
</div>-->
<div style="width:360px; margin:15px auto;">
<canvas id="bg"></canvas>
</div>
<div class="awards">
<van-field
......@@ -105,7 +114,7 @@
</div>
</div>
<div v-else class="wrapper">
<div class="block" style="background: #000;color: #fff;">
<div class="block" style="background: #000;color: #fff;">
<p style="font-size: 22px;">谢谢惠顾！</p>
<p style="font-size: 14px;">很遗憾，此次未能中奖，再接再厉！</p>
</div>
......@@ -126,6 +135,33 @@ export default {
components: { wxAuth },
data() {
return {
award_timer: null,
fillStyle: [
"rgb(255,154,0)",
"rgb(210,92,4)",
"rgb(255,154,0)",
"rgb(210,92,4)",
"rgb(255,154,0)",
"rgb(210,92,4)",
"rgb(255,154,0)",
"rgb(210,92,4)"
],
fillText: [],
width: 360,
height: 360,
c_x: 180,
c_y: 180,
radius: 180, // 圆盘半径
index: 0,
whell_timer: null,
running: false, // 是否运行中
speed: 300, // 速度
isBeginPrize: false, // 是否开始抽奖
stepping: 0, // 步数，经过一个扇形为1步
basecircle: 6, // 点击开始时，圆盘旋转的圈数，旋转玩指定圈数之后，再根据selected的值确定奖项
selected: 1, // 最终选中第几个扇形，也就是确定几等奖
isStop: false,
show_share: true,
goOn: false,
env: "",
......@@ -182,6 +218,16 @@ export default {
name: "奖5",
icon:
"http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
},
{
name: "奖6",
icon:
"http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
},
{
name: "奖7",
icon:
"http://wuhanshangcheng.oss-cn-beijing.aliyuncs.com/shangchengnormal/7E4C1866C2874AA5A788B5E59630A7ED.png"
}
],
activityName: "",
......@@ -193,6 +239,7 @@ export default {
};
},
async created() {
console.log('部署好了');
this.currentUrl = location.href;
this.active_id = this.$route.query.id;
this.active_type = this.$route.query.active_type;
......@@ -200,7 +247,6 @@ export default {
? decodeURIComponent(this.$route.query.headurl)
: "";
this.env = window.navigator.userAgent.toLowerCase();
console.log("env", this.env);
if (
this.env.match(/MicroMessenger/i) == "micromessenger" &&
this.env.match(/wxwork/i) == "wxwork"
......@@ -208,13 +254,12 @@ export default {
this.show_share = true;
} else if (this.env.match(/MicroMessenger/i) == "micromessenger") {
this.show_share = false;
console.log("验证");
// 1.获取code
if (this.$route.query.unionid === undefined) {
this.getUnionid();
} else {
this.userBaseInfo.unionid = JSON.stringify(this.$route.query.unionid);
this.userBaseInfo.openid = JSON.stringify(this.$route.query.openid);
this.userBaseInfo.unionid = this.$route.query.unionid;
this.userBaseInfo.openid = this.$route.query.openid;
let params = {
number: 7,
unionId: this.$route.query.unionid
......@@ -267,6 +312,242 @@ export default {
}
},
methods: {
// 画圆盘
drawCircle(isRunning) {
let deg = Math.PI / 180;
let startAngle = 0;
let endAngle = 0;
let canvas = document.getElementById("bg");
let fillText = this.prizeListOrigin;
canvas.height = this.height;
canvas.width = this.width;
let ctx = canvas.getContext("2d");
for (let i = 0; i < fillText.length; i++) {
startAngle =
Math.PI * (i / (fillText.length / 2) - 2 / fillText.length);
endAngle = startAngle + Math.PI * (1 / (fillText.length / 2));
ctx.beginPath();
// 正在运行的时候，改变当前扇形的颜色
if (isRunning && this.index == i) {
ctx.fillStyle = "rgb(255,248,51)";
} else {
ctx.fillStyle = this.fillStyle[i];
}
// 绘制扇形
ctx.moveTo(this.c_x, this.c_y);
ctx.arc(this.c_x, this.c_y, this.radius, startAngle, endAngle, false);
ctx.fill();
}
// 绘制扇形上的文字
let step = (2 * Math.PI) / fillText.length;
let off_step = this.setOffStep(fillText.length);
for (let i = 0; i < fillText.length; i++) {
ctx.save();
ctx.beginPath();
ctx.translate(180, 180);
ctx.rotate(i * step + off_step);
ctx.font = " 20px Microsoft YaHei";
ctx.fillStyle = "#000";
ctx.fillText(fillText[i].prizeName, -30, -120, 60); // 书写转盘文字
ctx.font = " 14px Microsoft YaHei";
ctx.closePath();
ctx.restore();
}
// 绘制中心圆
ctx.beginPath();
ctx.arc(this.c_x, this.c_y, 50, 0, 2 * Math.PI, 1);
ctx.fillStyle = "rgb(255,255,255)";
ctx.fill();
// 绘制中心圆
ctx.font = "30px Microsoft YaHei";
// 创建渐变
let gradient = ctx.createLinearGradient(0, 0, this.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.2", "blue");
gradient.addColorStop("0.8", "red");
// 用渐变填色
ctx.textAlign = "center";
ctx.fillStyle = gradient;
ctx.fillText("开始", this.c_x, this.c_y + 10);
// 绘制中心园边框
ctx.strokeStyle = "rgb(148,28,27)";
ctx.lineWidth = 6;
ctx.stroke();
canvas.addEventListener("mousedown", this.mouseDown_Start, false);
},
// 奖项名称偏移量
setOffStep(len) {
let offset = 0;
switch (len) {
case 4:
offset = 0.75;
break;
case 6:
offset = 1;
break;
case 8:
offset = 1.2;
break;
default:
offset = 1;
break;
}
return offset;
},
// 初始化 抽奖参数
init() {
this.basecircle = this.prizeListOrigin.length;
this.running = false;
this.isBeginPrize = false;
this.index = 0;
this.stepping = 0;
this.speed = 300;
},
// 开始抽奖
async mouseDown_Start(e) {
let canvas = document.getElementById("bg");
let local = this.getPointOnCanvas(canvas, e.pageX, e.pageY);
if (local.x > 100 && local.x < 300 && local.y > 100 && local.y < 300) {
// 点击开始
// 开始前 必要检测
if(!this.before_Start()) {
// 检测未通过
return false;
}
if (this.running) {
this.$toast("游戏进行中，请勿多次点击！");
return false;
}
await this.game_result();
this.init();
// 转起来
this.wheel_timer = setInterval(this.rotate, this.speed);
}
},
// 游戏开始前的检测
before_Start() {
let check_res = true;
if (this.$route.query.unionid === undefined) {
this.$toast("请在微信端参与抽奖活动");
check_res = false;
return false;
}
if (!this.isMember) {
Dialog.confirm({
title: "提示",
message:
"当前活动为会员才可参加，尚未找到您的会员信息，是否前往注册？"
})
.then(() => {
// on confirm
let url = "http://oysales.oywanhao.com/register";
window.location.href = url;
})
.catch(() => {
// on cancel
return false;
});
check_res = false;
return false;
}
if (this.game_end) {
this.$toast("活动已结束");
check_res = false;
return false;
}
return check_res;
},
// 游戏后台结果
async game_result() {
let params = {
activityId: this.active_id,
openId: this.userBaseInfo.openid,
phone: this.userBaseInfo.phone,
unionId: this.userBaseInfo.unionid,
userName: this.userBaseInfo.name
};
let res = await APi_Active.play(params);
if (!res.data.prizeId) {
this.$toast(res.data.message);
return false;
} else {
// 在奖项列表中找到抽奖结果奖项的下标
let id = this.prizeListOrigin
.map(item => item.id)
.indexOf(res.data.prizeId);
this.selected = id + 1;
this.isAward = res.data.prizeName !== "谢谢惠顾";
// 中奖后 设置中奖奖品信息
if (this.isAward) {
this.awardGood = this.prizeListOrigin[id];
this.awardGood.coupon = JSON.parse(this.prizeListOrigin[id].coupon);
}
}
},
// 开始旋转
rotate() {
this.running = true;
if (this.stepping == 4) {
// 4步之后开始加速
this.clearTimer();
this.speed = 100;
this.wheel_timer = setInterval(this.rotate, this.speed);
}
if (this.basecircle > 0 && this.index == this.prizeListOrigin.length) {
// 基本圈数借宿以后，开始随机抽奖
this.index = 0;
this.basecircle--;
if (this.basecircle == 0) {
// 开始随机抽奖
this.clearTimer();
this.speed = 300;
this.wheel_timer = setInterval(this.rotate, this.speed);
this.isBeginPrize = true;
}
}
if (this.isBeginPrize && this.selected > 0) {
// 开始抽奖
if (--this.selected == 0) {
//到了选择的奖项之后
this.clearTimer();
this.running = false;
this.award_timer = setTimeout(() => {
this.drawCircle(false);
this.showAward = true;
}, 1000);
} else {
this.clearTimer();
this.speed += 100;
this.wheel_timer = setInterval(this.rotate, this.speed);
}
}
this.drawCircle(true);
this.index++;
this.stepping++;
},
// 清理计时器
clearTimer() {
clearInterval(this.wheel_timer);
this.wheel_timer = null;
},
// 获取canvas里面的坐标
getPointOnCanvas(canvas, x, y) {
let bbox = canvas.getBoundingClientRect();
return {
x: x - bbox.left * (canvas.width / bbox.width),
y: y - bbox.top * (canvas.height / bbox.height)
};
},
closeAward() {
this.showAward = false;
},
......@@ -274,10 +555,10 @@ export default {
handleGoOn() {
this.goOn = true;
this.closeAward();
this.handleGet();
},
// 领取(
handleGet() {
console.log("env", this.env);
if (
this.env.match(/MicroMessenger/i) === "micromessenger" &&
this.env.match(/wxwork/i) == "wxwork"
......@@ -303,15 +584,17 @@ export default {
return false;
}
// 会员领取
console.log(
"优惠券id",
this.awardGood.coupon ? this.awardGood.coupon.id : this.couponDetail.id
);
let params = {
couponId: this.awardGood.coupon
? this.awardGood.coupon.id
: this.couponDetail.id,
couponId: this.awardGood.coupon ? this.awardGood.coupon.id : this.couponDetail.id,
unionId: this.userBaseInfo.unionid,
vipId: this.userBaseInfo.vipId
};
APi_Active.collectMyCoupon(params).then(res => {
this.closeAward()
this.closeAward();
if (res.data == "领取失败") {
this.$toast("领取失败");
return false;
......@@ -356,6 +639,7 @@ export default {
document.getElementById("timer").innerHTML = "已结束";
this.game_end = true;
}
this.drawCircle(false);
}
});
},
......@@ -369,46 +653,19 @@ export default {
window.location.href = `http://wxsyls.oysd.cn/getwxuserinfo.aspx?jump=${redirect_uri}`;
},
Start_Game() {
// 在微信端打开 会有身份验证 路径中会带上 unionid
if (this.$route.query.unionid === undefined) {
this.$toast("请在微信端参与抽奖活动");
return false;
}
if (!this.isMember) {
console.log("非会员");
Dialog.confirm({
title: "提示",
message:
"当前活动为会员才可参加，尚未找到您的会员信息，是否前往注册？"
})
.then(() => {
// on confirm
let url = "http://oysales.oywanhao.com/register";
window.location.href = url;
})
.catch(() => {
// on cancel
return false;
});
return false;
}
if (this.game_end) {
this.$toast("活动已结束");
return false;
}
if (this.rolling) {
this.$toast("抽奖中，请勿多次点击！");
return false;
}
let params = {
activityId: this.active_id,
openId: this.userBaseInfo.openid || "ofoA-xMYdB2XA1Ss-ycCeRy9HV4A",
openId: this.userBaseInfo.openid,
phone: this.userBaseInfo.phone,
unionId: this.userBaseInfo.unionid || "oCIMxuMlt5vxRZgl-pNIxOjyYQ20",
unionId: this.userBaseInfo.unionid,
userName: this.userBaseInfo.name
};
const { wheelDeg, prizeList } = this;
this.rolling = true;
// const { wheelDeg, prizeList } = this;
// this.rolling = true;
APi_Active.play(params)
.then(res => {
if (!res.data.prizeId) {
......@@ -416,6 +673,7 @@ export default {
this.$toast(res.data.message);
return false;
}
// 中奖的奖项下标
const random = prizeList
.map(item => item.id)
.indexOf(res.data.prizeId);
......@@ -429,10 +687,8 @@ export default {
this.rolling = false;
this.showAward = true;
if (!this.isAward) {
console.log('谢谢惠顾');
// this.showAward = false;
console.log("谢谢惠顾");
} else {
// this.showAward = true;
this.awardGood = prizeList[random];
this.awardGood.coupon = JSON.parse(prizeList[random].coupon);
console.log(this.awardGood);
......@@ -503,6 +759,7 @@ export default {
},
destroyed() {
clearInterval(this.timer);
clearTimeout(this.award_timer);
}
};
</script>
......@@ -615,8 +872,74 @@ export default {
}
.wheel {
position: relative;
// position: relative;
width: 100%;
position: relative;
margin: 32px auto;
.xttblog_box {
// width: 300px;
// height: 300px;
// margin: 100px auto;
// position: relative;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.xttblog_box canvas {
position: absolute;
}
#xttblog {
top: 16%;
left: 15%;
background-color: white;
border-radius: 100%;
}
#xttblog01,
#xttblog03 {
top: 38%;
left: 38%;
z-index: 30;
}
#xttblog02 {
top: 41%;
left: 41%;
z-index: 20;
}
#xttblog {
-o-transform: transform 6s;
-ms-transform: transform 6s;
-moz-transform: transform 6s;
-webkit-transform: transform 6s;
transition: transform 6s;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.taoge_btn {
width: 60px;
height: 60px;
left: 120px;
top: 120px;
border-radius: 100%;
position: absolute;
cursor: pointer;
border: none;
background: transparent;
outline: none;
z-index: 40;
}
img {
width: 100%;
}
......@@ -724,6 +1047,7 @@ export default {
width: 100%;
padding: 5px 1px;
background: #fff;
margin: 10px 0;
.t {
position: relative;
font-size: 16px;
......
wx_application/src/views/active/createBigWheelActive.vue
View file @ fc538223
......@@ -615,10 +615,20 @@ export default {
this.$toast("请完整填写表单！");
return false;
}
if (Number(this.basicInfo.jointimes) > Number(this.basicInfo.total_join)) {
if (
Number(this.basicInfo.jointimes) > Number(this.basicInfo.total_join)
) {
this.$toast("会员单日参与次数应小于等于会员总参与次数");
return false;
}
if (
this.prizeList.length < 2 ||
this.prizeList.length % 2 != 0 ||
this.prizeList.length > 8
) {
this.$toast("奖项必须大于2小于8，且为偶数个！");
return false;
}
let validate = null;
for (let i in this.prizeList) {
if (this.prizeList[i].type == "") {
......@@ -640,14 +650,20 @@ export default {
break;
}
if (Number(this.prizeList[i].total_limit) < Number(this.prizeList[i].preLimit)) {
if (
Number(this.prizeList[i].total_limit) <
Number(this.prizeList[i].preLimit)
) {
console.log(this.prizeList[i].total_limit);
console.log(this.prizeList[i].preLimit);
this.$toast(`奖项${i + 1},总发放数量应大于等于每日发放数量`);
validate = false;
break;
}
if (Number(this.prizeList[i].total_limit) < Number(this.prizeList[i].limit)) {
if (
Number(this.prizeList[i].total_limit) <
Number(this.prizeList[i].limit)
) {
this.$toast(`奖项${i + 1},总发放数量应大于每人限领数量`);
validate = false;
break;
......@@ -716,28 +732,30 @@ export default {
},
activityPrizes: params_prizeList
};
API_Active.createActive(params).then(res => {
this.create_times = 1;
if (res.result === "fail") {
this.$toast(res.errorMsg);
return false;
}
Toast.success("创建成功");
setTimeout(() => {
this.$router.push({
name: "createSuccess",
params: {
activityId: res.data.activityInfo.id,
activityType: "wheel",
logo: this.logo_imgs[0].url,
des: this.message
}
});
}, 200);
}).catch(error=>{
this.create_times = 1;
console.log(error);
});
API_Active.createActive(params)
.then(res => {
this.create_times = 1;
if (res.result === "fail") {
this.$toast(res.errorMsg);
return false;
}
Toast.success("创建成功");
setTimeout(() => {
this.$router.push({
name: "createSuccess",
params: {
activityId: res.data.activityInfo.id,
activityType: "wheel",
logo: this.logo_imgs[0].url,
des: this.message
}
});
}, 200);
})
.catch(error => {
this.create_times = 1;
console.log(error);
});
},
startTimeChange(e) {
let startTimeArr = e.getValues();
......@@ -855,14 +873,21 @@ export default {
return newString;
},
addPrice() {
if (this.prizeList.length > 5) {
this.$toast("最多设置6个奖项");
return;
if (this.prizeList.length > 7) {
this.$toast("最多设置8个奖项");
return false;
}
// 计算剩余 概率
let temp = 100;
let total = 0;
this.prizeList.forEach(p => {
temp -= Number(p.probability);
total += Number(p.probability);
if (total === 100) {
this.prizeList[0].probability -= 1;
temp = 1;
} else {
temp -= Number(p.probability);
}
});
// this.remain_probability -= Number(this.prizeList[this.prizeList.length-1].probability)
this.prizeList.push({
......
wx_application/src/views/coupon/addCoupon.vue
View file @ fc538223
......@@ -138,7 +138,7 @@
/>
</template>
</van-cell>
<van-cell title="优惠券ID" style="font-size:14px;">
<!-- <van-cell title="优惠券ID" style="font-size:14px;">
<template slot="default">
<div class="npbr">
<van-field
......@@ -156,7 +156,7 @@
/>
</div>
</template>
</van-cell>
</van-cell> -->
<van-cell title="总限制次数" style="font-size:14px;" class="js">
<van-stepper
v-model="addForm.limitOfUse"
......
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