135 lines
4.4 KiB
Vue
135 lines
4.4 KiB
Vue
<template>
|
||
<view :class="propDirection == 'row' ? '' : 'flex-col gap-10'" >
|
||
<template v-if="propDirection == 'row'">
|
||
<view class="flex-row gap-10 align-c" @tap="choose_user_location">
|
||
<view class="flex-1 flex-row align-c" :style="propStyle">
|
||
<view v-if="isEmpty(form_value)" class="cr-gray">获取定位</view>
|
||
<view>{{ form_value.address }}</view>
|
||
</view>
|
||
<iconfont name="icon-latitude-location" size="32rpx" color="#666" propContainerDisplay="flex" ></iconfont>
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<!-- 定位 -->
|
||
<view class="pc-disable flex-row align-c jc-c w h" :style="com_data.common_style + propStyle" @tap="choose_user_location">
|
||
<view class="flex-row align-c jc-c gap-10 pa-5">
|
||
<iconfont name="icon-latitude-location" size="32rpx" color="#666" propContainerDisplay="flex" ></iconfont>
|
||
获取定位
|
||
</view>
|
||
</view>
|
||
<view v-if="!isEmpty(form_value)" class="flex-col gap-10 jc-c" :style="propStyle + 'height: 100%;'">
|
||
<view class="flex-row align-c gap-5">
|
||
<iconfont name="icon-location" size="32rpx" color="#666" propContainerDisplay="flex" ></iconfont>
|
||
<view class="nowrap">{{ form_value.address }}</view>
|
||
</view>
|
||
<view v-if="com_data.is_longitude_and_latitude == '1'" class="flex-row align-c gap-10">
|
||
<view>经度坐标：{{ form_value.lng }}</view>
|
||
<view>纬度坐标：{{ form_value.lat }}</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
const app = getApp();
|
||
import { isEmpty } from '@/common/js/common/common.js';
|
||
export default {
|
||
props: {
|
||
propValue: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
propKey: {
|
||
type: [String, Number],
|
||
default: 0,
|
||
},
|
||
propDataId: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
propStyle: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
propIsCustom: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
propDirection: {
|
||
type: String,
|
||
default: 'row',
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
com_data: {},
|
||
form_value: {},
|
||
cloice_location_timer: null,
|
||
};
|
||
},
|
||
watch: {
|
||
propValue: {
|
||
handler(newVal) {
|
||
this.init();
|
||
},
|
||
deep: true
|
||
},
|
||
propKey(val) {
|
||
// 初始化
|
||
this.init();
|
||
},
|
||
},
|
||
mounted() {
|
||
this.init();
|
||
},
|
||
methods: {
|
||
isEmpty,
|
||
// 初始化数据
|
||
init() {
|
||
const com_data = this.propValue;
|
||
this.setData({
|
||
com_data: com_data,
|
||
form_value: com_data?.form_value || {},
|
||
});
|
||
},
|
||
// 选择位置监听
|
||
choose_user_location(e) {
|
||
// 定时任务
|
||
clearInterval(this.cloice_location_timer);
|
||
var self = this;
|
||
var timer = setInterval(function () {
|
||
var result = app.globalData.choice_user_location_init() || null;
|
||
if (result != null && (result.status == 1 || result.status == 3)) {
|
||
self.setData({
|
||
form_value: result,
|
||
});
|
||
clearInterval(self.cloice_location_timer);
|
||
|
||
// 回调事件
|
||
self.$emit('data_change', result, this.propDataIndex);
|
||
}
|
||
}, 1000);
|
||
this.setData({
|
||
cloice_location_timer: timer,
|
||
});
|
||
|
||
// 进入位置选择
|
||
app.globalData.choose_user_location_event();
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.pa-5 {
|
||
padding: 10rpx;
|
||
}
|
||
.gap-10 {
|
||
gap: 20rpx;
|
||
}
|
||
.gap-5 {
|
||
gap: 10rpx;
|
||
}
|
||
</style>
|