solosw
411 lines
8.5 KiB
Vue
411 lines
8.5 KiB
Vue
<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> |