Browse Source

质保单详情和查询列表

lilei 1 year ago
parent
commit
7049bf09b9

+ 16 - 0
pages.json

@@ -395,6 +395,22 @@
 					"navigationBarTitleText" : "创建质保单",
 					"enablePullDownRefresh" : false
 				}
+			},
+			{
+				"path" : "qualityPolicy/resultOrder",
+				"style" : 
+				{
+					"navigationBarTitleText" : "质保单详情",
+					"enablePullDownRefresh" : false
+				}
+			},
+			{
+				"path" : "qualityPolicy/orderDetail",
+				"style" : 
+				{
+					"navigationBarTitleText" : "质保单详情",
+					"enablePullDownRefresh" : false
+				}
 			}
         ]
 	}],

+ 5 - 2
pagesA/qualityPolicy/creatCarInfo.vue

@@ -77,7 +77,9 @@
 		},
 		methods: {
 			toBack(){
-				uni.navigateBack()
+				uni.redirectTo({
+					url: "/pagesA/qualityPolicy/creatOrder"
+				})
 			},
 			// 按键被点击(点击退格键不会触发此事件)
 			valChange(val) {
@@ -134,7 +136,7 @@
 				}
 				
 				this.$store.state.vuex_uuidTempData.carInfo = this.form
-				uni.navigateTo({
+				uni.redirectTo({
 					url: "/pagesA/qualityPolicy/creatCustomInfo"
 				})
 			}
@@ -152,6 +154,7 @@
 		background: #fff;
 		text-indent: 0;
 		line-height: normal;
+		font-size: 28rpx;
 		> view{
 			justify-content: space-between;
 			border-bottom: 1px solid #eee;

+ 9 - 5
pagesA/qualityPolicy/creatCustomInfo.vue

@@ -36,8 +36,8 @@
 				<view class="btns" @click="checkMobile()" >{{codeText}}</view>
 			</view>
 			<view class="forms-foot flex align_center">
-				<u-checkbox v-model="checkedXy"></u-checkbox>
-				<text class="links">您已知晓《XXX轮胎质保法律条款》</text>
+				<u-checkbox v-model="checkedXy">您已知晓</u-checkbox>
+				<text class="links">《XXX轮胎质保法律条款》</text>
 			</view>
 		</view>
 		 
@@ -93,7 +93,9 @@
 		},
 		methods: {
 			toBack(){
-				uni.navigateBack()
+				uni.redirectTo({
+					url: "/pagesA/qualityPolicy/creatCarInfo"
+				})
 			},
 			// 获取验证码
 			getCode() {
@@ -211,7 +213,7 @@
 					return
 				}
 				this.$store.state.vuex_uuidTempData.customerInfo = this.form
-				uni.navigateTo({
+				uni.redirectTo({
 					url: "/pagesA/qualityPolicy/resultOrder"
 				})
 			}
@@ -243,14 +245,16 @@
 }
 .forms{
 	background: #fff;
+	margin-bottom: 0.5rem;
 	.forms-tits{
 		font-weight: bold;
 		color: #333;
 	}
 	.forms-foot{
 		padding-left: 1.5rem;
+		color: #999;
 		.links{
-			color: #999;
+			color: #55aaff;
 		}
 		/deep/.u-checkbox__label{
 			margin-right: 0;

+ 3 - 2
pagesA/qualityPolicy/creatOrder.vue

@@ -67,7 +67,8 @@
 				if(this.uuidCode){
 					this.uuid.push({
 						code: this.uuidCode,
-						name: '箭冠轮胎雪胎RT-8000'
+						name: '箭冠轮胎雪胎RT-8000',
+						state: ['inhand','outof'][Math.random() < 0.5 ? 0 : 1]
 					})
 					this.uuidCode = ''
 				}else{
@@ -85,7 +86,7 @@
 			saveForm(){
 				if(this.uuid.length){
 					this.$store.state.vuex_uuidTempData = {uuid:this.uuid}
-					uni.navigateTo({
+					uni.redirectTo({
 						url: "/pagesA/qualityPolicy/creatCarInfo"
 					})
 				}else{

+ 171 - 0
pagesA/qualityPolicy/orderDetail.vue

@@ -0,0 +1,171 @@
+<template>
+	<view class="pages flex flex_column">
+		<u-read-more toggle close-text="展开全部">
+			<view class="uuid-list">
+				<view v-for="item in detail.uuid" :key="item.code">
+					<view class="flex align_center">
+						<view class="uuid-info">
+							<view>轮胎名称:{{item.name}}</view>
+							<view class="uuid">轮胎唯一码:{{item.code}}</view>
+							<view class="uuid">质保时间:2023-10-23至2026-10-23</view>
+						</view>
+						<view class="uuid-img">
+							<image style="width: 100%;height: 80px;background: #eaeaea;" :src="item.img"></image>
+						</view>
+					</view>
+					<view class="state" :class="item.state"></view>
+				</view>
+			</view>
+		</u-read-more>
+		<view class="forms">
+			<view class="forms-tits">门店信息</view>
+			<view class="flex align_center">
+				<view class="labes">门店名称:</view>
+				<view class="inputs">赢信汽车贸易有限公司</view>
+			</view>
+			<view class="flex align_center">
+				<view class="labes">汽配经销商:</view>
+				<view class="inputs">箭冠汽配东莞寮步店</view>
+			</view>
+			<view class="flex align_center">
+				<view class="labes">姓名:</view>
+				<view class="inputs">高山</view>
+			</view>
+			<view class="flex align_center">
+				<view class="labes">电话:</view>
+				<view class="inputs">15349286715</view>
+			</view>
+		</view>
+		<view class="forms">
+			<view class="forms-tits">车辆信息</view>
+			<view class="flex align_center">
+				<view class="labes">车辆品牌:</view>
+				<view class="inputs">大众</view>
+			</view>
+			<view class="flex align_center">
+				<view class="labes">车型:</view>
+				<view class="inputs">速腾1.6L</view>
+			</view>
+			<view class="flex align_center">
+				<view class="labes">里程数:</view>
+				<view class="inputs">1600KM</view>
+			</view>
+			<view class="flex align_center">
+				<view class="labes">车牌号:</view>
+				<view class="inputs">陕A53LL9</view>
+			</view>
+			<view class="flex align_center">
+				<view class="labes">客户姓名:</view>
+				<view class="inputs">张生</view>
+			</view>
+			<view class="flex align_center">
+				<view class="labes">手机号码:</view>
+				<view class="inputs">15349286715</view>
+			</view>
+		</view>
+		 
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				detail: null
+			}
+		},
+		onLoad() {
+			this.detail = this.$store.state.vuex_uuidTempData
+		},
+		methods: {
+			  
+		}
+	}
+</script>
+
+<style lang="less">
+.pages{
+	height: 100vh;
+	background: #f8f8f8;
+	padding-bottom: 6rem;
+	overflow: auto;
+	.uuid-list{
+		background: #fff;
+		text-indent: 0;
+		line-height: normal;
+		font-size: 28rpx;
+		> view{
+			justify-content: space-between;
+			border-bottom: 1px solid #eee;
+			padding: 0.6rem 1rem;
+			position: relative;
+		}
+		.state{
+			background-repeat: no-repeat;
+			background-size: 100%;
+			background-position: center center;
+			position: absolute;
+			width: 5rem;
+			height: 5rem;
+			z-index: 1000;
+			bottom: 0.5rem;
+			right: 1rem;
+		}
+		.inhand{
+			background-image: url(/pagesA/static/inhand.png);
+		}
+		.outof{
+			background-image: url(/pagesA/static/outof.png);
+		}
+		color: #666;
+		.uuid-info{
+			flex-grow: 1;
+			padding-right: 0.5rem;
+			line-height: 1.5rem;
+		}
+		.uuid{
+			color: #333;
+		}
+		.uuid-img{
+			width: 7rem;
+		}
+	}
+	.buttons{
+		padding: 1rem 2rem 2rem;
+		position: fixed;
+		width: 100%;
+		bottom: 0;
+		left: 0;
+		background: #fff;
+		z-index: 10000;
+		border-top: 1px solid #eee;
+		justify-content: space-around;
+		/deep/ .u-btn{
+			width: 7rem;
+		}
+	}
+}
+.forms{
+	background: #fff;
+	margin-top: 0.5rem;
+	.forms-tits{
+		font-weight: bold;
+		color: #333;
+	}
+	> view{
+		border-bottom: 1px solid #eee;
+		padding: 0.6rem 1rem;
+	}
+	.labes{
+		width: 6rem;
+		padding-right: 0.6rem;
+		text{
+			color: red;
+			margin-right: 5px;
+		}
+	}
+	.inputs{
+		flex-grow: 1;
+	}
+}
+</style>

+ 72 - 0
pagesA/qualityPolicy/resultOrder.vue

@@ -0,0 +1,72 @@
+<template>
+	<view class="pages">
+		<view class="success-box">
+			<view class="success-tit">质保单领取成功</view>
+			<view class="success-code">
+				<image></image>
+			</view>
+			<view class="success-tips">车主可用微信扫此二维码查看质保单详情</view>
+		</view>
+		<view class="buttons">
+			<u-button type="primary" @click="saveForm">保存二维码并查看质保信息</u-button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				detail: null
+			}
+		},
+		onLoad() {
+			this.detail = this.$store.state.vuex_uuidTempData
+		},
+		methods: {
+			// 保存二维码到相册并打开详情页面
+			saveForm(){
+				uni.redirectTo({
+					url: "/pagesA/qualityPolicy/orderDetail"
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+.pages{
+	height: 100vh;
+	background: #fff;
+	.success-box{
+		text-align: center;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		margin-top: 10vh;
+		.success-tit{
+			font-weight: bold;
+			color: #4CAF50;
+			font-size: 1rem;
+		}
+		.success-code{
+			padding: 2rem;
+			image{
+				width: 10rem;
+				height: 10rem;
+			}
+		}
+		.success-tips{
+			color: #fd920e;
+		}
+	}
+	.buttons{
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		padding: 1rem 3rem 3rem;
+		background: #fff;
+		width: 100%;
+	}
+}
+</style>

+ 80 - 6
pagesA/qualityPolicy/searchOrder.vue

@@ -1,6 +1,24 @@
 <template>
-	<view>
-		
+	<view class="pages flex flex_column">
+		<view class="search-box">
+			<u-search placeholder="请输入轮胎唯一码/手机号码" v-model="keyword"></u-search>
+		</view>
+		<view class="uuid-list">
+			<view v-for="item in detail.uuid" :key="item.code" @click="toDetail(item)">
+				<view class="flex align_center">
+					<view class="uuid-info">
+						<view>轮胎名称:{{item.name}}</view>
+						<view class="uuid">轮胎唯一码:{{item.code}}</view>
+						<view class="uuid">质保时间:2023-10-23至2026-10-23</view>
+						<view class="uuid">手机号码:15349286715</view>
+					</view>
+					<view class="uuid-img">
+						<image style="width: 100%;height: 80px;background: #eaeaea;" :src="item.img"></image>
+					</view>
+				</view>
+				<view class="state" :class="item.state"></view>
+			</view>
+		</view>  
 	</view>
 </template>
 
@@ -8,15 +26,71 @@
 	export default {
 		data() {
 			return {
-				
+				keyword: '',
+				detail: null
 			}
 		},
+		onLoad() {
+			this.detail = this.$store.state.vuex_uuidTempData
+		},
 		methods: {
-			
+			toDetail(item){
+				uni.navigateTo({
+					url: "/pagesA/qualityPolicy/orderDetail?id="+item.code
+				})
+			}
 		}
 	}
 </script>
 
-<style>
-
+<style lang="less">
+.pages{
+	height: 100vh;
+	background: #f8f8f8;
+	overflow: auto;
+	.search-box{
+		padding: 1rem;
+		background: #fff;
+	}
+	.uuid-list{
+		flex-grow: 1;
+		> view{
+			justify-content: space-between;
+			border-bottom: 1px solid #eee;
+			padding: 0.6rem 1rem;
+			position: relative;
+			background: #fff;
+			margin-top: 0.5rem;
+		}
+		.state{
+			background-repeat: no-repeat;
+			background-size: 100%;
+			background-position: center center;
+			position: absolute;
+			width: 5rem;
+			height: 5rem;
+			z-index: 1000;
+			bottom: 0.5rem;
+			right: 1rem;
+		}
+		.inhand{
+			background-image: url(/pagesA/static/inhand.png);
+		}
+		.outof{
+			background-image: url(/pagesA/static/outof.png);
+		}
+		color: #666;
+		.uuid-info{
+			flex-grow: 1;
+			padding-right: 0.5rem;
+			line-height: 1.5rem;
+		}
+		.uuid{
+			color: #333;
+		}
+		.uuid-img{
+			width: 7rem;
+		}
+	}
+}
 </style>

BIN
pagesA/static/inhand.png


BIN
pagesA/static/outof.png