You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
pifa/pages/news1/setting.vue

370 lines
8.0 KiB

<template>
<view class="setting">
<form @submit="sureSubmit">
<view class="box">
<view class="box-avter" style="padding-bottom: 24rpx;">
<view class="name-text">
头像
</view>
<view class="avatar">
<image :src="info.avatar_url ? info.avatar_url : '/static/default-logo.png'"
class="image_logo"></image>
<button open-type="chooseAvatar" @chooseavatar="chooseavatar"></button>
</view>
<!-- <image @click="chooseImage()" :src="info.avatar_url ? info.avatar_url : '/static/default-logo.png'"
class="image_logo"></image> -->
</view>
<view class="box-avter conten-height">
<view class="name-text">
昵称
</view>
<input type="nickname" :value="info.nick_name" name='nick_name' placeholder="请输入用户昵称">
</view>
<view class="box-avter conten-height">
<view class="name-text">
性别
</view>
<picker style="width: 400rpx;text-align: right;" :value="genderIndex" :range="gender" :range-key="'name'"
@change="bindPickerChange">
<view class="lx" :style="genderIndex == -1 ? 'color:#999' : 'color:#333'">
{{ genderIndex == -1 ? '请选择' : gender[genderIndex].name }}
<u-icon style="margin-left: 5rpx; color: #8A8A8A" name="arrow-right"></u-icon>
</view>
</picker>
</view>
<view class="box-avter conten-height" style="border: none;">
<view class="name-text">
手机号
</view>
<text>{{ info.mobile }}</text>
</view>
</view>
<view class="box">
<view class="box-avter conten-height" @click="bindPickerInvoice">
<view class="name-text">
发票助手
</view>
<u-icon style="margin-left: 5rpx; color: #8A8A8A" name="arrow-right"></u-icon>
</view>
<view class="box-avter conten-height" @click="toTextPage(1)">
<view class="name-text">
用户服务协议
</view>
<u-icon style="margin-left: 5rpx; color: #8A8A8A" name="arrow-right"></u-icon>
</view>
<view class="box-avter conten-height" @click="toTextPage(2)">
<view class="name-text">
隐私政策
</view>
<u-icon style="margin-left: 5rpx; color: #8A8A8A" name="arrow-right"></u-icon>
</view>
<view class="box-avter conten-height" @click="toTextPage(3)">
<view class="name-text">
关于我们
</view>
<u-icon style="margin-left: 5rpx; color: #8A8A8A" name="arrow-right"></u-icon>
</view>
<view class="box-avter conten-height" style="border: none;">
<view class="name-text">
当前版本
</view>
<text>{{ accountInfo.miniProgram ? accountInfo.miniProgram.version : '' }}</text>
</view>
</view>
<view class="box" style="padding: 0 40rpx;" @click="onOut">
<view class="box-avter conten-height" style="border: none;">
<view class="name-text">
注销账号
</view>
</view>
</view>
<view class="box" style="padding: 0 40rpx;margin-bottom: 140rpx;" @click="onOut1">
<view class="box-avter conten-height" style="border: none;">
<view class="name-text">
退出登录
</view>
</view>
</view>
<view class="bottomBtn">
<!-- @click="sureSubmit" -->
<button class="submitBtn" formType="submit">确认修改</button>
</view>
</form><addShuiyin />
</view>
</template>
<script>
import * as UploadApi from '@/api/upload'
import * as userApi from '@/api/user'
export default {
data() {
return {
genderIndex: -1,
gender: [{
name: '男',
id: 0
}, {
name: '女',
id: 1
},],
info: '',
imageList: [],
avatar_id: [],
nick_name: '',
accountInfo: {},
};
},
onShow() { },
onLoad(params) {
console.log(uni.getStorageSync("userInfo"))
this.info = uni.getStorageSync("userInfo")
this.genderIndex = this.info.gender == '男' ? 0 : 1
this.accountInfo = uni.getAccountInfoSync();
},
methods: {
formSubmit(e) {
console.log(e)
},
chooseavatar(e){
console.log(e)
let tempFiles = e.detail.avatarUrl;
this.info.avatar_url = tempFiles
this.imageList = this.imageList.concat([
{
path: tempFiles
}
])
this.uploadFile()
},
sureSubmit(e) {
console.log(e)
this.info.nick_name = e.detail.value.nick_name
let params = {
nick_name: this.info.nick_name,
avatar_id: this.avatar_id[0],
gender: this.genderIndex == 0 ? 1 : 2
}
userApi.editUser(params)
.then(res => {
if (res.status == 200) {
uni.showToast({
title: '修改成功',
icon: 'none',
duration: 2000
})
uni.setStorageSync('userInfo', this.info)
} else {
uni.showToast({
title: '修改失败',
icon: 'none',
duration: 2000
})
}
})
.finally()
},
// 选择图片
chooseImage() {
const app = this
app.imageList = []
const oldImageList = app.imageList
// 选择图片
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success({
tempFiles
}) {
app.info.avatar_url = tempFiles[0].path
app.imageList = oldImageList.concat(tempFiles)
app.uploadFile()
}
});
},
// 上传图片
uploadFile() {
const app = this
const {
imageList
} = app
// 批量上传
return new Promise((resolve, reject) => {
if (imageList.length > 0) {
UploadApi.image(imageList)
.then(fileIds => {
app.avatar_id = fileIds;
resolve(fileIds)
})
.catch(reject)
} else {
resolve()
}
})
},
onOut1() {
uni.showModal({
title: '您是否要退出登录?',
content: '',
success(o) {
if (o.confirm) {
uni.showToast({
title: '退出成功',
icon: 'none',
duration: 2000
})
uni.clearStorageSync()
setTimeout(function () {
uni.navigateBack({
delta: 1
})
}, 2000);
}
}
});
},
onOut() {
uni.showModal({
title: '您是否要注销账号?',
content: '',
success(o) {
if (o.confirm) {
userApi.delUser({})
.then(res => {
if (res.status == 200) {
uni.showToast({
title: '注销成功',
icon: 'none',
duration: 2000
})
uni.removeStorage('token');
uni.removeStorage('userInfo');
uni.clearStorageSync()
uni.clearStorage()
setTimeout(function () {
uni.reLaunch({
url: '/pages/login/index'
})
}, 2000);
}
})
.finally()
}
}
});
},
toTextPage(n) {
uni.navigateTo({
url: "/pages/news1/text?pageFlag=" + n
})
},
bindPickerInvoice() {
uni.navigateTo({
url: "/pages/invoice/indexset"
})
},
bindPickerChange(e) {
this.genderIndex = e.detail.value
},
}
}
</script>
<style>
page {
width: 100%;
}
.setting {
height: 100%;
margin-top: 20rpx;
padding-bottom: 50rpx;
}
.box {
background: #FFF;
padding: 24rpx 36rpx;
margin-top: 20rpx;
}
.more {
width: 28rpx;
height: 28rpx;
}
.box-avter {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #f2f2f2;
}
.conten-height {
height: 100rpx;
}
.conten-height text {
font-size: 35rpx;
color: #333;
}
.box-avter input {
height: 100%;
color: #333;
width: 400rpx;
text-align: right;
font-size: 28rpx;
}
.name-text {
font-size: 28rpx;
color: #303030;
}
.avatar{
width: 114rpx;
height: 114rpx;
position: relative;
}
.avatar button{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
opacity: 0;
}
.image_logo {
width: 114rpx;
height: 114rpx;
border-radius: 50%;
}
.bottomBtn {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
height: 140upx;
z-index: 88;
background: #fafafa;
}
.submitBtn {
height: 88upx;
line-height: 88upx;
background: #FFAAA4;
background: #FE483B;
border-radius: 36px;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
margin: 30rpx 58rpx;
}
</style>