You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

392 lines
8.6 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<script setup>
/**
* name
* usersa0ChunLuyu
* date2023年5月25日 22:26:49
*/
import {
ref
} from 'vue'
import {
OrderCreateAction,
OrderPayAction,
BuyInfoAction,
$image,
$response
} from '@/api'
import {
onShow
} from '@dcloudio/uni-app'
import {
useStore
} from '@/store'
const $store = useStore()
const buy_info = ref(false)
const BuyInfo = async () => {
const response = await BuyInfoAction($store.buy_info)
$response(response, () => {
buy_info.value = response.data
$store.buy_info.time = buy_info.value.time
})
}
const user_info = ref(false)
const getUserInfo = () => {
uni.$lu.user((info) => {
user_info.value = info
if (!!user_info.value.id) BuyInfo()
})
}
const nextClick = () => {
OrderCreate()
}
const choosePersonClick = () => {
uni.navigateTo({
url: '/pages/buy/person/person?type=check'
})
}
const chooseTimeClick = () => {
uni.navigateTo({
url: '/pages/buy/time/time'
})
}
const OrderPay = async (order) => {
if (pay_action.value) return
pay_action.value = true
const response = await OrderPayAction({
order,
pay_type: 1
})
$response(response, () => {
console.log(response);
wx.requestPayment({
timeStamp: response.data.pay.timestamp,
nonceStr: response.data.pay.nonce_str,
package: response.data.pay.package,
signType: 'RSA',
paySign: response.data.pay.pay_sign,
complete: (res) => {
pay_action.value = false
if (res.errMsg === 'requestPayment:ok') {
uni.redirectTo({
url: `/pages/buy/done/done?id=${order}`
})
} else {
console.log(res.errMsg);
uni.reLaunch({
url: '/pages/main/order/order'
})
}
}
});
})
}
const OrderCreate = async () => {
if (pay_action.value) return
pay_action.value = true
const response = await OrderCreateAction({
...$store.buy_info,
referral: referral.value
})
pay_action.value = false
$response(response, () => {
OrderPay(response.data.id)
})
}
const referral = ref('')
const pay_action = ref(false)
onShow(() => {
getUserInfo()
console.log(JSON.stringify($store.buy_info))
})
</script>
<template>
<view>
<view class="top_line_wrapper"></view>
<view v-if="!!buy_info">
<view v-if="!!buy_info.combo" class="combo_info_wrapper">
<view class="combo_info_name_wrapper">{{ buy_info.combo.name }}</view>
<view class="combo_info_tag_wrapper">
<view class="combo_tag_sex_wrapper combo_tag_sex_all_wrapper" v-if="buy_info.combo.sex==='全部'">全部</view>
<view class="combo_tag_sex_wrapper combo_tag_sex_nan_wrapper" v-if="buy_info.combo.sex==='男'">男士</view>
<view class="combo_tag_sex_wrapper combo_tag_sex_nv_wrapper" v-if="buy_info.combo.sex==='女'">女士</view>
</view>
</view>
<view class="person_info_wrapper">
<view class="person_info_title_wrapper">预约人信息</view>
<view class="person_info_line_wrapper"></view>
<view v-if="$store.buy_info.person.length > 0">
<view class="person_info_name_wrapper">{{ $store.buy_info.person[0].name }}</view>
<view class="person_info_info_wrapper">
<view class="person_info_sex_wrapper">{{ Number($store.buy_info.person[0].sex) === 1 ? '男' : '女' }}性</view>
<view class="person_info_marriage_wrapper">
{{ Number($store.buy_info.person[0].marriage) === 1 ? '已婚' : '未婚' }}
</view>
<view class="person_info_phone_wrapper">{{ $store.buy_info.person[0].phone }}</view>
</view>
<view class="person_info_line_wrapper"></view>
</view>
<view @click="choosePersonClick()" class="change_button_wrapper">
{{ $store.buy_info.person.length === 0 ? '添加' : '切换' }}体检人
</view>
</view>
<view class="time_wrapper">
<view class="time_title_wrapper">介绍人</view>
<view class="time_content_wrapper">
<input type="text" v-model="referral" placeholder="请输入">
</view>
</view>
<view @click="chooseTimeClick()" class="time_wrapper">
<view class="time_title_wrapper">体检时间</view>
<view class="time_content_wrapper">
{{ buy_info.time.id !== 0 ? buy_info.time.show : '请选择体检时间'}}
</view>
</view>
<view class="tip_wrapper">
<view class="tip_icon_wrapper">
<image :src="$image('/storage/assets/mp/combo/提示.png')"></image>
</view>
<view class="tip_text_wrapper">提示:只有点击提交预约按钮才能完成预约哦~</view>
</view>
<view class="bottom_wrapper">
<view class="bottom_box_wrapper">
<view class="bottom_price_wrapper">
<view class="bottom_price_original_price_wrapper"
v-if="Number(buy_info.original_price) > Number(buy_info.price)">
¥{{ Number(buy_info.original_price).toFixed(2) }}
</view>
<view class="bottom_price_price_wrapper">
<view class="bottom_price_price_icon_wrapper">¥</view>
{{ Number(buy_info.price).toFixed(2) }}
</view>
</view>
<button :loading="pay_action" @click="nextClick()" class="bottom_button_wrapper">提交预约</button>
</view>
<view class="blank_wrapper"></view>
</view>
</view>
<view class="blank_wrapper"></view>
</view>
</template>
<style scoped>
.tip_text_wrapper {
width: 600rpx;
font-size: 24rpx;
font-weight: 400;
color: #FF6201;
margin-left: 11rpx;
}
.tip_wrapper {
display: flex;
align-items: center;
margin-top: 49rpx;
margin-left: 41rpx;
}
.tip_icon_wrapper image {
width: 27rpx;
height: 27rpx;
display: block;
}
.tip_icon_wrapper {
width: 27rpx;
height: 27rpx;
}
.time_content_wrapper {
font-size: 28rpx;
font-weight: 400;
color: #000000;
margin-left: 108rpx;
}
.time_title_wrapper {
font-size: 28rpx;
font-weight: 400;
color: #000000;
margin-left: 40rpx;
}
.time_wrapper {
width: 750rpx;
height: 101rpx;
background: #ffffff;
margin-top: 15rpx;
line-height: 101rpx;
display: flex;
align-items: center;
}
.change_button_wrapper {
font-size: 28rpx;
font-weight: 400;
color: #000000;
line-height: 106rpx;
text-align: center;
}
.person_info_phone_wrapper {
margin-left: 30rpx;
}
.person_info_marriage_wrapper {
margin-left: 30rpx;
}
.person_info_info_wrapper {
display: flex;
align-items: center;
font-size: 26rpx;
font-weight: 400;
color: #999999;
line-height: 1;
margin-top: 31rpx;
margin-left: 40rpx;
}
.person_info_name_wrapper {
font-size: 32rpx;
font-weight: 400;
color: #000000;
line-height: 1;
margin-left: 40rpx;
margin-top: 40rpx;
}
.person_info_line_wrapper {
width: 690rpx;
height: 1rpx;
background: #E8E8E8;
margin: 26rpx auto 0;
}
.person_info_title_wrapper {
font-size: 28rpx;
font-weight: 400;
color: #000000;
line-height: 1;
margin-top: 31rpx;
margin-left: 40rpx;
}
.person_info_wrapper {
width: 750rpx;
background: #ffffff;
margin-top: 16rpx;
overflow: hidden;
}
.bottom_price_price_icon_wrapper {
font-size: 24rpx;
font-weight: 400;
}
.bottom_price_price_wrapper {
font-size: 36rpx;
font-weight: 800;
color: #F02E50;
line-height: 1;
display: flex;
align-items: center;
justify-content: flex-end;
}
.bottom_price_original_price_wrapper {
font-size: 22rpx;
font-weight: 800;
text-decoration: line-through;
color: #444444;
line-height: 1;
}
.bottom_button_wrapper {
width: 200rpx;
height: 68rpx;
background: #0BBACF;
border-radius: 34rpx;
font-size: 24rpx;
color: #FFFFFF;
line-height: 68rpx;
text-align: center;
margin-right: 30rpx;
}
.bottom_price_wrapper {
text-align: right;
margin-right: 30rpx;
width: 200rpx;
}
.bottom_box_wrapper {
height: 120rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.bottom_wrapper {
position: fixed;
width: 750rpx;
background: #ffffff;
bottom: 0;
}
.combo_info_wrapper {
height: 125rpx;
background: #ffffff;
overflow: hidden;
}
.combo_info_name_wrapper {
font-size: 30rpx;
font-weight: 500;
color: #222222;
line-height: 1;
margin-top: 29rpx;
margin-left: 39rpx;
max-width: 600rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.combo_info_tag_wrapper {
display: flex;
align-items: center;
margin-top: 19rpx;
margin-left: 39rpx;
}
.combo_tag_sex_wrapper {
width: 50rpx;
height: 28rpx;
border: 1px solid;
border-radius: 6rpx;
font-size: 20rpx;
font-weight: 500;
line-height: 28rpx;
text-align: center;
}
.combo_tag_sex_all_wrapper {
color: #8EC363;
border-color: #8EC363;
}
.combo_tag_sex_nan_wrapper {
color: #5FCAEA;
border-color: #5FCAEA;
}
.combo_tag_sex_nv_wrapper {
color: #EF7389;
border-color: #EF7389;
}
</style>