浏览代码

Signed-off-by: 1004749546@qq.com <1004749546@qq.com>
提交下单

1004749546@qq.com 4 年之前
父节点
当前提交
41c6e5f989
共有 5 个文件被更改,包括 558 次插入18 次删除
  1. 243 0
      components/uni-steps/uni-steps.vue
  2. 5 0
      pages.json
  3. 303 0
      pages/getOrder/getOrder.vue
  4. 7 18
      pages/store/StoreList.vue
  5. 二进制
      static/img/step-one.png

+ 243 - 0
components/uni-steps/uni-steps.vue

@@ -0,0 +1,243 @@
+<template>
+	<view class="uni-steps">
+		<view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']">
+			<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
+				<view v-for="(item,index) in options" :key="index" :class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
+					<text :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
+					<text :style="{color:index<=active?activeColor:deactiveColor}" :class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
+				</view>
+			</view>
+			<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
+				<view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']" v-for="(item,index) in options"
+				 :key="index">
+					<view :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']"
+					 :style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}"></view>
+					<view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']" v-if="index === active">
+						<uni-icons :color="activeColor" type="checkbox-filled" size="14"></uni-icons>
+					</view>
+					<view :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']" v-else :style="{backgroundColor:index<active?activeColor:deactiveColor}"></view>
+					<view :class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
+					 :style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}"></view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import uniIcons from '../uni-icons/uni-icons.vue'
+	export default {
+		name: 'UniSteps',
+		components: {
+			uniIcons
+		},
+		props: {
+			direction: {
+				// 排列方向 row column
+				type: String,
+				default: 'row'
+			},
+			activeColor: {
+				// 激活状态颜色
+				type: String,
+				default: '#1aad19'
+			},
+			deactiveColor: {
+				// 未激活状态颜色
+				type: String,
+				default: '#999999'
+			},
+			active: {
+				// 当前步骤
+				type: Number,
+				default: 0
+			},
+			options: {
+				type: Array,
+				default () {
+					return []
+				}
+			} // 数据
+		},
+		data() {
+			return {}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-steps {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		width: 100%;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		flex: 1;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uni-steps__row {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uni-steps__column {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row-reverse;
+	}
+
+	.uni-steps__row-text-container {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-steps__column-text-container {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		flex: 1;
+	}
+
+	.uni-steps__row-text {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: column;
+	}
+
+	.uni-steps__column-text {
+		padding: 6px 0px;
+		border-bottom-style: solid;
+		border-bottom-width: 1px;
+		border-bottom-color: $uni-border-color;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uni-steps__row-title {
+		font-size: $uni-font-size-base;
+		line-height: 16px;
+		text-align: center;
+	}
+
+	.uni-steps__column-title {
+		font-size: $uni-font-size-base;
+		text-align: left;
+		line-height: 18px;
+	}
+
+	.uni-steps__row-desc {
+		font-size: 12px;
+		line-height: 14px;
+		text-align: center;
+	}
+
+	.uni-steps__column-desc {
+		font-size: $uni-font-size-sm;
+		text-align: left;
+		line-height: 18px;
+	}
+
+	.uni-steps__row-container {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-steps__column-container {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		width: 30px;
+		flex-direction: column;
+	}
+
+	.uni-steps__row-line-item {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		flex-direction: row;
+		flex: 1;
+		height: 14px;
+		line-height: 14px;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.uni-steps__column-line-item {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		flex: 1;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.uni-steps__row-line {
+		flex: 1;
+		height: 1px;
+		background-color: $uni-text-color-grey;
+	}
+
+	.uni-steps__column-line {
+		width: 1px;
+		background-color: $uni-text-color-grey;
+	}
+
+	.uni-steps__row-line--after {
+		transform: translateX(1px);
+	}
+
+	.uni-steps__column-line--after {
+		flex: 1;
+		transform: translate(0px, 1px);
+	}
+
+	.uni-steps__row-line--before {
+		transform: translateX(-1px);
+	}
+
+	.uni-steps__column-line--before {
+		height: 6px;
+		transform: translate(0px, -1px);
+	}
+
+	.uni-steps__row-circle {
+		width: 5px;
+		height: 5px;
+		border-radius: 100px;
+		background-color: $uni-text-color-grey;
+		margin: 0px 3px;
+	}
+
+	.uni-steps__column-circle {
+		width: 5px;
+		height: 5px;
+		border-radius: 100px;
+		background-color: $uni-text-color-grey;
+		margin: 4px 0px 5px 0px;
+	}
+
+	.uni-steps__row-check {
+		margin: 0px 6px;
+	}
+
+	.uni-steps__column-check {
+		height: 14px;
+		line-height: 14px;
+		margin: 2px 0px;
+	}
+</style>

+ 5 - 0
pages.json

@@ -46,6 +46,11 @@
 			"style": {
 				"navigationBarTitleText": "洗车服务中"
 			}
+		}, {
+			"path": "pages/getOrder/getOrder",
+			"style": {
+				"navigationBarTitleText": "准备洗车"
+			}
 		}
 	],
 	"globalStyle": {

+ 303 - 0
pages/getOrder/getOrder.vue

@@ -0,0 +1,303 @@
+<template>
+	<view class="content">
+		<view class="step">
+			<uni-steps :options="[{title: '停车'}, {title: '检查'}, {title: '下单'}]" :active="stepIndex" active-color="rgb(255,0,0)"></uni-steps>
+		</view>
+		<view class="step-content">
+			<!-- 停车 -->
+			<view v-if="stepIndex===0" class="step-item step-one">
+				<text>请确认车辆是否停到指定位置</text>
+				<image src="../../static/img/step-one.png" mode="aspectFit"></image>
+				
+			</view>
+			<!-- 检查 -->
+			<view v-if="stepIndex===1" class="step-item step-two">
+				<view class="item top">
+					<text>-请完成以下操作-</text>
+					<image src="../../static/img/cztis.png" mode="aspectFit"></image>
+					<view class="care">
+						注意:洗车过程中禁止移动车辆和上下车
+					</view>
+				</view>
+				<view class="item bottom">
+					<text>超高加装件不能清洗</text>
+					<image src="../../static/img/zyts.png" mode="aspectFit"></image>
+				</view>
+			</view>
+			<!-- 下单 -->
+			<view v-if="stepIndex===2" class="step-item step-three">
+				<view class="choose">
+					<view class="title">
+						请选择服务模式
+					</view>
+					<view class="list">
+						<view :class="['item', serverIndex==index ?'avtive':'']" @click="chooseItem(index)" v-for="(item,index) in itemList" :key="index">
+							<text>{{item.name}}</text>
+							<text class="price">{{item.price}}</text>
+						</view>
+					</view>
+				</view>
+				<view class="choose-content">
+					<view class="choose-item">
+						<view class="item">
+							<text>优惠卷</text>
+							<view class="right">
+								<u-icon name="gift" color="rgb(255,0,0)" size="32"></u-icon>
+								<text class="coopon">9.8元洗车券(¥-9.8)</text>
+								<u-icon name="arrow-right" color="rgb(255,0,0)" size="32"></u-icon>
+							</view>
+						</view>
+						<view class="item phone">
+							<text>手机号码</text>
+							<view class="right">
+								<text >18792703003</text>
+							</view>
+						</view>
+					</view>
+					<view class="read">
+						<u-radio-group v-model="isRead">
+							<u-radio shape="square" :disabled="isRead!='read'" name="read" active-color="red" icon-size="28" label-size="28">
+								点击阅读并同意
+								<text>无人洗车</text>
+								<text>《注意事项及服务协议》</text>
+							</u-radio>
+						</u-radio-group>
+					</view>
+				</view>
+			</view>
+			<view class="step-footer">
+				<button @click="nextStep" v-if="stepIndex!=2" type="warn">下一步</button>
+				<view v-else class="pay">
+					<text>合计:</text>
+					<text class="amount">¥10:00</text>
+					<view class="">
+						<button type="warn">去付款</button>
+					</view>
+				</view>
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	import uniSteps from '@/components/uni-steps/uni-steps.vue'
+	export default {
+		components: {
+			uniSteps
+		},
+		data() {
+			return {
+				stepIndex: 0, // 当前步奏下标
+				serverIndex: 0, // 选择服务下标
+				itemList: [ // 服务列表
+					{
+						id: 1,
+						name: '极速快洗',
+						price: 10
+					},
+					{
+						id: 12,
+						name: '精致洗',
+						price: 20
+					},
+					{
+						id: 13,
+						name: '打蜡洗',
+						price: 30
+					}
+				],
+				isRead: '', // 是否同意协议
+			}
+		},
+		onLoad(option) {
+			
+		},
+		methods: {
+			// 选择服务项目
+			chooseItem(index) {
+				this.serverIndex = index
+			},
+			// 下一步
+			nextStep() {
+				this.stepIndex = this.stepIndex===0 ? 1 : 2
+			}
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page{
+		height: 100%;
+	}
+	.content{
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		.step{
+			padding: 40rpx 0;
+		}
+		.step-content{
+			flex: 1;
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			.step-item{
+				width: 100%;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				flex: 1;
+			}
+			.step-one{
+				text{
+					color: #999;
+					margin-top: 40rpx;
+					margin-bottom: 15%;
+				}
+				image{
+					width: 40%;
+					height: 60%;
+				}
+				
+			}
+			.step-two{
+				background-color: #F8F8F8;
+				.item{
+					background-color: #fff;
+					width: 80%;
+					height: 40%;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					margin-top: 20rpx;
+					padding-top: 20rpx;
+					image{
+						width: 80%;
+						flex: 1;
+					}
+				}
+				.top{
+					text{
+						color: #df928e;
+						font-size: 24rpx;
+						margin-bottom: 20rpx;
+					}
+					.care{
+						padding: 10rpx 20rpx;
+						background-color: #ff805b;
+						border-radius: 30rpx;
+						color: #fff;
+						font-size: 24rpx;
+						margin-bottom: 10rpx;
+					}
+				}
+				.bottom{
+					text{
+						font-size: 24rpx;
+						color: #333;
+					}
+				}
+			}
+			.step-three{
+				.choose{
+					width: 100%;
+					height: auto;
+					padding-bottom: 80rpx;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					border-bottom: 1px solid #eee;
+					.title{
+						color: #666;
+					}
+					.list{
+						width: 100%;
+						display: flex;
+						justify-content: space-around;
+						.item{
+							width: 28%;
+							height: 180rpx;
+							display: flex;
+							flex-direction: column;
+							align-items: center;
+							justify-content: center;
+							border: 1px solid #eee;
+							border-radius: 30rpx;
+							margin-top: 30rpx;
+							color: #999;
+						}
+						.avtive{
+							color: #333;
+							border-color: rgb(255,0,0);
+							.price{
+								color: rgb(255,0,0);
+							}
+						}
+					}
+					
+				}
+				.choose-content{
+					flex: 1;
+					width: 100%;
+					.choose-item{
+						padding-left: 20rpx;
+						width: 100%;
+					}
+					.item{
+						width: 100%;
+						height: 100rpx;
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						border-bottom: 1px solid #eee;
+						.coopon{
+							color: rgb(255,0,0);
+						}
+					}
+					.phone{
+						border-bottom: none;
+					}
+					.read{
+						width: 100%;
+						border-top: 1px solid #eee;
+						padding-top: 40rpx;
+						display: flex;
+						justify-content: center;
+						text{
+							color: #999;
+						}
+						text:last-child{
+							color: #ff9ba5;
+						}
+					}
+				}
+			}
+			.step-footer{
+				width: 100%;
+				height: 100rpx;
+				background-color: #fff;
+				.pay{
+					padding-top: 20rpx;
+					width: 100%;
+					height: 100%;
+					border-top: 1px solid #eee;
+					display: flex;
+					align-items: center;
+					justify-content: flex-end;
+					.amount{
+						color: rgb(255,0,0);
+						font-size: 36rpx;
+						margin-right: 40rpx;
+					}
+					button{
+						width: 200rpx;
+					}
+				}
+			}
+		}
+		
+	}
+</style>

+ 7 - 18
pages/store/StoreList.vue

@@ -22,7 +22,7 @@
 					</view>
 				</view>
 				<view class="list-right">
-					<view :class="item.statusClass">{{getStoreStatus(item)}}</view>
+					<image :src="getStoreStatus(item)" mode="aspectFit"></image>
 				</view>
 			</view>
 		</scroll-view>
@@ -147,16 +147,13 @@
 			getStoreStatus(item) {
 				switch (item.status) {
 					case 0:
-						item.statusClass = 'store-off'
-						return '暂停营业'
+						return '../../static/img/ygb.png'
 						break;
 					case 1:
-						item.statusClass = 'store-on'
-						return '正常营业'
+						return '../../static/img/yyz.png'
 						break;
 					case 2:
-						item.statusClass = 'store-waite'
-						return '即将开业'
+						return '../../static/img/dky.png'
 						break;
 					default:
 						break;
@@ -234,17 +231,9 @@
 					display: flex;
 					justify-content: center;
 					align-items: center;
-
-					.store-off {
-						color: #999;
-					}
-
-					.store-on {
-						color: #51cc51;
-					}
-
-					.store-waite {
-						color: #ffec19;
+					image {
+						width: 100%;
+						height: 100%;
 					}
 				}
 			}

二进制
static/img/step-one.png