diff --git a/pages.json b/pages.json
index 34a854a..b45f432 100644
--- a/pages.json
+++ b/pages.json
@@ -85,7 +85,14 @@
 			"path": "pages/order/order",
 			"style": {
 				"navigationBarTitleText": "订单列表",
-				"navigationBarBackgroundColor": "#FFD158",
+				"navigationBarBackgroundColor": "#FFD158"
+			}
+		},
+		{
+			"path": "pages/order/confirm_order",
+			"style": {
+				"navigationBarTitleText": "确认订单",
+				"navigationStyle": "custom",
 				"navigationBarTextStyle": "white"
 			}
 		},
diff --git a/pages/order/confirm_order.vue b/pages/order/confirm_order.vue
new file mode 100644
index 0000000..56df763
--- /dev/null
+++ b/pages/order/confirm_order.vue
@@ -0,0 +1,936 @@
+<template>
+	<view>
+		<!-- 占位符导航栏 -->
+		<navseat class="navbar" :opacity='opacitys' :title='toplist.name' :titleshow='true'></navseat>
+		<!-- #ifdef MP-WEIXIN -->
+		<view :style="{'height':HeighT.customBar+HeighT.heightBar+'px;background-color: #E8AD7B;position: fixed;top: 0;width: 100%;z-index: 9'}"></view>
+		<view :style="{'height':HeighT.customBar+HeighT.heightBar+'px;background-color: #E8AD7B;'}"></view>
+		<!-- #endif -->
+		<!-- 头部内容 -->
+		<view class="head">
+			<view class="head_bg"></view>
+			<view class="tips">温馨提示：请适量点餐，避免浪费</view>
+			<!-- <view class="tabBox"> -->
+			<!-- 	<view class="tab">
+					<view :class="is_type==(index+1)?'tab_item'+is_type+' tab_item  active ':'tab_item'" v-for="(item,index) in is_typeList" :key="index" @click="tabClick(index+1)">
+						<view></view>
+						<image class="icon" :src="is_type==(index+1)?item.url_active:item.url" mode="aspectFill"/>
+						<text class="title" :class="{active:is_type==(index+1)}">{{item.title}}</text>
+					</view>
+				</view> -->
+				<!-- 送餐到桌 -->
+			<!-- 	<view class="table" v-if="is_type==1">
+					<view>
+						<text class="title">桌台</text>
+					</view>
+					<view class="value"> {{ tableValue }} </view>
+				</view> -->
+				<!-- 打包外带 -->
+				<!-- <view class="pack" v-else>
+					<view class="top">
+						<text class="title">后海&双屿</text>
+						<text class="address">浐灞生态区灞河东路东三环至欧亚大道段商业用房09号</text>
+					</view>
+					<view class="list">
+						<view class="item">
+							<view class="lable">取餐时间</view><view class="text">立即取餐</view>
+						</view>
+						<view class="item">
+							
+							<view class="lable">预留电话</view><view class="getPhone text"><u-input class="inputVal" v-model="order.phone" input-align="right" placeholder="请输入预留电话以便联系您" ></u-input><text class="getBtn">获取手机号</text></view>
+						</view>
+					</view>
+				</view> -->
+			<!-- </view> -->
+		</view>
+		<!-- 订单内容区域 -->
+		<view class="content_box">
+			<view class="content">
+				<view class="title">后海&双屿</view>
+				<view class="list_item" v-for="(item,index) in listinfo.details" :key="item.id">
+					<view class="left">
+						<image class="img" :src="item.coverImg" mode="aspectFill"/>
+						<view class="center">
+							<text class="center_title"> {{item.name}} </text>
+							<text class="type"> {{ item.skuName}} </text>
+							<text class="num"> X{{ item.totalNumber}} </text>
+						</view>
+					</view>
+					<view class="price"> ￥{{ item.totalAmount}} </view>
+				</view>
+			<!-- 	<view class="favorable" v-for="(item,index) in favorable" :key="index">
+					<view class="favorable_left"> 
+						<image class="icon" :src="item.url" mode="aspectFill"/>
+						<text class="name"> {{ item.name }} </text>
+					</view>
+					<view class="favorable_right">暂无可用优惠券 ></view>
+				</view> -->
+				<view class="totalPrice">
+					<text style="margin-bottom: 5rpx;">小计￥</text>
+					<text class="totalPriceNum"> {{listinfo.payAmount}} </text>
+				</view>
+				<!-- <u-divider color="#fa3534" half-width="200" border-color="#6d6d6d">姑苏城外寒山寺</u-divider> -->
+			</view>
+		</view>
+		<!-- 订单备注 -->
+		<view class="remark">
+			<view class="remark_bg">
+				<view class="remark_title">订单备注</view>
+				<u-textarea class="remark_value"  placeholder="请填写口味、偏好等要求" :type="'textarea'" v-model="remark" :border="false" :clearable="true"/>
+			</view>
+		</view>
+		
+		<!-- 支付方式 -->
+		<view class="paymentMethod">
+			<view class="paymentMethod_content">
+				<view class="paymentMethod_title">支付方式</view>
+				<u-radio-group v-model="radiovalue" iconPlacement="right" @change="groupChange" :size="28"
+					placement="column">
+					<block v-for="(item,index) in paymentMethodList" :key="index">
+							<view class="method_list" @click="groupChange(index+1)">
+								<view class="method_list_top">
+									<view class="method_list_top_left">
+										<image class="icon" :src="item.url" mode="widthFix"/>
+										<text class="name"> {{ item.name }} </text>
+									</view>
+									<u-radio activeColor="#E8AD7B" icon-size="36" size="36" :name="index+1">
+									</u-radio>
+								</view>
+								<view class="method_list_bom" v-if="item.type == 1">
+									<text class="balance">会员卡余额 ￥{{amountVIP?amountVIP.amount:0}}</text>
+									<text class="topUpNow" @click="goRecharge">去充值</text>
+								</view>
+							</view>
+						
+					</block>
+		
+				</u-radio-group>
+				
+				
+				
+			
+			</view>
+		</view>
+		
+		<view class="bottom">
+			<view class="bottom_left">
+				<text style="margin-bottom: 5rpx;">实付金额</text>
+				<text class="totalAmount">￥{{ listinfo.payAmount }} </text>
+			</view>
+			<view class="paymentBtnText"  @tap="$u.debounce(showpopupclickdd, 500)" v-if="listinfoid && listinfo"> {{ paymentBtnText }} </view>
+			<view class="paymentBtnText"  @tap="$u.debounce(orderdetail, 500)" v-else> {{ paymentBtnText }} </view>
+		</view>
+		
+		<!-- 支付密码 -->
+		<payPassword ref="payPwd" @accountPayevent="accountPayevent" v-if="ispws"></payPassword>
+	</view>
+</template>
+
+<script>
+	import navseat from '@/components/navseat.vue'
+	import webSocketUtils from '@/common/js/websocket.js'
+	import payPassword from '@/components/payPassword.vue'
+	export default {
+		components: {
+			payPassword,
+			navseat
+		},
+		data() {
+			return {
+				opacitys: false,
+				toplist: {
+					name: '确认订单'
+				},
+				is_type: 1,
+				is_typeList: [
+					{ title: "送餐到桌", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab1.png" , url_active: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab1_active.png"},
+					{ title: "打包外带", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab2.png" , url_active: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/tab2_active.png"},
+				],
+				orderList: [
+					{ name: "美式咖啡", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/img.png", type: "热+浓郁型+2份浓郁型浓缩", num: 1, Price: 33,},
+					{ name: "美式咖啡", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/img.png", type: "热+浓郁型+2份浓郁型浓缩", num: 1, Price: 33,},
+					{ name: "美式咖啡", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/img.png", type: "热+浓郁型+2份浓郁型浓缩", num: 1, Price: 33,},
+					{ name: "美式咖啡", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/img.png", type: "热+浓郁型+2份浓郁型浓缩", num: 1, Price: 33,},
+					{ name: "美式咖啡", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/img.png", type: "热+浓郁型+2份浓郁型浓缩", num: 1, Price: 33,},
+				],
+				favorable: [
+					{ name: "优惠券", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/coupon.png"},
+					{ name: "团购优惠", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/groupOffer.png"},
+				],
+				paymentMethodList:[
+					{ name: "会员卡支付", type: "1", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png"},
+					{ name: "微信支付", type: "2", url: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/weChat.png"},
+				],
+				order: {
+					phone: "",
+				},
+				cartLists: [],
+				listinfo: {
+					details: [],
+					payAmount: 0,
+				},
+				tableValue: "A203",	// 桌台号
+				totalPrice: 0, 	// 小计金额
+				totalAmount: 20,	// 支付金额
+				remark: "",			// 备注
+				radiovalue: 1,		// 支付方式
+				ispws: false,  		// 输入支付密码 
+				amountVIP: null,	// 会员信息
+				listinfoid: null,
+				paymentBtnText: "会员卡支付",
+			}
+		},
+		computed: {
+			HeighT() { //手机类型的尺寸
+				return this.$store.getters.is_BarHeight
+			},
+		},
+		onUnload() {
+			this.socketTicket.Close()
+			uni.$off('getMessage')
+			this.ispws = false
+		},
+		onHide() {
+			this.socketTicket.Close()
+			uni.$off('message')
+		},
+		onShow() {
+			uni.$on('message', this.getMessage)
+			if (this.listinfoid) {
+				this.orderorderInfo()
+			} else {
+				this.handlemessage()
+			}
+			this.getAount()
+		},
+		methods: {
+			
+			/**
+			 * 消息监听
+			 * @param {Object} msg
+			 */
+			getMessage(msg) {
+				if (msg == 1) { // 网络在连接
+					return false
+				}
+				if (msg.type == 'heartbeat') { //后台心跳  处理返回  不然控制台一直报错
+					return false
+				}
+				if (msg.status != 'success') {
+					uni.showToast({
+						title: msg.msg,
+						icon: "none",
+					})
+					return false;
+			
+				} else {
+					switch (msg.type) {
+						case 'createOrder':
+							this.listinfoid = msg.data.id
+							uni.$off('getMessage')
+							this.orderorderInfo(1)
+							break;
+						case 'addCart':
+							console.log("商品列表===",msg)
+							this.listinfo.details = msg.data;
+							this.listinfo.payAmount = msg.amount;
+							
+							break;
+						case 'order':
+							uni.navigateBack()
+							setTimeout(() => {
+								uni.showToast({
+									title: '您的小伙伴已下单了哦~~'
+								})
+							}, 1000)
+							break;
+						case 'addcart':
+							/*插入一条弹幕*/
+							this.$refs.lBarrage.add(
+								`${msg.reqData.nickName?msg.reqData.nickName:'微信用户'}${msg.reqData.num==-1?'取消了':'添加了'}${msg.reqData.name}(${msg.reqData.num})`
+							);
+							break;
+					}
+					this.$set(this, 'cartLists', msg)
+				}
+			
+			},
+			
+			/**
+			 * 监听送餐/打包切换
+			 * @param {Object} val
+			 */
+			tabClick ( val ) {
+				this.is_type = val; 
+				console.log(this.is_type)
+			},
+			
+			/**
+			 * 监听支付方式切换
+			 * @param {Object} n
+			 */
+			groupChange(n) {
+				this.radiovalue = n;
+				this.paymentBtnText = n==1?'会员卡支付':'微信支付'
+			},
+			
+			/**
+			 * 初始化socket
+			 */
+			handlemessage() {
+				//调用前先判断是否有socket正在进行 先关闭后链接
+				this.socketTicket ? this.socketTicket.Close() : null 
+				this.socketTicket = new webSocketUtils(`${uni.conf.baseUrlwws}`, 5000, {
+					tableId: uni.cache.get('tableCode'),
+					shopId: uni.cache.get('shopUser'),
+					userId: uni.cache.get('userInfo').id,
+					"type": "connect",
+				})
+			},
+			
+			/**
+			 * 数据处理
+			 * @param {Object} data
+			 */
+			socketSendMsg(data) {
+				if (this.socketTicket) {
+					this.socketTicket.send(data);
+				}
+			},
+			
+			/**
+			 * 获取会员信息
+			 */
+			async getAount() {
+				let res = await this.api.shopUserInfo({
+					"shopId": uni.cache.get('shopUser'),
+					"userId": uni.cache.get('userInfo').id,
+				})
+				if (res.code == 0) {
+					console.log("会员信息===",res)
+					this.amountVIP = res.data
+				}
+			},
+			
+			/**
+			 * 查询订单信息
+			 * @param {Object} i
+			 */
+			async orderorderInfo(i) {
+				console.log(this.listinfo)
+				let res = await this.api.orderorderInfo({
+					orderId: this.listinfoid
+				})
+				if (res.code == 0) {
+					console.log(res)
+					// this.listinfo = res.data
+					if (i == 1) { //请求完了详情在去调支付
+						this.showpopupclickdd()
+					}
+				}
+			},
+			
+			/**
+			 * 去充值
+			 */
+			goRecharge() {
+				// 判断是否绑定手机,只有下单时候有,会员列表肯定有
+				// console.log(this.amountVIP.isVip, '调试1')
+				if (this.amountVIP.isVip == 0) {
+					// 跳转到开通页面
+					uni.navigateTo({
+						url: '/pages/member/activatedmemberone?shopId=' + uni.cache.get('shopUser')
+					})
+				} else {
+					uni.pro.navigateTo('/pages/member/index', {
+						shopId: uni.cache.get('shopUser')
+					})
+				}
+			},
+			
+			/**
+			 *  生成订单
+			 */
+			orderdetail() {
+				console.log(this.radiovalue)
+				let data = {
+					"skuId": '',
+					"num": '', //数量
+					"type": "createOrder", //“addcart:添加购物车，create0rder:生成订单，clearCart:庆康购物车”，
+					"remark": this.remark,
+					"couponsId": '', //优惠券ID,
+					"isYhq": 0, // 是否使用优惠券（ 1： 使用， 0： 不使用）,
+					"isBuyYhq": 0, // 是否购买优惠券（ 1： 购买， 0： 不够买）
+					"productId": '', //商品id
+					"shopId": uni.cache.get('shopUser'),
+					"userId": uni.cache.get('userInfo').id,
+				}
+				uni.$u.debounce(this.socketSendMsg(data), 500)
+			},
+			
+			/**
+			 * 去支付
+			 */
+			showpopupclickdd() {
+				console.log(this.radiovalue)
+				uni.showLoading({
+					title: '加载中',
+					mask: true
+				})
+				// radiovalue为2是微信支付
+				if (this.radiovalue == 2) {
+					this.showpopupclickdds() //微信支付
+				} else {
+					// 先判断是否设置支付密码。0是没设置。没设置的情况下跳转到设置页面。有的话输入支付密码
+					// console.log(isPwd,'是否设置了支付密码')
+					if (uni.cache.get('userInfo').isPwd == 0) {
+						uni.pro.navigateTo('/pages/user/repairpassword', {
+							shopId_id: uni.cache.get('shopUser')
+						})
+					} else {
+						uni.hideLoading()
+						this.ispws = true
+						this.$nextTick(() => {
+							this.$refs.payPwd.onPayUp();
+						})
+					}
+				}
+			},
+			
+			/**
+			 * 微信支付
+			 */
+			async showpopupclickdds() {
+				console.log(this.listinfoid)
+				let res = await this.api.payorderPay({
+					orderId: this.listinfoid
+				}) //判断是否支付成功
+				if (res.code == 0) {
+			
+					// #ifdef MP-WEIXIN
+					// 微信支付还是余额支付
+					uni.requestPayment({
+						provider: 'wxpay', //支付类型-固定值
+						partnerid: res.data.appId, // 微信支付商户号
+						timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
+						nonceStr: res.data.nonceStr, // 随机字符串
+						package: res.data.package, // 固定值
+						signType: res.data.signType, //固定值
+						paySign: res.data.paySign, //签名
+						success: (res) => {
+							let _this = this
+							uni.requestSubscribeMessage({
+								tmplIds: ['z0fUG7-jhSfYCrw6poOvSRzh4_hgnPkm_5C7E5s5bCQ'],
+								complete() {
+									uni.showToast({
+										title: "支付成功"
+									})
+									// uni.cache.set('shopUser', '') //删除shopUser
+									_this.paymodfiyOrderInfo()
+									uni.redirectTo({
+										url: '/pages/order/order_detail?orderId=' + _this
+											.listinfoid
+									});
+								},
+							})
+						},
+						fail: () => {
+							uni.hideLoading()
+						}
+					});
+					// #endif	
+					uni.hideLoading()
+				}
+			},
+			
+			/**
+			 * 支付完成后请求
+			 */
+			async paymodfiyOrderInfo() { 
+				let res = await this.api.paymodfiyOrderInfo({
+					orderId: this.listinfoid,
+				})
+			},
+			
+			/**
+			 * 余额支付
+			 * @param {Object} pwd
+			 */
+			async accountPayevent(pwd) {
+				this.ispws = false
+				let res = await this.api.accountPay({
+					orderId: this.listinfoid,
+					memberId: this.amountVIP.id,
+					pwd: pwd
+				})
+				if (res.code == 0) {
+					// data ->1 支付成功
+					// ->2 余额不足
+					// ->3 未设置支付密码，
+					// ->4 不是会员，
+					if (res.data == 1) {
+						this.showToastUppop('支付成功')
+						let _this = this
+			
+						uni.requestSubscribeMessage({
+							tmplIds: ['z0fUG7-jhSfYCrw6poOvSRzh4_hgnPkm_5C7E5s5bCQ'],
+							complete() {
+								uni.redirectTo({
+									url: '/pages/order/order_detail?orderId=' + _this
+										.listinfoid
+								});
+							},
+						})
+			
+					} else if (res.data == 2) {
+						this.showToastUppop('余额不足')
+						setTimeout(() => {
+							// 去充值
+							this.goRecharge()
+						}, 1500)
+					} else if (res.data == 3) {
+						this.showToastUppop('未设置支付密码')
+						setTimeout(() => {
+							uni.pro.navigateTo('/pages/user/repairpassword', {
+								shopId_id: uni.cache.get('shopUser')
+							})
+						}, 1500)
+			
+					} else if (res.data == 4) {
+						this.showToastUppop('非会员请充值')
+						setTimeout(() => {
+							// 去充值
+							this.goRecharge()
+						}, 1500)
+					}
+			
+				}
+			
+			},
+
+			showToastUppop(title) {
+				uni.showToast({
+					icon: 'none',
+					title,
+					success: () => {
+					}
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.head{
+		width: 100%;
+		padding: $uni-spacing-row-base;
+		box-sizing: border-box;
+		position: relative;
+		.head_bg{
+			height: 456rpx;
+			background: linear-gradient( 180deg, #E8AD7B 0%, #F5F5F5 100%);
+			position: absolute;
+			left: 0;
+			right: 0;
+			top: 0;
+			margin: auto;
+		}
+		.tips{
+			width: 100%;
+			height: 64rpx;
+			line-height: 64rpx;
+			background: #FFF8E8;
+			border-radius: 8rpx 8rpx 8rpx 8rpx;
+			font-size: $uni-font-size-base;
+			color: #FF803D;
+			font-weight: 400;
+			padding: 0 16rpx;
+			box-sizing: border-box;
+			position: relative;
+			z-index: 1;
+		}
+		.tabBox{
+			width: 100%;
+			margin-top: 52rpx;
+			position: relative;
+			z-index: 1;
+			.tab{
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				border-radius: 22rpx;
+				background-color: $uni-bg-color;
+				.tab_item{
+					width: 50%;
+					height: 90rpx;
+					line-height: 90rpx;
+					display: flex;
+					align-items: center;
+					padding-left: 30rpx;
+					box-sizing: border-box;
+					background-color: #FEFBF8;
+					border-radius: 22rpx 22rpx 0 0;
+					position: relative;
+					.title{
+						font-weight: 500;
+						font-size: 28rpx;
+						color: #999999;
+						position:relative;
+						z-index: 1;
+					}
+					.title.active{
+						color: #E8AD7B;
+					}
+					.icon{ 
+						width: 48rpx;
+						height: 48rpx;
+						margin-right: 16rpx;
+						position:relative;
+						z-index: 1;
+					}
+				}
+				.tab_item.active{
+					background-color: #fff;
+				}
+				// .tab_item.active:after {
+				//  content: "";
+				//          position: absolute;
+				//          top: 0;
+				//          left: -4px;
+				//          width: 40px;
+				//          height: 26px;
+				//          background: orange;
+				// }
+				.tab_item.active:before {
+					content: "";
+				    position: absolute;
+				    top: -20rpx;
+				    left: 0;
+				    right: 0;
+				    bottom: 0;
+				    border-radius: 2px;
+				    background: #fff;
+				    transform: skewX(0deg);
+				}
+				.tab_item1.active:before{
+					border-radius: 22rpx 40rpx 0 0;
+				}
+				.tab_item2.active:before{
+					border-radius: 40rpx 22rpx 0 0;
+				}
+			}
+			.table{
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 0 30rpx;
+				box-sizing: border-box;
+				height: 90rpx;
+				background-color: $uni-bg-color;
+				border-radius: 0 0 22rpx 22rpx;
+				.title{
+					display: flex;
+					align-items: center;
+					color: #E8AD7B;
+				}
+				.value{
+					font-weight: 500;
+					font-size: 32rpx;
+					color: #333333;
+				}
+			}
+			
+			.pack{
+				display: flex;
+				flex-direction: column;
+				padding: 30rpx;
+				box-sizing: border-box;
+				background-color: $uni-bg-color;
+				border-radius: 0 0 22rpx 22rpx;
+				.top{
+					display: flex;
+					flex-direction: column;
+					margin-top: 8rpx;
+					.title{
+						font-size: 28rpx;
+						color: #333;
+						font-weight: bold;
+						margin-bottom: 16rpx;
+					}
+					.address{
+						font-size: 24rpx;
+						font-weight: 400;
+						color: #999;
+					}
+				}
+				
+				.list{
+					display: flex;
+					flex-direction: column;
+					.item{
+						height: 70rpx;
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						font-size: 28rpx;
+						.lable{
+							color: #666;
+							font-weight: 500;
+						}
+						.getPhone{
+							display: flex;
+							align-items: center;
+							.u-input{
+								width: 340rpx;
+								border: none;
+								input{
+									font-size: 24rpx;
+									color: #333;
+								
+								}
+								.input-placeholder{
+ 									font-size: 24rpx;
+								}
+							}
+						}
+						.text,.getBtn{
+							color: #E8AD7B;
+						}
+						.getBtn{
+							border-radius: 12rpx;
+							border: 2rpx solid #E8AD7B;
+							padding: 8rpx 20rpx;
+							box-sizing: border-box;
+						}
+					}
+				}
+					
+			}
+		}
+	}
+	
+	.content_box{
+		padding: 0 30rpx;
+		box-sizing: border-box;
+		margin-top: 10rpx;
+		position: relative;
+		z-index: 1;
+		.content{
+			background-color: $uni-bg-color;
+			border-radius: 22rpx;
+			display: flex;
+			flex-direction: column;
+			padding: 30rpx 0;
+			box-sizing: border-box;
+			.title{ 
+				font-size: 28rpx;
+				color: #666;
+				margin-bottom: 32rpx;
+				padding: 0 30rpx;
+				box-sizing: border-box;
+			}
+			.list_item{
+				display: flex;
+				margin-bottom: 32rpx;
+				padding: 0 30rpx;
+				box-sizing: border-box;
+				.left{
+					width: 100%;
+					display: flex;
+					.img{
+						width: 142rpx;
+						height: 142rpx;
+						margin-right: 34rpx;
+						flex-shrink: 0;
+					}
+					.center{
+						width: 100%;
+						display: flex;
+						flex-direction: column;
+						.center_title{
+							font-size: 32rpx;
+							font-weight: 500;
+							color: #333;
+						}
+						.type{
+							margin: 12rpx 0 10rpx 0;
+						}
+						.type,.num{
+							font-size: 24rpx;
+							color: #999;
+						}
+						
+					}
+				}
+				.price{
+					font-size: 32rpx;
+					color: #333;
+					font-weight: 500;
+				}
+			}
+			.favorable{
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 0 30rpx;
+				box-sizing: border-box;
+				margin-bottom: 32rpx;
+				.favorable_left{
+					display: flex;
+					align-items: center;
+					.icon{
+						width: 40rpx;
+						height: 40rpx;
+						margin-right: 16rpx;
+					}
+					.name{
+						font-size: 28rpx;
+						font-weight: 400rpx;
+						color: #333;
+					}
+				}
+				.favorable_right{
+					font-size: 24rpx;
+					color: #999;
+					font-weight: 400rpx;
+				}
+			}
+			.totalPrice{
+				padding: 32rpx 30rpx;
+				box-sizing: border-box;
+				border-top: 2rpx solid #E5E5E5;
+				display: flex;
+				justify-content: flex-end;
+				align-items: flex-end;
+				font-size: 32rpx;
+				color: #333;
+				font-weight: bold;
+				.totalPriceNum{
+					font-size: 40rpx;
+				}
+			}
+		}
+	}
+	
+	
+	.remark{
+		padding: 0 30rpx;
+		box-sizing: border-box;
+		margin-top: 30rpx;
+		.remark_bg{
+			background-color: $uni-bg-color;
+			border-radius: 22rpx;
+			padding: 32rpx 30rpx;
+			box-sizing: border-box;
+			.remark_title{
+				font-size: 32rpx;
+				color: #333;
+				font-weight: 500;
+				margin-bottom: 16rpx;
+			}
+			.u-textarea{
+				height: 148rpx;
+				background-color: #f5f5f5;
+				border-radius: 10rpx;
+				padding: 32rpx 22rpx!important;
+				box-sizing: border-box;
+				textarea{
+					font-size: 24rpx;
+				}
+			}
+			
+		}
+	}
+	.paymentMethod{
+		padding: 0 30rpx;
+		box-sizing: border-box;
+		margin-top: 30rpx;
+		padding-bottom: 246rpx;	
+		.paymentMethod_content{
+			background-color: $uni-bg-color;
+			border-radius: 22rpx;
+			padding:30rpx 0;
+			box-sizing: border-box;
+			.paymentMethod_title{
+				font-weight: 500;
+				font-size: 32rpx;
+				color: #333333;
+				margin-bottom: 30rpx;
+				padding: 0 30rpx;
+				box-sizing: border-box;
+			}
+			.method_list{
+				padding: 20rpx 30rpx;
+				box-sizing: border-box;
+				.method_list_top{
+					display: flex;
+					justify-content: space-between;
+					.method_list_top_left{
+						display: flex;
+						.icon{
+							width: 54rpx!important;
+							margin-right: 22rpx;
+						}
+						.name{
+							font-size: 32rpx;
+							font-weight: 500;
+							color: #333;
+						}
+					}
+				}
+				.method_list_bom{
+					display: flex;
+					.balance{
+						margin-right: 20rpx;
+						margin-left: 70rpx;
+						font-size: 24rpx;
+					}
+					.topUpNow{
+						color: #FF803D;
+						font-size: 28rpx;
+					}
+				}
+			}
+			.method_list:nth-child(odd){
+				border-bottom: 2rpx solid #ccc;
+			}
+		}
+	}
+	
+	.bottom{
+		width: 100%;
+		background: #FFFFFF;
+		box-shadow: 0rpx -6rpx 14rpx 2rpx rgba(0,0,0,0.1);
+		position: fixed;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 32rpx 50rpx 82rpx 50rpx;
+		box-sizing: border-box;
+		z-index: 9;
+		.bottom_left{
+			display: flex;
+			font-size: 28rpx;
+			font-weight: 500;
+			color: #333;
+			align-items: flex-end;
+			.totalAmount{
+				font-size: 40rpx;
+				font-weight: bold;
+				margin-top: 5rpx;
+			}
+		}
+		.paymentBtnText{
+			width: 216rpx;
+			height: 76rpx;
+			line-height: 76rpx;
+			background: #E8AD7B;
+			border-radius: 36rpx 36rpx 36rpx 36rpx;
+			font-weight: 400;
+			font-size: 32rpx;
+			color: #FFFFFF;
+			text-align: center;
+		}
+	}
+</style>
diff --git a/static/order/coupon.png b/static/order/coupon.png
new file mode 100644
index 0000000..95df631
Binary files /dev/null and b/static/order/coupon.png differ
diff --git a/static/order/groupOffer.png b/static/order/groupOffer.png
new file mode 100644
index 0000000..9ee2c59
Binary files /dev/null and b/static/order/groupOffer.png differ
diff --git a/static/order/img.png b/static/order/img.png
new file mode 100644
index 0000000..546da3d
Binary files /dev/null and b/static/order/img.png differ
diff --git a/static/order/stored.png b/static/order/stored.png
new file mode 100644
index 0000000..dc04d4a
Binary files /dev/null and b/static/order/stored.png differ
diff --git a/static/order/tab1.png b/static/order/tab1.png
new file mode 100644
index 0000000..236c982
Binary files /dev/null and b/static/order/tab1.png differ
diff --git a/static/order/tab1_active.png b/static/order/tab1_active.png
new file mode 100644
index 0000000..77300d7
Binary files /dev/null and b/static/order/tab1_active.png differ
diff --git a/static/order/tab2.png b/static/order/tab2.png
new file mode 100644
index 0000000..b7d688d
Binary files /dev/null and b/static/order/tab2.png differ
diff --git a/static/order/tab2_active.png b/static/order/tab2_active.png
new file mode 100644
index 0000000..3069b8b
Binary files /dev/null and b/static/order/tab2_active.png differ
diff --git a/static/order/table.png b/static/order/table.png
new file mode 100644
index 0000000..54bb93e
Binary files /dev/null and b/static/order/table.png differ
diff --git a/static/order/weChat.png b/static/order/weChat.png
new file mode 100644
index 0000000..dbf0106
Binary files /dev/null and b/static/order/weChat.png differ