Compare commits
2 Commits
18e0423699
...
8854cdd32d
| Author | SHA1 | Date | |
|---|---|---|---|
| 8854cdd32d | |||
| bd461f3e18 |
87
bundle/combo/combo-list.vue
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<navbar title="套餐卡"></navbar>
|
||||||
|
|
||||||
|
<view style="margin-top: 20px;">
|
||||||
|
<!-- 青年卡 -->
|
||||||
|
<view class="pr d-c-c mb-20" @click="jumpPage('/bundle/combo/details?type=youth')">
|
||||||
|
<view class="pr">
|
||||||
|
<image src="https://xh.stnav.com/uploads/sport/qnk.png" style="width: 690rpx; height: 300rpx;" />
|
||||||
|
<view class="kt-btn-bg">
|
||||||
|
<view>立即开通</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 成人卡 -->
|
||||||
|
<view class="pr d-c-c mb-20" @click="jumpPage('/bundle/combo/details?type=adult')">
|
||||||
|
<view class="pr">
|
||||||
|
<image src="https://xh.stnav.com/uploads/sport/crk.png" style="width: 690rpx; height: 300rpx;" />
|
||||||
|
<view class="kt-btn-bg">
|
||||||
|
<view>立即开通</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 亲子卡 -->
|
||||||
|
<view class="pr d-c-c" @click="jumpPage('/bundle/combo/details?type=family')">
|
||||||
|
<view class="pr">
|
||||||
|
<image src="https://xh.stnav.com/uploads/sport/qzk.png" style="width: 690rpx; height: 300rpx;" />
|
||||||
|
<view class="kt-btn-bg">
|
||||||
|
<view>立即开通</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import navbar from '@/components/navbar.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
navbar,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/*跳转页面*/
|
||||||
|
jumpPage(path) {
|
||||||
|
this.gotoPage(path);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
page {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kt-btn-bg {
|
||||||
|
position: absolute;
|
||||||
|
left: 34rpx;
|
||||||
|
bottom: 44rpx;
|
||||||
|
background-image: url(https://xh.stnav.com/uploads/sport/kt-btn.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 258rpx;
|
||||||
|
height: 56rpx;
|
||||||
|
line-height: 56rpx;
|
||||||
|
color: #F62036;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
& view {
|
||||||
|
padding-left: 60rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb-20 {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
772
bundle/combo/details.vue
Normal file
@ -0,0 +1,772 @@
|
|||||||
|
<template>
|
||||||
|
<view class="page-container">
|
||||||
|
<!-- Top Background & Card -->
|
||||||
|
<view class="top-section">
|
||||||
|
<!-- 成人卡 -->
|
||||||
|
<template v-if="comboType === 'adult'">
|
||||||
|
<image class="bg-img" src="https://xh.stnav.com/uploads/sport/crk-bg.png"></image>
|
||||||
|
|
||||||
|
<!-- 添加的卡片文字内容 -->
|
||||||
|
<view class="card-text-content" :style="{ top: (statusBarHeight + navHeight + 20) + 'px' }">
|
||||||
|
<view class="card-title">
|
||||||
|
<view class="en">Adult Card</view>
|
||||||
|
<view class="zh">成人卡</view>
|
||||||
|
</view>
|
||||||
|
<view class="card-date">
|
||||||
|
<image class="diamond" src="https://xh.stnav.com/uploads/sport/icon_zs.png" mode="aspectFit"></image>
|
||||||
|
<text>有效期:2026.03.05到期</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 青年卡 -->
|
||||||
|
<template v-if="comboType === 'youth'">
|
||||||
|
<image class="bg-img" src="https://xh.stnav.com/uploads/sport/qnk-bg.png"></image>
|
||||||
|
|
||||||
|
<!-- 添加的卡片文字内容 -->
|
||||||
|
<view class="card-text-content" :style="{ top: (statusBarHeight + navHeight + 20) + 'px' }">
|
||||||
|
<view class="card-title">
|
||||||
|
<view class="en">Adult Card</view>
|
||||||
|
<view class="zh">青年卡</view>
|
||||||
|
</view>
|
||||||
|
<view class="card-date">
|
||||||
|
<image class="diamond" src="https://xh.stnav.com/uploads/sport/icon_zs.png" mode="aspectFit"></image>
|
||||||
|
<text>有效期:2026.03.05到期</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 亲子卡 -->
|
||||||
|
<template v-if="comboType === 'family'">
|
||||||
|
<image class="bg-img" src="https://xh.stnav.com/uploads/sport/qzk-bg.png"></image>
|
||||||
|
|
||||||
|
<!-- 添加的卡片文字内容 -->
|
||||||
|
<view class="card-text-content" :style="{ top: (statusBarHeight + navHeight + 20) + 'px' }">
|
||||||
|
<view class="card-title-parten">
|
||||||
|
<view class="en">Adult Card</view>
|
||||||
|
<view class="zh">亲子卡</view>
|
||||||
|
</view>
|
||||||
|
<view class="card-date">
|
||||||
|
<image class="diamond" src="https://xh.stnav.com/uploads/sport/icon_zs.png" mode="aspectFit"></image>
|
||||||
|
<text>有效期:2026.03.05到期</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<view class="nav-header" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||||||
|
<view class="nav-content" :style="{ height: navHeight + 'px' }">
|
||||||
|
<image class="back-icon" src="@/static/icon/back3.png" @click="goBack" mode="aspectFit"></image>
|
||||||
|
<text class="nav-title">我的会员</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- Rights Content -->
|
||||||
|
<view class="content-section">
|
||||||
|
<view class="section-title">
|
||||||
|
<image src="https://xh.stnav.com/uploads/sport/hyqy.png" mode="heightFix" style="height: 40rpx;"></image>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="rights-list">
|
||||||
|
<view class="right-item">
|
||||||
|
<view class="icon-circle">
|
||||||
|
<image src="https://xh.stnav.com/uploads/sport/icon_vip.png" style="width: 80rpx; height: 80rpx;"></image>
|
||||||
|
</view>
|
||||||
|
<view class="right-info">
|
||||||
|
<view class="right-name">VIP优惠</view>
|
||||||
|
<view class="right-desc">每次打球立享折扣,运动更划算</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="right-item">
|
||||||
|
<view class="icon-circle">
|
||||||
|
<image src="https://xh.stnav.com/uploads/sport/icon_money.png" style="width: 80rpx; height: 80rpx;"></image>
|
||||||
|
</view>
|
||||||
|
<view class="right-info">
|
||||||
|
<view class="right-name">入场不限次</view>
|
||||||
|
<view class="right-desc">凭有效凭证不限次进出场地,自由通行</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="right-item">
|
||||||
|
<view class="icon-circle">
|
||||||
|
<image src="https://xh.stnav.com/uploads/sport/icon_service.png" style="width: 80rpx; height: 80rpx;"></image>
|
||||||
|
</view>
|
||||||
|
<view class="right-info">
|
||||||
|
<view class="right-name">专属客服</view>
|
||||||
|
<view class="right-desc">任何问题将由专属客服优先跟进处理</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- Rules Box -->
|
||||||
|
<view class="rules-box">
|
||||||
|
<view class="rules-tag">
|
||||||
|
<image src="https://xh.stnav.com/uploads/sport/jshy.png" style="width: 100rpx; height: 80rpx;"></image>
|
||||||
|
</view>
|
||||||
|
<view class="rules-title">权益说明</view>
|
||||||
|
<view class="rules-subtitle">更多会员专属权益与服务内容</view>
|
||||||
|
<view class="rules-list">
|
||||||
|
<view class="rule-item">· 这里是权益说明内容,这里是内容</view>
|
||||||
|
<view class="rule-item">· 这里是权益说明内容,这里是内容</view>
|
||||||
|
<view class="rule-item">· 这里是权益说明内容,这里是内容</view>
|
||||||
|
<view class="rule-item">· 这里是权益说明内容,这里是内容</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- Bottom Button -->
|
||||||
|
<view class="bottom-bar">
|
||||||
|
<view class="btn-submit" @click="handleSubmit">立即开通</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 完善信息提示弹窗 -->
|
||||||
|
<view class="modal-container" v-if="showInfoModal">
|
||||||
|
<view class="modal-mask" @click="closeInfoModal"></view>
|
||||||
|
<view class="modal-content">
|
||||||
|
<view class="modal-header">
|
||||||
|
<text class="modal-title">温馨提示</text>
|
||||||
|
<view class="close-icon" @click="closeInfoModal">×</view>
|
||||||
|
</view>
|
||||||
|
<view class="modal-desc">检测到您未填写相关信息,为不影响使用请尽快完善</view>
|
||||||
|
<view class="modal-btn" @click="goToFillInfo">立即去完善</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 会员购买弹窗 -->
|
||||||
|
<view class="buy-modal-container" v-if="showBuyModal">
|
||||||
|
<view class="buy-modal-mask" @click="closeBuyModal"></view>
|
||||||
|
<view class="buy-modal-content">
|
||||||
|
<view class="buy-modal-title">会员购买</view>
|
||||||
|
|
||||||
|
<view class="plan-list">
|
||||||
|
<view class="plan-item" :class="{ active: selectedPlan === 0 }" @click="selectPlan(0)">
|
||||||
|
<view class="plan-name">月卡</view>
|
||||||
|
<view class="plan-price">
|
||||||
|
<text style="font-size: 24rpx; margin-right: 4rpx;">¥</text>
|
||||||
|
<text>50.00</text>
|
||||||
|
</view>
|
||||||
|
<view class="plan-desc">指导价50元/月</view>
|
||||||
|
<view class="check-mark"></view>
|
||||||
|
</view>
|
||||||
|
<view class="plan-item" :class="{ active: selectedPlan === 1 }" @click="selectPlan(1)">
|
||||||
|
<view class="plan-name">季卡</view>
|
||||||
|
<view class="plan-price">
|
||||||
|
<text style="font-size: 24rpx; margin-right: 4rpx;">¥</text>
|
||||||
|
<text>128.00</text>
|
||||||
|
</view>
|
||||||
|
<view class="plan-desc">指导价128元/季</view>
|
||||||
|
<view class="check-mark"></view>
|
||||||
|
</view>
|
||||||
|
<view class="plan-item" :class="{ active: selectedPlan === 2 }" @click="selectPlan(2)">
|
||||||
|
<view class="plan-name">年卡</view>
|
||||||
|
<view class="plan-price">
|
||||||
|
<text style="font-size: 24rpx; margin-right: 4rpx;">¥</text>
|
||||||
|
<text>218.00</text>
|
||||||
|
</view>
|
||||||
|
<view class="plan-desc">指导价218元/年</view>
|
||||||
|
<view class="check-mark"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="buy-modal-tips">
|
||||||
|
提示文字在此处显示提示文字在此处显示提示文字在此处显示提示文字在此处显示提示文字在此处显示
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="buy-modal-btn" @click="confirmBuy">立即开通</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 购买成功弹窗 -->
|
||||||
|
<view class="success-modal-container" v-if="showSuccessModal">
|
||||||
|
<view class="success-modal-mask" @click="closeSuccessModal"></view>
|
||||||
|
<view class="success-modal-content">
|
||||||
|
<view class="success-img-wrapper">
|
||||||
|
<image class="success-img" src="https://xh.stnav.com/uploads/sport/buy-success.png" mode="widthFix"></image>
|
||||||
|
<view class="success-confirm-btn" @click="closeSuccessModal">确定</view>
|
||||||
|
</view>
|
||||||
|
<image class="success-close" src="https://xh.stnav.com/uploads/sport/icon_close2.png" mode="aspectFit" @click="closeSuccessModal"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
statusBarHeight: 20,
|
||||||
|
navHeight: 44,
|
||||||
|
comboType: 'adult', // 套餐类型:adult(成人卡) youth(青年卡) family(亲子卡)
|
||||||
|
showInfoModal: false, // 完善信息提示弹窗
|
||||||
|
showBuyModal: false, // 会员购买弹窗
|
||||||
|
showSuccessModal: false, // 购买成功弹窗
|
||||||
|
selectedPlan: 0, // 选择的套餐
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
let sysInfo = uni.getSystemInfoSync();
|
||||||
|
this.statusBarHeight = sysInfo.statusBarHeight;
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
|
||||||
|
this.navHeight = menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
onLoad(args) {
|
||||||
|
this.comboType = args.type || 'adult'
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
goBack() {
|
||||||
|
uni.navigateBack();
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSubmit() {
|
||||||
|
this.showSuccessModal = true;
|
||||||
|
return false
|
||||||
|
//TODO 如果信息审核没有通过,uni.showToast提示"信息审核没通过,请耐心等待"
|
||||||
|
|
||||||
|
// 检测是否填写过表单信息,没有的话需要跳转到信息完善页面
|
||||||
|
// 测试:默认 true 弹出购买弹窗。如果为 false 弹出提示完善信息弹窗
|
||||||
|
const hasFilledInfo = true;
|
||||||
|
if (!hasFilledInfo) {
|
||||||
|
this.showInfoModal = true;
|
||||||
|
} else {
|
||||||
|
// 已经填写过信息,弹出开通会员弹窗
|
||||||
|
this.showBuyModal = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
closeInfoModal() {
|
||||||
|
this.showInfoModal = false;
|
||||||
|
},
|
||||||
|
goToFillInfo() {
|
||||||
|
this.showInfoModal = false;
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/bundle/combo/info?type=' + this.comboType
|
||||||
|
});
|
||||||
|
},
|
||||||
|
closeBuyModal() {
|
||||||
|
this.showBuyModal = false;
|
||||||
|
},
|
||||||
|
selectPlan(index) {
|
||||||
|
this.selectedPlan = index;
|
||||||
|
},
|
||||||
|
confirmBuy() {
|
||||||
|
this.showBuyModal = false;
|
||||||
|
uni.showToast({ title: '正在为您开通...', icon: 'none' });
|
||||||
|
setTimeout(() => {
|
||||||
|
this.showSuccessModal = true;
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
closeSuccessModal() {
|
||||||
|
this.showSuccessModal = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
page {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-container {
|
||||||
|
padding-bottom: 200rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-section {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 460rpx;
|
||||||
|
|
||||||
|
.bg-img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-text-content {
|
||||||
|
position: absolute;
|
||||||
|
left: 100rpx;
|
||||||
|
right: 80rpx;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
.en {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #D19A57;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
.zh {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #D19A57;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title-parten {
|
||||||
|
.en {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #834B08;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
.zh {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #834B08;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-date {
|
||||||
|
font-weight: 400;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
text-align: right;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #A47539;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.diamond {
|
||||||
|
width: 26rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
margin-right: 6rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-header {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.nav-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 34rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-icon {
|
||||||
|
position: absolute;
|
||||||
|
left: 30rpx;
|
||||||
|
width: 44rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-box {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
padding: 40rpx 30rpx 0;
|
||||||
|
|
||||||
|
.card-img {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-section {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 40rpx 40rpx 0 0;
|
||||||
|
padding: 10rpx 40rpx;
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 60rpx;
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 2rpx;
|
||||||
|
background-color: #D4B481;
|
||||||
|
margin: 0 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #A37F4B;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rights-list {
|
||||||
|
margin-bottom: 60rpx;
|
||||||
|
|
||||||
|
.right-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
|
||||||
|
.icon-circle {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background-color: #E8C18E;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-info {
|
||||||
|
.right-name {
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 36rpx;
|
||||||
|
color: #D19A57;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-desc {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #D19A57;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 34rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rules-box {
|
||||||
|
border: 2rpx solid #E8C18E;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 24rpx 30rpx;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.rules-tag {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 52rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rules-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rules-subtitle {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rule-item {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-bar {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20rpx 40rpx 60rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.btn-submit {
|
||||||
|
background: linear-gradient( 90deg, #F6E1B0 0%, #EDC66E 100%);
|
||||||
|
color: #333;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
height: 90rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 45rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 完善信息提示弹窗 */
|
||||||
|
.modal-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 100;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-mask {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
position: relative;
|
||||||
|
width: 560rpx;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 40rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 101;
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-desc {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 1.6;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 50rpx;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
line-height: 80rpx;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #3B5B9B;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 30rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 会员购买弹窗样式 */
|
||||||
|
.buy-modal-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 100;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buy-modal-mask {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.buy-modal-content {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 20rpx 20rpx 0 0;
|
||||||
|
padding: 50rpx 40rpx;
|
||||||
|
padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
|
||||||
|
z-index: 101;
|
||||||
|
|
||||||
|
.buy-modal-title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan-list {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
|
||||||
|
.plan-item {
|
||||||
|
width: 31%;
|
||||||
|
border: 2rpx solid #EEEEEE;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
padding: 38rpx 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border-color: #E8C18E;
|
||||||
|
background-color: #FFFDF8;
|
||||||
|
|
||||||
|
.check-mark {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan-name {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan-price {
|
||||||
|
font-size: 40rpx;
|
||||||
|
color: #E53935;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan-desc {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-mark {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
right: -2rpx;
|
||||||
|
bottom: -2rpx;
|
||||||
|
width: 44rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
background-color: #D4B481;
|
||||||
|
border-radius: 20rpx 0 0 0;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 18rpx;
|
||||||
|
top: 10rpx;
|
||||||
|
width: 8rpx;
|
||||||
|
height: 14rpx;
|
||||||
|
border-right: 3rpx solid #fff;
|
||||||
|
border-bottom: 3rpx solid #fff;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.buy-modal-tips {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #666;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buy-modal-btn {
|
||||||
|
background: linear-gradient( 90deg, #F6E1B0 0%, #EDC66E 100%);
|
||||||
|
color: #333;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
height: 90rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 45rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 购买成功弹窗 */
|
||||||
|
.success-modal-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 102;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-modal-mask {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-modal-content {
|
||||||
|
position: relative;
|
||||||
|
width: 580rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 103;
|
||||||
|
|
||||||
|
.success-img-wrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.success-img {
|
||||||
|
width: 100%;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-confirm-btn {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 60rpx;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 396rpx;
|
||||||
|
height: 88rpx;
|
||||||
|
background: linear-gradient( 90deg, #F6E1B0 0%, #EDC66E 100%);
|
||||||
|
border-radius: 44rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #5C3D10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.success-close {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
margin-top: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
371
bundle/combo/info.vue
Normal file
@ -0,0 +1,371 @@
|
|||||||
|
<template>
|
||||||
|
<view class="page-bg">
|
||||||
|
<navbar title="完善信息" bg="#F6F7F8"></navbar>
|
||||||
|
|
||||||
|
<view class="container" style="padding-top: 20px;">
|
||||||
|
<!-- 基本信息 -->
|
||||||
|
<view class="form-card">
|
||||||
|
<view class="section-title">
|
||||||
|
基本信息 <text class="required">*</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">姓名</view>
|
||||||
|
<input class="input" type="text" placeholder="请填写姓名" placeholder-class="placeholder-style" v-model="formData.name" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">出生年月</view>
|
||||||
|
<picker mode="date" @change="onDateChange">
|
||||||
|
<view class="picker-view" :class="{'has-value': formData.birth}">
|
||||||
|
<text>{{ formData.birth || '请选择出生年月' }}</text>
|
||||||
|
<image src="https://xh.stnav.com/uploads/sport/icon_down.png" style="width: 36rpx; height: 36rpx;" mode="aspectFit"></image>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item no-border">
|
||||||
|
<view class="label">身份证号</view>
|
||||||
|
<input class="input" type="idcard" placeholder="请输入身份证号码" placeholder-class="placeholder-style" v-model="formData.idCard" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 随行子女信息 -->
|
||||||
|
<view class="form-card" v-if="comboType === 'family'">
|
||||||
|
<view class="section-title">
|
||||||
|
随行子女信息 <text class="required">*</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">姓名</view>
|
||||||
|
<input class="input" type="text" placeholder="请填写姓名" placeholder-class="placeholder-style" v-model="formData.childName" />
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item">
|
||||||
|
<view class="label">出生年月</view>
|
||||||
|
<picker mode="date" @change="onChildDateChange">
|
||||||
|
<view class="picker-view" :class="{'has-value': formData.childBirth}">
|
||||||
|
<text>{{ formData.childBirth || '请选择出生年月' }}</text>
|
||||||
|
<image src="https://xh.stnav.com/uploads/sport/icon_down.png" style="width: 36rpx; height: 36rpx;" mode="aspectFit"></image>
|
||||||
|
</view>
|
||||||
|
</picker>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item no-border">
|
||||||
|
<view class="label">身份证号</view>
|
||||||
|
<input class="input" type="idcard" placeholder="请输入身份证号码" placeholder-class="placeholder-style" v-model="formData.childIdCard" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 联系方式 -->
|
||||||
|
<view class="form-card">
|
||||||
|
<view class="section-title">
|
||||||
|
联系方式 <text class="required">*</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="form-item-row no-border">
|
||||||
|
<view class="label">联系电话</view>
|
||||||
|
<input class="input-grey" type="number" placeholder="请填写联系方式" placeholder-class="placeholder-style-small" v-model="formData.phone" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 提示信息 -->
|
||||||
|
<view class="tips">
|
||||||
|
*提交表单申请,工作人员将在3个工作日内进行审核,如需及时了解,请直接电话咨询,我们将在第一时间解答
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 底部按钮 -->
|
||||||
|
<view class="footer-bar">
|
||||||
|
<view class="btn btn-default" @click="contactUs">联系我们</view>
|
||||||
|
<view class="btn btn-primary" @click="submitForm">提交申请</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 提交成功弹窗 -->
|
||||||
|
<view class="modal-container" v-if="showSuccessPopup">
|
||||||
|
<view class="modal-mask" @click="showSuccessPopup = false"></view>
|
||||||
|
<view class="modal-content">
|
||||||
|
<!-- 注:根据设计图比例此处设为280rpx,猜测28rpx属于笔误 -->
|
||||||
|
<image class="modal-icon" src="https://xh.stnav.com/uploads/sport/add-success.png" style="width: 280rpx; height: 280rpx;"></image>
|
||||||
|
<view class="modal-title">信息提交成功</view>
|
||||||
|
<view class="modal-desc">请您耐心等候,我们将尽快为您审核</view>
|
||||||
|
<view class="modal-btn" @click="confirmSuccess">好的</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import navbar from '@/components/navbar.vue';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
navbar,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showSuccessPopup: false,
|
||||||
|
comboType: 'adult', // 套餐类型:adult(成人卡) youth(青年卡) family(亲子卡)
|
||||||
|
formData: {
|
||||||
|
name: '',
|
||||||
|
birth: '',
|
||||||
|
idCard: '',
|
||||||
|
phone: '',
|
||||||
|
childName: '',
|
||||||
|
childBirth: '',
|
||||||
|
childIdCard: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(args) {
|
||||||
|
this.comboType = args.type || 'adult'
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onDateChange(e) {
|
||||||
|
this.formData.birth = e.detail.value;
|
||||||
|
},
|
||||||
|
onChildDateChange(e) {
|
||||||
|
this.formData.childBirth = e.detail.value;
|
||||||
|
},
|
||||||
|
contactUs() {
|
||||||
|
uni.showToast({ title: '正在连接客服...', icon: 'none' });
|
||||||
|
},
|
||||||
|
submitForm() {
|
||||||
|
if(!this.formData.name || !this.formData.birth || !this.formData.idCard || !this.formData.phone) {
|
||||||
|
return uni.showToast({ title: '请填写完整包含星号的信息', icon: 'none' });
|
||||||
|
}
|
||||||
|
if(this.comboType === 'family') {
|
||||||
|
if(!this.formData.childName || !this.formData.childBirth || !this.formData.childIdCard) {
|
||||||
|
return uni.showToast({ title: '请填写随行子女信息', icon: 'none' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.showSuccessPopup = true;
|
||||||
|
},
|
||||||
|
confirmSuccess() {
|
||||||
|
this.showSuccessPopup = false;
|
||||||
|
// 点击好的之后,可以跳转或返回上一页
|
||||||
|
uni.navigateBack();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
page {
|
||||||
|
background-color: #F6F7F8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-bg {
|
||||||
|
background-color: #F6F7F8;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 24rpx 30rpx 200rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-card {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
padding: 40rpx 30rpx;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.required {
|
||||||
|
color: #E53935;
|
||||||
|
margin-left: 8rpx;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
border-bottom: 2rpx solid #F5F5F5;
|
||||||
|
padding-bottom: 16rpx;
|
||||||
|
|
||||||
|
&.no-border {
|
||||||
|
border-bottom: none;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #666666;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
width: 100%;
|
||||||
|
height: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker-view {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #CCCCCC;
|
||||||
|
height: 60rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
&.has-value {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.arrow-down {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #CCCCCC;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
transform: scaleY(0.6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #333333;
|
||||||
|
width: 160rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-grey {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #F6F7F8;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder-style {
|
||||||
|
color: #CCCCCC;
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder-style-small {
|
||||||
|
color: #CCCCCC;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tips {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #666666;
|
||||||
|
line-height: 1.6;
|
||||||
|
padding: 20rpx 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-bar {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
background-color: #F6F7F8;
|
||||||
|
padding: 20rpx 30rpx;
|
||||||
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
flex: 1;
|
||||||
|
height: 88rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-default {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
color: #333333;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: #3B5B9B;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 100; // 遮罩层要在最上面
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-mask {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4); // 半透明黑色背景
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-content {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border-radius: 48rpx 48rpx 0 0;
|
||||||
|
padding: 70rpx 50rpx;
|
||||||
|
padding-bottom: calc(70rpx + env(safe-area-inset-bottom));
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 101; // 内容在遮罩层上方
|
||||||
|
|
||||||
|
.modal-icon {
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
font-size: 36rpx;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-desc {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-bottom: 174rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 88rpx;
|
||||||
|
line-height: 88rpx;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #3B5B9B;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 32rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
46
bundle/face/face-photo_bck.vue
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<face-bio-assay :isDev="false" :action="['StraightenHead']" ref="faceDetect" @detectFailed="photoChange" @photoChange="photoChange">
|
||||||
|
</face-bio-assay>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import faceBioAssay from '@/uni_modules/face-bio-assay/components/face-bio-assay/face-bio-assay.vue'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
faceBioAssay,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
order_id: 0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onLoad(args) {
|
||||||
|
this.order_id = args.order_id || 0;
|
||||||
|
this.$refs.faceDetect.initData()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
detectFailed() {
|
||||||
|
uni.showToast({
|
||||||
|
title: "人脸核验失败~",
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
uni.navigateBack()
|
||||||
|
},
|
||||||
|
|
||||||
|
photoChange(path) {
|
||||||
|
let self = this
|
||||||
|
uni.navigateBack()
|
||||||
|
this.getOpenerEventChannel().emit('data',{path: path, order_id: self.order_id});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@ -267,7 +267,7 @@ export default {
|
|||||||
title: '加载中'
|
title: '加载中'
|
||||||
});
|
});
|
||||||
// 1. 协议文件地址(可替换为实际后端返回的 word 文件 url)
|
// 1. 协议文件地址(可替换为实际后端返回的 word 文件 url)
|
||||||
const url = 'https://xh.stnav.com/czxy.doc';
|
const url = 'https://xh.stnav.com/czxy20260205.doc';
|
||||||
// 2. 下载 word 文件
|
// 2. 下载 word 文件
|
||||||
uni.downloadFile({
|
uni.downloadFile({
|
||||||
url,
|
url,
|
||||||
|
|||||||
211
bundle/recharge/record.vue
Normal file
@ -0,0 +1,211 @@
|
|||||||
|
<template>
|
||||||
|
<view class="" style="padding-bottom: 20rpx;">
|
||||||
|
<navbar title="充值记录"></navbar>
|
||||||
|
|
||||||
|
<view v-if="listData.length>0" class="pbenv">
|
||||||
|
<view class="address-list">
|
||||||
|
<view class="address bg-white d-b-c" v-for="(item,index) in listData" :key="index">
|
||||||
|
<view class="">
|
||||||
|
<view class=" flex-1 mb10">
|
||||||
|
<view class="user f32 address-info">
|
||||||
|
<text>充值金额:{{ item.order_amount }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="pt20 f26 gray3">
|
||||||
|
订单编号:{{ item.order_sn }}
|
||||||
|
</view>
|
||||||
|
<view class="pt20 f26 gray3">
|
||||||
|
订单创建时间:{{ item.create_time }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="d-f a-i-c" @click="toInvoice(item.id)" v-if="item.fp_status == 0">
|
||||||
|
<image class="add_icon_img" src="/static/icon/edit.png" mode="aspectFill" style="width: 24rpx; height: 24rpx;"></image>
|
||||||
|
<view class="" style="margin-left: 10rpx;">
|
||||||
|
开票
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import navbar from '@/components/navbar.vue';
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
navbar,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
/*是否加载完成*/
|
||||||
|
loadding: true,
|
||||||
|
indicatorDots: true,
|
||||||
|
autoplay: true,
|
||||||
|
interval: 2000,
|
||||||
|
duration: 500,
|
||||||
|
/*数据*/
|
||||||
|
listData: [],
|
||||||
|
/*默认地址id*/
|
||||||
|
default_id: '0',
|
||||||
|
options: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad: function(options) {
|
||||||
|
this.options = options;
|
||||||
|
},
|
||||||
|
|
||||||
|
onShow: function() {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '加载中'
|
||||||
|
});
|
||||||
|
/*获取地址列表*/
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/*获取数据*/
|
||||||
|
getData() {
|
||||||
|
let self = this;
|
||||||
|
let dataType = self.dataType;
|
||||||
|
self._get('order.groundOrder/rechangeList', {}, function(res) {
|
||||||
|
console.log("🚀 ~ res:", res)
|
||||||
|
self.listData = res.data.lists;
|
||||||
|
self.loadding = false;
|
||||||
|
uni.hideLoading();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 去开票
|
||||||
|
toInvoice(order_id) {
|
||||||
|
console.log("🚀 ~ methods.toInvoice:")
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/order/invoice?order_id=${order_id}&type=2`
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
page {
|
||||||
|
background-color: $xh-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-list {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
border-top: 16rpx solid #F2F2F2;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
padding-bottom: 90rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.foot-btns {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.foot-btns .btn-red {
|
||||||
|
width: 100%;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.none_add {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 318rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no_add {
|
||||||
|
width: 292rpx;
|
||||||
|
height: 202rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no_add_add {
|
||||||
|
width: 630rpx;
|
||||||
|
margin: 0 60rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 90rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-family: PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
background: #365A9A !important;
|
||||||
|
color: #FFFFFF;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 40rpx;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add_add {
|
||||||
|
height: 64rpx;
|
||||||
|
line-height: 64rpx;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-family: PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #0777CD;
|
||||||
|
padding: 0 35rpx;
|
||||||
|
border-bottom: 1rpx solid #D9D9D9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.defaul_add {
|
||||||
|
padding: 9rpx 14rpx 10rpx 15rpx;
|
||||||
|
@include background_color('bg-op');
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-family: PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #F6220C;
|
||||||
|
@include font_color('font_color');
|
||||||
|
}
|
||||||
|
|
||||||
|
.add_icon_img {
|
||||||
|
width: 30rpx;
|
||||||
|
height: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.none_line {
|
||||||
|
width: 1rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
background: #D9D9D9;
|
||||||
|
}
|
||||||
|
.add_add-btn{
|
||||||
|
position: fixed;
|
||||||
|
bottom: 40rpx;
|
||||||
|
width:690rpx;
|
||||||
|
margin: 20rpx 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 28rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #365A9A !important;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.pbenv{
|
||||||
|
padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address-info {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #121212;
|
||||||
|
line-height: 42rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 30rpx;
|
||||||
|
|
||||||
|
.info {
|
||||||
|
padding: 30rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -468,11 +468,42 @@ export default {
|
|||||||
* @param time
|
* @param time
|
||||||
* @param status
|
* @param status
|
||||||
*/
|
*/
|
||||||
handleSelectTime(title, time, status) {
|
handleSelectTime(title, time, status, room_id, price, light_price) {
|
||||||
let self = this
|
let self = this
|
||||||
if (status == 1) {
|
if (status == 1) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 新增逻辑:限制只能选择一个场地的免费时间段
|
||||||
|
const isClickingFree = (Number(price) || 0) <= 0;
|
||||||
|
const isCurrentlySelected = this.selectedTime[title] && this.selectedTime[title].includes(time);
|
||||||
|
|
||||||
|
// 如果是准备选中一个免费时间段(不在已选列表中)
|
||||||
|
if (isClickingFree && !isCurrentlySelected) {
|
||||||
|
let hasOtherRoomFree = false;
|
||||||
|
Object.keys(this.selectedTime).forEach(roomTitle => {
|
||||||
|
if (roomTitle !== title && this.selectedTime[roomTitle].length > 0) {
|
||||||
|
const otherRoom = this.cdList.find(cd => cd.title === roomTitle);
|
||||||
|
if (otherRoom) {
|
||||||
|
this.selectedTime[roomTitle].forEach(t => {
|
||||||
|
const tObj = otherRoom.time && otherRoom.time.find(item => item.t === t);
|
||||||
|
if (tObj && (Number(tObj.price) || 0) <= 0) {
|
||||||
|
hasOtherRoomFree = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (hasOtherRoomFree) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '只能选择同一场地的免费时间段',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 多选逻辑,selectedTime为对象,按title区分
|
// 多选逻辑,selectedTime为对象,按title区分
|
||||||
if (!this.selectedTime[title]) {
|
if (!this.selectedTime[title]) {
|
||||||
this.$set(this.selectedTime, title, []);
|
this.$set(this.selectedTime, title, []);
|
||||||
@ -653,9 +684,7 @@ export default {
|
|||||||
|
|
||||||
// 立即预约-提交订单
|
// 立即预约-提交订单
|
||||||
toReserve() {
|
toReserve() {
|
||||||
|
|
||||||
let self = this
|
let self = this
|
||||||
|
|
||||||
// 一进来就锁定,彻底防止高频点击
|
// 一进来就锁定,彻底防止高频点击
|
||||||
if (self.typeId == 1) {
|
if (self.typeId == 1) {
|
||||||
if (self.selectedReserveTime.length === 0) {
|
if (self.selectedReserveTime.length === 0) {
|
||||||
@ -671,10 +700,10 @@ export default {
|
|||||||
});
|
});
|
||||||
try {
|
try {
|
||||||
const start = self.selectedReserveTime[0].day_time + ' ' + self.selectedReserveTime[0].start_time;
|
const start = self.selectedReserveTime[0].day_time + ' ' + self.selectedReserveTime[0].start_time;
|
||||||
const end = self.selectedReserveTime[self.selectedReserveTime.length -1].day_time + ' ' + self.selectedReserveTime[self.selectedReserveTime.length -1].end_time;
|
|
||||||
// 转换为时间戳
|
// 转换为时间戳
|
||||||
const startTimestamp = Math.floor(Date.parse(start.replace(/-/g, '/')) / 1000);
|
const startTimestamp = Math.floor(Date.parse(start.replace(/-/g, '/')) / 1000);
|
||||||
const endTimestamp = Math.floor(Date.parse(end.replace(/-/g, '/')) / 1000);
|
const endTimestamp = self.getMaxEndTime();
|
||||||
|
|
||||||
// let p = {
|
// let p = {
|
||||||
// app_id: self.getAppId(),
|
// app_id: self.getAppId(),
|
||||||
// ground_id: self.id,
|
// ground_id: self.id,
|
||||||
@ -726,6 +755,11 @@ export default {
|
|||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/bundle/reserve/confirm?venueId=${self.venue.id}&roomId=${self.id}&typeId=${self.typeId}&orderId=${res.data.lists.id}`
|
url: `/bundle/reserve/confirm?venueId=${self.venue.id}&roomId=${self.id}&typeId=${self.typeId}&orderId=${res.data.lists.id}`
|
||||||
});
|
});
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
title: res.msg || '订单提交失败,请重试',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
@ -814,6 +848,25 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 获取选中时间中的最大结束时间
|
||||||
|
getMaxEndTime() {
|
||||||
|
if (!this.selectedReserveTime || this.selectedReserveTime.length === 0) return '';
|
||||||
|
let maxTimestamp = -1;
|
||||||
|
let maxItem = null;
|
||||||
|
this.selectedReserveTime.forEach(item => {
|
||||||
|
// 支持endTime格式为"HH:mm"或"YYYY-MM-DD HH:mm"
|
||||||
|
let endStr = item.end_time || '';
|
||||||
|
let dayStr = item.day_time || '';
|
||||||
|
let fullStr = endStr.length > 5 ? endStr : (dayStr ? dayStr + ' ' + endStr : endStr);
|
||||||
|
let ts = Date.parse(fullStr.replace(/-/g, '/'));
|
||||||
|
if (ts >= maxTimestamp) {
|
||||||
|
maxTimestamp = ts;
|
||||||
|
maxItem = item;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return maxItem ? Math.floor(Date.parse((maxItem.day_time + ' ' + maxItem.end_time).replace(/-/g, '/')) / 1000) : '';
|
||||||
|
},
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
108
bundle/setting/light.vue
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
<template>
|
||||||
|
<view class="light-setting-container">
|
||||||
|
<view class="fields">
|
||||||
|
<view v-for="(field, idx) in fields" :key="field.id" class="field-item">
|
||||||
|
<view class="field-name">{{ field.name }}</view>
|
||||||
|
<view class="status" :class="{on: field.isOn, off: !field.isOn}">
|
||||||
|
{{ field.isOn ? '已开启' : '已关闭' }}
|
||||||
|
</view>
|
||||||
|
<button
|
||||||
|
class="toggle-btn"
|
||||||
|
:class="{on: field.isOn, off: !field.isOn}"
|
||||||
|
@click="toggleLight(idx)"
|
||||||
|
>
|
||||||
|
{{ field.isOn ? '关灯' : '开灯' }}
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
fields: [
|
||||||
|
{ id: 1, name: '场地1', isOn: false },
|
||||||
|
{ id: 2, name: '场地2', isOn: false },
|
||||||
|
{ id: 3, name: '场地3', isOn: false },
|
||||||
|
{ id: 4, name: '场地4', isOn: false },
|
||||||
|
{ id: 5, name: '场地5', isOn: false },
|
||||||
|
{ id: 6, name: '场地6', isOn: false },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleLight(idx) {
|
||||||
|
this.fields[idx].isOn = !this.fields[idx].isOn;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.light-setting-container {
|
||||||
|
padding: 32rpx 24rpx;
|
||||||
|
background: #f7f9fc;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #365A9A;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.fields {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 32rpx;
|
||||||
|
}
|
||||||
|
.field-item {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(54,90,154,0.08);
|
||||||
|
padding: 32rpx 24rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.field-name {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #365A9A;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.status {
|
||||||
|
font-size: 28rpx;
|
||||||
|
margin: 0 24rpx;
|
||||||
|
padding: 4rpx 20rpx;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
background: #e3eaf6;
|
||||||
|
color: #365A9A;
|
||||||
|
transition: background 0.2s, color 0.2s;
|
||||||
|
}
|
||||||
|
.status.on {
|
||||||
|
background: #365A9A;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.status.off {
|
||||||
|
background: #e3eaf6;
|
||||||
|
color: #365A9A;
|
||||||
|
}
|
||||||
|
.toggle-btn {
|
||||||
|
min-width: 180rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
border: none;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
padding: 8rpx 0;
|
||||||
|
color: #fff;
|
||||||
|
background: #365A9A;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
.toggle-btn.on {
|
||||||
|
background: #e74c3c;
|
||||||
|
}
|
||||||
|
.toggle-btn.off {
|
||||||
|
background: #365A9A;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
30
pages.json
@ -989,6 +989,12 @@
|
|||||||
"subPackages": [{
|
"subPackages": [{
|
||||||
"root": "bundle",
|
"root": "bundle",
|
||||||
"pages": [
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "setting/light",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "设置灯光"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "reserve/details",
|
"path": "reserve/details",
|
||||||
"style": {
|
"style": {
|
||||||
@ -1025,6 +1031,12 @@
|
|||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "recharge/record",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "face/face-info",
|
"path": "face/face-info",
|
||||||
"style": {
|
"style": {
|
||||||
@ -1036,6 +1048,24 @@
|
|||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": ""
|
"navigationBarTitleText": ""
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "combo/combo-list",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "combo/details",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "combo/info",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}],
|
}],
|
||||||
|
|||||||
@ -18,10 +18,18 @@
|
|||||||
<view class="notice-txt">{{ setting.notice }}</view>
|
<view class="notice-txt">{{ setting.notice }}</view>
|
||||||
</view> -->
|
</view> -->
|
||||||
|
|
||||||
<view class="" style="display: flex; justify-content: center;" @click="toRecharge">
|
<view style="display: flex; justify-content: center; margin-bottom: 20rpx;" @click="toRecharge">
|
||||||
<image style="width: 690rpx;height: 140rpx;" src="https://xh.stnav.com/uploads/sport/recharge.png" mode=""></image>
|
<image style="width: 690rpx;height: 140rpx;" src="https://xh.stnav.com/uploads/sport/recharge.png" mode=""></image>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<view style="display: flex; justify-content: center; margin-bottom: 26rpx;" @click="toCombo">
|
||||||
|
<image style="width: 690rpx;height: 200rpx;" src="https://xh.stnav.com/uploads/sport/to-combo2.png" mode=""></image>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- <view style="display: flex; justify-content: center; margin-bottom: 40rpx;" @click="toCombo">
|
||||||
|
<image style="width: 690rpx;height: 230rpx;" src="https://xh.stnav.com/uploads/sport/to-combo1.png" mode=""></image>
|
||||||
|
</view> -->
|
||||||
|
|
||||||
<!-- 预约球馆 -->
|
<!-- 预约球馆 -->
|
||||||
<view class="info">
|
<view class="info">
|
||||||
<view class="title">
|
<view class="title">
|
||||||
@ -699,6 +707,13 @@ export default {
|
|||||||
url: '/bundle/recharge/recharge'
|
url: '/bundle/recharge/recharge'
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 跳转到充值界面
|
||||||
|
toCombo() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/bundle/combo/combo-list'
|
||||||
|
});
|
||||||
|
},
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -135,7 +135,7 @@
|
|||||||
<button class="theme-btn del-btn" @click="onDelOrder(item.id)">删除订单</button>
|
<button class="theme-btn del-btn" @click="onDelOrder(item.id)">删除订单</button>
|
||||||
</block>
|
</block>
|
||||||
|
|
||||||
<block v-if="item.order_status == 3 && item.fp_status == 0">
|
<block v-if="item.order_status == 3 && item.fp_status == 0 && item.pay_type == 0">
|
||||||
<button class="theme-btn pay-btn" @click="toInvoice(item.id)">去开票</button>
|
<button class="theme-btn pay-btn" @click="toInvoice(item.id)">去开票</button>
|
||||||
</block>
|
</block>
|
||||||
|
|
||||||
@ -606,7 +606,7 @@
|
|||||||
toInvoice(order_id) {
|
toInvoice(order_id) {
|
||||||
console.log("🚀 ~ methods.toInvoice:")
|
console.log("🚀 ~ methods.toInvoice:")
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/order/invoice?order_id=${order_id}`
|
url: `/pages/order/invoice?order_id=${order_id}&type=1`
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@ -23,6 +23,7 @@
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
order_id: 0,
|
order_id: 0,
|
||||||
|
type: 1, // 1是订单发票 2是充值发票
|
||||||
form: {
|
form: {
|
||||||
gmfnsrsbh: '',
|
gmfnsrsbh: '',
|
||||||
gmfmc: '',
|
gmfmc: '',
|
||||||
@ -32,7 +33,7 @@
|
|||||||
},
|
},
|
||||||
onLoad(args) {
|
onLoad(args) {
|
||||||
this.order_id = args.order_id;
|
this.order_id = args.order_id;
|
||||||
console.log('order_id', this.order_id);
|
this.type = args.type || 1;
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
submit() {
|
submit() {
|
||||||
@ -68,6 +69,7 @@
|
|||||||
'invoice.invoice/getInvoice',
|
'invoice.invoice/getInvoice',
|
||||||
{
|
{
|
||||||
order_id: self.order_id,
|
order_id: self.order_id,
|
||||||
|
type: self.type,
|
||||||
emails: self.form.emials,
|
emails: self.form.emials,
|
||||||
gmfmc: self.form.gmfmc,
|
gmfmc: self.form.gmfmc,
|
||||||
gmfnsrsbh: self.form.gmfnsrsbh
|
gmfnsrsbh: self.form.gmfnsrsbh
|
||||||
|
|||||||
@ -50,10 +50,17 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view> -->
|
</view> -->
|
||||||
|
<view style="margin: 0 auto 24rpx; display: flex; justify-content: center;" @click="jumpPage('/bundle/combo/combo-list')">
|
||||||
|
<view class="pr">
|
||||||
|
<image src="https://xh.stnav.com/uploads/sport/lqtc.png" style="width: 690rpx; height: 140rpx;"></image>
|
||||||
|
<view class="kt-btn">立即了解</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<!-- 我的场馆订单 -->
|
<!-- 我的场馆订单 -->
|
||||||
<view class="my-cg-order my-assets">
|
<view class="my-cg-order my-assets">
|
||||||
<view class="my-assets-all">
|
<view class="my-assets-all">
|
||||||
<view class="f30 fb">场馆订单</view>
|
<view class="f30 fb">我的场馆订单</view>
|
||||||
<view class="gray9 f26" @click="jumpPage('/pages/order/cg-my-order?dataType=all')">全部订单<text
|
<view class="gray9 f26" @click="jumpPage('/pages/order/cg-my-order?dataType=all')">全部订单<text
|
||||||
class="icon iconfont icon-jiantou"></text></view>
|
class="icon iconfont icon-jiantou"></text></view>
|
||||||
</view>
|
</view>
|
||||||
@ -719,4 +726,19 @@
|
|||||||
background: #E5E5E5;
|
background: #E5E5E5;
|
||||||
margin-top: 32rpx;
|
margin-top: 32rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.kt-btn {
|
||||||
|
position: absolute;
|
||||||
|
right: 32rpx;
|
||||||
|
bottom: 22rpx;
|
||||||
|
width: 148rpx;
|
||||||
|
height: 46rpx;
|
||||||
|
line-height: 46rpx;
|
||||||
|
background: linear-gradient( 0deg, #FCF5D8 0%, #FFFFFF 100%);
|
||||||
|
box-shadow: 0rpx 4rpx 8rpx 2rpx #DCB56D;
|
||||||
|
border-radius: 23rpx 23rpx 23rpx 23rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #402201;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
BIN
static/icon/back3.png
Normal file
|
After Width: | Height: | Size: 2.1 KiB |
6
uni_modules/hao-camera/changelog.md
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
## 1.0.2(2025-12-22)
|
||||||
|
代码优化
|
||||||
|
## 1.0.1(2025-12-22)
|
||||||
|
封面图上传
|
||||||
|
## 1.0.0(2025-12-22)
|
||||||
|
组件代码上传
|
||||||
164
uni_modules/hao-camera/components/hao-camera/hao-camera.vue
Normal file
@ -0,0 +1,164 @@
|
|||||||
|
<template>
|
||||||
|
<view class="content"
|
||||||
|
style="position: fixed;top: 0;left: 0;z-index: 777;width: 100%;height: 100vh;background-color: #FFFFFF;">
|
||||||
|
<camera @error="handleCameraError" :device-position="localDevicePosition" flash="off" v-if="!cameraImage"
|
||||||
|
style="width: 100%; height: 100vh;">
|
||||||
|
<cover-image src="@/uni_modules/hao-camera/static/person.png"
|
||||||
|
style="width: 100vw; height: 770rpx; margin:10vh 0vw 0 0vw;"></cover-image>
|
||||||
|
<view
|
||||||
|
style="top: 20rpx;left: 40rpx;width: 380rpx;position: fixed;height: 202rpx; border-radius: 20rpx;border: 1px solid rgba(51, 51, 51,0.6);background-color: rgba(51, 51, 51,0.6);">
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
style="top: 20rpx;left: 40rpx;width: 380rpx;position: fixed;height: 202rpx; border-radius: 20rpx;font-size: 26rpx;color: white;display: flex;flex-direction: column;box-sizing: border-box;padding:25rpx;">
|
||||||
|
<text>1. 保持光线充足</text>
|
||||||
|
<text style="margin-top: 20rpx;">2. 人物轮廓清晰无阴影</text>
|
||||||
|
<text style="margin-top: 20rpx;">3. 姿势端正,眼睛直视镜头</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 准备拍照 -->
|
||||||
|
<view v-if="!cameraImage" class="btns"
|
||||||
|
style="width: 100%;height: 16vh;background-color: rgba(51, 51, 51, 0.5); padding-bottom: 25rpx;position: fixed;bottom: 0;">
|
||||||
|
<!-- <image class="item" @tap="chooseImage" src="@/uni_modules/hao-camera/static/xiangce.png"></image> -->
|
||||||
|
<image class="item_center" @tap="takePhotoByHead" src="@/uni_modules/hao-camera/static/cameraImg.png">
|
||||||
|
</image>
|
||||||
|
<image class="item" @tap="reverseCamera" src="@/uni_modules/hao-camera/static/fanzhuan.png"></image>
|
||||||
|
</view>
|
||||||
|
</camera>
|
||||||
|
<!-- 确认拍照照片 -->
|
||||||
|
<image v-if="cameraImage" :src="cameraImage" style="width: 100%; height: 100vh;" mode="aspectFit"></image>
|
||||||
|
|
||||||
|
<!-- 拍照完成 -->
|
||||||
|
<view v-if="cameraImage" class="btns"
|
||||||
|
style="width: 100%;height: 16vh;background-color: rgba(51, 51, 51, 0.5); padding-bottom: 25rpx;position: fixed;bottom: 0;">
|
||||||
|
<image class="img_btn" @tap="cameraImage = ''" src="@/uni_modules/hao-camera/static/back.png"></image>
|
||||||
|
<image class="img_btn"></image>
|
||||||
|
<image class="img_btn" @tap="confirmPhoto" src="@/uni_modules/hao-camera/static/confirm.png"></image>
|
||||||
|
</view>
|
||||||
|
<view class="error-handler" v-if="!authCamera">
|
||||||
|
<button class="nobtn" openType="openSetting">获取相机权限失败</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
quality: {
|
||||||
|
type: String,
|
||||||
|
default: 'high'
|
||||||
|
},
|
||||||
|
devicePosition: {
|
||||||
|
type: String,
|
||||||
|
default: 'back'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
ctxHeader: null,
|
||||||
|
cameraImage: '',
|
||||||
|
authCamera: true,
|
||||||
|
localDevicePosition: this.devicePosition
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
devicePosition(newVal) {
|
||||||
|
this.localDevicePosition = newVal;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeCreate() {
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
this.checkCameraAuth();
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
|
||||||
|
onShow() {
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
this.checkCameraAuth();
|
||||||
|
// #endif
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
checkCameraAuth() {
|
||||||
|
uni.getSetting({
|
||||||
|
success: (res) => {
|
||||||
|
if (res.authSetting["scope.camera"]) {
|
||||||
|
this.authCamera = true;
|
||||||
|
} else {
|
||||||
|
this.authCamera = false;
|
||||||
|
uni.showToast({
|
||||||
|
title: '请确认是否允许获取您的相机权限!',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// ...existing code...
|
||||||
|
//拍摄头像
|
||||||
|
takePhotoByHead() {
|
||||||
|
this.ctxHeader = uni.createCameraContext();
|
||||||
|
this.ctxHeader.takePhoto({
|
||||||
|
// quality: this.quality,
|
||||||
|
quality: 'low',
|
||||||
|
success: (res) => {
|
||||||
|
this.cameraImage = res.tempImagePath; //图片
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
uni.showToast({
|
||||||
|
title: '拍照失败',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleCameraError() {
|
||||||
|
uni.showToast({
|
||||||
|
title: '用户拒绝使用摄像头',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
reverseCamera() {
|
||||||
|
this.localDevicePosition = (("back" === this.localDevicePosition) ? "front" : "back")
|
||||||
|
console.log("🚀 ~ localDevicePosition:", this.localDevicePosition)
|
||||||
|
},
|
||||||
|
confirmPhoto() {
|
||||||
|
this.$emit('confirmPhoto', this.cameraImage)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
background: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
|
width: 100vw;
|
||||||
|
|
||||||
|
.btns {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.img_btn {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_center {
|
||||||
|
width: 130rpx;
|
||||||
|
height: 130rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
99
uni_modules/hao-camera/package.json
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
{
|
||||||
|
"id": "hao-camera",
|
||||||
|
"displayName": "小程序证件照、人脸拍照相机",
|
||||||
|
"version": "1.0.2",
|
||||||
|
"description": "小程序相机拍照,证件照人脸头像框辅助拍照",
|
||||||
|
"keywords": [
|
||||||
|
"人脸拍照",
|
||||||
|
"相机翻转",
|
||||||
|
"证件照"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.1.0",
|
||||||
|
"uni-app": "^3.6.15",
|
||||||
|
"uni-app-x": ""
|
||||||
|
},
|
||||||
|
"cover": "http://rk-pos.oss-cn-beijing.aliyuncs.com/appupdate/ruipay/lyhStatic/cameraCover.png",
|
||||||
|
"dcloudext": {
|
||||||
|
"type": "component-vue",
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "无",
|
||||||
|
"data": "插件不采集任何数据",
|
||||||
|
"permissions": "无"
|
||||||
|
},
|
||||||
|
"npmurl": "",
|
||||||
|
"darkmode": "x",
|
||||||
|
"i18n": "x",
|
||||||
|
"widescreen": "x"
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "√",
|
||||||
|
"aliyun": "√",
|
||||||
|
"alipay": "√"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"uni-app": {
|
||||||
|
"vue": {
|
||||||
|
"vue2": {
|
||||||
|
"extVersion": "1.0.0",
|
||||||
|
"minVersion": ""
|
||||||
|
},
|
||||||
|
"vue3": {
|
||||||
|
"extVersion": "1.0.0",
|
||||||
|
"minVersion": ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"web": {
|
||||||
|
"safari": "-",
|
||||||
|
"chrome": "-"
|
||||||
|
},
|
||||||
|
"app": {
|
||||||
|
"vue": "-",
|
||||||
|
"nvue": "-",
|
||||||
|
"android": "-",
|
||||||
|
"ios": "-",
|
||||||
|
"harmony": "-"
|
||||||
|
},
|
||||||
|
"mp": {
|
||||||
|
"weixin": {
|
||||||
|
"extVersion": "1.0.0",
|
||||||
|
"minVersion": ""
|
||||||
|
},
|
||||||
|
"alipay": "-",
|
||||||
|
"toutiao": "-",
|
||||||
|
"baidu": "-",
|
||||||
|
"kuaishou": "-",
|
||||||
|
"jd": "-",
|
||||||
|
"harmony": "-",
|
||||||
|
"qq": "-",
|
||||||
|
"lark": "-"
|
||||||
|
},
|
||||||
|
"quickapp": {
|
||||||
|
"huawei": "-",
|
||||||
|
"union": "-"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.1.0",
|
||||||
|
"uni-app": "^3.6.15",
|
||||||
|
"uni-app-x": ""
|
||||||
|
}
|
||||||
|
}
|
||||||
32
uni_modules/hao-camera/readme.md
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
# hao-camera 证件照相机拍照
|
||||||
|
|
||||||
|
**示例使用方法**
|
||||||
|
|
||||||
|
```
|
||||||
|
<template>
|
||||||
|
<!-- <@devicePosition: 摄像头位置 前置或后置摄像头,值为front, back
|
||||||
|
@quality: 成像质量,值为high(高质量)、normal(普通质量)、low(低质量) -->
|
||||||
|
<view>
|
||||||
|
<hao-camera
|
||||||
|
:devicePosition="back"
|
||||||
|
:quality="high"
|
||||||
|
@confirmPhoto="confirmPhoto"
|
||||||
|
></hao-camera>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import haoCamera from '@/uni_modules/hao-camera/components/hao-camera/hao-camera.vue';
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
haoCamera
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
confirmPhoto(filePath){
|
||||||
|
console.log('图片: ' + filePath);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
BIN
uni_modules/hao-camera/static/back.png
Normal file
|
After Width: | Height: | Size: 2.7 KiB |
BIN
uni_modules/hao-camera/static/cameraImg.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
uni_modules/hao-camera/static/confirm.png
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
uni_modules/hao-camera/static/fanzhuan.png
Normal file
|
After Width: | Height: | Size: 7.0 KiB |
BIN
uni_modules/hao-camera/static/person.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
uni_modules/hao-camera/static/xiangce.png
Normal file
|
After Width: | Height: | Size: 9.3 KiB |