miao33: 从 main 同步 single_uniapp22miao,dart-sass 兼容修复,DEPLOY.md 更新

- 从 main 获取 single_uniapp22miao 子项目
- dart-sass: /deep/ -> ::v-deep,calc 运算符加空格
- DEPLOY.md 采用 shccd159 版本(4 子项目架构说明)

Made-with: Cursor
This commit is contained in:
apple
2026-03-16 11:16:42 +08:00
parent 9c29721dc4
commit 079076a70e
356 changed files with 569762 additions and 129 deletions

View File

@@ -0,0 +1,166 @@
<template>
<view class="payee-page">
<!-- 支付宝 -->
<view class="payee-item" @click="goToAlipay">
<view class="item-left">
<view class="icon-wrapper alipay">
<image src="/static/images/alipay-icon.png" class="icon"></image>
</view>
<view class="info">
<view class="title">支付宝</view>
<view class="subtitle" v-if="alipayInfo.account">
{{ alipayInfo.account }}
</view>
<view class="subtitle" v-else>未绑定</view>
</view>
</view>
<view class="item-right">
<text class="arrow"></text>
</view>
</view>
<!-- 银行卡 -->
<view class="payee-item" @click="goToBank">
<view class="item-left">
<view class="icon-wrapper bank">
<image src="/static/images/bank-icon.png" class="icon"></image>
</view>
<view class="info">
<view class="title">银行卡</view>
<view class="subtitle" v-if="bankInfo.card_no">
{{ bankInfo.bank_name }} ({{ bankInfo.card_no.slice(-4) }})
</view>
<view class="subtitle" v-else>未绑定</view>
</view>
</view>
<view class="item-right">
<text class="arrow"></text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
alipayInfo: {},
bankInfo: {}
}
},
onLoad() {
this.loadPayeeInfo();
},
onShow() {
this.loadPayeeInfo();
},
methods: {
// 加载收款信息
async loadPayeeInfo() {
try {
// 加载支付宝信息
const alipayRes = await this.$http.get('/api/alipay/index');
if (alipayRes.code === 0) {
this.alipayInfo = alipayRes.data;
}
// 加载银行卡信息
const bankRes = await this.$http.get('/api/bank/index');
if (bankRes.code === 0) {
this.bankInfo = bankRes.data;
}
} catch (error) {
console.error('加载收款信息失败:', error);
}
},
// 去支付宝页面
goToAlipay() {
uni.navigateTo({
url: '/pages/sub-pages/my-payee/zfb-detail'
});
},
// 去银行卡页面
goToBank() {
uni.navigateTo({
url: '/pages/sub-pages/my-payee/yl-detail'
});
}
}
}
</script>
<style lang="scss" scoped>
.payee-page {
min-height: 100vh;
background-color: #f5f5f5;
padding: 20rpx 30rpx;
}
.payee-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx;
background-color: #fff;
border-radius: 20rpx;
margin-bottom: 20rpx;
.item-left {
display: flex;
align-items: center;
flex: 1;
.icon-wrapper {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
&.alipay {
background-color: #1678FF;
}
&.bank {
background-color: #FF6B6B;
}
.icon {
width: 60rpx;
height: 60rpx;
}
}
.info {
flex: 1;
.title {
font-size: 32rpx;
font-weight: bold;
color: #333;
margin-bottom: 10rpx;
}
.subtitle {
font-size: 26rpx;
color: #999;
}
}
}
.item-right {
.arrow {
font-size: 50rpx;
color: #ccc;
}
}
}
</style>

View File

@@ -0,0 +1,313 @@
<template>
<view class="bank-page">
<view class="form-container">
<!-- 持卡人姓名 -->
<view class="form-item">
<view class="form-label">持卡人姓名<text class="required">*</text></view>
<input
v-model="formData.real_name"
placeholder="请输入持卡人姓名"
class="form-input"
/>
</view>
<!-- 银行卡号 -->
<view class="form-item">
<view class="form-label">银行卡号<text class="required">*</text></view>
<input
v-model="formData.card_no"
type="number"
placeholder="请输入银行卡号"
class="form-input"
/>
</view>
<!-- 开户银行 -->
<view class="form-item" @click="selectBank">
<view class="form-label">开户银行<text class="required">*</text></view>
<view class="picker-value">
<text v-if="formData.bank_name" class="text">{{ formData.bank_name }}</text>
<text v-else class="placeholder">请选择开户银行</text>
<text class="arrow"></text>
</view>
</view>
<!-- 开户支行选填 -->
<view class="form-item">
<view class="form-label">开户支行</view>
<input
v-model="formData.bank_branch"
placeholder="请输入开户支行(选填)"
class="form-input"
/>
</view>
<!-- 确认银行卡号 -->
<view class="form-item">
<view class="form-label">确认卡号<text class="required">*</text></view>
<input
v-model="formData.confirm_card_no"
type="number"
placeholder="请再次输入银行卡号"
class="form-input"
/>
</view>
<!-- 温馨提示 -->
<view class="tips-box">
<view class="tips-title">温馨提示</view>
<view class="tips-item">1. 请确保银行卡为本人名下储蓄卡</view>
<view class="tips-item">2. 绑定后无法修改请仔细核对信息</view>
<view class="tips-item">3. 不支持信用卡提现</view>
</view>
</view>
<!-- 保存按钮 -->
<view class="btn-container">
<button
class="save-btn"
:disabled="!canSave"
:loading="saving"
@click="handleSave"
>
保存
</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
formData: {
real_name: '',
card_no: '',
bank_name: '',
bank_branch: '',
confirm_card_no: ''
},
bankList: [
'工商银行', '建设银行', '农业银行', '中国银行',
'交通银行', '招商银行', '浦发银行', '民生银行',
'兴业银行', '中信银行', '光大银行', '平安银行',
'邮政储蓄银行', '其他银行'
],
saving: false,
isEdit: false
}
},
computed: {
canSave() {
return this.formData.real_name &&
this.formData.card_no &&
this.formData.bank_name &&
this.formData.confirm_card_no === this.formData.card_no;
}
},
onLoad() {
this.loadBankInfo();
},
methods: {
// 加载银行卡信息
async loadBankInfo() {
try {
const res = await this.$http.get('/api/bank/index');
if (res.code === 0 && res.data.card_no) {
this.formData = {
...res.data,
confirm_card_no: res.data.card_no
};
this.isEdit = true;
}
} catch (error) {
console.error('加载银行卡信息失败:', error);
}
},
// 选择银行
selectBank() {
uni.showActionSheet({
itemList: this.bankList,
success: (res) => {
this.formData.bank_name = this.bankList[res.tapIndex];
}
});
},
// 保存
async handleSave() {
if (this.formData.card_no !== this.formData.confirm_card_no) {
uni.showToast({
title: '两次输入的卡号不一致',
icon: 'none'
});
return;
}
if (this.formData.card_no.length < 16) {
uni.showToast({
title: '请输入正确的银行卡号',
icon: 'none'
});
return;
}
if (this.isEdit) {
uni.showToast({
title: '银行卡信息已绑定,无法修改',
icon: 'none'
});
return;
}
this.saving = true;
try {
const res = await this.$http.post('/api/bank/bind', {
real_name: this.formData.real_name,
card_no: this.formData.card_no,
bank_name: this.formData.bank_name,
bank_branch: this.formData.bank_branch
});
if (res.code === 0) {
uni.showToast({
title: '保存成功',
icon: 'success'
});
setTimeout(() => {
uni.navigateBack();
}, 1500);
}
} catch (error) {
uni.showToast({
title: error.msg || '保存失败',
icon: 'none'
});
} finally {
this.saving = false;
}
}
}
}
</script>
<style lang="scss" scoped>
.bank-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 120rpx;
}
.form-container {
background-color: #fff;
margin: 20rpx 30rpx;
border-radius: 20rpx;
padding: 40rpx 30rpx;
}
.form-item {
margin-bottom: 40rpx;
.form-label {
font-size: 28rpx;
color: #333;
margin-bottom: 15rpx;
font-weight: 500;
.required {
color: #FF4757;
margin-left: 4rpx;
}
}
.form-input {
height: 90rpx;
padding: 0 20rpx;
background-color: #f5f5f5;
border-radius: 8rpx;
font-size: 28rpx;
}
.picker-value {
display: flex;
align-items: center;
justify-content: space-between;
height: 90rpx;
padding: 0 20rpx;
background-color: #f5f5f5;
border-radius: 8rpx;
.text {
font-size: 28rpx;
color: #333;
}
.placeholder {
font-size: 28rpx;
color: #999;
}
.arrow {
font-size: 40rpx;
color: #ccc;
}
}
}
.tips-box {
margin-top: 40rpx;
padding: 30rpx;
background-color: #FFF3CD;
border-radius: 8rpx;
.tips-title {
font-size: 28rpx;
font-weight: bold;
color: #856404;
margin-bottom: 15rpx;
}
.tips-item {
font-size: 24rpx;
color: #856404;
line-height: 1.6;
margin-bottom: 10rpx;
&:last-child {
margin-bottom: 0;
}
}
}
.btn-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20rpx 30rpx;
background-color: #fff;
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.save-btn {
width: 100%;
height: 90rpx;
line-height: 90rpx;
background: linear-gradient(90deg, #FF6B6B, #FF4757);
color: #fff;
border-radius: 45rpx;
font-size: 32rpx;
border: none;
&[disabled] {
opacity: 0.6;
}
}
</style>

View File

@@ -0,0 +1,238 @@
<template>
<view class="alipay-page">
<view class="form-container">
<!-- 支付宝账号 -->
<view class="form-item">
<view class="form-label">支付宝账号<text class="required">*</text></view>
<input
v-model="formData.account"
placeholder="请输入支付宝账号(手机号或邮箱)"
class="form-input"
/>
</view>
<!-- 真实姓名 -->
<view class="form-item">
<view class="form-label">真实姓名<text class="required">*</text></view>
<input
v-model="formData.real_name"
placeholder="请输入支付宝实名认证姓名"
class="form-input"
/>
</view>
<!-- 确认支付宝账号 -->
<view class="form-item">
<view class="form-label">确认账号<text class="required">*</text></view>
<input
v-model="formData.confirm_account"
placeholder="请再次输入支付宝账号"
class="form-input"
/>
</view>
<!-- 温馨提示 -->
<view class="tips-box">
<view class="tips-title">温馨提示</view>
<view class="tips-item">1. 请确保支付宝账号和姓名与实名认证信息一致</view>
<view class="tips-item">2. 绑定后无法修改请仔细核对信息</view>
<view class="tips-item">3. 如有疑问请联系客服</view>
</view>
</view>
<!-- 保存按钮 -->
<view class="btn-container">
<button
class="save-btn"
:disabled="!canSave"
:loading="saving"
@click="handleSave"
>
保存
</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
formData: {
account: '',
real_name: '',
confirm_account: ''
},
saving: false,
isEdit: false
}
},
computed: {
canSave() {
return this.formData.account &&
this.formData.real_name &&
this.formData.confirm_account === this.formData.account;
}
},
onLoad() {
this.loadAlipayInfo();
},
methods: {
// 加载支付宝信息
async loadAlipayInfo() {
try {
const res = await this.$http.get('/api/alipay/index');
if (res.code === 0 && res.data.account) {
this.formData = {
account: res.data.account,
real_name: res.data.real_name,
confirm_account: res.data.account
};
this.isEdit = true;
}
} catch (error) {
console.error('加载支付宝信息失败:', error);
}
},
// 保存
async handleSave() {
if (this.formData.account !== this.formData.confirm_account) {
uni.showToast({
title: '两次输入的账号不一致',
icon: 'none'
});
return;
}
if (this.isEdit) {
uni.showToast({
title: '支付宝信息已绑定,无法修改',
icon: 'none'
});
return;
}
this.saving = true;
try {
const res = await this.$http.post('/api/alipay/bind', {
account: this.formData.account,
real_name: this.formData.real_name
});
if (res.code === 0) {
uni.showToast({
title: '保存成功',
icon: 'success'
});
setTimeout(() => {
uni.navigateBack();
}, 1500);
}
} catch (error) {
uni.showToast({
title: error.msg || '保存失败',
icon: 'none'
});
} finally {
this.saving = false;
}
}
}
}
</script>
<style lang="scss" scoped>
.alipay-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 120rpx;
}
.form-container {
background-color: #fff;
margin: 20rpx 30rpx;
border-radius: 20rpx;
padding: 40rpx 30rpx;
}
.form-item {
margin-bottom: 40rpx;
.form-label {
font-size: 28rpx;
color: #333;
margin-bottom: 15rpx;
font-weight: 500;
.required {
color: #FF4757;
margin-left: 4rpx;
}
}
.form-input {
height: 90rpx;
padding: 0 20rpx;
background-color: #f5f5f5;
border-radius: 8rpx;
font-size: 28rpx;
}
}
.tips-box {
margin-top: 40rpx;
padding: 30rpx;
background-color: #FFF3CD;
border-radius: 8rpx;
.tips-title {
font-size: 28rpx;
font-weight: bold;
color: #856404;
margin-bottom: 15rpx;
}
.tips-item {
font-size: 24rpx;
color: #856404;
line-height: 1.6;
margin-bottom: 10rpx;
&:last-child {
margin-bottom: 0;
}
}
}
.btn-container {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20rpx 30rpx;
background-color: #fff;
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.save-btn {
width: 100%;
height: 90rpx;
line-height: 90rpx;
background: linear-gradient(90deg, #1678FF, #0D5FD8);
color: #fff;
border-radius: 45rpx;
font-size: 32rpx;
border: none;
&[disabled] {
opacity: 0.6;
}
}
</style>