xiaoy
/
h5-shangjinyaojiang
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
main
xy 3 years ago
parent c6f41313c8
commit 8806e7ebe3
13 changed files with 549 additions and 95 deletions
Show Stats Download Patch File Download Diff File

24
App.vue
Unescape View File

@ -2,6 +2,30 @@
export default {
onLaunch: function() {
console.log('App Launch')
let link = window.location.href;
if (/code=/.test(link) || link.indexOf("code") > -1) {
let temp = decodeURIComponent((new RegExp('[?|&]' + 'code' + '=' + '([^&;]+?)(&|#|;|$)').exec(link) ||
[, ''])[1].replace(/\+/g, '%20')) || null
let lifeData = uni.getStorageSync('lifeData')
if (!lifeData.vuex_token || !lifeData.vuex_userId) {
this.$u.api.login({
code: temp
}).then(res => {
uni.setStorageSync('lifeData', {
vuex_token: res.token,
vuex_userId: res.user_id
})
this.$u.vuex('vuex_token', res.token)
this.$u.vuex('vuex_userId', res.user_id)
})
}
} else {
this.$u.api.getAppId().then(res => {
let redirect = encodeURIComponent(link.replace(/#\//, ""))
window.location.href =
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${res.appid}&redirect_uri=${redirect}&response_type=code&scope=snsapi_base#wechat_redirect`
})
}
},
onShow: function() {
console.log('App Show')

8
common/config.js
Unescape View File

@ -1,17 +1,17 @@
const mode = 'devOnline'; //devLocal：本地测试、devOnline：线上测试、production：生产环境
const mode = 'devLocal'; //devLocal：本地测试、devOnline：线上测试、production：生产环境
let ROOTPATH = ''; //域名
switch (mode) {
case 'devLocal':
ROOTPATH = "http://192.168.2.5:61111"
ROOTPATH = "http://h5.ali251.langye.net"
break;
case 'devOnline':
ROOTPATH = "https://xxxxx.cn"
break;
case 'production':
ROOTPATH = "https://xxxxx.cn"
ROOTPATH = "http://h5.ali251.langye.net"
break;
default:
throw new Error('未配置环境');
console.log(`未配置环境`);
}
export { ROOTPATH }
export { ROOTPATH }

28
common/http.api.js
Unescape View File

@ -1,23 +1,31 @@
//api集合
let apiApp = {
login: '/api/login',
getInfo: '/777/777/index',
}
let apiHome = {
hotSearchUrl: '/777/77/hot_search'
login: '/api/mobile/user/wechat-login',
getAppId: '/api/mobile/user/wechat-login-url',
sendSms: '/api/mobile/user/send-sms',
getPrize: '/api/mobile/draw/get-prize',
draw: '/api/mobile/draw/draw',
endTask: '/api/mobile/draw/end-task',
mobileCheck: '/api/mobile/draw/mobile-check',
bindMobile: '/api/mobile/user/bind-mobile'
}
// 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作
const install = (Vue, vm) => {
//api方法
let getSearch = (params = {}) => vm.$u.get(apiHome.hotSearchUrl, params);
let getInfo = (params={}) => vm.$u.post(apiApp.getInfo, params);
let login = (params = {}) => vm.$u.get(apiApp.login, params);
let getPrize = (params = {}) => vm.$u.get(apiApp.getPrize, params);
let getAppId = (params = {}) => vm.$u.get(apiApp.getAppId, params);
let draw = (params = {}) => vm.$u.get(apiApp.draw, params);
let endTask = (params = {}) => vm.$u.get(apiApp.endTask, params);
let mobileCheck = (params = {}) => vm.$u.get(apiApp.mobileCheck, params);
let sendSms = (params = {}) => vm.$u.get(apiApp.sendSms, params);
let bindMobile = (params = {}) => vm.$u.get(apiApp.bindMobile, params);
// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
vm.$u.api = {getSearch, getInfo};
vm.$u.api = { login, getPrize, draw, endTask, mobileCheck, getAppId, sendSms, bindMobile };
}
export default {
install
}
}

67
common/http.interceptor.js
Unescape View File

@ -11,7 +11,7 @@ const install = (Vue, vm) => {
loadingMask: true, // 展示loading的时候，是否给一个透明的蒙层，防止触摸穿透
loadingText: '加载中', // 请求loading中的文字提示
loadingTime: 800,
originalData: false, // 是否在拦截器中返回服务端的原始数据
originalData: true, // 是否在拦截器中返回服务端的原始数据
// 设置自定义头部content-type
header: {
'content-type': 'application/json;charset=UTF-8'
@ -21,49 +21,44 @@ const install = (Vue, vm) => {
// 请求拦截部分，如配置，每次请求前都会执行
Vue.prototype.$u.http.interceptor.request = (config) => {
console.log('config-http', config)
// 引用token
// 方式一，存放在vuex的token，假设使用了uView封装的vuex方式
// 见：https://uviewui.com/components/globalVariable.html
config.header.token = vm.vuex_token;
config.data.activity_tag = 'turntable_draw'
// 方式二，如果没有使用uView封装的vuex方法，那么需要使用$store.state获取
// config.header.token = vm.$store.state.token;
// 方式三，如果token放在了globalData，通过getApp().globalData获取
// config.header.token = getApp().globalData.username;
// 方式四，如果token放在了Storage本地存储中，拦截是每次请求都执行的
// 所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值
// const token = uni.getStorageSync('token');
// config.header.token = token;
let lifeData = uni.getStorageSync('lifeData')
let vuex_token = lifeData.vuex_token;
if (vuex_token || vm.vuex_token) {
config.header['Authorization'] = `Bearer ${vuex_token || vm.vuex_token}`;
}
// 可以对某个url进行特别处理，此url参数为this.$u.get(url)中的url值
if (config.url == '/test/jam') config.header.noToken = true;
// 最后需要将config进行return
return config;
// 如果return一个false值，则会取消本次请求
// if(config.url == '/user/rest') return false; // 取消某次请求
}
// 响应拦截，如配置，每次请求结束都会执行本方法
Vue.prototype.$u.http.interceptor.response = (res) => {
console.log('res-http',res)
if (res.code == 200) {
// res为服务端返回值，可能有code，result等字段
// 这里对res.result进行返回，将会在this.$u.post(url).then(res => {})的then回调中的res的到
// 如果配置了originalData为true，请留意这里的返回值
return res.result;
} else if (res.code == 201) {
// 假设201为token失效，这里跳转登录
// vm.$u.toast('验证失败，请重新登录');
// setTimeout(() => {
// // 此为uView的方法，详见路由相关文档
// vm.$u.route('/pages/user/login')
// }, 1500)
return false;
console.log('res-http', res)
if (res.statusCode === 200) {
if (res.data.hasOwnProperty("errcode")) {
uni.showToast({
icon: "none",
title: res?.data?.errmsg
})
if (res.data?.errcode === 40001) {
setTimeout(() => {
let origin = window.location.origin;
let pathname = window.location.pathname;
window.location.href = origin + pathname;
}, 1500)
}
return false;
} else {
return res.data;
}
} else {
// 如果返回false，则会调用Promise的reject回调，
// 并将进入this.$u.post(url).then().catch(res=>{})的catch回调中，res为服务端的返回值
uni.showToast({
icon: "fail",
title: res.statusCode
})
return false;
}
}

18
component/popover/index.vue
Unescape View File

@ -28,6 +28,10 @@
</view>
</view>
</view>
<view class="content-bottom">
<slot name="content-bottom"></slot>
</view>
</u-popup>
</view>
</template>
@ -69,8 +73,6 @@ export default {
<style lang="scss">
.content {
background: transparent;
//width: 698rpx;
//height: 1024rpx;
position: relative;
@ -89,6 +91,8 @@ export default {
border-radius: 66rpx;
z-index: 2;
padding-top: 106rpx;
padding-bottom: 100rpx;
position: relative;
left: 20rpx;
top: 104rpx;
@ -149,13 +153,21 @@ export default {
left: 2rpx;
}
&-text {
max-height: 46vh;
overflow: scroll;
z-index: 3;
position: relative;
padding: 0 32rpx 122rpx 32rpx;
margin: 0 32rpx 0rpx 32rpx;
}
}
}
.content-bottom {
z-index: 2;
position: relative;
top: 118rpx;
}
.bkg {
position: absolute;

1
lib/moment.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
main.js
Unescape View File

@ -25,4 +25,8 @@ Vue.use(httpInterceptor, app)
import httpApi from '@/common/http.api.js'
Vue.use(httpApi, app)
//moment.js
import moment from '@/lib/moment.min.js'
Vue.prototype.$moment = moment;
app.$mount()

2
pages.json
Unescape View File

@ -30,7 +30,7 @@
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarTitleText": "赏金摇奖",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}

78
pages/index/index.vue
Unescape View File

@ -1,7 +1,7 @@
<template>
<view>
<view class="icon">
<u-image mode="widthFix" width="114rpx" :src="require('@/static/activity-rule.png')" @click="$refs['popover'].show()"></u-image>
<u-image mode="widthFix" width="114rpx" :src="require('@/static/activity-rule.png')" @click="popoverType = 1,$refs['popover'].show()"></u-image>
<u-image style="margin-top: 28rpx;" mode="widthFix" width="114rpx" :src="require('@/static/me-center.png')" @click="toMe"></u-image>
</view>
<view class="bkg">
@ -18,7 +18,7 @@
</view>
<view class="notice">
恭喜192****1774获得1.99元红包
<u-notice-bar :speed="80" color="#fff" bg-color="transparent" :volume-icon="false" :more-icon="false" :list="notices"></u-notice-bar>
</view>
<view class="present">
@ -39,12 +39,14 @@
<span>192</span>
<u-input placeholder-style="color:#969696" :custom-style="{ 'margin-left': '8rpx','color': '#969696' }" placeholder="请填写手机后8位"></u-input>
<u-input v-model="inputMobile" placeholder-style="color:#969696" :custom-style="{ 'margin-left': '8rpx','color': '#333333' }" placeholder="请填写手机后8位"></u-input>
</view>
<view class="login-validate">
<u-input placeholder-style="color:#969696" :custom-style="{ 'color': '#969696' }"></u-input>
<u-button :disabled="true" :ripple="true" :hair-line="false" :custom-style="{ 'height': '100%','background': '#969696','color': '#fff' }" shape="circle">发送验证码</u-button>
<u-input v-model="code" placeholder-style="color:#969696" :custom-style="{ 'color': '#333333' }" @input="$u.debounce(bindMobile, 1000)"></u-input>
<u-verification-code :keep-running="true" :seconds="60" ref="uCode" start-text="发送验证码"
@change="t => tips = t"></u-verification-code>
<u-button :ripple="true" :hair-line="false" :custom-style="{ 'height': '100%','background': '#969696','color': '#fff' }" shape="circle" @click="sendCode">{{ tips }}</u-button>
</view>
<view class="login-tip">
@ -76,7 +78,12 @@
<view v-if="popoverType === 2">
<view class="box-text__title">验证失败</view>
<u-button shape="circle" :ripple="true" :hair-line="false" :custom-style="{ 'background': '#FED45F','color': '#fff','width': '374rpx','height': '84rpx' }">重新验证</u-button>
<u-button shape="circle" :ripple="true" :hair-line="false" :custom-style="{ 'background': '#FED45F','color': '#fff','width': '374rpx','height': '84rpx' }" @click="code = '',$refs['popover'].hidden()">重新验证</u-button>
</view>
<view v-if="popoverType === 3">
<view class="box-text__title">验证成功</view>
<u-button shape="circle" :ripple="true" :hair-line="false" :custom-style="{ 'background': '#FED45F','color': '#fff','width': '374rpx','height': '84rpx' }" @click="toRaffle">去抽奖</u-button>
</view>
</view>
</popover>
@ -92,16 +99,70 @@ import popover from "@/component/popover/index.vue";
},
data() {
return {
popoverType: 1,//1为规则，2为验证失败
tips: '',
popoverType: 1,//1为规则，2为验证失败，3验证通过
inputMobile: '',
code: '',
notices: []
}
},
onLoad() {
this.getNotices()
},
methods: {
toRaffle() {
uni.navigateTo({
url: '/pages/raffle/raffle'
})
},
toMe() {
uni.navigateTo({
url: '/pages/me/index'
})
},
async getNotices() {
const res = await this.$u.api.getPrize()
this.notices = res.draw_log_day?.map(i => `恭喜${i.mobile.slice(0,3)}****${i.mobile.slice(-4)}获得${i.draw_prize ? i.draw_prize.name : ''}`)
},
sendCode() {
if(!/^1[3-9]\d{9}$/.test(`192${this.inputMobile}`)) {
uni.showToast({
icon: 'none',
title: '手机号不正确'
})
} else {
if(this.$refs.uCode.canGetCode) {
this.$refs.uCode.start()
this.$u.api.sendSms({
tempate_key: 'sms_code_template',
mobile: `192${this.inputMobile}`
}).then(res => {
uni.showToast({
icon: 'none',
title: res.msg
})
})
} else {
this.$u.toast('倒计时结束后再发送');
}
}
},
bindMobile() {
if(this.code) {
this.$u.api.bindMobile({
mobile: `192${this.inputMobile}`,
code: this.code
}).then(res => {
this.popoverType = 3;
this.$refs['popover'].show();
}).catch(err => {
this.popoverType = 2;
this.$refs['popover'].show();
})
}
}
},
computed: {
@ -111,6 +172,8 @@ import popover from "@/component/popover/index.vue";
return 'smile';
case 2:
return 'frown';
case 3:
return 'laugh';
}
}
}
@ -258,7 +321,6 @@ import popover from "@/component/popover/index.vue";
color: #333333;
text-align: center;
padding-top: 104rpx;
padding-bottom: 56rpx;
}

71
pages/me/index.vue
Unescape View File

@ -15,24 +15,24 @@
<view class="info-detail">
<view class="info-detail__name">
一条鱼
{{ userInfo.name ? userInfo.name : (userInfo.mobile ? `${userInfo.mobile.slice(0,3)}****${userInfo.mobile.slice(-4)}` : '') }}
</view>
<view class="info-detail__phone">
<view class="icon">
<u-icon mode="widthFix" :width="28" :height="24" name="/static/crown.png"></u-icon>
</view>
<view class="text">192****1234</view>
<view class="text">{{ userInfo.mobile ? `${userInfo.mobile.slice(0,3)}****${userInfo.mobile.slice(-4)}` : '' }}</view>
</view>
</view>
</view>
<view class="label">
<view class="label-item">
<view class="label-item__num">12</view>
<view class="label-item__num">{{ userInfo.total_draw || 0 }}</view>
<view class="label-item__text">抽奖次数</view>
</view>
<view class="label-item">
<view class="label-item__num">3</view>
<view class="label-item__num">{{ userInfo.total_draw_win || 0 }}</view>
<view class="label-item__text">中奖次数</view>
</view>
</view>
@ -45,13 +45,13 @@
</view>
<view class="record-list">
<view class="record-list__item" v-for="i in 4">
<view class="record-list__item" v-for="i in draws">
<view class="left">
<view class="left__title">19.2元红包</view>
<view class="left__date">2023-5-30</view>
<view class="left__title">{{ i.draw_prize ? i.draw_prize.name : '' }}</view>
<view class="left__date">{{ i.draw_prize ? $moment(i.draw_prize.created_at).format('YYYY-MM-DD') : '' }}</view>
</view>
<view class="right">
<u-button :ripple="true" shape="circle" :hair-line="false" :custom-style="btnStyle">已到账</u-button>
<u-button :ripple="true" shape="circle" :hair-line="false" :custom-style="btnStyle(i.is_send)">{{ btnText(i.is_send) }}</u-button>
</view>
</view>
</view>
@ -63,18 +63,57 @@
export default {
data() {
return {
userInfo: {},
draws: [],
btnStyle: {
background: '#FB5F4C',
color: '#fff',
fontSize: '28rpx',
width: '166rpx',
height: '56rpx'
}
},
methods: {
async getInfo () {
const res = await this.$u.api.getPrize()
this.userInfo = res.user
this.draws = res.prize
console.log(res)
}
},
computed: {
btnStyle() {
return function (is_send) {
switch (is_send) {
case 1:
return {
background: '#FB5F4C',
color: '#fff',
fontSize: '28rpx',
width: '166rpx',
height: '56rpx'
};
case 0:
return {
background: '#FFD553',
color: '#fff',
fontSize: '28rpx',
width: '166rpx',
height: '56rpx'
}
}
}
},
btnText() {
return function (is_send) {
switch (is_send) {
case 1:
return "已到账";
case 0:
return "待领取";
}
}
}
},
methods: {},
computed: {},
onShow() {
this.getInfo()
}
}
</script>

338
pages/raffle/raffle.vue
Unescape View File

@ -10,7 +10,7 @@
</view>
<view class="notice">
恭喜192****1774获得1.99元红包
<u-notice-bar :speed="80" color="#fff" bg-color="transparent" :volume-icon="false" :more-icon="false" :list="notices"></u-notice-bar>
</view>
<view class="raffle">
@ -24,23 +24,25 @@
</view>
<view class="raffle-box__times">
剩余抽奖次数：<span>{{ '1次' }}</span>
剩余抽奖次数：<span>{{ usrInfo.score || 0 }}次</span>
</view>
<view class="raffle-box__turntable">
<view v-for="(item,index) in 9" class="raffle-box__turntable--item" :style="{ 'grid-area': index === 4 ? 'center' : 'shop'+(index+1) }">
<view v-if="index === 4" class="center-btn">
<view></view>
</view>
<view class="item-shop" v-else>
<view class="item-shop__box">
<view v-for="(item,index) in prizeList" class="raffle-box__turntable--item" :style="{ 'grid-area': 'shop'+(index+1) }">
<view class="item-shop">
<view class="item-shop__box" :style="{ 'background': index === flag ? '#eb5036' : '' }">
<view class="item-shop__box--img">
<u-image mode="heightFix" height="84rpx" :src="require('@/static/laugh.png')"></u-image>
<u-image bg-color="transparent" mode="heightFix" height="84rpx" :src="item.image_file ? item.image_file.url : ''"></u-image>
</view>
<view class="item-shop__box--text">谢谢参与</view>
<view class="item-shop__box--text" :style="{ 'color': index === flag ? '#fff' : '' }">{{ item.name }}</view>
</view>
</view>
</view>
<view class="raffle-box__turntable--item" :style="{ 'grid-area': 'center' }">
<view class="center-btn" @click="$u.throttle(draw)">
<view></view>
</view>
</view>
</view>
<view class="raffle-box__tip">
@ -50,25 +52,195 @@
</view>
<view class="bottom">
<u-image mode="widthFix" width="114rpx" :src="require('@/static/activity-rule.png')" @click="$refs['popover'].show()"></u-image>
<u-image mode="widthFix" width="114rpx" :src="require('@/static/activity-rule.png')" @click="popoverType = 1,$refs['popover'].show()"></u-image>
<u-image style="margin-left: 66rpx;" mode="widthFix" width="114rpx" :src="require('@/static/me-center.png')" @click="toMe"></u-image>
</view>
</view>
<popover :icon="getIcon" height="1128rpx" ref="popover">
<view slot="box-content">
<view v-if="popoverType === 1">
<view class="box-text__title">活动规则</view>
<view class="box-text__top">
一、 参与方式及参与对象
</view>
<view class="box-text__content">
本次活动奖品数量有限，仅限中国广电（苏州地区用户）手机号参与活动，输入其他手机号均无效。
</view>
<view class="box-text__top">
二、 活动规则
</view>
<view class="box-text__content">
1. 活动期间，每个号码每日可有三次抽奖机会 2. 分享活动页面可增加一次机会。关注江苏有线苏州分公司公众号或视频号可增加一次机会。下载“视界观”App可增加一次机会。 3. 每个手机号每天最多6次抽奖机会。 4. 实物奖品会在活动结束后3个工作日内，根据您参与活动的中奖号码与您联系并安排派奖，联系未果视为主动放弃奖品。
</view>
</view>
<view v-if="popoverType === 2">
<view class="box-text__title">谢谢参与</view>
<u-button shape="circle" :ripple="true" :hair-line="false" :custom-style="{ 'background': '#FED45F','color': '#fff','width': '374rpx','height': '84rpx','margin-top': '56rpx' }" @click="$refs['popover'].hidden(),draw()">再来一次</u-button>
</view>
<view v-if="popoverType === 3">
<view class="box-text__title">恭喜您获得{{ result.name }}</view>
<view class="box-text__subtitle">请至个人中心查看</view>
<view class="box-text__prize">
<u-image style="display: flex;justify-content: center;" mode="heightFix" :height="300" :src="result.image_file ? result.image_file.url : ''"></u-image>
</view>
<view class="box-text__tip">
型号请以实物为准
</view>
</view>
<view v-if="popoverType === 4">
<view class="box-text__title">抱歉</view>
<view class="box-text__subtitle">没有机会了</view>
<u-button shape="circle" :ripple="true" :hair-line="false" :custom-style="{ 'background': '#FED45F','color': '#fff','width': '374rpx','height': '84rpx','margin-top': '56rpx' }" @click="$refs['popover'].hidden(),popoverType = 5,$refs['popover'].show()">去做任务</u-button>
</view>
<view v-if="popoverType === 5">
<view class="box-text__title-5">做任务增加抽奖机会</view>
<view class="box-text__item-5" v-for="item in
[
{
v: '将活动分享给小伙伴',
b: '去分享'
},
{
v: '关注江苏有线苏州分公司公众号或视频号',
b: '去关注'
},
{
v: '下载“视界观”App',
b: '去下载'
}
]">
<view>{{ item.v }}</view>
<u-button :custom-style="{
background: '#FFD553',
color: '#fff',
fontSize: '28rpx',
width: '166rpx',
height: '56rpx'
}" shape="circle" :hair-line="false" :ripple="true" @click="toShare = true">{{ item.b }}</u-button>
</view>
</view>
</view>
<view slot="content-bottom" class="content-bottom" v-if="popoverType === 3">
<view class="content-bottom__title">奖品领取：</view>
<view class="content-bottom__text">实物奖品会在活动结束后3个工作日内，根据您参与
活动的中奖号码与您联系并安排派奖，联系未果视
为主动放奔奖品。苏州地区用户） 手机息参与活动
礼品兑换成功后，概不退换。到对应地点领取，逾期视为自动放弃。</view>
</view>
</popover>
<transition name="share-pop" enter-active-class="fade-in" leave-to-class="fade-out">
<view class="share_cover" v-show="toShare" @click="toShare = false">
<image src="/static/share.png" class="share_cover_arrow"></image>
<view class="share_cover_word">
请点击右上角将它发送给指定朋友或分享到朋友圈
</view>
</view>
</transition>
</view>
</template>
<script>
import popover from "@/component/popover/index.vue";
export default {
components: {
popover
},
data() {
return {
toShare: false,
popoverType: 1,//1为规则，2为未中奖，3中奖，4没有机会，5做任务
flag: '',//当前奖品显示
prizeList: [],
usrInfo: {},
notices: [],
result: {},
}
},
onLoad() {
},
methods: {
toMe() {
uni.navigateTo({
url: '/pages/me/index'
})
},
easeOut(t) {
return 1 - Math.pow(1 - t, 3);
},
getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
async fetchRandomNumbers(count) {
for (let i = 0; i < count; i++) {
const t = this.easeOut(i / (count - 1));
const delay = t * 400;
await new Promise((resolve) => setTimeout(resolve, delay));
this.flag = this.getRandomNumber(0, this.prizeList.length - 1);
}
},
async getProducts() {
const res = await this.$u.api.getPrize()
let len = res.list.length
let arr = res.list
if(len < 8) {
const diff = 8 - len;
for (let i = 0; i < diff; i++) {
const randomIndex = Math.floor(Math.random() * len);
arr.push(arr[randomIndex]);
}
} else {
arr = arr.slice(0, 8);
}
this.prizeList = arr
this.usrInfo = res.user
this.notices = res.draw_log_day?.map(i => `恭喜${i.mobile.slice(0,3)}****${i.mobile.slice(-4)}获得${i.draw_prize ? i.draw_prize.name : ''}`)
},
async draw() {
try{
const res = await this.$u.api.draw()
console.log(111,res)
let resPrize = this.prizeList.find(i => i.id === res.id)
this.result = resPrize
await this.fetchRandomNumbers(25)
this.flag = this.prizeList.indexOf(resPrize);
if(resPrize.name === "谢谢参与") {
this.popoverType = 2
this.$refs['popover'].show();
} else {
this.popoverType = 3
this.$refs['popover'].show();
}
await this.getProducts();
}catch (err) {
this.popoverType = 4
this.$refs['popover'].show();
}
}
},
computed: {
getIcon() {
switch (this.popoverType) {
case 1: return 'smile';
case 2: return 'sad';
case 3: return 'laugh';
case 4: return 'sad';
case 5: return 'smile';
}
}
},
onShow() {
this.getProducts()
}
}
</script>
@ -149,8 +321,8 @@ export default {
grid-gap: 12rpx;
grid-template-areas:
"shop1 shop2 shop3"
"shop4 center shop6"
"shop7 shop8 shop9";
"shop4 center shop5"
"shop6 shop7 shop8";
margin-top: 40rpx;
padding: 0 70rpx;
@ -182,7 +354,6 @@ export default {
font-size: 24rpx;
font-weight: normal;
color: #E3473C;
line-height: 4rpx;
padding-top: 16rpx;
}
@ -245,4 +416,141 @@ export default {
}
}
.box-text {
&__title {
font-size: 36rpx;
font-weight: 500;
color: #333333;
text-align: center;
}
&__subtitle {
font-size: 30rpx;
font-weight: 400;
color: #545454;
text-align: center;
padding-bottom: 40rpx;
}
&__top {
color: rgba(51, 51, 51, 1);
font-size: 36rpx;
text-align: left;
padding: 20rpx 0;
}
&__content {
color: rgba(51, 51, 51, 1);
font-size: 26rpx;
text-align: left;
}
&__tip {
font-size: 26rpx;
font-weight: 400;
color: #9a9a9a;
text-align: center;
margin-top: 20rpx;
}
&__title-5 {
font-size: 30rpx;
font-weight: 400;
color: #9a9a9a;
text-align: left;
padding-bottom: 40rpx;
}
&__item-5 {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
& > view {
font-size: 32rpx;
font-weight: 400;
color: #333333;
flex: 1;
padding-right: 40rpx;
}
}
}
.content-bottom {
padding: 50rpx 60rpx;
&__title {
font-size: 36rpx;
color: #e5c592;
font-weight: 500;
text-shadow: 0 1rpx 0 #FCF4CA;
}
&__text {
color: #e5c592;
font-size: 28rpx;
font-weight: 400;
text-shadow: 0 1rpx 0 #FCF4CA;
}
}
.share_cover {
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100vw;
z-index: 100000;
.share_cover_word {
color: #FFFFFF;
font-size: 48rpx;
width: 60%;
margin: 400rpx auto;
text-align: center;
line-height: 40px;
}
.share_cover_arrow {
position: absolute;
right: 0;
top: 0;
width: 300rpx;
height: 400rpx;
}
}
.fade-in {
animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fade-out {
animation: fade-out .8s ease-out both;
}
@keyframes fade-out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>

BIN
static/share.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

5
store/index.js
Unescape View File

@ -12,7 +12,7 @@ try{
}
// 需要永久存储，且下次APP启动需要取出的，在state中的变量名
let saveStateKeys = ['vuex_user', 'vuex_token'];
let saveStateKeys = ['vuex_user', 'vuex_token','vuex_userId'];
// 保存变量到本地存储中
const saveLifeData = function(key, value){
@ -34,8 +34,9 @@ const store = new Vuex.Store({
// 加上vuex_前缀，是防止变量名冲突，也让人一目了然
vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {},
vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '',
vuex_userId: lifeData.vuex_userId ? lifeData.vuex_userId : '',
// 如果vuex_version无需保存到本地永久存储，无需lifeData.vuex_version方式
vuex_version: '1.0.1',
vuex_version: '1.0.0',
},
mutations: {
$uStore(state, payload) {

Write Preview
Loading…
Cancel
Save