cte-share/pages/UserCenter/dizhi/newdizhi.vue

<template>
	<view class="contentV">
		<customNav :shownav="true" :title="$t('index.shouhuodz')" titledetl=""></customNav>
		<view class="topaddrCTV bottomline">
			<view class="contentInRowS" @click="selectDizhi">
				<view class="contentColumn">
					<text class="areaT textfontB4">{{area}}</text>
					<text class="addressT textfontB5">{{xingzhengqw}}</text>
				</view>
				<image class="slot-image" src="/static/images/dizhil@3x.png" mode="widthFix"></image>
			</view>
		</view>
		<text class="linesp"></text>
		<view class="inputctV">
			<text>{{$t('index.xiangxidz')}}</text>
			<input class="inputV" type="text" :disabled="jinzhishur" :value="address" :placeholder="$t('index.qsrxiangxidz')" @input="addressinput">
		</view>
		<text class="linesp"></text>
		<view class="inputctV">
			<text>{{$t('index.lianxiren')}}</text>
			<view class="ctinrow">
				<input class="inputV" type="text" :disabled="jinzhishur" :value="name" :placeholder="$t('index.qsrlianxiren')"  @input="nameinput">
				<!-- <radio-group @change="radioChange">
				  <radio value="y" />
				  {{$t('index.xiansheng')}}
				  <radio value="x"/>
				  {{$t('index.nvshi')}}
				</radio-group> -->
			</view>
			
		</view>
		<text class="linesp"></text>
		<view class="inputctV">
			<text>{{$t('order.lianxidianhua')}}</text>
			<view class="ctinrow">
				<!-- <view class="xialakuang" @click="popgjm">
					<text>{{guojiadaima}}</text>
					<image style="width: 36rpx;height: 36rpx;padding-right: 16rpx;" src="/static/images/xiala@3x.png" mode="scaleToFill"></image>
				</view> -->
				<input class="inputphone" type="number" :disabled="jinzhishur" :value="phone" :placeholder="$t('index.shoujihao')"  @input="phoneinput">
			</view>
			
		</view>
		<view class="contentInRowL" style="margin-left: 5%;margin-top: 50rpx;">
			<text>{{$t('order.menpaizp')}}</text>
		</view>
		<view class="contentColumnC" style="margin-top: 30rpx;">
			<yhdslCropper ref="yhdslCropper" :quality="1" mode="scale"  @uploadImg="uploadImg" :scale="scale"></yhdslCropper>
			<image class="imagV" :src="baseUrl+mpImage" mode="scaleToFill" @click="selectImage"></image>
		</view>
		<view class="contentColumnC" style="margin-top: 50rpx;">
			<text class="savebt" @click="updataAddr">{{$t('index.tijiao')}}</text>
			<text v-if="id>=0" class="delbt" @click="deleteAddr">{{$t('index.sanchu')}}</text>
		</view>
		<view style="height: 60rpx;"></view>
		<popViewGG :tips="$t('index.gjqhxz')" :show="showpop" :acttips="$t('order.queding')" :maskClosable="true" :isCancel="true" @chooseCancel="chooseCancel">
			<picker-view :indicator-style="indicatorStyle" :value="pvalue" @change="bindChange" class="picker-view">
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in range" :key="index">{{item}}</view>
			    </picker-view-column>
			</picker-view>
		</popViewGG>
	</view>
</template>

<script>
	import yhdslCropper from '@/components/yhdsl-cropper/yhdsl-cropper.vue';
	import api from "@/pages/api/api.js"
		export default {
		components: {
			yhdslCropper
		},
		data() {
			return {
				pvalue: [0],
				indicatorStyle: `height: 50px;`,
				range: ["+86","+84","+886"],
				showpop:false,
				guojiadaima:'+86',
				latitude: 0,
				longitude: 0,
				country:'',
				province:'',
				city: "",
				area: '',
				address: "", 
				phone:'',
				name:'',
				annexes:'',
				id:-1,
				xingzhengqw:this.$t('mend.qingxzdz'),
				jinzhishur:false,
				scale:1,
				baseUrl:this.$baseImagurl,
				mpImage:''
			}
		},
		onLoad(option) {
			this.id = option.id;
			if(this.id>=0){
				this.getaddressxq(this.id);
			}
		},
		onShow() {
			this.gettempLocate();
			if(this.latitude==0||this.longitude==0){
				this.jinzhishur=true;
			}
			else{
				this.jinzhishur=false;
			}
		},
		methods: {
			radioChange(e){
				console.log(e.detail.value)
			},
			bindChange (e) {
				var val = e.detail.value[0];
				this.guojiadaima=this.range[val];
			},
			popgjm(){
				this.showpop=true;
			},
			chooseCancel(){
				this.showpop=false;
			},
			addressinput(event){
				this.address = event.target.value;
			},
			nameinput(event){
				this.name = event.target.value;
			},
			phoneinput(event){
				this.phone = event.target.value;
			},
			selectDizhi(){
				// uni.navigateTo({
				// 	url:'/pages/UserCenter/map/mapN?state=2'
				// })
				uni.navigateTo({
					url:'/pages/UserCenter/map/Chazhaodizhi'
				})
			},
			gettempLocate(){
				try {//读取
					var data = uni.getStorageSync("tempLocation");
					if(''==data || undefined==data || null==data){
						return;
					}
					else{
						this.latitude=data.latitude;
						this.longitude=data.longitude;
						this.address=data.address;
						this.xingzhengqw=data.address;
						this.area=data.name;
						uni.setStorageSync('userAddrLocation',"");
						uni.setStorageSync('tempLocation',"");
						return;
					}
				} catch(e){//错误
					return;
				}
			},
			selectImage(){
				 this.$refs.yhdslCropper.chooseImage();
			},
			uploadImg(e) {
				console.log('------------uploadImg:',e)
				this.spImage = e;
				var that = this;
				uni.uploadFile({
					url: this.$upImagurl, //上传图片api
					filePath: e,
					name: 'file',
					header:{
						//"Authorization": userinfo.token
					},
					success: (res) => {
						let group =  JSON.parse(res.data);
						that.mpImage=group.data;
						console.log(group)
						uni.showToast({
							title:that.$t('mend.shangccg'),
							icon:"success"
						})
					}
				});
			},
			getaddressxq(id){
				
				api('getaddressxq',{
					id: id
				},r=>{
					console.log('getaddressxq:',r);
					this.latitude=r.data.data.latitude;
					this.longitude=r.data.data.longitude;
					this.address=r.data.data.address;
					this.xingzhengqw=r.data.data.address;
					this.phone=r.data.data.phone;
					this.area=r.data.data.area;
					this.name=r.data.data.name;
					this.mpImage=r.data.data.annexes;
					this.jinzhishur=false;
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			
			updataAddr(){
				if(this.address.length<1){
					uni.showToast({
						title:this.$t('index.qsrxiangxidz'),
						icon:"none"
					})
					return;
				}
				
				if(this.name.length<1){
					uni.showToast({
						title:this.$t('index.qsrlianxiren'),
						icon:"none"
					})
					return;
				}
				
				if(this.phone.length<1){
					uni.showToast({
						title:this.$t('index.shoujihao'),
						icon:"none"
					})
					return;
				}
				
				this.postaddress();
			},
			deleteAddr(){
				if(this.id<0){
					console.log('未提交的新地址');
				}
				else{
					var that = this;
					uni.showModal({
						cancelText:that.$t('order.quxiao'),
						confirmText:that.$t('comp.queren'),
					    title: that.$t('api.message'),
					    content:that.$t('index.shanchuAddr'),
					    success: function (res) {
					        if (res.confirm) { //这里是点击了确定以后
								that.deleaddress();
					        } else { //这里是点击了取消以后
					          console.log('点击取消')
					        }
					    }
					})
				}
			},
			
			deleaddress(){
				
				api('deleaddress',{
					id:this.id
				},res=>{
					console.log('deleaddress:',res);
					uni.navigateBack();
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			
			postaddress(){
				var addr;
				if(this.id<0){
					addr={
						name:this.name,
						phone:this.phone, 
						address: this.address, 
						longitude:this.longitude, 
						latitude: this.latitude, 
						country:'', 
						province:'', 
						city:'', 
						area:this.area,
						annexes:this.mpImage
					}
				}
				else{
					addr={
						id:this.id,
						name:this.name,
						phone:this.phone, 
						address: this.address, 
						longitude:this.longitude, 
						latitude: this.latitude, 
						country:'',
						province:'', 
						city:'', 
						area:this.area,
						annexes:this.mpImage
					}
				}
				console.log('addr:',addr);
				
				api('ADDaddress',addr,
				res=>{
					console.log('getGoodsDetail:',res);
					uni.navigateBack();
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			
		}
	}
</script>

<style>
.contentV{
	width: 100%;
	position: relative;
	height: 94vh;
}
.linesp{
	width: 100%;
	height: 8rpx;
	background-color: aliceblue;
}
.topaddrCTV{
	margin-top: 60rpx;
	padding-bottom: 20rpx;
	width: 90%;
	margin-left: 5%;
}

.bottomline{
	border: solid lightgray;
	border-width: 0px 0px 2rpx 0px;
}

.areaT{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.addressT{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 30px;
		height: 30px;
}
.xialakuang{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content:space-between;
	padding-left: 10rpx;
	width: 140rpx;
	height: 60rpx;
	margin-right: 20rpx;
	border-radius: 10rpx;
	border: 2rpx solid darkgray;
}
.inputctV{
	width: 90%;
	height: 120rpx;
	margin-left: 5%;
	margin-top: 30rpx;
}

.ctinrow{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: left;
}

.inputV{
	margin-top: 8rpx;
	width: 100%;
	height: 60rpx;
	font-size: 28rpx;
	border-radius: 8rpx;
	border: 2rpx solid darkgray;
	
}


.inputphone{
	margin-top: 8rpx;
	width: 100%;
	height: 60rpx;
	font-size: 28rpx;
	border-radius: 8rpx;
	border: 2rpx solid darkgray;
	
}
.savebt{
	text-align: center;
	font-size: 36rpx;
	width: 80%;
	height: 80rpx;
	line-height: 80rpx;
	color: white;
	background-color: green;
	border-radius: 10rpx;
}

.delbt{
	margin-top: 50rpx;
	text-align: center;
	font-size: 36rpx;
	width: 80%;
	height: 80rpx;
	line-height: 80rpx;
	color: white;
	background-color: darkgray;
	border-radius: 10rpx;
}

.imagV{
	width: 640rpx;
	height: 640rpx;
	background-color: antiquewhite;
}

.picker-view {
	width: 750rpx;
	height: 300rpx;
	margin-top: 10rpx;
}
.item {
	line-height: 100rpx;
	text-align: center;
}
</style>