tabbar 增加菜单

main
yanzai 9 months ago
parent 39887a67d1
commit 65653aee0c

@ -5,7 +5,7 @@
* date2022年10月9日 21:29:16
*/
import {
ref
ref,defineExpose
} from 'vue'
import {
$image,
@ -89,6 +89,9 @@
},
});
}
defineExpose({
coverClick
});
</script>
<template>
<view>

@ -13,13 +13,21 @@
"navigationStyle": "custom"
}
}, {
},
{
"path": "pages/main/combo/combo",
"style": {
"navigationBarTitleText": "套餐",
"enablePullDownRefresh": false
}
},{
"path": "pages/main/person/persontab",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}, {
"path": "pages/main/order/order",
"style": {
@ -72,14 +80,16 @@
"enablePullDownRefresh": false
}
}, {
},
{
"path": "items/items",
"style": {
"navigationBarTitleText": "检测项目",
"enablePullDownRefresh": false
}
}, {
},
{
"path": "person/person",
"style": {
"navigationBarTitleText": "选择体检人",
@ -171,7 +181,14 @@
"iconPath": "static/image/tabbar/comboof.png",
"selectedIconPath": "static/image/tabbar/comboon.png",
"text": "套餐"
}, {
},
{
"pagePath": "pages/main/person/persontab",
"iconPath": "static/image/tabbar/zixuanof.png",
"selectedIconPath": "static/image/tabbar/zixuanon.png",
"text": "私人定制"
},
{
"pagePath": "pages/main/order/order",
"iconPath": "static/image/tabbar/orderof.png",
"selectedIconPath": "static/image/tabbar/orderon.png",

@ -0,0 +1,594 @@
<script setup>
/**
* name
* usersa0ChunLuyu
* date2023年4月12日 19:00:04
*/
import {
ref
} from 'vue'
import {
ReportUrl,
HospitalExtraInfoAction,
UserPersonGroupAction,
UserPersonDeleteAction,
UserPersonListAction,
$image,
$response
} from '@/api'
import CheckLogin from '@/components/check_login/check_login.vue'
import {
onShow
} from '@dcloudio/uni-app'
import {
useStore
} from '@/store'
const $store = useStore()
const $props = defineProps({
type: {
type: String,
default: 'choose'
}
});
onShow(() => {
HospitalExtraInfo()
})
const order_type_config = ref(false)
const HospitalExtraInfo = async () => {
const response = await HospitalExtraInfoAction({
hospital: $store.buy_info.hospital,
mark: 'order_type'
})
$response(response, () => {
order_type_config.value = response.data.info
getHospitalInfo()
})
}
const hospital_info = ref(false)
const getHospitalInfo = () => {
uni.$lu.hospital((info) => {
hospital_info.value = info
$store.buy_info.person = []
uni.$lu.user((user_info) => {
if (!!user_info.id) {
UserPersonList()
} else {
uni.reLaunch({
url: '/pages/main/home/home'
})
}
})
})
}
const user_person_list = ref([])
const UserPersonList = async () => {
const response = await UserPersonListAction()
$response(response, () => {
user_person_list.value = response.data.list
})
}
const toPersonClick = (info) => {
$store.buy_info.person = [info]
chooseTypeClick('combo')
return false;
switch ($props.type) {
case 'choose':
if (order_type_config.value.item === 1) {
choose_type_show.value = true
} else {
chooseTypeClick('combo')
}
break;
case 'group':
$store.buy_info.hospital = hospital_info.value.id
$store.buy_info.combo = 0
$store.buy_info.items = []
$store.buy_info.group = ''
$store.buy_info.time = {
id: 0,
date: null
}
UserPersonGroup(info)
break;
case 'info':
uni.navigateTo({
url: '/pages/buy/info/info'
})
break;
case 'check':
uni.navigateBack({
delta: 1
})
break;
case 'report':
uni.$lu.jump({
jump_type: 3,
jump_path: ReportUrl({
hospital: hospital_info.value.id,
id_number: info.id_number
}),
login_type: 1
})
break;
case 'question':
$store.buy_info.hospital = hospital_info.value.id
$store.buy_info.combo = 0
$store.buy_info.items = []
$store.buy_info.group = ''
$store.buy_info.time = {
id: 0,
date: null
}
uni.$lu.jump({
jump_type: 2,
jump_path: `/pages/dlc/question/question?hospital=${hospital_info.value.id}`,
login_type: 1
})
break;
}
}
const choose_type_show = ref(false)
const choose_type_popup_ref = ref(null)
const chooseTypePopupRef = (e) => {
choose_type_popup_ref.value = e
choose_type_popup_ref.value.open('center')
}
const chooseTypeChange = ({
show
}) => {
choose_type_show.value = show
}
const chooseTypeClick = (type) => {
choose_type_show.value = false
$store.buy_info.hospital = hospital_info.value.id
$store.buy_info.combo = 0
$store.buy_info.items = []
$store.buy_info.group = ''
$store.buy_info.time = {
id: 0,
date: null
}
uni.navigateTo({
url: '/pages/buy/items/items'
})
return false;
switch (type) {
case 'item':
uni.navigateTo({
url: '/pages/buy/items/items'
})
break;
case 'combo':
uni.switchTab({
url: '/pages/main/combo/combo'
})
break;
}
}
const UserPersonGroup = async (info) => {
const response = await UserPersonGroupAction({
hospital: $store.buy_info.hospital,
phone: info.phone,
id_number: info.id_number,
})
$response(response, () => {
$store.buy_info.group = response.data.appointment_number
uni.navigateTo({
url: '/pages/buy/info/info'
})
})
}
const loginCallback=()=>{
HospitalExtraInfo()
}
const toEditPersonClick = () => {
uni.navigateTo({
url: `/pages/user/edit/edit?id=0`
})
}
</script>
<template>
<view>
<CheckLogin @callback="loginCallback()"></CheckLogin>
<view v-if="choose_type_show">
<uni-popup :ref="chooseTypePopupRef" background-color="#ffffff00" @change="chooseTypeChange">
<view class="choose_type_popup_wrapper">
<view @click="choose_type_show = false" class="close_icon_wrapper">
<uni-icons type="closeempty" size="22" color="#999999"></uni-icons>
</view>
<view class="choose_type_title_wrapper">请选择体检方式</view>
<view class="choose_type_line_wrapper"></view>
<view class="choose_type_list_wrapper">
<view @click="chooseTypeClick('item')" class="choose_type_item_wrapper">
<view class="choose_type_item_bg_wrapper">
<image :src="$image('/storage/assets/mp/home/自选套餐.png')"></image>
</view>
<view class="choose_type_item_icon_wrapper">
自选项目
<image :src="$image('/storage/assets/mp/home/自选箭头.png')"></image>
</view>
</view>
<view @click="chooseTypeClick('combo')" class="choose_type_item_wrapper">
<view class="choose_type_item_bg_wrapper">
<image :src="$image('/storage/assets/mp/home/套餐项目.png')"></image>
</view>
<view class="choose_type_item_icon_wrapper">
<text class="choose_type_item_icon_text_wrapper">套餐项目</text>
<image :src="$image('/storage/assets/mp/home/套餐箭头.png')"></image>
</view>
</view>
</view>
</view>
</uni-popup>
</view>
<view v-if="user_person_list.length === 0" class="no_person_wrapper">
<view class="no_person_icon_wrapper">
<image mode="scaleToFill" :src="$image('/storage/assets/mp/order/没有数据@2x.png')"></image>
</view>
<view class="no_person_text_wrapper">暂无体检人</view>
</view>
<view v-else class="user_person_list_wrapper">
<view v-for="(i,k) in user_person_list" :key="k" class="user_person_item_wrapper">
<view class="user_person_info_tag_wrapper" :class="[
i.relationship === '本人' ? 'user_person_info_tag_active_wrapper' : ''
]">{{ i.relationship }}</view>
<view class="user_person_info_content_wrapper">
<view class="user_person_info_wrapper">
<view class="user_person_info_name_wrapper">{{ i.name }}</view>
<view class="user_person_info_sex_wrapper">{{ Number(i.sex) === 1 ? '男' : '女' }}</view>
<view class="user_person_info_marriage_wrapper">{{ Number(i.marriage) === 1 ? '已婚' : '未婚' }}</view>
</view>
<view class="user_person_info_id_number_wrapper">{{ i.id_number }}</view>
</view>
<view @click="toPersonClick(i)" class="button_wrapper">选择</view>
</view>
</view>
<view @click="toEditPersonClick()" class="add_button_wrapper">
<view class="add_button_icon_wrapper">
<image :src="$image('/storage/assets/mp/person/添加体检人@2x.png')"></image>
</view>
<view class="add_button_text_wrapper">添加体检人</view>
</view>
<view class="button_blank_wrapper"></view>
<view class="blank_wrapper"></view>
</view>
</template>
<style>
page {
background: #ffffff;
}
</style>
<style scoped>
.choose_type_list_wrapper {
margin-top: 21rpx;
}
.choose_type_item_wrapper {
position: relative;
}
.choose_type_item_icon_wrapper image {
width: 13rpx;
height: 21rpx;
display: block;
margin-left: 35rpx;
}
.choose_type_item_icon_wrapper {
display: flex;
align-items: center;
font-size: 32rpx;
font-weight: 500;
color: #FC852B;
line-height: 1;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 49rpx;
}
.choose_type_item_icon_text_wrapper {
color: #4C82FF;
}
.choose_type_item_bg_wrapper image {
width: 530rpx;
height: 142rpx;
display: block;
}
.choose_type_item_bg_wrapper {
width: 530rpx;
height: 142rpx;
}
.choose_type_item_wrapper {
width: 530rpx;
height: 142rpx;
margin: 46rpx auto 0;
}
.choose_type_line_wrapper {
width: 531rpx;
height: 1rpx;
background: #0DC3D0;
margin: 40rpx auto 0;
}
.choose_type_title_wrapper {
font-size: 30rpx;
font-weight: 500;
color: #000000;
line-height: 1;
margin-top: 49rpx;
text-align: center;
}
.close_icon_wrapper {
position: absolute;
top: 29rpx;
right: 36rpx;
}
.choose_type_popup_wrapper {
width: 600rpx;
padding-bottom: 84rpx;
overflow: hidden;
background: #FFFFFF;
border-radius: 29rpx 30rpx 30rpx 30rpx;
}
.no_person_wrapper {
margin-top: 200rpx;
}
.no_person_icon_wrapper image {
width: 318rpx;
height: 251rpx;
display: block;
}
.no_person_icon_wrapper {
width: 318rpx;
height: 251rpx;
margin: 0 auto;
}
.no_person_text_wrapper {
font-size: 28rpx;
font-weight: 500;
color: #CDCDCD;
line-height: 1;
text-align: center;
margin-top: 20rpx;
}
.login_popup_text_title_wrapper {
font-size: 32rpx;
font-weight: bold;
color: #3D3D3D;
margin-top: 65rpx;
line-height: 42rpx;
line-height: 1;
}
.login_popup_cancel_button_wrapper {
width: 445rpx;
height: 84rpx;
background: #bbbbbb;
border-radius: 42rpx;
font-size: 30rpx;
font-weight: bold;
color: #FFFFFF;
line-height: 84rpx;
text-align: center;
margin: 38rpx auto 0;
}
.login_popup_button_wrapper {
width: 445rpx;
height: 84rpx;
background: linear-gradient(90deg, #23D3AF, #0DC5CF);
border: 2px solid #D0EEEF;
border-radius: 42rpx;
font-size: 30rpx;
font-weight: bold;
color: #FFFFFF;
line-height: 84rpx;
border: none !important;
margin: 80rpx auto 0;
text-align: center;
}
.login_popup_text_wrapper {
text-align: center;
}
.login_popup_icon_wrapper image {
width: 152rpx;
height: 152rpx;
display: block;
}
.login_popup_icon_wrapper {
width: 152rpx;
height: 152rpx;
position: absolute;
top: -64rpx;
left: 50%;
transform: translateX(-50%);
}
.login_popup_wrapper {
position: relative;
width: 569rpx;
height: 465rpx;
background: #FFFFFF;
box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.2);
border-radius: 20rpx;
}
.check_login_popup_wrapper {
position: relative;
z-index: 9999;
}
.user_person_info_tag_wrapper {
position: absolute;
width: 76rpx;
height: 32rpx;
background: #668EA7;
border-radius: 10rpx 0 10rpx 0;
font-size: 20rpx;
font-weight: 500;
color: #FAFDFE;
line-height: 32rpx;
text-align: center;
top: 0;
left: 0;
}
.user_person_info_tag_active_wrapper {
background: linear-gradient(-20deg, #0CBAED, #00DED7);
box-shadow: 2rpx 3rpx 2rpx 0 rgba(2, 95, 78, 0.2);
}
.edit_button_wrapper {
margin-left: 40rpx;
}
.button_text_wrapper {
font-size: 26rpx;
font-weight: 500;
color: #6A6A6A;
line-height: 1;
margin-left: 13rpx;
}
.button_icon_wrapper image {
width: 24rpx;
height: 26rpx;
display: block;
}
.button_icon_wrapper {
width: 24rpx;
height: 26rpx;
}
.button_wrapper {
width: 200rpx;
height: 68rpx;
background: #0BBACF;
border-radius: 34rpx;
font-size: 24rpx;
color: #FFFFFF;
line-height: 68rpx;
text-align: center;
margin-left: 20rpx;
}
.user_person_info_id_number_wrapper {
font-size: 26rpx;
font-weight: 500;
color: #6A6A6A;
line-height: 1;
margin-top: 22rpx;
}
.user_person_info_content_wrapper {
margin-left: 40rpx;
width: 400rpx;
}
.user_person_info_marriage_wrapper {
font-size: 26rpx;
font-weight: 500;
color: #6A6A6A;
line-height: 1;
margin-left: 20rpx;
}
.user_person_info_sex_wrapper {
font-size: 26rpx;
font-weight: 500;
color: #6A6A6A;
line-height: 1;
margin-left: 20rpx;
}
.user_person_info_name_wrapper {
font-size: 30rpx;
font-weight: 500;
color: #181818;
line-height: 1;
}
.user_person_info_wrapper {
display: flex;
align-items: flex-end;
}
.button_blank_wrapper {
height: calc(120rpx + var(--safe-area-inset-bottom));
}
.user_person_list_wrapper {
margin-top: 40rpx;
}
.user_person_item_wrapper {
position: relative;
width: 690rpx;
height: 160rpx;
background: linear-gradient(0deg, rgba(235, 250, 251, 0.4), rgba(249, 254, 254, 0.4));
box-shadow: 0rpx 3rpx 6rpx 4rpx rgba(2, 95, 78, 0.07);
border-radius: 10rpx;
margin: 20rpx auto 0;
display: flex;
align-items: center;
}
.add_button_text_wrapper {
font-size: 31rpx;
font-weight: 500;
color: #F6FDFD;
margin-left: 32rpx;
}
.add_button_icon_wrapper image {
width: 30rpx;
height: 30rpx;
display: block;
}
.add_button_icon_wrapper {
width: 30rpx;
height: 30rpx;
}
.add_button_wrapper {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
width: 580rpx;
height: 90rpx;
background: linear-gradient(-90deg, #23D3AF, #0DC5CF);
border-radius: 45rpx;
bottom: calc(69rpx + var(--safe-area-inset-bottom));
left: 50%;
transform: translateX(-50%);
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Loading…
Cancel
Save