提交订单 ui 修改

src/pagesHome/marketer/settleOrder - 副本.vue

@@ -0,0 +1,555 @@
+<template>
+	<view class="container">
+
+		<view class="content-box">
+			<!-- <view class="message-box">
+				<view class="message-item">
+					<view class="item-left"> 订购人电话 </view>
+					<view class="item-right">
+						<u--input border='none' type='number' maxlength='11' fontSize='14' placeholder="请输入您的订购电话"
+							v-model="phoneNumber"></u--input>
+					</view>
+				</view>
+				<u-line margin='20rpx 0'></u-line>
+				<view class="message-item">
+					<view class="item-left"> 备注 </view>
+					<view class="item-right">
+						<u--textarea v-model="goodsRemark" placeholder="请输入备注内容" autoHeight></u--textarea>
+					</view>
+				</view>
+			</view> -->
+
+
+			<view class="message-box">
+				<view class="message-item">
+					<view class="item-left"> 支付方式 </view>
+					<view class="item-right flex-end">
+						<span>在线支付</span>
+						<image class="right-img" src="@/static/order/ic_order_weixin.png"></image>
+					</view>
+				</view>
+			</view>
+
+			<view class="message-box">
+				<view class="goods-title"> {{ init_list.merchantDTO.name }} </view>
+				<u-line margin='20rpx 0'></u-line>
+				<view class="goods-item" v-for="(item,index) of init_list.cartItems" :key='item.goodsId'>
+					<view class="item-left">
+						<image class="left-img" src="@/static/QR57a.jpg"></image>
+						<view class="left-text">
+							<view class="text-name">{{ item.goodsName }}</view>
+							<view class="text-number">×{{ item.quantity }}</view>
+							<view class="price-box">
+								<p class="price red-color"> <span style="font-size: 24rpx;">￥</span>{{ item.price }}</p>
+								<span class="false-price">￥{{ item.originalPrice ? item.originalPrice : 0}}</span>
+							</view>
+						</view>
+					</view>
+					<view class="item-right">
+						<u-number-box v-model="item.quantity" @change="valChange(item,$event)"></u-number-box>
+					</view>
+				</view>
+			</view>
+
+			<!-- <view class="message-box">
+				<view class="couon-box">
+					<view class="coupon-left">
+						<image class="img" src='@/static/images/coupon.png'></image>
+						<view>通用优惠</view>
+					</view>
+					<view class="coupon-right red-color"> -0.1 </view>
+				</view>
+				<u-line margin='20rpx 0'></u-line>
+				<view class="couon-box" @click="openCouponshow">
+					<view class="coupon-left">
+						<image class="img" src='@/static/images/coupon.png'></image>
+						<span>商家优惠券</span>
+					</view>
+					<view class="coupon-right" >
+						<view class=""> {{ coupon_list.couponHistoryDetailList.length == 0 ? '暂无可用' : `${coupon_list.couponHistoryDetailList.length} 张优惠券可用` }} </view>
+						<u-icon name="arrow-right" size='13'></u-icon>
+					</view>
+				</view>
+			</view> -->
+
+			<view class="message-box">
+				<view class="message-item">
+					<view class="item-left"> 订单总价 </view>
+					<view class=" flex-end red-color" style="align-items: center;">
+						<p style="margin-right: 20rpx; font-size: 36rpx; font-weight: bold;">
+							￥{{ orderParams.price.toFixed(2) }}</p>
+						<p style="text-decoration: line-through;font-style: italic;">(
+							已优惠￥{{ orderParams.discountPrice.toFixed(2) }} )</p>
+					</view>
+				</view>
+			</view>
+
+			<view class="message-box">
+				<view class="message-name"> 购买须知 </view>
+				<view class="message-text" style="text-indent:32.4px;">
+					洗车机常见的类型有高压洗车机和无水洗车机两种，高压洗车机可以配有不同的喷嘴，可实现不同场景下的清洗需求。
+					无水洗车机则是一种更为环保的洗车方式，它可以用高科技的化学技术在不用水的情况下清洗车辆。因此，
+					在购买洗车机时需要根据自己的实际需求进行选择
+				</view>
+			</view>
+		</view>
+
+		<!-- <u-popup :show="coupon_show" @close="close" mode='bottom' round='20' bgColor='#F4F4F4'>
+			<view class="pop-box">
+				<view class="pop-title"> 商家优惠券 </view>
+				<u-line margin='20rpx 0'></u-line>
+
+				<view class="pop-coupon-box">
+				  <view class="pop-item" v-for="(item,index) of coupon_list.couponHistoryDetailList" @click="handlerSelectCoupon(item,index)">
+				  	<view class="item-box">
+				  		<view class="item-left">
+				  			<view class="img-box">
+				  				<image class="left-img" src="@/static/images/honglei.png"></image>
+				  			</view>
+				  			<view class="left-text">
+				  				<view class="text-title"> {{ item.couponDTO.name }} </view>
+				  				<view class="text"> 到期时间 : {{ item.couponDTO.endTime }} </view>
+				  			</view>
+				  		</view>
+				  		<view class="item-right">
+				  			<view class="price red-color">
+				  				<span class="price-symbol">￥</span> {{ item.couponDTO.reduce == null ? 0 : item.couponDTO.reduce }}
+				  			</view>
+				  			<view class="text"> {{ item.couponDTO.name }} </view>
+				  		</view>
+				  	</view>
+				    <view class="item-bottom">
+				      <span>{{ item.couponDTO.name }}</span>
+				    </view>
+				  </view>
+				</view>
+
+        <view class="pop-bottom">
+          <button class='coupon-btn' @click="handlerSelectCoupon">确定</button>
+        </view>
+			</view>
+		</u-popup> -->
+
+		<view class="btn-box">
+			<view class="btn" @click="handlerSettleBtn">
+				结算
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { generateOrder, getCartList, generateConfirmOrder, editGoodsNumb } from "@/api/client/business.js"
+	import { successfulPayment } from "@/api/client/order.js"
+	//   import { maintainCouponPaging } from "@/api/client/mine.js"
+	import { changeTime } from "@/utils/date"
+	export default {
+		data() {
+			return {
+				coupon_show: false,
+				coupon_list: [],
+				init_list: {
+					cartItems: [],
+					merchantDTO: []
+				},
+				phoneNumber: null, // 订购电话
+				goodsRemark: '', // 备注
+				merchantId: null
+			}
+		},
+		mounted() {
+			this.handlerInitList()
+		},
+		onLoad(option) {
+			this.merchantId = option.ids
+		},
+		computed: {
+			orderParams() {
+				let price = 0
+				let originalPrice = 0
+				let discountPrice = 0
+				if (this.init_list.cartItems) {
+					this.init_list.cartItems.map(rs => {
+						price += Number((rs.price).toFixed(2) * rs.quantity)
+						originalPrice += Number((rs.originalPrice).toFixed(2) * rs.quantity)
+					})
+					discountPrice = originalPrice - price
+				}
+				return {
+					price,
+					discountPrice
+				}
+			}
+		},
+		methods: {
+			// 初始化列表接口
+			handlerInitList() {
+				getCartList(this.merchantId).then(res => {
+					this.init_list.cartItems = res.data.cartItems
+					this.init_list.merchantDTO = res.data.merchantDTO
+					// this.handlerInitCouponList(res.data.cartItems)
+				})
+			},
+			// 初始化优惠券列表
+			// handlerInitCouponList(cartItems){
+			//   let params = {
+			//     cartIds:[],
+			//     merchantId:this.merchantId
+			//   }
+			//   cartItems.map(rs=>{
+			//     params.cartIds.push(rs.id)
+			//   })
+			//   // 订单接口 - 根据购物车信息生成确认单信息
+			//   generateConfirmOrder(params).then(res=>{
+			//     this.coupon_list = res.data
+			//     this.coupon_list.couponHistoryDetailList.map(rs=>{
+			//       rs.couponDTO.endTime = changeTime(rs.couponDTO.createTime)
+			//     })
+			//   })
+			// },
+			// 结算按钮
+			handlerSettleBtn() {
+				
+				// uni.navigateTo({
+				// 	url: '/pagesHome/marketer/submitOrder'
+				// })
+				
+				let params = {
+					payType: '2',
+					cartIds: [],
+					merchantId: this.init_list.merchantDTO.id
+				}
+				this.init_list.cartItems.map(rs => {
+					params.cartIds.push(rs.goodsId)
+				})
+				generateOrder(params).then(res => {
+					if (res.code === 'OK') {
+						this.handlerCallOrderBack(res.data.order.id)
+					} else {
+						uni.showToast({
+							title: res.msg,
+						})
+						return
+					}
+				})
+			},
+			// 支付回调
+			handlerCallOrderBack(id) {
+				successfulPayment(id, {
+					payType: 2
+				}).then(res => {
+					if (res.code == 'OK') {
+						uni.navigateTo({
+							url: '/pagesHome/marketer/settleStatus'
+						})
+					} else {
+						uni.showToast({
+							title: res.message,
+							icon: 'none'
+						})
+						return
+					}
+				})
+			},
+
+			close() {
+				this.coupon_show = false
+			},
+			// 点击展示优惠券pop
+			openCouponshow() {
+				this.coupon_show = true
+			},
+			// 选择优惠券 点击确定按钮
+			handlerSelectCoupon() {
+				this.coupon_show = false
+			},
+			valChange(item, e) {
+				editGoodsNumb(item.id, {
+					quantity: e.value
+				}).then(res => {
+					console.log('@@@2res', res)
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		min-height: calc(100vh - 40rpx);
+		background: linear-gradient(to bottom, #bacff5, #F2F4FA, #fff);
+		padding: 20rpx;
+
+		.content-box {
+			padding: 20rpx 20rpx 120rpx;
+			max-height: calc(100vh - 180rpx);
+			overflow-y: auto;
+
+			.message-box {
+				padding: 20rpx;
+				border-radius: 20rpx;
+				background-color: #fff;
+				margin-bottom: 20rpx;
+				box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.1);
+
+				.message-item {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+
+					.item-left {
+						font-size: 32rpx;
+						font-weight: bold;
+
+					}
+
+					.item-right {
+						width: 60%;
+						align-items: center;
+
+						.right-img {
+							width: 50rpx;
+							height: 50rpx;
+							margin-left: 20rpx;
+						}
+					}
+				}
+
+				.couon-box {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+
+					.coupon-left {
+						display: flex;
+						align-items: center;
+						font-size: 30rpx;
+
+						.img {
+							width: 50rpx;
+							height: 50rpx;
+							margin-right: 20rpx;
+						}
+					}
+
+					.coupon-right {
+						display: flex;
+						align-items: center;
+					}
+				}
+
+				.goods-title {
+					font-size: 32rpx;
+				}
+
+				.goods-item {
+					margin-bottom: 30rpx;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+
+					.item-left {
+						display: flex;
+
+						.left-img {
+							width: 130rpx;
+							height: 130rpx;
+							border-radius: 10rpx;
+						}
+
+						.left-text {
+							display: flex;
+							flex-direction: column;
+							justify-content: space-around;
+							margin-left: 20rpx;
+
+							.text-name {
+								font-weight: bold;
+								font-size: 30rpx;
+								width: 260rpx;
+								white-space: nowrap;
+								overflow: hidden;
+								text-overflow: ellipsis;
+							}
+
+							.price-box {
+								display: flex;
+								font-style: italic;
+								align-items: center;
+
+								.price {
+									font-size: 34rpx;
+									font-weight: bold;
+									margin-right: 20rpx;
+								}
+
+								.false-price {
+									color: #CACDD4;
+									text-decoration: line-through;
+								}
+							}
+						}
+					}
+				}
+
+				.message-name {
+					font-size: 32rpx;
+					font-weight: bold;
+				}
+
+				.message-text {
+					margin-top: 20rpx;
+					color: #bcbfc3;
+				}
+			}
+		}
+	}
+
+	.flex-end {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.red-color {
+		color: #FF4B10;
+	}
+
+	::v-deep .u-border {
+		border-style: none !important;
+	}
+
+
+
+	.pop-box {
+		height: 850rpx;
+		background-color: #F4F4F4;
+		position: relative;
+
+		.pop-title {
+			font-weight: bold;
+			font-size: 36rpx;
+			text-align: center;
+			padding: 20rpx;
+			background: linear-gradient(to bottom, #fff, #fff, #F4F4F4);
+		}
+
+		.pop-coupon-box {
+			max-height: 650rpx;
+			overflow-y: scroll;
+		}
+
+		.pop-item {
+			padding: 20rpx;
+			margin-bottom: 10rpx;
+
+			.item-box {
+				padding: 20rpx;
+				border-radius: 20rpx 20rpx 0 0;
+				background-color: #fff;
+				display: flex;
+				align-items: center;
+				box-shadow: 0rpx 7rpx 20rpx 10rpx rgba(0, 0, 0, 0.1);
+				background-image: radial-gradient(circle at left bottom, #F4F4F4, #F4F4F4 40rpx, transparent 16rpx), radial-gradient(circle at right bottom, #F4F4F4, #F4F4F4 55rpx, transparent 16rpx), radial-gradient(circle at right top, #F4F4F4, #F4F4F4 35rpx, transparent 16rpx);
+
+				.item-left {
+					display: flex;
+					width: 70%;
+
+					.img-box,
+					.left-img {
+						width: 160rpx;
+						height: 160rpx;
+						border-radius: 20rpx;
+					}
+
+					.left-text {
+						margin-left: 20rpx;
+
+						.text-title {
+							font-size: 34rpx;
+							width: 350rpx;
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							color: #000;
+						}
+
+						.text {
+							font-size: 26rpx;
+							color: #666666;
+							margin-top: 10rpx;
+						}
+					}
+
+				}
+
+				.item-right {
+					text-align: center;
+					width: 30%;
+
+					.price {
+						font-size: 56rpx;
+
+						.price-symbol {
+							font-size: 24rpx;
+						}
+					}
+
+					.text {
+						color: #656565;
+						margin-top: 20rpx;
+					}
+				}
+			}
+
+			.item-bottom {
+				padding: 20rpx 50rpx 20rpx 30rpx;
+				background-color: #fff;
+				border-radius: 0 0 20rpx 20rpx;
+				box-shadow: 0rpx 10rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);
+				background-image: radial-gradient(circle at left top, #F4F4F4, #F4F4F4 40rpx, transparent 16rpx), radial-gradient(circle at right top, #F4F4F4, #F4F4F4 55rpx, transparent 16rpx);
+				border-top: 1px dashed #F4F4F4;
+				color: #b1b4b9;
+				font-size: 26rpx;
+				font-style: oblique;
+				text-indent: 32.4px;
+			}
+		}
+
+		.pop-bottom {
+			position: absolute;
+			bottom: 0;
+			width: 100%;
+			display: flex;
+			justify-content: center;
+
+			.coupon-btn {
+				width: 100%;
+				background-color: #FFDE21 !important;
+				color: #000;
+				font-size: 28rpx;
+				// height:80rpx;
+				// line-height: 80rpx;
+				border-radius: 20rpx;
+			}
+		}
+	}
+
+
+
+	.btn-box {
+		width: 100%;
+		position: fixed;
+		bottom: 5%;
+
+		.btn {
+			width: 90%;
+			background: linear-gradient(to right, #1d4350, #a43931);
+			color: #fff;
+			border-radius: 40rpx;
+			text-align: center;
+			font-size: 32rpx;
+			padding: 20rpx;
+		}
+	}
+</style>

src/pagesHome/marketer/settleOrder.vue

@@ -1,555 +1,599 @@
-<template>
-	<view class="container">
-
-		<view class="content-box">
-			<!-- <view class="message-box">
-				<view class="message-item">
-					<view class="item-left"> 订购人电话 </view>
-					<view class="item-right">
-						<u--input border='none' type='number' maxlength='11' fontSize='14' placeholder="请输入您的订购电话"
-							v-model="phoneNumber"></u--input>
-					</view>
-				</view>
-				<u-line margin='20rpx 0'></u-line>
-				<view class="message-item">
-					<view class="item-left"> 备注 </view>
-					<view class="item-right">
-						<u--textarea v-model="goodsRemark" placeholder="请输入备注内容" autoHeight></u--textarea>
-					</view>
-				</view>
-			</view> -->
-
-
-			<view class="message-box">
-				<view class="message-item">
-					<view class="item-left"> 支付方式 </view>
-					<view class="item-right flex-end">
-						<span>在线支付</span>
-						<image class="right-img" src="@/static/order/ic_order_weixin.png"></image>
-					</view>
-				</view>
-			</view>
-
-			<view class="message-box">
-				<view class="goods-title"> {{ init_list.merchantDTO.name }} </view>
-				<u-line margin='20rpx 0'></u-line>
-				<view class="goods-item" v-for="(item,index) of init_list.cartItems" :key='item.goodsId'>
-					<view class="item-left">
-						<image class="left-img" src="@/static/QR57a.jpg"></image>
-						<view class="left-text">
-							<view class="text-name">{{ item.goodsName }}</view>
-							<view class="text-number">×{{ item.quantity }}</view>
-							<view class="price-box">
-								<p class="price red-color"> <span style="font-size: 24rpx;">￥</span>{{ item.price }}</p>
-								<span class="false-price">￥{{ item.originalPrice ? item.originalPrice : 0}}</span>
-							</view>
-						</view>
-					</view>
-					<view class="item-right">
-						<u-number-box v-model="item.quantity" @change="valChange(item,$event)"></u-number-box>
-					</view>
-				</view>
-			</view>
-
-			<!-- <view class="message-box">
-				<view class="couon-box">
-					<view class="coupon-left">
-						<image class="img" src='@/static/images/coupon.png'></image>
-						<view>通用优惠</view>
-					</view>
-					<view class="coupon-right red-color"> -0.1 </view>
-				</view>
-				<u-line margin='20rpx 0'></u-line>
-				<view class="couon-box" @click="openCouponshow">
-					<view class="coupon-left">
-						<image class="img" src='@/static/images/coupon.png'></image>
-						<span>商家优惠券</span>
-					</view>
-					<view class="coupon-right" >
-						<view class=""> {{ coupon_list.couponHistoryDetailList.length == 0 ? '暂无可用' : `${coupon_list.couponHistoryDetailList.length} 张优惠券可用` }} </view>
-						<u-icon name="arrow-right" size='13'></u-icon>
-					</view>
-				</view>
-			</view> -->
-
-			<view class="message-box">
-				<view class="message-item">
-					<view class="item-left"> 订单总价 </view>
-					<view class=" flex-end red-color" style="align-items: center;">
-						<p style="margin-right: 20rpx; font-size: 36rpx; font-weight: bold;">
-							￥{{ orderParams.price.toFixed(2) }}</p>
-						<p style="text-decoration: line-through;font-style: italic;">(
-							已优惠￥{{ orderParams.discountPrice.toFixed(2) }} )</p>
-					</view>
-				</view>
-			</view>
-
-			<view class="message-box">
-				<view class="message-name"> 购买须知 </view>
-				<view class="message-text" style="text-indent:32.4px;">
-					洗车机常见的类型有高压洗车机和无水洗车机两种，高压洗车机可以配有不同的喷嘴，可实现不同场景下的清洗需求。
-					无水洗车机则是一种更为环保的洗车方式，它可以用高科技的化学技术在不用水的情况下清洗车辆。因此，
-					在购买洗车机时需要根据自己的实际需求进行选择
-				</view>
-			</view>
-		</view>
-
-		<!-- <u-popup :show="coupon_show" @close="close" mode='bottom' round='20' bgColor='#F4F4F4'>
-			<view class="pop-box">
-				<view class="pop-title"> 商家优惠券 </view>
-				<u-line margin='20rpx 0'></u-line>
-
-				<view class="pop-coupon-box">
-				  <view class="pop-item" v-for="(item,index) of coupon_list.couponHistoryDetailList" @click="handlerSelectCoupon(item,index)">
-				  	<view class="item-box">
-				  		<view class="item-left">
-				  			<view class="img-box">
-				  				<image class="left-img" src="@/static/images/honglei.png"></image>
-				  			</view>
-				  			<view class="left-text">
-				  				<view class="text-title"> {{ item.couponDTO.name }} </view>
-				  				<view class="text"> 到期时间 : {{ item.couponDTO.endTime }} </view>
-				  			</view>
-				  		</view>
-				  		<view class="item-right">
-				  			<view class="price red-color">
-				  				<span class="price-symbol">￥</span> {{ item.couponDTO.reduce == null ? 0 : item.couponDTO.reduce }}
-				  			</view>
-				  			<view class="text"> {{ item.couponDTO.name }} </view>
-				  		</view>
-				  	</view>
-				    <view class="item-bottom">
-				      <span>{{ item.couponDTO.name }}</span>
-				    </view>
-				  </view>
-				</view>
-
-        <view class="pop-bottom">
-          <button class='coupon-btn' @click="handlerSelectCoupon">确定</button>
-        </view>
-			</view>
-		</u-popup> -->
-
-		<view class="btn-box">
-			<view class="btn" @click="handlerSettleBtn">
-				结算
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import { generateOrder, getCartList, generateConfirmOrder, editGoodsNumb } from "@/api/client/business.js"
-	import { successfulPayment } from "@/api/client/order.js"
-	//   import { maintainCouponPaging } from "@/api/client/mine.js"
-	import { changeTime } from "@/utils/date"
-	export default {
-		data() {
-			return {
-				coupon_show: false,
-				coupon_list: [],
-				init_list: {
-					cartItems: [],
-					merchantDTO: []
-				},
-				phoneNumber: null, // 订购电话
-				goodsRemark: '', // 备注
-				merchantId: null
-			}
-		},
-		mounted() {
-			this.handlerInitList()
-		},
-		onLoad(option) {
-			this.merchantId = option.ids
-		},
-		computed: {
-			orderParams() {
-				let price = 0
-				let originalPrice = 0
-				let discountPrice = 0
-				if (this.init_list.cartItems) {
-					this.init_list.cartItems.map(rs => {
-						price += Number((rs.price).toFixed(2) * rs.quantity)
-						originalPrice += Number((rs.originalPrice).toFixed(2) * rs.quantity)
-					})
-					discountPrice = originalPrice - price
-				}
-				return {
-					price,
-					discountPrice
-				}
-			}
-		},
-		methods: {
-			// 初始化列表接口
-			handlerInitList() {
-				getCartList(this.merchantId).then(res => {
-					this.init_list.cartItems = res.data.cartItems
-					this.init_list.merchantDTO = res.data.merchantDTO
-					// this.handlerInitCouponList(res.data.cartItems)
-				})
-			},
-			// 初始化优惠券列表
-			// handlerInitCouponList(cartItems){
-			//   let params = {
-			//     cartIds:[],
-			//     merchantId:this.merchantId
-			//   }
-			//   cartItems.map(rs=>{
-			//     params.cartIds.push(rs.id)
-			//   })
-			//   // 订单接口 - 根据购物车信息生成确认单信息
-			//   generateConfirmOrder(params).then(res=>{
-			//     this.coupon_list = res.data
-			//     this.coupon_list.couponHistoryDetailList.map(rs=>{
-			//       rs.couponDTO.endTime = changeTime(rs.couponDTO.createTime)
-			//     })
-			//   })
-			// },
-			// 结算按钮
+<template>
+	<view class="container">
+
+		<view class='address-box'>
+			<view class='address-left'>
+				<view class="left-top">
+					<u-icon name="map" color="#000" size="18" bold></u-icon>
+					<view class="top-name"> 阿娟 18285564342 </view>
+				</view>
+				<view class="left-bottom">地址：贵州省贵阳市观山湖区高新区</view>
+			</view>
+			<view class='address-right'>
+				<u-icon name="arrow-right" color="#000" size="14" bold></u-icon>
+			</view>
+		</view>
+
+		<view class="content-box">
+			<view class="message-box">
+				<view class="goods-title"> {{ init_list.merchantDTO.name }} </view>
+				<u-line margin='20rpx 0'></u-line>
+				<view class="goods-item" v-for="(item,index) of init_list.cartItems" :key='item.goodsId'>
+					<view class="item-left">
+						<image class="left-img" src="@/static/QR57a.jpg"></image>
+						<view class="left-text">
+							<view class="text-name">{{ item.goodsName }}</view>
+							<view class="text-number">×{{ item.quantity }}</view>
+							<view class="price-box">
+								<view class="price-box-left">
+									<p class="price "> ￥{{ item.price }}</p>
+									<span class="false-price">￥{{ item.originalPrice ? item.originalPrice : 0}}</span>
+								</view>
+								<view class="price-box-right">
+									<u-number-box v-model="item.quantity"
+										@change="valChange(item,$event)"></u-number-box>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="message-box">
+				<view class="title"> 服务流程 </view>
+				<view class="process-box">
+					<view class="process-item" v-for="(itme,index) of 4">
+						<view class="item-box">
+							<view class="item-top"></view>
+							<view class="item-bottom">线上开单</view>
+						</view>
+						<view class="gap-box" v-if="index != 3">
+							<u-gap height="1" bgColor="#C1D1FF"></u-gap>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="message-box">
+				<view class="message-item">
+					<view class="item-left"> 订单总价 </view>
+					<view class=" flex-end red-color" style="align-items: center;">
+						<p style="margin-right: 20rpx; font-size: 36rpx; font-weight: bold;">
+							￥{{ orderParams.price.toFixed(2) }}</p>
+						<p style="text-decoration: line-through;font-style: italic;">(
+							已优惠￥{{ orderParams.discountPrice.toFixed(2) }} )</p>
+					</view>
+				</view>
+			</view>
+
+			<view class="message-box">
+				<view class="message-item">
+					<view class="item-left"> 支付方式 </view>
+					<view class="item-right flex-end">
+						<span>在线支付</span>
+						<image class="right-img" src="@/static/order/ic_order_weixin.png"></image>
+					</view>
+				</view>
+			</view>
+
+			<view class="message-box">
+				<view class="message-name"> 购买须知 </view>
+				<view class="message-text">
+					<view class="text-item">
+						<view class="text-left">开发票</view>
+						<view class="text-right">到店后由商家开具</view>
+					</view>
+					<view class="text-item">
+						<view class="text-left">退款时限</view>
+						<view class="text-right">订单核销码有效期60天，过期后自动退款未使用/未到期前随时可退</view>
+					</view>
+					<view class="text-item">
+						<view class="text-left">退款时限</view>
+						<view class="text-right">商品/服务信息和预订服务由门店提传，为了更好保障您的权益，建议您使用线上支付，以便门店店与您产严生纠纷时能更好协助解决纠纷。</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="btn-box">
+			<view class="btn" @click="handlerSettleBtn">
+				结算
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		generateOrder,
+		getCartList,
+		generateConfirmOrder,
+		editGoodsNumb
+	} from "@/api/client/business.js"
+	import {
+		successfulPayment
+	} from "@/api/client/order.js"
+	import {
+		changeTime
+	} from "@/utils/date"
+	export default {
+		data() {
+			return {
+				coupon_show: false,
+				coupon_list: [],
+				init_list: {
+					cartItems: [],
+					merchantDTO: []
+				},
+				phoneNumber: null, // 订购电话
+				goodsRemark: '', // 备注
+				merchantId: null
+			}
+		},
+		mounted() {
+			this.handlerInitList()
+		},
+		onLoad(option) {
+			this.merchantId = option.ids
+		},
+		computed: {
+			orderParams() {
+				let price = 0
+				let originalPrice = 0
+				let discountPrice = 0
+				if (this.init_list.cartItems) {
+					this.init_list.cartItems.map(rs => {
+						price += Number((rs.price).toFixed(2) * rs.quantity)
+						originalPrice += Number((rs.originalPrice).toFixed(2) * rs.quantity)
+					})
+					discountPrice = originalPrice - price
+				}
+				return {
+					price,
+					discountPrice
+				}
+			}
+		},
+		methods: {
+			// 初始化列表接口
+			handlerInitList() {
+				getCartList(this.merchantId).then(res => {
+					this.init_list.cartItems = res.data.cartItems
+					this.init_list.merchantDTO = res.data.merchantDTO
+				})
+			},
+
+			// 结算按钮
 			handlerSettleBtn() {
-				
-				// uni.navigateTo({
-				// 	url: '/pagesHome/marketer/submitOrder'
-				// })
-				
-				let params = {
-					payType: '2',
-					cartIds: [],
-					merchantId: this.init_list.merchantDTO.id
-				}
-				this.init_list.cartItems.map(rs => {
-					params.cartIds.push(rs.goodsId)
-				})
-				generateOrder(params).then(res => {
-					if (res.code === 'OK') {
-						this.handlerCallOrderBack(res.data.order.id)
-					} else {
-						uni.showToast({
-							title: res.msg,
-						})
-						return
-					}
-				})
-			},
-			// 支付回调
-			handlerCallOrderBack(id) {
-				successfulPayment(id, {
-					payType: 2
-				}).then(res => {
-					if (res.code == 'OK') {
-						uni.navigateTo({
-							url: '/pagesHome/marketer/settleStatus'
-						})
-					} else {
-						uni.showToast({
-							title: res.message,
-							icon: 'none'
-						})
-						return
-					}
-				})
-			},
-
-			close() {
-				this.coupon_show = false
-			},
-			// 点击展示优惠券pop
-			openCouponshow() {
-				this.coupon_show = true
-			},
-			// 选择优惠券 点击确定按钮
-			handlerSelectCoupon() {
-				this.coupon_show = false
-			},
-			valChange(item, e) {
-				editGoodsNumb(item.id, {
-					quantity: e.value
-				}).then(res => {
-					console.log('@@@2res', res)
-				})
-			},
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.container {
-		min-height: calc(100vh - 40rpx);
-		background: linear-gradient(to bottom, #bacff5, #F2F4FA, #fff);
-		padding: 20rpx;
-
-		.content-box {
-			padding: 20rpx 20rpx 120rpx;
-			max-height: calc(100vh - 180rpx);
-			overflow-y: auto;
-
-			.message-box {
-				padding: 20rpx;
-				border-radius: 20rpx;
-				background-color: #fff;
-				margin-bottom: 20rpx;
-				box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.1);
-
-				.message-item {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-
-					.item-left {
-						font-size: 32rpx;
-						font-weight: bold;
-
-					}
-
-					.item-right {
-						width: 60%;
-						align-items: center;
-
-						.right-img {
-							width: 50rpx;
-							height: 50rpx;
-							margin-left: 20rpx;
-						}
-					}
-				}
-
-				.couon-box {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-
-					.coupon-left {
-						display: flex;
-						align-items: center;
-						font-size: 30rpx;
-
-						.img {
-							width: 50rpx;
-							height: 50rpx;
-							margin-right: 20rpx;
-						}
-					}
-
-					.coupon-right {
-						display: flex;
-						align-items: center;
-					}
-				}
-
-				.goods-title {
-					font-size: 32rpx;
-				}
-
-				.goods-item {
-					margin-bottom: 30rpx;
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-
-					.item-left {
-						display: flex;
-
-						.left-img {
-							width: 130rpx;
-							height: 130rpx;
-							border-radius: 10rpx;
-						}
-
-						.left-text {
-							display: flex;
-							flex-direction: column;
-							justify-content: space-around;
-							margin-left: 20rpx;
-
-							.text-name {
-								font-weight: bold;
-								font-size: 30rpx;
-								width: 260rpx;
-								white-space: nowrap;
-								overflow: hidden;
-								text-overflow: ellipsis;
-							}
-
-							.price-box {
-								display: flex;
-								font-style: italic;
-								align-items: center;
-
-								.price {
-									font-size: 34rpx;
-									font-weight: bold;
-									margin-right: 20rpx;
-								}
-
-								.false-price {
-									color: #CACDD4;
-									text-decoration: line-through;
-								}
-							}
-						}
-					}
-				}
-
-				.message-name {
-					font-size: 32rpx;
-					font-weight: bold;
-				}
-
-				.message-text {
-					margin-top: 20rpx;
-					color: #bcbfc3;
-				}
-			}
-		}
-	}
-
-	.flex-end {
-		display: flex;
-		justify-content: flex-end;
-	}
-
-	.red-color {
-		color: #FF4B10;
-	}
-
-	::v-deep .u-border {
-		border-style: none !important;
-	}
-
-
-
-	.pop-box {
-		height: 850rpx;
-		background-color: #F4F4F4;
-		position: relative;
-
-		.pop-title {
-			font-weight: bold;
-			font-size: 36rpx;
-			text-align: center;
-			padding: 20rpx;
-			background: linear-gradient(to bottom, #fff, #fff, #F4F4F4);
-		}
-
-		.pop-coupon-box {
-			max-height: 650rpx;
-			overflow-y: scroll;
-		}
-
-		.pop-item {
-			padding: 20rpx;
-			margin-bottom: 10rpx;
-
-			.item-box {
-				padding: 20rpx;
-				border-radius: 20rpx 20rpx 0 0;
-				background-color: #fff;
-				display: flex;
-				align-items: center;
-				box-shadow: 0rpx 7rpx 20rpx 10rpx rgba(0, 0, 0, 0.1);
-				background-image: radial-gradient(circle at left bottom, #F4F4F4, #F4F4F4 40rpx, transparent 16rpx), radial-gradient(circle at right bottom, #F4F4F4, #F4F4F4 55rpx, transparent 16rpx), radial-gradient(circle at right top, #F4F4F4, #F4F4F4 35rpx, transparent 16rpx);
-
-				.item-left {
-					display: flex;
-					width: 70%;
-
-					.img-box,
-					.left-img {
-						width: 160rpx;
-						height: 160rpx;
-						border-radius: 20rpx;
-					}
-
-					.left-text {
-						margin-left: 20rpx;
-
-						.text-title {
-							font-size: 34rpx;
-							width: 350rpx;
-							white-space: nowrap;
-							overflow: hidden;
-							text-overflow: ellipsis;
-							color: #000;
-						}
-
-						.text {
-							font-size: 26rpx;
-							color: #666666;
-							margin-top: 10rpx;
-						}
-					}
-
-				}
-
-				.item-right {
-					text-align: center;
-					width: 30%;
-
-					.price {
-						font-size: 56rpx;
-
-						.price-symbol {
-							font-size: 24rpx;
-						}
-					}
-
-					.text {
-						color: #656565;
-						margin-top: 20rpx;
-					}
-				}
-			}
-
-			.item-bottom {
-				padding: 20rpx 50rpx 20rpx 30rpx;
-				background-color: #fff;
-				border-radius: 0 0 20rpx 20rpx;
-				box-shadow: 0rpx 10rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);
-				background-image: radial-gradient(circle at left top, #F4F4F4, #F4F4F4 40rpx, transparent 16rpx), radial-gradient(circle at right top, #F4F4F4, #F4F4F4 55rpx, transparent 16rpx);
-				border-top: 1px dashed #F4F4F4;
-				color: #b1b4b9;
-				font-size: 26rpx;
-				font-style: oblique;
-				text-indent: 32.4px;
-			}
-		}
-
-		.pop-bottom {
-			position: absolute;
-			bottom: 0;
-			width: 100%;
-			display: flex;
-			justify-content: center;
-
-			.coupon-btn {
-				width: 100%;
-				background-color: #FFDE21 !important;
-				color: #000;
-				font-size: 28rpx;
-				// height:80rpx;
-				// line-height: 80rpx;
-				border-radius: 20rpx;
-			}
-		}
-	}
-
-
-
-	.btn-box {
-		width: 100%;
-		position: fixed;
-		bottom: 5%;
-
-		.btn {
-			width: 90%;
-			background: linear-gradient(to right, #1d4350, #a43931);
-			color: #fff;
-			border-radius: 40rpx;
-			text-align: center;
-			font-size: 32rpx;
-			padding: 20rpx;
-		}
-	}
+				let params = {
+					payType: '2',
+					cartIds: [],
+					merchantId: this.init_list.merchantDTO.id
+				}
+				this.init_list.cartItems.map(rs => {
+					params.cartIds.push(rs.goodsId)
+				})
+				generateOrder(params).then(res => {
+					if (res.code === 'OK') {
+						this.handlerCallOrderBack(res.data.order.id)
+					} else {
+						uni.showToast({
+							title: res.msg,
+						})
+						return
+					}
+				})
+			},
+			// 支付回调
+			handlerCallOrderBack(id) {
+				successfulPayment(id, {
+					payType: 2
+				}).then(res => {
+					if (res.code == 'OK') {
+						uni.navigateTo({
+							url: '/pagesHome/marketer/settleStatus'
+						})
+					} else {
+						uni.showToast({
+							title: res.message,
+							icon: 'none'
+						})
+						return
+					}
+				})
+			},
+
+			close() {
+				this.coupon_show = false
+			},
+			// 点击展示优惠券pop
+			openCouponshow() {
+				this.coupon_show = true
+			},
+			// 选择优惠券 点击确定按钮
+			handlerSelectCoupon() {
+				this.coupon_show = false
+			},
+			valChange(item, e) {
+				editGoodsNumb(item.id, {
+					quantity: e.value
+				}).then(res => {
+					console.log('@@@2res', res)
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		background: linear-gradient(to bottom, #bacff5, #F2F4FA, #fff);
+		padding: 24rpx 32rpx 150rpx;
+		font-size: 28rpx;
+
+		.address-box {
+			border-radius: 16rpx;
+			background-color: #fff;
+			padding: 32rpx;
+			margin-bottom: 24rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.1);
+			.address-left {
+				display: flex;
+				flex-direction: column;
+				justify-content: space-around;
+				.left-top {
+					display: flex;
+					.top-name {
+						color: #333333;
+						font-weight: bold;
+						margin-left: 12rpx;
+					}
+				}
+				.left-bottom {
+					color: #999999;
+					font-size: 24rpx;
+					margin-top: 8rpx;
+				}
+			}
+		}
+		.content-box {
+			.message-box {
+				padding: 24rpx;
+				border-radius: 16rpx;
+				background-color: #fff;
+				margin-bottom: 20rpx;
+				box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.1);
+
+				.message-item {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+
+					.item-left {
+						font-size: 32rpx;
+						font-weight: bold;
+
+					}
+
+					.item-right {
+						width: 60%;
+						align-items: center;
+
+						.right-img {
+							width: 50rpx;
+							height: 50rpx;
+							margin-left: 20rpx;
+						}
+					}
+				}
+
+				.couon-box {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+
+					.coupon-left {
+						display: flex;
+						align-items: center;
+						font-size: 30rpx;
+
+						.img {
+							width: 50rpx;
+							height: 50rpx;
+							margin-right: 20rpx;
+						}
+					}
+
+					.coupon-right {
+						display: flex;
+						align-items: center;
+					}
+				}
+
+				.goods-title {
+					font-size: 32rpx;
+					color: #333333;
+					font-weight: bold;
+				}
+
+				.goods-item {
+					margin-bottom: 30rpx;
+					display: flex;
+					align-items: center;
+					width: 100%;
+
+					.item-left {
+						display: flex;
+
+						.left-img {
+							width: 160rpx;
+							height: 160rpx;
+							border-radius: 10rpx;
+						}
+
+						.left-text {
+							display: flex;
+							flex-direction: column;
+							justify-content: space-around;
+							margin-left: 20rpx;
+							width: 452rpx;
+
+							.text-name {
+								font-weight: bold;
+								font-size: 30rpx;
+								white-space: nowrap;
+								overflow: hidden;
+								text-overflow: ellipsis;
+								color: #333333;
+							}
+
+							.price-box {
+								display: flex;
+								justify-content: space-between;
+								align-items: center;
+								width: 100%;
+
+								.price-box-left {
+									display: flex;
+									align-items: center;
+
+									.price {
+										font-size: 32rpx;
+										font-weight: bold;
+										margin-right: 20rpx;
+										color: #333333;
+									}
+
+									.false-price {
+										color: #999999;
+										text-decoration: line-through;
+										font-size: 24rpx;
+									}
+								}
+
+								.price-box-right {}
+							}
+						}
+					}
+				}
+
+				.message-name {
+					font-size: 32rpx;
+					font-weight: bold;
+				}
+
+				.message-text {
+					margin-top: 20rpx;
+
+					.text-item {
+						display: flex;
+						margin-bottom: 18rpx;
+						width: 100%;
+
+						.text-left {
+							color: #333333;
+							font-size: 26rpx;
+							width: 18%;
+						}
+
+						.text-right {
+							color: #999999;
+							font-size: 24rpx;
+							margin-left: 16rpx;
+							width: 80%;
+							display: flex;
+							text-align: left;
+						}
+					}
+				}
+			}
+
+			.title {
+				font-size: 32rpx;
+				color: #333333;
+				font-weight: bold;
+			}
+
+			.process-box {
+				display: flex;
+				justify-content: space-around;
+				margin-top: 24rpx;
+
+				.process-item {
+					display: flex;
+
+					.item-box {
+						text-align: center;
+
+						.item-top {
+							width: 80rpx;
+							height: 80rpx;
+							background: linear-gradient(180deg, #E0E6FF 0%, #FFFFFF 100%);
+							border-radius: 50%;
+							margin: 0 auto;
+						}
+
+						.item-bottom {
+							color: #333333;
+							margin-top: 16rpx;
+						}
+					}
+
+					.gap-box {
+						width: 56rpx;
+						margin-top: 25%;
+					}
+
+				}
+			}
+		}
+	}
+
+	.flex-end {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	::v-deep .u-border {
+		border-style: none !important;
+	}
+
+
+
+	.pop-box {
+		height: 850rpx;
+		background-color: #F4F4F4;
+		position: relative;
+
+		.pop-title {
+			font-weight: bold;
+			font-size: 36rpx;
+			text-align: center;
+			padding: 20rpx;
+			background: linear-gradient(to bottom, #fff, #fff, #F4F4F4);
+		}
+
+		.pop-coupon-box {
+			max-height: 650rpx;
+			overflow-y: scroll;
+		}
+
+		.pop-item {
+			padding: 20rpx;
+			margin-bottom: 10rpx;
+
+			.item-box {
+				padding: 20rpx;
+				border-radius: 20rpx 20rpx 0 0;
+				background-color: #fff;
+				display: flex;
+				align-items: center;
+				box-shadow: 0rpx 7rpx 20rpx 10rpx rgba(0, 0, 0, 0.1);
+				background-image: radial-gradient(circle at left bottom, #F4F4F4, #F4F4F4 40rpx, transparent 16rpx), radial-gradient(circle at right bottom, #F4F4F4, #F4F4F4 55rpx, transparent 16rpx), radial-gradient(circle at right top, #F4F4F4, #F4F4F4 35rpx, transparent 16rpx);
+
+				.item-left {
+					display: flex;
+					width: 70%;
+
+					.img-box,
+					.left-img {
+						width: 160rpx;
+						height: 160rpx;
+						border-radius: 20rpx;
+					}
+
+					.left-text {
+						margin-left: 20rpx;
+
+						.text-title {
+							font-size: 34rpx;
+							width: 350rpx;
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							color: #000;
+						}
+
+						.text {
+							font-size: 26rpx;
+							color: #666666;
+							margin-top: 10rpx;
+						}
+					}
+
+				}
+
+				.item-right {
+					text-align: center;
+					width: 30%;
+
+					.price {
+						font-size: 56rpx;
+
+						.price-symbol {
+							font-size: 24rpx;
+						}
+					}
+
+					.text {
+						color: #656565;
+						margin-top: 20rpx;
+					}
+				}
+			}
+
+			.item-bottom {
+				padding: 20rpx 50rpx 20rpx 30rpx;
+				background-color: #fff;
+				border-radius: 0 0 20rpx 20rpx;
+				box-shadow: 0rpx 10rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);
+				background-image: radial-gradient(circle at left top, #F4F4F4, #F4F4F4 40rpx, transparent 16rpx), radial-gradient(circle at right top, #F4F4F4, #F4F4F4 55rpx, transparent 16rpx);
+				border-top: 1px dashed #F4F4F4;
+				color: #b1b4b9;
+				font-size: 26rpx;
+				font-style: oblique;
+				text-indent: 32.4px;
+			}
+		}
+
+		.pop-bottom {
+			position: absolute;
+			bottom: 0;
+			width: 100%;
+			display: flex;
+			justify-content: center;
+
+			.coupon-btn {
+				width: 100%;
+				background-color: #FFDE21 !important;
+				color: #000;
+				font-size: 28rpx;
+				// height:80rpx;
+				// line-height: 80rpx;
+				border-radius: 20rpx;
+			}
+		}
+	}
+
+
+
+	.btn-box {
+		width: 100%;
+		position: fixed;
+		bottom: 5%;
+
+		.btn {
+			width: calc(100% - 60rpx);
+			background: linear-gradient(to right, #1d4350, #a43931);
+			color: #fff;
+			border-radius: 40rpx;
+			text-align: center;
+			font-size: 32rpx;
+			padding: 20rpx;
+			box-sizing: border-box;
+		}
+	}
 </style>