294 lines
6.7 KiB
Vue
294 lines
6.7 KiB
Vue
<template>
|
|
<view class="redPackets">
|
|
<view class="redPackets-box" @tap="getAuthCode()" v-show="!isOpen">
|
|
<view class="top-box">
|
|
<text class="title">{{ info.batch_goods_name }}</text>
|
|
<text class="type">
|
|
{{ info.cash_amount_type_text }}
|
|
</text>
|
|
</view>
|
|
<text class="time">红包有效期截止 {{ info.end_time }}</text>
|
|
</view>
|
|
|
|
<view class="open-redPackets-box" v-show="isOpen">
|
|
<view class="open-top-box">
|
|
<view class="open-title">
|
|
<text class="open-tag">￥</text>
|
|
{{ info.receive_price }}
|
|
</view>
|
|
<text class="open-type">
|
|
{{ info.wishing }}
|
|
</text>
|
|
</view>
|
|
<view class="open-notis" v-if="info.receive_status === 5">
|
|
<view class="re"> 领取成功 </view>
|
|
请前往微信【我的 - 服务 - 钱包 - 账单】中查看
|
|
</view>
|
|
<view class="open-notis" v-else>
|
|
<view class="re res"> 已被领取 </view>
|
|
</view>
|
|
</view>
|
|
<noticeBox :notice="notice" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getInfo, receiveRed, upgrade } from "@/api/index.js"
|
|
import noticeBox from "@/components/notice.vue"
|
|
import { decode } from "@/utils/base64.js"
|
|
export default {
|
|
components: {
|
|
noticeBox
|
|
},
|
|
data() {
|
|
return {
|
|
isOpen: false,
|
|
order_number: "",
|
|
info: {
|
|
batch_goods_name: "现金红包",
|
|
cash_amount_type_text: "固额红包",
|
|
end_time: "2023-06-30 23:59:59",
|
|
receive_price: 0.01,
|
|
receive_status: 0,
|
|
wishing: "恭喜发财"
|
|
},
|
|
auth_code: "",
|
|
notice: null
|
|
}
|
|
},
|
|
async onShow() {
|
|
/* 判断是否升级 */
|
|
const res = await upgrade()
|
|
if (res.data.update) {
|
|
return (this.notice = res.data.msg)
|
|
}
|
|
|
|
let option = uni.getEnterOptionsSync().query /*小程序热启用和冷启用取参*/
|
|
/* 直接通过小程序打开，判断是否有 order_number */
|
|
if (option && option.order_number) {
|
|
this.order_number = decode(option.order_number)
|
|
} else {
|
|
const value = uni.getStorageSync("order_number")
|
|
value && (this.order_number = value)
|
|
}
|
|
this.getRedInfo()
|
|
},
|
|
|
|
methods: {
|
|
/* 授权 */
|
|
getAuthCode() {
|
|
const _this = this
|
|
uni.login({
|
|
provider: "weixin",
|
|
success(data) {
|
|
_this.auth_code = data.code
|
|
_this.receive()
|
|
}
|
|
})
|
|
},
|
|
|
|
//请求详情
|
|
getRedInfo() {
|
|
if (!this.order_number) return
|
|
uni.showLoading({
|
|
mask: true,
|
|
title: "加载中"
|
|
})
|
|
getInfo({
|
|
order_number: this.order_number
|
|
}).then(({ code, data, message }) => {
|
|
if (code == 200) {
|
|
uni.setStorageSync("order_number", this.order_number)
|
|
uni.hideLoading()
|
|
this.info = data
|
|
/*0 未领取 1 2 领取成功 3领取失败 */
|
|
if ([1, 2].includes(data.receive_status)) {
|
|
this.isOpen = true
|
|
}
|
|
if (data.receive_status === 3) {
|
|
uni.showModal({
|
|
title: "温馨提示",
|
|
showCancel: false,
|
|
content: message
|
|
})
|
|
}
|
|
} else {
|
|
uni.showModal({
|
|
title: "温馨提示",
|
|
showCancel: false,
|
|
content: message
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
/* 领取红包 */
|
|
receive() {
|
|
if (this.order_number && this.info.receive_status === 0) {
|
|
uni.showLoading({
|
|
mask: true,
|
|
title: "加载中"
|
|
})
|
|
receiveRed({
|
|
order_number: this.order_number,
|
|
auth_code: this.auth_code
|
|
}).then(({ code, message }) => {
|
|
uni.hideLoading()
|
|
if (code === 200) {
|
|
this.info.receive_status = 5
|
|
this.isOpen = true
|
|
uni.showModal({
|
|
title: "温馨提示",
|
|
showCancel: false,
|
|
content: message
|
|
})
|
|
} else {
|
|
uni.showModal({
|
|
title: "温馨提示",
|
|
showCancel: false,
|
|
content: message
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
this.isOpen = true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.redPackets {
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 50rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: url("https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/redPackets_bg.png")
|
|
no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.res {
|
|
font-size: 40rpx !important;
|
|
}
|
|
|
|
.redPackets-box {
|
|
height: 740rpx;
|
|
width: 532rpx;
|
|
background-image: url("https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/notOpen.png");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
padding-top: 190rpx;
|
|
padding-bottom: 50rpx;
|
|
margin-top: -120rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
/* border: 1rpx solid; */
|
|
}
|
|
|
|
.top-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.title {
|
|
font-size: 46rpx;
|
|
color: rgb(254, 244, 217);
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
text-shadow: 0.1rpx 0.1rpx rgb(255, 249, 232);
|
|
}
|
|
|
|
.type {
|
|
display: block;
|
|
padding: 10rpx 46rpx;
|
|
border: 1rpx solid rgb(254, 244, 217);
|
|
transform: rotateZ(360deg);
|
|
border-radius: 50rpx;
|
|
font-size: 22rpx;
|
|
margin-top: 24rpx;
|
|
color: rgb(254, 244, 217);
|
|
}
|
|
|
|
.time {
|
|
display: inline-block;
|
|
font-size: 22rpx;
|
|
color: rgb(249, 181, 134);
|
|
}
|
|
|
|
/* */
|
|
.open-redPackets-box {
|
|
height: 800rpx;
|
|
width: 580rpx;
|
|
background-image: url("https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/redPacktes/open.png");
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
padding-top: 165rpx;
|
|
padding-bottom: 110rpx;
|
|
margin-top: -75rpx;
|
|
margin-left: -46rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
/* border: 1rpx solid; */
|
|
}
|
|
|
|
.open-top-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-left: 35rpx;
|
|
}
|
|
|
|
.open-title {
|
|
font-size: 90rpx;
|
|
color: rgb(245, 72, 54);
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
text-shadow: 0.1rpx 0.1rpx rgb(255, 249, 232);
|
|
}
|
|
|
|
.open-tag {
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.open-type {
|
|
display: inline-block;
|
|
font-size: 20rpx;
|
|
color: rgb(245, 72, 54);
|
|
width: 400rpx;
|
|
text-align: center;
|
|
margin-top: 10rpx;
|
|
/* 这里是超出几行省略 */
|
|
}
|
|
|
|
.open-time {
|
|
display: inline-block;
|
|
font-size: 22rpx;
|
|
color: rgb(249, 181, 134);
|
|
}
|
|
|
|
.open-notis {
|
|
color: rgb(254, 244, 217);
|
|
font-size: 22rpx;
|
|
margin-left: 35rpx;
|
|
margin-bottom: 70rpx;
|
|
}
|
|
|
|
.re {
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
</style>
|