1004749546@qq.com 4 years ago
parent
commit
74cff0e8f5

+ 8 - 2
pages.json

@@ -59,13 +59,19 @@
 			}
 		},
 		{
-			"path": "pages/historyOrder/index",		
+			"path": "pages/order/hisOrderDetail",		
 			"style": {
 				"navigationBarTitleText": "历史订单"
 			}
 		},
 		{
-			"path": "pages/historyOrder/hisOrderDetail",		
+			"path": "pages/order/hisOrderDetail",		
+			"style": {
+				"navigationBarTitleText": "订单详情"
+			}
+		},
+		{
+			"path": "pages/order/waitOrderDetail",		
 			"style": {
 				"navigationBarTitleText": "订单详情"
 			}

+ 1 - 1
pages/index/index.vue

@@ -43,7 +43,7 @@
 				<view class="cont-item-right flex_1 flex flex_column justify_between">
 					<view class="flex align_center justify_between">
 						<view class="flex_1 bold ellipsis-one">{{item.name}}</view>
-						<view class="do-btn">去处理</view>
+						<view @click="intoPage()" class="do-btn">去处理</view>
 					</view>
 					 <view class="greey-font flex align_center justify_between">
 						 <view class="dizhi ellipsis-one">{{item.addrDetail}}</view>

+ 56 - 14
pages/historyOrder/hisOrderDetail.vue → pages/order/hisOrderDetail.vue

@@ -58,8 +58,8 @@
 			</view>
 			<!-- 图片 -->
 			<view class="item-info">
-				<view class="item flex justify_between">
-					<text class="item-title">图片</text>
+				<view class="item-title flex justify_between">
+					<text>图片</text>
 				</view>
 				<view class="item flex">
 					<u-image class="img-icon" :src="item.icon?item.icon:'../../static/img/mddef.jpg'" border-radius="16" width="160" height="160"></u-image>
@@ -67,10 +67,20 @@
 			</view>
 			<!-- 回收品类明细 -->
 			<view class="item-info">
-				<view class="item flex justify_between">
-					<text class="item-title">回收品类明细</text>
+				<view class="item-title flex justify_between">
+					<text>回收品类明细</text>
 				</view>
 				<view class="item flex">
+					<view class="item-type active">
+						纸质类
+					</view>
+					<view class="item-type">
+						纸质类
+					</view>
+				</view>
+				<view class="item flex justify_between">
+					<text>黄纸1.24元/kg</text>
+					<text>5kg/6.20元</text>
 				</view>
 			</view>
 			<!-- 金额 -->
@@ -100,6 +110,16 @@
 					storeName: '昆仑润滑·车领主 (西咸新区-...',
 					location: '2.9km',
 					orderState:'WAIT_PAY',
+					type: [
+						{
+							name:'纸质类',
+							id: '1'
+						},
+						{
+							name:'衣物类',
+							id: '12'
+						}
+					],
 					orderGoodsList: [
 						{
 							goodsImages: '',
@@ -285,11 +305,11 @@
 			.info-main{
 				background: #ffffff;
 				padding: 10upx 32upx;
-				margin: 20upx 32upx 0;
+				margin: 20upx 32upx;
 				border-radius: 24upx;
 				box-shadow: 1px 1px 3px #EEEEEE;
 				font-size: 28upx;
-				background-image: url(../../static/home_bg_expressage.png);
+				background-image: url(../../static/order_bg_stor.png);
 				background-repeat: no-repeat;
 				.new-left{
 					width: 360rpx;
@@ -303,13 +323,18 @@
 					padding: 20rpx 0;
 					font-size: 32rpx;
 					color: #7C7D7E;
+					margin-top: 20rpx;
+					view:last-child{
+						font-size: 28rpx;
+						color: #4C4C4C;
+						margin-left: 6rpx;
+					}
 				}
 			}
 			// 状态
 			.order-status {
 				padding: 30upx 0;
 				text-align: center;
-
 				.status-title {
 					font-size: 42upx;
 					color: #191919;
@@ -334,13 +359,18 @@
 			// 订单信息列
 			.item-info{
 				border-radius: 24rpx;
-				margin: 20rpx 32rpx 0;
+				margin: 0rpx 32rpx 20rpx;
 				padding: 0rpx 32rpx;
 				background-color: #fff;
+				.item-title{
+					font-size: 32rpx;
+					color: #181818;
+					padding-top: 28rpx;
+				}
 				.item{
 					padding: 28rpx 0;
 					font-size: 32rpx;
-					// border-bottom: 1px solid #EBEBEB;
+					border-bottom: 1px solid #EBEBEB;
 					:first-child{
 						color: #7C7D7E;
 					}
@@ -350,24 +380,36 @@
 					&:last-child{
 						border-bottom: none;
 					}
-					.item-title{
-						color: #181818;
+					
+					.item-type{
+						width: 128rpx;
+						height: 56rpx;
+						border: 1px solid #979797;
+						opacity: 1;
+						border-radius: 28rpx;
+						font-size: 24rpx;
+						color: #999999;
+						text-align: center;
+						line-height: 56rpx;
+						margin-right: 20rpx;
+					}
+					.item-type.active{
+						background-color: #4F88F7;
+						border: none;
+						color: #fff;
 					}
 				}
-				
 			}
 			.price-text {
 				font-size: 20upx;
 				margin-left: 10upx;
 			}
-
 			.price-num {
 				font-size: 32upx;
 				color: red;
 				font-weight: 600;
 				margin-right: 6rpx;
 			}
-
 			.u-cell {
 				padding: 10rpx 32rpx;
 			}

+ 0 - 0
pages/historyOrder/index.vue → pages/order/historyOrder.vue


+ 450 - 0
pages/order/waitOrderDetail.vue

@@ -0,0 +1,450 @@
+<template>
+	<view class="order-pages">
+		<view class="order-info">
+			<!-- 订单状态 -->
+			<view class="order-status">
+				<view class="status-title flex align_center justify_center">
+					<view class="t-icon icon t-icon-icon_complete"></view>
+				{{orderInfo.orderStateDictValue}}
+				</view>
+				<view class="status-care">
+					预约时间:2021-05-10 15:10:05
+				</view>
+			</view>
+			<!-- 服务信息 -->
+			<view class="info-main">
+				<view class="flex align_center">
+					<view class="new-left">
+						陕西省西安市未央区华
+						帝金座602室
+					</view>
+				</view>
+				<view class="time flex align_center justify_between">
+					<text>百果园(贞观路店)</text>
+					<view class="flex align_center">
+						<view class="t-icon phone t-icon-icon_phone"></view>
+						<text>18092252287</text>
+					</view>
+				</view>
+			</view>
+			<!-- 预约信息 -->
+			<view class="item-info">
+				<view class="item flex justify_between">
+					<text>预约品类</text>
+					<text>纸品类,金属类</text>
+				</view>
+				<view class="item flex justify_between">
+					<text>预约重量</text>
+					<text>50-100kg</text>
+				</view>
+			</view>
+			<!-- 订单信息 -->
+			<view class="item-info">
+				<!-- <view class="item flex justify_between">
+					<text class="item-title">订单信息</text>
+				</view> -->
+				<view class="item flex justify_between">
+					<text>订单编号</text>
+					<text>202102022225</text>
+				</view>
+				<view class="item flex justify_between">
+					<text>下单时间</text>
+					<text>2021-04-19 15:33</text>
+				</view>
+				<view class="item flex justify_between">
+					<text>服务时间</text>
+					<text>2021-04-19 15:33</text>
+				</view>
+			</view>
+			<!-- 图片 -->
+			<view class="item-info">
+				<view class="item-title flex justify_between">
+					<text>图片</text>
+				</view>
+				<view class="item flex">
+					<u-image class="img-icon" :src="item.icon?item.icon:'../../static/img/mddef.jpg'" border-radius="16" width="160" height="160"></u-image>
+				</view>
+			</view>
+			<!-- 回收品类明细 -->
+			<view class="item-info">
+				<view class="item-title flex justify_between">
+					<text>回收品类明细</text>
+				</view>
+				<view class="item flex">
+					<view class="item-type active">
+						纸质类
+					</view>
+					<view class="item-type">
+						纸质类
+					</view>
+				</view>
+				<view class="item flex justify_between">
+					<text>黄纸1.24元/kg</text>
+					<text>5kg/6.20元</text>
+				</view>
+			</view>
+			<!-- 金额 -->
+			<view class="item-info">
+				<view class="item flex justify_between">
+					<text>应付金额</text>
+					<text>22.20 元</text>
+				</view>
+				<view class="item flex justify_between">
+					<text>支付方式</text>
+					<text>线下</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import moment from 'moment'
+	export default {
+		data() {
+			return {
+				orderInfo: {
+					id: '',
+					createDate: '2021-05-10 15:22',
+					orderStateDictValue: '已完成',
+					storeName: '昆仑润滑·车领主 (西咸新区-...',
+					location: '2.9km',
+					orderState:'WAIT_PAY',
+					type: [
+						{
+							name:'纸质类',
+							id: '1'
+						},
+						{
+							name:'衣物类',
+							id: '12'
+						}
+					],
+					orderGoodsList: [
+						{
+							goodsImages: '',
+							goodsName: '水蜡免擦洗车(轿车)',
+							payGold: 200,
+							buyQty: 2,
+							goodsNum: 5,
+						},
+						{
+							goodsImages: '',
+							goodsName: '水蜡免擦洗车(轿车)',
+							payGold: 200,
+							buyQty: 2,
+							goodsNum: 5,
+						},
+					],
+					payGold: 450
+				},
+				totalPrice: 0, // 支付合计
+				password: '', // 支付密码
+				showSetPswModal: false,  // 设置支付密码弹窗
+				showInputPsw: false, // 打开输入密码弹窗
+				showLeavePsw: false, // 打开确定放弃弹窗
+				orderId: '', // 订单id
+				leftTime: null,
+				payFinish: false , // 是否支付成功
+				focus: false
+			}
+		},
+		onLoad(options) {
+			// 监听设置密码是否成功
+			uni.$once('setPswSuccess', this.setPsw)
+			if (options.id) {
+				console.log(options.id)
+				this.orderId = options.id
+				// this.getOrderDetail()
+			}
+			// 开启分享
+			uni.showShareMenu({
+				withShareTicket: true,
+				menus: ['shareAppMessage', 'shareTimeline']
+			})
+		},
+		computed: {
+			
+		},
+		methods: {
+			// 支付剩余时间
+			leftTimeFun() {
+				const date1 = moment().toArray()  //  当前时间 数组形式
+				const date2 = moment(this.orderInfo.orderTime).toDate()  //  下单时间  日期格式
+				const date3 = moment(date2).toArray()  //  下单时间  数组形式
+				const date4 = moment(date1).diff(moment(date3), 'seconds')//计算相差的秒数
+				const tt = 30 - Math.ceil(date4/60)  //向上取整
+				if (tt > 0) {
+					this.leftTime = tt
+				} else {
+					// this.getOrderDetail()
+					this.leftTime = '00'
+				}
+			},
+			// 获取订单详情
+			getOrderDetail() {
+				orderDetail({
+					id: this.orderId
+				}).then(res => {
+					console.log(res,'rrrrrrrr')
+					if (res.status == 200) {
+						this.orderInfo = res.data
+						if(this.orderInfo.orderState=='WAIT_PAY') {
+							this.leftTimeFun()
+						}
+					} 
+				})
+			},
+			// 跳转到设置支付密码页
+			toSetPwd () {
+				uni.navigateTo({
+					url:"/pages/userCenter/userInfo/smsVerification"
+				})
+			},
+			// 设置密码成功, 打开输入密码弹窗
+			setPsw (e) {
+				if (e.success) {
+					this.showInputPsw = true
+					setTimeout(()=>{
+						this.focus = true
+					},300)
+				}
+			},
+			// 关闭输入密码弹窗
+			closePayModal(){
+				if(!this.payFinish) {
+					this.showLeavePsw = true
+				} 
+			},
+			//确认放弃
+			canclePay() {
+				this.password = ''
+				this.showLeavePsw = false
+				this.showInputPsw = false
+				this.focus = false
+			},
+			// 继续支付
+			payAgain () {
+				this.focus = false
+				this.showLeavePsw = false
+				this.showInputPsw = true
+				setTimeout(()=>{
+					this.focus = true
+				},300)
+			},
+			// 支付 判断用户是否设置过支付密码
+			toPay() {
+				this.totalPrice = this.orderInfo.originalGold
+				this.payFinish = false
+				// 判断用户是否设置过支付密码
+				existPayPwd().then(res=>{
+					console.log(res,'rrrrrr')
+					if(res.status == 200) {
+						// 设置过支付密码,输入密码
+						if(res.data) {
+							this.showInputPsw = true
+							setTimeout(()=>{
+								this.focus = true
+							},300)
+						} else {
+							// 没设置过支付密码,提示设置密码
+							 this.showSetPswModal = true
+						}
+					} 
+				})
+			},
+			// 支付
+			toPayOrder() {
+				if (this.password === '') {
+					uni.showToast({
+						title: '请先输入支付密码',
+						icon: 'none'
+					})
+					return false
+				}
+				let id = this.orderInfo.id
+				let params = {
+					payPwd: this.password,
+					id: id
+				}
+				signPay(params).then(res=>{
+					this.btnLoading = false
+					if(res.status == 200) {
+						// 关闭弹窗 刷新页面
+						this.payFinish = true
+						this.showInputPsw = false
+						this.getOrderDetail()
+						// 刷新订单列表
+						uni.$emit('refresh')
+						// 跳转到支付完成界面
+						uni.navigateTo({
+							url:"/pagesA/toOrder/payFinish?id=" + id
+						})
+					} else{
+						this.password = ''
+					}
+				})
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+
+	.order-pages {
+		width: 100%;
+		height: 100vh;
+		display: flex;
+		flex-direction: column;
+		background-color: #F5F5F5;
+		.order-info {
+			width: 100%;
+			flex: 1;
+			overflow-y: scroll;
+			// 订单内容
+			.info-main{
+				background: #ffffff;
+				padding: 10upx 32upx;
+				margin: 20upx 32upx;
+				border-radius: 24upx;
+				box-shadow: 1px 1px 3px #EEEEEE;
+				font-size: 28upx;
+				background-image: url(../../static/order_bg_stor.png);
+				background-repeat: no-repeat;
+				.new-left{
+					width: 360rpx;
+					font-size: 36rpx;
+					color: #191919;
+					font-weight: 600;
+					line-height: 44rpx;
+					margin-top: 30rpx;
+				}
+				.time{
+					padding: 20rpx 0;
+					font-size: 32rpx;
+					color: #7C7D7E;
+					margin-top: 20rpx;
+					view:last-child{
+						font-size: 28rpx;
+						color: #4C4C4C;
+						margin-left: 6rpx;
+					}
+				}
+			}
+			// 状态
+			.order-status {
+				padding: 30upx 0;
+				text-align: center;
+				.status-title {
+					font-size: 42upx;
+					color: #191919;
+					.icon{
+						width: 48rpx;
+						height: 48rpx;
+						margin-right: 10rpx;
+					}
+				}
+
+				.status-care {
+					font-size: 28upx;
+					margin-top: 10upx;
+					color: #191919;
+
+					>text {
+						color: red;
+					}
+				}
+			}
+
+			// 订单信息列
+			.item-info{
+				border-radius: 24rpx;
+				margin: 0rpx 32rpx 20rpx;
+				padding: 0rpx 32rpx;
+				background-color: #fff;
+				.item-title{
+					font-size: 32rpx;
+					color: #181818;
+					padding-top: 28rpx;
+				}
+				.item{
+					padding: 28rpx 0;
+					font-size: 32rpx;
+					border-bottom: 1px solid #EBEBEB;
+					:first-child{
+						color: #7C7D7E;
+					}
+					:last-child-child{
+						color: #222222;
+					}
+					&:last-child{
+						border-bottom: none;
+					}
+					
+					.item-type{
+						width: 128rpx;
+						height: 56rpx;
+						border: 1px solid #979797;
+						opacity: 1;
+						border-radius: 28rpx;
+						font-size: 24rpx;
+						color: #999999;
+						text-align: center;
+						line-height: 56rpx;
+						margin-right: 20rpx;
+					}
+					.item-type.active{
+						background-color: #4F88F7;
+						border: none;
+						color: #fff;
+					}
+				}
+			}
+			.price-text {
+				font-size: 20upx;
+				margin-left: 10upx;
+			}
+			.price-num {
+				font-size: 32upx;
+				color: red;
+				font-weight: 600;
+				margin-right: 6rpx;
+			}
+			.u-cell {
+				padding: 10rpx 32rpx;
+			}
+		}
+		.footer {
+			padding: 20rpx 32rpx;
+			display: flex;
+			background-color: #fff;
+			.btn{
+				flex: 1;
+				height: 84rpx;
+				font-size: 32rpx;
+				text-align: center;
+				line-height: 84rpx;
+			}
+			.btnCancleStyle{
+				color: #666666;
+				background: #E5E5E5;
+				border-radius: 60rpx 0px 0px 60rpx;
+			}
+			.btnPayStyle{
+				color: #191919;
+				background: #FFD100;
+				border-radius: 0rpx 60px 60px 0rpx;
+			}
+			.useBtn{
+				width: 100%;
+				height: 84rpx;
+				font-size: 32rpx;
+				text-align: center;
+				line-height: 84rpx;
+				color: #191919;
+				background: #FFD100;
+				border-radius: 60rpx
+			}
+		}
+	}
+</style>

BIN
static/order_bg_stor.png