CBB3/pages/chat/friend/noteinfo.vue

<template>
	<view class="app">
		<uni-nav-bar statusBar backgroundColor="#fff" fixed title="备注信息" left-icon="left" @clickLeft="utils.navigateBack()">
			<view  slot="right" @tap="tapSubmit">
				<view class="sub-btn">完成</view>
			</view>	
		</uni-nav-bar>
		<view class="info-view">
			<view class="label">备注名</view>
			<input type="text" placeholder="请输入备注名" v-model="remark"/>
		</view>
		
		<view class="info-name">电话号码</view>
		<view class="info-phone">
			<view class="phone-item fx-r fx-bc" v-for="(item,index) in phoneAr">
				<image @tap="tapRemove(index)" src="/static/chat/reduce.png"></image>
				<input type="number" v-model="phoneAr[index]" placeholder="请输入电话号码" />
			</view>
			  
			<view class="phone-item fx-r fx-bc" @tap="tapAdd">
				<image src="/static/chat/re-add.png"></image>
				<text>添加电话号码</text>
			</view>
		</view>
		
	</view>
</template>
<style lang="scss">
	.sub-btn{color: #fff;background:$ic-appcolor;padding: 8px;border-radius: 4px;}
	.info-view{
		padding: 10px;
		background: #fff;
		.label{
			color: #000;
			font-size: 16px;
		}
		input{padding: 10px 0;font-size: 14px;}
	}
	.info-name{color: $ic-default-text;padding: 10px;}
	.info-phone{background: #fff;}
	.info-phone .phone-item{padding:15px 10px;font-size: 14px;}
	.info-phone .phone-item image{width: 20px;height: 20px;margin-right: 4px;}
</style>

<script>
	import {mapState,mapMutations } from 'vuex';
	export default {
	    data() {
	        return {
				data 	 : {},
				usercode : "",
				phoneAr	 : [],
				remark	 : ""
	        }  
	    },
		
		onLoad(option){
			this.usercode = option.usercode || "";
			this.getData();
		},
	    methods: {
				getData:function(){
					uni.showLoading({	title: '获取数据中..'});
					this
						.request
						.post("chatFriendFind",{usercode:this.usercode})
						.then(res => {
							uni.hideLoading();
							if(res.code == 200) {
								this.data = res.data;
								if(res.data.friend.phone != "")
									this.phoneAr = res.data.friend.phone.split(",");
								this.remark = res.data.friend.remark;
							} else {
								uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
							}
						})
						.catch(res=>{
							console.log(res);
							uni.hideLoading();
							uni.showModal({title: '系统提示',content: '加载失败，重新点击尝试！',showCancel: false});
						});
				},
				isPhone:function(str){
					if(str == '') return [];
					return str.split(',');
				},
				
				tapSubmit:function(){
					var phone = "";
					for(var i in this.phoneAr) {
						if(this.phoneAr[i] == '') {
							uni.showModal({title: '系统提示',content: '请输入手机号码！',showCancel: false});
							return;
						}
					}
					
					phone = this.phoneAr.join(',');
					
					uni.showLoading({	title: '提交中..'});
					this
						.request
						.post("FriendSetRemark",{remark:this.remark,phone:phone,id:this.data.friend.id})
						.then(res => {
							uni.hideLoading();
							if(res.code == 200) {
								this.utils.Tip("操作成功");
								this.getData();
							} else {
								uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
							}
						})
						.catch(res=>{
							console.log(res);
							uni.hideLoading();
							uni.showModal({title: '系统提示',content: '加载失败，重新点击尝试！',showCancel: false});
						});
					
				},
				
				/**
				 * open
				 * @param {Object} ev
				 */
				tapOpen:function(ev){
					let url = ev.currentTarget.dataset.url;
					this.utils.navigateTo(url);
				},
				/**
				 * 移除数据
				 * @param {Object} index
				 */
				tapRemove:function(index){
					console.log(index);
					this.$delete(this.phoneAr,index);
				},
				/**
				 * 添加数据
				 */
				tapAdd:function(){
					this.phoneAr.push("");
				}
				
	    }
	}
</script>