solosw
805 lines
17 KiB
Vue
805 lines
17 KiB
Vue
<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> |