241 lines
6.1 KiB
Vue
241 lines
6.1 KiB
Vue
<template>
|
|
<view class="container">
|
|
<image class="title" src="../../static/xyyk/bg-title.png" mode="widthFix"></image>
|
|
<view class="tips">
|
|
支付享立减1元
|
|
</view>
|
|
<view class="tickets" @click="toTickets">
|
|
我的券包
|
|
</view>
|
|
<view class="bottom-banner">
|
|
<view class="banner-title">
|
|
兑换商品列表
|
|
</view>
|
|
<view class="banner-tips">
|
|
<view>兴业优酷半价购送周卡</view>
|
|
<view><text class="line"></text>支付享立减1元<text class="line"></text></view>
|
|
</view>
|
|
<scroll-view class="banner-content" scroll-y>
|
|
<view class="banner-container">
|
|
<view v-for="(item,index) in products" :key="item.id">
|
|
<ProductItem :detail="item" @buy-event="handleBuy"/>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<uni-popup ref="popupRef" type="center" :is-mask-click="false" :mask-click="false">
|
|
<view class="popup-content">
|
|
<view class="popup-title">购买{{payResult ? '成功' : '失败'}}</view>
|
|
<view class="popup-tips" v-if="payResult">恭喜购买成功,请稍后查看结果</view>
|
|
<view class="popup-tips" v-else>支付失败了</view>
|
|
<view class="btn" @click="closePopup">
|
|
确定
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import ProductItem from './components/product-item';
|
|
import {getQueryString} from '../../utils/utils';
|
|
import {login,getProduceList,goBuy,queryOrder} from '../../api/xyyk';
|
|
const popupRef = ref(null);
|
|
const products = ref([]);
|
|
const payResult = ref(false);
|
|
const orderNo = "SN202406131136518803"
|
|
const code = 'MDQ4MDM2ZWYwNzUxYmMwYmM3YTk4ZjdmNjEzZWNmOGNjZDk0OGQ5ZjM0NjY1NjY1NDMyYjY2MzVmNjkwZTE5MjU1MTdhOTc1MDkzOGVhMWJhNDE5YWVlMjQ5NGMwZjFmMTg4NzgyZDBiN2UyOGYwZDFjNzIzOGIzOTQ1ZGRiMWU0M2FiNjhjOTRlZjEyODE1MmM5NjIyMTQzZTBhYmQzZGFiOTRjM2ZhNTNlYTVlYTRiOGY0ZTIxZjFkN2I4ZjFlYzBmODQ1NzlmYTY2MDJmMmViZDIxMzc4ZDMwMmM1OGExZTZiMTQ1N2Y0MjY5NWJlNDRhZWU5YzE5OTViMmQ1MjAxNWY5NWM4ZTQ0OGI2NGEyZDI5MTkyNWNkZjA0YWIwZjFlZGE3MGJmZjk3YzViZTYwNTYzZDgxMjk2YmE5MWE4ZDQ0ZDZiZGY3MmJlMzdmN2NmMjI3YjU5NmQwNmMwYWM4MmZkYjc5MTk0MmRlNzE0NWU3ZmYxMGNkNjhmN2RhODMwMzU3NGUzMTM0ZGU3OTc1NWIwNDM0ODBmMjdlMzliZDEwZjViNWI4OTE1N2RhN2EzNmU5ZGNmZjQ3NzhiYjBhOGFmOTNlNTM2M2NiNmIzY2UwODJjZDU5NzFjMTVmZGI2ZA=='
|
|
|
|
onMounted(()=>{
|
|
//页面连接中带code代表第一次进入页面,带订单号代表支付回调回来进入页面
|
|
const code = getQueryString('code');
|
|
const orderNo = getQueryString('order_no');
|
|
// if(code){
|
|
// getProductConfig()
|
|
// }else if(orderNo){
|
|
// queryOrderStatus()
|
|
// }
|
|
getProductConfig()
|
|
})
|
|
|
|
const getProductConfig = async () => {
|
|
const params = {data:code}
|
|
const resData = await login({params})
|
|
uni.setStorageSync('token',resData.token);
|
|
const productConfig = await getProduceList();
|
|
const {name,description,product} = productConfig;
|
|
products.value = product;
|
|
}
|
|
|
|
const queryOrderStatus = () => {
|
|
const params = {
|
|
order_no:orderNo
|
|
}
|
|
queryOrder({params}).then(res => {
|
|
const {state} = res
|
|
payResult.value = state == '2' ? true : false;
|
|
popupRef.value.open()
|
|
})
|
|
}
|
|
|
|
const handleBuy = (item) => {
|
|
const {id} = item;
|
|
const params = {product_id:id}
|
|
goBuy({params}).then(res => {
|
|
const {payToken,payOrderId,mchtOrderId} = res;
|
|
window.location.href = payToken;
|
|
})
|
|
}
|
|
|
|
const toTickets = () => {
|
|
uni.navigateTo({url:'/pages/xyyk/tickets'})
|
|
}
|
|
|
|
const closePopup = () => {
|
|
popupRef.value.close()
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container{
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width:100vw;
|
|
height:100vh;
|
|
background: url('../../static/xyyk/bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
.title{
|
|
width:640rpx;
|
|
margin: 32rpx auto 0;
|
|
}
|
|
.tips{
|
|
width: 215rpx;
|
|
height: 42rpx;
|
|
background: linear-gradient( 90deg, #E5F5FF 0%, #FFFEFF 100%);
|
|
border-radius: 21rpx;
|
|
margin-top:16rpx;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #00A5EB;
|
|
text-align: center;
|
|
line-height: 42rpx;
|
|
}
|
|
.tickets{
|
|
position: fixed;
|
|
right:0;
|
|
top:150rpx;
|
|
width: 102rpx;
|
|
height: 32rpx;
|
|
background: linear-gradient( 90deg, #E7F6FF 0%, #FEFEFF 100%);
|
|
border-radius: 52rpx 0px 0px 52rpx;
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #00A5EB;
|
|
line-height: 28rpx;
|
|
text-align: center;
|
|
line-height: 28rpx;
|
|
}
|
|
.bottom-banner{
|
|
position: absolute;
|
|
bottom:10rpx;
|
|
width:730rpx;
|
|
height:620rpx;
|
|
background: url('../../static/xyyk/bg-banner.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.banner-title{
|
|
width:350rpx;
|
|
height:78rpx;
|
|
text-align: center;
|
|
line-height: 78rpx;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
margin:0 auto;
|
|
padding-left:50rpx;
|
|
}
|
|
.banner-tips{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top:30rpx;
|
|
.line{
|
|
display: block;
|
|
width: 40rpx;
|
|
height: 0;
|
|
border: 1rpx solid #3F85BC;
|
|
&:first-child{
|
|
margin-right:14rpx;
|
|
}
|
|
&:last-child{
|
|
margin-left:14rpx;
|
|
}
|
|
}
|
|
> :first-child{
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
color: #135BC3;
|
|
}
|
|
> :last-child{
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #3F85BC;
|
|
}
|
|
}
|
|
.banner-content{
|
|
box-sizing: border-box;
|
|
padding:0 60rpx 40rpx;
|
|
flex:1;
|
|
overflow: auto;
|
|
.banner-container{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
}
|
|
}
|
|
.popup-content{
|
|
width:578rpx;
|
|
height:700rpx;
|
|
background: url("../../static/xyyk/bg-popup.png") no-repeat;
|
|
background-size:100% 700rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding-top:290rpx;
|
|
.popup-title{
|
|
font-weight:700;
|
|
color:#111B1F;
|
|
font-size:60rpx;
|
|
margin-top:24rpx;
|
|
}
|
|
.popup-tips{
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #00A5EB;
|
|
margin-top:34rpx;
|
|
opacity: .6;
|
|
}
|
|
.btn{
|
|
width: 236rpx;
|
|
height: 72rpx;
|
|
background: linear-gradient( 180deg, #57C3FB 7%, #2D98F7 100%);
|
|
border-radius: 36rpx;
|
|
text-align: center;
|
|
line-height: 72rpx;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
margin-top:100rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |