zhangyan
/
hainan_2024
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

去掉子组件中的悬浮按钮

Browse Source
wenjuan
刘佳宇 1 year ago
parent 065a6c4b31
commit 9df3b78f02
1 changed files with 352 additions and 315 deletions
Show Stats Download Patch File Download Diff File

667
h5/pages/main/order/src/order.vue
Unescape Escape View File

@ -1,352 +1,389 @@
<script setup>
import DraggableButton from "@/pages/components/goHome.vue";
/**
* name：
* user：sa0ChunLuyu
* date：2024年8月14日 20:38:40
*/
import {
ref,
onMounted,
defineEmits
} from 'vue'
import {
$api,
$response
} from '@/api'
import {
onShow
} from '@dcloudio/uni-app'
import wx from 'weixin-js-sdk'
const $props = defineProps({
info: {
type: Object,
default: () => {
return {
id: 0
}
}
}
});
/**
* name：
* user：sa0ChunLuyu
* date：2024年8月14日 20:38:40
*/
import { ref, onMounted, defineEmits } from "vue";
import { $api, $response } from "@/api";
import { onShow } from "@dcloudio/uni-app";
import wx from "weixin-js-sdk";
const $props = defineProps({
info: {
type: Object,
default: () => {
return {
id: 0,
};
},
},
});
const order_info = ref(false)
const order_info = ref(false);
const deepInfo = () => {
order_info.value = JSON.parse(JSON.stringify($props.info))
checkStatus()
}
const deepInfo = () => {
order_info.value = JSON.parse(JSON.stringify($props.info));
checkStatus();
};
const countdown = ref(null)
const checkStatus = () => {
if (order_info.value.status === 1) {
countdown.value = setInterval(() => {
countdownRun()
}, 500)
}
}
const count_down_text = ref('限制时间')
const countdownRun = () => {
let seconds = Math.floor((order_info.value.end_time - (new Date() / 1000)) % 60)
let minutes = Math.floor((order_info.value.end_time - (new Date() / 1000)) / 60)
count_down_text.value = `${minutes}分${seconds}秒`
if (order_info.value.end_time <= new Date() / 1000) {
clearInterval(countdown.value)
order_info.value.status = 3
}
}
const StartPay = async (id) => { //继续支付
uni.showLoading()
const response = await $api('StartPay', {
openid: localStorage.getItem('OPENID'),
id: id,
})
uni.hideLoading()
$response(response, () => {
if (response.status) {
let info = response.data.info
let p = '&appid=' + info.appid + '&sub_org_code=' + info.sub_org_code + '&ghzid=' + info
.ghzid + '&orderid=' + info.orderid + '&order_desc=' + info.order_desc + '&amount=' +
info.amount + '&notify_url=' + info.notify_url + '&timestamp=' + info.timestamp +
'&nonce=' + info.nonce + '&signature=' + info.signature;
console.log(p);
wx.miniProgram.navigateTo({
url: '/pages/other/entry/index?path=/pages/physical-examination/payment/index' +
p
})
}
})
}
const countdown = ref(null);
const checkStatus = () => {
if (order_info.value.status === 1) {
countdown.value = setInterval(() => {
countdownRun();
}, 500);
}
};
const count_down_text = ref("限制时间");
const countdownRun = () => {
let seconds = Math.floor(
(order_info.value.end_time - new Date() / 1000) % 60
);
let minutes = Math.floor(
(order_info.value.end_time - new Date() / 1000) / 60
);
count_down_text.value = `${minutes}分${seconds}秒`;
if (order_info.value.end_time <= new Date() / 1000) {
clearInterval(countdown.value);
order_info.value.status = 3;
}
};
const StartPay = async (id) => {
//继续支付
uni.showLoading();
const response = await $api("StartPay", {
openid: localStorage.getItem("OPENID"),
id: id,
});
uni.hideLoading();
$response(response, () => {
if (response.status) {
let info = response.data.info;
let p =
"&appid=" +
info.appid +
"&sub_org_code=" +
info.sub_org_code +
"&ghzid=" +
info.ghzid +
"&orderid=" +
info.orderid +
"&order_desc=" +
info.order_desc +
"&amount=" +
info.amount +
"&notify_url=" +
info.notify_url +
"&timestamp=" +
info.timestamp +
"&nonce=" +
info.nonce +
"&signature=" +
info.signature;
console.log(p);
wx.miniProgram.navigateTo({
url:
"/pages/other/entry/index?path=/pages/physical-examination/payment/index" +
p,
});
}
});
};
const emit = defineEmits();
const Refound = async (id) => {
uni.showLoading()
const response = await $api('Refund', {
openid: localStorage.getItem('OPENID'),
id: id,
})
uni.hideLoading()
$response(response, () => {
if (response.status) {
uni.showToast({
title: '退款完成'
});
emit('updateValue', 'orderUpdate');
}
})
}
const emit = defineEmits();
const Refound = async (id) => {
uni.showLoading();
const response = await $api("Refund", {
openid: localStorage.getItem("OPENID"),
id: id,
});
uni.hideLoading();
$response(response, () => {
if (response.status) {
uni.showToast({
title: "退款完成",
});
emit("updateValue", "orderUpdate");
}
});
};
onMounted(() => {
deepInfo()
})
onMounted(() => {
deepInfo();
});
</script>
<template>
<DraggableButton />
<view>
<view v-if="!!order_info" class="order_wrapper">
<view class="order_status_wrapper" :class="[`status${order_info.status}`]">
<view v-if="[1].includes(order_info.status)">
待支付
</view>
<view v-if="[2].includes(order_info.status)">
已预约
</view>
<view v-if="[3,5].includes(order_info.status)">
交易关闭
</view>
<view v-if="[4].includes(order_info.status)">
已完成
</view>
</view>
<view class="combo_name_wrapper">{{ order_info.title }}</view>
<view class="order_info_wrapper">
<view class="order_info_line_wrapper">
<view class="order_info_line_label_wrapper">体检人：</view>
<view class="order_info_line_value_wrapper">{{ order_info.name }}</view>
</view>
<view class="order_info_line_wrapper">
<view class="order_info_line_label_wrapper">预约时间：</view>
<view class="order_info_line_value_wrapper">{{ order_info.time }}</view>
</view>
<view class="order_info_line_wrapper">
<view class="order_info_line_label_wrapper">订单号：</view>
<view class="order_info_line_value_wrapper">{{ order_info.order }}</view>
</view>
<view class="order_info_line_wrapper">
<view class="order_info_line_label_wrapper">类型：</view>
<view class="order_info_line_value_wrapper">{{ order_info.type }}</view>
</view>
<view v-if="[1,2,4,5].includes(order_info.status)" class="order_price_wrapper">
<text v-if="[1].includes(order_info.status)">需支付</text>
<text v-if="[2,4].includes(order_info.status)">实付款</text>
<text v-if="[5].includes(order_info.status)">已退款</text>
<text class="price_true"
v-if="order_info.true_price !== order_info.price">(测试:{{ order_info.true_price }})</text>
<text class="price_text">{{ order_info.price }}</text>
</view>
<view class="order_line_wrapper"></view>
<view v-if="![3].includes(order_info.status)" class="order_pay_wrapper">
<view class="order_pay_time_wrapper">
<view v-if="[1].includes(order_info.status)">
<text>请在</text>
<text class="time_red">{{ count_down_text }}</text>
<text>内完成支付</text>
</view>
<view v-if="[2,4].includes(order_info.status)">
<view>支付时间</view>
<view>{{ order_info.pay_time }}</view>
</view>
<view v-if="[5].includes(order_info.status)">
<view>退款时间</view>
<view>{{ order_info.refund_time }}</view>
</view>
</view>
<view class="order_pay_button_wrapper">
<view v-if="[1].includes(order_info.status)" @click="StartPay(order_info.id)"
class="button_item_wrapper pay_button_wrapper">继续付款</view>
<!-- <view v-if="[2].includes(order_info.status)" class="button_item_wrapper change_button_wrapper">
<view>
<view v-if="!!order_info" class="order_wrapper">
<view
class="order_status_wrapper"
:class="[`status${order_info.status}`]"
>
<view v-if="[1].includes(order_info.status)"> 待支付 </view>
<view v-if="[2].includes(order_info.status)"> 已预约 </view>
<view v-if="[3, 5].includes(order_info.status)"> 交易关闭 </view>
<view v-if="[4].includes(order_info.status)"> 已完成 </view>
</view>
<view class="combo_name_wrapper">{{ order_info.title }}</view>
<view class="order_info_wrapper">
<view class="order_info_line_wrapper">
<view class="order_info_line_label_wrapper">体检人：</view>
<view class="order_info_line_value_wrapper">{{
order_info.name
}}</view>
</view>
<view class="order_info_line_wrapper">
<view class="order_info_line_label_wrapper">预约时间：</view>
<view class="order_info_line_value_wrapper">{{
order_info.time
}}</view>
</view>
<view class="order_info_line_wrapper">
<view class="order_info_line_label_wrapper">订单号：</view>
<view class="order_info_line_value_wrapper">{{
order_info.order
}}</view>
</view>
<view class="order_info_line_wrapper">
<view class="order_info_line_label_wrapper">类型：</view>
<view class="order_info_line_value_wrapper">{{
order_info.type
}}</view>
</view>
<view
v-if="[1, 2, 4, 5].includes(order_info.status)"
class="order_price_wrapper"
>
<text v-if="[1].includes(order_info.status)">需支付</text>
<text v-if="[2, 4].includes(order_info.status)">实付款</text>
<text v-if="[5].includes(order_info.status)">已退款</text>
<text
class="price_true"
v-if="order_info.true_price !== order_info.price"
>(测试:{{ order_info.true_price }})</text
>
<text class="price_text">{{ order_info.price }}</text>
</view>
<view class="order_line_wrapper"></view>
<view v-if="![3].includes(order_info.status)" class="order_pay_wrapper">
<view class="order_pay_time_wrapper">
<view v-if="[1].includes(order_info.status)">
<text>请在</text>
<text class="time_red">{{ count_down_text }}</text>
<text>内完成支付</text>
</view>
<view v-if="[2, 4].includes(order_info.status)">
<view>支付时间</view>
<view>{{ order_info.pay_time }}</view>
</view>
<view v-if="[5].includes(order_info.status)">
<view>退款时间</view>
<view>{{ order_info.refund_time }}</view>
</view>
</view>
<view class="order_pay_button_wrapper">
<view
v-if="[1].includes(order_info.status)"
@click="StartPay(order_info.id)"
class="button_item_wrapper pay_button_wrapper"
>继续付款</view
>
<!-- <view v-if="[2].includes(order_info.status)" class="button_item_wrapper change_button_wrapper">
改约</view> -->
<view v-if="[2].includes(order_info.status)" @click="Refound(order_info.id)"
class="button_item_wrapper refund_button_wrapper">退款</view>
<view v-if="[4].includes(order_info.status) && order_info.report"
class="button_item_wrapper report_button_wrapper">
查看报告
</view>
<view v-if="[4].includes(order_info.status) && order_info.report && !order_info.decode"
class="button_item_wrapper decode_button_wrapper">报告解读</view>
</view>
</view>
<view v-else class="order_pay_blank_wrapper"></view>
</view>
</view>
</view>
<view
v-if="[2].includes(order_info.status)"
@click="Refound(order_info.id)"
class="button_item_wrapper refund_button_wrapper"
>退款</view
>
<view
v-if="[4].includes(order_info.status) && order_info.report"
class="button_item_wrapper report_button_wrapper"
>
查看报告
</view>
<view
v-if="
[4].includes(order_info.status) &&
order_info.report &&
!order_info.decode
"
class="button_item_wrapper decode_button_wrapper"
>报告解读</view
>
</view>
</view>
<view v-else class="order_pay_blank_wrapper"></view>
</view>
</view>
</view>
</template>
<style scoped>
.order_pay_button_wrapper {
display: flex;
align-items: center;
}
.order_pay_button_wrapper {
display: flex;
align-items: center;
}
.button_item_wrapper {
width: 180rpx;
height: 60rpx;
border-radius: 30rpx;
line-height: 60rpx;
text-align: center;
font-weight: 400;
font-size: 24rpx;
margin-left: 20rpx;
}
.button_item_wrapper {
width: 180rpx;
height: 60rpx;
border-radius: 30rpx;
line-height: 60rpx;
text-align: center;
font-weight: 400;
font-size: 24rpx;
margin-left: 20rpx;
}
.pay_button_wrapper {
background: #239EA3;
color: #FFFFFF;
}
.pay_button_wrapper {
background: #239ea3;
color: #ffffff;
}
.change_button_wrapper {
background: #E1ECEE;
color: #239EA3;
}
.change_button_wrapper {
background: #e1ecee;
color: #239ea3;
}
.refund_button_wrapper {
background: #239EA3;
color: #FFFFFF;
}
.refund_button_wrapper {
background: #239ea3;
color: #ffffff;
}
.report_button_wrapper {
background: #E1ECEE;
color: #239EA3;
}
.report_button_wrapper {
background: #e1ecee;
color: #239ea3;
}
.decode_button_wrapper {
background: #239EA3;
color: #FFFFFF;
}
.decode_button_wrapper {
background: #239ea3;
color: #ffffff;
}
.order_pay_blank_wrapper {
height: 30rpx;
}
.order_pay_blank_wrapper {
height: 30rpx;
}
.order_pay_time_wrapper {
font-weight: 500;
font-size: 20rpx;
color: #8B8B8B;
line-height: 26rpx;
}
.order_pay_time_wrapper {
font-weight: 500;
font-size: 20rpx;
color: #8b8b8b;
line-height: 26rpx;
}
.time_red {
color: #EC4D15;
margin: 0 5rpx;
}
.time_red {
color: #ec4d15;
margin: 0 5rpx;
}
.order_pay_wrapper {
display: flex;
align-items: center;
justify-content: space-between;
width: calc(100% - 60rpx);
margin: 0 auto;
height: 100rpx;
}
.order_pay_wrapper {
display: flex;
align-items: center;
justify-content: space-between;
width: calc(100% - 60rpx);
margin: 0 auto;
height: 100rpx;
}
.order_line_wrapper {
width: 660rpx;
height: 1rpx;
background: #EBEAEA;
margin: 19rpx auto 0;
}
.order_line_wrapper {
width: 660rpx;
height: 1rpx;
background: #ebeaea;
margin: 19rpx auto 0;
}
.order_price_wrapper {
font-weight: 400;
color: #111111;
line-height: 1;
margin-top: 28rpx;
text-align: right;
margin-right: 30rpx;
font-size: 26rpx;
}
.order_price_wrapper {
font-weight: 400;
color: #111111;
line-height: 1;
margin-top: 28rpx;
text-align: right;
margin-right: 30rpx;
font-size: 26rpx;
}
.price_text {
margin-left: 10rpx;
}
.price_text {
margin-left: 10rpx;
}
.price_true {
font-size: 12rpx;
}
.price_true {
font-size: 12rpx;
}
.order_info_wrapper {
margin-top: 14rpx;
}
.order_info_wrapper {
margin-top: 14rpx;
}
.order_info_line_wrapper {
display: flex;
align-items: center;
margin-top: 24rpx;
}
.order_info_line_wrapper {
display: flex;
align-items: center;
margin-top: 24rpx;
}
.order_info_line_label_wrapper {
width: 120rpx;
font-weight: 400;
font-size: 24rpx;
color: #8B8B8B;
line-height: 1;
margin-left: 30rpx;
}
.order_info_line_label_wrapper {
width: 120rpx;
font-weight: 400;
font-size: 24rpx;
color: #8b8b8b;
line-height: 1;
margin-left: 30rpx;
}
.order_info_line_value_wrapper {
font-weight: 400;
font-size: 24rpx;
color: #333333;
line-height: 1;
margin-left: 10rpx;
}
.order_info_line_value_wrapper {
font-weight: 400;
font-size: 24rpx;
color: #333333;
line-height: 1;
margin-left: 10rpx;
}
.combo_name_wrapper {
width: calc(550rpx - 30rpx);
font-weight: bold;
font-size: 32rpx;
color: #0E0E0E;
line-height: 1;
margin-left: 30rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.combo_name_wrapper {
width: calc(550rpx - 30rpx);
font-weight: bold;
font-size: 32rpx;
color: #0e0e0e;
line-height: 1;
margin-left: 30rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.order_status_wrapper {
position: absolute;
top: 30rpx;
right: 27rpx;
font-size: 26rpx;
}
.order_status_wrapper {
position: absolute;
top: 30rpx;
right: 27rpx;
font-size: 26rpx;
}
.order_status_wrapper.status1 {
color: #EC4D15;
}
.order_status_wrapper.status1 {
color: #ec4d15;
}
.order_status_wrapper.status2 {
color: #239EA3;
}
.order_status_wrapper.status2 {
color: #239ea3;
}
.order_status_wrapper.status3 {
color: #EC4D15;
}
.order_status_wrapper.status3 {
color: #ec4d15;
}
.order_status_wrapper.status4 {
color: #131313;
}
.order_status_wrapper.status4 {
color: #131313;
}
.order_status_wrapper.status5 {
color: #EC4D15;
}
.order_status_wrapper.status5 {
color: #ec4d15;
}
.order_wrapper {
position: relative;
width: 710rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.05);
border-radius: 10rpx;
margin: 0 auto;
padding-top: 35rpx;
margin-top: 16rpx;
}
</style>
.order_wrapper {
position: relative;
width: 710rpx;
background: #ffffff;
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.05);
border-radius: 10rpx;
margin: 0 auto;
padding-top: 35rpx;
margin-top: 16rpx;
}
</style>

Write Preview
Loading…
Cancel
Save