feat: 调整项目结构
This commit is contained in:
BIN
src/components/LocationCard/images/loc_bg_img.png
Normal file
BIN
src/components/LocationCard/images/loc_bg_img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
src/components/LocationCard/images/loc_icon_img.png
Normal file
BIN
src/components/LocationCard/images/loc_icon_img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
52
src/components/LocationCard/index.vue
Normal file
52
src/components/LocationCard/index.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<view class="store-address" @click="openMap">
|
||||
<view class="text-container">
|
||||
<text class="location-label">位于 {{ orderData.oneLevelAddress }} </text>
|
||||
<text class="address-text">{{ orderData.commodityAddress }}</text>
|
||||
</view>
|
||||
<image
|
||||
class="loc-icon"
|
||||
src="./images/loc_icon_img.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
orderData: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
// 打开地图
|
||||
const openMap = () => {
|
||||
const address = props.orderData.commodityAddress;
|
||||
const latitude = Number(props.orderData.commodityLatitude);
|
||||
const longitude = Number(props.orderData.commodityLongitude);
|
||||
|
||||
uni.getLocation({
|
||||
type: "gcj02", //返回可以用于uni.openLocation的经纬度
|
||||
success: (res) => {
|
||||
console.log("当前经纬度", latitude, longitude);
|
||||
|
||||
uni.openLocation({
|
||||
latitude: latitude,
|
||||
longitude: longitude,
|
||||
address: address,
|
||||
success: () => {
|
||||
console.log("success");
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "./styles/index.scss";
|
||||
</style>
|
||||
51
src/components/LocationCard/styles/index.scss
Normal file
51
src/components/LocationCard/styles/index.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
.store-address {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 6px 0;
|
||||
padding: 16px 12px;
|
||||
background-image: url("./images/loc_bg_img.png"); // 预留背景图片位置,用户手动导入
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// 左侧文本容器
|
||||
.text-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
// 确保内容在遮罩层之上
|
||||
.location-label,
|
||||
.address-text,
|
||||
.loc-icon {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.location-label {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.address-text {
|
||||
margin-top: 4px;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
// 右侧图标样式
|
||||
.loc-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user