新增首次登录修改昵称头像

pages.json

@@ -8,6 +8,12 @@
 				"navigationStyle": "custom",
 				"navigationBarBackgroundColor": "#161616"
 			}
+		}, {
+			"path": "pages/login/loginFirst",
+			"style": {
+				"navigationBarTitleText": "修改资料",
+				"navigationBarBackgroundColor": "#161616"
+			}
 		}, {
 			"path": "pages/index/index",
 			"style": {

pages/login/login.vue

@@ -225,6 +225,12 @@
 							console.log("res.data", res.data);
 							uni.setStorageSync("wapptoken", res.data.skey);
 							getApp().globalData.skey = res.data.skey;
+							if (res.data.nickname == '') {
+								uni.redirectTo({
+									url: '/pages/login/loginFirst'
+								});
+								return;
+							}
 							uni.switchTab({
 								url: "/pages/index/index",
 							});

pages/login/loginFirst.scss

@@ -0,0 +1,183 @@
+
+page {
+	background-color: #161616;
+}
+.page {
+	background-color: #161616;
+}
+.topbg {
+}
+.topBody {
+	width:750rpx;
+}
+.list_info {
+	display: flex;flex-direction: column;justify-content: flex-start;align-items: center;color:#fff;
+	width:750rpx;
+	.name {
+		width:690rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: flex-start;
+		color:#fff;font-size: 28rpx;margin-top: 50rpx;
+		.right {
+			font-size: 28rpx;
+			color: #FF2A95;
+		}
+	}
+	.desc {
+		width:690rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: flex-start;
+		color:#999;font-size: 24rpx;margin-top: 20rpx;
+	}
+	.item {
+		width: 690rpx;height: 84rpx;margin-top: 20rpx;
+		background: #282828;position: relative;
+		border-radius: 24rpx 24rpx 24rpx 24rpx;
+		input {
+			width:100%;height:100%;padding-left: 20rpx;font-size: 28rpx;
+		}
+		.btn {
+			position: absolute;right:20rpx;top:0rpx;
+			font-weight: 400;
+			font-size: 28rpx;line-height: 84rpx;
+			color: #FF2A95;
+		}
+		.arrow {
+			width:36rpx;position: absolute;right:20rpx;top:24rpx;
+		}
+	}
+	.bcenter {
+		display: flex;flex-direction: row;justify-content: space-around;align-items: center;margin-top: 20rpx;
+		width:650rpx;flex-wrap: wrap;
+		.avator {
+			width: 172rpx;margin:20rpx auto;position: relative;
+			
+			image {
+				border-radius: 100rpx;width: 144rpx;height: 144rpx;
+			}
+		}
+		.active {
+			image {
+				border-radius: 100rpx;
+				border: solid 4rpx #FF2A95;border-radius: 100rpx;
+			}
+		}
+	}
+	
+	
+	.item2 {
+		width: 690rpx;height: 84rpx;margin-top: 20rpx;
+		display: flex;flex-direction: row;justify-content: center;align-items: center;
+		.sex {
+			width: 334rpx;height: 84rpx;
+			background: #282828;
+			border-radius: 24rpx;
+			border: 2rpx solid #282828;color:#999;
+			display: flex;flex-direction: row;justify-content: center;align-items: center;
+		}
+		.active {
+			border: 4rpx solid #FF2A95;color:#FF2A95;
+		}
+		.sex2 {
+			image {
+				width:172rpx;
+			}
+		}
+	}
+	.itemSex {
+		width: 690rpx;margin-top: 20rpx;
+		display: flex;flex-direction: row;justify-content: center;align-items: center;
+		.sex2 {
+			display: flex;flex-direction: column;justify-content: flex-end;align-items: center;
+			width:210rpx;height:210rpx;
+			text {
+				color:#999;
+			}
+			image {
+				width:132rpx;height:132rpx;
+			}
+		}
+		.active {
+			text {
+				color:#fff;
+			}
+			image {
+				border: 4rpx solid #36D6FF;border-radius: 172rpx;width:172rpx;height:172rpx;
+			}
+		}
+	}
+	.itemSingle {
+		width: 690rpx;height: 84rpx;margin-top: 20rpx;
+		display: flex;flex-direction: row;justify-content: center;align-items: center;
+		.slider {
+			width: 100%;
+		}
+	}
+	.itemXL {
+		width: 690rpx;
+	}
+	.item_tag {
+		display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
+		flex-wrap: wrap;width: 690rpx;
+		.tag {
+			border-radius: 20rpx;margin-right: 10rpx;margin-top:20rpx;padding:0rpx 20rpx;height:60rpx;
+			border: 2rpx solid #404040;
+			display: flex;flex-direction: row;justify-content: center;align-items: center;
+			.close {
+				width:36rpx;margin-left:10rpx;
+			}
+		}
+		.active {
+			border-radius: 20rpx;
+			border: 2rpx solid #FF2A95;
+		}
+	}
+}
+.btn_submit {
+	width: 660rpx;height: 96rpx;position: fixed;bottom:50rpx;left:45rpx;
+	background: linear-gradient( 142deg, #FF5967 0%, #FF2A95 100%);
+	border-radius: 28rpx;font-weight: bold;font-size: 32rpx;color: #FFFFFF;
+	display: flex;flex-direction: row;justify-content: center;align-items: center;
+}
+.btn_list {
+	width: 660rpx;height: 96rpx;position: fixed;bottom:50rpx;left:45rpx;
+	display: flex;flex-direction: row;justify-content: space-between;align-items: center;
+	.btn_submit1 {
+		width: 326rpx;height: 96rpx;border: 2rpx solid #D0D0D0;
+		border-radius: 28rpx;font-weight: normal;font-size: 32rpx;color: #FFFFFF;
+		display: flex;flex-direction: row;justify-content: center;align-items: center;
+	}
+	.btn_submit2 {
+		width: 312rpx;height: 96rpx;
+		background: linear-gradient( 142deg, #FF5967 0%, #FF2A95 100%);
+		border-radius: 28rpx;font-weight: normal;font-size: 32rpx;color: #FFFFFF;
+		display: flex;flex-direction: row;justify-content: center;align-items: center;
+	}
+}
+.picker-view {
+	width: 690rpx;
+	height: 400rpx;
+	margin-top: 20rpx;
+	background-color: #00000000;
+}
+.itemXll {
+	line-height: 100rpx;
+	text-align: center;
+}
+.selectLine {
+	background: #80404040;border-radius: 24rpx;height:100rpx;border:0;border-top:0;
+}
+// 给中间选中行添加border-radius
+::v-deep .itemXll .selectLine {
+    border-radius: 0 16rpx 16rpx 0;
+}
+::v-deep .itemXll .selectLine {
+    border-radius: 16rpx 0 0 16rpx;
+}
+ 
+// 修改原有的上下边框颜色
+::v-deep .selectLine::after {
+    border-bottom: 0rpx solid #000;
+}
+::v-deep .selectLine::before {
+    border-top: 0rpx solid #000;
+}
+.blankHeight {
+	height:300rpx;
+}

pages/login/loginFirst.vue

@@ -0,0 +1,182 @@
+<template>
+	<view class="page">
+		<view class="list_info">
+			<view class="name">给自己取个名字吧：</view>
+			<view class="item">
+				<input type="text" class="input" v-model="nickname" placeholder="请输入昵称" />
+			</view>
+			<view class="name">请问你的性别是：</view>
+			<view class="itemSex">
+				<view class="sex2" :class="sex == 1?'active':''" style="margin-right: 10rpx;" @click="chkSex(1)">
+					<image class="photo" src="../../static/me/sex_1.png" mode="widthFix" />
+					<text>男性</text>
+				</view>
+				<view class="sex2" :class="sex == 2?'active':''" style="margin-left: 10rpx;" @click="chkSex(2)">
+					<image class="photo" src="../../static/me/sex_2.png" mode="widthFix" />
+					<text>女性</text>
+				</view>
+			</view>
+			<view class="name">选一张图片作为您的头像：</view>
+			<view class="bcenter">
+				<block v-if="sex != 2">
+					<view class="avator" :class="avator_str == 'a1.jpg'?'active':''" @click="selAvator('a1.jpg')">
+						<image src="http://e.yujianmate.com/images/avator/a1.jpg" mode="widthFix" />
+					</view>
+					<view class="avator" :class="avator_str == 'a2.jpg'?'active':''" @click="selAvator('a2.jpg')">
+						<image src="http://e.yujianmate.com/images/avator/a2.jpg" mode="widthFix" />
+					</view>
+					<view class="avator" :class="avator_str == 'a3.jpg'?'active':''" @click="selAvator('a3.jpg')">
+						<image src="http://e.yujianmate.com/images/avator/a3.jpg" mode="widthFix" />
+					</view>
+				</block>
+				<block v-if="sex != 1">
+					<view class="avator" :class="avator_str == 'b1.jpg'?'active':''" @click="selAvator('b1.jpg')">
+						<image src="http://e.yujianmate.com/images/avator/b1.jpg" mode="widthFix" />
+					</view>
+					<view class="avator" :class="avator_str == 'b2.jpg'?'active':''" @click="selAvator('b2.jpg')">
+						<image src="http://e.yujianmate.com/images/avator/b2.jpg" mode="widthFix" />
+					</view>
+					<view class="avator" :class="avator_str == 'b3.jpg'?'active':''" @click="selAvator('b3.jpg')">
+						<image src="http://e.yujianmate.com/images/avator/b3.jpg" mode="widthFix" />
+					</view>
+				</block>
+			</view>
+
+
+			<view class="blankHeight"></view>
+		</view>
+
+		<view class="btn_submit" @click="onFinish">保存</view>
+
+
+		<ToastW3 ref="ToastW3"></ToastW3>
+	</view>
+</template>
+
+<script>
+	export default {
+		components: {},
+		data() {
+			return {
+				title: '',
+				step: 1,
+				sel: 1,
+				sex: 1,
+				avator_str: '',
+				sel_tags: [],
+				nickname: '',
+				myinfo: {},
+			}
+		},
+		onLoad() {
+			this.loadInfo();
+		},
+		onShow() {},
+		methods: {
+			onBack() {},
+			chkSel() {
+				if (this.sel == 1) {
+					this.sel = 0;
+				} else {
+					this.sel = 1;
+				}
+			},
+			chkSex(sex) {
+				this.sex = sex;
+			},
+			selAvator(act) {
+				this.avator_str = act;
+			},
+			bindChange: function(e) {
+				const val = e.detail.value
+				// this.XLvalue = this.xueli_list[val[0]]
+			},
+			loadInfo() {
+				console.log({
+					uuid: getApp().globalData.uuid,
+					skey: getApp().globalData.skey
+				});
+				uni.request({
+					url: this.$apiHost + '/Web/getinfo',
+					data: {
+						uuid: getApp().globalData.uuid,
+						skey: getApp().globalData.skey
+					},
+					header: {
+						"content-type": "application/json", //自定义请求头信息
+					},
+					success: (res) => {
+						console.log("----:", res.data);
+						this.myinfo = res.data;
+						this.nickname = res.data.nickname;
+						this.sex = res.data.sex_id;
+					},
+					complete: (com) => {
+						// uni.hideLoading();
+					},
+					fail: (e) => {
+						console.log("----e:", e);
+					}
+				});
+
+
+			},
+			onFinish() {
+				let that = this;
+				if (this.nickname.length == '') {
+					that.$refs['ToastW3'].showToast({
+						title: "请给自己取个昵称",
+						animation: 0
+					});
+					return;
+				}
+				uni.showLoading({
+					mask: true,
+				});
+				uni.request({
+					url: this.$apiHost + '/Web/editInfo', //仅为示例，并非真实接口地址。
+					data: {
+						uuid: getApp().globalData.uuid,
+						nickname: this.nickname,
+						sex: this.sex,
+						avator_str: this.avator_str
+					},
+					header: {
+						"content-type": "application/json", //自定义请求头信息
+					},
+					success: (res) => {
+						console.log("----", res.data);
+						if (res.data.success == "yes") {
+							if (this.myinfo.nickname == "") {
+								uni.switchTab({
+									url: "/pages/index/index",
+								});
+							} else {
+								uni.switchTab({
+									url: "/pages/my/my",
+								});
+							}
+						} else if (res.data.success == "no") {
+							uni.showToast({
+								title: res.data.str,
+								icon: "none",
+							});
+						} else {
+							uni.showToast({
+								title: "操作失败，请联系客服",
+								icon: "none",
+							});
+						}
+					},
+					complete: (com) => {
+						uni.hideLoading();
+					},
+				});
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import 'loginFirst.scss';
+</style>

pages/login/reg.vue

@@ -7,11 +7,13 @@
 		</view>
 
 		<view class="tbody">
-
-			<view class="name">昵称：</view>
+			<view>
+				<image class="img" mode="widthFix" src="../../static/logo.png"></image>
+			</view>
+			<!-- <view class="name">昵称：</view>
 			<view class="item">
 				<input type="text" class="input" v-model="nickname" maxlength="30" placeholder="请输入您的昵称" />
-			</view>
+			</view> -->
 			<view class="name">手机号码：</view>
 			<view class="item">
 				<input type="text" class="input" v-model="mobile" maxlength="11" placeholder="请输入手机号码" />
@@ -133,7 +135,7 @@
 					url: this.$apiHost + method, //仅为示例，并非真实接口地址。
 					data: {
 						uuid: getApp().globalData.uuid,
-						nickname: this.nickname,
+						// nickname: this.nickname,
 						mobile: this.mobile,
 						password: this.password,
 						ycode: this.ycode,

pages/my/my.vue

@@ -3,10 +3,10 @@
 		<view class="topBody">
 			<view class="header">
 				<view class="infoBg">
-					<view class="left">
-						<image class="img" mode="widthFix" src="../../static/home/avator.png"></image>
+					<view class="left" @click="goPage('/pages/login/loginFirst')">
+						<image class="img" mode="widthFix" :src="myinfo.avator"></image>
 					</view>
-					<view class="right">
+					<view class="right" @click="goPage('/pages/login/loginFirst')">
 						<view class="nickname">
 							<text>{{myinfo.nickname}}</text>
 							<image src="../../static/me/icon_vip.png" mode="widthFix" />

pages/my/step.vue

@@ -113,7 +113,7 @@
 		data() {
 			return {
 				title: '',
-				step: 4,
+				step: 1,
 				sel: 1,
 				sex: 1,
 				xueli_list: [

pages/w3/ucenter.scss

@@ -38,7 +38,7 @@ page {
 				.nickname {
 					font-weight: bold;
 					font-size: 32rpx;
-					color: #FFFFFF;
+					color: #FFFFFF;padding-left: 8rpx;padding-right: 8rpx;
 				}
 			}
 			.num {

pages/w3/ucenter.vue

@@ -4,7 +4,7 @@
 			<view class="bg">
 				<view class="left">
 					<view class="user">
-						<image class="avator" mode="widthFix" src="../../static/home/meinv.png"></image>
+						<image class="avator" mode="widthFix" :src="myinfo.avator"></image>
 						<text class="nickname">{{myinfo.nickname}}</text>
 						<image class="iconV" mode="widthFix" :src="'../../static/w3/w3_icon_'+(myinfo.level+1)+'.png'">
 						</image>