前端：增加注册登陆
前端：个人信息修改
This commit is contained in:
YunaiV
@@ -1,31 +1,86 @@
|
||||
<template>
|
||||
<div>
|
||||
<headerNav title="手机号登录"/>
|
||||
<div style="background:url(https://haitao.nos.netease.com/f866dd18-12f0-4bb2-be6d-5cac85cf2627.png) center 18px no-repeat;background-size:161px;">
|
||||
<div>
|
||||
<div style="padding-top: 70px;">
|
||||
<van-cell-group>
|
||||
<van-field
|
||||
placeholder="请输入手机号"
|
||||
@input="inputMobile"
|
||||
/>
|
||||
<van-field
|
||||
center
|
||||
clearable
|
||||
placeholder="请输入短信验证码"
|
||||
@input="inputCode"
|
||||
>
|
||||
<van-button slot="button" size="small" type="primary">发送验证码</van-button>
|
||||
<van-button slot="button" size="small" type="primary" @click="sendCode">发送验证码</van-button>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
<div style="margin: 10px;">
|
||||
<van-button size="large" type="primary" style="height: 45px;line-height:45px;">登录</van-button>
|
||||
<van-button size="large" type="primary" style="height: 45px;line-height:45px;" @click="submit">登录</van-button>
|
||||
</div>
|
||||
<div>1. 新注册的手机号验证后自动创建账户</div>
|
||||
<div>2. 默认验证码是 9999</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { doPassportMobileSendRegisterCode, doPassportMobileRegister } from '../../api/user';
|
||||
import { Dialog } from 'vant';
|
||||
import { setLoginToken } from '../../utils/cache';
|
||||
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
mobile: '',
|
||||
code: '',
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
inputMobile: function (value) {
|
||||
this.mobile = value;
|
||||
},
|
||||
inputCode: function (value) {
|
||||
this.code = value;
|
||||
},
|
||||
sendCode: function() {
|
||||
if (!this.mobile || this.mobile.length !== 11) {
|
||||
Dialog.alert({
|
||||
title: '系统提示',
|
||||
message: '手机号码不正确',
|
||||
});
|
||||
return;
|
||||
}
|
||||
let response = doPassportMobileSendRegisterCode(this.mobile);
|
||||
response.then(data => {
|
||||
Dialog.alert({
|
||||
title: '系统提示',
|
||||
message: '发送验证码成功',
|
||||
});
|
||||
});
|
||||
},
|
||||
submit: function () {
|
||||
let that = this;
|
||||
let response = doPassportMobileRegister(this.mobile, this.code);
|
||||
response.then(data => {
|
||||
setLoginToken(data.accessToken, data.refreshToken);
|
||||
Dialog.alert({
|
||||
title: '系统提示',
|
||||
message: '登陆成功',
|
||||
beforeClose: function (action, done) {
|
||||
done();
|
||||
// TODO 芋艿，先暂时不做 callback
|
||||
that.$router.push('/user/index');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -165,14 +165,14 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import skuData from '../../data/sku';
|
||||
// import skuData from '../../data/sku';
|
||||
import { getProductSpuInfo } from '../../api/product';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
data() {
|
||||
this.skuData = skuData;
|
||||
// this.skuData = skuData;
|
||||
return {
|
||||
spu: {}, // 商品信息
|
||||
vanSku: {
|
||||
@@ -191,21 +191,22 @@ export default {
|
||||
},
|
||||
attrValueMap: new Map(), // 规格值的映射
|
||||
|
||||
show:false,
|
||||
showTag:false,
|
||||
goods: {
|
||||
title: '【每日一粒益智又长高】 Lifeline Care 儿童果冻鱼油DHA维生素D3聪明长高 软糖 30粒 2件装',
|
||||
subtitle:'【品牌直采】Q弹美味，无腥味果冻鱼油，每粒含足量鱼油DHA，帮助视网膜和大脑健康发育，让你的宝宝明眼又聪明，同时补充400国际单位维生素D3，强壮骨骼和牙齿。特含DPA，让宝宝免疫力更强，没病来扰。',
|
||||
price: 2680,
|
||||
market_price:9999,
|
||||
express: '免运费',
|
||||
remain: 19,
|
||||
thumb: [
|
||||
'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
|
||||
'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
|
||||
],
|
||||
info:'<p style="text-align:center;"><img src="https://haitao.nosdn2.127.net/ac19460151ee4d95a6657202bcfc653c1531470912089jjjq8ml410763.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/2a91cfad22404e5498d347672b1440301531470912182jjjq8mnq10764.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/caddd5a213de4c1cb1347c267e8275731531470912412jjjq8mu410765.jpg" ></p>',
|
||||
},
|
||||
// show:false,
|
||||
// showTag:false,
|
||||
// goods: {
|
||||
// title: '【每日一粒益智又长高】 Lifeline Care 儿童果冻鱼油DHA维生素D3聪明长高 软糖 30粒 2件装',
|
||||
// subtitle:'【品牌直采】Q弹美味，无腥味果冻鱼油，每粒含足量鱼油DHA，帮助视网膜和大脑健康发育，让你的宝宝明眼又聪明，同时补充400国际单位维生素D3，强壮骨骼和牙齿。特含DPA，让宝宝免疫力更强，没病来扰。',
|
||||
// price: 2680,
|
||||
// market_price:9999,
|
||||
// express: '免运费',
|
||||
// remain: 19,
|
||||
// thumb: [
|
||||
// 'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
|
||||
// 'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
|
||||
// ],
|
||||
// info:'<p style="text-align:center;"><img src="https://haitao.nosdn2.127.net/ac19460151ee4d95a6657202bcfc653c1531470912089jjjq8ml410763.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/2a91cfad22404e5498d347672b1440301531470912182jjjq8mnq10764.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/caddd5a213de4c1cb1347c267e8275731531470912412jjjq8mu410765.jpg" ></p>',
|
||||
// },
|
||||
|
||||
showBase: false, // 是否显示 sku 坦诚
|
||||
closeOnClickOverlay: true, // 是否在点击蒙层后关闭
|
||||
hideStock: true, // 是否显示商品剩余库存
|
||||
|
||||
@@ -3,12 +3,12 @@
|
||||
<div class="user-profile">
|
||||
<div class="user-profile-avatar">
|
||||
<a href="/#/user/info">
|
||||
<img :src="data.Avatar" alt="用户头像">
|
||||
<img :src="user && user.avatar ? user.avatar : 'http://static.iocoder.cn/1553652151601.jpg?imageView2/2/w/308/h/210/interlace/1/q/100'">
|
||||
</a>
|
||||
</div>
|
||||
<div class="user-profile-username">
|
||||
<a href="/#/user/info">
|
||||
<span class="m-nick">{{data.UserName}}</span>
|
||||
<span class="m-nick">{{user ? user.nickname : '未登陆'}}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -75,7 +75,8 @@
|
||||
</van-cell-group>
|
||||
|
||||
<van-cell-group>
|
||||
<van-cell title="切换账号" is-link to="/login" />
|
||||
<van-cell v-if="user" title="退出登录" @click="logout" />
|
||||
<van-cell v-else title="登陆" is-link to="/login" />
|
||||
</van-cell-group>
|
||||
<navigate />
|
||||
</div>
|
||||
@@ -83,18 +84,27 @@
|
||||
|
||||
<script>
|
||||
// import { GetUserIndex } from "../../api/user.js";
|
||||
import { getAccessToken } from '../../utils/cache.js';
|
||||
import { getAccessToken, clearLoginToken } from '../../utils/cache.js';
|
||||
import { getUserInfo } from '../../api/user.js';
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return{
|
||||
data: {},
|
||||
user: {},
|
||||
user: undefined,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
},
|
||||
methods: {
|
||||
logout: function () {
|
||||
// 清空本地 token
|
||||
clearLoginToken();
|
||||
// TODO 芋艿，后面最好处理下 token
|
||||
// 跳转到登陆
|
||||
this.$router.push('/login');
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
// GetUserIndex().then(response=>{
|
||||
// this.data=response;
|
||||
|
||||
@@ -1,19 +1,83 @@
|
||||
<template>
|
||||
<div>
|
||||
<headerNav title="账号管理"/>
|
||||
<headerNav title="个人信息"/>
|
||||
<van-cell-group>
|
||||
<van-cell title="修改个人信息" is-link />
|
||||
<!--<van-cell title="修改个人信息" is-link />-->
|
||||
<!--<van-cell title="修改登录密码" is-link />-->
|
||||
<!--<van-cell title="修改绑定手机" is-link />-->
|
||||
<!--<van-cell title="关联账号" is-link />-->
|
||||
<!--<van-cell title="切换账号" is-link to="/login" />-->
|
||||
<van-cell title="昵称" :value="user.nickname" @click="onShowNicknameDialog" />
|
||||
<van-cell title="头像" @click="onShowAvatarDialog" >
|
||||
<img width="24px" :src="user.avatar" >
|
||||
</van-cell>
|
||||
|
||||
</van-cell-group>
|
||||
|
||||
<!-- 昵称修改弹出 -->
|
||||
<van-dialog
|
||||
v-model="showNicknameDialog"
|
||||
:before-close="onShowNicknameDialogClose"
|
||||
show-cancel-button
|
||||
|
||||
>
|
||||
<van-field
|
||||
:value="user.nickname"
|
||||
label="昵称"
|
||||
placeholder="请输入昵称"
|
||||
@input="inputNickname"
|
||||
/>
|
||||
</van-dialog>
|
||||
<!---->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import { getUserInfo, doUserUpdateNickname } from '../../../api/user.js';
|
||||
import { Dialog } from 'vant';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
user: {},
|
||||
showNicknameDialog: false,
|
||||
updateNickname: undefined,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onShowNicknameDialog: function () {
|
||||
this.showNicknameDialog = true;
|
||||
this.updateNickname = this.user.nickname;
|
||||
},
|
||||
inputNickname: function (value) {
|
||||
this.updateNickname = value;
|
||||
},
|
||||
onShowNicknameDialogClose: function (action, done) {
|
||||
if (action === 'confirm') {
|
||||
let that = this;
|
||||
let response = doUserUpdateNickname(this.updateNickname);
|
||||
response.then(data => {
|
||||
// 修改
|
||||
that.user.nickname = that.updateNickname;
|
||||
// 关闭弹窗
|
||||
done();
|
||||
});
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
},
|
||||
|
||||
onShowAvatarDialog: function () {
|
||||
// TODO 芋艿，头像上传
|
||||
alert('头像上传暂未开发');
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let response = getUserInfo();
|
||||
response.then(data => {
|
||||
this.user = data;
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user