wangmingchuan
/
yanzong_qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

设置页面样式优化

Browse Source
version/0412
mujinxia 9 months ago
parent 148117721c
commit 69bc9c6bd2
2 changed files with 204 additions and 192 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      pages/news/consult/storeEdit.vue
  2. 394
      pages/news1/setting.vue

2
pages/news/consult/storeEdit.vue
Unescape View File

@ -177,7 +177,7 @@ export default {
.btn {
width: 630rpx;
line-height: 96rpx;
line-height: 88rpx;
background: #F34A40;
border-radius: 72rpx;
text-align: center;

394
pages/news1/setting.vue
Unescape View File

@ -1,11 +1,11 @@
<template>
<view class="setting">
<view class="box">
<view class="box-avter">
<view class="box-avter" style="padding-bottom: 24rpx;">
<view class="name-text">
头像
</view>
<image @click="chooseImage()" :src="info.avatar_url?info.avatar_url:'/static/default-logo.png'"
<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">
@ -18,11 +18,11 @@
<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}}
<image class="more" src="/static/news/icon-arrow.png" mode=""></image>
<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>
@ -30,7 +30,12 @@
<view class="name-text">
手机号
</view>
<text>{{info.mobile}}</text>
<input type="number" v-model="info.mobile" placeholder="请输入手机号">
<!-- <view>
<text>{{ info.mobile }}</text>
<u-icon style="margin-left: 5rpx; color: #8A8A8A" name="arrow-right"></u-icon>
</view> -->
</view>
</view>
<view class="box">
@ -38,230 +43,237 @@
<view class="name-text">
发票助手
</view>
<image class="more" src="/static/news/icon-arrow.png" mode=""></image>
<u-icon style="margin-left: 5rpx; color: #8A8A8A" name="arrow-right"></u-icon>
</view>
<view class="box-avter conten-height">
<view class="name-text">
清除缓存
</view>
<image class="more" src="/static/news/icon-arrow.png" mode=""></image>
<u-icon style="margin-left: 5rpx; color: #8A8A8A" name="arrow-right"></u-icon>
</view>
<view class="box-avter conten-height">
<view class="name-text">
隐私
</view>
<image class="more" src="/static/news/icon-arrow.png" mode=""></image>
<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="box-avter conten-height">
<view class="name-text">
关于
</view>
<image class="more" src="/static/news/icon-arrow.png" mode=""></image>
<u-icon style="margin-left: 5rpx; color: #8A8A8A" name="arrow-right"></u-icon>
</view>
</view>
<view class="box" style="padding: 0 40rpx;" @click="onOut">
<view class="box" style="padding: 0 40rpx;margin-bottom: 140rpx;" @click="onOut">
<view class="box-avter conten-height" style="border: none;">
<view class="name-text">
注销账号
</view>
</view>
</view>
<button class="submitBtn" @click="sureSubmit">确认修改</button>
<view class="bottomBtn">
<button class="submitBtn" @click="sureSubmit">确认修改</button>
</view>
</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: ''
};
},
onShow() {},
onLoad(params) {
console.log(uni.getStorageSync("userInfo"))
this.info = uni.getStorageSync("userInfo")
this.genderIndex = this.info.gender == '男' ? 0 : 1
},
methods: {
sureSubmit() {
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)
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: ''
};
},
onShow() { },
onLoad(params) {
console.log(uni.getStorageSync("userInfo"))
this.info = uni.getStorageSync("userInfo")
this.genderIndex = this.info.gender == '男' ? 0 : 1
},
methods: {
sureSubmit() {
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 {
resolve()
uni.showToast({
title: '修改失败',
icon: 'none',
duration: 2000
})
}
})
},
onOut() {
uni.showModal({
title: '友情提示',
content: '确认要注销吗？',
success(o) {
if (o.confirm) {
uni.removeStorage('token');
uni.removeStorage('userInfo');
uni.reLaunch({
url: '/pages/login/index'
})
}
.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()
}
})
},
onOut() {
uni.showModal({
title: '友情提示',
content: '确认要注销吗？',
success(o) {
if (o.confirm) {
uni.removeStorage('token');
uni.removeStorage('userInfo');
uni.reLaunch({
url: '/pages/login/index'
})
}
});
},
bindPickerInvoice() {
uni.navigateTo({
url: "/pages/invoice/index"
})
},
bindPickerChange(e) {
this.genderIndex = e.detail.value
},
}
}
});
},
bindPickerInvoice() {
uni.navigateTo({
url: "/pages/invoice/index"
})
},
bindPickerChange(e) {
this.genderIndex = e.detail.value
},
}
}
</script>
<style>
page {
width: 100%;
}
page {
width: 100%;
}
.setting {
height: 100%;
margin-top: 20rpx;
padding-bottom: 50rpx;
}
.setting {
height: 100%;
margin-top: 20rpx;
padding-bottom: 50rpx;
}
.box {
background: #FFF;
padding: 24rpx 40rpx;
margin-top: 20rpx;
}
.box {
background: #FFF;
padding: 24rpx 36rpx;
margin-top: 20rpx;
}
.more {
width: 28rpx;
height: 28rpx;
}
.more {
width: 28rpx;
height: 28rpx;
}
.box-avter {
height: 120rpx;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #f2f2f2;
}
.conten-height {
height: 100rpx;
}
.box-avter {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1rpx solid #f2f2f2;
}
.conten-height text {
font-size: 35rpx;
color: #333;
}
.conten-height {
height: 100rpx;
}
.box-avter input {
height: 100%;
color: #333;
width: 400rpx;
text-align: right;
font-size: 28rpx;
}
.conten-height text {
font-size: 35rpx;
color: #333;
}
.name-text {
font-size: 28rpx;
color: #999;
}
.box-avter input {
height: 100%;
color: #333;
width: 400rpx;
text-align: right;
font-size: 28rpx;
}
.image_logo {
width: 90rpx;
height: 90rpx;
border-radius: 50%;
}
.name-text {
font-size: 28rpx;
color: #303030;
}
.submitBtn {
height: 88upx;
margin: 64upx 0;
margin-bottom: 0;
line-height: 88upx;
background: #FFAAA4;
background: #FE483B;
border-radius: 36px 36px 36px 36px;
opacity: 1;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
margin: 50rpx 30rpx;
}
.image_logo {
width: 114rpx;
height: 114rpx;
border-radius: 50%;
}
.bottomBtn{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
height: 140upx;
z-index: 88;
background: #fff;
}
.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>

Write Preview
Loading…
Cancel
Save