chuangte/bike
5
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
master
bike/page_vip/buyCard.vue
tx 5e37093e15 vip修改
2024-09-04 18:09:51 +08:00

503 lines
11 KiB
Vue
Raw Permalink Blame History

<template>
<view class="page">
<u-navbar title="购买骑行卡" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
height='45'></u-navbar>
<view class="cont">
<view class="card1">
<view class="txt1">
购卡后预计每月可省 <span> 18.1</span>元
</view>
<view class="txt2">
我的骑行卡 <image src="https://lxnapi.ccttiot.com/bike/img/static/uC5tdSEpQIUUbFDToiso" mode=""></image>
</view>
</view>
<view class="card2" v-for="(item,index) in CouponList" :key="index" v-show="item.isHot">
<view class="card3" style="margin-top: 85rpx;" >
<view class="top">
<view class="tit1">
{{item.name}}
</view>
<view class="tit2">
{{item.retailPrice}}<span style="font-size: 28rpx;">元</span>
</view>
</view>
<view class="middle">
<view class="tit3" >
{{item.descr}}
</view>
<view class="tit4">
{{item.originalPrice}}元
</view>
</view>
<view class="bot">
<view class="bot_left">
<view class="txt3">
低至{{ (item.retailPrice / item.limitNum).toFixed(2) }}元/次
</view>
<view class="txt4">
已优惠 <span style="color: red;">{{(item.originalPrice - item.retailPrice).toFixed(2)}}</span>元
</view>
</view>
<view class="btn" @click="buycard(item)">
购买
</view>
</view>
</view>
</view>
<view class="card3" v-for="(item,index) in CouponList" :key="index" v-show="item.isHot==false">
<view class="top">
<view class="tit1">
{{item.name}}
</view>
<view class="tit2">
{{item.retailPrice}}<span style="font-size: 28rpx;">元</span>
</view>
</view>
<view class="middle">
<view class="tit3" >
{{item.descr}}
</view>
<view class="tit4">
{{item.originalPrice}}元
</view>
</view>
<view class="bot">
<view class="bot_left">
<view class="txt3">
低至{{ (item.retailPrice / item.limitNum).toFixed(2) }}元/次
</view>
<view class="txt4">
已优惠 <span style="color: red;">{{(item.originalPrice - item.retailPrice).toFixed(2)}}</span>元
</view>
</view>
<view class="btn" @click="buycard(item)">
购买
</view>
</view>
</view>
</view>
<u-mask :show="show" :z-index='100' />
<view class="buy_box" v-if="show">
<view class="taocan">
<view class="top">
<view class="tit1">
{{buyinfo.name}}
</view>
<view class="tit2">
{{buyinfo.retailPrice}}<span style="font-size: 28rpx;">元</span>
</view>
</view>
<view class="bot">
<view class="bot_left">
<view class="txt4">
{{buyinfo.descr}}
</view>
<view class="txt3">
低至{{ (buyinfo.retailPrice / buyinfo.limitNum).toFixed(2) }}元/次
</view>
</view>
</view>
</view>
<view class="tit_txt">
{{buyinfo.descr}}
</view>
<view class="text">
只能用于抵扣骑行费用，不能抵扣调度费、预约费等费
用。如您正常的骑行费用超过最高抵扣金额，需另支付
差额。
</view>
<view class="tit_txt">
全国可用
</view>
<view class="text">
不包括景区等特殊区域
</view>
<view class="btns_box">
<view class="btn1" @click="show=false">
取消
</view>
<view class="btn2" @click="buy()">
立即支付
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
backgroundColor: '#fff'
},
sn: '',
istrue: false,
show:false,
CouponList:[],
buyinfo:{},
userinfo:{}
}
},
onShow() {
this.getCouponList()
this.getinfo()
},
methods: {
getinfo() {
// uni.showLoading({
// title:'加载中'
// })
this.$u.get("/getAppInfo").then((res) => {
if (res.code == 200) {
this.$store.commit('SET_USERID', res.user.userId);
this.userinfo = res.user
} else {
}
});
},
buy(){
let data={
userId:this.userinfo.userId,
couponId:this.buyinfo.couponId
}
let that=this
that.$u.get("/appVerify/coupon/buy?",data ).then((res) => {
if (res.code == 200) {
uni.requestPayment({
provider: 'wxpay',
timeStamp: res.data.timeStamp,
nonceStr: res.data.nonceStr,
package: res.data.packageVal,
signType: res.data.signType,
paySign: res.data.paySign,
success(res) {
// 支付成功逻辑
that.show=false
that.getinfo()
},
fail(err) {
// 支付失败逻辑
uni.showToast({
title: '支付失败',
icon: 'none',
duration: 2000
});
}
});
} else {
// uni.showToast({
// title: res.msg,
// icon: 'none',
// duration: 2000
// });
}
});
},
buycard(item){
this.buyinfo=item
this.show=true
},
getCouponList(){
let data={
type:'3,4'
}
this.$u.get("/app/couponList",data ).then((res) => {
if (res.code == 200) {
this.CouponList = res.data
} else {
// uni.showToast({
// title: res.msg,
// icon: 'none',
// duration: 2000
// });
}
});
},
}
}
</script>
<style lang="scss">
page {
background-color: #fff;
}
.page {
width: 750rpx;
.buy_box {
padding: 0 46rpx;
position: fixed;
bottom: 0rpx;
left: 0rpx;
width: 750rpx;
height: 780rpx !important;
background: #FDFDFD;
border-radius: 0rpx 0rpx 0rpx 0rpx;
z-index: 101;
// position: relative;
.tit_txt {
padding-top: 114rpx; /* 使用 padding-top 或者增加 overflow: hidden 来防止 margin 合并 */
font-weight: 600;
font-size: 28rpx;
color: #3D3D3D;
overflow: hidden; /* 防止 margin 合并 */
span {
color: #64B6A7;
}
}
.text {
margin-top: 16rpx;
font-weight: 400;
font-size: 28rpx;
color: #3D3D3D;
}
.taocan {
padding: 46rpx 40rpx;
position: absolute;
top: -140rpx;
left: 36rpx;
width: 680rpx;
height: 204rpx;
background: #fff;
border-radius: 20rpx;
z-index: 102;
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08), 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
.top {
display: flex;
align-items: center;
justify-content: space-between;
.tit1 {
font-weight: 500;
font-size: 32rpx;
color: #2F3240;
}
.tit2 {
font-weight: 500;
font-size: 40rpx;
color: #E46666;
}
}
.bot_left {
margin-top: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
.txt3 {
padding: 4rpx 12rpx;
background: linear-gradient(90deg, rgba(228, 102, 102, 0.42) 0%, rgba(228, 102, 102, 0) 100%);
border-radius: 6rpx;
font-weight: 400;
font-size: 24rpx;
color: #E46666;
}
.txt4 {
font-weight: 500;
font-size: 24rpx;
color: #808080;
}
}
}
.btns_box {
display: flex;
flex-wrap: nowrap;
padding-top: 30rpx;
// align-items: center;
justify-content: space-around;
position: absolute;
bottom: 0;
left: 0;
width: 750rpx;
height: 184rpx;
background: #FFFFFF;
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08), 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
z-index: 200;
.btn1{
display: flex;
align-items: center;
justify-content: center;
width: 338rpx;
height: 90rpx;
border-radius: 45rpx 45rpx 45rpx 45rpx;
border: 2rpx solid #808080;
font-weight: 500;
font-size: 36rpx;
color: #808080;
}
.btn2{
display: flex;
align-items: center;
justify-content: center;
width: 338rpx;
height: 90rpx;
background: #64B6A7;
border-radius: 45rpx 45rpx 45rpx 45rpx;
font-weight: 500;
font-size: 36rpx;
color: #FFFFFF;
}
}
}
.cont {
display: flex;
flex-wrap: wrap;
justify-content: center;
.card1{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
padding: 28rpx;
width: 680rpx;
height: 106rpx;
background: rgba(100,182,167,0.25);
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
border-radius: 20rpx 20rpx 20rpx 20rpx;
.txt1{
font-weight: 600;
font-size: 32rpx;
color: #3D3D3D;
span{
color: #E46666;
}
}
.txt2{
font-weight: 400;
font-size: 24rpx;
color: #2F3240;
image{
margin-left: 16rpx;
width: 8rpx;
height: 16rpx;
}
}
}
.card3{
margin-top: 16rpx;
padding: 46rpx 40rpx;
width: 680rpx;
height: 238rpx;
background: #FFFFFF;
box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
border-radius: 20rpx 20rpx 20rpx 20rpx;
.top{
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
.tit1{
font-weight: 500;
font-size: 32rpx;
color: #2F3240;
}
.tit2{
font-weight: 500;
font-size: 40rpx;
color: #E46666;
}
}
.middle{
margin-top: 10rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
.tit3{
font-weight: 500;
font-size: 24rpx;
color: #808080;
}
.tit4{
font-weight: 400;
font-size: 24rpx;
color: #808080;
text-decoration: line-through;
}
}
.bot{
margin-top: 10rpx;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
.bot_left{
display: flex;
flex-wrap: nowrap;
align-items: center;
.txt3{
padding: 4rpx 12rpx;
background: linear-gradient( 90deg, rgba(228,102,102,0.42) 0%, rgba(228,102,102,0) 100%);
border-radius: 6rpx 6rpx 6rpx 6rpx;
font-weight: 400;
font-size: 24rpx;
color: #E46666;
}
.txt4{
margin-left: 16rpx;
padding: 4rpx 8rpx;
border-radius: 6rpx 6rpx 6rpx 6rpx;
border: 1rpx solid #808080;
font-weight: 400;
font-size: 24rpx;
color: #808080;
}
}
.btn{
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
width: 144rpx;
height: 52rpx;
background: #E46666;
border-radius: 26rpx 26rpx 26rpx 26rpx;
font-weight: 500;
font-size: 28rpx;
color: #FFFFFF;
}
}
}
.card2{
margin-top: 16rpx;
width: 680rpx;
height: 322rpx;
background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uyD3iyP4A54oU4oWgKTO');
background-size: cover;
/* 背景图片等比缩放以覆盖整个容器 */
background-position: center;
/* 背景图片居中显示 */
background-repeat: no-repeat;
}
}
}
</style>
Reference in New Issue View Git Blame Copy Permalink