123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164 |
- <!-- 修改昵称 -->
- <template>
- <view class='edit_nick_name'>
- <view class='input_wrap flex_row_between_center'>
- <input type='text' v-model='memberNickName' maxlength='15' placeholder='这么好的你,应该拥有更好的昵称~' placeholder-style='font-size:26rpx;color:#949494'
- @input='inputCon' confirm-type='done' @confirm='saveCon'></input>
- <text @click="clearCon" v-show="memberNickName" class='clear_con iconfont iconguanbi' />
- </view>
- <view v-show="memberNickName" class='count'>
- <text class='cur_count'>{{memberNickName.length}}</text><text class="totla_count">/15</text>
- </view>
- <view class="member_nickname_btn" @click="saveCon">{{$L('保存')}}</view>
- </view>
- </template>
- <script>
- import {
- mapState
- } from 'vuex';
- export default {
- data() {
- return {
- memberNickName: '',
- limitNum: 15,
- };
- },
- onLoad(option) {
- this.memberNickName = decodeURIComponent(option.nickName);
- },
- computed: {
- ...mapState(['userInfo'])
- },
- methods: {
- //input输入事件
- inputCon(e) {
- let {
- limitNum
- } = this;
- let con = e.detail.value;
- if (con.length <= limitNum) {
- this.memberNickName = con;
- }
- },
- //保存数据
- saveCon() {
- let {
- memberNickName
- } = this;
- if (memberNickName.trim().length == 0) {
- this.$api.msg('请输入昵称');
- }else if(memberNickName.trim().length>10){
- this.$api.msg('请输入15个字以内的昵称');
- } else {
- this.saveMemInfo('memberNickName', memberNickName);
- }
- },
- //清空输入值
- clearCon() {
- this.memberNickName = '';
- },
- navTo(url) {
- uni.navigateTo({
- url: url
- })
- },
- //保存会员信息
- saveMemInfo(index, val) {
- let param = {};
- param.url = 'v3/member/front/member/updateInfo';
- param.data = {};
- param.method = 'POST';
- param.data[index] = val;
- this.$request(param).then(res => {
- this.$api.msg(res.msg);
- if (res.state == 200) {
- uni.showToast({
- title:'修改成功!',
- icon:'none',
- duration:500
- })
- setTimeout(()=>{
- this[index] = val;
- //更新上个页面的会员昵称
- var pages = getCurrentPages(); //当前页面栈
- if (pages.length > 1) {
- var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象
- beforePage.$vm.updateMemInfo(val); //触发上个面中的方法updateMemInfo()
- }
- uni.navigateBack();
- },700)
- }
- }).catch((e) => {
- //异常处理
- })
- },
- }
- }
- </script>
- <style lang='scss'>
- page {
- background: $bg-color-split;
- width: 750rpx;
- margin: 0 auto;
- }
- .edit_nick_name {
- margin-top: 20rpx;
- width: 100%;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- .member_nickname_btn{
- width: 680rpx;
- height: 80rpx;
- background: linear-gradient(-90deg, #FB1D1B 0%, #FF7A18 100%);
- border-radius: 37rpx;
- margin: 40rpx auto 0;
- font-size: 34rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #FFFFFF;
- line-height: 80rpx;
- text-align: center;
- }
- }
- .edit_nick_name .input_wrap {
- height: 100rpx;
- padding: 0 20rpx;
- width: 100%;
- background-color: #fff;
- }
- .edit_nick_name .input_wrap input {
- width: 450rpx;
- color: #2D2D2D;
- font-size: 28rpx;
- }
- .edit_nick_name .input_wrap .clear_con {
- font-size: 35rpx;
- color: #DCDCDC;
- }
- .edit_nick_name .count {
- width: 100%;
- display: flex;
- justify-content: flex-end;
- padding-right: 20rpx;
- margin-top: 20rpx;
- }
- .edit_nick_name .count text {
- font-size: 28rpx;
- color: #2D2D2D;
- }
- .edit_nick_name .count .cur_count {
- color: #FC1C1C;
- }
- </style>
|