You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

190 lines
3.5 KiB

<template>
<view class="content">
<headerTopsTips></headerTopsTips>
<uni-nav-bar left-icon="left" title="vip购买" backgroundColor="#e6eafa" @clickLeft="handlegoback" />
<view class="padd_box">
<view class="now_pur">
<view class="tops_vip">
<view style="color: #7bc68f; font-weight: 600;">
<text>VIP会员卡6折</text>
<text>¥10.0</text>
</view>
<view style="font-size: 12px; margin-top: 5rpx;">
<text style="color: #7bc68f;">会员享受6折优惠</text>
<text style="color: #ccc;">¥99</text>
</view>
</view>
<view class="bottom_vip">
<view>
<text>有效期30天</text>
<view class="see_main">
查看详情
</view>
</view>
</view>
</view>
<!-- -->
<view class="bottom_pur">
<view style="display: flex; align-items: center;">
<view style="font-size: 12px;">
总计:
</view>
<view class="money">
¥10.0
</view>
</view>
<view class="btn_pur" @click="choose_pay">
</view>
</view>
<!-- -->
</view>
</view>
</template>
<script setup>
import headerTopsTips from '@/pages/components/header_tops_tips.vue'
import {
ref
} from 'vue'
import {
baseUrl,
apiPath
}
from '@/sheep/config';
import sheep from '@/sheep';
function handlegoback() {
uni.navigateBack()
}
function choose_pay() {
uni.request({
url: `${baseUrl + apiPath}/share/user-vip/create`,
method: 'POST',
header: {
'tenant-id': 1, //自定义请求头信息
"Authorization": uni.getStorageSync('token')
},
success: (res) => {
console.log(res, '结束')
if (res.data.code == 0) {
// handle_finish_pay(res.data.data.rideId)
sheep.$router.go('/pages/pay/index', {
id: res.data.data.payOrderId,
type: 'vip'
})
} else {
uni.showToast({
icon: 'error',
title: '创建失败'
})
}
}
});
}
</script>
<style lang="scss" scoped>
.content {
height: 100vh;
// background: #f8f8f8;
display: flex;
flex-direction: column;
}
.padd_box {
padding: 20rpx;
box-sizing: border-box;
position: relative;
flex: 1;
}
.now_pur {
width: 100%;
height: 200rpx;
background: #eafff0;
border-radius: 10rpx;
border: 1px solid #91d299;
padding: 30rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
.tops_vip {
>view {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.bottom_vip {
>view {
display: flex;
align-items: center;
justify-content: space-between;
color: #ccc;
font-size: 12px;
}
.see_main {
line-height: 40rpx;
border: 1px solid #ccc;
border-radius: 20rpx;
width: 150rpx;
text-align: center;
font-size: 12px;
}
}
}
.bottom_pur {
padding-left: 10rpx;
box-sizing: border-box;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 100rpx;
background: #f8f8f8;
display: flex;
align-items: center;
justify-content: space-between;
.money {
margin-left: 15rpx;
font-size: 18px;
font-weight: 600;
color: #fb9004;
}
.btn_pur {
width: 250rpx;
background: #44c159;
color: #fff;
font-size: 14px;
line-height: 100rpx;
text-align: center;
}
}
.pop_main {
padding: 30rpx;
box-sizing: border-box;
// margin-top: 50rpx;
.package {
font-size: 16px;
font-weight: 600;
text-align: center;
}
.item_main {
margin: 30rpx 0;
font-weight: 600;
}
}
</style>