hn-hlw-app/pages/home/store-popup.vue

<template>
	<uni-popup ref="popup" type="center" :mask-click="false" :z-index="9999">
		<view :class="{ 'drug-store--elder': elderMode }" class="drug-store border-box">
			<view :class="{ 'drug-store__title--elder': elderMode }" class="drug-store__title">请确认您当前所在的药房信息：</view>
			<view :class="{ 'drug-store__name--elder': elderMode }" class="drug-store__name">
				{{ drugStore ? drugStore.name : '' }}
			</view>
			<view v-if="address" :class="{ 'drug-store__location--elder': elderMode }" class="drug-store__location">
				{{ address }}
			</view>
			<view :class="{ 'drug-store__footer--elder': elderMode }" class="drug-store__footer">
				<view :class="{ 'drug-store__button--elder': elderMode }" class="drug-store__button" @click="close">不是</view>
				<view :class="{ 'drug-store__button--elder': elderMode, 'drug-store__button--active--elder': elderMode }"
					class="drug-store__button drug-store__button--active" @click="confirm">是</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
import {
	ref,
	watch,
	computed
} from 'vue';
import {
	toast
} from "@/utils/widget";


const emits = defineEmits(['close', 'confirm'])
const props = defineProps({
	drugStore: {
		typeof: Object,
		default: () => ({})
	},
	visible: {
		type: Boolean,
		default: false
	},
	elderMode: {
		type: Boolean,
		default: false
	}
})

const popup = ref()
const elderMode = computed(() => props.elderMode)
const address = computed(() => {
	const region = props.drugStore && Array.isArray(props.drugStore.region) ? props.drugStore.region : [];
	const address = props.drugStore && typeof props.drugStore.address === 'string' ? props.drugStore.address : '';
	return region.join('') + address
})

function close() {
	toast('请支付宝扫一扫所在店铺二维码！', {
		duration: 3000
	})
	emits('close')
}

function confirm() {
	emits('confirm')
}

watch(() => props.visible, n => {
	if (n) {
		popup.value && popup.value.open()
	} else {
		popup.value && popup.value.close()
	}
})
</script>

<style lang="scss" scoped>
.drug-store {
	width: 630rpx;
	background: #FFF;
	word-break: break-all;
	border-radius: 16rpx;
	padding: 30rpx;
	box-sizing: border-box;

	&--elder {
		width: 700rpx;
		padding: 40rpx;
		border-radius: 20rpx;
	}

	&__title {
		font-size: 28rpx;
		font-weight: bold;
		line-height: 64rpx;

		&--elder {
			font-size: 36rpx;
			line-height: 72rpx;
		}
	}

	&__name {
		margin-top: 12rpx;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 50rpx;
		color: #8b6f47;
		text-align: center;

		&--elder {
			margin-top: 16rpx;
			font-size: 40rpx;
			line-height: 60rpx;
		}
	}

	&__location {
		margin-top: 8rpx;
		font-size: 28rpx;
		color: #999;
		line-height: 48rpx;
		text-align: center;

		&--elder {
			margin-top: 12rpx;
			font-size: 36rpx;
			line-height: 56rpx;
		}
	}

	&__footer {
		display: flex;
		justify-content: space-between;
		margin-top: 24rpx;

		&--elder {
			margin-top: 32rpx;
			gap: 20rpx;
		}
	}

	&__button {
		flex-grow: 1;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		font-size: 28rpx;
		color: #8b6f47;
		border-radius: 16rpx;
		border: 1px solid #d4c4a8;

		@at-root &+& {
			margin-left: 20rpx;
		}

		&--elder {
			width: 320rpx;
			height: 72rpx;
			line-height: 72rpx;
			font-size: 36rpx;
			border-radius: 20rpx;
			font-weight: 500;
		}
	}

	&__button--active {
		color: white;
		background: #b8956a;
		border-color: transparent;
		box-shadow: 0 4rpx 12rpx rgba(139, 101, 56, 0.3);

		&--elder {
			font-weight: bold;
		}
	}
}
</style>