Fix(订单):[#5293]待付款的活动商品，点击立即付款并付款后，页面未出现已获得抽奖码的弹窗
This commit is contained in:
lifizer
@@ -8231,3 +8231,191 @@ rich-text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.draw-ticket-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.draw-ticket-popup {
|
||||
width: 100%;
|
||||
max-width: 640rpx;
|
||||
background: #fff;
|
||||
border-radius: 40rpx;
|
||||
padding: 50rpx 40rpx 60rpx;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
.draw-ticket-close {
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
right: 30rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border: 4rpx solid #333;
|
||||
border-radius: 50%;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.draw-ticket-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.ticket-icon-box {
|
||||
width: 100rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 10rpx;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ticket-icon-check {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.draw-ticket-title {
|
||||
font-size: 56rpx;
|
||||
color: #222;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
margin-top: 24rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.ticket-card-container {
|
||||
margin-top: 50rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ticket-badge {
|
||||
background-color: #fff9eb;
|
||||
border: 6rpx solid #111;
|
||||
border-radius: 40rpx;
|
||||
padding: 12rpx 40rpx;
|
||||
font-size: 46rpx;
|
||||
font-weight: 800;
|
||||
color: #222;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-bottom: -36rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.ticket-badge-arrow {
|
||||
position: absolute;
|
||||
bottom: -22rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 22rpx solid transparent;
|
||||
border-right: 22rpx solid transparent;
|
||||
border-top: 22rpx solid #111;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -26rpx;
|
||||
left: -16rpx;
|
||||
border-left: 16rpx solid transparent;
|
||||
border-right: 16rpx solid transparent;
|
||||
border-top: 16rpx solid #fff9eb;
|
||||
}
|
||||
}
|
||||
|
||||
.ticket-card {
|
||||
width: 100%;
|
||||
background: #c23326;
|
||||
border-radius: 36rpx;
|
||||
padding: 70rpx 36rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ticket-card-subtitle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ticket-card-subtitle-text {
|
||||
color: #fff;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
border: 2rpx solid #fff;
|
||||
border-radius: 40rpx;
|
||||
padding: 8rpx 50rpx;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.ticket-card-code-box {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
margin-top: 36rpx;
|
||||
padding: 36rpx 0;
|
||||
}
|
||||
|
||||
.ticket-card-code {
|
||||
color: #c23326;
|
||||
font-size: 72rpx;
|
||||
font-weight: 800;
|
||||
letter-spacing: 8rpx;
|
||||
}
|
||||
|
||||
.ticket-card-time {
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
margin-top: 36rpx;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.draw-ticket-actions {
|
||||
margin-top: 60rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
height: 86rpx;
|
||||
border-radius: 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
|
||||
&.home-btn {
|
||||
color: #c23326;
|
||||
border: 2rpx solid #c23326;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
color: #fff;
|
||||
background: #c23326;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
import { getDrawTicketByOrder } from '@/api/lottery'
|
||||
export const orderPaySuccessToCheckDrawStatus = {
|
||||
data(){
|
||||
return {
|
||||
drawTicketPopup: {
|
||||
show: false,
|
||||
ticketCode: '',
|
||||
drawTime: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setDrawTicketPopupFromQuery(ticketData = '') {
|
||||
const drawTicketData = ticketData || this.$yroute.query.drawTicketData
|
||||
if (!drawTicketData) {
|
||||
return
|
||||
}
|
||||
let result = {}
|
||||
try {
|
||||
result = typeof drawTicketData === 'string' ? JSON.parse(decodeURIComponent(drawTicketData)) : drawTicketData
|
||||
console.log(result)
|
||||
} catch (e) {
|
||||
result = {}
|
||||
}
|
||||
const hasTicket = Number(result.hasTicket || 0) === 1
|
||||
const howPopup = Number(result.showPopup || 0) === 1
|
||||
if (!hasTicket || !howPopup) {
|
||||
return
|
||||
}
|
||||
this.drawTicketPopup = {
|
||||
show: true,
|
||||
ticketCode: result.ticketCode || result.code || '',
|
||||
drawTime: result.drawTime || ''
|
||||
}
|
||||
},
|
||||
closeDrawTicketPopup() {
|
||||
this.drawTicketPopup.show = false
|
||||
},
|
||||
goHomeFromPopup() {
|
||||
this.drawTicketPopup.show = false
|
||||
uni.switchTab({
|
||||
url: '/pages/home/index'
|
||||
})
|
||||
},
|
||||
goTicketsFromPopup() {
|
||||
this.drawTicketPopup.show = false
|
||||
uni.navigateTo({
|
||||
url: '/pkg-video/views/county-my-tickets'
|
||||
})
|
||||
},
|
||||
buildOrderDetailQuery(orderId, drawTicketResult = {}) {
|
||||
return {
|
||||
id: orderId,
|
||||
drawTicketData: encodeURIComponent(JSON.stringify(drawTicketResult || {}))
|
||||
}
|
||||
},
|
||||
async afterPaySuccess(orderId, fallback) {
|
||||
if (!orderId) {
|
||||
fallback && fallback()
|
||||
return
|
||||
}
|
||||
try {
|
||||
const res = await getDrawTicketByOrder(orderId)
|
||||
const result = (res && res.data) || {}
|
||||
fallback && fallback(result)
|
||||
return
|
||||
} catch (e) {
|
||||
}
|
||||
fallback && fallback({})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -602,6 +602,40 @@
|
||||
@update:show="showDatePicker = false"
|
||||
@input="handleDateSelected"
|
||||
></DateRangePicker>
|
||||
<view
|
||||
v-if="drawTicketPopup.show"
|
||||
class="draw-ticket-mask"
|
||||
@touchmove.stop.prevent
|
||||
>
|
||||
<view class="draw-ticket-popup">
|
||||
<view class="draw-ticket-close" @click="closeDrawTicketPopup">×</view>
|
||||
<view class="draw-ticket-icon">
|
||||
<view class="ticket-icon-box">
|
||||
<image class="ticket-icon-check" :src="webUrl + '/home/gongxi.png'" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="draw-ticket-title">支付成功</view>
|
||||
<view class="ticket-card-container">
|
||||
<view class="ticket-badge">
|
||||
<text>恭喜获得抽奖码！</text>
|
||||
<view class="ticket-badge-arrow"></view>
|
||||
</view>
|
||||
<view class="ticket-card">
|
||||
<view class="ticket-card-subtitle">
|
||||
<text class="ticket-card-subtitle-text">您的专属抽奖码</text>
|
||||
</view>
|
||||
<view class="ticket-card-code-box">
|
||||
<text class="ticket-card-code">{{ drawTicketPopup.ticketCode }}</text>
|
||||
</view>
|
||||
<view class="ticket-card-time">开奖时间：{{ (drawTicketPopup.drawTime) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="draw-ticket-actions">
|
||||
<view class="action-btn home-btn" @click="goHomeFromPopup">返回首页</view>
|
||||
<view class="action-btn primary" @click="goTicketsFromPopup">查看我的抽奖码</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
@@ -626,10 +660,11 @@ import Payment from "@/components/Payment"
|
||||
import { mapGetters } from "vuex"
|
||||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||||
import settings from '@/config/baseSetting.js'
|
||||
import { orderPaySuccessToCheckDrawStatus } from '@/mixins/orderPaySuccessToCheckDrawStatus.js'
|
||||
|
||||
export default {
|
||||
name: "MyOrder",
|
||||
mixins: [pageListenMixins],
|
||||
mixins: [pageListenMixins, orderPaySuccessToCheckDrawStatus],
|
||||
data() {
|
||||
return {
|
||||
giftItem: {},
|
||||
@@ -1017,9 +1052,14 @@ export default {
|
||||
})
|
||||
},
|
||||
async toYuePay(payPwd) {
|
||||
const that = this;
|
||||
const that = this
|
||||
const orderId = this.orderInfo.orderId
|
||||
// 网络请求
|
||||
await yuePayOrderHandle(this.orderInfo.orderId, "yue", that.from, payPwd);
|
||||
await yuePayOrderHandle(orderId, "yue", that.from, payPwd).then(() => {
|
||||
this.afterPaySuccess(orderId, (drawTicketResult) => {
|
||||
this.setDrawTicketPopupFromQuery(drawTicketResult)
|
||||
})
|
||||
});
|
||||
that.changeType();
|
||||
this.payPassword = "";
|
||||
},
|
||||
@@ -1379,13 +1419,17 @@ export default {
|
||||
}
|
||||
},
|
||||
toPay(type) {
|
||||
const that = this
|
||||
// 余额支付需要输入支付密码
|
||||
if (type == "yue") {
|
||||
this.isShowPayPwdPop = true
|
||||
return
|
||||
} else {
|
||||
payOrderHandle(this.orderInfo.orderId, type, that.from)
|
||||
const orderId = this.orderInfo.orderId
|
||||
payOrderHandle(orderId, type, this.from).then(() => {
|
||||
this.afterPaySuccess(orderId, (drawTicketResult) => {
|
||||
this.setDrawTicketPopupFromQuery(drawTicketResult)
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
toDelay(id) {
|
||||
|
||||
@@ -331,6 +331,7 @@ import CouponsPopup from "@/components/CouponsPopup.vue"
|
||||
import { getDrawTicketByOrder } from '@/api/lottery'
|
||||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||||
import settings from '@/config/baseSetting.js'
|
||||
import { orderPaySuccessToCheckDrawStatus } from '@/mixins/orderPaySuccessToCheckDrawStatus.js'
|
||||
|
||||
const NAME = "OrderSubmission"
|
||||
const _isWeixin = isWeixin()
|
||||
@@ -344,7 +345,7 @@ export default {
|
||||
passkeyborad,
|
||||
CouponsPopup
|
||||
},
|
||||
mixins: [pageListenMixins],
|
||||
mixins: [pageListenMixins, orderPaySuccessToCheckDrawStatus],
|
||||
props: {},
|
||||
data: function () {
|
||||
return {
|
||||
@@ -847,28 +848,7 @@ export default {
|
||||
this.computedPrice(1)
|
||||
// this.couponId = uni.getStorageSync('couponId') || 0
|
||||
// this.couponTitle = item.couponTitle
|
||||
},
|
||||
buildOrderDetailQuery(orderId, drawTicketResult = {}) {
|
||||
return {
|
||||
id: orderId,
|
||||
drawTicketData: encodeURIComponent(JSON.stringify(drawTicketResult || {}))
|
||||
}
|
||||
},
|
||||
async afterPaySuccess(orderId, fallback) {
|
||||
if (!orderId) {
|
||||
fallback && fallback()
|
||||
return
|
||||
}
|
||||
try {
|
||||
const res = await getDrawTicketByOrder(orderId)
|
||||
const result = (res && res.data) || {}
|
||||
fallback && fallback(result)
|
||||
return
|
||||
} catch (e) {
|
||||
}
|
||||
fallback && fallback({})
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<view class="order-details" style="padding: 30rpx;" @click="handleBody" v-if="!loading && orderInfo.isTickets !== undefined">
|
||||
<view class="order-details" style="padding: 30rpx;" @click="handleBody">
|
||||
<view v-if="!loading && orderInfo.isTickets !== undefined">
|
||||
<!-- 给header上与data上加on为退款订单-->
|
||||
<view class=" v12-pa-3 v12-white" :class="refundOrder ? 'on' : ''" style="border-radius: 20rpx;" v-if="!isGift">
|
||||
<!-- <view class="status-img-box">
|
||||
@@ -583,17 +584,41 @@
|
||||
<view class="bnt v12-primary-text v12-primary-border" @click="goGroupRule(orderInfo)">查看拼团</view>
|
||||
</template>
|
||||
</view>
|
||||
<u-modal :show="showExtend" title="确认延长收货时间？" content='每笔订单只能延长一次哦' showCancelButton
|
||||
@cancel="showExtend=false" @confirm="doneDelay"></u-modal>
|
||||
<Payment v-model="pay" :types="payType" @checked="toPay" :balance="userInfo.nowMoney"></Payment>
|
||||
<u-modal
|
||||
:show="showExtend"
|
||||
title="确认延长收货时间？"
|
||||
content='每笔订单只能延长一次哦'
|
||||
showCancelButton
|
||||
@cancel="showExtend=false"
|
||||
@confirm="doneDelay"
|
||||
/>
|
||||
<view class="geoPage" v-if="mapShow">
|
||||
<iframe width="100%" height="100%" frameborder="0" scrolling="no"
|
||||
:src="'https://apis.map.qq.com/uri/v1/geocoder?coord=' + system_store.latitude + ',' +system_store.longitude +'&referer=' +mapKey"></iframe>
|
||||
</view>
|
||||
<Payment
|
||||
v-model="pay"
|
||||
:types="payType"
|
||||
:balance="userInfo.nowMoney"
|
||||
@checked="toPay"
|
||||
/>
|
||||
|
||||
<passkeyborad v-if="isShowPayPwdPop" :money="orderInfo.payPrice" showMoney :show="isShowPayPwdPop" ref='payPwdPop' @close="pwdPopClose"
|
||||
@finish="pwdPopFinish"></passkeyborad>
|
||||
<view v-if="drawTicketPopup.show" class="draw-ticket-mask" @touchmove.stop.prevent>
|
||||
<passkeyborad
|
||||
v-if="isShowPayPwdPop"
|
||||
ref='payPwdPop'
|
||||
:money="orderInfo.payPrice"
|
||||
:show="isShowPayPwdPop"
|
||||
showMoney
|
||||
@close="pwdPopClose"
|
||||
@finish="pwdPopFinish"
|
||||
/>
|
||||
|
||||
</view>
|
||||
<view
|
||||
v-if="drawTicketPopup.show"
|
||||
class="draw-ticket-mask"
|
||||
@touchmove.stop.prevent
|
||||
>
|
||||
<view class="draw-ticket-popup">
|
||||
<view class="draw-ticket-close" @click="closeDrawTicketPopup">×</view>
|
||||
<view class="draw-ticket-icon">
|
||||
@@ -623,7 +648,6 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -639,6 +663,7 @@ import {cancelOrderHandle, delOrderHandle, payOrderHandle, takeOrderHandle, yueP
|
||||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||||
// import {postCartAdd} from "@/api/store";
|
||||
import settings from '@/config/baseSetting.js'
|
||||
import { orderPaySuccessToCheckDrawStatus } from '@/mixins/orderPaySuccessToCheckDrawStatus.js'
|
||||
|
||||
const STATUS = [
|
||||
"待付款",
|
||||
@@ -662,7 +687,7 @@ export default {
|
||||
DataFormat,
|
||||
passkeyborad
|
||||
},
|
||||
mixins: [pageListenMixins],
|
||||
mixins: [pageListenMixins, orderPaySuccessToCheckDrawStatus],
|
||||
data: function () {
|
||||
return {
|
||||
showMoreDeliver: false,
|
||||
@@ -693,14 +718,7 @@ export default {
|
||||
isGroup: false,
|
||||
key: "",
|
||||
loading: true,
|
||||
addressEditOrderId: "",
|
||||
drawTicketPopupHandled: false,
|
||||
drawTicketPopup: {
|
||||
show: false,
|
||||
orderId: '',
|
||||
ticketCode: '',
|
||||
drawTime: ''
|
||||
}
|
||||
addressEditOrderId: ""
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -770,36 +788,6 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
copyClipboard,
|
||||
setDrawTicketPopupFromQuery() {
|
||||
if (this.drawTicketPopupHandled) {
|
||||
return
|
||||
}
|
||||
this.drawTicketPopupHandled = true
|
||||
const drawTicketData = this.$yroute.query.drawTicketData
|
||||
if (!drawTicketData) {
|
||||
return
|
||||
}
|
||||
let result = {}
|
||||
try {
|
||||
result = JSON.parse(decodeURIComponent(drawTicketData))
|
||||
} catch (e) {
|
||||
result = {}
|
||||
}
|
||||
const hasTicket = Number(result.hasTicket || 0) === 1
|
||||
const howPopup = Number(result.showPopup || 0) === 1
|
||||
if (!hasTicket || !howPopup) {
|
||||
return
|
||||
}
|
||||
this.drawTicketPopup = {
|
||||
show: true,
|
||||
orderId: this.id || this.$yroute.query.id || '',
|
||||
ticketCode: result.ticketCode || result.code || '',
|
||||
drawTime: result.drawTime || ''
|
||||
}
|
||||
},
|
||||
closeDrawTicketPopup() {
|
||||
this.drawTicketPopup.show = false
|
||||
},
|
||||
formatDrawTime(time) {
|
||||
if (!time) return '--'
|
||||
const date = new Date(String(time).replace(/-/g, '/'))
|
||||
@@ -811,18 +799,6 @@ export default {
|
||||
const mm = String(date.getMinutes()).padStart(2, '0')
|
||||
return `${y}年${m}月${d}日 ${hh}:${mm}`
|
||||
},
|
||||
goHomeFromPopup() {
|
||||
this.drawTicketPopup.show = false
|
||||
uni.switchTab({
|
||||
url: '/pages/home/index'
|
||||
})
|
||||
},
|
||||
goTicketsFromPopup() {
|
||||
this.drawTicketPopup.show = false
|
||||
uni.navigateTo({
|
||||
url: '/pkg-video/views/county-my-tickets'
|
||||
})
|
||||
},
|
||||
getTime(type) {
|
||||
const timeMap = {
|
||||
1:"48小时内",
|
||||
@@ -1121,11 +1097,15 @@ export default {
|
||||
});
|
||||
},
|
||||
async toYuePay(payPwd) {
|
||||
var that = this;
|
||||
const orderId = this.orderInfo.orderId
|
||||
// 网络请求
|
||||
await yuePayOrderHandle(this.orderInfo.orderId, "yue", that.from, payPwd);
|
||||
that.getDetail();
|
||||
this.payPassword = "";
|
||||
await yuePayOrderHandle(orderId, "yue", this.from, payPwd).then(() => {
|
||||
this.afterPaySuccess(orderId, (drawTicketResult) => {
|
||||
this.setDrawTicketPopupFromQuery(drawTicketResult)
|
||||
})
|
||||
})
|
||||
this.getDetail()
|
||||
this.payPassword = ""
|
||||
},
|
||||
pwdPopClose() {
|
||||
this.isShowPayPwdPop = false;
|
||||
@@ -1290,19 +1270,20 @@ export default {
|
||||
})
|
||||
},
|
||||
async toPay(type) {
|
||||
var that = this;
|
||||
console.log(type, "支付方式");
|
||||
|
||||
// 余额支付需要输入支付密码
|
||||
if (type == "yue") {
|
||||
this.isShowPayPwdPop = true;
|
||||
return;
|
||||
this.isShowPayPwdPop = true
|
||||
return
|
||||
} else {
|
||||
await payOrderHandle(this.orderInfo.orderId, type, that.from);
|
||||
that.getDetail();
|
||||
const orderId = this.orderInfo.orderId
|
||||
// 网络请求
|
||||
await payOrderHandle(orderId, type, this.from).then(() => {
|
||||
this.afterPaySuccess(orderId, (drawTicketResult) => {
|
||||
this.setDrawTicketPopupFromQuery(drawTicketResult)
|
||||
})
|
||||
})
|
||||
this.getDetail()
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1560,193 +1541,4 @@ export default {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.draw-ticket-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.draw-ticket-popup {
|
||||
width: 100%;
|
||||
max-width: 640rpx;
|
||||
background: #fff;
|
||||
border-radius: 40rpx;
|
||||
padding: 50rpx 40rpx 60rpx;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.draw-ticket-close {
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
right: 30rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border: 4rpx solid #333;
|
||||
border-radius: 50%;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.draw-ticket-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.ticket-icon-box {
|
||||
width: 100rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 10rpx;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ticket-icon-check {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.draw-ticket-title {
|
||||
font-size: 56rpx;
|
||||
color: #222;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
margin-top: 24rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.ticket-card-container {
|
||||
margin-top: 50rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ticket-badge {
|
||||
background-color: #fff9eb;
|
||||
border: 6rpx solid #111;
|
||||
border-radius: 40rpx;
|
||||
padding: 12rpx 40rpx;
|
||||
font-size: 46rpx;
|
||||
font-weight: 800;
|
||||
color: #222;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-bottom: -36rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
|
||||
.ticket-badge-arrow {
|
||||
position: absolute;
|
||||
bottom: -22rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 22rpx solid transparent;
|
||||
border-right: 22rpx solid transparent;
|
||||
border-top: 22rpx solid #111;
|
||||
}
|
||||
|
||||
.ticket-badge-arrow::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -26rpx;
|
||||
left: -16rpx;
|
||||
border-left: 16rpx solid transparent;
|
||||
border-right: 16rpx solid transparent;
|
||||
border-top: 16rpx solid #fff9eb;
|
||||
}
|
||||
|
||||
.ticket-card {
|
||||
width: 100%;
|
||||
background: #c23326;
|
||||
border-radius: 36rpx;
|
||||
padding: 70rpx 36rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ticket-card-subtitle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ticket-card-subtitle-text {
|
||||
color: #fff;
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
border: 2rpx solid #fff;
|
||||
border-radius: 40rpx;
|
||||
padding: 8rpx 50rpx;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.ticket-card-code-box {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
margin-top: 36rpx;
|
||||
padding: 36rpx 0;
|
||||
}
|
||||
|
||||
.ticket-card-code {
|
||||
color: #c23326;
|
||||
font-size: 72rpx;
|
||||
font-weight: 800;
|
||||
letter-spacing: 8rpx;
|
||||
}
|
||||
|
||||
.ticket-card-time {
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
margin-top: 36rpx;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.draw-ticket-actions {
|
||||
margin-top: 60rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
height: 86rpx;
|
||||
border-radius: 44rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.action-btn.home-btn {
|
||||
color: #c23326;
|
||||
border: 2rpx solid #c23326;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
color: #fff;
|
||||
background: #c23326;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user