浅念
349 lines
9.0 KiB
Vue
349 lines
9.0 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.changinfo')"></uni-nav-bar>
|
|
<form @submit="bcFn">
|
|
<view class="content">
|
|
|
|
<view class="cell">
|
|
<view>{{$t('mine.avatar')}}</view>
|
|
<view class="right">
|
|
<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" >
|
|
<image :src="userinfo.avatar_pull==''?'/static/image/mine/user.png':userinfo.avatar_pull" mode="" class="addimg"></image>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
<view class="cell1">
|
|
<view>{{$t('mine.nickname')}}</view>
|
|
<view class="right select" @click="chackfn()">
|
|
<text v-if="ischack">{{ userinfo.nickname }}</text>
|
|
<input v-else :placeholder="$t('mine.nickinput')" type="nickname" name="nickname" />
|
|
<uni-icons type="right" size="18"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="cell1">
|
|
<view>门店名称</view>
|
|
<view class="right select">
|
|
<input placeholder="请填写门店名称" v-model="userinfo.shop_name" />
|
|
<uni-icons type="right" size="18"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="cell1">
|
|
<view>门店电话</view>
|
|
<view class="right select">
|
|
<input placeholder="请填写门店电话" v-model="userinfo.mobile" />
|
|
<uni-icons type="right" size="18"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="cell1">
|
|
<view>门店位置</view>
|
|
<view class="right select">
|
|
<input placeholder="请选择门店位置" v-model="userinfo.location_name" disabled="disabled" @focus="showMap = true" @click="showMap = true" />
|
|
<uni-icons type="right" size="18"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view v-show="showMap" style="height: 300px; margin: 0 20px 20px 20px;">
|
|
<map
|
|
style="width: 100%; height: 100%;"
|
|
:latitude="centerLat"
|
|
:longitude="centerLng"
|
|
:markers="markers"
|
|
scale="14"
|
|
@tap="onMapTap"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="foot">
|
|
<button class="btn" form-type="submit">{{$t('button.save')}}</button>
|
|
</view>
|
|
</form>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { request,showToast } from '@/api/apiT.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
centerLat: 39.9042,
|
|
centerLng: 116.4074,
|
|
markers: [],
|
|
ischack:true,
|
|
// 若需逆地理，请配置腾讯地图 key（可存储在此或通过 storage 注入）
|
|
qqMapKey: 'HQBBZ-SC76W-YUNRZ-34IAD-ARN6K-TZBZ4',
|
|
showMap: false,
|
|
imageStyles: {
|
|
width: 40,
|
|
height: 40,
|
|
border: {
|
|
radius: '50%'
|
|
}
|
|
},
|
|
userinfo:{
|
|
nickname:'',
|
|
avatar:'',
|
|
phone:'',
|
|
shop_name:'',
|
|
mobile:'',
|
|
location_name:'',
|
|
latitude: null,
|
|
longitude: null
|
|
},
|
|
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getinfo()
|
|
},
|
|
methods: {
|
|
chackfn(){
|
|
this.ischack = false
|
|
},
|
|
getFuzzy() {
|
|
return new Promise((resolve, reject) => {
|
|
wx.getSetting({
|
|
success: (st) => {
|
|
const ok = st.authSetting['scope.userFuzzyLocation'];
|
|
const run = () => wx.getFuzzyLocation({
|
|
type: 'wgs84',
|
|
success: resolve,
|
|
fail: reject
|
|
});
|
|
|
|
if (ok) return run();
|
|
|
|
wx.authorize({
|
|
scope: 'scope.userFuzzyLocation',
|
|
success: run,
|
|
fail: () => wx.openSetting({ success: () => reject(new Error('未授权')) })
|
|
});
|
|
},
|
|
fail: reject
|
|
});
|
|
});
|
|
},
|
|
// 地图点选：更新“选点位置”marker
|
|
onMapTap(e) {
|
|
const { latitude, longitude } = e.detail || {};
|
|
if (typeof latitude !== 'number' || typeof longitude !== 'number') return;
|
|
|
|
// 用 id 2 表示“选点”
|
|
const picked = {
|
|
id: 2,
|
|
latitude,
|
|
longitude,
|
|
title: '选点位置'
|
|
};
|
|
|
|
// 只保留当前选点作为唯一标记
|
|
this.markers = [picked];
|
|
|
|
// 也可以把地图中心移动到选点
|
|
this.centerLat = latitude;
|
|
this.centerLng = longitude;
|
|
this.userinfo.latitude = latitude
|
|
this.userinfo.longitude = longitude
|
|
this.reverseGeocode(latitude, longitude)
|
|
},
|
|
getinfo(){
|
|
request({
|
|
url:'common/user/info',
|
|
method:'POST',
|
|
}).then(res => {
|
|
this.userinfo = res.data.data.user || {}
|
|
|
|
const lat = parseFloat(this.userinfo.latitude)
|
|
const lng = parseFloat(this.userinfo.longitude)
|
|
|
|
if (!isNaN(lat) && !isNaN(lng)) {
|
|
this.centerLat = lat
|
|
this.centerLng = lng
|
|
this.markers = [{
|
|
id: 1,
|
|
latitude: lat,
|
|
longitude: lng,
|
|
title: this.userinfo.location_name || '店铺位置'
|
|
}]
|
|
} else {
|
|
this.initFuzzyLocation()
|
|
}
|
|
}).catch(() => {
|
|
this.initFuzzyLocation()
|
|
})
|
|
},
|
|
// 优先使用接口位置，没有时回退到模糊定位
|
|
initFuzzyLocation() {
|
|
try {
|
|
this.getFuzzy().then(res => {
|
|
this.centerLat = res.latitude;
|
|
this.centerLng = res.longitude;
|
|
console.log(res)
|
|
// 默认给一个“当前位置（模糊）”标记
|
|
this.markers = [{
|
|
id: 1,
|
|
latitude: res.latitude,
|
|
longitude: res.longitude,
|
|
title: '当前位置（模糊）'
|
|
}];
|
|
}).catch(err => console.error(err));
|
|
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
},
|
|
// 逆地理：将经纬度转为位置文本，失败则回退为经纬度字符串
|
|
reverseGeocode(lat, lng) {
|
|
const key = this.qqMapKey || uni.getStorageSync('qqMapKey') || ''
|
|
if (!key) {
|
|
this.userinfo.location_name = `${lat.toFixed(6)}, ${lng.toFixed(6)}`
|
|
return
|
|
}
|
|
uni.request({
|
|
url: 'https://apis.map.qq.com/ws/geocoder/v1/',
|
|
method: 'GET',
|
|
data: {
|
|
location: `${lat},${lng}`,
|
|
key
|
|
},
|
|
success: (res) => {
|
|
if (res.data && res.data.status === 0) {
|
|
const result = res.data.result || {}
|
|
const formatted = (result.formatted_addresses && result.formatted_addresses.recommend) || result.address
|
|
this.userinfo.location_name = formatted || `${lat.toFixed(6)}, ${lng.toFixed(6)}`
|
|
} else {
|
|
this.userinfo.location_name = `${lat.toFixed(6)}, ${lng.toFixed(6)}`
|
|
}
|
|
},
|
|
fail: () => {
|
|
this.userinfo.location_name = `${lat.toFixed(6)}, ${lng.toFixed(6)}`
|
|
}
|
|
})
|
|
},
|
|
uploadfn(imgUrl){
|
|
var that = this;
|
|
uni.uploadFile({
|
|
url: 'https://bsh.info.yw.hnzhwlkj.cn/upload/image?scene=userinfo',
|
|
filePath: imgUrl,
|
|
name: 'image',
|
|
header:{'content-type': 'application/x-www-form-urlencoded','Fdesk-Auth-Token': 'Bearer ' + uni.getStorageSync('token'),'Fdesk-Language': uni.getStorageSync('i18locale')?uni.getStorageSync('i18locale'):'zh','Fdesk-Login-Type': 'wechat','Fdesk-System-Code':'wechat'},
|
|
success: (uploadFileRes) => {
|
|
const path=JSON.parse(uploadFileRes.data)
|
|
that.userinfo.avatar = path.data.href
|
|
}
|
|
});
|
|
},
|
|
onChooseAvatar(e) {
|
|
// 微信返回的是临时文件地址
|
|
this.userinfo.avatar = e.detail.avatarUrl
|
|
this.userinfo.avatar_pull = e.detail.avatarUrl
|
|
this.uploadfn(e.detail.avatarUrl)
|
|
},
|
|
delfn(){
|
|
this.userinfo.avatar =''
|
|
},
|
|
select(e){
|
|
const tempFilePaths = e.tempFilePaths;
|
|
const imgUrl=tempFilePaths[0]
|
|
this.uploadfn(imgUrl)
|
|
},
|
|
leftClick(){
|
|
uni.navigateBack({})
|
|
},
|
|
bcFn(e) {
|
|
const nickname = e.detail.value.nickname
|
|
|
|
if (nickname) {
|
|
this.userinfo.nickname = nickname
|
|
}
|
|
// 同步到 userinfo，方便后续使用
|
|
request({
|
|
url: 'common/user/update',
|
|
method: 'POST',
|
|
data: {
|
|
nickname:this.userinfo.nickname,
|
|
avatar: this.userinfo.avatar,
|
|
mobile: this.userinfo.mobile,
|
|
shop_name: this.userinfo.shop_name,
|
|
location_name: this.userinfo.location_name,
|
|
latitude: this.userinfo.latitude,
|
|
longitude: this.userinfo.longitude
|
|
}
|
|
}).then(res => {
|
|
uni.showToast({
|
|
title: res.data.message,
|
|
icon: 'none'
|
|
})
|
|
|
|
if (res.data.code == 200) {
|
|
setTimeout(() => {
|
|
uni.reLaunch({
|
|
url: '/pages/index/mine'
|
|
})
|
|
}, 1000)
|
|
}
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.avatar-btn{
|
|
background: #fff;
|
|
}
|
|
.avatar-btn::after{
|
|
border: 1px solid #fff !important;
|
|
}
|
|
.uniui-right{
|
|
position: absolute;
|
|
top: 2px;
|
|
}
|
|
.content{
|
|
margin: 20px 12px;
|
|
background: #FFFFFF;
|
|
border-radius: 10px;
|
|
}
|
|
.cell{
|
|
display: flex;
|
|
justify-content:space-between;
|
|
padding: 10px 20px;
|
|
/* border-bottom: 1px solid #C3C3C3; */
|
|
align-items: center;
|
|
font-weight: 500;
|
|
}
|
|
.cell1{
|
|
display: flex;
|
|
justify-content:space-between;
|
|
padding: 18px 20px;
|
|
align-items: center;
|
|
font-weight: 500;
|
|
}
|
|
.right{
|
|
text-align: right;
|
|
}
|
|
.select{
|
|
display: flex;
|
|
position: relative;
|
|
margin-right: 10px;
|
|
}
|
|
.foot{
|
|
position: fixed;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
height: 240rpx;
|
|
background: #FFFFFF;
|
|
}
|
|
.btn{
|
|
background: linear-gradient(180deg, #206ff4 0%, #42e0a2 100%);
|
|
color: white;
|
|
border-radius: 50px;
|
|
width: 84%;
|
|
margin-bottom: 40px;
|
|
margin: 20px 8%;
|
|
}
|
|
.addimg{
|
|
width: 35px;
|
|
height: 35px;
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|