uniapp-h5/src/pages/xyyk/index.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>