vip页面更新
This commit is contained in:
parent
76ebd47058
commit
86f2a95be3
|
|
@ -5,11 +5,11 @@ const install = (Vue, vm) => {
|
||||||
Vue.prototype.$u.http.setConfig({
|
Vue.prototype.$u.http.setConfig({
|
||||||
// baseUrl: 'http://61.174.243.28:15861',
|
// baseUrl: 'http://61.174.243.28:15861',
|
||||||
// baseUrl: 'http://192.168.2.46:8080',
|
// baseUrl: 'http://192.168.2.46:8080',
|
||||||
// baseUrl: 'https://che.chuangtewl.com/prod-api',
|
baseUrl: 'https://che.chuangtewl.com/prod-api',
|
||||||
// 测试环境
|
// 测试环境
|
||||||
// baseUrl: 'https://dianche.chuantewulian.cn/prod-api',
|
// baseUrl: 'https://dianche.chuantewulian.cn/prod-api',
|
||||||
// 俞山岛
|
// 俞山岛
|
||||||
baseUrl: 'https://dche.ccttiot.com/prod-api',
|
// baseUrl: 'https://dche.ccttiot.com/prod-api',
|
||||||
// 创特
|
// 创特
|
||||||
loadingText: '努力加载中~',
|
loadingText: '努力加载中~',
|
||||||
loadingTime: 10000,
|
loadingTime: 10000,
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,56 @@
|
||||||
<view class="page">
|
<view class="page">
|
||||||
|
|
||||||
<view class="fixed">
|
<view class="fixed">
|
||||||
<u-navbar title=" " :border-bottom="false" :background="background" title-color='#fff' title-size='36' back-icon-color='#fff'
|
<u-navbar title=" " :border-bottom="false" :background="background" title-color='#fff' title-size='36'
|
||||||
height='45'></u-navbar>
|
back-icon-color='#fff' height='45'></u-navbar>
|
||||||
</view>
|
</view>
|
||||||
<image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/u3NgziRzuV79XdIE8cCn" mode=""></image>
|
<image class="backimg" src="https://lxnapi.ccttiot.com/bike/img/static/u3NgziRzuV79XdIE8cCn" mode=""></image>
|
||||||
|
|
||||||
|
<view class="vipcard">
|
||||||
|
<view class="card_top">
|
||||||
|
<view class="name">
|
||||||
|
17795402553
|
||||||
|
</view>
|
||||||
|
<view class="type">
|
||||||
|
未开通
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="card_bot">
|
||||||
|
<view class="txts">
|
||||||
|
开通立享超值会员特权
|
||||||
|
</view>
|
||||||
|
<view class="topage">
|
||||||
|
购买记录 >
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<image class="mc" src="https://lxnapi.ccttiot.com/bike/img/static/uCIpavkHbM18al7gpxH8" mode=""></image>
|
||||||
|
<view class="cont_box">
|
||||||
|
|
||||||
|
<view class="cont_li" v-for="item in 4" :key="item">
|
||||||
|
<view class="tit">
|
||||||
|
月卡
|
||||||
|
</view>
|
||||||
|
<view class="money">
|
||||||
|
￥39.9
|
||||||
|
</view>
|
||||||
|
<view class="tips" style="text-decoration: line-through; ">
|
||||||
|
￥59.9
|
||||||
|
</view>
|
||||||
|
<view class="tips">
|
||||||
|
立省￥20
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="txt">
|
||||||
|
该卡只能用于抵扣骑行费用，不能抵扣调度费、预约费等费用。 如您产生调度费、预约费等费用，需另支付差额。
|
||||||
|
</view>
|
||||||
|
<view class="pay_btn">
|
||||||
|
￥39.9立即开通
|
||||||
|
</view>
|
||||||
|
<view class="tipss">
|
||||||
|
更多优惠
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -34,17 +80,167 @@
|
||||||
|
|
||||||
.page {
|
.page {
|
||||||
width: 750rpx;
|
width: 750rpx;
|
||||||
|
|
||||||
.fixed {
|
.fixed {
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
.tipss{
|
||||||
|
margin-left: 40rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #3D3D3D;
|
||||||
|
}
|
||||||
|
.vipcard {
|
||||||
|
padding: 36rpx ;
|
||||||
|
position: fixed;
|
||||||
|
top: 428rpx;
|
||||||
|
left: 38rpx;
|
||||||
|
width: 680rpx;
|
||||||
|
height: 244rpx;
|
||||||
|
z-index: 1;
|
||||||
|
background-image: url('https://lxnapi.ccttiot.com/bike/img/static/u78FEc5oHRKzdvopQpZE');
|
||||||
|
background-size: cover;
|
||||||
|
/* 背景图片等比缩放以覆盖整个容器 */
|
||||||
|
background-position: center;
|
||||||
|
/* 背景图片居中显示 */
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
.card_top{
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
.name{
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 44rpx;
|
||||||
|
color: #B07C1E;
|
||||||
|
}
|
||||||
|
.type{
|
||||||
|
margin-left: 30rpx;
|
||||||
|
padding: 4rpx 18rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #B07C1E;
|
||||||
|
border-radius: 35rpx 35rpx 35rpx 35rpx;
|
||||||
|
border: 1rpx solid #B07C1E;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.card_bot{
|
||||||
|
margin-top: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
.txts{
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #B07C1E;
|
||||||
|
}
|
||||||
|
.topage{
|
||||||
|
margin-left: auto;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #B07C1E;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.pay_btn{
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 20rpx auto ;
|
||||||
|
width: 680rpx;
|
||||||
|
height: 104rpx;
|
||||||
|
background: linear-gradient( 90deg, rgba(255,201,87,0.84) 0%, rgba(255,224,158,0.58) 100%);
|
||||||
|
border-radius: 58rpx 58rpx 58rpx 58rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 44rpx;
|
||||||
|
color: #B07C1E;
|
||||||
|
|
||||||
|
}
|
||||||
.backimg {
|
.backimg {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 750rpx;
|
width: 750rpx;
|
||||||
height: 670rpx;
|
height: 670rpx;
|
||||||
z-index: -1;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1; // 确保背景图片在所有内容之下
|
||||||
|
}
|
||||||
|
.txt{
|
||||||
|
margin: 56rpx 48rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #64B6A7;
|
||||||
|
}
|
||||||
|
.cont_box {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
padding: 0 38rpx;
|
||||||
|
margin-top: 690rpx;
|
||||||
|
z-index: 10;
|
||||||
|
overflow-x: auto; // 允许横向滚动
|
||||||
|
white-space: nowrap; // 保持内容不换行
|
||||||
|
-webkit-overflow-scrolling: touch; // 使滚动更流畅
|
||||||
|
|
||||||
|
// 隐藏横向滚动条
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
display: none; // 针对 WebKit 浏览器 (如 Safari 和 Chrome)
|
||||||
|
height: 0; // 设定横向滚动条高度为 0
|
||||||
}
|
}
|
||||||
|
|
||||||
|
scrollbar-width: none; // 针对 Firefox
|
||||||
|
-ms-overflow-style: none; // 针对 Internet Explorer 和 Edge
|
||||||
|
|
||||||
|
.cont_li {
|
||||||
|
width: 218rpx;
|
||||||
|
height: 256rpx;
|
||||||
|
background: rgba(255, 224, 158, 0.15) #FFFFFF;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
border: 1rpx solid rgba(176, 124, 30, 0.56);
|
||||||
|
z-index: 10;
|
||||||
|
flex-shrink: 0; // 防止子元素缩小
|
||||||
|
margin-right: 20rpx; // 子元素之间的间距
|
||||||
|
.tit{
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #B07C1E;
|
||||||
|
}
|
||||||
|
.money{
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #E46666;
|
||||||
|
}
|
||||||
|
.tips{
|
||||||
|
margin-top: 20rpx;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #979797;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cont_box::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.mc {
|
||||||
|
position: fixed;
|
||||||
|
top: 611rpx;
|
||||||
|
left: 0rpx;
|
||||||
|
width: 750rpx;
|
||||||
|
height: 107.29rpx;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -299,23 +299,22 @@
|
||||||
<u-picker mode="time" v-model="time2" :params="params" @confirm="confirm2" :default-time='lasTime'></u-picker>
|
<u-picker mode="time" v-model="time2" :params="params" @confirm="confirm2" :default-time='lasTime'></u-picker>
|
||||||
<u-mask :show="showtips" :z-index='100' />
|
<u-mask :show="showtips" :z-index='100' />
|
||||||
<view class="tip_box1" v-if="showtips">
|
<view class="tip_box1" v-if="showtips">
|
||||||
|
<image class="close" src="https://lxnapi.ccttiot.com/bike/img/static/uyRmNa7d2WThHjr1Jzqk" mode="" @click="showtips=false"></image>
|
||||||
<view class="top1">
|
<view class="top1">
|
||||||
<view class="tip">
|
<view class="tip">
|
||||||
提示
|
{{tiptit}}
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="txt">
|
<view class="txt" v-html="tiptxt">
|
||||||
{{tiptxt}}
|
<!-- {{tiptxt}} -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="bot1">
|
<!-- <view class="bot1">
|
||||||
<!-- <view class="bot_left" @click="closefz()">
|
|
||||||
取消
|
|
||||||
</view> -->
|
|
||||||
<view class="bot_right" @click="showtips=false">
|
<view class="bot_right" @click="showtips=false">
|
||||||
确定
|
确定
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -343,8 +342,9 @@
|
||||||
info: {},
|
info: {},
|
||||||
areaId: 0,
|
areaId: 0,
|
||||||
loading:false,
|
loading:false,
|
||||||
showtips:true,
|
showtips:false,
|
||||||
tiptxt:''
|
tiptxt:'',
|
||||||
|
tiptit:''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
|
@ -363,11 +363,14 @@
|
||||||
methods: {
|
methods: {
|
||||||
showtipss(num){
|
showtipss(num){
|
||||||
if(num==1){
|
if(num==1){
|
||||||
this.tiptxt='订单总收入=订单收款-退款-手续费'
|
this.tiptxt='该时间段骑车实际利润'
|
||||||
|
this.tiptit='营业收入'
|
||||||
}else if(num==2){
|
}else if(num==2){
|
||||||
this.tiptxt='押金余额=充值押金-押金支出-订单押金扣款'
|
this.tiptxt='该时间段押金余额'
|
||||||
|
this.tiptit='押金余额'
|
||||||
}else if(num==3){
|
}else if(num==3){
|
||||||
this.tiptxt='账户盈余=总流水-总支出=营业收入+押金余额'
|
this.tiptxt='该时间段账户盈余<br/>总流水减去总支出'
|
||||||
|
this.tiptit='账户盈余'
|
||||||
|
|
||||||
}
|
}
|
||||||
this.showtips=true
|
this.showtips=true
|
||||||
|
|
@ -460,8 +463,14 @@
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||||
z-index: 110;
|
z-index: 110;
|
||||||
padding-bottom: 100rpx;
|
padding-bottom: 10rpx;
|
||||||
|
.close{
|
||||||
|
position: absolute;
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
bottom: -98rpx;
|
||||||
|
left: 274rpx;
|
||||||
|
}
|
||||||
.top1 {
|
.top1 {
|
||||||
padding: 52rpx 38rpx 42rpx 36rpx;
|
padding: 52rpx 38rpx 42rpx 36rpx;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user