crm-uni/pages/mine/changinfo.vue

<template>
	<view>
		<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000" backgroundColor="#fff" :statusBar="true" :title="$t('navbar.persondata')"></uni-nav-bar>
		<view class="content">
			<view class="topimg">
				<uni-file-picker fileMediatype="image" limit="1" :list-styles="imageStyles" :del-icon="false" disable-preview @select="select" @delete="delfn('picture')">
					<image class="user" :src="userinfo.avatar"mode=""></image>
					<!-- <image class="xj" src="/static/image/mine/xiangji.png" mode=""></image> -->
				</uni-file-picker>
				<view>{{$t('mine.changeavatar')}}</view>
			</view>
			<view class="cell1">
				<view class="item">{{$t('gender')}}</view>
				<view class="right">
					<u-radio-group v-model="userinfo.sex">
					  <u-radio :name="Number(1)" class="m-r-10">{{$t('gender1')}}</u-radio>
					  <u-radio :name="Number(2)">{{$t('gender2')}}</u-radio>
					</u-radio-group>
				</view>
			</view>
			<u-divider text=""></u-divider>
			<view class="cell1">
				<view class="item">{{$t('mine.nickname')}}</view>
				<view class="right">
					<input  :placeholder="$t('mine.nicknameinputhd')" v-model="userinfo.name"></input>
				</view>
			</view>
			<u-divider text=""></u-divider>
			<view class="cell1">
				<view class="item">{{$t('mine.lxcall')}}</view>
				<view class="right">
					<input  :placeholder="$t('mine.lxcallinputhd')" type="number" v-model="userinfo.mobile"></input>
				</view>
			</view>
			<u-divider text=""></u-divider>
			<view class="cell1">
				<view class="item">{{$t('mine.position')}}</view>
				<view class="right">
					<input :placeholder="$t('mine.positioninput')" type="text" v-model="userinfo.position"></input>
				</view>
			</view>
			
			<!-- <view class="cell1">
				<view class="item">{{$t('Region')}}</view>
				<view class="right select">
					<input  :placeholder="$t('Regioninputhd')" v-model="userinfo.company"></input>
					<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
				</view>
			</view> -->
			<view class="cell1">
				<view class="item">{{$t('customer.Company')}}</view>
				<view class="right select" @click="showcomp = true">
					<view class="" :class="['content2', { placeholder: !company_name }]">{{company_name || $t('inputnl')}}</view>
					<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
				</view>
			</view>
			<u-divider text=""></u-divider>
			<view class="cell1">
				<view class="item">{{$t('customer.Country')}}</view>
				<view class="right select" @click="showPicker = true">
					<view class="" :class="['content2', { placeholder: !country_name }]">{{country_name || $t('customer.Countryinput')}}</view>
					<u-icon class="arrowright" name="arrow-right" size="18" color="#747474"></u-icon>
				</view>
			</view>
		</view>
		<view class="foot">
			<button class="btn"  @click="bcFn">{{$t('save')}}</button>
		</view>	
		<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :defaultIndex="defaultIndexgs" :show="showcomp" @cancel="cancel('showcomp')" @close="close('showcomp')"  :columns="company" keyName="name" @confirm="companyChange"></u-picker>
		
		<u-popup closeOnClickOverlay :show="showPicker" mode="bottom"  :round="10"  @close="close('showPicker')">
			<view class="text">
				<view class="qx" @click="close('showPicker') ">{{$t('cancel')}}</view>
				<view class="qd" @click="arerfn">{{$t('confirm')}}</view>
			</view>
			  <view class="popup-content">
				<!-- 搜索框 -->
				<u-input
				  v-model="searchKeyword"
				  :placeholder="$t('keyword')"
				  @input="handleSearch"
				></u-input>
		
				<!-- 选项列表 -->
				<scroll-view scroll-y class="option-list">
				  <view
					v-for="(item, index) in filteredOptions"
					:key="index"
					class="option-item"
					@click="handleSelect(item)"
					:class="actives==item.id?'actives':''"
				  >
					{{ item.name  }}
				  </view>
				  <view v-if="filteredOptions.length === 0" class="no-data">
					{{$t('noresults')}}
				  </view>
				</scroll-view>
			  </view>
		</u-popup>
	</view>
</template>
<script>
	import { nextTick } from "vue"
	import { request,showToast } from '@/api/apiT.js'
	export default {
		data() {
			return {
				loca:uni.getLocale(),
				actives:'',
				showPicker: false, // 控制选择器显示
				searchKeyword: "", // 搜索关键词
				selectedLabel: "", // 选中的值（显示在输入框中）
				filteredOptions: [], // 过滤后的数据
				showarea: false,
				showcomp: false,
				country_name:'',
				areaList1:[],
				areaList:[],
				defaultIndexgj:[0],
				company_name:'',
				defaultIndexgs:[0],
				imageStyles: {
					border: true,
				},
				userinfo:{},
				
			}
		},
		onLoad() {
			this.area()
			this.companyfn()
			this.getinfo()
		},
		methods: {
			// 搜索处理函数
			handleSearch() {
				var that = this
			  if (this.searchKeyword) {
				console.log(this.searchKeyword)
				this.filteredOptions = this.areaList1.filter((item) => item.name.includes(this.searchKeyword));
				
				console.log(this.filteredOptions)
			  } else {
				// 如果搜索框为空，显示全部数据
				this.filteredOptions = this.areaList1;
			  }
			},
			// 选择选项
			handleSelect(item) {
				this.selectedLabel = item.name; // 回显选中的值
			  // this.searchKeyword = item.name
			  this.actives = item.id
			  // this.showPicker = false; // 关闭弹窗
			  console.log("选中的值:", item.id);
			  console.log("选中的值:", item.name);
			},
			arerfn(){
				 this.showPicker = false; // 关闭弹窗
				 this.country_name = this.selectedLabel
				 this.userinfo.country_id = this.actives
				 
			},
			getinfo(){
				var that= this;
				request({
					url:'user/getInfo',
					method:'get',
				}).then(res => {
					if(res.data.data.position=='null'){
						res.data.data.position=''
					}
					that.userinfo = res.data.data;
					this.actives  = res.data.data.country_id
					this.country_name  = res.data.data.country_name
					that.select1()
				})
			},
			select1(){
				var that=this;
				that.company1.forEach((item,index) => {
					if(item.id == that.userinfo.sign){
						that.company_name = item.name
						that.defaultIndexgs=[index]
					}
				})
			},
			//国家
			area(){
				request({
					url:'area/getCountry',
					method:'get',
				}).then(res => {
					var list = res.data.data
					this.areaList1 = list
					this.filteredOptions = list;
					this.select1()
				})
			},
			//公司
			companyfn(){
				request({
					url:'feishu/getSign',
					method:'get',
				}).then(res => {
					var list = res.data.data
					this.company1 = list
					this.company = [list]
					this.select1()
				})
			},
			companyChange(val){
				this.userinfo.sign = val.value[0].id
				this.company_name = val.value[0].name
				this.showcomp = false
			},
			uploadfn(imgUrl){
				var that = this;
				uni.uploadFile({
					url: 'http://219.157.255.213:9007/upload/uploadImage', 
					filePath: imgUrl,
					name: 'files',
					header:{'Authorization': 'Bearer ' +  uni.getStorageSync('token')},
					success: (uploadFileRes) => {
						const path=JSON.parse(uploadFileRes.data)
						if(path.code==-1){
							uni.showToast({
								title: path.message,
								icon: 'none'
							});
						}else{
							that.userinfo.avatar = path.data.image_url
							that.userinfo.avatar_url = path.data.path
							console.log(that.form)
						}
					}
				});
			},
			cancel(val){
				this[val] = false
			},
			close(val){
				this[val] = false
			},
			delfn(){
				that.userinfo.avatar =''
			},
			select(e){
				const tempFilePaths = e.tempFilePaths;
				const imgUrl=tempFilePaths[0]
				this.uploadfn(imgUrl)
			},
			leftClick(){
				uni.navigateBack({})
			},
			bcFn(){
				console.log(this.userinfo)
				request({
					url:'user/save',
					method:'POST',
					data:{
						avatar:this.userinfo.avatar,
						avatar_url:this.userinfo.avatar_url,
						sex:this.userinfo.sex,
						name:this.userinfo.name,
						mobile:this.userinfo.mobile,
						position:this.userinfo.position,
						country_id:this.userinfo.country_id,
						sign:this.userinfo.sign,
					}
				}).then(res => {
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					});
					if(res.data.code ==0){
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/mine',// 替换为你要跳转的页面路径
							});
						}, 1000);
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.uni-file-picker {
	    margin-left: 33.3%;
	}
	.m-r-10{
		margin-right: 10px;
	}
	.uniui-right{
		position: absolute;
		top: 2px;
	}
	.u-divider{
		margin: 0px 0px !important;
	}
	.arrowright{
		margin-right: -15px;
	}
	.content{
		background: #FFFFFF;
		.topimg{
			text-align: center;
			position: relative;
			padding: 20px 0px;
			color: #999999;
		}
		.user{
			width: 200rpx;
			height: 200rpx;
		}
		.xj{
			width: 60rpx;
			height: 52rpx;
			position: absolute;
			right: 46%;
			top: 33%;
		}
	}
	.cell1{
		display: flex;
		justify-content:space-between;
		padding: 18px 20px;
		align-items: center;
		font-weight: 500;
		.item{
			width: 90px;
		}
	}
	.right{
		text-align: right;
	}
	.select{
		display: flex;
		position: relative;
		margin-right: 10px;
	}
	.foot{
		position: fixed;
		bottom: 0px;
		width: 100%;
		height: 160rpx;
		background: #FFFFFF;
	}
	.btn{
		background: linear-gradient(to right, #3471FF, #6776FF);
		color: white;
		border-radius: 50px;
		width: 84%;
		margin: 20px 8%;
	}
	.addimg{
		width: 35px;
		height: 35px;
		border-radius: 50%;
	}
	
	
	//
	.actives{
		background-color: #dfdfdf;
	}
	.text{
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 30px;
		padding: 10px 15px 0px;
		.qd{
			color: #3471FF;
		}
	}
	.popup-content {
	  padding: 20px;
	  background-color: #fff;
	}
	
	.option-list {
	  max-height: 400rpx;
	  margin-top: 20rpx;
	}
	
	.option-item {
	  padding: 20rpx;
	  border-bottom: 1rpx solid #eee;
	}
	
	.option-item:last-child {
	  border-bottom: none;
	}
	
	.no-data {
	  text-align: center;
	  padding: 20rpx;
	  color: #999;
	}
</style>