zx_flk_app/pages/powerSetting/powerSetting.vue

<template>
		<view class="power-setting-main">
			<navBar :name="$t('权限设置')" bgColor="transparent"></navBar>
			<view class="flex-row power-setting-head">
				<image class="head-img" :src="form.headimg || defaultHeadImg"></image>
				<view class="head-name">{{form.nickname}}</view>
				<text class="head-email">{{form.email}}</text>
			</view>
			<view class="setting-card" style="margin-bottom: 20rpx;">
				<view class="setting-card-name">{{ $t('权限设置') }}</view>
				<view @click="selctFn(4)" class="setting-card-list flex-row">
					<img src="https://qiniu.bms16.com/FgFEr3CUA43kd7yVCDcK4F7v9_zx" alt="">
					<view class="setting-list-text flex-row flex-between">
						<text>{{ $t('查看实时位置') }}</text>
						<img v-if="form.authority_list.indexOf(4) == -1" class="setting-list-arrow"
							src="https://qiniu.bms16.com/FrA97op1dwM9XWH1ocqnF5FFlqoY" alt="">
						<img v-else class="setting-list-arrow" src="https://qiniu.bms16.com/FuA5w59wrvsisg3bGhe3hQ2dR3Bk"
							alt="">
					</view>
				</view>
				<view @click="selctFn(5)" class="setting-card-list flex-row">
					<img src="https://qiniu.bms16.com/FmcZqGTnt64_v2xpgNbqS9Fa-fwy" alt="">
					<view class="setting-list-text flex-row flex-between">
						<text>{{ $t('使用换电') }}</text>
						<!-- <img class="setting-list-arrow" src="https://qiniu.bms16.com/FuA5w59wrvsisg3bGhe3hQ2dR3Bk" alt=""> -->
						<img v-if="form.authority_list.indexOf(5) == -1" class="setting-list-arrow"
							src="https://qiniu.bms16.com/FrA97op1dwM9XWH1ocqnF5FFlqoY" alt="">
						<img v-else class="setting-list-arrow" src="https://qiniu.bms16.com/FuA5w59wrvsisg3bGhe3hQ2dR3Bk"
							alt="">
					</view>
				</view>
			</view>
			<view class="setting-card" style="margin-bottom: 32rpx;">
				<view class="setting-card-name">{{ $t('默认设置') }}</view>
				<view class="setting-card-list flex-row">
					<img src="https://qiniu.bms16.com/FsUxQz3DwHIj_vt3fY25Twmjfpek" alt="">
					<view class="setting-list-text flex-row">{{ $t('远程开关锁') }}</view>
				</view>
				<view class="setting-card-list flex-row">
					<img src="https://qiniu.bms16.com/FuCNZSqsoMxn2ha-njRW3zC2ORTz" alt="">
					<view class="setting-list-text flex-row">{{ $t('座桶锁') }}</view>
				</view>
				<view class="setting-card-list flex-row">
					<img src="https://qiniu.bms16.com/Fs7i3i_LBM7Zpxyj7Ad7_Kc_8z-J" alt="">
					<view class="setting-list-text flex-row">{{ $t('感应解锁') }}</view>
				</view>
			</view>
			<view v-if="isSet" @tap="submit" class="check-btn add-btn">{{ $t('确认添加') }}</view>
			<view v-else @tap="delSubmit" class="check-btn del-btn">{{ $t('删除成员') }}</view>
		</view>
</template>

<script>
	var config = require('../../common/config_gyq.js');
	var http = require('../../common/request.js');
	import {
		defaultHeadImg
	} from '@/common/constant'
	import {
		msg
	} from '../../utils/util.js';
	export default {
		data() {
			return {
				defaultHeadImg,
				isSet:"",
				target_user_id:0,
				form: {
					headimg: "",
					nickname: "",
					car_sn: "",
					email: "",
					authority_list: [5]
				}
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			this.isSet = options.isSet
			this.form.car_sn = uni.getStorageSync('car_info').car_sn || '';
			if(options.id){
				this.target_user_id = options.id
				this.carInfoFn()
				return
			}
			this.form.email = options.email;
			this.form.headimg = options.headimg;
			this.form.nickname = options.nickname;
		},
		methods: {
			async carInfoFn(){
				let {
					data
				} = await http.postApi(config.API_FLK_CAR_EDIT_SHARE_INFO, {
					car_sn: this.form.car_sn,
					target_user_id: this.target_user_id
				})
				if(data.code == 200){
					data.data.authority = data.data.authority.map(item=>{
						return Number(item)
					})
					this.form.authority_list = data.data.authority
					this.form.email = data.data.email
					this.form.nickname = data.data.nickname
					this.form.headimg = data.data.headimg
				}
			},
			async delSubmit() {
				let res = await uni.showModal({
					content:this.$t('确定删除这个成员吗？')
				})
				if(!res[1].confirm) return
				let {
					data
				} = await http.postApi(config.API_FLK_CAR_REMOVE_SHARE_USER, {
					car_sn: this.form.car_sn,
					email: this.form.email
				})
				uni.showLoading({
					mask:true,
					title:this.$t('删除中')+'...'
				})
				msg(data.msg)
				if(data.code == 200){
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						})
					},800)
				}
			},
			async submit() {
				uni.showLoading({
					mask: true,
					title: this.$t('提交中')+'...'
				})
				let {
					data
				} = await http.postApi(config.API_FLK_CAR_ADD_SHARE_USER, this.form)
				uni.hideLoading()
				if (data.code == 200) {
					msg(this.$t('添加成功！'))
					setTimeout(() => {
						uni.navigateBack({
							delta: 2
						})
					}, 800)
				} else {

					msg(data.msg)
				}
			},
			selctFn(type) {
				if (this.form.authority_list.indexOf(type) != -1) {
					this.form.authority_list = this.form.authority_list.filter(item => item !== type);
				} else {
					this.form.authority_list.push(type)
				}
				if(this.target_user_id) this.editFn()
				
			},
			async editFn(){
				let {
					data
				} = await http.postApi(config.API_FLK_CAR_EDIT_SHARE_USER,{
					...this.form,
				})
			}
		}
	};
</script>
<style>
	@import './powerSetting.css';
</style>