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

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

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