gerenxinxi

pages/line/line.vue

@@ -73,7 +73,7 @@
 			return {
 				navBarTop: 0,
 				listLine: [],
-				colorList: ['#dbd0ba','#666d95','#82818e','#6d7c4c'],
+				colorList: ['#dbd0ba','#ad6e46','#666d95','#6d7c4c'],
 			}
 
 		},

pages/me/me.vue

@@ -3,7 +3,7 @@
 		<image class="bg" :src="require('@/static/qus-bg.jpg')" mode=""></image>
 		<view class="me" :style="{paddingTop: navBarTop+'px'}">
 			<view class="me-avatar" @click="showform = true,maskClose=true">
-				<image :src="info.headimgurl?info.headimgurl:headReplace" mode=""></image>
+				<image :src="info.headimgurl?info.headimgurl:imgurl" mode=""></image>
 				<view class="">
 					{{info.name?info.name:''}}
 				</view>
@@ -19,14 +19,16 @@
 					<view>
 						<view v-if="item.id==='cer'" class="cer">
 							<view class="cer-progress">
-								<view v-if="done>0 && answerTotal>0">{{done}}/{{answerTotal}}</view>
+								<view v-if="done>0 && answerTotal>0">{{done}}/{{answerTotal}}</view>
 								<view v-else>0</view>
 								<view class="cer-progress-bar">
-									<view class="cer-progress-item" :style="{'width':done>0 && answerTotal>0?(done/answerTotal)*100+'%':0}">
+									<view class="cer-progress-item"
+										:style="{'width':done>0 && answerTotal>0?(done/answerTotal)*100+'%':0}">
 									</view>
 								</view>
 							</view>
-							<view class="cer-btn" :class="{'cer-btn-active':(done>0 && answerTotal>0 && done>=answerTotal)?true:false}">
+							<view class="cer-btn"
+								:class="{'cer-btn-active':(done>0 && answerTotal>0 && done>=answerTotal)?true:false}">
 								<text>{{done>0 && answerTotal>0 && done >= answerTotal ? '生成证书' : '未完成打卡'}}</text>
 							</view>
 						</view>
@@ -37,7 +39,7 @@
 		</view>
 		<!-- 锦囊 -->
 		<view class="tips" v-if="showTips" :class="showTips?'fade-in':'fade-out'">
-			<view class="tips-wrap"  @click="showTips=false">
+			<view class="tips-wrap" @click="showTips=false">
 				<view class="tips-wrap-close" @click="showTips=false">
 					x
 				</view>
@@ -46,7 +48,7 @@
 						:src="require('../../static/toast.png')"></u-image>
 					<view class="tips-wrap-tip">
 
-						<view class="">
+						<view class="">
 							<rich-text v-if='showTips' :nodes="tips?tips:' '"></rich-text>
 						</view>
 					</view>
@@ -55,23 +57,34 @@
 			</view>
 		</view>
 		<!-- 弹出头像 昵称 -->
-		<u-popup v-model="showform" mode="bottom" :mask-close-able="maskClose">
+		<u-popup v-model="showform" class="login" mode="bottom" :mask-close-able="maskClose">
+			<view class="login-top">
+				<view class="">
+					<image src="../../static/me-icon0.png" mode=""></image>
+					<text>行走红色苏州<text>申请</text></text>
+				</view>
+				<view class="">
+					<view class="">
+						获取你的头像、昵称
+					</view>
+					<view>
+						记录与展示活动情况
+					</view>
+				</view>
+
+			</view>
 			<view class="login-form">
 				<view>
-					<span>头像：</span>
 					<view style="border:none">
-						<button open-type="chooseAvatar" @chooseavatar='onChooseAvatar' style="padding: 0;margin: 0;">
-
+						<button plain open-type="chooseAvatar" @chooseavatar='onChooseAvatar' style="padding: 0;margin: 0;">
 							<image :src="imgurl" mode=""></image>
 						</button>
 					</view>
+					<view>上传头像</view>
 				</view>
-				<view>
-					<span>姓名：</span>
-					<view>
-						<input type="nickname" @blur="blurname" :placeholderStyle="'color:#999;font-size:30rpx'"
-							v-model="form.name" placeholder="请输入姓名" :border="false" shape="circle" clearable></input>
-					</view>
+				<view class="login-form-input">
+					<input type="nickname" @blur="blurname" :placeholderStyle="'color:#999;font-size:30rpx'"
+						v-model="form.name" placeholder="你的昵称" :border="false" shape="circle" clearable></input>
 				</view>
 			</view>
 			<view class="login-btn">
@@ -105,7 +118,7 @@
 				headReplace: '',
 				showform: false,
 				maskClose: false,
-				imgurl: '',
+				imgurl: require('@/static/me-head.png'),
 				form: {
 					name: ''
 				},
@@ -145,10 +158,10 @@
 			const MenuButton = uni.getMenuButtonBoundingClientRect()
 			this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
 			this.getConfig()
-		},
-		onShow() {
-			this.getInitUser()
-			this.getDone()
+		},
+		onShow() {
+			this.getInitUser()
+			this.getDone()
 		},
 		methods: {
 			onChooseAvatar(e) {
@@ -186,30 +199,32 @@
 				this.$u.vuex('vuex_user', res)
 				console.log(this.vuex_user)
 				this.form = res
-				this.imgurl = res.headimgurl ? res.headimgurl : ''
+				if (res.headimgurl) {
+					this.imgurl = res.headimgurl
+				}
 				this.info = this.$u.deepClone(res);
 				if (isNull(res.name)) {
 					this.showform = true
 				}
 			},
 			async getDone() {
-				const res = await this.$u.api.getPoints()
+				const res = await this.$u.api.getPoints()
 				// this.done = res.point_answer_total
 				this.done = res.point_answer_total > this.answerTotal ? this.answerTotal : res.point_answer_total
 			},
 			async getConfig() {
-				await this.$u.api.getAppId().then(res=>{
-					res.config.map(item => {
-						if (item.key === 'tips') {
-							this.tips = item.value
-						}
-						if (item.key === 'answer_total') {
-							this.answerTotal = parseInt(item.value)
-						}
-					
-					})
-				})
-				
+				await this.$u.api.getAppId().then(res => {
+					res.config.map(item => {
+						if (item.key === 'tips') {
+							this.tips = item.value
+						}
+						if (item.key === 'answer_total') {
+							this.answerTotal = parseInt(item.value)
+						}
+
+					})
+				})
+
 			},
 			submit() {
 				if (isNull(this.form.name)) {
@@ -371,27 +386,76 @@
 		}
 
 		.login {
+			.u-drawer-content-visible {
+				border-radius: 25rpx 25rpx 0 0;
+			}
+
+			&-top {
+				font-size: 30rpx;
+				color: #000000;
+				margin: 40rpx 50rpx;
+				border-bottom: 1px solid #eaeaea;
+				padding-bottom: 40rpx;
+
+				>view {
+
+					&:first-child {
+						padding-bottom: 50rpx;
+					}
+
+					>view {
+						color: #666666;
+
+						&:first-child {
+							font-size: 36rpx;
+							color: #000000;
+							padding-bottom: 30rpx;
+						}
+					}
+				}
+
+				image {
+					width: 53rpx;
+					height: 53rpx;
+					vertical-align: middle;
+				}
+
+				text {
+					margin-left: 30rpx;
+				}
+			}
+
 			&-form {
-				padding: 20rpx 60rpx;
+				padding: 30rpx 40rpx;
 				margin-top: 20rpx;
-				padding-bottom: 120rpx;
+				padding-bottom: 60rpx;
+				display: flex;
 
 				>view {
-					margin-bottom: 30rpx;
-					background-color: #fff;
-					padding: 20rpx 40rpx;
-					border-radius: 20rpx;
-					display: flex;
-					align-items: center;
+					// margin-bottom: 30rpx;
+					// background-color: #fff;
+					// padding: 20rpx 40rpx;
+					// border-radius: 20rpx;
+					// display: flex;
+					// align-items: center;
+					width: 140rpx;
 
-					span {
-						width: 120rpx;
-						text-align: right;
+					>view {
+						width: 140rpx;
+						text-align: center;
+						color: #666666;
 					}
 
 					button {
 						width: 100rpx;
 						height: 100rpx;
+						border-radius: 100rpx;
+						border: none;
+						background-color: #fff;
+						color: #fff;
+						font-size: 0;
+						margin: 0 auto !important;
+						margin-bottom: 10rpx!important;
 
 						image {
 							width: 100%;
@@ -399,29 +463,31 @@
 						}
 					}
 
-					>view {
-						border: 1px solid #999;
-						border-radius: 10rpx;
-						display: flex;
-						width: calc(100% - 120rpx);
-						padding: 10rpx 20rpx;
+				}
 
-						input {
-							width: 100%;
-						}
-					}
+				&-input {
+					border: 1px solid #eaeaea;
+					border-radius: 10rpx;
+					padding: 10rpx 20rpx;
+					margin-top: 10rpx;
+					width: calc(100% - 140rpx) !important;
+					height: 80rpx;
 
+					input {
+						width: 100%;
+						height: 100%;
+					}
 				}
 			}
 
 			&-btn {
 				padding: 30rpx 60rpx;
 				padding-top: 0;
-
+				padding-bottom:90rpx;
 				&-btn {
 					box-shadow: 0.5px 3px 9px 0px rgba(235, 107, 85, 0.3);
 					background: #960909;
-					border-radius: 44rpx;
+					border-radius: 16rpx;
 					text-align: center;
 					height: 88rpx;
 					color: #fff;