379 lines
8.3 KiB
Vue
379 lines
8.3 KiB
Vue
<template>
|
||
<fix-base-style :styleSpacing="styleSpacing" :styleColor="styleColor" :index="index">
|
||
<view class="fix-positioning">
|
||
<view :class="[`is-${mode}`]" class="header">
|
||
<view class="item">
|
||
<view v-if="mode == 'mode-1'">
|
||
<view>{{ locationData.name }},{{ locationData.time }}</view>
|
||
<view class="mt-10 text-size-m row-center" @click="moreStore">
|
||
<cl-icon name="location"></cl-icon>
|
||
<text class="mx-6">{{ locationData.store }}</text>
|
||
<text class="text-grey">{{ locationData.distance }}</text>
|
||
<text class="mx-6">更多门店</text>
|
||
<cl-icon name="arrow-bottom"></cl-icon>
|
||
</view>
|
||
<view></view>
|
||
</view>
|
||
<view v-if="mode == 'mode-2'" @click="moreStore">
|
||
<view class="row-center">
|
||
<cl-icon name="location"></cl-icon>
|
||
<text class="mx-6">{{ locationData.store }}</text>
|
||
<cl-icon name="arrow-right"></cl-icon>
|
||
</view>
|
||
<view class="mt-10 text-size-m">
|
||
<text class="text-grey mx-6">{{ locationData.distance }}</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="mode == 'mode-3'" @click="moreStore">
|
||
<view class="row-center">
|
||
<cl-icon name="location"></cl-icon>
|
||
<text class="mx-6">{{ locationData.address }}</text>
|
||
</view>
|
||
<view class="mt-10 text-size-m">
|
||
<text class="text-grey">由</text>
|
||
<text class="text-grey mx-6">{{ locationData.store }}</text>
|
||
<text class="text-grey">提供</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="is-bg" :style="headerBackground"></view>
|
||
</view>
|
||
<view class="banner" v-if="banner.open">
|
||
<swiper
|
||
:class="[{ 'is-float': float.open }]"
|
||
:style="{ height: `${props.banner.height}rpx` }"
|
||
>
|
||
<swiper-item v-for="(item, index) in banner.list" :key="index">
|
||
<image
|
||
:src="item.pic"
|
||
:class="[{ 'is-float': float.open }]"
|
||
class="banner-item"
|
||
:style="{ height: `${props.banner.height}rpx` }"
|
||
/>
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="float" v-if="float.open">
|
||
<view class="left" :style="leftStyle" @click="toPath(float.left.link)">
|
||
<template v-if="float.left.mode === 'mode-1'">
|
||
<image class="icon" mode="widthFix" :src="float.left.icon"></image>
|
||
<view class="mt-20 text">{{ float.left.text }}</view>
|
||
</template>
|
||
</view>
|
||
<view class="right" :style="rightStyle" @click="toPath(float.right.link)">
|
||
<template v-if="float.right.mode === 'mode-1'">
|
||
<image class="icon" mode="widthFix" :src="float.right.icon"></image>
|
||
<view class="mt-20 text">{{ float.right.text }}</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</fix-base-style>
|
||
</template>
|
||
|
||
<script lang="ts" name="fix-positioning" setup>
|
||
import { computed, watch, ref, type PropType } from "vue";
|
||
import type { Form } from "../../types/form";
|
||
import { baseProps } from "../../hooks";
|
||
import { useCool, useStore } from "/@/cool";
|
||
|
||
const props = defineProps({
|
||
mode: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
banner: {
|
||
type: Object as PropType<{ open: boolean; height: number; list: Form.Banner[] }>,
|
||
default: () => {
|
||
return {
|
||
open: false,
|
||
height: 750,
|
||
list: [],
|
||
};
|
||
},
|
||
},
|
||
float: {
|
||
type: Object,
|
||
default: () => {
|
||
return {
|
||
open: false,
|
||
left: {
|
||
text: "",
|
||
mode: "mode-1",
|
||
icon: "",
|
||
color: "#000",
|
||
backgroundColor: "#FFFFFF",
|
||
link: {
|
||
name: "",
|
||
type: "",
|
||
appid: "",
|
||
page: "",
|
||
},
|
||
},
|
||
right: {
|
||
text: "",
|
||
mode: "mode-1",
|
||
icon: "",
|
||
color: "#000",
|
||
backgroundColor: "#FFFFFF",
|
||
link: {
|
||
name: "",
|
||
appid: "",
|
||
type: "",
|
||
page: "",
|
||
},
|
||
},
|
||
};
|
||
},
|
||
},
|
||
index: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
...baseProps,
|
||
});
|
||
const { service, router } = useCool();
|
||
const { user } = useStore();
|
||
const emits = defineEmits(["jump"]);
|
||
|
||
const headerBackground = computed(() => {
|
||
return {
|
||
opacity: props.styleColor.opacity,
|
||
backgroundColor: props.styleColor.backgroundColor,
|
||
};
|
||
});
|
||
|
||
const leftStyle = computed(() => {
|
||
let url = "";
|
||
if (props.float.left.mode === "mode-2") {
|
||
url = props.float.left.icon;
|
||
}
|
||
return {
|
||
backgroundColor: props.float.left.backgroundColor,
|
||
color: props.float.left.color,
|
||
backgroundImage: `url('${url}')`,
|
||
};
|
||
});
|
||
|
||
const rightStyle = computed(() => {
|
||
let url = "";
|
||
if (props.float.right.mode === "mode-2") {
|
||
url = props.float.right.icon;
|
||
}
|
||
return {
|
||
backgroundColor: props.float.right.backgroundColor,
|
||
color: props.float.right.color,
|
||
backgroundImage: `url('${url}')`,
|
||
};
|
||
});
|
||
const locationData = ref({
|
||
name: "张大仙",
|
||
time: "早上好",
|
||
store: "南村番禺店",
|
||
distance: "距离你 0.7km",
|
||
address: "广州番禺南村镇（建奇大厦5号）...",
|
||
});
|
||
watch(
|
||
() => props.mode,
|
||
async (newValue) => {
|
||
locationData.value.time = getTimePeriod();
|
||
getStore();
|
||
},
|
||
{
|
||
deep: true,
|
||
immediate: true,
|
||
},
|
||
);
|
||
|
||
function distanceInMeters(distanceInKilometers: number) {
|
||
let dis = "0m";
|
||
if (distanceInKilometers < 1) {
|
||
// 如果距离小于1公里，将其转换为米（1公里 = 1000米）
|
||
dis = Math.floor(distanceInKilometers * 1000) + "m";
|
||
} else {
|
||
dis = distanceInKilometers + "km";
|
||
}
|
||
|
||
return "距离你 " + dis;
|
||
}
|
||
|
||
function getTimePeriod() {
|
||
const now = new Date();
|
||
const hours = now.getHours();
|
||
|
||
if (hours >= 5 && hours < 12) {
|
||
return "早上好!"; // 5:00 - 11:59
|
||
} else if (hours >= 12 && hours < 14) {
|
||
return "中午好!"; // 12:00 - 13:59
|
||
} else if (hours >= 14 && hours < 18) {
|
||
return "下午好!"; // 14:00 - 17:59
|
||
} else if (hours >= 18 && hours < 24) {
|
||
return "晚上好!"; // 18:00 - 23:59
|
||
} else {
|
||
return "深夜好!"; // 00:00 - 4:59
|
||
}
|
||
}
|
||
|
||
function getStore() {
|
||
uni.getLocation({
|
||
type: "wgs84",
|
||
success(res) {
|
||
service.store.sample
|
||
.vicinity({
|
||
...res,
|
||
size: 1,
|
||
page: 1,
|
||
})
|
||
.then((res: any) => {
|
||
if (res.list.length) {
|
||
const { intact, sampleName, distance } = res.list[0];
|
||
locationData.value.distance = distanceInMeters(distance);
|
||
locationData.value.store = sampleName;
|
||
locationData.value.address = intact;
|
||
locationData.value.name = user.info?.nickName || "游客";
|
||
}
|
||
});
|
||
},
|
||
fail(result) {
|
||
// 第一次拒绝后，下次点击提示打开设置授权弹窗
|
||
uni.showModal({
|
||
title: "定位获取失败",
|
||
content: "附近门店查找失败，是否去设置授权打开？",
|
||
success(modal: any) {
|
||
if (modal.confirm) {
|
||
uni.openSetting({
|
||
success: (res) => {},
|
||
});
|
||
}
|
||
},
|
||
});
|
||
},
|
||
});
|
||
}
|
||
function moreStore() {
|
||
router.push("/pages/partnership/sample/vicinity");
|
||
}
|
||
|
||
function toPath(link: Form.Link) {
|
||
emits("jump", link);
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.fix-positioning {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
min-height: 140rpx;
|
||
overflow: hidden;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
.header {
|
||
position: absolute;
|
||
top: 0;
|
||
width: 100%;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
min-height: 140rpx;
|
||
|
||
.is-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
z-index: 1;
|
||
}
|
||
.item {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
z-index: 2;
|
||
padding: 20rpx;
|
||
}
|
||
}
|
||
.banner {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
.banner-item {
|
||
width: 750rpx;
|
||
max-width: 100%;
|
||
min-height: 750rpx;
|
||
height: 100%;
|
||
}
|
||
.float {
|
||
display: flex;
|
||
justify-content: center;
|
||
position: absolute;
|
||
bottom: 20rpx;
|
||
left: 20rpx;
|
||
right: 20rpx;
|
||
|
||
.left {
|
||
margin-right: 30rpx;
|
||
}
|
||
.right {
|
||
margin-left: 30rpx;
|
||
}
|
||
.left,
|
||
.right {
|
||
width: 240rpx;
|
||
height: 280rpx;
|
||
border-radius: 12rpx;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.text {
|
||
font-size: 32rpx;
|
||
font-family: PingFang SC;
|
||
font-weight: bold;
|
||
}
|
||
.icon {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.is-mode-4 {
|
||
display: none;
|
||
}
|
||
.row-center {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.flex-1 {
|
||
flex: 1;
|
||
}
|
||
|
||
.is-float {
|
||
min-height: 750rpx;
|
||
:deep(.uni-swiper-wrapper) {
|
||
overflow: inherit !important;
|
||
}
|
||
}
|
||
.mt-20 {
|
||
margin-top: 20rpx;
|
||
}
|
||
.mt-10 {
|
||
margin-top: 10rpx;
|
||
}
|
||
.text-size-m {
|
||
font-size: 24rpx;
|
||
}
|
||
.mx-6 {
|
||
margin: 0 6rpx;
|
||
}
|
||
.text-grey {
|
||
color: #9e9e9e;
|
||
}
|
||
}
|
||
</style>
|