515 lines
10 KiB
Vue
515 lines
10 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="zhuige-info-form-box">
|
|
<!-- 顶部大图及头像 -->
|
|
<view class="zhuige-info-header">
|
|
<!-- 顶部大图 -->
|
|
<image mode="aspectFill" :src="userSpace.user_poster"></image>
|
|
<!-- 头像 -->
|
|
<image @click="upImgs" data-type="2" mode="aspectFill" :src="userSpace.user_avatar"></image>
|
|
<!-- 控制入口 -->
|
|
<view @click="upImgs" data-type="1" class="avatar-opt">
|
|
<view>
|
|
<uni-icons type="camera" size="18"></uni-icons>
|
|
</view>
|
|
<view>{{__('修改背景图')}}</view>
|
|
</view>
|
|
</view>
|
|
<!-- 认证表单 -->
|
|
<view class="zhuige-info-form">
|
|
|
|
<view class="zhuige-info-line">
|
|
<view>{{__('签名/介绍')}}</view>
|
|
<view>
|
|
<input type="text" v-model="userSpace.user_sign" :placeholder="__('一句话介绍一下自己吧')" />
|
|
</view>
|
|
</view>
|
|
<view class="zhuige-info-line" v-if="(false)">
|
|
<view>{{__('帖子是否可见')}}</view>
|
|
<view @click="clickAgreeLicense">
|
|
<switch :checked="post" color="#db384c" style="transform:scale(0.7)" />
|
|
</view>
|
|
</view>
|
|
<view class="zhuige-info-line" v-if="(false)">
|
|
<view>{{__('点赞是否可见')}}</view>
|
|
<view @click="clickAgreeLicense">
|
|
<switch :checked="like" color="#db384c" style="transform:scale(0.7)" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="zhuige-info-line" v-if="(false)">
|
|
<view>{{__('收藏是否可见')}}</view>
|
|
<view @click="clickAgreeLicense">
|
|
<switch :checked="collect" color="#db384c" style="transform:scale(0.7)" />
|
|
</view>
|
|
|
|
</view>
|
|
<view class="zhuige-info-line" v-if="(false)">
|
|
<view>{{__('评论是否可见')}}</view>
|
|
<view @click="clickAgreeLicense">
|
|
<switch :checked="comment" color="#db384c" style="transform:scale(0.7)" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
<!-- 底部大按钮 -->
|
|
<view @click="clickSubmit()" class="zhuige-base-button">
|
|
<view>{{__('提交')}}</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
mapMutations
|
|
} from 'vuex';
|
|
|
|
|
|
export default {
|
|
components: {
|
|
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
userSpace: {},
|
|
post: 0,
|
|
like: 0,
|
|
collect: 0,
|
|
comment: 0,
|
|
sign: '',
|
|
weixin: '',
|
|
reward: '',
|
|
certify: undefined,
|
|
vip: undefined,
|
|
}
|
|
},
|
|
computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
|
|
onLoad(options) {
|
|
var that = this;
|
|
that.forceUserInfo(function(user) {
|
|
that.GetUserSpace();
|
|
});
|
|
},
|
|
|
|
onUnload() {
|
|
|
|
},
|
|
|
|
onShareAppMessage() {},
|
|
|
|
methods: {
|
|
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
|
// ------ event --------
|
|
GetUserSpace: function() {
|
|
var that = this,
|
|
params = {
|
|
user_id: this.userInfo.user_id
|
|
};
|
|
|
|
that.$.request({
|
|
url: this.Config.URL.sns.user_space,
|
|
data: params,
|
|
success: function(data, status, msg, code) {
|
|
if (status == 200) {
|
|
|
|
that.setData({
|
|
userSpace: data
|
|
});
|
|
} else {
|
|
that.$.alert(msg)
|
|
}
|
|
|
|
}
|
|
});
|
|
},
|
|
// ------ event --------
|
|
|
|
upImgs: function(e) {
|
|
var that = this;
|
|
var type = e.currentTarget.dataset.type;
|
|
that.$.chooseImage({
|
|
count: 1,
|
|
sizeType: ['compressed'],
|
|
success: function(n) {
|
|
that.$.showLoading();
|
|
var r = n.tempFilePaths;
|
|
that.$.uploadFile({
|
|
url: that.Config.URL.upload,
|
|
method: 'POST',
|
|
filePath: r[0],
|
|
name: 'upfile',
|
|
// header: {
|
|
// "content-type": "multipart/form-data"
|
|
// },
|
|
success: function(n) {
|
|
that.$.hideLoading();
|
|
|
|
var up_res = that.$.parseJSON(n.data);
|
|
var s = up_res.data.url;
|
|
if (type == 1) {
|
|
that.userSpace.user_poster = s;
|
|
} else {
|
|
that.userSpace.user_avatar = s;
|
|
}
|
|
|
|
},
|
|
fail: function(e) {
|
|
that.$.hideLoading();
|
|
},
|
|
complete: function(e) {
|
|
that.$.hideLoading();
|
|
}
|
|
});
|
|
},
|
|
fail: function(e) {
|
|
that.$.hideLoading();
|
|
},
|
|
complete: function(e) {
|
|
that.$.hideLoading();
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 点击提交
|
|
*/
|
|
clickSubmit() {
|
|
var that = this;
|
|
let params = {
|
|
user_poster: this.userSpace.user_poster,
|
|
user_avatar: this.userSpace.user_avatar,
|
|
user_sign: this.userSpace.user_sign,
|
|
}
|
|
|
|
|
|
that.$.request({
|
|
url: this.Config.URL.sns.user_editSpace,
|
|
data: params,
|
|
success: function(data, status, msg, code) {
|
|
if (status == 200) {
|
|
|
|
that.$.alert(that.__('修改成功'))
|
|
} else {
|
|
that.$.alert(msg)
|
|
}
|
|
|
|
}
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
/**
|
|
* 点击设置封面
|
|
*/
|
|
clickCover() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['compressed'],
|
|
success: (res) => {
|
|
let path = res.tempFilePaths[0];
|
|
Rest.upload(Api.URL('other', 'upload'), path).then(oo => {
|
|
this.cover = oo.data.src;
|
|
}, err => {
|
|
Alert.error(err);
|
|
});
|
|
},
|
|
fail: (res) => {
|
|
if (res.errMsg && res.errMsg.indexOf('cancel') < 0) {
|
|
Alert.error(res.errMsg);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 点击设置头像
|
|
*/
|
|
clickAvatar() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['compressed'],
|
|
success: (res) => {
|
|
let path = res.tempFilePaths[0];
|
|
Rest.upload(Api.URL('other', 'upload'), path).then(oo => {
|
|
this.avatar = oo.data.src;
|
|
}, err => {
|
|
Alert.error(err);
|
|
});
|
|
},
|
|
fail: (res) => {
|
|
if (res.errMsg && res.errMsg.indexOf('cancel') < 0) {
|
|
Alert.error(res.errMsg);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 点击重新绑定手机号
|
|
*/
|
|
clickMobile() {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '要重新绑定手机号吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
Util.openLink('/pages/user/login/login?type=mobile')
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 点击设置微信
|
|
*/
|
|
clickWeiXin() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['compressed'],
|
|
success: (res) => {
|
|
let path = res.tempFilePaths[0];
|
|
Rest.upload(Api.URL('other', 'upload'), path).then(oo => {
|
|
this.weixin = oo.data.src;
|
|
}, err => {
|
|
Alert.error(err);
|
|
});
|
|
},
|
|
fail: (res) => {
|
|
if (res.errMsg && res.errMsg.indexOf('cancel') < 0) {
|
|
Alert.error(res.errMsg);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 点击设置赞赏码
|
|
*/
|
|
clickReward() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['compressed'],
|
|
success: (res) => {
|
|
let path = res.tempFilePaths[0];
|
|
Rest.upload(Api.URL('other', 'upload'), path).then(oo => {
|
|
this.reward = oo.data.src;
|
|
}, err => {
|
|
Alert.error(err);
|
|
});
|
|
},
|
|
fail: (res) => {
|
|
if (res.errMsg && res.errMsg.indexOf('cancel') < 0) {
|
|
Alert.error(res.errMsg);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 加载数据
|
|
*/
|
|
loadData() {
|
|
Rest.post(Api.URL('user', 'get_info')).then(res => {
|
|
this.cover = res.data.cover;
|
|
this.avatar = res.data.avatar;
|
|
this.nickname = res.data.nickname;
|
|
this.mobile = res.data.mobile;
|
|
this.sign = res.data.sign;
|
|
this.weixin = res.data.weixin;
|
|
this.reward = res.data.reward;
|
|
|
|
if (res.data.certify) {
|
|
this.certify = res.data.certify;
|
|
}
|
|
|
|
if (res.data.vip) {
|
|
this.vip = res.data.vip;
|
|
}
|
|
}, err => {
|
|
console.log(err)
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.content {
|
|
position: fixed;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.zhuige-info-form-box {
|
|
padding: 20rpx;
|
|
margin-bottom: 160rpx;
|
|
}
|
|
|
|
.zhuige-info-header {
|
|
height: 480rpx;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.zhuige-info-header image:nth-child(1) {
|
|
height: 100%;
|
|
width: 100%;
|
|
border-radius: 12rpx 12rpx 0 0;
|
|
}
|
|
|
|
.zhuige-info-header image:nth-child(2) {
|
|
position: absolute;
|
|
z-index: 3;
|
|
right: 30rpx;
|
|
bottom: -80rpx;
|
|
height: 160rpx;
|
|
width: 160rpx;
|
|
border-radius: 50%;
|
|
border: 1rpx solid #EEEEEE;
|
|
}
|
|
|
|
.zhuige-info-header .avatar-opt {
|
|
position: absolute;
|
|
z-index: 3;
|
|
left: 30rpx;
|
|
bottom: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.zhuige-info-header .avatar-opt view:nth-child(1) {
|
|
height: 60rpx;
|
|
width: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, .6);
|
|
}
|
|
|
|
.zhuige-info-header .avatar-opt view:nth-child(2) {
|
|
padding-left: 16rpx;
|
|
font-size: 26rpx;
|
|
font-weight: 300;
|
|
color: rgba(255, 255, 255, .6);
|
|
}
|
|
|
|
.zhuige-info-form {
|
|
padding: 0 30rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 0 0 12rpx 12rpx;
|
|
}
|
|
|
|
.zhuige-info-line {
|
|
padding: 30rpx 0;
|
|
border-top: 1rpx solid #EEEEEE;
|
|
}
|
|
|
|
.zhuige-info-line>view {
|
|
font-size: 28rpx;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.zhuige-info-line>view:nth-child(1) {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.zhuige-info-line>view:nth-child(2) input {
|
|
width: 100%;
|
|
font-size: 28rpx;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.form-title>view:nth-child(2),
|
|
.form-title>view:nth-child(3) {
|
|
display: flex;
|
|
align-items: center;
|
|
color: #999999;
|
|
}
|
|
|
|
.form-title>view:nth-child(2)>image {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.form-title>view:nth-child(3)>image {
|
|
width: 64rpx;
|
|
height: 32rpx;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.zhugie-info-image-upload {
|
|
height: 240rpx;
|
|
width: 240rpx;
|
|
text-align: center;
|
|
border-radius: 12rpx;
|
|
border: 1rpx solid #DDDDDD;
|
|
position: relative;
|
|
}
|
|
|
|
.zhugie-info-image-upload uni-icons.plus {
|
|
line-height: 240rpx;
|
|
}
|
|
|
|
.zhugie-info-image-upload uni-icons.clear {
|
|
position: absolute;
|
|
z-index: 3;
|
|
right: -20rpx;
|
|
top: -50rpx;
|
|
}
|
|
|
|
.zhugie-info-image-upload image {
|
|
height: 100%;
|
|
width: 100%;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.zhugie-vip-style {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.zhugie-vip-style image {
|
|
height: 12px;
|
|
width: 26px;
|
|
margin-rihgt: 12rpx;
|
|
}
|
|
|
|
.zhugie-vip-style text {
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.zhuige-base-button {
|
|
position: fixed;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: 40rpx 0;
|
|
z-index: 3;
|
|
}
|
|
|
|
.zhuige-base-button view {
|
|
width: 360rpx;
|
|
text-align: center;
|
|
height: 96rpx;
|
|
line-height: 96rpx;
|
|
border-radius: 96rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
background: #db384c;
|
|
}
|
|
</style> |