1

pages/404/404.vue

@@ -1,6 +1,8 @@
 <template>
-	<view>
-		<h1>迷路啦，找不到页面</h1>
+	<view class="error">
+		<img src="/static/img/404.png" alt="">
+		<h4>抱歉!您要查看的页面无法打开</h4>
+		<u-button type="primary"  shape="circle" plain>返回首页</u-button>
 	</view>
 </template>
 
@@ -21,6 +23,17 @@
 	}
 </script>
 
-<style>
-
+<style scoped lang="scss">
+	.error{
+		text-align: center;
+		padding: 50px;
+		img{
+			width: 300px;
+		}
+		h4{
+			font-weight: normal;
+			font-size: 16px;
+			margin-bottom: 20px;
+		}
+	}
 </style>

pages/404/500.vue

@@ -0,0 +1,39 @@
+<template>
+	<view class="error">
+		<img src="/static/img/500.png" alt="">
+		<h4>抱歉!服务器出错了~</h4>
+		<u-button type="primary"  shape="circle" plain>返回首页</u-button>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		onLoad(...options){
+			console.log(options)
+			console.log(this.$Route)
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.error{
+		text-align: center;
+		padding: 50px;
+		img{
+			width: 300px;
+		}
+		h4{
+			font-weight: normal;
+			font-size: 16px;
+			margin-bottom: 20px;
+		}
+	}
+</style>

pages/my/index.vue

@@ -1,78 +1,83 @@
 <template>
 	<view>
-		<car-common :login="true"></car-common>
+		<u-navbar :is-back="false" title="我的" :border-bottom="false">
+		</u-navbar>
+		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 u-p-t-30">
+			<view class="u-m-r-20">
+				<u-avatar :src="pic" size="100"></u-avatar>
+			</view>
+			<view class="u-flex-1">
+				<view class="u-font-18 u-p-b-20">用户名称</view>
+			</view>
+			<view class="u-m-l-10 u-p-10">
+				<u-button type="primary" plain size="mini" shape="circle">修改资料</u-button>
+			</view>
+		</view>
+		<!-- <view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30 u-p-t-30">
+			<view class="u-m-r-20">
+				<u-avatar :src="pic" size="100"></u-avatar>
+			</view>
+			<view class="u-flex-1">
+				<view class="u-font-18 u-p-b-20">登录/注册</view>
+			</view>
+		</view> -->
 		
+		<u-cell-group>
+			<u-cell-item title="乘车记录"></u-cell-item>
+		</u-cell-group>
+		
+		<view class="u-m-t-20">
+			<u-cell-group>
+				<u-cell-item title="意见反馈"></u-cell-item>
+				<u-cell-item title="已绑定手机号"></u-cell-item>
+				<u-cell-item title="重置密码"></u-cell-item>
+				<u-cell-item title="关于车信达"></u-cell-item>
+			</u-cell-group>
+		</view>
+		
+		<view class="u-m-t-20">
+			<view class="signOut">退出账号</view>
+		</view>
 	</view>
 </template>
 
 <script>
-	import CarCommon from '@/components/Common.vue'
-	import  * as m from '@/utils/mixin.js'
-	import * as API_WeiXin from '@/apis/weixin.js'
-	
-	import {
-		getUrlParam,
-		getWeixinRedirectURI,
-		isWeiXin
-	} from '@/utils'
 	export default {
 		data() {
 			return {
-				
+				pic:'/static/img/user.png',
+				show:true
 			}
 		},
-		components:{
-			CarCommon
-		},
-		onReady() {
-			console.log("my-mounted")
+		onLoad() {
 			
 		},
-		onShow() {
-				console.log("my-mounted-show")
-				console.log(m.get("wx_openId"))
-				
-				if(!m.get("wx_openId")){
-					
-					if (isWeiXin()) {
-						this.getOpenid();
-					}
-				}
-		},
 		methods: {
-			getOpenid(){
-				console.log("!!!!")
-				const code = getUrlParam('code');
-				if (!code) {
-					var url= document.URL;
-					if(process.car.NODE_ENV=='test'){
-						url="http://xpgj.xiaoxinda.com/#/"
-					}
-					window.location.href = getWeixinRedirectURI(process.car.VUE_APP_WXAPPID,url);
-				}else{
-					console.log("code"+code)
-				
-					debugger
-					  API_WeiXin.getDataByCode(code).then(response => {
-						console.log("openId+!!!!"+response.openid)
-						debugger
-							m.set("wx_openId",code)
-						var linkUrl =document.URL.replace(/\?code=(.*?)&state=STATE/g, '');
-					window.location = linkUrl;//隐藏参数
-						//return Promise.resolve(response.openid);
-					}).catch(error => {
-						console.log(error);
-					
-					});
-					
-					
-					
-				}
-			}
+			
 		}
 	}
 </script>
 
-<style>
+<style lang="scss">
+page{
+	background-color: #ededed;
+}
 
+.camera{
+	width: 54px;
+	height: 44px;
+	
+	&:active{
+		background-color: #ededed;
+	}
+}
+.user-box{
+	background-color: #fff;
+}
+.signOut{
+	height: 50px;
+	background-color: #fff;
+	text-align: center;
+	line-height: 50px;
+}
 </style>

pages/my/user/bybusList.vue

@@ -1,6 +1,55 @@
 <template>
 	<view>
-		
+		<view class="ticket-item">
+			<view class="ticket-item-left">
+				<view class="ticket-head">
+					<u-avatar :src="src" size="mini"></u-avatar>
+					<h3>玉桥 - 宿架转盘</h3>
+				</view>
+				<view class="ticket-text">
+					<view class="ticket-text-row">
+						<view class="ticket-text-row-item">
+							<p>票种：</p><span>成人票</span>
+						</view>
+						<view class="ticket-text-row-item">
+							<p>货票：</p><span>￥20.00</span>
+						</view>
+					</view>
+					<view class="ticket-text-row">
+						<p>购票时间：</p><h4>03-27 11:23</h4>
+					</view>
+				</view>
+			</view>
+			<view class="ticket-item-right">
+				<h3>26.00</h3>
+				<p>票价</p>
+			</view>
+		</view>
+		<view class="ticket-item">
+			<view class="ticket-item-left">
+				<view class="ticket-head">
+					<u-avatar :src="src" size="mini"></u-avatar>
+					<h3>玉桥 - 宿架转盘</h3>
+				</view>
+				<view class="ticket-text">
+					<view class="ticket-text-row">
+						<view class="ticket-text-row-item">
+							<p>票种：</p><span>成人票</span>
+						</view>
+						<view class="ticket-text-row-item">
+							<p>货票：</p><span>￥20.00</span>
+						</view>
+					</view>
+					<view class="ticket-text-row">
+						<p>购票时间：</p><h4>03-27 11:23</h4>
+					</view>
+				</view>
+			</view>
+			<view class="ticket-item-right overdue">
+				<h3>26.00</h3>
+				<p>票价</p>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -18,5 +67,88 @@
 </script>
 
 <style>
-
+	page{
+		background-color: #f7f7f7;
+	}
+</style>
+<style scoped lang="scss">
+.ticket-item{
+	background-color: #fff;
+	margin:20rpx;
+	border-radius: 10px;
+	display: flex;
+	justify-content: space-between;
+	
+	.ticket-text-row-item{
+		display: flex;
+		align-items: center;
+		margin-right: 10px;
+	}
+	.ticket-item-left{
+		padding: 20rpx;
+		.ticket-head{
+			display: flex;
+			align-items: center;
+			h3{
+				margin-left: 10rpx;
+			}
+		}
+		.ticket-text{
+			margin-top: 20rpx;
+			.ticket-text-row{
+				display: flex;
+				align-items: center;
+				margin-bottom: 10rpx;
+				&:last-child{
+					margin-bottom: 0;
+				}
+				span{
+					color:#007AFF
+				}
+				h4{
+					color:#999;
+					font-weight: normal;
+				}
+			}
+		}
+	}
+	.ticket-item-right{
+		width: 120px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		border-left: 1px dashed #eee;
+		position: relative;
+		&:before{
+			content: '';
+			position: absolute;
+			height: 30rpx;
+			width: 30rpx;
+			background-color: #f7f7f7;
+			border-radius: 50%;
+			left: -15rpx;
+			top:-15rpx;
+		}
+		&:after{
+			content: '';
+			position: absolute;
+			height: 30rpx;
+			width: 30rpx;
+			background-color: #f7f7f7;
+			border-radius: 50%;
+			left: -15rpx;
+			bottom:-15rpx;
+		}
+		h3{
+			color:#007AFF;
+			font-size:24px;
+		}
+		&.overdue{
+			background:url(/static/img/overdue.png) no-repeat center center;
+			background-size:75%;
+		}
+	}
+	
+}
 </style>

pages/my/user/feedback.vue

@@ -0,0 +1,69 @@
+<template>
+	<view>
+		<view class="form-title">
+			意见和问题
+		</view>
+		<view class="form-content">
+			<u-field v-model="mobile" placeholder="请详细描述您的意见和反馈" type="textarea" label-width="0"></u-field>
+		</view>
+		
+		<view class="form-upload">
+			<view class="form-title">
+				上传图片（选填，提供问题截图）
+			</view>
+			<u-upload :action="action" :file-list="fileList" ></u-upload>
+		</view>
+
+		<view class="form-phone">
+			<u-field v-model="mobile"	placeholder="选填,方便我们联系您" label="联系方式"></u-field>
+		</view>
+		<view class="upload-button">
+			<u-button type="primary" shape="circle">提交</u-button>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			// 演示地址，请勿直接使用
+			action: 'http://www.example.com/upload',
+			fileList: [
+				{
+					url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
+				}
+			]
+		}
+	}
+}
+</script>
+
+<style>
+	page{background-color: #f7f7f7;}
+</style>
+<style scoped lang="scss">
+	.form-content{
+		background-color: #fff;
+	}
+	.form-title{
+		margin: 10px 0;
+		padding-left: 15px;
+		color:#666;
+	}
+	.form-upload{
+		background-color: #fff;
+		padding: 10px;
+		margin-top: 10px;
+	}
+	.form-phone{
+		margin-top: 10px;
+		background-color: #fff;
+	}
+	.upload-button{
+		position: fixed;
+		left: 30rpx;
+		bottom:30rpx;
+		right: 30rpx;
+	}
+</style>

pages/my/user/resetpassword/change.vue

@@ -1,6 +1,20 @@
 <template>
 	<view>
-		
+		<view class="phone-form">
+			<view class="phone-form-row">
+				<view class="phone-form-input">
+					<u-input v-model="value" type="password"  />
+				</view>
+			</view>
+			<view class="phone-form-row">
+				<view class="phone-form-input">
+					<u-input v-model="value" type="password"  />
+				</view>
+			</view>
+			<view class="phone-button">
+				<u-button type="primary" shape="circle">重置密码</u-button>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -8,7 +22,6 @@
 	export default {
 		data() {
 			return {
-				
 			}
 		},
 		methods: {
@@ -17,6 +30,20 @@
 	}
 </script>
 
-<style>
-
+<style scoped lang="scss">
+	.phone-form-input{
+		padding: 10px;
+		border-bottom: 1px solid #eee;
+	}
+	.phone-form-row{
+		position: relative;
+		.phone-form-code{
+			position: absolute;
+			right: 0;
+			top:10px;
+		}
+	}
+	.phone-button{
+		margin: 10px;
+	}
 </style>

pages/my/user/resetpassword/verification.vue

@@ -1,6 +1,23 @@
 <template>
 	<view>
-		
+		<view class="phone-form">
+			<view class="phone-form-row">
+				<view class="phone-form-input">
+					<u-field v-model="mobile"	placeholder="请输入已绑定手机号" label-width="0"></u-field>
+				</view>
+			</view>
+			<view class="phone-form-row">
+				<view class="phone-form-input">
+					<u-field v-model="mobile"	placeholder="请输入验证码" label-width="0"></u-field>
+				</view>
+				<view class="phone-form-code">
+					<u-button shape="circle" size="mini">发送验证码</u-button>
+				</view>
+			</view>
+			<view class="phone-button">
+				<u-button type="primary" shape="circle">下一步</u-button>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -17,6 +34,16 @@
 	}
 </script>
 
-<style>
-
+<style scoped lang="scss">
+	.phone-form-row{
+		position: relative;
+		.phone-form-code{
+			position: absolute;
+			right: 0;
+			top:10px;
+		}
+	}
+	.phone-button{
+		margin: 10px;
+	}
 </style>

pages/my/user/updateUser.vue

@@ -1,22 +0,0 @@
-<template>
-	<view>
-		
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		}
-	}
-</script>
-
-<style>
-
-</style>

pages/my/user/updatephone/change.vue

@@ -1,6 +1,23 @@
 <template>
 	<view>
-		
+		<view class="phone-form">
+			<view class="phone-form-row">
+				<view class="phone-form-input">
+					<u-field v-model="mobile"	placeholder="请输入新的手机号" label-width="0"></u-field>
+				</view>
+			</view>
+			<view class="phone-form-row">
+				<view class="phone-form-input">
+					<u-field v-model="mobile"	placeholder="请输入验证码" label-width="0"></u-field>
+				</view>
+				<view class="phone-form-code">
+					<u-button shape="circle" size="mini">发送验证码</u-button>
+				</view>
+			</view>
+			<view class="phone-button">
+				<u-button type="primary" shape="circle">立即绑定</u-button>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -17,6 +34,16 @@
 	}
 </script>
 
-<style>
-
+<style scoped lang="scss">
+	.phone-form-row{
+		position: relative;
+		.phone-form-code{
+			position: absolute;
+			right: 0;
+			top:10px;
+		}
+	}
+	.phone-button{
+		margin: 10px;
+	}
 </style>

pages/my/user/updatephone/index.vue

@@ -1,6 +1,14 @@
 <template>
 	<view>
-		
+		<view class="updatephone">
+			<img src="/static/img/icon-phoneSafe.png" alt="">
+			<h4>已绑定手机号：155****1111</h4>
+			<p>您可使用绑定的手机号登录当前账号</p>
+			<view class="updatephone-btn">
+				<u-button shape="circle">更换绑定</u-button>
+				<p>为降低账号安全风险，每6个月仅能更换2次，</br>请谨慎修改</p>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -18,5 +26,29 @@
 </script>
 
 <style>
-
+	page{background-color: #f7f7f7;}
+</style>
+<style scoped lang="scss">
+	.updatephone{
+		text-align: center;
+		padding: 50px 15px;
+		img{
+			width: 160px;
+			margin-bottom: 20px;
+		}
+		h4{
+			font-size: 16px;
+			margin-bottom: 5px;
+		}
+		p{
+			color:#999;
+		}
+		.updatephone-btn{
+			margin-top: 20px;
+			p{
+				color: rgb(255, 58, 58);
+				margin-top: 10px;
+			}
+		}
+	}
 </style>

pages/my/user/updatephone/verification.vue

@@ -1,6 +1,23 @@
 <template>
 	<view>
-		
+		<view class="phone-form">
+			<view class="phone-form-row">
+				<view class="phone-form-input">
+					<u-field v-model="mobile"	placeholder="请输入已绑定手机号" label-width="0"></u-field>
+				</view>
+			</view>
+			<view class="phone-form-row">
+				<view class="phone-form-input">
+					<u-field v-model="mobile"	placeholder="请输入验证码" label-width="0"></u-field>
+				</view>
+				<view class="phone-form-code">
+					<u-button shape="circle" size="mini">发送验证码</u-button>
+				</view>
+			</view>
+			<view class="phone-button">
+				<u-button type="primary" shape="circle">下一步</u-button>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -17,6 +34,16 @@
 	}
 </script>
 
-<style>
-
+<style scoped lang="scss">
+	.phone-form-row{
+		position: relative;
+		.phone-form-code{
+			position: absolute;
+			right: 0;
+			top:10px;
+		}
+	}
+	.phone-button{
+		margin: 10px;
+	}
 </style>