yangjie
/
high-mini
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.对接抽奖活动

Browse Source
yj-dev
杨杰 3 years ago
parent ebf63d96b3
commit ef16e210a2
6 changed files with 943 additions and 1039 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 16
      App.vue
  2. 24
      Utils/Api.js
  3. 65
      pages/pay/success/success.vue
  4. 6
      pages/tabBar/user/user.vue
  5. 341
      subPages/lottery/lottery.vue
  6. 82
      uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue

16
App.vue
Unescape View File

@ -5,15 +5,15 @@
// brestUrl: 'http://192.168.3.4:9302/brest', // brestUrl: 'http://192.168.3.4:9302/brest',
// imgUrl: 'https://192.168.3.4:9301/filesystem/', // imgUrl: 'https://192.168.3.4:9301/filesystem/',
//正式 //正式
url: 'https://hsg.dctpay.com/crest', // url: 'https://hsg.dctpay.com/crest',
imgUrl: 'https://hsg.dctpay.com/filesystem/', // imgUrl: 'https://hsg.dctpay.com/filesystem/',
brestUrl : 'https://hsg.dctpay.com/brest', // brestUrl : 'https://hsg.dctpay.com/brest',
imageWxImg:'https://hsg.dctpay.com/filesystem/wxApplets/', // imageWxImg:'https://hsg.dctpay.com/filesystem/wxApplets/',
//测试 //测试
// url: 'https://hsgcs.dctpay.com/crest', url: 'https://hsgcs.dctpay.com/crest',
// brestUrl : 'https://hsgcs.dctpay.com/brest', brestUrl : 'https://hsgcs.dctpay.com/brest',
// imgUrl: 'https://hsgcs.dctpay.com/filesystem/', imgUrl: 'https://hsgcs.dctpay.com/filesystem/',
// imageWxImg:'https://hsgcs.dctpay.com/filesystem/wxApplets/', imageWxImg:'https://hsgcs.dctpay.com/filesystem/wxApplets/',
userInfo: "", userInfo: "",
brestUserInfo : '', brestUserInfo : '',
openId: '', openId: '',

24
Utils/Api.js
Unescape View File

@ -195,6 +195,30 @@ export const bindHuiLianTongCard = params => {
* 工会卡 * 工会卡
*/ */
/**
* 抽奖活动
*/
export const getActivityByCoupon = params => {
return POST('GET', `${base}/activity/getActivityByCoupon`, params).then(res => res.data);
}
/**
* 用户抽奖
*/
export const userLottery = params => {
return POST('POST', `${base}/activity/userLottery`, params).then(res => res.data);
}
/**
* 获取用户抽奖次数
*/
export const getUserLotteryNum = params => {
return POST('GET', `${base}/activity/getUserLotteryNum`, params).then(res => res.data);
}
/**
* 查询中奖列表【只会提供最新的50条数据】
*/
export const getWinLotteryList = params => {
return POST('GET', `${base}/activity/getWinLotteryList`, params).then(res => res.data);
}
/** /**
* 肯德基地址 * 肯德基地址

65
pages/pay/success/success.vue
Unescape View File

@ -33,25 +33,6 @@
:show-back-btn="true" :show-back-btn="true"
></yy-video-player> ></yy-video-player>
<image :src="imagewxUrl+imgadres2" mode="widthFix" class="mart10"></image> <image :src="imagewxUrl+imgadres2" mode="widthFix" class="mart10"></image>
<!-- <view class="mart20 width90 font18 fcor333 fontwig6">
使用流程：
</view>
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
<view style="width: 5%;" class="flleft">1:</view>
<view style="margin-left: 5%;">客户使用积分兑换或者工会卡购买。</view>
</view>
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
<view style="width: 5%;" class="flleft">2:</view>
<view style="margin-left: 5%;">兑换成功后中石化给客户发送一张同等面额的码商券，保存在”加油中石化“APP中。</view>
</view>
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
<view style="width: 5%;" class="flleft">3:</view>
<view style="margin-left: 5%;">客户登录”加油中石化“APP，查看码商券详情。</view>
</view>
<view class="mart5 width80 font14 fcor999 fontwig6" style="list-style-type: decimal;">
<view style="width: 5%;" class="flleft">4:</view>
<view style="margin-left: 5%;">客户选择中石化任意加油站加油，加完油后，在加油中石化“APP中查看订单，选择支付，支付时选择码商券抵用。支付完成即可。</view>
</view> -->
</view> </view>
@ -82,21 +63,28 @@
</view> </view>
</view> </view>
</view> </view>
<wybPopup ref="popup" type="center" height="850" width="600" radius="6" bgColor="" :showCloseIcon="true" >
<image class="popImg" :src="imagewxUrl+imgadres4" @click="jumpcjhuod"></image>
</wybPopup>
<view class="height60"></view> <view class="height60"></view>
<button class="coupne-btn width100" @click="toUser">个人中心</button> <button class="coupne-btn width100" @click="toUser">个人中心</button>
</view> </view>
</template> </template>
<script> <script>
import { import {
getUserNewCouponDetail, getUserNewCouponDetail,
getStoreListByCoupon getStoreListByCoupon,
getActivityByCoupon
} from "../../../Utils/Api.js"; } from "../../../Utils/Api.js";
import xiaoVideoElement from '../../../components/yy-video-player/yy-video-player.nvue'; import xiaoVideoElement from '../../../components/yy-video-player/yy-video-player.nvue';
import wybPopup from '../../../components/wyb-popup/wyb-popup.vue';
let app = getApp() let app = getApp()
export default { export default {
components: { components: {
xiaoVideoElement xiaoVideoElement,
wybPopup
}, },
data() { data() {
return { return {
@ -105,6 +93,7 @@
imagewxUrl: app.globalData.imageWxImg, imagewxUrl: app.globalData.imageWxImg,
imgadres2: 'video.jpg', imgadres2: 'video.jpg',
imgadres3: 'playVideo.mp4', imgadres3: 'playVideo.mp4',
imgadres4: 'activityimg.png',
imgadres1: 'dhl.png', imgadres1: 'dhl.png',
couponDesInfo: [], couponDesInfo: [],
storeList: [], storeList: [],
@ -119,6 +108,7 @@
onLoad(option) { onLoad(option) {
this.couDesId = option.id; this.couDesId = option.id;
this.getUserNewCouponDetail(); this.getUserNewCouponDetail();
this.getActivityByCoupon();
}, },
filters: { filters: {
//过滤器 用于格式化时间 //过滤器 用于格式化时间
@ -169,6 +159,33 @@
} }
}) })
}, },
//显示弹出
showPopup() {
this.$refs.popup.show();
},
//关闭弹窗
closePopup() {
this.$refs.popup.hide();
},
// 获取奖品列表
getActivityByCoupon() {
let params = {
couponId: this.couDesId
}
getActivityByCoupon(params).then(res => {
if (res.return_code == '000000' && res.return_data) {
this.showPopup();
this.showTc = true;
}
});
},
//跳转抽奖活动
jumpcjhuod(){
this.closePopup();
uni.reLaunch({
url:'../../../subPages/lottery/lottery?id='+this.couDesId
})
},
//导航 //导航
seeloaction(e) { seeloaction(e) {
uni.openLocation({ uni.openLocation({
@ -230,6 +247,11 @@
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.popImg {
width: 290px;
height: 490px;
}
.loading-text { .loading-text {
width: 100%; width: 100%;
display: flex; display: flex;
@ -245,7 +267,6 @@
line-height: 35px; line-height: 35px;
} }
.coupon-mes { .coupon-mes {
margin-right: 90px; margin-right: 90px;
} }

6
pages/tabBar/user/user.vue
Unescape View File

@ -200,12 +200,8 @@
url: '../../login/login?id=2', url: '../../login/login?id=2',
text: '我的推广', text: '我的推广',
img: 'user/renw.png' img: 'user/renw.png'
},
{
url: '../../../subPages/lottery/lottery',
text: '抽奖活动',
img: 'user/renw.png'
} }
// , // ,
// { // {
// url: '/pages/user/Charge/Charge', // url: '/pages/user/Charge/Charge',

341
subPages/lottery/lottery.vue
Unescape View File

@ -4,16 +4,11 @@
<image src="../static/head.jpg" mode="widthFix" class="width100"></image> <image src="../static/head.jpg" mode="widthFix" class="width100"></image>
<view class="almost-lottery__wheel"> <view class="almost-lottery__wheel">
<AlmostLottery :lottery-size="lotteryConfig.lotterySize" :action-size="lotteryConfig.actionSize" <AlmostLottery :lottery-size="lotteryConfig.lotterySize" :action-size="lotteryConfig.actionSize"
:ring-count="2" :duration="3" :prize-list="prizeList" :prize-index="prizeIndex" :ring-count="2" :duration="5" :prize-list="prizeList" :prize-index="prizeIndex"
@reset-index="prizeIndex = -1" @draw-start="handleDrawStart" @draw-end="handleDrawEnd" @reset-index="prizeIndex = -1" @draw-start="handleDrawStart" @draw-end="handleDrawEnd"
@finish="handleDrawFinish" v-if="prizeList.length" /> @finish="handleDrawFinish" v-if="prizeList.length" />
</view> </view>
<view class="almost-lottery__rule"> <view class="almost-lottery__rule">
<!-- <view class="rule-head">
<view class="line"></view>
<text class="title">中奖名单</text>
<view class="line"></view>
</view> -->
<view class="_notice"> <view class="_notice">
<swiper class="_swiper tc" indicator-dots="false" autoplay="true" :interval="interval" circular="true" <swiper class="_swiper tc" indicator-dots="false" autoplay="true" :interval="interval" circular="true"
display-multiple-items="2" :duration="duration"> display-multiple-items="2" :duration="duration">
@ -24,11 +19,11 @@
<view class="swiper-item uni-bg-red"></view> <view class="swiper-item uni-bg-red"></view>
</swiper-item> </swiper-item>
<swiper-item v-for="(item,index) in list" :key="index"> <swiper-item v-for="(item,index) in list" :key="index">
<view class="swiper-item uni-bg-red">{{item}}</view> <view class="swiper-item uni-bg-red">恭喜{{item.phone}}获得{{item.awardName}}</view>
</swiper-item> </swiper-item>
</swiper> </swiper>
</view> </view>
<view class="font14 fotct mart10 marb10">拥有{{ LotteryNum }}次抽奖机会</view>
<view class="rule-head"> <view class="rule-head">
<view class="line"></view> <view class="line"></view>
<text class="title">活动规则</text> <text class="title">活动规则</text>
@ -36,42 +31,7 @@
</view> </view>
<view class="rule-body"> <view class="rule-body">
<view class="item"> <view class="item">
<view class="number">1.</view> <rich-text class="text font14" :nodes="activityInfo"></rich-text>
<view class="text">
<text>活动时间：</text>
<text>10.1-10.31</text>
</view>
</view>
<view class="item">
<view class="number">2.</view>
<view class="text">
<text>参与对象：</text>
<text>重庆地区使用中石化码商加油的客户。</text>
</view>
</view>
<view class="item">
<view class="number">3.</view>
<view class="text">
<text>参与规则：</text>
<text>使用码商加油券的用户，活动期间内每使用一次就可以获得一次抽奖机会。</text>
</view>
</view>
<view class="item item-rule">
<view class="number">4.</view>
<view class="text">
<text>奖励说明：</text>
<text style="margin-top: 1px;">1.一等奖1000元加油券(4名)</text>
<text style="margin-top: 1px;">2.二等奖500元加油券(12名)</text>
<text style="margin-top: 1px;">3.三等奖300元加油券(20名)</text>
<text style="margin-top: 1px;">4.参与奖20元(200-20)抵扣券(2000名)</text>
</view>
</view>
<view class="item">
<view class="number">5.</view>
<view class="text">
<text>奖品兑换：</text>
<text>中奖产品自动放入系统卡包，在我的-我的优惠券中查看，90天内有效。</text>
</view>
</view> </view>
</view> </view>
</view> </view>
@ -80,6 +40,13 @@
<script> <script>
import AlmostLottery from '../../uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue' import AlmostLottery from '../../uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue'
import {
getActivityByCoupon,
userLottery,
getUserLotteryNum,
getWinLotteryList
} from '../../Utils/Api.js';
let app = getApp();
export default { export default {
name: 'Home', name: 'Home',
components: { components: {
@ -87,6 +54,17 @@
}, },
data() { data() {
return { return {
imageUrl: app.globalData.imgUrl,
//活动id
activityId : '',
//获取中间参数
userLotteryId:'',
//抽奖次数
LotteryNum:'',
//活动描述
activityInfo:'',
//卡券id
couponId:'',
// 开启调试模式 // 开启调试模式
isDev: true, isDev: true,
background: ['color1', 'color2', 'color3'], background: ['color1', 'color2', 'color3'],
@ -138,7 +116,7 @@
freeNumDay: 3, freeNumDay: 3,
interval: 3000, interval: 3000,
duration: 12000, duration: 12000,
list: ['1分钟前，无夏购买了会员', '2分钟前，无夏购买了会员', '3分钟前，无夏购买了会员'] list: []
} }
}, },
computed: { computed: {
@ -147,7 +125,6 @@
} }
}, },
methods: { methods: {
changeIndicatorDots(e) { changeIndicatorDots(e) {
this.indicatorDots = !this.indicatorDots this.indicatorDots = !this.indicatorDots
}, },
@ -163,179 +140,87 @@
// 重新生成 // 重新生成
handleInitCanvas() { handleInitCanvas() {
this.prizeList = [] this.prizeList = []
this.getPrizeList() this.getActivityByCoupon()
}, },
// 获取奖品列表 // 获取中奖奖品
getPrizeList() { userLottery() {
uni.showLoading({ let params = {
title: '奖品准备中...' activityId: this.activityId
})
// 等待接口返回的数据进一步处理
// let res = await this.requestApiGetPrizeList()
// if (res.ok) {
// uni.hideLoading()
// let data = res.data
// if (data.length) {
this.prizeList = [{
prizeId: 1,
prizeName: '0.1元现金',
prizeStock: 10,
prizeWeight: 200,
prizeImage: '/static/img/order3.png'
},
{
prizeId: 2,
prizeName: '10元现金',
prizeStock: 0,
prizeWeight: 50,
prizeImage: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/56f085e0-bcfe-11ea-b244-a9f5e5565f30.png'
},
{
prizeId: 3,
prizeName: '5元话费',
prizeStock: 1,
prizeWeight: 80,
prizeImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABCElEQVRoge3YMa4BURSH8Y8o7UAp0WgkotBZwluAfhqlZSgUGr23ENUUCpppJnTswAIUSCaTiziZJ8d9/193zdzrfMltABF5plb+oLscDoAV0Pn8OC/lwDhL0k35QT3wstcIuM61Cj0IhXiNuAvOFwr5SgrxRiHeKMSbhnHfAVgU1i1gajhnBpwK6wnQtgxkDTlmSTq/L7rLYQ9byG+WpLvCOT8YQ6K5WgrxRiHeKMQbhXijEG8U4o1CvIkmxPrDquwMrI37KlFJSJake2BUxVlW0VytaEKsV6t5+8Ohak3rRmtIH9hav/QvRHO1FOKNQrwJheQfn+I9wflCIeNHLzuQc51PRP6rC1ZeIm1I8cC5AAAAAElFTkSuQmCC'
},
{
prizeId: 4,
prizeName: '50元现金',
prizeStock: 0,
prizeWeight: 10,
prizeImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAB2klEQVRIia3Wv09TURjG8U+u2kQZcNENh2ok0cnJ0R+L0RB2g/EvwITEwRgnV0Zx0fAHYBh0khBD4sBAmAgDiwQNg4qwmSBDAYf7Fi+n97al9UlObnvO836f3tO355b2GsAYZrCBPRzGdSPmx8J3YtXwDDsB7TR2wl/rNmAYK13C07ES9W11E9s9BjTHdnBKVf8PAcWgehpwCssF0w/5FzqLgw7AA7zDQ/wqzC8H90jjSeFMYW0Yr8PzALfjOh7z1wve2YTzpLlQw2ay+KZ1N7vS24SziVqGexhKzB07pEJXk/dDwTetdZ9HewwZLWFNw2oyudZjQFNrCW8109pqS32GpPX1TOu586fPkLR+IEMjmbzYZ0ha34Atx/fwW58hXxPeFixo7Yg7PQbcKmEtZFgsMb/C4AkDBuUnQKpFuFZI3cZuvP6C+8g6wDP572O95C4Og49/W/YJl/G5YPqO9yV3dh4f8LMCfhjcI93Afix8xAX5SVx2YBY10yagEdxjmiwY7uISXuIFrlSEPG0TMllWcAbzYViXd0rzeXC6ImSiImA+eKU6h7mCeV/eCBMnCJkLzpHSztnFCJ7L//ZkOFv1iRLtRd1IcLpSHVP4jccVnkexPqXkmd7UX15b7tiz29ReAAAAAElFTkSuQmCC'
},
{
prizeId: 5,
prizeName: '1卷抽纸',
prizeStock: 3,
prizeWeight: 3000,
prizeImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABCElEQVRoge3YMa4BURSH8Y8o7UAp0WgkotBZwluAfhqlZSgUGr23ENUUCpppJnTswAIUSCaTiziZJ8d9/193zdzrfMltABF5plb+oLscDoAV0Pn8OC/lwDhL0k35QT3wstcIuM61Cj0IhXiNuAvOFwr5SgrxRiHeKMSbhnHfAVgU1i1gajhnBpwK6wnQtgxkDTlmSTq/L7rLYQ9byG+WpLvCOT8YQ6K5WgrxRiHeKMQbhXijEG8U4o1CvIkmxPrDquwMrI37KlFJSJake2BUxVlW0VytaEKsV6t5+8Ohak3rRmtIH9hav/QvRHO1FOKNQrwJheQfn+I9wflCIeNHLzuQc51PRP6rC1ZeIm1I8cC5AAAAAElFTkSuQmCC'
},
{
prizeId: 6,
prizeName: '0.2元现金',
prizeStock: 8,
prizeWeight: 120,
prizeImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABCElEQVRoge3YMa4BURSH8Y8o7UAp0WgkotBZwluAfhqlZSgUGr23ENUUCpppJnTswAIUSCaTiziZJ8d9/193zdzrfMltABF5plb+oLscDoAV0Pn8OC/lwDhL0k35QT3wstcIuM61Cj0IhXiNuAvOFwr5SgrxRiHeKMSbhnHfAVgU1i1gajhnBpwK6wnQtgxkDTlmSTq/L7rLYQ9byG+WpLvCOT8YQ6K5WgrxRiHeKMQbhXijEG8U4o1CvIkmxPrDquwMrI37KlFJSJake2BUxVlW0VytaEKsV6t5+8Ohak3rRmtIH9hav/QvRHO1FOKNQrwJheQfn+I9wflCIeNHLzuQc51PRP6rC1ZeIm1I8cC5AAAAAElFTkSuQmCC'
},
{
prizeId: 7,
prizeName: '谢谢参与',
prizeStock: 100,
prizeWeight: 10000,
prizeImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABCElEQVRoge3YMa4BURSH8Y8o7UAp0WgkotBZwluAfhqlZSgUGr23ENUUCpppJnTswAIUSCaTiziZJ8d9/193zdzrfMltABF5plb+oLscDoAV0Pn8OC/lwDhL0k35QT3wstcIuM61Cj0IhXiNuAvOFwr5SgrxRiHeKMSbhnHfAVgU1i1gajhnBpwK6wnQtgxkDTlmSTq/L7rLYQ9byG+WpLvCOT8YQ6K5WgrxRiHeKMQbhXijEG8U4o1CvIkmxPrDquwMrI37KlFJSJake2BUxVlW0VytaEKsV6t5+8Ohak3rRmtIH9hav/QvRHO1FOKNQrwJheQfn+I9wflCIeNHLzuQc51PRP6rC1ZeIm1I8cC5AAAAAElFTkSuQmCC'
},
{
prizeId: 8,
prizeName: '100金币',
prizeStock: 100,
prizeWeight: 3000,
prizeImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABCElEQVRoge3YMa4BURSH8Y8o7UAp0WgkotBZwluAfhqlZSgUGr23ENUUCpppJnTswAIUSCaTiziZJ8d9/193zdzrfMltABF5plb+oLscDoAV0Pn8OC/lwDhL0k35QT3wstcIuM61Cj0IhXiNuAvOFwr5SgrxRiHeKMSbhnHfAVgU1i1gajhnBpwK6wnQtgxkDTlmSTq/L7rLYQ9byG+WpLvCOT8YQ6K5WgrxRiHeKMQbhXijEG8U4o1CvIkmxPrDquwMrI37KlFJSJake2BUxVlW0VytaEKsV6t5+8Ohak3rRmtIH9hav/QvRHO1FOKNQrwJheQfn+I9wflCIeNHLzuQc51PRP6rC1ZeIm1I8cC5AAAAAElFTkSuQmCC'
}
]
// 如果开启了前端控制概率
// 得出权重的最大值并生成权重数组
if (this.onFrontend) {
// 生成权重数组并排序取得最大值
this.prizeWeightArr = this.prizeList.map((item) => item.prizeWeight)
let prizeWeightArrSort = [...this.prizeWeightArr]
prizeWeightArrSort.sort((a, b) => b - a)
this.prizeWeightMax = prizeWeightArrSort[0]
} }
// } userLottery(params).then(res => {
// } else { if (res.return_code == '000000') {
// uni.hideLoading() this.userLotteryId = res.return_data.activityAwardId;
// uni.showToast({ this.remoteGetPrizeIndex();
// title: '获取奖品失败', }
// mask: true, });
// icon: 'none'
// })
// }
},
// 模拟请求 获取奖品列表 接口，
// 注意这里返回的是一个 Promise
// 大哥，这里只是模拟，别告诉我你不会对接自己的接口
requestApiGetPrizeList() {
return new Promise((resolve, reject) => {
let requestTimer = setTimeout(() => {
clearTimeout(requestTimer)
requestTimer = null
// prizeStock 奖品库存
// prizeWeight 中奖概率，数值越大中奖概率越高，权重一样时随机中奖
resolve({
ok: true,
data: [{
prizeId: 1,
prizeName: '0.1元现金',
prizeStock: 10,
prizeWeight: 200,
prizeImage: '/static/img/order3.png'
},
{
prizeId: 2,
prizeName: '10元现金',
prizeStock: 0,
prizeWeight: 50,
prizeImage: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/56f085e0-bcfe-11ea-b244-a9f5e5565f30.png'
},
{
prizeId: 3,
prizeName: '5元话费',
prizeStock: 1,
prizeWeight: 80,
prizeImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABCElEQVRoge3YMa4BURSH8Y8o7UAp0WgkotBZwluAfhqlZSgUGr23ENUUCpppJnTswAIUSCaTiziZJ8d9/193zdzrfMltABF5plb+oLscDoAV0Pn8OC/lwDhL0k35QT3wstcIuM61Cj0IhXiNuAvOFwr5SgrxRiHeKMSbhnHfAVgU1i1gajhnBpwK6wnQtgxkDTlmSTq/L7rLYQ9byG+WpLvCOT8YQ6K5WgrxRiHeKMQbhXijEG8U4o1CvIkmxPrDquwMrI37KlFJSJake2BUxVlW0VytaEKsV6t5+8Ohak3rRmtIH9hav/QvRHO1FOKNQrwJheQfn+I9wflCIeNHLzuQc51PRP6rC1ZeIm1I8cC5AAAAAElFTkSuQmCC'
},
{
prizeId: 4,
prizeName: '50元现金',
prizeStock: 0,
prizeWeight: 10,
prizeImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAB2klEQVRIia3Wv09TURjG8U+u2kQZcNENh2ok0cnJ0R+L0RB2g/EvwITEwRgnV0Zx0fAHYBh0khBD4sBAmAgDiwQNg4qwmSBDAYf7Fi+n97al9UlObnvO836f3tO355b2GsAYZrCBPRzGdSPmx8J3YtXwDDsB7TR2wl/rNmAYK13C07ES9W11E9s9BjTHdnBKVf8PAcWgehpwCssF0w/5FzqLgw7AA7zDQ/wqzC8H90jjSeFMYW0Yr8PzALfjOh7z1wve2YTzpLlQw2ay+KZ1N7vS24SziVqGexhKzB07pEJXk/dDwTetdZ9HewwZLWFNw2oyudZjQFNrCW8109pqS32GpPX1TOu586fPkLR+IEMjmbzYZ0ha34Atx/fwW58hXxPeFixo7Yg7PQbcKmEtZFgsMb/C4AkDBuUnQKpFuFZI3cZuvP6C+8g6wDP572O95C4Og49/W/YJl/G5YPqO9yV3dh4f8LMCfhjcI93Afix8xAX5SVx2YBY10yagEdxjmiwY7uISXuIFrlSEPG0TMllWcAbzYViXd0rzeXC6ImSiImA+eKU6h7mCeV/eCBMnCJkLzpHSztnFCJ7L//ZkOFv1iRLtRd1IcLpSHVP4jccVnkexPqXkmd7UX15b7tiz29ReAAAAAElFTkSuQmCC'
},
{
prizeId: 5,
prizeName: '1卷抽纸',
prizeStock: 3,
prizeWeight: 3000,
prizeImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABCElEQVRoge3YMa4BURSH8Y8o7UAp0WgkotBZwluAfhqlZSgUGr23ENUUCpppJnTswAIUSCaTiziZJ8d9/193zdzrfMltABF5plb+oLscDoAV0Pn8OC/lwDhL0k35QT3wstcIuM61Cj0IhXiNuAvOFwr5SgrxRiHeKMSbhnHfAVgU1i1gajhnBpwK6wnQtgxkDTlmSTq/L7rLYQ9byG+WpLvCOT8YQ6K5WgrxRiHeKMQbhXijEG8U4o1CvIkmxPrDquwMrI37KlFJSJake2BUxVlW0VytaEKsV6t5+8Ohak3rRmtIH9hav/QvRHO1FOKNQrwJheQfn+I9wflCIeNHLzuQc51PRP6rC1ZeIm1I8cC5AAAAAElFTkSuQmCC'
}, },
{ //中奖次数
prizeId: 6, getUserLotteryNum(){
prizeName: '0.2元现金', let params = {
prizeStock: 8, activityId: this.activityId
prizeWeight: 120, }
prizeImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABCElEQVRoge3YMa4BURSH8Y8o7UAp0WgkotBZwluAfhqlZSgUGr23ENUUCpppJnTswAIUSCaTiziZJ8d9/193zdzrfMltABF5plb+oLscDoAV0Pn8OC/lwDhL0k35QT3wstcIuM61Cj0IhXiNuAvOFwr5SgrxRiHeKMSbhnHfAVgU1i1gajhnBpwK6wnQtgxkDTlmSTq/L7rLYQ9byG+WpLvCOT8YQ6K5WgrxRiHeKMQbhXijEG8U4o1CvIkmxPrDquwMrI37KlFJSJake2BUxVlW0VytaEKsV6t5+8Ohak3rRmtIH9hav/QvRHO1FOKNQrwJheQfn+I9wflCIeNHLzuQc51PRP6rC1ZeIm1I8cC5AAAAAElFTkSuQmCC' getUserLotteryNum(params).then(res => {
if (res.return_code == '000000') {
this.LotteryNum = res.return_data;
}
});
}, },
{ //中奖名单
prizeId: 7, getWinLotteryList(){
prizeName: '谢谢参与', let params = {
prizeStock: 100, activityId: this.activityId
prizeWeight: 10000, }
prizeImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABCElEQVRoge3YMa4BURSH8Y8o7UAp0WgkotBZwluAfhqlZSgUGr23ENUUCpppJnTswAIUSCaTiziZJ8d9/193zdzrfMltABF5plb+oLscDoAV0Pn8OC/lwDhL0k35QT3wstcIuM61Cj0IhXiNuAvOFwr5SgrxRiHeKMSbhnHfAVgU1i1gajhnBpwK6wnQtgxkDTlmSTq/L7rLYQ9byG+WpLvCOT8YQ6K5WgrxRiHeKMQbhXijEG8U4o1CvIkmxPrDquwMrI37KlFJSJake2BUxVlW0VytaEKsV6t5+8Ohak3rRmtIH9hav/QvRHO1FOKNQrwJheQfn+I9wflCIeNHLzuQc51PRP6rC1ZeIm1I8cC5AAAAAElFTkSuQmCC' getWinLotteryList(params).then(res => {
if (res.return_code == '000000') {
this.list = res.return_data;
}
});
}, },
{ // 获取奖品列表
prizeId: 8, getActivityByCoupon() {
prizeName: '100金币', uni.showLoading({
prizeStock: 100, title: '奖品准备中...'
prizeWeight: 3000,
prizeImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABCElEQVRoge3YMa4BURSH8Y8o7UAp0WgkotBZwluAfhqlZSgUGr23ENUUCpppJnTswAIUSCaTiziZJ8d9/193zdzrfMltABF5plb+oLscDoAV0Pn8OC/lwDhL0k35QT3wstcIuM61Cj0IhXiNuAvOFwr5SgrxRiHeKMSbhnHfAVgU1i1gajhnBpwK6wnQtgxkDTlmSTq/L7rLYQ9byG+WpLvCOT8YQ6K5WgrxRiHeKMQbhXijEG8U4o1CvIkmxPrDquwMrI37KlFJSJake2BUxVlW0VytaEKsV6t5+8Ohak3rRmtIH9hav/QvRHO1FOKNQrwJheQfn+I9wflCIeNHLzuQc51PRP6rC1ZeIm1I8cC5AAAAAElFTkSuQmCC'
}
]
}) })
}, 2000) let params = {
couponId: this.couponId
}
getActivityByCoupon(params).then(res => {
if (res.return_code == '000000') {
let prizeLists = res.return_data.activityAward;
this.activityId = res.return_data.activityInfo.id;
let prizesList = [];
prizeLists.map((r) => {
const pris = new prizeListNew();
pris.prizeId = r.id;
pris.prizeImage = this.imageUrl + r.img;
pris.prizeName = r.name;
prizesList.push(pris);
}) })
this.activityInfo = this.transform(res.return_data.activityInfo.content);
this.prizeList = prizesList;
this.getUserLotteryNum();
this.getWinLotteryList();
}
});
},
//换行
transform(value){
value = value.replace(/\r\n/g, '<br/>');
value = value.replace(/\n/g, '<br/>');
return value;
}, },
// 本次抽奖开始 // 本次抽奖开始
handleDrawStart() { handleDrawStart() {
console.log('触发抽奖按钮') if(this.LotteryNum <= 0){
this.tryLotteryDraw() uni.showToast({
}, title: '当前抽奖次数不足',
// 尝试发起抽奖 icon: 'none',
tryLotteryDraw() { duration: 2000
console.log('旋转开始，获取中奖下标......') })
this.remoteGetPrizeIndex() return;
}
this.userLottery();
}, },
// 远程请求接口获取中奖下标 // 远程请求接口获取中奖下标
// 大哥，这里只是模拟，别告诉我你不会对接自己的接口 // 大哥，这里只是模拟，别告诉我你不会对接自己的接口
@ -347,7 +232,7 @@
stoTimer = null stoTimer = null
let list = [...this.prizeList] let list = [...this.prizeList]
// 这里随机产生的 prizeId 是模拟后端返回的 prizeId // 这里随机产生的 prizeId 是模拟后端返回的 prizeId
let prizeId = Math.floor(Math.random() * list.length + 1); let prizeId = this.userLotteryId;
// 拿到后端返回的 prizeId 后，开始循环比对得出那个中奖的数据 // 拿到后端返回的 prizeId 后，开始循环比对得出那个中奖的数据
for (let i = 0; i < list.length; i++) { for (let i = 0; i < list.length; i++) {
let item = list[i] let item = list[i]
@ -357,36 +242,22 @@
break break
} }
} }
console.log('本次抽中奖品 =>', this.prizeList[this.prizeIndex].prizeName)
// 如果奖品设有库存
if (this.onStock) {
console.log('本次奖品库存 =>', this.prizeList[this.prizeIndex].prizeStock)
}
}, 200) }, 200)
}, },
// 本次抽奖结束 // 本次抽奖结束
handleDrawEnd() { handleDrawEnd() {
console.log('旋转结束，执行拿到结果后到逻辑') console.log('旋转结束，执行拿到结果后到逻辑')
// 旋转结束后，开始处理拿到结果后的逻辑 // 旋转结束后，开始处理拿到结果后的逻辑
this.prizeing = false this.prizeing = false
let prizeName = this.prizeList[this.prizeIndex].prizeName let prizeName = this.prizeList[this.prizeIndex].prizeName
let tipContent = '' let tipContent = ''
// if (prizeName === '参与奖') {
if (prizeName === '谢谢参与') { // tipContent = '很遗憾，没有中奖，请再接再厉！'
tipContent = '很遗憾，没有中奖，请再接再厉！' // } else {
} else { tipContent = `恭喜您，获得 "${prizeName} "！`
// 如果奖品设有库存 // }
if (this.onStock) { this.getUserLotteryNum();
let prizeStock = this.prizeList[this.prizeIndex].prizeStock this.getWinLotteryList();
tipContent = prizeStock ? `恭喜您，获得 ${prizeName}` : `很抱歉，您来晚了，当前奖品 ${prizeName} 已无库存`
} else {
tipContent = `恭喜您，获得 ${prizeName} ！`
}
}
uni.showModal({ uni.showModal({
content: tipContent, content: tipContent,
showCancel: false showCancel: false
@ -403,13 +274,19 @@
}) })
} }
}, },
onLoad() { onLoad(options) {
this.couponId = options.id
this.handleInitCanvas() this.handleInitCanvas()
}, },
onUnload() { onUnload() {
uni.hideLoading() uni.hideLoading()
} }
} }
export class prizeListNew {
prizeId = ''
prizeName = ''
prizeImage = ''
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

82
uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue
Unescape View File

@ -1,43 +1,29 @@
<template> <template>
<view class="almost-lottery"> <view class="almost-lottery">
<view class="almost-lottery__wrap" :style="{ width: lotterySize + 'rpx', height: lotterySize + 'rpx' }"> <view class="almost-lottery__wrap" :style="{ width: lotterySize + 'rpx', height: lotterySize + 'rpx' }">
<view class="lottery-action" :style="{ width: actionSize + 'rpx', height: actionSize + 'rpx', left: canvasMarginOutside + 'rpx' }"></view> <view class="lottery-action"
:style="{ width: actionSize + 'rpx', height: actionSize + 'rpx', left: canvasMarginOutside + 'rpx' }">
</view>
<view class="str-margin-outside" :style="{ left: strMarginOutside + 'rpx' }"></view> <view class="str-margin-outside" :style="{ left: strMarginOutside + 'rpx' }"></view>
<view class="img-margin-str" :style="{ left: imgMarginStr + 'rpx' }"></view> <view class="img-margin-str" :style="{ left: imgMarginStr + 'rpx' }"></view>
<view class="img-size" :style="{ width: imgWidth + 'rpx', height: imgHeight + 'rpx' }"></view> <view class="img-size" :style="{ width: imgWidth + 'rpx', height: imgHeight + 'rpx' }"></view>
<template v-if="lotteryImg"> <template v-if="lotteryImg">
<image <image class="almost-lottery__bg" mode="widthFix" :src="lotteryBg" :style="{
class="almost-lottery__bg"
mode="widthFix"
:src="lotteryBg"
:style="{
width: lotteryPxSize + 'px', width: lotteryPxSize + 'px',
height: lotteryPxSize + 'px' height: lotteryPxSize + 'px'
}" }"></image>
></image> <image class="almost-lottery__canvas-img" mode="widthFix" :src="lotteryImg" :style="{
<image
class="almost-lottery__canvas-img"
mode="widthFix"
:src="lotteryImg"
:style="{
width: canvasPxSize + 'px', width: canvasPxSize + 'px',
height: canvasPxSize + 'px', height: canvasPxSize + 'px',
transform: `rotate(${canvasAngle + targetAngle}deg)`, transform: `rotate(${canvasAngle + targetAngle}deg)`,
transitionDuration: `${transitionDuration}s` transitionDuration: `${transitionDuration}s`
}" }"></image>
></image> <image class="almost-lottery__action almost-lottery__action-bg" mode="widthFix" :src="actionBg" :style="{
<image
class="almost-lottery__action almost-lottery__action-bg"
mode="widthFix"
:src="actionBg"
:style="{
width: actionPxSize + 'px', width: actionPxSize + 'px',
height: actionPxSize + 'px', height: actionPxSize + 'px',
transform: `rotate(${actionAngle + targetActionAngle}deg)`, transform: `rotate(${actionAngle + targetActionAngle}deg)`,
transitionDuration: `${transitionDuration}s` transitionDuration: `${transitionDuration}s`
}" }" @click="handleActionStart"></image>
@click="handleActionStart"
></image>
</template> </template>
<!-- 正在绘制转盘时的提示文本 --> <!-- 正在绘制转盘时的提示文本 -->
@ -48,35 +34,30 @@
<text class="almost-lottery__measureText" :style="{ fontSize: higtFontSize + 'px' }">{{ measureText }}</text> <text class="almost-lottery__measureText" :style="{ fontSize: higtFontSize + 'px' }">{{ measureText }}</text>
<!-- #ifdef MP-ALIPAY --> <!-- #ifdef MP-ALIPAY -->
<canvas <canvas :class="className" :id="canvasId" :width="higtCanvasSize" :height="higtCanvasSize" :style="{
:class="className"
:id="canvasId"
:width="higtCanvasSize"
:height="higtCanvasSize"
:style="{
width: higtCanvasSize + 'px', width: higtCanvasSize + 'px',
height: higtCanvasSize + 'px' height: higtCanvasSize + 'px'
}" }" />
/>
<!-- #endif --> <!-- #endif -->
<!-- #ifndef MP-ALIPAY --> <!-- #ifndef MP-ALIPAY -->
<canvas <canvas :class="className" :canvas-id="canvasId" :width="higtCanvasSize" :height="higtCanvasSize" :style="{
:class="className"
:canvas-id="canvasId"
:width="higtCanvasSize"
:height="higtCanvasSize"
:style="{
width: higtCanvasSize + 'px', width: higtCanvasSize + 'px',
height: higtCanvasSize + 'px' height: higtCanvasSize + 'px'
}" }" />
/>
<!-- #endif --> <!-- #endif -->
</view> </view>
</template> </template>
<script> <script>
const systemInfo = uni.getSystemInfoSync() const systemInfo = uni.getSystemInfoSync()
import { getStore, setStore, clearStore, clacTextLen, downloadFile, pathToBase64 } from '@/uni_modules/almost-lottery/utils/almost-utils.js' import {
getStore,
setStore,
clearStore,
clacTextLen,
downloadFile,
pathToBase64
} from '@/uni_modules/almost-lottery/utils/almost-utils.js'
export default { export default {
name: 'AlmostLottery', name: 'AlmostLottery',
props: { props: {
@ -771,7 +752,7 @@
} }
}, },
// 处理图片完成 // 处理图片完成
handlePrizeImgSuc (res) { handlePrizeImgSuc(res) {
uni.hideLoading() uni.hideLoading()
this.$emit('finish', { this.$emit('finish', {
ok: res.ok, ok: res.ok,
@ -802,7 +783,7 @@
return clacTextLen(value).realLen > maxLength ? value.slice(0, maxLength - 1) + '..' : value return clacTextLen(value).realLen > maxLength ? value.slice(0, maxLength - 1) + '..' : value
}, },
// 检查本地缓存中是否存在转盘图 // 检查本地缓存中是否存在转盘图
checkCacheImg () { checkCacheImg() {
console.log('检查本地缓存中是否存在转盘图') console.log('检查本地缓存中是否存在转盘图')
// 检查是否已有缓存的转盘图 // 检查是否已有缓存的转盘图
// 检查是否与本次奖品数据相同 // 检查是否与本次奖品数据相同
@ -828,7 +809,7 @@
this.initCanvasDraw() this.initCanvasDraw()
}, },
// 初始化绘制 // 初始化绘制
initCanvasDraw () { initCanvasDraw() {
console.log('开始初始化转盘绘制') console.log('开始初始化转盘绘制')
this.isCacheImg = false this.isCacheImg = false
this.lotteryImg = '' this.lotteryImg = ''
@ -837,28 +818,32 @@
this.onCreateCanvas() this.onCreateCanvas()
}, },
// 预处理初始化 // 预处理初始化
async beforeInit () { async beforeInit() {
// 处理 rpx 自适应尺寸 // 处理 rpx 自适应尺寸
let lotterySize = await new Promise((resolve) => { let lotterySize = await new Promise((resolve) => {
uni.createSelectorQuery().in(this).select('.almost-lottery__wrap').boundingClientRect((rects) => { uni.createSelectorQuery().in(this).select('.almost-lottery__wrap').boundingClientRect((
rects) => {
resolve(rects) resolve(rects)
// console.log('处理 lottery rpx 的自适应', rects) // console.log('处理 lottery rpx 的自适应', rects)
}).exec() }).exec()
}) })
let actionSize = await new Promise((resolve) => { let actionSize = await new Promise((resolve) => {
uni.createSelectorQuery().in(this).select('.lottery-action').boundingClientRect((rects) => { uni.createSelectorQuery().in(this).select('.lottery-action').boundingClientRect((
rects) => {
resolve(rects) resolve(rects)
// console.log('处理 action rpx 的自适应', rects) // console.log('处理 action rpx 的自适应', rects)
}).exec() }).exec()
}) })
let strMarginSize = await new Promise((resolve) => { let strMarginSize = await new Promise((resolve) => {
uni.createSelectorQuery().in(this).select('.str-margin-outside').boundingClientRect((rects) => { uni.createSelectorQuery().in(this).select('.str-margin-outside').boundingClientRect((
rects) => {
resolve(rects) resolve(rects)
// console.log('处理 str-margin-outside rpx 的自适应', rects) // console.log('处理 str-margin-outside rpx 的自适应', rects)
}).exec() }).exec()
}) })
let imgMarginStr = await new Promise((resolve) => { let imgMarginStr = await new Promise((resolve) => {
uni.createSelectorQuery().in(this).select('.img-margin-str').boundingClientRect((rects) => { uni.createSelectorQuery().in(this).select('.img-margin-str').boundingClientRect((
rects) => {
resolve(rects) resolve(rects)
// console.log('处理 img-margin-str rpx 的自适应', rects) // console.log('处理 img-margin-str rpx 的自适应', rects)
}).exec() }).exec()
@ -916,6 +901,7 @@
position: relative; position: relative;
// background-color: red; // background-color: red;
} }
.lottery-action, .lottery-action,
.str-margin-outside, .str-margin-outside,
.img-margin-str, .img-margin-str,

Write Preview
Loading…
Cancel
Save