Skip to content

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

活动模块前端细节处理1

parent 7e806b05
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 453 additions and 325 deletions
wx_application/src/api/active.js
View file @ fae1fade
......@@ -69,9 +69,13 @@ export function getAllCouponsByOyStallCode(id) {
})
}
export function getUserBaseInfo(code) {
/**
* 现有开展活动
*/
export function getCurrentActive() {
return request({
url: `activity/getUserInfo?code=${code}`,
url: `activity/underway`,
method: 'get'
})
}
\ No newline at end of file
}
wx_application/src/utils/Foundation.js 0 → 100644
View file @ fae1fade
export function CoutDown(Endtime) {
let leftTime = (new Date(Endtime)) - new Date(); //计算剩余的毫秒数
let days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
let hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
let minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
let seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
days = checkTime(days);
hours = checkTime(hours);
minutes = checkTime(minutes);
seconds = checkTime(seconds);
if (days >= 0 || hours >= 0 || minutes >= 0 || seconds >= 0) {
document.getElementById("timer").innerHTML = days + "天" + hours + "小时" + minutes + "分" + seconds + "秒";
}
if (days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) {
window.clearInterval(_ordertimer);
_ordertimer = null;
}
function checkTime(i) { //将0-9的数字前面加上0，例1变为01
if (i < 10) {
i = "0" + i;
}
return i;
}
}
\ No newline at end of file
wx_application/src/views/active/activeDetail.vue
View file @ fae1fade
<template>
<div id="active-detail">
<img class="bg" src="../../../public/img/activeDetail_bg.jpg" alt="bg" />
<template v-if="type === 'coupon'">
<template v-if="active_type === 'coupon'">
<div class="coupon">
<div class="user-icon">用户头像</div>
<p class="slogan">送你限量优惠券，手慢无～</p>
......@@ -22,12 +22,13 @@
<div class="btn">立即领取</div>
</div>
</template>
<template v-if="type === 'wheel'">
<template v-if="active_type === 'wheel'">
<div class="wheel-container">
<p class="title">{{ activityName }}</p>
<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}"
......@@ -41,7 +42,7 @@
>
<div class="prize-name">{{ item.name }}</div>
<div class="prize-icon">
<img :src="item.icon" />
<img src="/img/counter.png" />
</div>
</div>
</div>
......@@ -59,7 +60,7 @@
</div>
<div class="time-line">
距离结束仅剩
<span>16天10:45:38</span>
<span id="timer"></span>
</div>
<div class="description">
<div class="t">活动介绍</div>
......@@ -67,12 +68,16 @@
</div>
</div>
</template>
<div class="btn-share" :style="type === 'coupon'? 'bottom: 0': ''" @click="handleShare">立即分享</div>
<div
class="btn-share"
:style="active_type === 'coupon'? 'bottom: 0': ''"
@click="handleShare"
>立即分享</div>
<van-overlay :show="showAward" @click="showAward = false">
<div class="wrapper" @click.stop>
<div v-if="isAward" class="block">
<p style="font-size: 20px;font-weight: bold;">OLAY全场通用抵扣券</p>
<p style="font-size: 20px;font-weight: bold;">一等奖！</p>
<p style="font-size: 20px;font-weight: bold;">{{ awardGood.prizeName }}！</p>
<p style="font-size: 20px;font-weight: bold;">恭喜您中奖！</p>
<van-button style="background: #f00;color: #fff;" @click="handleGet">领取奖品</van-button>
<van-button style="border-color: #7f7777;" @click="showAward = false">继续抽奖</van-button>
......@@ -83,7 +88,6 @@
</div>
</div>
</van-overlay>
<wx-auth :show-auth="showAuthDialog" @confirm="handleCheckAuth"></wx-auth>
</div>
</template>
......@@ -92,11 +96,14 @@
import axios from "axios";
import wxAuth from "@/components/wxAuth";
import * as APi_Active from "@/api/active";
import { CoutDown } from "@/utils/Foundation";
export default {
name: "active-detail",
components: { wxAuth },
data() {
return {
timer: null,
timeLine: "1586628005000",
isAward: false,
showAward: false,
userBaseInfo: "",
......@@ -110,7 +117,7 @@ export default {
userId: "",
code: "",
active_id: "",
type: "coupon",
active_type: "coupon",
freeze: false,
rolling: false,
wheelDeg: 0,
......@@ -149,40 +156,41 @@ export default {
],
activityName: "",
prizeDesc: "",
des: ""
des: "",
awardGood: {
prizeName: ""
}
};
},
async created() {
console.log("活动详情1");
this.currentUrl = location.href;
this.active_id = this.$route.query.id;
this.type = this.$route.query.type;
this.active_type = this.$route.query.active_type;
console.log("query", this.$route.query);
// 验证用户是否登录
if (!sessionStorage.getItem("userId")) {
// 1.获取code
if (this.$route.query.code === undefined) {
this.showAuthDialog = true;
if (this.$route.query.unionid === undefined) {
// this.showAuthDialog = true;
// this.getUnionid();
} else {
this.userBaseInfo = await this.getUserBaseInfo(this.$route.query.code);
console.log("userbaseInfo", this.userBaseInfo);
if (this.userBaseInfo.unionid) {
let params = {
number: 7,
unionId: this.userBaseInfo.unionid
};
APi_Active.isMember(params).then(res => {
this.isMember = res.data.vipId !== "";
this.userBaseInfo.phone = res.data.mobile ? res.data.mobile : "";
});
} else {
console.log("没有unionid");
this.isMember = false;
}
let params = {
number: 7,
unionId: this.$route.query.unionid
};
APi_Active.isMember(params).then(res => {
this.isMember = res.data.vipId !== "";
this.userBaseInfo.mobile = res.data.mobile;
this.userBaseInfo.name = res.data.name;
});
}
}
},
mounted() {
this.timer = setInterval(() => {
CoutDown('2020-5-13 2:5:47');
}, 1000);
this.getAgentAuth();
this.GET_DetailById(this.active_id);
},
......@@ -205,7 +213,9 @@ export default {
// 领取
handleGet() {
this.showAward = false;
this.$toast('领取成功！奖品已经发送到您的会员账户，请进入欧亚小程序查看。')
this.$toast(
"领取成功！奖品已经发送到您的会员账户，请进入欧亚小程序查看。"
);
},
GET_DetailById(id) {
APi_Active.getActiveDetailById(id).then(res => {
......@@ -213,64 +223,18 @@ export default {
this.activityName = res.data.activityName;
this.des = res.data.des;
this.prizeDesc = res.data.prizeDesc;
// this.prizeListOrigin = res.data.list;
});
},
handleCheckAuth() {
this.showAuthDialog = false;
this.getAuthCode();
},
async getUserBaseInfo(code) {
const res = await APi_Active.getUserBaseInfo(code);
return res;
},
// 获取code
getAuthCode() {
// alert('获取code')
const basicInfo = {
head: "https://open.weixin.qq.com/connect/oauth2/authorize?",
appId: "ww4df265003b43fa0d",
redirectUrI: encodeURIComponent(
`oysales.oywanhao.com:8087/activeDetail?id=${this.active_id}&type=${this.type}`
),
responseType: "code",
scope: "snsapi_base",
state: "ztest",
tail: "#wechat_redirect"
};
let url =
basicInfo.head +
"appid=" +
basicInfo.appId +
"&redirect_uri=" +
basicInfo.redirectUrI +
"&response_type=" +
basicInfo.responseType +
"&scope=" +
basicInfo.scope +
"&state=" +
basicInfo.state +
basicInfo.tail;
window.location.href = url;
this.getUnionid();
},
getUnionid() {
// window.location.href = 'http://wxmc.oysd.cn/GetWXUserInfo.aspx'
// 获取用户 unionid、openid
// http://wxmc.oysd.cn/GetWXUserInfo.aspx
// axios({
// url: `http://wxmc.oysd.cn/GetWXUserInfo.aspx`,
// method: 'get'
// }).then(res => {
// console.log(res);
// this.unionid = res.msg.unionid;
// this.openid = res.msg.openid;
// let params = {
// number: 7,
// unionId: this.unionid
// }
// APi_Active.isMember(params).then(res => {
// this.isMember = res.data.vipId !== '';
// })
// })
let redirect_uri = encodeURIComponent(
`oysales.oywanhao.com:8087/activeDetail?id=${this.active_id}&active_type=${this.active_type}`
);
window.location.href = `http://wxsyls.oysd.cn/getwxuserinfo.aspx?jump=${redirect_uri}`;
},
Start_Game() {
if (!this.isMember) {
......@@ -281,23 +245,26 @@ export default {
}
let params = {
activityId: this.active_id,
openId: this.userBaseInfo.openId,
openId: this.$route.query.openId,
phone: this.userBaseInfo.phone,
unionId: this.userBaseInfo.unionId,
// userId:
userName: this.getUserBaseInfo.nickname
unionId: this.$route.query.unionId,
userName: this.userBaseInfo.name
};
APi_Active.play(params)
.then(res => {
this.rolling = true;
const { wheelDeg, prizeList } = this;
const random = parseInt(6 * Math.random(0, 5));
// const random = parseInt(6 * Math.random(0, 5));
const random = prizeList
.map(item => item.id)
.indexOf(res.data.prizeId);
this.wheelDeg =
wheelDeg -
(wheelDeg % 360) +
6 * 360 -
(360 / prizeList.length) * random;
setTimeout(() => {
this.awardGood = prizeList[random] || "";
this.rolling = false;
this.showAward = true;
this.isAward = res.data.prizeName !== "谢谢惠顾";
......@@ -309,14 +276,12 @@ export default {
},
// 分享
handleShare() {
console.log("立即分享");
let url = `http://oysales.oywanhao.com:8087/activeDetail?id=${this.active_id}&type=${this.type}`;
console.log("url", url);
let url = `http://oysales.oywanhao.com:8087/activeDetail?id=${this.active_id}&active_type=${this.active_type}`;
wx.invoke(
"shareToExternalContact",
{
title: "大转盘", // 分享标题
desc: "抽奖活动", // 分享描述
title: `${this.activityName}`, // 分享标题
desc: `${this.des}`, // 分享描述
link: url, // 分享链接
imgUrl: "" // 分享封面
},
......@@ -329,6 +294,9 @@ export default {
}
);
}
},
destroyed() {
clearInterval(this.timer)
}
};
</script>
......
wx_application/src/views/active/activeList.vue
View file @ fae1fade
......@@ -2,102 +2,137 @@
<div class="container">
<div class="title">
<span>大转盘抽奖</span>
<span class="fr">查看更多<span class="icon">></span></span>
</div>
<div class="active">
<div class="list" v-for="item in activeList" :key="item.id" @click="toDetail(item.id, item.activityType)">
<div class="left"></div>
<template v-for="(item, index) in activeList">
<div
v-if="index < wheelActive_limit"
class="list"
:key="item.id"
@click="toDetail(item.id, item.activityType)"
>
<div class="left">
<img :src="item.logo" alt="logo" style="width:100%;height:100%;" />
</div>
<div class="right">
<h3>{{ item.activityName }}</h3>
<p>{{ item.des }}</p>
</div>
</div>
</div>
</template>
<span
class="more"
v-if="activeList.length && !activeList_finished"
@click="handleWheelActiveMore"
>
查看更多
<span class="icon">></span>
</span>
</div>
<div v-if="couponList.length > 0" class="fg">送券活动</div>
<div class="active">
<div class="list" v-for="item in couponList" :key="item.id" @click="toDetail(item.id, item.activityType)">
<div class="left"></div>
<div class="right">
<h3>{{ item.activityName }}</h3>
<p>{{ item.des }}</p>
</div>
<div
class="list"
v-for="item in couponList"
:key="item.id"
@click="toDetail(item.id, item.activityType)"
>
<div class="left"></div>
<div class="right">
<h3>{{ item.activityName }}</h3>
<p>{{ item.des }}</p>
</div>
</div>
</div>
</div>
</template>
<script>
import * as API_Active from '@/api/active';
import * as API_Active from "@/api/active";
export default {
data() {
return {
wheelActive_limit: 3,
activeList_finished: false,
activeList: [
{
id: 1,
activityType: 'coupon',
activityName: '砍价',
des: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。'
activityType: "coupon",
activityName: "砍价",
des: "由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。"
},
{
id: 2,
activityType: 'wheel',
activityName: '集赞',
des: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。'
activityType: "wheel",
activityName: "集赞",
des: "由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。"
}
],
couponList: [
{
id: 1,
activityType: 'coupon',
activityName: '砍价',
des: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。'
activityType: "coupon",
activityName: "砍价",
des: "由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。"
},
{
id: 2,
activityType: 'wheel',
activityName: '集赞',
des: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。'
activityType: "wheel",
activityName: "集赞",
des: "由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状。"
}
],
params: {
pageNo: 1,
pageSize: 10
}
}
};
},
mounted() {
this.getActiveList(this.params);
},
methods: {
handleWheelActiveMore() {
this.wheelActive_limit += 3;
if (this.wheelActive_limit === this.activeList.length - 3) {
this.activeList_finished = true;
return;
}
},
// 获取 活动列表
getActiveList(params) {
API_Active.getActiveList(params).then(res => {
console.log('获取到数据');
console.log("获取到数据");
this.activeList = res.data.list;
})
});
},
// 跳转到 活动详情
toDetail(active_id, type) {
this.$router.push({
path: '/activeDetail',
path: "/activeDetail",
query: {
id: active_id,
type: type
active_type: type
}
})
});
}
}
};
</script>
<style scoped>
.more {
float: right;
margin-bottom: 5px;
font-size: 12px;
}
.container {
height: auto;
background-color: rgba(248, 248, 248, 1);
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
justify-content: flex-start;
}
.title {
height: 44px;
......@@ -114,7 +149,7 @@ export default {
font-size: 12px;
color: rgba(45, 71, 106, 1);
height: 44px;
line-height: 44px;
line-height: 44px;
}
.icon {
font-weight: 800;
......@@ -122,7 +157,7 @@ export default {
.active {
background-color: #fff;
padding: 12px 12px 0 12px;
box-shadow:0px 2px 4px 0px rgba(221,221,221,1);
box-shadow: 0px 2px 4px 0px rgba(221, 221, 221, 1);
}
.list {
height: 94px;
......@@ -130,19 +165,20 @@ export default {
background-color: #fff;
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(238,238,238,1);
border-bottom: 1px solid rgba(238, 238, 238, 1);
margin-bottom: 14px;
}
.list3 {
border-bottom: none;
margin-bottom: 0;
}
.left,.right {
.left,
.right {
height: 80px;
}
.left {
width: 80px;
background:rgba(248,248,248,1);
width: 80px;
background: rgba(248, 248, 248, 1);
}
.right {
width: 76%;
......@@ -151,12 +187,12 @@ export default {
}
h3 {
font-size: 14px;
font-weight:bold;
color:rgba(45,71,106,1);
font-weight: bold;
color: rgba(45, 71, 106, 1);
}
p {
margin-top: 10px;
font-size:12px;
color:rgba(45,71,106,0.8);
font-size: 12px;
color: rgba(45, 71, 106, 0.8);
}
</style>
wx_application/src/views/active/more.vue 0 → 100644
View file @ fae1fade
<template>
<div id="more">
</div>
</template>
<script>
export default {
name: 'more',
components: {},
data() {
return {
}
}
}
</script>
<style lang="scss">
</style>
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