Files
crm-uni/pages/mine/changinfo.vue
T
浅念 9f6de3a117 Squashed commit of the following:
commit aa54e053ee
Author: 浅念 <email@sample.com>
Date:   Thu Apr 3 13:17:00 2025 +0800

    下拉组件加俄语包

commit 97a896dbe8
Author: 浅念 <email@sample.com>
Date:   Thu Apr 3 13:13:51 2025 +0800

    修改语言

commit 07e477972e
Author: 浅念 <email@sample.com>
Date:   Thu Apr 3 11:21:13 2025 +0800

    我的名片 下载调整

commit fde5830450
Author: 浅念 <email@sample.com>
Date:   Wed Apr 2 15:51:39 2025 +0800

    名片页面

commit b60cbff6d5
Author: 浅念 <email@sample.com>
Date:   Tue Apr 1 17:19:32 2025 +0800

    调整样式

commit 7fd2e63c9d
Author: 浅念 <email@sample.com>
Date:   Tue Apr 1 17:18:22 2025 +0800

    添加标签检索,添加公海页面
2025-04-03 13:23:48 +08:00

439 lines
11 KiB
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_url"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>
<u-divider text=""></u-divider>
<view class="cell1">
<view class="item">{{$t('mine.QRcode')}}</view>
<view class="right">
<u-radio-group v-model="userinfo.socialize">
<u-radio :name="$t('mine.WeChat')" class="m-r-10">{{$t('mine.WeChat')}}</u-radio>
<u-radio name="WhatsApp">WhatsApp</u-radio>
</u-radio-group>
</view>
</view>
<view class="cell">
<view class="item">上传二维码</view>
<view class="right">
<uni-file-picker style="margin: 10px 0px;" fileMediatype="image" limit="1" :list-styles="imageStyles" :del-icon="false" disable-preview @select="selectewm" >
<image class="user" :src="userinfo.socialize_pic_url==null?'/static/image/mine/erwm.png':userinfo.socialize_pic_url " mode=""></image>
</uni-file-picker>
</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,name,name1){
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[name1] = path.data.image_url
that.userinfo[name] = 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,'avatar','avatar_url')
},
selectewm(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'socialize_pic','socialize_pic_url')
},
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,
socialize:this.userinfo.socialize,
socialize_pic:this.userinfo.socialize_pic,
socialize_pic_url:this.userinfo.socialize_pic_url,
}
}).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;
padding-bottom: 100px;
.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;
}
}
.cell{
padding: 18px 20px;
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>