|
|
@@ -1,213 +1,371 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
- <view class="row1">
|
|
|
- <text class="tit">头像</text>
|
|
|
- <view class="background-img" @click.stop="imgsub"><image class="background-img" v-model="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill"></image></view>
|
|
|
+ <view class="tit">
|
|
|
+ 上传微信收款码
|
|
|
</view>
|
|
|
- <view class="row">
|
|
|
- <text class="tit">昵称</text>
|
|
|
- <input class="input" type="text" v-model="userInfo.nickname" placeholder-class="placeholder" />
|
|
|
+ <view class="up-wrap" @click="imgsub('upimg')">
|
|
|
+ <image :src="upimg" mode="" v-if="upimg"></image>
|
|
|
+ <image v-else src="../../static/img/add.png" mode=""></image>
|
|
|
</view>
|
|
|
- <view class="row">
|
|
|
- <text class="tit">ID</text>
|
|
|
- <input class="input" type="text" disabled="true" v-model="userInfo.uid" placeholder-class="placeholder" />
|
|
|
+ <view class="tit">
|
|
|
+ 基本信息
|
|
|
</view>
|
|
|
- <view class="row">
|
|
|
- <text class="tit">账户</text>
|
|
|
- <input class="input" type="text" disabled="true" v-model="userInfo.phone" placeholder-class="placeholder" />
|
|
|
- </view>
|
|
|
- <view class="add-btn" @click="confirm">提交</view>
|
|
|
- <!-- <view class="out" @click="cancel">注销账户</view> -->
|
|
|
- <uni-popup ref="popup" type="center">
|
|
|
- <view class="psw-wrapper">
|
|
|
- <view class="psw-title">请输入自己的账户</view>
|
|
|
- <input type="text" v-model="password" class="psw-ipt" />
|
|
|
- <view class="psw-btn">
|
|
|
- <text @click.stop="qx">取消</text>
|
|
|
- <text class="psw-qd" @click.stop="pswQd">确定</text>
|
|
|
+ <view class="base-info">
|
|
|
+ <view class="base-item" style="padding-bottom: 20rpx;">
|
|
|
+ <view class="item-name">头像</view>
|
|
|
+ <view class="avatar" @click="imgsub('avatar')">
|
|
|
+ <image :src="avatar || '../../static/error/missing-face.png'" mode="" ></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </uni-popup>
|
|
|
+ <view class="base-item flex">
|
|
|
+ <view class="item-name">昵称</view>
|
|
|
+ <input type="text" value="" class="item-val" placeholder="输入您的昵称" v-model="nickname" />
|
|
|
+ </view>
|
|
|
+ <view class="base-item flex">
|
|
|
+ <view class="item-name">ID</view>
|
|
|
+ <input type="text" value="" class="item-val" placeholder="输入您的昵称" v-model="uid" disabled/>
|
|
|
+ </view>
|
|
|
+ <view class="base-item flex">
|
|
|
+ <view class="item-name">手机号</view>
|
|
|
+ <input type="text" value="" class="item-val" placeholder="输入您的手机号" v-model="phone" />
|
|
|
+ </view>
|
|
|
+ <view class="base-item flex">
|
|
|
+ <view class="item-name">姓名</view>
|
|
|
+ <input type="text" value="" class="item-val" placeholder="输入您的姓名" v-model="real_name" />
|
|
|
+ </view>
|
|
|
+ <view class="base-item flex">
|
|
|
+ <view class="item-name">微信号</view>
|
|
|
+ <input type="text" value="" class="item-val" placeholder="输入您的微信号" v-model="wx_no" />
|
|
|
+ </view>
|
|
|
+ <view class="base-item flex">
|
|
|
+ <view class="item-name">支付宝姓名</view>
|
|
|
+ <input type="text" value="" class="item-val" placeholder="输入您的支付宝姓名" v-model="alipay_name" />
|
|
|
+ </view>
|
|
|
+ <view class="base-item flex">
|
|
|
+ <view class="item-name">支付宝账号</view>
|
|
|
+ <input type="text" value="" class="item-val" placeholder="输入您的支付宝账号" v-model="alipay_no" />
|
|
|
+ </view>
|
|
|
+ <view class="base-item flex">
|
|
|
+ <view class="item-name">开户行</view>
|
|
|
+ <input type="text" value="" class="item-val" placeholder="输入您的开户行" v-model="account_Bank" />
|
|
|
+ </view>
|
|
|
+ <view class="base-item flex">
|
|
|
+ <view class="item-name">所属支行</view>
|
|
|
+ <input type="text" value="" class="item-val" placeholder="输入所属支行" v-model="bank_branch" />
|
|
|
+ </view>
|
|
|
+ <view class="base-item flex">
|
|
|
+ <view class="item-name">开户行姓名</view>
|
|
|
+ <input type="text" value="" class="item-val" placeholder="输入您的开户行姓名" v-model="bank_name" />
|
|
|
+ </view>
|
|
|
+ <view class="base-item flex">
|
|
|
+ <view class="item-name">银行卡账号</view>
|
|
|
+ <input type="text" value="" class="item-val" placeholder="输入您的银行卡账号" v-model="bank_card" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="btn" @click="subInfo">提交保存</view>
|
|
|
+ <view class="btn1" @click="toLogout">退出登录</view>
|
|
|
+ <view class="jg" style="height: 70rpx;">
|
|
|
+
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapState,mapMutations } from 'vuex';
|
|
|
-import { upload } from '@/api/order.js';
|
|
|
-import {userEdit,logout} from '@/api/set.js';
|
|
|
-export default {
|
|
|
- data(){
|
|
|
- return{
|
|
|
- show:false,
|
|
|
- password: '',
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- console.log(this.userInfo)
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState('user',['userInfo'])
|
|
|
- },
|
|
|
- methods: {
|
|
|
- ...mapMutations('user',['logout']),
|
|
|
- imgsub() {
|
|
|
- console.log('上传头像')
|
|
|
- upload({
|
|
|
- filename: ''
|
|
|
- }).then(data => {
|
|
|
- console.log("data",data);
|
|
|
- this.userInfo.avatar = data[0].url;
|
|
|
- })
|
|
|
+ import { mapState, mapMutations } from 'vuex';
|
|
|
+ import { getUserInfo } from '@/api/user.js';
|
|
|
+ import { edit } from '@/api/user.js';
|
|
|
+ import { upload } from '@/api/order.js';
|
|
|
+ import { logout } from '@/api/set.js';
|
|
|
+ export default {
|
|
|
+ computed: {
|
|
|
+ ...mapState('user',['userInfo'])
|
|
|
},
|
|
|
- confirm() {
|
|
|
- userEdit({ avatar: this.userInfo.avatar ,nickname: this.userInfo.nickname})
|
|
|
- .then(e => {
|
|
|
- this.$api.msg('修改成功');
|
|
|
- setTimeout(()=> {
|
|
|
- uni.switchTab({
|
|
|
- url:'/pages/user/user'
|
|
|
- });
|
|
|
- }, 1000);
|
|
|
- console.log(e);
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- console.log(e);
|
|
|
- });
|
|
|
- },
|
|
|
- toLogout(){
|
|
|
- let obj = this;
|
|
|
- uni.showModal({
|
|
|
- content: '确定要退出登录么',
|
|
|
- success: (e)=>{
|
|
|
- if(e.confirm){
|
|
|
- logout({}).then((e) => {
|
|
|
- uni.navigateBack();
|
|
|
- }).catch((e) => {
|
|
|
- console.log(e);
|
|
|
- })
|
|
|
- obj.logout();
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- cancel(){
|
|
|
- this.$refs.popup.open();
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ avatar: '',
|
|
|
+ upimg: '',
|
|
|
+ real_name: '',
|
|
|
+ nickname: '',
|
|
|
+ phone: '',
|
|
|
+ wx_no: '',
|
|
|
+ alipay_name: '',
|
|
|
+ alipay_no: '',
|
|
|
+ account_Bank: '',
|
|
|
+ bank_branch: '',
|
|
|
+ bank_card: '',
|
|
|
+ bank_name: '',
|
|
|
+ // birthday: '',
|
|
|
+ city: '',
|
|
|
+ card_id: '',//身份证
|
|
|
+ uid: '',
|
|
|
+ vip_name: ''
|
|
|
+ }
|
|
|
},
|
|
|
- qx() {
|
|
|
- this.password = '';
|
|
|
- this.$refs.popup.close();
|
|
|
+ onLoad() {
|
|
|
+ let obj = this
|
|
|
+ obj.avatar = obj.userInfo.avatar || ''
|
|
|
+ obj.alipay_name = obj.userInfo.alipay_name || ''
|
|
|
+ obj.alipay_no = obj.userInfo.alipay_no || '',
|
|
|
+ obj.bank_branch = obj.userInfo.bank_branch || ''
|
|
|
+ obj.account_Bank = obj.userInfo.account_Bank || ''
|
|
|
+ obj.bank_card = obj.userInfo.bank_card || ''
|
|
|
+ obj.uid = obj.userInfo.uid
|
|
|
+ obj.bank_name = obj.userInfo.bank_name || ''
|
|
|
+ // obj.birthday = obj.userInfo.birthday || ''
|
|
|
+ // obj.card_id: obj.userInfo.card_id || ''
|
|
|
+ obj.upimg = obj.userInfo.wx_qr || ''
|
|
|
+ obj.wx_no = obj.userInfo.wx_no || ''
|
|
|
+ obj.phone = obj.userInfo.phone || ''
|
|
|
+ obj.real_name = obj.userInfo.real_name || ''
|
|
|
+ obj.nickname = obj.userInfo.nickname || ''
|
|
|
+ console.log(obj.userInfo.vip_name,'obj.userInfo.vip_name')
|
|
|
+ // obj.vip_name = obj.userInfo.vip_name || '暂无'
|
|
|
},
|
|
|
- pswQd() {
|
|
|
- if(this.password != this.userInfo.phone){
|
|
|
- this.$refs.popup.close();
|
|
|
- this.password = '';
|
|
|
- this.$api.msg("请输入自己的账户")
|
|
|
- return
|
|
|
+ methods: {
|
|
|
+ ...mapMutations('user', ['setUserInfo', 'setOrderInfo','logout']),
|
|
|
+ //退出登录
|
|
|
+ toLogout() {
|
|
|
+ let obj = this;
|
|
|
+ uni.showModal({
|
|
|
+ content: '确定要退出登录么',
|
|
|
+ success: e => {
|
|
|
+ if (e.confirm) {
|
|
|
+ logout({}).then(e => {
|
|
|
+ obj.logout();
|
|
|
+ uni.switchTab({
|
|
|
+ url: '/pages/index/index'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ imgsub(text) {
|
|
|
+ console.log('imgsub');
|
|
|
+ upload({
|
|
|
+ filename: ''
|
|
|
+ }).then(data => {
|
|
|
+ // this.upimg = data[0].url;
|
|
|
+ this.$set(this,text,data[0].url)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getUserInfo() {
|
|
|
+ getUserInfo({})
|
|
|
+ .then(({ data }) => {
|
|
|
+ this.setUserInfo(data);
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ bindDateChange(e) {
|
|
|
+ this.birthday = e.detail.value
|
|
|
+ },
|
|
|
+ subInfo() {
|
|
|
+ let obj = this
|
|
|
+ if(obj.upimg == '') {
|
|
|
+ obj.$api.msg('请上传收款码')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(obj.avatar == '') {
|
|
|
+ obj.$api.msg('请上传头像')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(obj.nickname == '') {
|
|
|
+ obj.$api.msg('请输入昵称')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(obj.phone == '') {
|
|
|
+ obj.$api.msg('请输入手机号')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
|
|
|
+ if (!reg.test(obj.phone)) {
|
|
|
+ obj.$api.msg('请填写正确的手机号码');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(obj.real_name == '') {
|
|
|
+ obj.$api.msg('请输入姓名')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(obj.wx_no == '') {
|
|
|
+ obj.$api.msg('请输入微信号')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(obj.alipay_name == '') {
|
|
|
+ obj.$api.msg('请输入支付宝姓名')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(obj.alipay_no == '') {
|
|
|
+ obj.$api.msg('请输入支付宝账号')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(obj.account_Bank == '') {
|
|
|
+ obj.$api.msg('请输入开户行')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(obj.bank_branch == '') {
|
|
|
+ obj.$api.msg('请输入所属支行')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(obj.bank_name == '') {
|
|
|
+ obj.$api.msg('请输入开户姓名')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(obj.bank_card == '') {
|
|
|
+ obj.$api.msg('请输入银行卡账号')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // if(obj.birthday == '') {
|
|
|
+ // obj.$api.msg('请输入出生日期')
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+
|
|
|
+ uni.showLoading({
|
|
|
+ title: '提交中...',
|
|
|
+ mask:true
|
|
|
+ })
|
|
|
+ edit({
|
|
|
+ avatar: obj.avatar,
|
|
|
+ alipay_name: obj.alipay_name,
|
|
|
+ alipay_no: obj.alipay_no,
|
|
|
+ account_Bank: obj.account_Bank,
|
|
|
+ bank_branch: obj.bank_branch,
|
|
|
+ bank_card: obj.bank_card,
|
|
|
+ bank_name: obj.bank_name,
|
|
|
+ // birthday: obj.birthday,
|
|
|
+ // card_id: obj.card_id,
|
|
|
+ wx_no: obj.wx_no,
|
|
|
+ phone: obj.phone,
|
|
|
+ real_name: obj.real_name,
|
|
|
+ nickname: obj.nickname,
|
|
|
+ wx_qr: obj.upimg
|
|
|
+
|
|
|
+ }).then( res => {
|
|
|
+ obj.getUserInfo()
|
|
|
+
|
|
|
+ obj.$api.msg('修改成功');
|
|
|
+ let pages = getCurrentPages();
|
|
|
+ let route = pages[pages.length - 2].route;
|
|
|
+ console.log(route,'route++++++++')
|
|
|
+ if(route == 'pages/money/withdrawal') {
|
|
|
+ setTimeout(()=> {
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'/pages/money/withdrawal'
|
|
|
+ });
|
|
|
+ }, 1000);
|
|
|
+ }else {
|
|
|
+ setTimeout(()=> {
|
|
|
+ uni.switchTab({
|
|
|
+ url:'/pages/user/user'
|
|
|
+ });
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }).catch( err => {
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
}
|
|
|
- this.$refs.popup.close();
|
|
|
- this.password = '';
|
|
|
- this.$api.msg("申请注销成功，请耐心等待审核")
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
- .row1 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- position: relative;
|
|
|
- padding: 0 30upx;
|
|
|
- height: 110upx;
|
|
|
- background: #fff;
|
|
|
- margin-bottom: 20upx;
|
|
|
- .tit {
|
|
|
- flex-shrink: 0;
|
|
|
- width: 120upx;
|
|
|
- font-size: $font-lg;
|
|
|
- color: $font-color-dark;
|
|
|
- }
|
|
|
-
|
|
|
- .background-img {
|
|
|
- width: 80rpx;
|
|
|
- height: 80rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background: #f2f2f2;
|
|
|
- }
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .tit {
|
|
|
+ padding: 30rpx 25rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #101010;
|
|
|
}
|
|
|
- .row {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 0 30upx;
|
|
|
- height: 110upx;
|
|
|
- background: #fff;
|
|
|
-
|
|
|
- .tit {
|
|
|
- flex-shrink: 0;
|
|
|
- width: 120upx;
|
|
|
- font-size: $font-lg;
|
|
|
- color: $font-color-dark;
|
|
|
+
|
|
|
+ .up-wrap {
|
|
|
+ margin-left: 30rpx;
|
|
|
+ width: 225rpx;
|
|
|
+ height: 225rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 225rpx;
|
|
|
+ height: 225rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
}
|
|
|
- .input {
|
|
|
- flex: 1;
|
|
|
- text-align: right;
|
|
|
- font-size: $font-base;
|
|
|
- color: $color-gray;
|
|
|
+ }
|
|
|
+
|
|
|
+ .base-info {
|
|
|
+ margin: auto;
|
|
|
+ width: 702rpx;
|
|
|
+ // height: 1106px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
|
|
|
+ border-radius: 20rpx;
|
|
|
+
|
|
|
+ .base-item {
|
|
|
+ border: 1px solid #eee;
|
|
|
+ line-height: 100rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ padding-left: 25rpx;
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ margin: auto;
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ // background-color: #aaa;
|
|
|
+ image {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-name {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .item-val {
|
|
|
+ display: block;
|
|
|
+ line-height: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ width: 478rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
- .add-btn {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin: 158rpx auto 30rpx;
|
|
|
- width: 560rpx;
|
|
|
- height: 80rpx;
|
|
|
- background: #DC262B;
|
|
|
- border-radius: 40px;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ margin: 70rpx auto 0;
|
|
|
+ width: 702rpx;
|
|
|
+ line-height: 84rpx;
|
|
|
+ background: linear-gradient(30deg, #FF4C4C, #FE6238);
|
|
|
+ border-radius: 10rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
color: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
- .out {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin: 0 auto 30rpx;
|
|
|
- width: 560rpx;
|
|
|
- height: 80rpx;
|
|
|
- border: 1px solid #32C6FF;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 40px;
|
|
|
- color: #32C6FF;
|
|
|
- }
|
|
|
- .psw-wrapper {
|
|
|
- width: 548rpx;
|
|
|
- height: 344rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- .psw-title {
|
|
|
- width: 100%;
|
|
|
- font-size: 35rpx;
|
|
|
- padding: 43rpx 0 49rpx;
|
|
|
- text-align: center;
|
|
|
- font-weight: 800;
|
|
|
- }
|
|
|
- .psw-ipt {
|
|
|
- display: block;
|
|
|
- background-color: #dce3ed;
|
|
|
- height: 90rpx;
|
|
|
- width: 464rpx;
|
|
|
- padding-left: 30rpx;
|
|
|
- margin: 0 auto;
|
|
|
- font-size: 80rpx;
|
|
|
- }
|
|
|
- .psw-btn text {
|
|
|
- display: inline-block;
|
|
|
- text-align: center;
|
|
|
- width: 50%;
|
|
|
- padding-top: 29rpx;
|
|
|
- font-size: 35rpx;
|
|
|
- }
|
|
|
- .psw-qd {
|
|
|
- color: #32C6FF;
|
|
|
- }
|
|
|
+ .btn1 {
|
|
|
+ margin: 30rpx auto 0;
|
|
|
+ width: 702rpx;
|
|
|
+ line-height: 84rpx;
|
|
|
+ color: #FF4C4C;
|
|
|
+ border: 1px solid #FF4C4C;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
</style>
|
