455 lines
14 KiB
Vue
455 lines
14 KiB
Vue
<template>
|
||
<view class="h-full">
|
||
<loading-view v-if="isFirstLoading && isLogin "></loading-view>
|
||
<view
|
||
class="bg min-h-full overflow-hidden"
|
||
v-else-if="isLogin"
|
||
:style="{ backgroundImage: `url(${draw_activity.bg_image})`, backgroundColor: draw_activity.bg_color }"
|
||
>
|
||
<view class="">
|
||
<view class="fixed top-0 left-0 w-full bg z-10" :style="{ backgroundImage: `url(${draw_activity.bg_image})` }">
|
||
<view :style="{ height: statusBarHeight + 'px' }"></view>
|
||
<view class="px-30rpx py-20rpx flex h-50px flex items-center relative">
|
||
<image
|
||
@click="onBack"
|
||
class="h-56rpx w-56rpx"
|
||
src="https://ystmp.oss-cn-beijing.aliyuncs.com/wechart/lucky/back.png"
|
||
alt=""
|
||
srcset=""
|
||
></image>
|
||
<view class="absolute left-100rpx right-100rpx text-center text-52rpx text-white">{{draw_activity.name}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="w-full" :style="{ height: 50 + statusBarHeight + 'px' }"> </view>
|
||
</view>
|
||
|
||
<view class="h-300rpx w-full"></view>
|
||
<view class="w-full relative">
|
||
<view class="h-100rpx"></view>
|
||
<view class="absolute top-0 z-9 left-0 px-30rpx message w-full">
|
||
<view class="h-180rpx">
|
||
<swiper
|
||
vertical="vertical"
|
||
autoplay="play"
|
||
class="h-full"
|
||
previous-margin="60rpx"
|
||
next-margin="60rpx"
|
||
disable-touch
|
||
@change="change"
|
||
circular
|
||
:current="current"
|
||
>
|
||
<swiper-item v-for="(item, index) in logsAll" :key="index" class="h-full flex items-start flex-col justify-center">
|
||
<view
|
||
class="bg-hex-000 bg-opacity-30 text-white rounded-full px-20px h-44rpx leading-44rpx text-28rpx inline-block"
|
||
:class="index == current ? 'opacity1' : index + 1 == current ? 'opacity0' : index - 1 == current ? 'opacity2' :(current==logsAll.length-1 && index==0)?'opacity2' : 'opacity3'"
|
||
>
|
||
<text
|
||
>恭喜{{ item.user.nickname }}抽中<text class="text-hex-ffde58">{{ item.prize.name }}</text></text
|
||
>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<!-- <view v-for="item in logs" :key="item.id" class="opacity">
|
||
<view class="bg-hex-000 bg-opacity-30 text-white rounded-full px-20px h-44rpx leading-44rpx text-28rpx mb-10rpx inline-block">
|
||
<text
|
||
>恭喜{{ item.user.nickname }}抽中<text class="text-hex-ffde58">{{ item.prize.name }}</text></text
|
||
>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
<almost-lottery
|
||
pointer-position="edge"
|
||
:lottery-size="lotteryConfig.lotterySize"
|
||
:action-size="lotteryConfig.actionSize"
|
||
:ring-count="8"
|
||
:duration="8"
|
||
:prize-list="prizeList"
|
||
:prize-index="prizeIndex"
|
||
@reset-index="prizeIndex = -1"
|
||
@draw-start="handleDrawStart"
|
||
@draw-end="handleDrawEnd"
|
||
@finish="handleDrawFinish"
|
||
v-if="prizeList.length"
|
||
stroke-color="#ffffff"
|
||
:strFontSize="28"
|
||
:strMaxLen="10"
|
||
:strFontColors="['#fb6056']"
|
||
:colors="['#ffeaa7', '#ffeaa7']"
|
||
:stroked="true"
|
||
:img-width="120"
|
||
:img-height="120"
|
||
:imgMarginStr="30"
|
||
:strMarginOutside="32"
|
||
:canvasCached="true"
|
||
:lotteryBg="lotteryBg"
|
||
:actionBg="actionBg"
|
||
/>
|
||
<view class="text-center mt-40rpx"
|
||
>今天还可以抽 <text class="text-error">{{ freeNum }}</text> 次</view
|
||
>
|
||
</view>
|
||
|
||
|
||
<view class="p-30rpx">
|
||
<u-parse :html="draw_activity.desc"></u-parse>
|
||
</view>
|
||
</block>
|
||
<u-mask :show="show">
|
||
<view class="flex items-center justify-center h-full">
|
||
<view class="">
|
||
<view class="pr-30rpx text-right">
|
||
<image src="/static/images/app/app_update_close.png" alt="" srcset="" class="w-48rpx h-48rpx" @click="show = false"></image>
|
||
</view>
|
||
<view class="w-600rpx h-600rpx relative" v-if="prizeData.prize">
|
||
<image :src="prizeData.prize.type==0?results.goods:tips_image" class="w-full h-full"></image>
|
||
<block v-if="prizeData.prize.type!=0">
|
||
<view class="absolute top-178rpx left-0 right-0 text-center mx-auto mx-auto w-300rpx h-290rpx">
|
||
<image :src="results.goods" alt="" class="w-full h-full"></image>
|
||
</view>
|
||
<view
|
||
class="absolute top-136rpx left-0 right-0 text-center h-42rpx leading-40rpx text-30rpx text-hex-f74a2c bg-gradient-to-t to-hex-fff4e5 from-hex-ffd4b2 w-240rpx rounded-full mx-auto"
|
||
>
|
||
{{ results.name }}
|
||
</view>
|
||
<view
|
||
v-if="!!results.btn"
|
||
@click="onResults"
|
||
class="absolute top-466rpx left-0 right-0 text-center h-54rpx leading-54rpx text-28rpx text-white bg-img w-280rpx mx-auto"
|
||
>
|
||
{{ results.btn }}
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-mask>
|
||
|
||
<u-popup v-model="showAddress" mode="center" :border-radius="20" :mask-close-able="false">
|
||
<view class="p-30rpx w-600rpx">
|
||
<u-form :model="form" ref="uForm" label-width="130rpx" :error-type="['toast']">
|
||
<u-form-item label="收件人" prop="consignee_name">
|
||
<u-input v-model="form.consignee_name" cursor-spacing="50rpx" />
|
||
</u-form-item>
|
||
<u-form-item label="联系方式" prop="consignee_phone">
|
||
<u-input v-model="form.consignee_phone" cursor-spacing="50rpx" />
|
||
</u-form-item>
|
||
<u-form-item label="收货地址" prop="consignee_address">
|
||
<u-input v-model="form.consignee_address" cursor-spacing="50rpx" />
|
||
</u-form-item>
|
||
</u-form>
|
||
<view class="bg-primary rounded-full h-64rpx leading-64rpx text-center text-white" @click="submit"> 确定 </view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
let systemInfo = uni.getSystemInfoSync();
|
||
import AlmostLottery from '../components/almost-lottery/components/almost-lottery/almost-lottery.vue';
|
||
export default {
|
||
name: 'Home',
|
||
components: {
|
||
AlmostLottery,
|
||
},
|
||
data() {
|
||
return {
|
||
isFirstLoading: true,
|
||
id: '',
|
||
config: {},
|
||
current: 1,
|
||
statusBarHeight: systemInfo.statusBarHeight,
|
||
form: {
|
||
consignee_name: '',
|
||
consignee_phone: '',
|
||
consignee_address: '',
|
||
},
|
||
show: false,
|
||
prizeData: {},
|
||
results: {
|
||
name: '50元消费体验价',
|
||
btn: '充值账户余额内',
|
||
goods: 'https://ystmp.oss-cn-beijing.aliyuncs.com/wechart/lucky/hb.png',
|
||
},
|
||
// 开启调试模式
|
||
isDev: process.env.NODE_ENV === 'development',
|
||
|
||
// 以下是转盘配置相关数据
|
||
lotteryConfig: {
|
||
// 抽奖转盘的整体尺寸，单位rpx
|
||
lotterySize: 680,
|
||
// 抽奖按钮的尺寸，单位rpx
|
||
actionSize: 200,
|
||
},
|
||
|
||
// 以下是转盘 UI 配置
|
||
// 转盘外环图，如有需要，请参考替换为自己的设计稿
|
||
lotteryBg: 'https://ystmp.oss-cn-beijing.aliyuncs.com/wechart/lucky/lottery-bg.png',
|
||
// 抽奖按钮图
|
||
actionBg: 'https://ystmp.oss-cn-beijing.aliyuncs.com/wechart/lucky/action-bg.png',
|
||
// 奖品数据
|
||
prizeList: [],
|
||
// 奖品是否设有库存
|
||
onStock: true,
|
||
// 中奖下标
|
||
prizeIndex: -1,
|
||
// 是否正在抽奖中，避免重复触发
|
||
prizeing: false,
|
||
// 当日免费抽奖次数余额
|
||
freeNum: 0,
|
||
logsAll: [],
|
||
logsIndex: 0,
|
||
logs: [],
|
||
timer: null,
|
||
showAddress: false,
|
||
draw_log_id: null,
|
||
rules: {
|
||
consignee_name: [
|
||
{
|
||
required: true,
|
||
message: '请输入收件人',
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
consignee_phone: [
|
||
{
|
||
required: true,
|
||
message: '请输入连续方式',
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
consignee_address: [
|
||
{
|
||
required: true,
|
||
message: '请输入收货地址',
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
},
|
||
};
|
||
},
|
||
computed: {
|
||
user() {
|
||
return this.$store.getters.user ?? {};
|
||
},
|
||
isApple() {
|
||
return uni.getSystemInfoSync().platform === 'ios';
|
||
},
|
||
draw_activity() {
|
||
return this.config.draw_activity;
|
||
},
|
||
tips_image(){
|
||
return this.draw_activity?.tips_image ?? 'https://ystmp.oss-cn-beijing.aliyuncs.com/wechart/lucky/lucky-jg.png'
|
||
}
|
||
},
|
||
async onLoad({ id }) {
|
||
this.id = id;
|
||
setTimeout(()=>{
|
||
if(!this.isLogin){
|
||
this.$u.route({
|
||
type:'redirectTo',
|
||
url:`/pages/login/index?redirec=${encodeURIComponent(`/pageB/lucky/index?id=${id}`)}`
|
||
})
|
||
}else{
|
||
this.getConfig();
|
||
this.getLuckyLog();
|
||
}
|
||
},300)
|
||
},
|
||
|
||
//微信分享
|
||
onShareAppMessage(res) {
|
||
let code = this.user.code ? this.user.code : '';
|
||
let shareObj = {
|
||
title: this.draw_activity.name,
|
||
path: `/pageB/lucky/index?id=${this.id}&invite_code=${code}`,
|
||
imageUrl: this.draw_activity.bg_image,
|
||
};
|
||
return shareObj;
|
||
},
|
||
methods: {
|
||
change(e) {
|
||
this.current = e.detail.current;
|
||
},
|
||
onBack() {
|
||
const pages = getCurrentPages()
|
||
const prevPage = pages[pages.length - 2]
|
||
if(prevPage){
|
||
uni.navigateBack({})
|
||
}else{
|
||
uni.switchTab({
|
||
url:'/pages/index/index'
|
||
})
|
||
}
|
||
// uni.navigateBack();
|
||
},
|
||
async getConfig() {
|
||
try {
|
||
const resData = await this.$api.get(`/v1/draw-activities/${this.id}`);
|
||
this.config = resData;
|
||
this.handleInitCanvas();
|
||
} catch (error) {
|
||
console.log(error);
|
||
} finally {
|
||
this.isFirstLoading = false;
|
||
}
|
||
},
|
||
onResults() {
|
||
const { prize } = this.prizeData;
|
||
if (prize.type == 1) {
|
||
this.show = false;
|
||
this.showAddress = true;
|
||
} else {
|
||
this.show = false;
|
||
}
|
||
},
|
||
submit() {
|
||
this.$refs.uForm.validate(async (valid) => {
|
||
if (valid) {
|
||
await this.$api.put(`/v1/draw-activities/${this.id}/logs/${this.draw_log_id}`, this.form);
|
||
this.$refs.uForm.resetFields();
|
||
this.showAddress = false;
|
||
}
|
||
});
|
||
},
|
||
// 获取抽奖记录
|
||
async getLuckyLog() {
|
||
const resData = await this.$api.get(`/v1/draw-activities/${this.id}/logs`, {
|
||
params: {
|
||
page: 1,
|
||
per_page: 4,
|
||
},
|
||
});
|
||
this.logsAll = resData.data.reverse();
|
||
},
|
||
// 重新生成
|
||
handleInitCanvas() {
|
||
this.prizeList = [];
|
||
this.getPrizeList();
|
||
},
|
||
// 获取奖品列表
|
||
async getPrizeList() {
|
||
this.freeNum = this.config.draw_tickets_number;
|
||
const data = this.draw_activity.prizes.map((e) => {
|
||
return { prizeId: e.id, prizeName: e.name, prizeStock: 10, prizeWeight: 200, prizeImage: e.icon, ...e };
|
||
});
|
||
|
||
this.draw_log_id = this.config.draw_log_id;
|
||
this.prizeList = data;
|
||
if (!!this.draw_log_id && !this.showAddress) {
|
||
this.showAddress = true;
|
||
this.$nextTick(() => {
|
||
this.$refs.uForm.setRules(this.rules);
|
||
});
|
||
}
|
||
},
|
||
// 本次抽奖开始
|
||
handleDrawStart() {
|
||
if(this.draw_activity.status == 4){
|
||
return this.$u.toast('活动已结束');
|
||
}
|
||
if(this.draw_activity.status == 2){
|
||
return this.$u.toast('活动未开始');
|
||
}
|
||
if(this.draw_activity.status != 3){
|
||
return;
|
||
}
|
||
if (this.prizeing) return;
|
||
this.prizeing = true;
|
||
// 还有免费数次或者剩余金币足够抽一次
|
||
if (this.freeNum > 0) {
|
||
// 更新免费次数或金币余额
|
||
if (this.freeNum > 0) {
|
||
this.freeNum--;
|
||
}
|
||
this.tryLotteryDraw();
|
||
} else {
|
||
this.$u.toast('抽奖次数不足');
|
||
this.prizeing = false;
|
||
}
|
||
},
|
||
// 尝试发起抽奖
|
||
tryLotteryDraw() {
|
||
this.remoteGetPrizeIndex();
|
||
},
|
||
|
||
// 获取中奖下标
|
||
async remoteGetPrizeIndex() {
|
||
const resData = await this.$api.post(`/v1/draw-activities/${this.id}/draw`);
|
||
this.prizeData = resData;
|
||
const { prize } = resData;
|
||
let _prizeId = prize.id;
|
||
this.prizeIndex = this.prizeList.findIndex(({ prizeId }) => prizeId == _prizeId);
|
||
},
|
||
// 本次抽奖结束
|
||
handleDrawEnd() {
|
||
// 旋转结束后，开始处理拿到结果后的逻辑
|
||
let prize = this.prizeList[this.prizeIndex];
|
||
|
||
const { type, prizeImage, name, amount } = prize;
|
||
this.draw_log_id = this.prizeData.id;
|
||
this.results.name = name;
|
||
this.results.btn = '';
|
||
if (type == 1) {
|
||
// this.showAddress = true
|
||
this.results.btn = '填写地址';
|
||
}
|
||
this.results.goods = prizeImage;
|
||
this.show = true;
|
||
this.prizeing = false;
|
||
this.getLuckyLog();
|
||
},
|
||
// 抽奖转盘绘制完成
|
||
handleDrawFinish(res) {
|
||
let stoTimer = setTimeout(() => {
|
||
clearTimeout(stoTimer);
|
||
stoTimer = null;
|
||
uni.showToast({
|
||
title: res.msg,
|
||
mask: true,
|
||
icon: 'none',
|
||
});
|
||
}, 50);
|
||
},
|
||
},
|
||
|
||
onUnload() {
|
||
uni.hideLoading();
|
||
clearTimeout(this.timer);
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
height: 100%;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.bg {
|
||
// background-image: url('https://ystmp.oss-cn-beijing.aliyuncs.com/wechart/lucky/luckywheel.png');
|
||
background-size: 100% auto;
|
||
background-position: top;
|
||
background-repeat: no-repeat;
|
||
}
|
||
.bg-img {
|
||
background: url('https://ystmp.oss-cn-beijing.aliyuncs.com/wechart/lucky/btn.png') no-repeat;
|
||
background-size: 100% auto;
|
||
}
|
||
|
||
.opacity0 {
|
||
@apply opacity-60;
|
||
}
|
||
.opacity1 {
|
||
@apply opacity-80;
|
||
}
|
||
.opacity2 {
|
||
@apply opacity-100;
|
||
}
|
||
.opacity3 {
|
||
@apply opacity-80;
|
||
}
|
||
</style>
|