hainan_2024_zhenghe/h5/pages/buy/choose/sanfang.vue

<script setup>
	import DraggableButton from "@/pages/components/goHome.vue";
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年9月11日 19:24:50
	 */
	import {
		ref
	} from "vue";
	import {
		$api,
		$image,
		$response
	} from "@/api";
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		useStore
	} from "@/store";
	const $store = useStore();
	const $props = defineProps({
		url: {
			type: String,
			default: "",
		},
	});
    let HeXiaoPopupRef=ref(null);
	const button_list = ref([]);
    let select_sanfang_info=ref(null);
    let hexiao_code=ref('')
	let buy_info=ref({});
 
	const getSanfang = async () => {
		uni.showLoading();
		const response = await $api("GetSanFangList");
		uni.hideLoading();
		$response(response, async () => {
			 button_list.value=response.data.list
		});
	};

	const mountedAction = () => {
	 getSanfang()
	};

	const config_ref = ref(null);
	const configRef = (e) => {
		if (!config_ref.value) {
			config_ref.value = e;
			mountedAction();
		}
	};

	const buttonClick = (info) => {
		select_sanfang_info.value=info
		HeXiaoPopupRef.value.open()
	};
    const search=async()=>{
		uni.showLoading();
		const response = await $api("GetSanFangCode",{
			qudao_type:select_sanfang_info.value.id,
			code:hexiao_code.value,
			person_id:$store.getUser()?.person_id
		});
		uni.hideLoading();
		if(response.status==false && response.msg=="此套餐不可用"){
			uni.showModal({
				title: '提示',
				content: '未查询到您购买的对应套餐，体检中心咨询热线：0898-66595555',
				showCancel:false,
				success: function (res) {
					if (res.confirm) {
						 
					} else if (res.cancel) {
					 
					}
				}
			});
		}
		$response(response, async () => {
			 if(response.status){
				buy_info.value.sanfang_code=response.data
				$store.setBuyInfo(buy_info.value)
				 let query="?comboId="+response.data.combo_id
				 uni.navigateTo({
				 	url: "/pages/main/tj/tjxq" + query,
				 });
			 }
		});
	}
	onShow(() => {
		buy_info.value=$store.getBuyInfo()
		 buy_info.value.sanfang_code={}
		 $store.setBuyInfo(buy_info.value)
		if (!!config_ref.value) {
			mountedAction();
		}
	});
</script>
<template>
	<DraggableButton />
	<uni-popup ref="HeXiaoPopupRef" style="z-index: 999;">
		<view class="tishi_main">
			<view class="tishi_title">查询</view>
			<view class="tishi_title2">{{select_sanfang_info.name}}</view>
			<view class="tishi_content">
				<uni-easyinput type="text" v-model="hexiao_code" placeholder="请输入核销码" />
			</view>
			<view class="tishi_button" @click="search()">查询</view>
		</view>
	</uni-popup>
	<view class="choose_main">
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>

		<view class="button_list_wrapper">
			<view @click="buttonClick(i)" class="button_item_wrapper" v-for="(i, k) in button_list" :key="k">
				<view class="button_icon_wrapper">
					<image :src="$image(i.logo)"></image>
				</view>
				<view :class="['button_name_wrapper',{'active':i.id==99}]">{{ i.name }}</view>
				<view class="button_right_wrapper">
					<uni-icons type="compose" size="20"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>
<style>
	.isfocused{
		border-color: aquamarine !important;
	}
</style>
<style scoped>
	.choose_main{
			background-color: #E0F1F5;
			min-height: calc(100vh - 80rpx);
		}
	.button_list_wrapper {
		width: 750rpx;
		margin: 0 auto;
		overflow-y: auto;
	}

	.button_item_wrapper {
		width: 552rpx;
		height: 140rpx;
		background: #ffffff;
		box-shadow: 0rpx 1rpx 4rpx 0rpx rgba(0, 164, 172, 0.16);
		border-radius: 15rpx;
		margin: 50rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
    .active{
		color:#008F96 !important;
	}
	.button_icon_wrapper {
		width: 82rpx;
		height: 82rpx;
		margin-left: 48rpx;
	}

	.button_icon_wrapper image {
		width: 82rpx;
		height: 82rpx;
		display: inline-block;
		object-fit: contain;
	}

	.button_name_wrapper {
		font-weight: 500;
		font-size: 32rpx;
		color: #000000;
		line-height: 1;
	}

	.button_right_wrapper {
		margin-right: 48rpx;
	}
	.tishi_main{
		background-color: #fff;
		padding: 40rpx 50rpx;
		width:600rpx;
		border-radius: 40rpx;
	}
	.tishi_button{
		width: 365rpx;
		background-color: #009da5;
		color:#fff;
		text-align: center;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		border-radius: 40rpx;
		margin: 40rpx auto 10rpx auto;
	}
	.tishi_title{
		text-align: center;
		font-size: 30rpx;
		font-weight: 600;
		color:#2b2827;
	}
	.tishi_title2{
		font-size: 28rpx;
		margin-top: 30rpx;
		font-weight: 600;
		color:#3a3635;
		border-left: 3px solid #009da5;
		padding-left: 5rpx;
	}
	.tishi_content{
		font-size: 28rpx;
		margin-top: 30rpx;
		color:#474241;
	}
</style>