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>
|
||||
@@ -0,0 +1,805 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- 页面标题 -->
|
||||
<view class="page-header">
|
||||
<text class="page-title">确认付款</text>
|
||||
</view>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<view class="order-section">
|
||||
<view class="section-title">订单信息</view>
|
||||
<view class="order-item">
|
||||
<image :src="getFullImageUrl(productInfo.image)" class="product-image" mode="aspectFill" v-if="productInfo.image"></image>
|
||||
<view class="product-details">
|
||||
<text class="product-name">{{ productInfo.name }}</text>
|
||||
<view class="product-price-info">
|
||||
<text class="unit-price">单价：¥{{ orderInfo.unit_price }}</text>
|
||||
<text class="quantity">数量：{{ orderInfo.quantity }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="total-amount">
|
||||
<text class="total-label">总金额：</text>
|
||||
<text class="total-price">¥{{ orderInfo.total_amount }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 收货地址 -->
|
||||
<view class="address-section">
|
||||
<view class="section-title">收货地址</view>
|
||||
<view class="address-selector" @tap="selectAddress">
|
||||
<view class="address-content" v-if="selectedAddress">
|
||||
<view class="address-info">
|
||||
<text class="consignee">{{ selectedAddress.consignee_name }}</text>
|
||||
<text class="phone">{{ selectedAddress.consignee_phone }}</text>
|
||||
</view>
|
||||
<text class="address-detail">{{ formatAddress(selectedAddress) }}</text>
|
||||
</view>
|
||||
<view class="no-address" v-else>
|
||||
<text class="no-address-text">请选择收货地址</text>
|
||||
</view>
|
||||
<uni-icons type="right" size="16" color="#ccc"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 付款方式 -->
|
||||
<view class="payment-section">
|
||||
<view class="section-title">请扫码付款</view>
|
||||
<view class="payment-qr-container">
|
||||
<!-- 管理员付款码（一级商品） -->
|
||||
<view class="qr-section" v-if="orderInfo.product_type === 1">
|
||||
<view class="qr-title">
|
||||
<text class="qr-label">请扫描以下二维码付款</text>
|
||||
<text class="qr-subtitle">官方收款账户</text>
|
||||
</view>
|
||||
<view class="qr-code-wrapper">
|
||||
<image :src="getFullImageUrl(adminPaymentQr.main)"
|
||||
class="qr-code"
|
||||
mode="aspectFit"
|
||||
v-if="adminPaymentQr.main"
|
||||
@tap="previewQrCode(adminPaymentQr.main)">
|
||||
</image>
|
||||
<view class="qr-placeholder" v-else>
|
||||
<text class="placeholder-text">暂无付款码</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="backup-qr" v-if="adminPaymentQr.sub">
|
||||
<text class="backup-label">备用付款码</text>
|
||||
<image :src="getFullImageUrl(adminPaymentQr.sub)"
|
||||
class="backup-qr-image"
|
||||
mode="aspectFit"
|
||||
@tap="previewQrCode(adminPaymentQr.sub)">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 卖家付款码（二级商品） -->
|
||||
<view class="qr-section" v-if="orderInfo.product_type === 2">
|
||||
<view class="qr-title">
|
||||
<text class="qr-label">请扫描以下二维码付款</text>
|
||||
<text class="qr-subtitle">卖家收款账户</text>
|
||||
</view>
|
||||
<view class="seller-info">
|
||||
<image :src="getFullImageUrl(sellerInfo.avatar)" class="seller-avatar" mode="aspectFill" v-if="sellerInfo.avatar"></image>
|
||||
<view class="seller-avatar-placeholder" v-else>
|
||||
<uni-icons type="person" size="30" color="#ccc"></uni-icons>
|
||||
</view>
|
||||
<view class="seller-details">
|
||||
<text class="seller-name">{{ sellerInfo.customer_name || sellerInfo.real_name }}</text>
|
||||
<text class="seller-code">ID: {{ sellerInfo.identity_code }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="qr-code-wrapper">
|
||||
<image :src="getFullImageUrl(sellerPaymentQr.main)"
|
||||
class="qr-code"
|
||||
mode="aspectFit"
|
||||
v-if="sellerPaymentQr.main"
|
||||
@tap="previewQrCode(sellerPaymentQr.main)">
|
||||
</image>
|
||||
<view class="qr-placeholder" v-else>
|
||||
<text class="placeholder-text">卖家暂未设置付款码</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="backup-qr" v-if="sellerPaymentQr.sub">
|
||||
<text class="backup-label">备用付款码</text>
|
||||
<image :src="getFullImageUrl(sellerPaymentQr.sub)"
|
||||
class="backup-qr-image"
|
||||
mode="aspectFit"
|
||||
@tap="previewQrCode(sellerPaymentQr.sub)">
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 上传付款凭证 -->
|
||||
<view class="upload-section">
|
||||
<view class="section-title">上传付款凭证</view>
|
||||
<view class="upload-container">
|
||||
<view class="upload-item" @tap="uploadPaymentProof">
|
||||
<image v-if="paymentProofImage"
|
||||
:src="getFullImageUrl(paymentProofImage)"
|
||||
class="proof-image"
|
||||
mode="aspectFill">
|
||||
</image>
|
||||
<view v-else class="upload-placeholder">
|
||||
<uni-icons type="camera" size="40" color="#ccc"></uni-icons>
|
||||
<text class="upload-text">点击上传付款截图</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="upload-tips">
|
||||
<text class="tip-text">请上传完整的付款截图，包含金额和时间信息</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 提交按钮 -->
|
||||
<view class="submit-section">
|
||||
<view class="action-buttons">
|
||||
<button class="cancel-btn" @tap="cancelOrder" v-if="canCancel">
|
||||
取消订单
|
||||
</button>
|
||||
<button class="submit-btn" @tap="submitOrder" :disabled="!canSubmit || submitting">
|
||||
<text v-if="submitting">提交中...</text>
|
||||
<text v-else>提交付款凭证</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
orderId: '',
|
||||
orderNo: '',
|
||||
orderInfo: {},
|
||||
productInfo: {
|
||||
name: '',
|
||||
image: ''
|
||||
},
|
||||
selectedAddress: null,
|
||||
adminPaymentQr: {
|
||||
main: '',
|
||||
sub: ''
|
||||
},
|
||||
sellerInfo: {},
|
||||
sellerPaymentQr: {
|
||||
main: '',
|
||||
sub: ''
|
||||
},
|
||||
paymentProofImage: '',
|
||||
submitting: false,
|
||||
canCancel: true,
|
||||
productType:1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
canSubmit() {
|
||||
return this.paymentProofImage && !this.submitting
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// 检查登录状态
|
||||
const token = uni.getStorageSync('token')
|
||||
if (!token) {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 获取订单信息
|
||||
this.orderId = options.order_id || ''
|
||||
this.orderNo = options.order_no || ''
|
||||
if(options.is_second=="true"){
|
||||
this.productType=2
|
||||
}else
|
||||
{
|
||||
this.productType=1
|
||||
}
|
||||
|
||||
if (!this.orderId) {
|
||||
uni.showToast({
|
||||
title: '订单信息有误',
|
||||
icon: 'none'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
return
|
||||
}
|
||||
|
||||
this.loadOrderData()
|
||||
},
|
||||
methods: {
|
||||
// 获取完整的图片URL
|
||||
getFullImageUrl(url) {
|
||||
return request.getImageUrl(url)
|
||||
},
|
||||
|
||||
// 加载订单数据
|
||||
async loadOrderData() {
|
||||
try {
|
||||
// 获取订单详情
|
||||
const orderRes = await request.get(`/back/user/orders/purchase?order_id=${this.orderId}`)
|
||||
if (orderRes.success && orderRes.data.list && orderRes.data.list.length > 0) {
|
||||
this.orderInfo = orderRes.data.list[0]
|
||||
this.selectedAddress = this.orderInfo.address
|
||||
|
||||
// 设置商品信息
|
||||
this.productInfo = {
|
||||
name: this.orderInfo.product_name,
|
||||
image: this.getFirstImage(this.orderInfo.product_images)
|
||||
}
|
||||
|
||||
// 检查订单状态
|
||||
if (this.orderInfo.order_status !== 0) {
|
||||
this.canCancel = false
|
||||
}
|
||||
|
||||
// 如果是二级商品，获取卖家信息
|
||||
if (this.orderInfo.product_type === 2 && this.orderInfo.seller_id) {
|
||||
this.sellerInfo = this.orderInfo.seller
|
||||
}
|
||||
|
||||
// 加载付款信息
|
||||
await this.loadPaymentInfo()
|
||||
} else {
|
||||
throw new Error('订单不存在')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载订单失败：', error)
|
||||
uni.showToast({
|
||||
title: '加载订单失败',
|
||||
icon: 'none'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
// 获取商品的第一张图片
|
||||
getFirstImage(images) {
|
||||
if (!images) return ''
|
||||
if (typeof images === 'string') {
|
||||
return images.split(',')[0].trim()
|
||||
}
|
||||
if (Array.isArray(images) && images.length > 0) {
|
||||
return images[0]
|
||||
}
|
||||
return ''
|
||||
},
|
||||
|
||||
|
||||
|
||||
// 加载付款信息
|
||||
async loadPaymentInfo() {
|
||||
try {
|
||||
if (this.orderInfo.product_type === 1) { // 一级商品
|
||||
// 加载管理员付款码
|
||||
const res = await request.get('/back/admin/payment/info')
|
||||
if (res.success) {
|
||||
this.adminPaymentQr = {
|
||||
main: res.data.main_payment_qr_image || '',
|
||||
sub: res.data.sub_payment_qr_image || ''
|
||||
}
|
||||
}
|
||||
} else { // 二级商品
|
||||
// 加载卖家付款码
|
||||
const res = await request.get(`/back/user/seller/${this.orderInfo.seller_id}/payment`)
|
||||
if (res.success) {
|
||||
this.sellerPaymentQr = {
|
||||
main: res.data.main_payment_qr_image || '',
|
||||
sub: res.data.sub_payment_qr_image || ''
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载付款信息失败：', error)
|
||||
}
|
||||
},
|
||||
|
||||
// 格式化地址
|
||||
formatAddress(address) {
|
||||
if (!address) return ''
|
||||
return `${address.province} ${address.city} ${address.district} ${address.detail_address}`
|
||||
},
|
||||
|
||||
// 选择收货地址
|
||||
selectAddress() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/address/select'
|
||||
})
|
||||
},
|
||||
|
||||
// 预览二维码
|
||||
previewQrCode(qrCode) {
|
||||
if (!qrCode) return
|
||||
uni.previewImage({
|
||||
urls: [this.getFullImageUrl(qrCode)],
|
||||
current: 0
|
||||
})
|
||||
},
|
||||
|
||||
// 上传付款凭证
|
||||
uploadPaymentProof() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['camera', 'album'],
|
||||
success: async (res) => {
|
||||
const filePath = res.tempFilePaths[0]
|
||||
await this.uploadImage(filePath)
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error('选择图片失败：', err)
|
||||
uni.showToast({
|
||||
title: '选择图片失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
async uploadImage(filePath) {
|
||||
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) {
|
||||
this.paymentProofImage = 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 submitOrder() {
|
||||
if (!this.canSubmit) {
|
||||
if (!this.paymentProofImage) {
|
||||
uni.showToast({
|
||||
title: '请上传付款凭证',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
this.submitting = true
|
||||
try {
|
||||
|
||||
const res = await request.put(`/back/user/orders/purchase/${this.orderId}/payment`, {
|
||||
payment_proof_image: this.paymentProofImage,
|
||||
product_type :this.productType
|
||||
})
|
||||
|
||||
if (res.success) {
|
||||
uni.showToast({
|
||||
title: '付款凭证提交成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 延迟跳转到订单页面
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/orders/orders'
|
||||
})
|
||||
}, 1500)
|
||||
} else {
|
||||
throw new Error(res.message || '提交付款凭证失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('提交付款凭证失败：', error)
|
||||
uni.showToast({
|
||||
title: error.message || '提交失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.submitting = false
|
||||
}
|
||||
},
|
||||
|
||||
// 取消订单
|
||||
async cancelOrder() {
|
||||
uni.showModal({
|
||||
title: '确认取消',
|
||||
content: '确定要取消这个订单吗？',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
try {
|
||||
const result = await request.put(`/back/user/orders/purchase/${this.orderId}/cancel`)
|
||||
if (result.success) {
|
||||
uni.showToast({
|
||||
title: '订单已取消',
|
||||
icon: 'success'
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1500)
|
||||
} else {
|
||||
throw new Error(result.message || '取消订单失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('取消订单失败：', error)
|
||||
uni.showToast({
|
||||
title: error.message || '取消失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 120rpx;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background: white;
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.order-section,
|
||||
.address-section,
|
||||
.payment-section,
|
||||
.upload-section {
|
||||
background: white;
|
||||
margin: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.product-details {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.product-price-info {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.unit-price,
|
||||
.quantity {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 20rpx;
|
||||
border-top: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.total-label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
font-size: 36rpx;
|
||||
color: #FF4444;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.address-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx;
|
||||
background: #f8f8f8;
|
||||
border-radius: 15rpx;
|
||||
min-height: 100rpx;
|
||||
}
|
||||
|
||||
.address-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.address-info {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.consignee {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.phone {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.address-detail {
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.no-address {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-address-text {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.payment-qr-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.qr-section {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.qr-title {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.qr-label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.qr-subtitle {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.seller-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 15rpx;
|
||||
background: #f8f8f8;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.seller-avatar {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 30rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.seller-avatar-placeholder {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 30rpx;
|
||||
background: #e5e5e5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.seller-details {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.seller-name {
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
|
||||
.seller-code {
|
||||
font-size: 22rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.qr-code-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.qr-code {
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
border: 2rpx solid #eee;
|
||||
border-radius: 15rpx;
|
||||
}
|
||||
|
||||
.qr-placeholder {
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
border: 2rpx dashed #ddd;
|
||||
border-radius: 15rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.backup-qr {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.backup-label {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.backup-qr-image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
border: 1rpx solid #eee;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.upload-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.upload-item {
|
||||
width: 400rpx;
|
||||
height: 300rpx;
|
||||
margin: 0 auto 20rpx;
|
||||
border: 2rpx dashed #ddd;
|
||||
border-radius: 15rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.proof-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.upload-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
margin-top: 15rpx;
|
||||
}
|
||||
|
||||
.upload-tips {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.submit-section {
|
||||
padding: 40rpx 30rpx;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
background: #f5f5f5;
|
||||
border: 1rpx solid #ddd;
|
||||
border-radius: 40rpx;
|
||||
color: #666;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
flex: 2;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(135deg, #FF4444 0%, #FF6666 100%);
|
||||
border: none;
|
||||
border-radius: 40rpx;
|
||||
color: white;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.submit-btn:disabled {
|
||||
background: #ccc;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user