|
|
<template>
|
|
|
<view>
|
|
|
<view class="detail-page">
|
|
|
<!-- 顶部导航 -->
|
|
|
<u-navbar
|
|
|
title="查看详情"
|
|
|
:is-back="true"
|
|
|
back-icon-color="#fff"
|
|
|
:background="{'background':'#1479ff'}"
|
|
|
title-color="#fff"
|
|
|
:border-bottom="false"
|
|
|
:custom-back="customBack"
|
|
|
></u-navbar>
|
|
|
<view class="b-border"></view>
|
|
|
<!-- 订单信息 -->
|
|
|
<view class="order-info">
|
|
|
<view class="info-item">
|
|
|
<text class="label">订单号</text>
|
|
|
<text class="value">{{orderInfo.no}}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="label">服务项目</text>
|
|
|
<text class="value">{{orderInfo.accompany_product?orderInfo.accompany_product.name:''}}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="label">服务时间</text>
|
|
|
<text class="value">{{orderInfo.time}}</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="info-item" v-if="orderInfo.type === 2">
|
|
|
<text class="label">服务地址</text>
|
|
|
<text class="value">{{orderInfo.city?orderInfo.city:'' }}</text>
|
|
|
</view>
|
|
|
<view class="info-item" v-else>
|
|
|
<text class="label">就诊医院</text>
|
|
|
<text class="value">{{orderInfo.hospital?orderInfo.hospital.name:''}}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="label">联系人</text>
|
|
|
<text class="value">{{orderInfo.appoint_name?orderInfo.appoint_name:''}}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="label">联系方式</text>
|
|
|
<text class="value">{{orderInfo.appoint_mobile?orderInfo.appoint_mobile:''}}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="label">被服务人</text>
|
|
|
<text class="value">{{orderInfo.user_archive?orderInfo.user_archive.name:''}}</text>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<view class="info-item">
|
|
|
<text class="label">是否可以自理</text>
|
|
|
<text class="value">{{orderInfo.my_provide===1?'可以自理':'不能自理'}}</text>
|
|
|
</view>
|
|
|
<view class="info-item info-item-reason">
|
|
|
<text class="label">就诊资料</text>
|
|
|
<view class="value">
|
|
|
<view class="order-item-img">
|
|
|
<image v-for="(item,index) in imgs" :src="item" @click="imgPreview(index)"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="label">护工工资</text>
|
|
|
<text class="value">{{orderInfo.nurse_salary?orderInfo.nurse_salary:''}}</text>
|
|
|
</view>
|
|
|
<view class="info-item info-item-reason">
|
|
|
<text class="label">其他需求</text>
|
|
|
<text class="value">{{orderInfo.content?orderInfo.content:''}}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="label">购买数量</text>
|
|
|
<text class="value">{{orderInfo.can_multi_num || 1}}</text>
|
|
|
</view>
|
|
|
<view class="info-item">
|
|
|
<text class="label">订单金额</text>
|
|
|
<text class="value">¥{{orderInfo.price}}</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="info-item">
|
|
|
<text class="label">原始金额</text>
|
|
|
<text class="value">¥{{orderInfo.from_price}}</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="info-item" v-if="orderInfo.status===3||orderInfo.status===4">
|
|
|
<text class="label">待付金额</text>
|
|
|
<text class="value price">¥{{orderInfo.diff_price}}</text>
|
|
|
</view>
|
|
|
<view class="info-item info-item-reason">
|
|
|
<text class="label">修改原因</text>
|
|
|
<text class="value reason">{{orderInfo.update_price_reason?orderInfo.update_price_reason:''}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 支付区域 -->
|
|
|
<view class="payment-popup" v-if="orderInfo.pay_status === 0" id="pay-qrcode-section">
|
|
|
<!-- Tab 切换 -->
|
|
|
<view class="payment-tabs">
|
|
|
<view
|
|
|
class="tab-item"
|
|
|
:class="{ 'tab-active': activeTab === 'qrcode' }"
|
|
|
@click="switchTab('qrcode')"
|
|
|
>
|
|
|
付款二维码
|
|
|
</view>
|
|
|
<view
|
|
|
class="tab-item"
|
|
|
:class="{ 'tab-active': activeTab === 'pay' }"
|
|
|
@click="switchTab('pay')"
|
|
|
>
|
|
|
立即支付
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- Tab 内容 -->
|
|
|
<view class="tab-content">
|
|
|
<!-- 付款二维码 Tab -->
|
|
|
<view v-if="activeTab === 'qrcode'" class="tab-panel">
|
|
|
<view class="amount">
|
|
|
<text class="symbol">¥</text>
|
|
|
<text class="number">{{orderInfo.price}}</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="qr-code">
|
|
|
<!-- 支付二维码 -->
|
|
|
<view v-if="myQrcode" style="border: 1px solid #ccc; padding: 10rpx; position: relative;">
|
|
|
<!-- 显示图片（可长按识别） -->
|
|
|
<image
|
|
|
v-if="qrcodeImagePath"
|
|
|
:src="qrcodeImagePath"
|
|
|
mode="aspectFit"
|
|
|
show-menu-by-longpress
|
|
|
:class="{ 'qrcode-disabled': qrcodeExpired }"
|
|
|
style="width: 400rpx; height: 400rpx; display: block; margin: 0 auto;"
|
|
|
></image>
|
|
|
<!-- Canvas 绘制（使用 hide 属性隐藏，但保持可渲染） -->
|
|
|
<uqrcode
|
|
|
v-else
|
|
|
ref="payQrcode"
|
|
|
id="pay-qrcode"
|
|
|
canvas-id="pay-qrcode"
|
|
|
:value="myQrcode"
|
|
|
:size="400"
|
|
|
:sizeUnit="'rpx'"
|
|
|
:hide="true"
|
|
|
:options="{
|
|
|
margin: 10,
|
|
|
}"
|
|
|
@complete="onQrcodeComplete"
|
|
|
></uqrcode>
|
|
|
<!-- 二维码失效遮罩层 -->
|
|
|
<view v-if="qrcodeExpired" class="qrcode-overlay" @click="regetQrcode">
|
|
|
<view class="reget-btn">
|
|
|
<text>重新获取</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-else style="text-align: center; color: #999; padding: 40rpx;">
|
|
|
正在生成二维码...
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="tips">
|
|
|
<text>请扫码支付订单金额</text>
|
|
|
<text class="sub-tips">支付完成后订单将自动完成</text>
|
|
|
</view>
|
|
|
|
|
|
<!-- 分享按钮 -->
|
|
|
<view class="share-section">
|
|
|
<u-button
|
|
|
type="primary"
|
|
|
size="medium"
|
|
|
@click="showShareGuide"
|
|
|
:custom-style="{
|
|
|
background: 'linear-gradient(to right, #1479ff, #4a90e2)',
|
|
|
color: '#fff',
|
|
|
borderRadius: '40rpx',
|
|
|
fontSize: '28rpx'
|
|
|
}"
|
|
|
>
|
|
|
<u-icon name="share" color="#fff" size="16" style="margin-right: 8rpx;"></u-icon>
|
|
|
转发给微信好友
|
|
|
</u-button>
|
|
|
|
|
|
<!-- 返回首页按钮（仅分享进入时显示） -->
|
|
|
<u-button
|
|
|
v-if="isFromShare"
|
|
|
type="default"
|
|
|
size="medium"
|
|
|
@click="goToHome"
|
|
|
:custom-style="{
|
|
|
marginTop: '20rpx',
|
|
|
borderRadius: '40rpx',
|
|
|
fontSize: '28rpx'
|
|
|
}"
|
|
|
>
|
|
|
<u-icon name="home" color="#1479ff" size="16" style="margin-right: 8rpx;"></u-icon>
|
|
|
返回首页
|
|
|
</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 立即支付 Tab -->
|
|
|
<view v-if="activeTab === 'pay'" class="tab-panel">
|
|
|
<view class="amount">
|
|
|
<text class="symbol">¥</text>
|
|
|
<text class="number">{{orderInfo.price}}</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="pay-button-section">
|
|
|
<u-button
|
|
|
type="primary"
|
|
|
shape="circle"
|
|
|
@click="scrollToPayQr"
|
|
|
:disabled="payCooldownSeconds > 0"
|
|
|
class="pay-btn-large"
|
|
|
:custom-style="{
|
|
|
width: '100%',
|
|
|
height: '88rpx',
|
|
|
fontSize: '32rpx',
|
|
|
fontWeight: '500',
|
|
|
opacity: payCooldownSeconds > 0 ? 0.6 : 1
|
|
|
}"
|
|
|
>
|
|
|
{{ payCooldownSeconds > 0 ? `支付成功，${payCooldownSeconds}秒后可再次支付` : '立即支付' }}
|
|
|
</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import uqrcode from "@/uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode.vue";
|
|
|
export default {
|
|
|
components: {
|
|
|
uqrcode
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
myQrcode: '',
|
|
|
qrcodeImagePath: '', // 二维码图片路径
|
|
|
qrcodeExpired: false, // 二维码是否失效
|
|
|
imgs: [],
|
|
|
orderId: '',
|
|
|
orderInfo: {},
|
|
|
parStyle: {
|
|
|
'background': 'linear-gradient(to right, #476de4, #7bb9f7)',
|
|
|
'color': '#fff',
|
|
|
'font-size': '28rpx',
|
|
|
'padding': '0 30rpx',
|
|
|
'margin-left': '15rpx'
|
|
|
},
|
|
|
payTimer: null, // 支付状态检查定时器
|
|
|
isFromShare: false,
|
|
|
activeTab: 'qrcode', // 当前选中的 tab: 'qrcode' 或 'pay'
|
|
|
paySuccessTime: null, // 支付成功的时间戳
|
|
|
payCooldownSeconds: 0, // 支付冷却倒计时（秒）
|
|
|
payCooldownTimer: null, // 支付冷却定时器
|
|
|
}
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
// 获取订单详情
|
|
|
this.orderId = options.id
|
|
|
|
|
|
// 检查是否从分享链接进入
|
|
|
this.isFromShare = uni.getStorageSync('isFromShare')
|
|
|
const isOrderDetailShare = uni.getStorageSync('isOrderDetailShare')
|
|
|
|
|
|
if (this.isFromShare && isOrderDetailShare) {
|
|
|
console.log('订单详情页检测到从分享链接进入')
|
|
|
console.log('分享查询参数:', uni.getStorageSync('shareQuery'))
|
|
|
console.log('分享推荐者信息:', uni.getStorageSync('shareReferrer'))
|
|
|
console.log('分享进入时间:', uni.getStorageSync('shareLaunchTime'))
|
|
|
}
|
|
|
this.getOrderDetailStaff(options.id)
|
|
|
},
|
|
|
onUnload() {
|
|
|
// 清除支付状态检查定时器
|
|
|
this.stopPayCheck()
|
|
|
|
|
|
// 清除支付冷却定时器
|
|
|
this.stopPayCooldown()
|
|
|
|
|
|
// 清除分享相关存储
|
|
|
this.clearShareCache()
|
|
|
},
|
|
|
// 微信小程序分享给好友
|
|
|
onShareAppMessage() {
|
|
|
if (this.orderInfo.pay_status === 0) {
|
|
|
return {
|
|
|
title: `医康养${this.orderInfo.accompany_product ? this.orderInfo.accompany_product.name : '服务'}订单`,
|
|
|
desc: `订单号：${this.orderInfo.no}，金额：¥${this.orderInfo.price}`,
|
|
|
path: `/package_sub/order/orderStaffDetail?id=${this.orderId}`,
|
|
|
imageUrl: this.orderInfo.accompany_product && this.orderInfo.accompany_product.cover ? this.orderInfo.accompany_product.cover.url : ''
|
|
|
}
|
|
|
}
|
|
|
return {
|
|
|
title: '医康养服务',
|
|
|
path: '/pages/index/index'
|
|
|
}
|
|
|
},
|
|
|
// 微信小程序分享到朋友圈
|
|
|
onShareTimeline() {
|
|
|
if (this.orderInfo.pay_status === 0) {
|
|
|
return {
|
|
|
title: `医康养${this.orderInfo.accompany_product ? this.orderInfo.accompany_product.name : '服务'}订单`,
|
|
|
query: `id=${this.orderId}`,
|
|
|
imageUrl: this.orderInfo.accompany_product && this.orderInfo.accompany_product.cover ? this.orderInfo.accompany_product.cover.url : ''
|
|
|
}
|
|
|
}
|
|
|
return {
|
|
|
title: '医康养服务',
|
|
|
query: '',
|
|
|
imageUrl: ''
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
// 自定义返回逻辑
|
|
|
customBack() {
|
|
|
// 检查页面栈
|
|
|
const pages = getCurrentPages()
|
|
|
console.log('当前页面栈:', pages.length)
|
|
|
|
|
|
// 检查是否从分享链接进入
|
|
|
const isFromShare = uni.getStorageSync('isFromShare')
|
|
|
const isOrderDetailShare = uni.getStorageSync('isOrderDetailShare')
|
|
|
|
|
|
if ((isFromShare && isOrderDetailShare) || pages.length <= 1) {
|
|
|
// 从订单详情分享进入或页面栈只有一页时，返回首页
|
|
|
console.log('从订单详情分享进入或页面栈只有一页，返回首页')
|
|
|
uni.showToast({
|
|
|
title: '返回首页',
|
|
|
icon: 'none'
|
|
|
})
|
|
|
|
|
|
// 清除分享相关的缓存数据
|
|
|
this.clearShareCache()
|
|
|
|
|
|
|
|
|
uni.reLaunch({
|
|
|
url: '/package_sub/login/login'
|
|
|
})
|
|
|
|
|
|
} else {
|
|
|
// 正常进入时，使用默认返回逻辑
|
|
|
uni.navigateBack({
|
|
|
delta: 1
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
imgPreview(index) {
|
|
|
uni.previewImage({
|
|
|
current: index, // 当前显示图片索引
|
|
|
urls: this.imgs // 需要预览的图片http链接列表
|
|
|
});
|
|
|
},
|
|
|
async getOrderDetailStaff(orderId) {
|
|
|
// 调用接口获取订单详情
|
|
|
const res = await this.$u.api.accompanyOrderDetail({
|
|
|
id: orderId
|
|
|
})
|
|
|
this.orderInfo = res
|
|
|
let _arr = []
|
|
|
if (res.files.length > 0) {
|
|
|
res.files.map(item => {
|
|
|
_arr.push(item.url)
|
|
|
})
|
|
|
this.imgs = _arr
|
|
|
}
|
|
|
// 如果订单已支付，停止支付状态检测
|
|
|
if (res.pay_status !== 0) {
|
|
|
this.stopPayCheck()
|
|
|
this.myQrcode = ''
|
|
|
this.qrcodeImagePath = ''
|
|
|
this.qrcodeExpired = false
|
|
|
return
|
|
|
}
|
|
|
// 只在当前是二维码 tab 且订单未支付时，才获取二维码
|
|
|
if (res.pay_status === 0 && this.activeTab === 'qrcode') {
|
|
|
await this.getCode(res.no)
|
|
|
}
|
|
|
},
|
|
|
async getCode(no) {
|
|
|
// 如果已经有定时器在运行，先清除（避免重复创建）
|
|
|
this.stopPayCheck()
|
|
|
|
|
|
try {
|
|
|
const res = await this.$u.api.accompanyPay({
|
|
|
no: no
|
|
|
})
|
|
|
if(res.errcode && res.errcode===10002){
|
|
|
// 设置二维码失效状态
|
|
|
this.qrcodeExpired = true
|
|
|
uni.showToast({
|
|
|
title: res.errmsg,
|
|
|
icon: 'none'
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
// 如果成功获取二维码，重置失效状态
|
|
|
this.qrcodeExpired = false
|
|
|
const result = res.result || res
|
|
|
if (result && result.code_url) {
|
|
|
this.myQrcode = result.code_url
|
|
|
// 重置图片路径，等待二维码生成完成后转换为图片
|
|
|
this.qrcodeImagePath = ''
|
|
|
// 开始检查支付状态（只在二维码 tab 时启动）
|
|
|
if (this.activeTab === 'qrcode') {
|
|
|
this.startPayCheck()
|
|
|
}
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
icon: 'none',
|
|
|
title: result.err_code_des || '获取二维码失败'
|
|
|
})
|
|
|
}
|
|
|
} catch (error) {
|
|
|
uni.showToast({
|
|
|
icon: 'none',
|
|
|
title: '获取二维码失败'
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
// 重新获取二维码
|
|
|
regetQrcode() {
|
|
|
if (this.orderInfo && this.orderInfo.no) {
|
|
|
this.getCode(this.orderInfo.no)
|
|
|
}
|
|
|
},
|
|
|
// 二维码生成完成回调
|
|
|
onQrcodeComplete(e) {
|
|
|
// 当二维码成功生成后，将其转换为图片
|
|
|
if (e && e.success && this.$refs.payQrcode) {
|
|
|
// 延迟一下，确保 canvas 完全渲染完成
|
|
|
setTimeout(() => {
|
|
|
if (this.$refs.payQrcode) {
|
|
|
this.$refs.payQrcode.toTempFilePath({
|
|
|
success: (res) => {
|
|
|
// 获取临时文件路径
|
|
|
this.qrcodeImagePath = res.tempFilePath
|
|
|
console.log('二维码图片生成成功:', this.qrcodeImagePath)
|
|
|
},
|
|
|
fail: (err) => {
|
|
|
console.error('二维码转图片失败:', err)
|
|
|
// 如果转换失败，仍然显示 canvas（虽然不能长按识别）
|
|
|
uni.showToast({
|
|
|
icon: 'none',
|
|
|
title: '二维码图片生成失败'
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
}, 500) // 延迟 500ms 确保 canvas 渲染完成
|
|
|
}
|
|
|
},
|
|
|
// 停止支付状态检测
|
|
|
stopPayCheck() {
|
|
|
if (this.payTimer) {
|
|
|
clearInterval(this.payTimer)
|
|
|
this.payTimer = null
|
|
|
}
|
|
|
},
|
|
|
// 启动支付冷却期（30秒）
|
|
|
startPayCooldown() {
|
|
|
// 先清除旧的定时器
|
|
|
this.stopPayCooldown()
|
|
|
|
|
|
// 设置冷却时间为30秒
|
|
|
this.payCooldownSeconds = 30
|
|
|
this.paySuccessTime = Date.now()
|
|
|
|
|
|
// 启动倒计时定时器
|
|
|
this.payCooldownTimer = setInterval(() => {
|
|
|
this.payCooldownSeconds--
|
|
|
|
|
|
if (this.payCooldownSeconds <= 0) {
|
|
|
// 冷却期结束
|
|
|
this.stopPayCooldown()
|
|
|
}
|
|
|
}, 1000) // 每秒更新一次
|
|
|
},
|
|
|
// 停止支付冷却期
|
|
|
stopPayCooldown() {
|
|
|
if (this.payCooldownTimer) {
|
|
|
clearInterval(this.payCooldownTimer)
|
|
|
this.payCooldownTimer = null
|
|
|
}
|
|
|
this.payCooldownSeconds = 0
|
|
|
this.paySuccessTime = null
|
|
|
},
|
|
|
// 开始检查支付状态
|
|
|
startPayCheck() {
|
|
|
// 先清除旧的定时器，避免重复创建
|
|
|
this.stopPayCheck()
|
|
|
|
|
|
// 如果订单已支付或不在二维码 tab，不启动检测
|
|
|
if (this.orderInfo.pay_status !== 0 || this.activeTab !== 'qrcode') {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
this.payTimer = setInterval(async () => {
|
|
|
// 如果不在二维码 tab 或订单已支付，停止检测
|
|
|
if (this.activeTab !== 'qrcode' || this.orderInfo.pay_status !== 0) {
|
|
|
this.stopPayCheck()
|
|
|
return
|
|
|
}
|
|
|
|
|
|
try {
|
|
|
const res = await this.$u.api.accompanyOrderDetail({
|
|
|
id: this.orderId
|
|
|
})
|
|
|
|
|
|
// 更新订单信息
|
|
|
if (res.pay_status !== this.orderInfo.pay_status) {
|
|
|
this.orderInfo = res
|
|
|
}
|
|
|
|
|
|
if (res.pay_status === 1) {
|
|
|
// 支付成功，停止检测
|
|
|
this.stopPayCheck()
|
|
|
|
|
|
// 隐藏支付二维码
|
|
|
this.myQrcode = ''
|
|
|
this.qrcodeImagePath = ''
|
|
|
|
|
|
// 刷新订单详情
|
|
|
await this.getOrderDetailStaff(this.orderId)
|
|
|
|
|
|
uni.showToast({
|
|
|
title: '支付成功',
|
|
|
icon: 'success'
|
|
|
})
|
|
|
}
|
|
|
} catch (err) {
|
|
|
console.error('检查支付状态失败', err)
|
|
|
// 如果连续失败，可以考虑停止检测或增加重试逻辑
|
|
|
}
|
|
|
}, 3000) // 每3秒检查一次
|
|
|
},
|
|
|
isPayCode() {
|
|
|
// 停止支付状态检测
|
|
|
this.stopPayCheck()
|
|
|
|
|
|
this.myQrcode = ''
|
|
|
this.qrcodeImagePath = ''
|
|
|
this.qrcodeExpired = false
|
|
|
// 重新获取订单详情
|
|
|
this.getOrderDetailStaff(this.orderId)
|
|
|
},
|
|
|
showShareGuide() {
|
|
|
// 显示分享引导
|
|
|
uni.showModal({
|
|
|
title: '转发给微信好友',
|
|
|
content: `订单号：${this.orderInfo.no}\n金额：¥${this.orderInfo.price}\n服务：${this.orderInfo.accompany_product ? this.orderInfo.accompany_product.name : '医康养服务'}\n\n请点击右上角"..."按钮，选择"转发"`,
|
|
|
confirmText: '知道了',
|
|
|
showCancel: false,
|
|
|
success: () => {
|
|
|
// 显示分享菜单
|
|
|
// #ifdef MP-WEIXIN
|
|
|
wx.showShareMenu({
|
|
|
withShareTicket: true,
|
|
|
menus: ['shareAppMessage'],
|
|
|
success: () => {
|
|
|
uni.showToast({
|
|
|
title: '请点击右上角转发',
|
|
|
icon: 'none',
|
|
|
duration: 2000
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
// #endif
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
// 测试分享状态的方法
|
|
|
testShareStatus() {
|
|
|
const isFromShare = uni.getStorageSync('isFromShare')
|
|
|
const shareQuery = uni.getStorageSync('shareQuery')
|
|
|
const shareReferrer = uni.getStorageSync('shareReferrer')
|
|
|
const shareLaunchTime = uni.getStorageSync('shareLaunchTime')
|
|
|
|
|
|
console.log('=== 分享状态测试 ===')
|
|
|
console.log('是否从分享进入:', isFromShare)
|
|
|
console.log('分享查询参数:', shareQuery)
|
|
|
console.log('分享推荐者:', shareReferrer)
|
|
|
console.log('分享进入时间:', shareLaunchTime)
|
|
|
|
|
|
uni.showModal({
|
|
|
title: '分享状态测试',
|
|
|
content: `从分享进入: ${isFromShare}\n查询参数: ${JSON.stringify(shareQuery)}\n推荐者: ${JSON.stringify(shareReferrer)}`,
|
|
|
showCancel: false
|
|
|
})
|
|
|
},
|
|
|
goToHome() {
|
|
|
// 返回首页的逻辑
|
|
|
console.log('返回首页')
|
|
|
|
|
|
// 清除分享相关的缓存数据
|
|
|
this.clearShareCache()
|
|
|
|
|
|
|
|
|
uni.reLaunch({
|
|
|
url: '/package_sub/login/login'
|
|
|
})
|
|
|
|
|
|
},
|
|
|
clearShareCache() {
|
|
|
// 清除分享相关的缓存数据
|
|
|
console.log('清除分享相关的缓存数据')
|
|
|
|
|
|
// 清除所有分享相关的存储
|
|
|
uni.removeStorageSync('isFromShare')
|
|
|
uni.removeStorageSync('shareLaunchTime')
|
|
|
uni.removeStorageSync('shareQuery')
|
|
|
uni.removeStorageSync('shareReferrer')
|
|
|
uni.removeStorageSync('isOrderDetailShare')
|
|
|
|
|
|
console.log('分享缓存数据已清除，下次进入将重新进行token校验')
|
|
|
},
|
|
|
// Tab 切换
|
|
|
async switchTab(tab) {
|
|
|
const previousTab = this.activeTab
|
|
|
this.activeTab = tab
|
|
|
|
|
|
// 如果切换到非二维码 tab，停止支付状态检测
|
|
|
if (tab !== 'qrcode') {
|
|
|
this.stopPayCheck()
|
|
|
}
|
|
|
|
|
|
// 每次切换 tab 都重新请求接口，获取最新的订单信息（包含最新的 no）
|
|
|
await this.getOrderDetailStaff(this.orderId)
|
|
|
|
|
|
// getOrderDetailStaff 中会根据 activeTab 和 pay_status 决定是否调用 getCode
|
|
|
// 所以切换到 qrcode tab 时，如果订单未支付，会自动获取二维码并启动检测
|
|
|
},
|
|
|
scrollToPayQr: async function() {
|
|
|
// 检查是否在支付冷却期内
|
|
|
if (this.payCooldownSeconds > 0) {
|
|
|
uni.showToast({
|
|
|
title: `支付成功后${this.payCooldownSeconds}秒内不能重复支付`,
|
|
|
icon: 'none',
|
|
|
duration: 2000
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
|
|
|
// 每次点击都重新获取最新的订单信息（包含最新的 no）
|
|
|
await this.getOrderDetailStaff(this.orderId)
|
|
|
|
|
|
try {
|
|
|
// 1. 获取微信支付参数（使用最新的 no）
|
|
|
const res = await this.$u.api.accompanyOrderPayParams({ no: this.orderInfo.no });
|
|
|
console.log("获取支付参数:", res,res.errcode && res.errcode===10002);
|
|
|
if(res.errcode && res.errcode===10002){
|
|
|
uni.showToast({
|
|
|
title: res.errmsg,
|
|
|
icon: 'none'
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
// 从嵌套的config对象中获取支付参数
|
|
|
const payConfig = res.config || res;
|
|
|
|
|
|
// 2. 发起微信支付
|
|
|
await uni.requestPayment({
|
|
|
provider: 'wxpay',
|
|
|
timeStamp: payConfig.timestamp || payConfig.timeStamp,
|
|
|
nonceStr: payConfig.nonceStr,
|
|
|
package: payConfig.package,
|
|
|
signType: payConfig.signType,
|
|
|
paySign: payConfig.paySign,
|
|
|
success: () => {
|
|
|
uni.showToast({ title: '支付成功', icon: 'success' });
|
|
|
// 支付成功后刷新订单详情
|
|
|
this.getOrderDetailStaff(this.orderId || this.orderInfo.id);
|
|
|
// 启动支付冷却期（30秒）
|
|
|
this.startPayCooldown();
|
|
|
},
|
|
|
fail: (err) => {
|
|
|
if (err.errMsg && err.errMsg.indexOf('cancel') > -1) {
|
|
|
uni.showToast({ title: '已取消支付', icon: 'none' });
|
|
|
} else {
|
|
|
uni.showToast({ title: '支付失败', icon: 'none' });
|
|
|
console.log("支付失败",err)
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
} catch (e) {
|
|
|
uni.showToast({ title: e.errmsg || '拉起支付失败', icon: 'none' });
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
computed: {
|
|
|
// 获取登录角色
|
|
|
loginRole() {
|
|
|
return uni.getStorageSync('login_role') || '';
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.detail-page {
|
|
|
min-height: 100vh;
|
|
|
background: #f5f5f5;
|
|
|
padding-bottom: 120rpx;
|
|
|
|
|
|
.b-border {
|
|
|
width: 100%;
|
|
|
height: 30rpx;
|
|
|
border-radius: 0 0 120rpx 120rpx;
|
|
|
background-color: #1479ff;
|
|
|
}
|
|
|
|
|
|
.order-info {
|
|
|
background: #fff;
|
|
|
border-radius: 20rpx;
|
|
|
margin: 30rpx;
|
|
|
box-shadow: 0 4rpx 16rpx #e6eaf1;
|
|
|
padding: 0 30rpx;
|
|
|
|
|
|
.info-item {
|
|
|
padding: 30rpx;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
// margin-bottom: 30rpx;
|
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
.label {
|
|
|
color: #666;
|
|
|
font-size: 28rpx;
|
|
|
width:180rpx;
|
|
|
}
|
|
|
|
|
|
.value {
|
|
|
color: #333;
|
|
|
font-size: 28rpx;
|
|
|
width:calc(100% - 190rpx);
|
|
|
text-align: right;
|
|
|
// &.price {
|
|
|
// color: #f56c6c;
|
|
|
// font-weight: bold;
|
|
|
// }
|
|
|
&.reason {
|
|
|
color: #999;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.info-item-reason {
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
&>text {
|
|
|
width: 100%
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.order-item-img {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
image {
|
|
|
width: 140rpx;
|
|
|
height: 140rpx;
|
|
|
margin: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.payment-popup {
|
|
|
background: #fff;
|
|
|
border-radius: 20rpx;
|
|
|
margin: 30rpx;
|
|
|
box-shadow: 0 4rpx 16rpx #e6eaf1;
|
|
|
padding: 30rpx;
|
|
|
z-index: 1;
|
|
|
|
|
|
.payment-tabs {
|
|
|
display: flex;
|
|
|
border-bottom: 2rpx solid #e5e5e5;
|
|
|
margin-bottom: 30rpx;
|
|
|
|
|
|
.tab-item {
|
|
|
flex: 1;
|
|
|
text-align: center;
|
|
|
padding: 20rpx 0;
|
|
|
font-size: 30rpx;
|
|
|
color: #666;
|
|
|
position: relative;
|
|
|
transition: all 0.3s;
|
|
|
|
|
|
&.tab-active {
|
|
|
color: #1479ff;
|
|
|
font-weight: 500;
|
|
|
|
|
|
&::after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
bottom: -2rpx;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
width: 60rpx;
|
|
|
height: 4rpx;
|
|
|
background: #1479ff;
|
|
|
border-radius: 2rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.tab-content {
|
|
|
.tab-panel {
|
|
|
min-height: 400rpx;
|
|
|
}
|
|
|
|
|
|
.pay-button-section {
|
|
|
padding: 60rpx 0;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
font-size: 32rpx;
|
|
|
color: #333;
|
|
|
text-align: center;
|
|
|
font-weight: 500;
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
|
|
|
.amount {
|
|
|
text-align: center;
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
.symbol {
|
|
|
font-size: 36rpx;
|
|
|
color: #000;
|
|
|
}
|
|
|
|
|
|
.number {
|
|
|
font-size: 48rpx;
|
|
|
color: #d80808;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.qr-code {
|
|
|
width: 400rpx;
|
|
|
height: 400rpx;
|
|
|
margin: 0 auto 20rpx;
|
|
|
background: #fff;
|
|
|
padding: 20rpx;
|
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
|
|
|
image {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
|
|
|
&.qrcode-disabled {
|
|
|
filter: grayscale(100%);
|
|
|
opacity: 0.5;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.qrcode-overlay {
|
|
|
position: absolute;
|
|
|
top: 10rpx;
|
|
|
left: 10rpx;
|
|
|
right: 10rpx;
|
|
|
bottom: 10rpx;
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
border-radius: 8rpx;
|
|
|
|
|
|
.reget-btn {
|
|
|
background: #1479ff;
|
|
|
color: #fff;
|
|
|
padding: 20rpx 40rpx;
|
|
|
border-radius: 40rpx;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 500;
|
|
|
cursor: pointer;
|
|
|
|
|
|
&:active {
|
|
|
opacity: 0.8;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.tips {
|
|
|
text-align: center;
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
text {
|
|
|
display: block;
|
|
|
color: #333;
|
|
|
font-size: 28rpx;
|
|
|
line-height: 1.8;
|
|
|
}
|
|
|
|
|
|
.sub-tips {
|
|
|
color: #999;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.close-btn {
|
|
|
width: 80%;
|
|
|
margin: 0 auto;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
.share-section {
|
|
|
text-align: center;
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.bottom-pay-btn {
|
|
|
position: fixed;
|
|
|
left: 0;
|
|
|
bottom: 0;
|
|
|
width: 100vw;
|
|
|
background: #fff;
|
|
|
z-index: 9999;
|
|
|
box-shadow: 0 -2rpx 8rpx #00000010;
|
|
|
padding: 20rpx 30rpx 40rpx 30rpx;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
.pay-btn {
|
|
|
width: 100%;
|
|
|
font-size: 32rpx;
|
|
|
border-radius: 40rpx;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
}
|
|
|
</style> |
