Feat：抽奖2.0（部分接口未调通）
This commit is contained in:
LinCyJang
@@ -309,6 +309,38 @@
|
||||
@close="pwdPopClose"
|
||||
@finish="pwdPopFinish"
|
||||
/>
|
||||
<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">
|
||||
<view class="ticket-icon-check"></view>
|
||||
</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" v-if="drawTicketPopup.drawTime">开奖时间：{{ 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>
|
||||
|
||||
@@ -328,6 +360,7 @@ import {isNullOrEmpty, isWeixin} from "@/utils"
|
||||
import blPaymentPasswordInput from '@/components/blPaymentPasswordInput.vue'
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue'
|
||||
import CouponsPopup from "@/components/CouponsPopup.vue"
|
||||
import { getDrawTicketByOrder } from '@/api/lottery'
|
||||
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
||||
|
||||
const NAME = "OrderSubmission"
|
||||
@@ -395,7 +428,13 @@ export default {
|
||||
pageKeyId: Object.freeze('orderConfirm'),
|
||||
total: 0,
|
||||
couponTitle: '',
|
||||
hasCoupon: false
|
||||
hasCoupon: false,
|
||||
drawTicketPopup: {
|
||||
show: false,
|
||||
orderId: '',
|
||||
ticketCode: '',
|
||||
drawTime: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: mapGetters(["userInfo", "storeItems"]),
|
||||
@@ -707,6 +746,7 @@ export default {
|
||||
createOrder(this.orderGroupInfo.orderKey, params).then(res => {
|
||||
uni.hideLoading()
|
||||
const data = res.data
|
||||
const orderId = data && data.result ? data.result.orderId : ''
|
||||
switch (data.status) {
|
||||
case "ORDER_EXIST":
|
||||
case "EXTEND_ORDER":
|
||||
@@ -718,7 +758,7 @@ export default {
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/OrderDetails/index",
|
||||
query: {
|
||||
id: data.result.orderId
|
||||
id: orderId
|
||||
}
|
||||
})
|
||||
break;
|
||||
@@ -743,21 +783,23 @@ export default {
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
})
|
||||
if (this.orderGroupInfo.cartInfo && this.orderGroupInfo.cartInfo.length === 1) {
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/OrderDetails/index",
|
||||
query: {
|
||||
id: data.result.orderId
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/MyOrder/index",
|
||||
query: {
|
||||
type: 2
|
||||
}
|
||||
})
|
||||
}
|
||||
this.afterPaySuccess(orderId, () => {
|
||||
if (this.orderGroupInfo.cartInfo && this.orderGroupInfo.cartInfo.length === 1) {
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/OrderDetails/index",
|
||||
query: {
|
||||
id: orderId
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/MyOrder/index",
|
||||
query: {
|
||||
type: 2
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
break;
|
||||
case "WECHAT_H5_PAY":
|
||||
// H5支付
|
||||
@@ -770,7 +812,16 @@ export default {
|
||||
break;
|
||||
case "WECHAT_PAY":
|
||||
// 小程序支付
|
||||
weappPay(data.result.jsConfig).finally(() => {
|
||||
weappPay(data.result.jsConfig).then(() => {
|
||||
this.afterPaySuccess(orderId, () => {
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/MyOrder/index",
|
||||
query: {
|
||||
type: 1
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/MyOrder/index",
|
||||
query: {
|
||||
@@ -781,13 +832,22 @@ export default {
|
||||
break;
|
||||
case "WECHAT_APP_PAY":
|
||||
// APP支付
|
||||
weappPay(data.result.jsConfig).finally(() => {
|
||||
weappPay(data.result.jsConfig).then(() => {
|
||||
this.afterPaySuccess(orderId, () => {
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/MyOrder/index",
|
||||
query: {
|
||||
type: 1
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/MyOrder/index",
|
||||
query: {
|
||||
type: 1
|
||||
}
|
||||
});
|
||||
})
|
||||
})
|
||||
break;
|
||||
}
|
||||
@@ -830,6 +890,50 @@ export default {
|
||||
this.computedPrice(1)
|
||||
// this.couponId = uni.getStorageSync('couponId') || 0
|
||||
// this.couponTitle = item.couponTitle
|
||||
},
|
||||
async afterPaySuccess(orderId, fallback) {
|
||||
if (!orderId) {
|
||||
fallback && fallback()
|
||||
return
|
||||
}
|
||||
try {
|
||||
const res = await getDrawTicketByOrder(orderId)
|
||||
const result = (res && res.data) || {}
|
||||
const hasTicket = Number(result.hasTicket || 0) === 1
|
||||
const howPopup = Number(result.howPopup || 0) === 1
|
||||
if (hasTicket && howPopup) {
|
||||
this.drawTicketPopup = {
|
||||
show: true,
|
||||
orderId: orderId,
|
||||
ticketCode: result.ticketCode || '',
|
||||
drawTime: result.drawTime || ''
|
||||
}
|
||||
return
|
||||
}
|
||||
} catch (e) {
|
||||
}
|
||||
fallback && fallback()
|
||||
},
|
||||
closeDrawTicketPopup() {
|
||||
this.drawTicketPopup.show = false
|
||||
this.$yrouter.replace({
|
||||
path: "/pages/order/MyOrder/index",
|
||||
query: {
|
||||
type: 1
|
||||
}
|
||||
})
|
||||
},
|
||||
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'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1007,4 +1111,213 @@ export default {
|
||||
padding: 20rpx 0 0 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.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: 60rpx;
|
||||
height: 60rpx;
|
||||
border: 4rpx solid #111;
|
||||
border-radius: 50%;
|
||||
font-size: 50rpx;
|
||||
color: #111;
|
||||
line-height: 52rpx;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.draw-ticket-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.ticket-icon-box {
|
||||
width: 90rpx;
|
||||
height: 70rpx;
|
||||
border: 6rpx solid #111;
|
||||
border-radius: 10rpx;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ticket-icon-box::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -16rpx;
|
||||
left: 14rpx;
|
||||
width: 50rpx;
|
||||
height: 12rpx;
|
||||
border-top: 6rpx solid #111;
|
||||
border-left: 6rpx solid #111;
|
||||
border-right: 6rpx solid #111;
|
||||
border-radius: 6rpx 6rpx 0 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.ticket-icon-check {
|
||||
width: 36rpx;
|
||||
height: 18rpx;
|
||||
border-left: 6rpx solid #c23326;
|
||||
border-bottom: 6rpx solid #c23326;
|
||||
transform: rotate(-45deg);
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
top: 14rpx;
|
||||
}
|
||||
|
||||
.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;
|
||||
letter-spacing: 1rpx;
|
||||
}
|
||||
|
||||
.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