完善功能

This commit is contained in:
wangxiaowei
2025-12-10 21:30:49 +08:00
parent 5709317af2
commit 6cba10eb94
7 changed files with 621 additions and 384 deletions

View File

@ -4,56 +4,56 @@
<view class="card-box">
<view class="card-item">
<image src="@/static/bjk.png" class="card-img" alt="" />
<image src="https://xh.stnav.com/uploads/sport/byk.png" class="card-img" alt="" />
<view class="card-title"></view>
<view class="card-balance">1602.00</view>
<view class="card-title"></view>
<view class="card-balance">{{ userBalance.balance1 }}</view>
<view class="card-discount">
<text class="card-discount1">9.5</text>
<text class="card-discount1">{{ balance.discount1 }}</text>
<text class="card-discount2"></text>
</view>
</view>
<view class="card-item">
<image src="@/static/bjk.png" class="card-img" alt="" />
<image src="https://xh.stnav.com/uploads/sport/hjk.png" class="card-img" alt="" />
<view class="card-title">金卡</view>
<view class="card-balance">1602.00</view>
<view class="card-title">金卡</view>
<view class="card-balance">{{ userBalance.balance2 }}</view>
<view class="card-discount">
<text class="card-discount1">9.5</text>
<text class="card-discount1">{{ balance.discount2 }}</text>
<text class="card-discount2"></text>
</view>
</view>
<view class="card-item">
<image src="@/static/bjk.png" class="card-img" alt="" />
<image src="https://xh.stnav.com/uploads/sport/bjk.png" class="card-img" alt="" />
<view class="card-title">金卡</view>
<view class="card-balance">1602.00</view>
<view class="card-title">金卡</view>
<view class="card-balance">{{ userBalance.balance3 }}</view>
<view class="card-discount">
<text class="card-discount1">9.5</text>
<text class="card-discount1">{{ balance.discount3 }}</text>
<text class="card-discount2"></text>
</view>
</view>
<view class="card-item">
<image src="@/static/bjk.png" class="card-img" alt="" />
<image src="https://xh.stnav.com/uploads/sport/zsk.png" class="card-img" alt="" />
<view class="card-title">白金</view>
<view class="card-balance">1602.00</view>
<view class="card-title">钻石</view>
<view class="card-balance">{{ userBalance.balance4 }}</view>
<view class="card-discount">
<text class="card-discount1">9.5</text>
<text class="card-discount1">{{ balance.discount4 }}</text>
<text class="card-discount2"></text>
</view>
</view>
<view class="card-item">
<image src="@/static/bjk.png" class="card-img" alt="" />
<image src="https://xh.stnav.com/uploads/sport/zzk.png" class="card-img" alt="" />
<view class="card-title">白金</view>
<view class="card-balance">1602.00</view>
<view class="card-title">至尊</view>
<view class="card-balance">{{ userBalance.balance5 }}</view>
<view class="card-discount">
<text class="card-discount1">9.5</text>
<text class="card-discount1">{{ balance.discount5 }}</text>
<text class="card-discount2"></text>
</view>
</view>
@ -69,7 +69,37 @@
},
data() {
return {}
return {
balance: {},
userBalance: {}
}
},
onLoad() {
let self = this;
uni.showLoading({
title: '加载中'
});
// 获取充值
self._post(
'ground.ground/groundSetting',
{
app_id: self.getAppId(),
},
function(res) {
self.balance = res.data.lists.balance;
}
)
// 获取充值
self._post('user.index/detail', {
source: self.getPlatform()
}, function(res) {
console.log("🚀 ~ res:", res)
self.userBalance = res.data.userInfo;
self.loadding = false;
uni.hideLoading();
});
},
methods: {

View File

@ -8,87 +8,18 @@
<view class="r-desc2">充值金额只能消费不能提现</view>
</view>
<view class="bg-white card" @click="selectCard">
<view class="bg-white card">
<view>
<view class="card-item">
<view class="card-item" :class="currentType == i + 1 ? 'active' : ''" v-for="i in 5" :key="i" @click="selectCard(i + 1)">
<view class="d-f a-i-c">
<view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
<view class="card-balance">充值1000</view>
<view class="card-balance">充值{{ balance['balance' + (i + 1)] }}</view>
</view>
<view class="d-f a-i-c">
<view class="d-f a-i-c">
<view class="sale">
<text>预存享</text>
<text class="discount">9.5</text>
<text></text>
</view>
</view>
</view>
</view>
<view class="card-item">
<view class="d-f a-i-c">
<view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
<view class="card-balance">充值1000</view>
</view>
<view class="d-f a-i-c">
<view class="d-f a-i-c">
<view class="sale">
<text>预存享</text>
<text class="discount">9.5</text>
<text></text>
</view>
</view>
</view>
</view>
<view class="card-item">
<view class="d-f a-i-c">
<view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
<view class="card-balance">充值1000</view>
</view>
<view class="d-f a-i-c">
<view class="d-f a-i-c">
<view class="sale">
<text>预存享</text>
<text class="discount">9.5</text>
<text></text>
</view>
</view>
</view>
</view>
<view class="card-item">
<view class="d-f a-i-c">
<view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
<view class="card-balance">充值1000</view>
</view>
<view class="d-f a-i-c">
<view class="d-f a-i-c">
<view class="sale">
<text>预存享</text>
<text class="discount">9.5</text>
<text></text>
</view>
</view>
</view>
</view>
<view class="card-item active">
<view class="d-f a-i-c">
<view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
<view class="card-balance">充值1000</view>
</view>
<view class="d-f a-i-c">
<view class="d-f a-i-c">
<view class="sale">
<text>预存享</text>
<text class="discount">9.5</text>
<text class="discount">{{ balance['discount' + (i + 1)] }}</text>
<text></text>
</view>
</view>
@ -104,32 +35,158 @@
</view>
<view class="card-btn" @click="confirmCard">确定</view>
</view>
<!-- 会员卡选择弹窗 -->
<!-- <Popup :show="cardPopup" :width='750' :padding="0" type="bottom" backgroundColor="#fff" radius="32rpx 32rpx 0 0">
<view class="notice-popup">
<view class="title">提示</view>
<view class="desc">
<view class="rule">是否充值该</view>
</view>
<view class="btn">
<view class="btn1" @click="cancelReservePopup = false">取消</view>
<view class="btn2" @click="cancelReserveOrder">确定</view>
</view>
</view>
</Popup> -->
</view>
</template>
<script>
import navbar from '@/components/navbar.vue';
import Popup from '@/components/uni-popup.vue';
export default {
components: {
navbar,
Popup
},
data() {
return {}
return {
cardPopup: false,
currentType: -1,
balance: {}
}
},
onLoad() {
let self = this;
// 获取充值卡
self._post(
'ground.ground/groundSetting',
{
app_id: self.getAppId(),
},
function(res) {
self.balance = res.data.lists.balance;
console.log("🚀 ~ res:", self.balance)
}
)
},
methods: {
// 选择会员卡
selectCard() {
console.log("选择会员卡");
selectCard(index) {
this.currentType = index;
},
// 确认选择
confirmCard() {
console.log("确认选择");
}
if (this.currentType == -1) {
uni.showToast({
title: '请选择充值金额',
icon: 'none'
});
return;
}
this.wxPay()
},
// 微信支付
wxPay() {
let self = this;
uni.showLoading({
title: '加载中'
});
try {
self._post(
'user.groundOrder/recharge',
{
app_id: self.getAppId(),
type: this.currentType
},
function(res) {
if (res.code) {
const data = res.data
console.log("🚀 ~ pay data:", data)
uni.requestPayment({
provider: 'wxpay',
timeStamp: data.payment.timeStamp,
nonceStr: data.payment.nonceStr,
package: 'prepay_id=' + data.payment.prepay_id,
signType: 'MD5',
paySign: data.payment.paySign,
success: res => {
self.result = 'success'
console.log("🚀 ~ pay success res:", res)
uni.showToast({
title: '支付成功',
icon: 'none'
});
self.loadding = false;
setTimeout(() => {
uni.redirectTo({
url: '/bundle/recharge/card'
});
}, 500);
},
fail: res => {
console.log("🚀 ~ pay error res:", res)
self.result = 'fail'
self.loadding = false;
uni.showToast({
title: '支付失败',
icon: 'none'
});
setTimeout(() => {
uni.redirectTo({
url: '/bundle/recharge/card'
});
}, 500);
},
});
} else {
self.loadding = false;
uni.showToast({
title: '创建订单失败',
icon: 'none'
});
return
}
}
)
} catch (error) {
console.log("🚀 ~ pay error res:", res)
self.result = 'fail'
self.loadding = false;
uni.showToast({
title: '支付失败',
icon: 'none'
});
setTimeout(() => {
uni.navigateBack({delta: 1})
}, 500);
}
},
}
}
@ -227,4 +284,39 @@
text-align: center;
}
}
.notice-popup {
padding: 20rpx 0;
width: 100%;
.title {
font-size: 36rpx;
color: #303133;
line-height: 50rpx;
text-align: center;
}
.desc {
margin-top: 48rpx;
font-weight: 400;
font-size: 32rpx;
color: #303133;
line-height: 52rpx;
text-align: center;
}
.rule {
margin-bottom: 18rpx;
text-align: left;
}
.rule1 {
font-weight: 400;
font-size: 32rpx;
color: #303133;
line-height: 44rpx;
text-align: left;
margin-bottom: 10rpx;
}
}
</style>

View File

@ -56,8 +56,7 @@
<view class="title1 d-b-c">
<view>折扣优惠</view>
<view>
<text style="margin-right: 6rpx;color: #FA2B21;"> - </text>
<price-format color="#FA2B21" :subscript-size="30" :first-size="30" :second-size="30" :price="bill.dis"></price-format>
<price-format color="#FA2B21" :subscript-size="30" :first-size="30" :second-size="30" :price="bill.dis" :showSubscript="false"></price-format>
</view>
</view>
</view>
@ -77,7 +76,7 @@
<view class="d-f d-c j-c-b">
<view>
合计: <price-format color="#FF5951" :subscript-size="26" :first-size="40" :second-size="40" :price="bill.total"></price-format>
<text style="margin-left: 10rpx;color: #FA2B21;font-size: 26rpx;">8折</text>
<text style="margin-left: 10rpx;color: #FA2B21;font-size: 26rpx;">{{ userDiscount }}折</text>
</view>
<view class="d-f j-c-c a-i-c" style="margin-top: 10rpx;" @click="closeBillPopup">
<view class="price-detail">费用明细</view>
@ -99,24 +98,91 @@
<text class="f34 fb">会员卡选择</text>
</view>
<view class="bg-white card" @click="selectCard">
<view class="card-item">
<view class="bg-white card">
<view class="card-item" :class="currentType == 1 ? 'active' : ''" @click="currentType = 1">
<view class="d-f a-i-c">
<view class="card-title">白会员卡</view>
<view class="card-title">白会员卡</view>
<view class="d-f a-i-c">
<view class="discount">享</view>
<view class="sale">
<text>9.5</text>
<text>{{ balance.discount1 }}</text>
<text>折</text>
</view>
</view>
</view>
<view class="d-f a-i-c">
<view class="card-balance">¥212.00</view>
<view class="card-balance">¥{{ userBalance.balance1 }}</view>
<view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
</view>
</view>
<view class="card-item" :class="currentType == 2 ? 'active' : ''" @click="currentType = 2">
<view class="d-f a-i-c">
<view class="card-title">黄金会员卡</view>
<view class="d-f a-i-c">
<view class="discount">享</view>
<view class="sale">
<text>{{ balance.discount2 }}</text>
<text>折</text>
</view>
</view>
</view>
<view class="d-f a-i-c">
<view class="card-balance">¥{{ userBalance.balance2 }}</view>
<view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
</view>
</view>
<view class="card-item" :class="currentType == 3 ? 'active' : ''" @click="currentType = 3">
<view class="d-f a-i-c">
<view class="card-title">铂金会员卡</view>
<view class="d-f a-i-c">
<view class="discount">享</view>
<view class="sale">
<text>{{ balance.discount3 }}</text>
<text>折</text>
</view>
</view>
</view>
<view class="d-f a-i-c">
<view class="card-balance">¥{{ userBalance.balance3 }}</view>
<view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
</view>
</view>
<view class="card-item" :class="currentType == 4 ? 'active' : ''" @click="currentType = 4">
<view class="d-f a-i-c">
<view class="card-title">钻石会员卡</view>
<view class="d-f a-i-c">
<view class="discount">享</view>
<view class="sale">
<text>{{ balance.discount4 }}</text>
<text>折</text>
</view>
</view>
</view>
<view class="d-f a-i-c">
<view class="card-balance">¥{{ userBalance.balance4 }}</view>
<view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
</view>
</view>
<view class="card-item" :class="currentType == 5 ? 'active' : ''" @click="currentType = 5">
<view class="d-f a-i-c">
<view class="card-title">至尊会员卡</view>
<view class="d-f a-i-c">
<view class="discount">享</view>
<view class="sale">
<text>{{ balance.discount5 }}</text>
<text>折</text>
</view>
</view>
</view>
<view class="d-f a-i-c">
<view class="card-balance">¥{{ userBalance.balance5 }}</view>
<view class="icon-box d-c-c card-checkout"><span class="icon iconfont icon-xuanze"></span></view>
</view>
</view>
<view class="card-btn" @click="confirmCard">确定</view>
</view>
</view>
@ -208,15 +274,15 @@
</view>
<view class="icon-box d-c-c"><span class="icon iconfont icon-xuanze"></span></view>
</view>
<view :class="payType == 'balance' ? 'item active' : 'item'" @tap="payTypeFunc('balance')">
<view :class="payType >= 1 ? 'item active' : 'item'" @tap="payTypeFunc('balance')">
<view class="d-s-c">
<view class="icon-box d-c-c mr10"><span class="icon iconfont icon-yue"></span></view>
<text class="key">平台余额</text>
</view>
<view class="d-f a-i-c">
<view class="mr10 dis" v-if="balance > 0">
<view class="mr10 dis" v-if="userAccount > 0">
<!-- <text class="key">余额支付(剩余{{balance}})</text> -->
铂金会员卡 <text style="color: #FF5951;">9.3</text>
{{ cardType() }} <text style="color: #FF5951;">{{ userDiscount }}</text>
</view>
<view class="icon-box d-c-c"><span class="icon iconfont icon-xuanze"></span></view>
</view>
@ -280,13 +346,16 @@
total: 0 // 总价
},
payType: 'wxpay', // 支付方式 wxpay\balance
balance: 0,
order: {},
result: '',
loadding: true,
_submitting: false,
balancePopup: false,
balance: 0
balance: {},
userBalance: {},
currentType: '', // 选择的会员卡类型
userAccount: 0,
userDiscount: 0
};
},
@ -298,6 +367,7 @@
this.basketballDate = args.date || null; // 篮球场预约时间
console.log("🚀 ~ this.date:", this.date)
this.getData();
this.getRecharge()
},
onUnload() {
@ -312,6 +382,10 @@
methods: {
// 判断 payType 是否为整数
isPayTypeInt() {
return Number.isInteger(Number(this.payType));
},
getData() {
let self = this;
uni.showLoading({
@ -394,6 +468,7 @@
},
// 计算费用明细
countPrice() {
let self = this;
uni.showLoading({
@ -476,7 +551,7 @@
};
oldWxPay.call(this);
setTimeout(finish, 3000); // 兜底3秒自动解锁
} else if (this.payType == 'balance') {
} else if (this.payType >= 1) {
const oldBalancePay = this.balancePay;
this.balancePay = (...args) => {
oldBalancePay.apply(this, args);
@ -571,7 +646,8 @@
'ground.ground/yuePay',
{
app_id: self.getAppId(),
order_id: this.orderId
order_id: this.orderId,
pay_type: this.currentType
},
function(res) {
if (res.code == 1) {
@ -613,6 +689,47 @@
}
},
getRecharge() {
let self = this;
uni.showLoading({
title: '加载中'
});
// 获取充值
self._post(
'ground.ground/groundSetting',
{
app_id: self.getAppId(),
},
function(res) {
self.balance = res.data.lists.balance;
}
)
// 获取充值
self._post('user.index/detail', {
source: self.getPlatform()
}, function(res) {
console.log("🚀 ~ res:", res)
self.userBalance = res.data.userInfo;
self.loadding = false;
uni.hideLoading();
});
},
cardType() {
if (this.currentType == 1) {
return '白银会员卡'
} else if (this.currentType == 2) {
return '黄金会员卡'
} else if (this.currentType == 3) {
return '铂金会员卡'
} else if (this.currentType == 4) {
return '钻石会员卡'
} else if (this.currentType == 5) {
return '至尊会员卡'
}
},
// 选择会员卡
selectCard() {
this.balance = 200; // 模拟选择会员卡后的余额
@ -620,6 +737,18 @@
// 确认选择
confirmCard() {
if (this.userBalance['balance' + this.currentType] <= 0) {
uni.showToast({
title: '余额不足,请选择其他会员卡',
icon: 'none'
});
return;
}
this.userAccount = this.userBalance['balance' + this.currentType];
this.userDiscount = this.balance['discount' + this.currentType];
this.payType = this.currentType;
this.countPrice();
this.balancePopup = false;
}
}

View File

@ -365,8 +365,8 @@ export default {
// 处理导航
handleLocation() {
uni.openLocation({
latitude: this.venue.latitude,
longitude: this.venue.longitude,
latitude: Number(this.venue.latitude),
longitude: Number(this.venue.longitude),
name: this.venue.name,
address: this.venue.address,
scale: 18
@ -437,7 +437,6 @@ export default {
// 篮球场-立即预约
toReserve() {
let self = this
// 一进来就锁定,彻底防止高频点击
if (self.typeId == 1) {
if (self.selectedReserveTime.length === 0) {
@ -459,7 +458,8 @@ export default {
app_id: self.getAppId(),
ground_id: self.id,
room_list: JSON.stringify(self.selectedReserveTime),
type: this.typeId
type: this.typeId,
start_end: self.selectedReserveTime[0].start_time + '-' + self.selectedReserveTime[self.selectedReserveTime.length -1].end_time
},
function(res) {
self.loadding = false;
@ -515,54 +515,6 @@ export default {
},
handleSelectTime(title, time, status) {
// if (status == 1) {
// return;
// }
// // 多选逻辑selectedTime为对象按title区分
// if (!this.selectedTime[title]) {
// this.$set(this.selectedTime, title, []);
// }
// const idx = this.selectedTime[title].indexOf(time);
// if (idx > -1) {
// // 已选中则取消
// this.selectedTime[title].splice(idx, 1);
// } else {
// // 未选中则添加
// this.selectedTime[title].push(time);
// }
// this.countSelectedTime = Object.values(this.selectedTime).reduce((acc, times) => acc + times.length, 0);
// this.totalPrice()
// // 生成 room_list 数组格式weekList[this.currentWeek]?.value?.join('') || '';
// const day_title = this.weekList[this.currentWeek]?.day || '';
// // 遍历所有已选时间,生成 room_list
// const room_list = [];
// Object.keys(this.selectedTime).forEach(roomTitle => {
// const rid = this.cdList.find(cd => cd.title === roomTitle)?.id || 1;
// this.selectedTime[roomTitle].forEach(t => {
// // t 可能是 '09:00-10:00' 或 '09:00', 需拆分
// let start_time = t, end_time = '';
// if (t.includes('-')) {
// [start_time, end_time] = t.split('-');
// } else {
// start_time = t;
// // 假设每个时间段为1小时自动+1小时
// const [h, m] = t.split(':');
// const nextH = (parseInt(h, 10) + 1).toString().padStart(2, '0');
// end_time = `${nextH}:${m}`;
// }
// room_list.push({
// room_id: rid,
// // day_time,
// // day_title,
// start_time,
// end_time,
// hours: '1'
// });
// });
// });
// this.selectedReserveTime = room_list;
if (status == 1) {
return;
}

View File

@ -7,11 +7,15 @@
</view>
</view>
<view :style="'background: url(https://xh.stnav.com/uploads/sport/ground2.png) no-repeat; background-size:100% auto;'">
<view v-if="thisindex == 0"><diy style="position: relative;" :diyItems="items"></diy></view>
<!-- <view v-if="thisindex == 0"><diy style="position: relative;" :diyItems="items"></diy></view> -->
<view class="banner">
<banner :itemData="bannerData"></banner>
</view>
<view class="notice">
<view class="notice" v-if="setting.notice">
<image style="width: 40rpx;height: 40rpx;" src="@/static/icon/notice.png" mode=""></image>
<view class="notice-txt">{{ notice.notice_title }}</view>
<view class="notice-txt">{{ setting.notice }}</view>
</view>
<!-- 预约球馆 -->
@ -65,12 +69,12 @@
<view class="">
<view class="d-f">
<image style="width: 24rpx;height: 24rpx;margin-top: 4rpx;" src="@/static/icon/address.png" mode=""></image>
<view class="address-time">{{ company.name }}</view>
<view class="address-time">{{ setting.company.address }}</view>
</view>
<view class="d-f" style="margin-top: 8rpx;">
<image style="width: 24rpx;height: 24rpx;margin-top: 2rpx" src="@/static/icon/time.png" mode=""></image>
<view class="address-time" style="height: 32rpx;">营业时间{{ company.start_time }}-{{ company.end_time }}</view>
<view class="address-time" style="height: 32rpx;">营业时间{{ setting.company.day_time }}</view>
</view>
</view>
<view class="d-f">
@ -126,6 +130,8 @@ import navBar from '@/components/navBar/navBar.vue';
import uniLoadMore from '@/components/uni-load-more.vue';
import searchProduct from '@/components/searchProduct.vue';
import { BallType } from '@/common/ball.js';
import banner from '@/components/diy/banner/banner.vue';
export default {
components: {
diy,
@ -133,7 +139,8 @@ export default {
navBar,
uniLoadMore,
searchProduct,
Popup
Popup,
banner
},
data() {
return {
@ -184,7 +191,15 @@ export default {
tipsPopup: false,
venueList: [], // 场馆列表
notice: '',
company: {}
company: {},
setting: {
carousel: {},
company: {}
},
bannerData: {
data: [],
style: {btnColor: "#ffffff", background: "#ffffff", btnShape: "round", imgShape: "round", height: "330"}
},
};
},
watch: {
@ -265,6 +280,23 @@ export default {
},
})
}
// 获取配置
self._post(
'ground.ground/groundSetting',
{
app_id: self.getAppId()
},
function(res) {
if (res.code) {
self.setting = res.data.lists;
res.data.lists.carousel.map(items => {
console.log("🚀 ~ items:", items)
self.bannerData.data.push({imgUrl: items.file_path, height: '400px'})
})
}
}
)
},
onPullDownRefresh() {
if (this.thisindex == 0) {
@ -587,19 +619,21 @@ export default {
// 处理导航
handleLocation() {
console.log(123)
console.log(this.setting.company)
uni.openLocation({
latitude: this.company.latitude,
longitude: this.company.longitude,
name: this.company.name,
address: this.company.address,
scale: 18
});
latitude: Number(this.setting.company.latitude),
longitude: Number(this.setting.company.longitude),
name: this.setting.company.address,
address: this.setting.company.address,
scale: 18,
})
},
// 处理拨打电话
handleCall() {
uni.makePhoneCall({
phoneNumber: this.company.phone
phoneNumber: this.setting.company.contact
});
},

View File

@ -527,8 +527,8 @@
// 导航
location() {
uni.openLocation({
latitude: this.venue.latitude, // 纬度,范围为-90~90负数表示南纬
longitude: this.venue.longitude, // 经度,范围为-180~180负数表示西经
latitude: Number(this.venue.latitude), // 纬度,范围为-90~90负数表示南纬
longitude: Number(this.venue.longitude), // 经度,范围为-180~180负数表示西经
scale: 18, // 缩放比例
name: this.venue.name,
address: this.venue.address
@ -792,188 +792,188 @@ page {
}
.time-popup {
position: relative;
position: relative;
.title {
font-size: 36rpx;
color: #121212;
line-height: 50rpx;
}
.pt42 {
padding-top: 42rpx;
}
.notice {
margin-top: 30rpx;
width: 100%;
height: 56rpx;
background: #FFFBE5;
padding: 10rpx 30rpx;
font-weight: 500;
font-size: 26rpx;
color: #E2950F;
line-height: 48rpx;
text-align: left;
}
.time-item {
margin-right: 32rpx;
font-weight: 400;
font-size: 32rpx;
color: #303133;
line-height: 44rpx;
height: 62rpx;
}
.time-item-line {
width: 60rpx;
height: 10px;
background-color: #365A9A;
border-radius: 6rpx;
}
.active {
color: #365A9A;
font-size: 32rpx;
line-height: 44rpx;
}
.active:after {
content: '';
display: block;
width: 60rpx;
height: 10rpx;
background-color: #365A9A;
border-radius: 6rpx;
margin: 8rpx auto 0 auto;
}
/* 日期网格:一行四个,间距 20rpx */
.date-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20rpx 20rpx; /* 行间距和列间距均为 20rpx */
padding: 0 30rpx; /* 保持与上方时间切换区域一致的左右内边距 */
}
.date-item {
background-color: #F7F7F7;
border-radius: 10rpx;
height: 72rpx; /* 可按需调整高度 */
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
color: #303133;
box-sizing: border-box;
}
/* 可选:选中样式 */
.date-item.active {
border-color: #365A9A;
color: #365A9A;
box-shadow: 0 4rpx 10rpx rgba(54,90,154,0.08);
}
.price {
margin-top: 100rpx;
.line {
height: 2rpx;
background: #E5E5E5;
width: 100%;
}
.price-block {
margin: 42rpx 22rpx;
}
.price-detail {
color: #365A9A;
font-size: 24rpx;
line-height: 34rpx;
}
.price-btn {
width: 368rpx;
height: 90rpx;
line-height: 90rpx;
text-align: center;
background: #365A9A;
border-radius: 8rpx;
font-size: 32rpx;
color: #FFF;
}
}
}
.bill-info {
border-radius: 16rpx;
margin: 32rpx 30rpx 22rpx;
padding: 48rpx 30rpx 30rpx;
.title1 {
font-size: 30rpx;
color: #303133;
line-height: 42rpx;
}
.title2 {
margin-top: 12rpx;
font-weight: 400;
font-size: 24rpx;
color: #909399;
line-height: 34rpx;
}
.line {
border: 2rpx solid #F6F7F9;
margin: 34rpx 0 30rpx;
}
.title3 {
font-size: 30rpx;
color: #303133;
line-height: 42rpx;
}
}
.face {
width: 692rpx;
height: 80rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
border: 2rpx solid #FAEED9;
color: #E2950F;
padding: 0 30rpx;
margin: 18rpx 30rpx 0;
box-sizing: border-box;
.face-title {
}
.title {
font-size: 36rpx;
color: #121212;
line-height: 50rpx;
}
/* 日期网格:一行三个,间距 20rpx */
.date-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20rpx 20rpx; /* 行间距和列间距均为 20rpx */
}
.pt42 {
padding-top: 42rpx;
}
.date-time-btn {
width: 100%;
height: 60rpx;
line-height: 60rpx;
background: #365A9A;
color: #fff;
font-size: 26rpx;
border-radius: 10rpx;
text-align: center;
}
.notice {
margin-top: 30rpx;
width: 100%;
height: 56rpx;
background: #FFFBE5;
padding: 10rpx 30rpx;
font-weight: 500;
font-size: 26rpx;
color: #E2950F;
line-height: 48rpx;
text-align: left;
}
.notice-popup {
.time-item {
margin-right: 32rpx;
font-weight: 400;
font-size: 32rpx;
color: #303133;
line-height: 44rpx;
height: 62rpx;
}
.time-item-line {
width: 60rpx;
height: 10px;
background-color: #365A9A;
border-radius: 6rpx;
}
.active {
color: #365A9A;
font-size: 32rpx;
line-height: 44rpx;
}
.active:after {
content: '';
display: block;
width: 60rpx;
height: 10rpx;
background-color: #365A9A;
border-radius: 6rpx;
margin: 8rpx auto 0 auto;
}
/* 日期网格:一行四个,间距 20rpx */
.date-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20rpx 20rpx; /* 行间距和列间距均为 20rpx */
padding: 0 30rpx; /* 保持与上方时间切换区域一致的左右内边距 */
}
.date-item {
background-color: #F7F7F7;
border-radius: 10rpx;
height: 72rpx; /* 可按需调整高度 */
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
color: #303133;
box-sizing: border-box;
}
/* 可选:选中样式 */
.date-item.active {
border-color: #365A9A;
color: #365A9A;
box-shadow: 0 4rpx 10rpx rgba(54,90,154,0.08);
}
.price {
margin-top: 100rpx;
.line {
height: 2rpx;
background: #E5E5E5;
width: 100%;
}
.price-block {
margin: 42rpx 22rpx;
}
.price-detail {
color: #365A9A;
font-size: 24rpx;
line-height: 34rpx;
}
.price-btn {
width: 368rpx;
height: 90rpx;
line-height: 90rpx;
text-align: center;
background: #365A9A;
border-radius: 8rpx;
font-size: 32rpx;
color: #FFF;
}
}
}
.bill-info {
border-radius: 16rpx;
margin: 32rpx 30rpx 22rpx;
padding: 48rpx 30rpx 30rpx;
.title1 {
font-size: 30rpx;
color: #303133;
line-height: 42rpx;
}
.title2 {
margin-top: 12rpx;
font-weight: 400;
font-size: 24rpx;
color: #909399;
line-height: 34rpx;
}
.line {
border: 2rpx solid #F6F7F9;
margin: 34rpx 0 30rpx;
}
.title3 {
font-size: 30rpx;
color: #303133;
line-height: 42rpx;
}
}
.face {
width: 692rpx;
height: 80rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
border: 2rpx solid #FAEED9;
color: #E2950F;
padding: 0 30rpx;
margin: 18rpx 30rpx 0;
box-sizing: border-box;
.face-title {
}
}
/* 日期网格:一行三个,间距 20rpx */
.date-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20rpx 20rpx; /* 行间距和列间距均为 20rpx */
}
.date-time-btn {
width: 100%;
height: 60rpx;
line-height: 60rpx;
background: #365A9A;
color: #fff;
font-size: 26rpx;
border-radius: 10rpx;
text-align: center;
}
.notice-popup {
padding: 20rpx 0;
width: 100%;
@ -1007,32 +1007,32 @@ page {
margin-bottom: 10rpx;
}
.btn {
font-size: 32rpx;
display: flex;
justify-content: center;
align-items: center;
margin-top: 44rpx;
.btn {
font-size: 32rpx;
display: flex;
justify-content: center;
align-items: center;
margin-top: 44rpx;
.btn1 {
width: 240rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background: #F6F7F8;
border-radius: 8rpx;
margin-right: 30rpx;
}
.btn1 {
width: 240rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background: #F6F7F8;
border-radius: 8rpx;
margin-right: 30rpx;
}
.btn2 {
width: 240rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background: #365A9A;
color: #FFFFFF;
border-radius: 8rpx;
}
.btn2 {
width: 240rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background: #365A9A;
color: #FFFFFF;
border-radius: 8rpx;
}
}
}
</style>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 132 KiB