176 lines
3.5 KiB
Vue
176 lines
3.5 KiB
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> |