first commit
This commit is contained in:
PC-202306242200\Administrator
192
pages/me/setting.vue
Normal file
192
pages/me/setting.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<view class="xkl-com-bg">
|
||||
<view style="padding-top: 30rpx;">
|
||||
<view class="means-a">
|
||||
<view class="means-a-list" style="justify-content: center;padding-top: 30rpx;">
|
||||
<!-- <view class="tit">头像</view> -->
|
||||
<image :src="userInfo.avatar_url" v-if="userInfo.avatar_url" class="header" @click="infoHeader"></image>
|
||||
<image src="/static/mr.png" v-else class="header" @click="infoHeader"></image>
|
||||
</view>
|
||||
<view class="means-a-list" style="justify-content: center;">
|
||||
<!-- <view class="tit">昵称</view> -->
|
||||
<view class="nickname" @click="infoHeader">{{userInfo.nickname}}</view>
|
||||
<u-icon name="edit-pen" size="24" @click="infoHeader"></u-icon>
|
||||
</view>
|
||||
<!-- @click="toUser" -->
|
||||
<view class="means-a-list">
|
||||
<view class="tit">用户名</view>
|
||||
<view class="means-zhuomi">
|
||||
<view class="means-zhuomi-tit" v-if="userInfo.username">{{userInfo.username}}</view>
|
||||
<!-- <view class="means-zhuomi-tit" v-else>请输入</view> -->
|
||||
<!-- <image src="/static/icon/youdao.png"></image> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- @click="mobileUp" -->
|
||||
<view class="means-a-list">
|
||||
<view class="tit">手机号</view>
|
||||
<view class="means-zhuomi">
|
||||
<view class="means-zhuomi-tit" v-if="userInfo.mobile">{{userInfo.mobile}}</view>
|
||||
<!-- <image src="/static/icon/youdao.png"></image> -->
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="means-a-list">
|
||||
<view class="tit">退出登录</view>
|
||||
<image src="/static/icon/youdao.png" style="width: 11rpx;height: 21rpx;"></image>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 80rpx;"></view>
|
||||
<u-button text="退出登录" size="normal" type="error" @click="logout()"></u-button>
|
||||
<wx-user-info-modal v-model="showAuthorizationModal" :header="userInfo.avatar_url" :nickname="userInfo.nickname"
|
||||
@updated="updatedUserInfoEvent"></wx-user-info-modal>
|
||||
<uni-popup ref="inputDialog" type="dialog">
|
||||
<uni-popup-dialog ref="inputClose" :inputType="'text'" mode="input" title="请输入用户名" placeholder="请输入用户名"
|
||||
@confirm="dialogInputConfirm"></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WxUserInfoModal from '@/uni_modules/tuniaoui-wx-user-info/components/tuniaoui-wx-user-info/tuniaoui-wx-user-info.vue'
|
||||
export default {
|
||||
components: {
|
||||
WxUserInfoModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showAuthorizationModal: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
userInfo() {
|
||||
return this.$store.state.auth.user
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
console.log(this.userInfo);
|
||||
},
|
||||
methods: {
|
||||
toUser(){
|
||||
// $refs.inputDialog.open()
|
||||
uni.navigateTo({
|
||||
url:'/pages/me/userName?phone=' + this.userInfo.mobile
|
||||
})
|
||||
},
|
||||
mobileUp(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/me/mobile?phone=' + this.userInfo.mobile
|
||||
})
|
||||
},
|
||||
logout() {
|
||||
this.$http.get('/shop/v10/auth/logout').then(({
|
||||
data
|
||||
}) => {
|
||||
this.$store.commit('auth/resetUser');
|
||||
this.$store.commit('auth/resetToken');
|
||||
|
||||
uni.redirectTo({
|
||||
url: '/pages/me/login'
|
||||
});
|
||||
})
|
||||
},
|
||||
dialogInputConfirm(e) {
|
||||
console.log(e);
|
||||
},
|
||||
infoHeader() {
|
||||
console.log(123456);
|
||||
this.showAuthorizationModal = true
|
||||
},
|
||||
updatedUserInfoEvent(e) {
|
||||
this.$http.post('/shop/v10/user/update', {
|
||||
avatar_url: e.avatar,
|
||||
nickname: e.nickname
|
||||
}).then(({
|
||||
data,
|
||||
success,
|
||||
msg
|
||||
}) => {
|
||||
if (success) {
|
||||
this.$store.commit('auth/setUser', data);
|
||||
uni.showToast({
|
||||
title: msg,
|
||||
icon: 'none'
|
||||
})
|
||||
// this.sendshow();
|
||||
}
|
||||
})
|
||||
this.showAuthorizationModal = false
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
view {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.means-a {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
border-radius: 15rpx;
|
||||
padding: 25rpx;
|
||||
|
||||
.means-a-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
min-height: 100rpx;
|
||||
background-color: #FFFFFF;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
|
||||
|
||||
.tit {
|
||||
font-size: 30rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 30rpx;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.means-zhuomi {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.zuomi {
|
||||
width: 189rpx;
|
||||
height: 36rpx;
|
||||
border: 1rpx solid #4D4590;
|
||||
border-radius: 5rpx;
|
||||
text-align: center;
|
||||
line-height: 36rpx;
|
||||
color: #4D4590;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.means-zhuomi-tit {
|
||||
margin: 0 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 11rpx;
|
||||
height: 21rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user