1.0
This commit is contained in:
solosw
@@ -0,0 +1,411 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 页面标题 -->
|
||||
<view class="page-header">
|
||||
<text class="page-title">收款方式</text>
|
||||
<text class="page-subtitle">设置您的主收款码和副收款码</text>
|
||||
</view>
|
||||
|
||||
<!-- 主收款码 -->
|
||||
<view class="payment-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">主收款码</text>
|
||||
<text class="section-subtitle">优先使用的收款二维码</text>
|
||||
</view>
|
||||
<view class="qr-upload-container">
|
||||
<view class="qr-preview" @tap="uploadMainQr">
|
||||
<image v-if="paymentInfo.main_payment_qr_image"
|
||||
:src="getFullImageUrl(paymentInfo.main_payment_qr_image)"
|
||||
class="qr-image"
|
||||
mode="aspectFit">
|
||||
</image>
|
||||
<view v-else class="qr-placeholder">
|
||||
<uni-icons type="camera" size="40" color="#ccc"></uni-icons>
|
||||
<text class="placeholder-text">点击上传主收款码</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="upload-tips">
|
||||
<text class="tip-text">建议上传四大行收款码</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 副收款码 -->
|
||||
<view class="payment-section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">副收款码</text>
|
||||
<text class="section-subtitle">备用收款二维码</text>
|
||||
</view>
|
||||
<view class="qr-upload-container">
|
||||
<view class="qr-preview" @tap="uploadSubQr">
|
||||
<image v-if="paymentInfo.sub_payment_qr_image"
|
||||
:src="getFullImageUrl(paymentInfo.sub_payment_qr_image)"
|
||||
class="qr-image"
|
||||
mode="aspectFit">
|
||||
</image>
|
||||
<view v-else class="qr-placeholder">
|
||||
<uni-icons type="camera" size="40" color="#ccc"></uni-icons>
|
||||
<text class="placeholder-text">点击上传副收款码</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="upload-tips">
|
||||
<text class="tip-text">可选，作为备用收款方式</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<view class="save-section">
|
||||
<button class="save-btn" @tap="savePaymentInfo" :disabled="saving">
|
||||
<text v-if="saving">保存中...</text>
|
||||
<text v-else>保存收款方式</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- 使用说明 -->
|
||||
<view class="help-section">
|
||||
<view class="help-header">
|
||||
<uni-icons type="help" size="20" color="#999"></uni-icons>
|
||||
<text class="help-title">使用说明</text>
|
||||
</view>
|
||||
<view class="help-content">
|
||||
<text class="help-text">1. 主收款码会优先显示给买家</text>
|
||||
<text class="help-text">2. 副收款码作为备用收款方式</text>
|
||||
<text class="help-text">3. 建议上传清晰的收款二维码图片</text>
|
||||
<text class="help-text">4. 支持所有银行及三方等收款码</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
paymentInfo: {
|
||||
main_payment_qr_image: '',
|
||||
sub_payment_qr_image: '',
|
||||
|
||||
},
|
||||
saving: false,
|
||||
loading: false,
|
||||
ismain:false,
|
||||
issub:false,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 检查登录状态
|
||||
const token = uni.getStorageSync('token')
|
||||
if (!token) {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.loadPaymentInfo()
|
||||
},
|
||||
methods: {
|
||||
// 获取完整的图片URL
|
||||
getFullImageUrl(url) {
|
||||
return request.getImageUrl(url)
|
||||
},
|
||||
|
||||
// 加载收款方式信息
|
||||
async loadPaymentInfo() {
|
||||
this.loading = true
|
||||
try {
|
||||
const res = await request.get('/back/user/payment/info')
|
||||
if (res.success) {
|
||||
this.paymentInfo = res.data
|
||||
if(this.paymentInfo.main_payment_qr_image){
|
||||
this.ismain=true
|
||||
}
|
||||
if(this.paymentInfo.sub_payment_qr_image){
|
||||
this.issub=true
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载收款方式失败：', error)
|
||||
uni.showToast({
|
||||
title: '加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
// 上传主收款码
|
||||
uploadMainQr() {
|
||||
if(this.ismain){
|
||||
uni.showToast({
|
||||
title:"已上传"
|
||||
})
|
||||
return
|
||||
}
|
||||
this.chooseAndUploadImage('main')
|
||||
},
|
||||
|
||||
// 上传副收款码
|
||||
uploadSubQr() {
|
||||
if(this.issub){
|
||||
uni.showToast({
|
||||
title:"已上传"
|
||||
})
|
||||
return
|
||||
}
|
||||
this.chooseAndUploadImage('sub')
|
||||
},
|
||||
|
||||
// 选择并上传图片
|
||||
chooseAndUploadImage(type) {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['camera', 'album'],
|
||||
success: async (res) => {
|
||||
const filePath = res.tempFilePaths[0]
|
||||
await this.uploadImage(filePath, type)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('选择图片失败：', err)
|
||||
uni.showToast({
|
||||
title: '选择图片失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
async uploadImage(filePath, type) {
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '上传中...',
|
||||
mask: true
|
||||
})
|
||||
|
||||
const token = uni.getStorageSync('token')
|
||||
const res = await request.upload('/back/upload', filePath, {
|
||||
token: token,
|
||||
name: 'file'
|
||||
})
|
||||
|
||||
if (res.success) {
|
||||
// 更新对应的收款码
|
||||
if (type === 'main') {
|
||||
this.paymentInfo.main_payment_qr_image = res.data.url
|
||||
} else {
|
||||
this.paymentInfo.sub_payment_qr_image = res.data.url
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
title: '上传成功',
|
||||
icon: 'success'
|
||||
})
|
||||
} else {
|
||||
throw new Error(res.message || '上传失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('上传图片失败：', error)
|
||||
uni.showToast({
|
||||
title: '上传失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
uni.hideLoading()
|
||||
}
|
||||
},
|
||||
|
||||
// 保存收款方式信息
|
||||
async savePaymentInfo() {
|
||||
if (!this.paymentInfo.main_payment_qr_image && !this.paymentInfo.sub_payment_qr_image) {
|
||||
uni.showToast({
|
||||
title: '请至少上传一个收款码',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
this.saving = true
|
||||
try {
|
||||
const res = await request.put('/back/user/payment/info', this.paymentInfo)
|
||||
if (res.success) {
|
||||
this.paymentInfo = res.data
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
this.loadPaymentInfo()
|
||||
} else {
|
||||
throw new Error(res.message || '保存失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('保存收款方式失败：', error)
|
||||
uni.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.saving = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background: white;
|
||||
padding: 40rpx 30rpx;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.payment-section {
|
||||
background: white;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.qr-upload-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.qr-preview {
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
border: 2rpx dashed #ddd;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.qr-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.qr-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
.upload-tips {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.save-section {
|
||||
margin: 40rpx 0;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
background: linear-gradient(135deg, #FF4444 0%, #FF6666 100%);
|
||||
border: none;
|
||||
border-radius: 45rpx;
|
||||
color: white;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.save-btn:disabled {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
.help-section {
|
||||
background: white;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.help-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.help-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.help-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15rpx;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user