[本时生活h5端]
This commit is contained in:
232
pages/setUpForm/form_submit.vue
Normal file
232
pages/setUpForm/form_submit.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="content">
|
||||
<!-- 表单 -->
|
||||
<form @submit="uploadFile">
|
||||
<view class="head_img" @click="upShopLogo" v-if="type == 'avatar'">
|
||||
<view class="upLoad">
|
||||
<image class="upLoadBack" :src="avatar" mode="aspectFill"></image>
|
||||
<image class="upLoadImg" :src="userimg" mode="aspectFill"></image>
|
||||
<view class="upLoadEdit">更换头像</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form" v-if="type == 'username'">
|
||||
<view class="form-input">
|
||||
<label class="form-input-label">昵称</label>
|
||||
<input placeholder="输入昵称" :value="nickname" name="nickname"></input>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-btn">
|
||||
<button form-type="submit" :disabled="disabledOk">保存</button>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { index, upload } from '@/apis/interfaces/user'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type : '', // 跳转来源 avatar为设置头像 username为修改昵称
|
||||
userData : '', // 用户信息
|
||||
avatar : '', // 用户头像
|
||||
userimg : '', // 用户新上传头像
|
||||
nickname : '设置昵称', // 用户昵称
|
||||
disabledOk : false // 提交按钮状态
|
||||
}
|
||||
},
|
||||
// 生命周期函数--监听页面加载
|
||||
onLoad(options) {
|
||||
this.type = options.type
|
||||
},
|
||||
|
||||
// 生命周期函数--监听页面显示
|
||||
onShow() {
|
||||
// 获取用户信息
|
||||
this.userInfo();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 用户信息
|
||||
userInfo() {
|
||||
index().then(res => {
|
||||
this.avatar = res.info.avatar
|
||||
this.nickname = res.info.nickname
|
||||
}).catch(err => {});
|
||||
},
|
||||
|
||||
// 选择相册方式
|
||||
upShopLogo(e) {
|
||||
uni.showActionSheet({
|
||||
itemList: ['从相册中选择', '拍照'],
|
||||
itemColor: "#f7982a",
|
||||
success: res=> {
|
||||
if (!res.cancel) {
|
||||
if (res.tapIndex == 0) {
|
||||
this.chooseWxImageShop('album');//从相册中选择
|
||||
}else if (res.tapIndex == 1) {
|
||||
this.chooseWxImageShop('camera');//手机拍照
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 从相册中选择
|
||||
chooseWxImageShop (type) {
|
||||
uni.chooseImage({
|
||||
sizeType : ['original', 'compressed'],
|
||||
sourceType : [type],
|
||||
success: res=> {
|
||||
var tempFilePaths = res.tempFilePaths
|
||||
uni.showLoading({
|
||||
title: '上传中'
|
||||
})
|
||||
uni.uploadFile({
|
||||
url : 'https://lifetest.ysd-bs.com/api/storage',
|
||||
filePath: tempFilePaths[0],
|
||||
name : 'file',
|
||||
success : res => {
|
||||
var userData = JSON.parse(res.data)
|
||||
this.userimg = userData.data.showpath
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 表单提交
|
||||
uploadFile(e) {
|
||||
let newName = e.detail.value.nickname,
|
||||
newType = '',
|
||||
newValue = ''
|
||||
|
||||
if (this.type == "avatar") {
|
||||
newType = 'avatar'
|
||||
newValue = this.userimg
|
||||
}
|
||||
|
||||
if (this.type == "username") {
|
||||
newType = 'nickname'
|
||||
newValue = newName
|
||||
}
|
||||
|
||||
upload({
|
||||
type: newType,
|
||||
value: newValue
|
||||
}).then(res=>{
|
||||
uni.showToast({
|
||||
title: res
|
||||
})
|
||||
setTimeout(()=>{
|
||||
uni.switchTab({
|
||||
url: '/pages/user/index'
|
||||
});
|
||||
},2000)
|
||||
|
||||
this.disabledOk = true
|
||||
}).catch(err => {});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.leftbtn-icon{
|
||||
width: 38rpx;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
|
||||
/* 表单 */
|
||||
.upLoad {
|
||||
position: relative;
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
z-index: 9;
|
||||
margin: 50rpx auto 0;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.upLoadBack {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.upLoadImg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.upLoadEdit {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
background: rgba(0, 0, 0, .3);
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
opacity: .9;
|
||||
}
|
||||
/* 提交按钮 */
|
||||
|
||||
.form-btn{
|
||||
padding: 30rpx 30rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-btn button{
|
||||
background: #000000;
|
||||
color: white;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 32rpx;
|
||||
padding: 0 !important;
|
||||
margin: 40rpx 0 0!important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* 表单 */
|
||||
|
||||
.form{
|
||||
background: white;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.form-input-label{
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
width: 100rpx;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding-left: 140rpx;
|
||||
padding-right: 30rpx;
|
||||
position: relative;
|
||||
height: 90rpx;
|
||||
}
|
||||
|
||||
.form-input input{
|
||||
width: 100%;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
</style>
|
||||
72
pages/setUpForm/index.vue
Normal file
72
pages/setUpForm/index.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<view>
|
||||
<navigator hover-class="none" url="/pages/setUpForm/form_submit?type=avatar" class="setupLabel">
|
||||
<view class="setupLabel-name">
|
||||
头像设置
|
||||
</view>
|
||||
<image src="/static/icon/rightsArrow.png"></image>
|
||||
</navigator>
|
||||
<navigator hover-class="none" url="/pages/setUpForm/form_submit?type=username" class="setupLabel">
|
||||
<view class="setupLabel-name">
|
||||
用户昵称
|
||||
</view>
|
||||
<image src="/static/icon/rightsArrow.png"></image>
|
||||
</navigator>
|
||||
<navigator hover-class="none" url="/pages/payPassword/index" class="setupLabel">
|
||||
<view class="setupLabel-name">
|
||||
支付密码
|
||||
</view>
|
||||
<image src="/static/icon/rightsArrow.png"></image>
|
||||
</navigator>
|
||||
<view class="setupLabel" @click="delStorage">
|
||||
<view class="setupLabel-name">
|
||||
退出登录
|
||||
</view>
|
||||
<image src="/static/icon/rightsArrow.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
// 生命周期函数--监听页面加载
|
||||
onLoad(options) {},
|
||||
|
||||
// 生命周期函数--监听页面显示
|
||||
onShow() {},
|
||||
|
||||
methods: {
|
||||
// 退出登录
|
||||
delStorage() {
|
||||
uni.clearStorage()
|
||||
uni.navigateTo({
|
||||
url:'/pages/auth/login'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.setupLabel {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 0 20rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
line-height: 100rpx;
|
||||
font-size: 28rpx;
|
||||
.setupLabel-name {
|
||||
flex: 1;
|
||||
}
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user