zd/pages/user/myCart/cartConfing.vue

<template>
	<view>
		<view class="iconList flex">
			<navigator :url="'/pages/user/myCart/authorization?id='+item.car_number" v-if="item.auth_num!=-1">
				<view class="iconItem">
					<view class="iconImgItem">
						<image src="../../../static/icon/iconAuthorization.png" mode="widthFix"></image>
					</view>
					<view class="iconName">
						授权
					</view>
				</view>
			</navigator>
			<navigator :url="'/pages/user/reportForRepair/Report?id='+item.car_number">
				<view class="iconItem">
					<view class="iconImgItem">
						<image src="../../../static/icon/iconBaoxiu.png" mode="widthFix"></image>
					</view>
					<view class="iconName">
						报修
					</view>
				</view>
			</navigator>
			<!-- <view class="iconItem">
			<view class="iconImgItem">
				<image src="../../../static/icon/iconSet.png" mode="widthFix"></image>
			</view>
		</view> -->
			<view class="iconItem" @click="tabCarStatus('seek',item)">
				<view class="iconImgItem">
					<image src="../../../static/icon/iconAlarm.png" mode="widthFix"></image>
				</view>
				<view class="iconName">
					寻车
				</view>
			</view>
			<view class="iconItem" @click="tabCarStatus('tab',item)">
				<view class="iconImgItem">
					<image v-if="item.status==1||item.status==3||item.status==4" src="../../../static/icon/lockGreen.png" mode="widthFix">
					</image>
					<image v-else src="../../../static/icon/lockRed.png" mode="widthFix"></image>
				</view>
				<view class="iconName">
					<view class="greed" v-if="item.status==1||item.status==3||item.status==4">
						启动
					</view>
					<view class="red" v-else>
						关闭
					</view>
				</view>
			</view>
			<view class="iconItem" @click="tabCarStatus('unlock',item)">
				<view class="iconImgItem">
					<image src="../../../static/icon/lockGray.png" mode="widthFix"></image>
				</view>
				<view class="iconName">
					解锁
				</view>
			</view>
		</view>
		<uni-popup ref="message" type="message">
			<uni-popup-message type="error" message="错误消息" :duration="0">
			</uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		car_switch
	} from '@/api/user.js';
	// #ifdef MP
	import {
		openGetAddress,
	} from '@/utils/rocessor.js';
	// #endif
	// #ifdef H5
	import weixinObj from "@/plugin/jweixin-module/index.js";
	import {
		weixindata
	} from "@/utils/wxAuthorized.js"
	// #endif

	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		props: {
			item: {
				type: Object,
				default () {
					return {

					}
				}
			},
		},
		data() {
			return {
				loadShopData: false, //判断是否已经开启监听
			}
		},
		computed: {
			auth_num() {
				return this.item ? +this.item.auth_num : 0
			},
			...mapState('user', ['address']),
		},
		methods: {
			...mapMutations('user', ['setAddress']),
			// 数据加载中
			// 保存地址
			car_switch(data, type, item) {
				car_switch(data).then(() => {
					if (type == 'tab') {
						const status = (item.status == 1) ? 2 : 1;
						this.$emit("tab", status)
					}
					uni.hideLoading()
					uni.showToast({
						title: '发送成功'
					});
				}).catch((e) => {
					uni.hideLoading()
					// this.$refs.message.open();
					uni.showModal({
						title: '错误',
						content: e.msg,
						showCancel: false,
					});
				})
			},
			// 调用切换
			tabCarStatus(type = 'tab', item) {
				let that = this;
				let data = {
					car_number: item.car_number,
				};
				// 是否开关锁
				if (type == 'tab') {
					data.status = (item.status == 1) ? 2 : 1;
				}
				// 是否解锁
				if (type == 'unlock') {
					data.status = 6;
				}
				// 是否寻车
				if (type == 'seek') {
					data.status = 5;
				}
				// #ifdef H5
				let bool = uni.getStorageSync('weichatBrowser') || '';
				// 判断是否公众号
				if (bool) {
					weixindata().then(() => {
						weixinObj.getLocation({
							type: 'gcj02',
							success: (e) => {
								data.latitude = e.latitude;
								data.longitude = e.longitude;
								that.car_switch(data, type, item)
							}
						});
					})
				} else {
					uni.getLocation({
						type: 'gcj02',
						success(e) {
							data.latitude = e.latitude;
							data.longitude = e.longitude;
							that.car_switch(data, type, item)
						},
						fail(e) {
							console.log(e, 'cw');
						}
					})
				}

				// #endif

				// #ifdef MP
				// 判断是否已经有位置数据

				if (!that.address.latitude || !that.address.longitude) {
					// 判断是否已经获取授权
					openGetAddress().then((e) => {
						// 获取当前选中开锁的对象
						uni.showLoading({
							title: '请求发送中',
							mask: true
						});
						console.log("授权");
						wx.startLocationUpdateBackground({
							type: 'gcj02',
							success: (e) => {
								console.log(e);
								// 调用鉴定位置变化事件
								wx.onLocationChange((res) => {
									console.log(res, '位置数据');
									// 保存当前经纬度
									that.setAddress({
										latitude: res.latitude,
										longitude: res.longitude
									})
									// 判断是否已经加载过最近商家信息
									if (!that.loadShopData) {
										data.latitude = res.latitude;
										data.longitude = res.longitude;
										that.car_switch(data, type, item)
										that.loadShopData = true;
									}
								})
							},
							fail: () => {
								uni.hideLoading()
							}
						})

					})
				} else {
					uni.showLoading({
						title: '请求发送中',
						mask: true
					});
					data.latitude = that.address.latitude;
					data.longitude = that.address.longitude;
					that.car_switch(data, type, item)
				}
				// #endif
			}
		}
	};
</script>

<style lang="scss">
	.iconList {
		padding: 30rpx;
		padding-bottom: 0;

		.iconItem {
			.iconImgItem {
				width: 62rpx;
				margin: 0 auto;

				image {
					width: 100%;
					height: 62rpx;
				}
			}

			.iconName {
				color: $font-color-base;
				font-size: 22rpx;
				text-align: center;
				padding: 15rpx 0;
				font-weight: 100;

				.greed {
					color: $color-green;
				}

				.red {
					color: $color-red;
				}
			}
		}
	}
</style>