diff --git a/pages.json b/pages.json
index 821bde7..801c5d6 100644
--- a/pages.json
+++ b/pages.json
@@ -199,6 +199,13 @@
 					"navigationBarTitleText": "全部订单"
 				}
 			},
+			{
+				"path": "order/orderDetail",
+				"style": {
+					"navigationBarTitleText": "订单详情",
+					"navigationStyle": "custom"
+				}
+			},
 			{
 				"path": "homestay/index",
 				"style": {
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 997a87c..7e9c3cc 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -124,7 +124,7 @@
 						this.gotoDetailByType(item.product_model)
 						break;
 					case 2:
-						this.gotoPath(item.tdata.url)
+						this.gotoPath(item.front_model.inside)
 						break;
 					case 3:
 						this.gotoWebUrl(item.tdata.url)
diff --git a/pages/login/login.vue b/pages/login/login.vue
index 5ab064a..549692a 100644
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -27,6 +27,7 @@ export default {
     data() {
         return {
             isAgreed: false,
+			openid: ''
         };
     },
     onLoad(options) {
@@ -46,10 +47,10 @@ export default {
                     code: e.detail.code,
                     encryptedData: e.detail.encryptedData,
                     iv: e.detail.iv,
-                    token: uni.getStorageSync('token1')
-                }, '/api/mini_program/bindPhoneNumber')
+                    openid: this.openid
+                }, '/api/uservice/user/bindPhoneNumber')
                .then(res => {
-                    this.$store.commit('changeUserInfo', res.data.userinfo);
+                    this.$store.commit('changeUserInfo', res.data);
                     this.navigateBasedOnPath();
                 })
                .catch(error => {
@@ -107,11 +108,11 @@ export default {
 								loginType: 3
                             }, '/api/uservice/user/wxLogin')
                            .then(resTwo => {
-                                this.$store.commit('changeUserInfo', resTwo.data.userinfo);
-                                if (resTwo.data.userinfo.mobile) {
+                                this.$store.commit('changeUserInfo', resTwo.data);
+                                if (resTwo.data.isBindMobile) {
                                     this.navigateBasedOnPath();
                                 } else {
-                                    uni.setStorageSync('token1', resTwo.data.userinfo.token);
+                                    this.openid = resTwo.data.openid
                                     this.$refs.popup.open('bottom');
                                 }
                             })
diff --git a/pages/user/user.vue b/pages/user/user.vue
index ec2bca9..a2a76a6 100644
--- a/pages/user/user.vue
+++ b/pages/user/user.vue
@@ -10,7 +10,7 @@
 						class="headImg" v-else></image>
 				</view>
 				<view class="username" v-if="userInfo.nickname">{{userInfo.nickname}}</view>
-				<view class="username" >请登录/注册 ></view>
+				<view class="username" v-else>请登录/注册 ></view>
 			</view>
 			<view class="top-right" v-if="userInfo.nickname">
 				个人信息 <image src="https://static.ticket.sz-trip.com/tongli/images/user/rightIcon1.png" mode=""></image>
diff --git a/subPackages/homestay/order.vue b/subPackages/homestay/order.vue
index 2889b00..38bb9ba 100644
--- a/subPackages/homestay/order.vue
+++ b/subPackages/homestay/order.vue
@@ -309,6 +309,8 @@
 						}
 					]
 				}
+				
+				console.log('data',data)
 
 				this.Post({
 					method: 'POST',
@@ -316,13 +318,12 @@
 				}, '/api/order/create').then(res => {
 					console.log('成功');
 					if (res.code == 1) {
-						return;
 						uni.removeStorageSync('hotelOrderInfo')
 						this.Post({
 							order_id: res.data.order_id,
-							type: "miniprogram",
-							platform: 'miniprogram'
-						}, '/api/pay/unify').then(res => {
+							pay_platform: "miniprogram",
+							pay_method: 'abc'
+						}, '/api/order/pay').then(res => {
 							if (res.data) {
 								uni.requestPayment({
 									nonceStr: res.data.nonceStr,
diff --git a/subPackages/order/orderDetail.vue b/subPackages/order/orderDetail.vue
new file mode 100644
index 0000000..c703612
--- /dev/null
+++ b/subPackages/order/orderDetail.vue
@@ -0,0 +1,272 @@
+<template>
+	<view class="bg">
+		<view class="title-box">
+			<uni-icons type="left" size="30"  @click="goBack"></uni-icons>
+			<view>订单状态</view>
+		</view>
+		
+		<view class="state-box">
+			<view>{{info.state_text}}</view>
+		
+			<!-- 待支付时会显示自动取消时间 -->
+			<view v-if="info.state=='WAIT_PAYMENT'" class="close-time">订单将在<span>{{info.close_time.slice(-8)}}</span>自动取消</view>
+		
+			<!-- 待退款 -->
+			<view v-if="info.state=='REFUNDING'" class="close-time">系统将在1-7个工作日内原路退回您的原支付账户</view>
+		
+			<!-- 退款完成 -->
+			<view v-if="info.state=='REFUND'" class="close-time">您的退款金额已退还到您的原支付账户</view>
+		</view>
+		
+		<view class="box">
+			<!-- 循环子订单 -->
+			<view v-for="(item,index) in orderChildList" :key="index">
+				<view class="product-box">
+					<view class="title" @click="item.type=item.product_model;gotoDetailByType(item)">
+						{{item.product_title}}
+						<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/rightIcon.png" class="rightIcon"></image>
+					</view>
+					<view class="subtitle" v-if="item.use_date"><span>出行时间：</span>{{item.use_date}}</view>
+					<view class="subtitle" v-if="item.use_date"><span>开放时间：</span>{{item.use_date}}</view>
+					<view class="line"></view>
+					<view class="skutitle flex-between">
+						<view>{{item.sku_name}}</view>
+						<view>
+							<span>￥{{item.product_price / 100}}</span>
+							x{{item.product_num}}
+						</view>
+					</view>
+				</view>
+				
+				<view class="product-box">
+					<view class="title">出行人</view>
+					<view class="subtitle flex-between">
+						<span>手机号：</span>{{item.phone}}
+					</view>
+				</view>
+			</view>
+			
+			<view class="product-box">
+				<view class="subtitle flex-between">
+					<span>商品总额：</span>￥{{info.total_money / 100}}
+				</view>
+				<view class="subtitle flex-between">
+					<span>优惠券：</span>-￥{{info.preference_money / 100}}
+				</view>
+				<view class="subtitle flex-between">
+					<span>实付金额：</span><view class="price">{{info.paid_money / 100}}</view>
+				</view>
+			</view>
+			
+			<view class="product-box">
+				<view class="title">订单信息</view>
+				<view class="subtitle" style="display: flex;">
+					<span>订单账号：</span>{{info.order_id}}
+					<view class="copy flex-around" @click="clickCopy">
+						<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/copy.png"></image>
+						复制
+					</view>
+				</view>
+				<view class="subtitle">
+					<span>下单时间：</span>{{info.close_time}}
+				</view>
+			</view>
+			
+			<view class="kefu-box">
+				<image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/kefu.png"></image>
+				联系客服
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				orderId: '',
+				info: {},
+				orderChildList: []
+			}
+		},
+		onLoad(option) {
+			this.orderId = option.id
+			this.getDetail()
+		},
+		methods: {
+			getDetail() {
+				this.Post({
+					order_id: this.orderId
+				},'/api/order/query').then(res => {
+					console.log(res.data)
+					this.info = res.data
+					this.orderChildList = res.data.order_product_list
+					// 景点、线路、自提需展示二维码
+					// this.info.order_product_list.forEach(item => {})
+				})
+			},
+			// 复制订单号
+			clickCopy() {
+				uni.setClipboardData({
+					data: this.info.order_id, //要被复制的内容
+					success: () => {
+						//复制成功的回调函数
+						uni.showToast({
+							title: '复制成功',
+							icon: 'none'
+						});
+					}
+				});
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.bg {
+		width: 750rpx;
+		overflow-x: hidden;
+		min-height: 100vh;
+		background-color: #F7F7F7;
+		padding-bottom: 200rpx;
+	}
+	
+	.title-box {
+		font-size: 40rpx;
+		padding: 0 26.67rpx;
+		z-index: 2;
+		display: flex;
+		align-items: center;
+		width: 100%;
+		background: #D3E8A7;
+		height: 176rpx;
+		padding: 90rpx 26rpx 0 ;
+	
+		view {
+			font-weight: 400;
+			font-size: 36rpx;
+			color: #000000;
+			margin-left: 230rpx;
+		}
+	}
+	
+	.state-box {
+		width: 750rpx;
+		height: 240rpx;
+		background: linear-gradient(180deg, #D3E8A7, #D3E8A7, #D3E8A7, #F7F7F7);
+		padding: 42rpx 0 0 53rpx;
+		font-weight: bold;
+		font-size: 43rpx;
+		color: #000000;
+	
+		.close-time {
+			font-weight: 500;
+			font-size: 27rpx;
+			color: #000000;
+			
+			span {
+				color: #C3282E;
+			}
+		}
+	}
+	
+	.box {
+		position: relative;
+		padding: 0 26rpx;
+		margin-top: -66rpx;
+		
+		.product-box {
+			padding: 28rpx 28rpx 46rpx;
+			margin-bottom: 22rpx;
+			background: #FFFFFF;
+			border-radius: 20rpx;
+			
+			.title {
+				font-weight: bold;
+				font-size: 36rpx;
+				color: #000000;
+				display: flex;
+				align-items: center;
+				
+				.rightIcon {
+					width: 17.33rpx;
+					height: 29.33rpx;
+					margin-left: 25rpx;
+				}
+			}
+			
+			.subtitle {
+				font-weight: 500;
+				font-size: 27rpx;
+				color: #000000;
+				margin-top: 18rpx;
+				
+				span {
+					color: #666666;
+					min-width: 125rpx;
+				}
+			}
+			
+			.line {
+				width: 643rpx;
+				height: 1rpx;
+				background: #D8D8D8;
+				margin: 33rpx 0;
+			}
+			
+			.skutitle {
+				font-weight: 500;
+				font-size: 27rpx;
+				color: #000000;
+				
+				span {
+					margin-right: 60rpx;
+				}
+			}
+			
+			.price {
+				font-weight: bold;
+				font-size: 34rpx;
+				color: #C3282E;
+			}
+			.price::before {
+				font-size: 24rpx;
+				content: '￥';
+			}
+			
+			.copy {
+				width: 93rpx;
+				height: 37rpx;
+				border-radius: 11rpx;
+				border: 1rpx solid #515150;
+				font-weight: 500;
+				font-size: 22rpx;
+				color: #515150;
+				margin-left: 30rpx;
+				
+				image {
+					width: 22rpx;
+					height: 23.33rpx;
+				}
+			}
+		}
+		
+		.kefu-box {
+			height: 96rpx;
+			background: #FFFFFF;
+			border-radius: 20rpx;
+			padding-left: 27rpx;
+			display: flex;
+			align-items: center;
+			font-weight: 500;
+			font-size: 31rpx;
+			color: #000000;
+			
+			image {
+				width: 44rpx;
+				height: 44rpx;
+				margin-right: 14rpx;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/subPackages/order/trades.vue b/subPackages/order/trades.vue
index b66a2c0..7954d0d 100644
--- a/subPackages/order/trades.vue
+++ b/subPackages/order/trades.vue
@@ -1,678 +1,768 @@
 <template>
-	<view class="bg">
-		<view class="top-bg">
-			<view class="search-box">
-				<view class="left">
-					<image src="https://static.ticket.sz-trip.com/yandu/images/eventCalendar/search.png"
-						mode="aspectFill"></image>
-					<input v-model="keywords" type="text" placeholder="请输入关键字" @confirm="search()" />
-				</view>
-
-				<!-- <view class="btn" @click="search()">搜索</view> -->
-			</view>
-			<view class="common-box">
-				<view class="common-types com-flex-tao">
-					<view @click="setType(index)" v-for="(item, index) in typeList" :key="item.id"
-						:class="['common-type', typeIndex == index ? 'active' : '']">
-						{{ item.name }}
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="list-common-empty" v-if="list.length == 0">
-			<img src="https://static.ticket.sz-trip.com/shiweisuzhou/images/user/noTrades.png" />
-			<p class="list-common-empty-tip">还没有订单，赶快去下单吧~</p>
-		</view>
-		<view class="trade-list" v-if="list.length > 0">
-			<view v-for="(item, key) in list" :key="item.id" class="trade-items" v-if="showItem(item)"
-				@click="() => choseType(item)">
-				<view class="trade-item-head">
-					<view class="trade-item-head-tid">订单编号:{{ item.order_id }}</view>
-					<view class="trade-item-head-state">{{ item.state_text }}</view>
-				</view>
-				<view class="trade-item-pros">
-					<view class="trade-item-pro" v-for="(pro, proIndex) in item.order_product_list" :key="pro.child_id">
-						<view class="trade-item-pro-img" v-if="pro.product_img">
-							<image :src="showImg(pro.product_img)" mode="aspectFill"></image>
-						</view>
-						<view style="flex: 1;">
-							<view class="trade-item-pro-title">{{ pro.product_title }}</view>
-							<view class="trade-item-pro-subtitle">{{ pro.sku_name }}</view>
-						</view>
-						<view class="trade-item-pro-price">
-							<view class="trade-item-pro-price-pri">￥{{ pro.product_price / 100 }}</view>
-							<view class="trade-item-pro-num">x{{ pro.product_num }}</view>
-						</view>
-					</view>
-				</view>
-				<view class="trade-item-info">
-					合计
-					<text>{{ item.total_money / 100 }}</text>
-				</view>
-				<view class="trade-item-btns">
-					<view @click.stop="() => refund(item.order_id, key)" v-if="item.status == 'PAYMENT_SUCCESSFULLY'">
-						申请退款</view>
-					<view @click.stop="() => closeOrder(item.order_id, item)" v-if="item.status == 'WAIT_PAYMENT'">关闭订单
-					</view>
-					<view @click.stop="confirmpost(item.order_id, key)" v-if="item.postFlag">确认收货</view>
-					<view class="pay-btn" @click.stop="setOrderId(item.order_id)" v-if="item.status == 'WAIT_PAYMENT'">
-						立即支付</view>
-				</view>
-			</view>
-		</view>
-		<!-- <view v-if="list.length === 0 && finished" class="noDate">
-			<view>暂无订单</view>
-		</view> -->
-	</view>
+    <view class="bg">
+        <!-- 顶部搜索和筛选区域 -->
+        <view class="top-bg">
+            <view class="flex-around" style="margin-bottom: 20rpx;">
+                <view class="search-box">
+                    <view class="left">
+                        <image src="https://static.ticket.sz-trip.com/yandu/images/eventCalendar/search.png" mode="aspectFill"></image>
+                        <input v-model="keywords" type="text" placeholder="请输入关键字" @confirm="search" />
+                    </view>
+                </view>
+                <view class="select-btn" @click="range = []; dateIndex = null; $refs.popup.open()">
+                    <image src="https://static.ticket.sz-trip.com/shiweisuzhou/images/order/select.png" mode="aspectFill"></image>
+                    筛选
+                </view>
+            </view>
+            <view class="common-box">
+                <view class="common-types com-flex-tao">
+                    <view @click="setType(index)" v-for="(item, index) in typeList" :key="item.id"
+                          :class="['common-type', typeIndex === index ? 'active' : '']">
+                        {{ item.name }}
+                    </view>
+                </view>
+            </view>
+        </view>
+        <!-- 无订单提示 -->
+        <view class="list-common-empty" v-if="list.length === 0">
+            <img src="https://static.ticket.sz-trip.com/shiweisuzhou/images/user/noTrades.png" />
+            <p class="list-common-empty-tip">还没有订单，赶快去下单吧~</p>
+        </view>
+        <!-- 订单列表 -->
+        <view class="trade-list" v-if="list.length > 0">
+            <view v-for="(item, key) in list" :key="item.id" class="trade-items" v-if="showItem(item)"
+                  @click="() => choseType(item)">
+                <view class="trade-item-head">
+                    <view class="trade-item-head-tid">订单编号:{{ item.order_id }}</view>
+                    <view class="trade-item-head-state">{{ item.state_text }}</view>
+                </view>
+                <view class="trade-item-pros">
+                    <view class="trade-item-pro" v-for="(pro, proIndex) in item.order_product_list" :key="pro.child_id">
+                        <view class="trade-item-pro-img" v-if="pro.product_img">
+                            <image :src="showImg(pro.product_img)" mode="aspectFill"></image>
+                        </view>
+                        <view style="flex: 1;">
+                            <view class="trade-item-pro-title">{{ pro.product_title }}</view>
+                            <view class="trade-item-pro-subtitle">{{ pro.sku_name }}</view>
+                        </view>
+                        <view class="trade-item-pro-price">
+                            <view class="trade-item-pro-price-pri">￥{{ pro.product_price / 100 }}</view>
+                            <view class="trade-item-pro-num">x{{ pro.product_num }}</view>
+                        </view>
+                    </view>
+                </view>
+                <view class="trade-item-info">
+                    合计
+                    <text>{{ item.total_money / 100 }}</text>
+                </view>
+                <view class="trade-item-btns">
+                    <view @click.stop="() => refund(item.order_id, key)" v-if="['WAIT_POST','WAIT_USE','PAID'].includes(item.state)">
+                        取消订单
+                    </view>
+                    <view @click.stop="() => closeOrder(item.order_id, item)" v-if="item.state === 'UNPAID'">
+                        关闭订单
+                    </view>
+                    <!-- <view @click.stop="confirmpost(item.order_id, key)" v-if="item.postFlag">确认收货</view> -->
+                    <view class="pay-btn" @click.stop="setOrderId(item.order_id)" v-if="item.state === 'UNPAID'">
+                        立即支付
+                    </view>
+                </view>
+            </view>
+        </view>
+
+        <!-- 筛选弹框 -->
+        <uni-popup ref="popup" type="bottom" :safe-area="false">
+            <view class="popup-box">
+                <view class="popup-top flex-between">
+                    <view @click="$refs.popup.close()">取消</view>
+                    <view>订单筛选</view>
+                    <view @click="changeDate">确定</view>
+                </view>
+                <view class="popup-content">
+                    <view class="content-top">下单时间</view>
+                    <view class="content-bottom">
+                        <view class="flex-between">
+                            <view :class="['content-item', {'content-active': dateIndex === 0 && range.length === 0}]"
+                                  @click="range = []; dateIndex = 0">近七天</view>
+                            <view :class="['content-item', {'content-active': dateIndex === 1 && range.length === 0}]"
+                                  @click="range = []; dateIndex = 1">近三十天</view>
+                        </view>
+                        <uni-datetime-picker v-model="range" type="daterange" :end="new Date().Format('Y-MM-dd')" />
+                    </view>
+                </view>
+            </view>
+        </uni-popup>
+    </view>
 </template>
 
 <script>
-	export default {
-		name: 'Trades',
-		data() {
-			return {
-				finished: false,
-				list: [],
-				typeList: [{
-						name: '全部',
-						id: 'ALL'
-					},
-					{
-						name: '待付款',
-						id: 'WAIT_PAYMENT'
-					},
-					{
-						name: '待发货',
-						id: 'WAIT_POST'
-					},
-					{
-						name: '待使用/出行',
-						id: 'WAIT_USE'
-					},
-					{
-						name: '待收货',
-						id: 'WAIT_DELIVERY'
-					},
-					{
-						name: '退款/售后',
-						id: 'NEED_REFUND'
-					}
-				],
-				typeIndex: 0,
-				ajaxFlag: true,
-				keywords: '',
-				orderId: null,
-				dateRange: [],
-				type: ''
-			};
-		},
-		onLoad(options) {
-			console.log(options);
-			if (options.type) this.typeIndex = this.typeList.findIndex(vm => vm.name === options.type);
-			uni.$on("updateDataByConnect", this.getDataByConnect)
-		},
-		onShow() {
-			this.getList();
-		},
-		onUnload() {
-			uni.$off("updateDataByConnect", this.getDataByConnect)
-		},
-		onReachBottom() {
-			if (this.finished) return false;
-			this.getList();
-		},
-		methods: {
-			getDataByConnect(data) {
-				if (data.msgType == "updateOrderTrades") {
-					this.list = [];
-					this.finished = false;
-					this.getList()
-				}
-			},
-			emptyFunc() {
-
-			},
-			showItem(item) {
-				let flag = true;
-				// if (this.typeIndex == 2 && item.order_child[0] && !item.order_child[0].consignee) flag = false
-				return flag;
-			},
-			onReload() {
-				this.list = [];
-				this.finished = false;
-				this.getList();
-			},
-			setType(index) {
-				this.typeIndex = index;
-				this.onReload();
-			},
-			setOrderId(id) {
-				let that = this;
-				that.orderId = id;
-				that.Post({
-						order_id: id,
-						type: "miniprogram",
-						platform: 'miniprogram'
-					},
-					'/api/pay/unify'
-				).then(res => {
-					if (res.data) {
-						uni.requestPayment({
-							nonceStr: res.data.nonceStr,
-							package: res.data.package,
-							paySign: res.data.paySign,
-							signType: res.data.signType,
-							timeStamp: res.data.timeStamp,
-							success: () => {
-								const templateIds = [
-									// 退款成功通知
-									'hRZoiEES2BWtKb6Xgsnn8khLQH9un5j_11qu0bwlhfE',
-									// 出票结果通知
-									'YyTCUIYBnrj9CyKks8cOjNX_Rk8a4yVdswMP-zXVbhc'
-								]
-								uni.requestSubscribeMessage({
-									tmplIds: templateIds,
-									complete (res) {
-										that.list = [];
-										that.finished = false;
-										that.getList()
-									}
-								})
-							}
-						});
-					}
-				});
-			},
-			// 确认收货
-			confirmpost(id, index) {
-				let that = this;
-				uni.showModal({
-					title: '提示',
-					content: '是否确认收货？',
-					success: successRes => {
-						if (successRes.confirm) {
-							that.Post({
-									order_id: id
-								},
-								'/api/order/confirmPost'
-							).then(res => {
-								if (res.code == 1) {
-									list[index].order_child.map(item => {
-										item.status = 'WAIT_COMMENT';
-									});
-									list[index].status = 'WAIT_COMMENT';
-									list[index].postFlag = false;
-									that.list = list;
-									uni.showToast({
-										title: '操作成功'
-									});
-									that.$forceUpdate();
-								}
-							});
-						}
-					}
-				});
-			},
-			// 关闭订单
-			closeOrder(id, index) {
-				console.log(id);
-				console.log(index);
-				let that = this;
-				uni.showModal({
-					title: '提示',
-					content: '是否关闭订单？',
-					success: successRes => {
-						if (successRes.confirm) {
-							that.Post({
-									order_id: id
-								},
-								'/api/order/closeOrder'
-							).then(res => {
-								if (res.code == 1) {
-									uni.showToast({
-										title: '关闭成功',
-										icon: 'success'
-									});
-									that.list = [];
-									that.finished = false;
-									that.getList();
-								}
-							});
-						}
-					}
-				});
-			},
-			//删除订单
-			deletOrder(id) {
-				let that = this;
-				uni.showModal({
-					title: '提示',
-					content: '是否删除订单？',
-					success: successRes => {
-						if (successRes.confirm) {
-							that.Post({
-									order_id: id
-								},
-								'/api/order/delOrder'
-							).then(res => {
-								if (res.code == 1) {
-									uni.showToast({
-										title: '删除成功',
-										icon: 'success'
-									});
-									that.list = [];
-									that.finished = false;
-									that.getList();
-								}
-							});
-						}
-					}
-				});
-			},
-			// 申请退款
-			refund(id, index) {
-				console.log(id);
-				let that = this;
-				uni.showModal({
-					title: '提示',
-					content: '是否申请退款？',
-					success: successRes => {
-						if (successRes.confirm) {
-							that.Post({
-									order_id: id
-								},
-								'/api/order/applyRefund'
-							).then(res => {
-								if (res.code == 1) {
-									uni.showToast({
-										title: '申请成功',
-										icon: 'success'
-									});
-									that.onReload();
-								}
-							});
-						}
-					}
-				});
-			},
-			search(e) {
-				this.list = [];
-				this.getList();
-				// if (e.keyCode == 13) {
-				// 	//  提交
-				// 	this.keywords = e.target.value;
-				// }
-			},
-			getList() {
-				let data = {
-					state: this.typeList[this.typeIndex].id == 'ALL' ? '' : this.typeList[this.typeIndex].true_id ||
-						this.typeList[this.typeIndex].id,
-					offset: this.list.length,
-					limit: 5,
-					keywords: this.keywords,
-					type: this.typeList[this.typeIndex].name == '待使用' ? 1 : (this.typeList[this.typeIndex].name ==
-						'待发货' ? 2 : '')
-				};
-				this.Post(data, '/api/order/list').then(res => {
-					this.list = [...this.list, ...res.data.list]
-					if (res.data.length < 5) {
-						this.finished = true;
-					}
-				});
-			},
-			UpdateOrder(id) {
-				this.ajaxFlag = false;
-				let list = this.list;
-				this.Post({
-						order_id: id
-					},
-					'/api/order/orderDetail'
-				).then(res => {
-					this.ajaxFlag = true;
-					list.map(item => {
-						if (item.order_id == id) {
-							item = res.data;
-						}
-					});
-					this.list = list;
-				});
-			},
-			choseType(item) {
-				uni.navigateTo({
-					url: '/subPackages/order/detail?id=' + item.order_id
-				});
-			},
-		}
-	};
+export default {
+    name: 'Trades',
+    data() {
+        return {
+            finished: false,
+            list: [],
+            typeList: [
+                { name: '全部', id: 'ALL' },
+                { name: '待付款', id: 'WAIT_PAYMENT' },
+                { name: '待发货', id: 'WAIT_POST' },
+                { name: '待使用/出行', id: 'WAIT_USE' },
+                { name: '待收货', id: 'WAIT_DELIVERY' },
+                { name: '退款/售后', id: 'NEED_REFUND' }
+            ],
+            typeIndex: 0,
+            ajaxFlag: true,
+            keywords: '',
+            orderId: null,
+            dateRange: [],
+            type: '',
+            range: [],
+            dateIndex: null,
+        };
+    },
+    onLoad(options) {
+        console.log(options);
+        if (options.type) {
+            this.typeIndex = this.typeList.findIndex(vm => vm.name === options.type);
+        }
+        uni.$on("updateDataByConnect", this.getDataByConnect);
+    },
+    onShow() {
+        this.getList();
+    },
+    onUnload() {
+        uni.$off("updateDataByConnect", this.getDataByConnect);
+    },
+    onReachBottom() {
+        if (this.finished) return false;
+        this.getList();
+    },
+    watch: {
+        range(newval) {
+            console.log('范围选:', this.range);
+        },
+    },
+    methods: {
+        // 获取近n天日期
+        getLastNDays(n) {
+            const endDate = new Date();
+            const startDate = new Date();
+            startDate.setDate(endDate.getDate() - n + 1); // 计算开始日期（包含今天）
+
+            // 格式化日期为 YYYY-MM-DD
+            const formatDate = (date) => {
+                const year = date.getFullYear();
+                const month = String(date.getMonth() + 1).padStart(2, '0');
+                const day = String(date.getDate()).padStart(2, '0');
+                return `${year}-${month}-${day}`;
+            };
+
+            return [formatDate(startDate), formatDate(endDate)];
+        },
+        // 处理数据更新事件
+        getDataByConnect(data) {
+            if (data.msgType === "updateOrderTrades") {
+                this.resetList();
+                this.getList();
+            }
+        },
+        // 显示订单项的判断逻辑
+        showItem(item) {
+            let flag = true;
+            // if (this.typeIndex === 2 && item.order_child[0] && !item.order_child[0].consignee) flag = false;
+            return flag;
+        },
+        // 重新加载数据
+        onReload() {
+            this.resetList();
+            this.getList();
+        },
+        // 设置订单类型
+        setType(index) {
+            this.typeIndex = index;
+            this.onReload();
+        },
+        // 设置订单ID并发起支付
+        setOrderId(id) {
+            this.orderId = id;
+            this.Post({
+                order_id: id,
+                type: "miniprogram",
+                platform: 'miniprogram'
+            }, '/api/pay/unify')
+               .then(res => {
+                    if (res.data) {
+                        uni.requestPayment({
+                            nonceStr: res.data.nonceStr,
+                            package: res.data.package,
+                            paySign: res.data.paySign,
+                            signType: res.data.signType,
+                            timeStamp: res.data.timeStamp,
+                            success: () => {
+                                const templateIds = [
+                                    // 退款成功通知
+                                    'hRZoiEES2BWtKb6Xgsnn8khLQH9un5j_11qu0bwlhfE',
+                                    // 出票结果通知
+                                    'YyTCUIYBnrj9CyKks8cOjNX_Rk8a4yVdswMP-zXVbhc'
+                                ];
+                                uni.requestSubscribeMessage({
+                                    tmplIds: templateIds,
+                                    complete: () => {
+                                        this.resetList();
+                                        this.getList();
+                                    }
+                                });
+                            }
+                        });
+                    }
+                });
+        },
+        // 确认收货
+        confirmpost(id, index) {
+            uni.showModal({
+                title: '提示',
+                content: '是否确认收货？',
+                success: successRes => {
+                    if (successRes.confirm) {
+                        this.Post({ order_id: id }, '/api/order/confirmPost')
+                           .then(res => {
+                                if (res.code === 1) {
+                                    this.list[index].order_child.forEach(item => {
+                                        item.status = 'WAIT_COMMENT';
+                                    });
+                                    this.list[index].status = 'WAIT_COMMENT';
+                                    this.list[index].postFlag = false;
+                                    this.list = [...this.list];
+                                    uni.showToast({ title: '操作成功' });
+                                    this.$forceUpdate();
+                                }
+                            });
+                    }
+                }
+            });
+        },
+        // 关闭订单
+        closeOrder(id, index) {
+            uni.showModal({
+                title: '提示',
+                content: '是否关闭订单？',
+                success: successRes => {
+                    if (successRes.confirm) {
+                        this.Post({ order_id: id }, '/api/order/close')
+                           .then(res => {
+                                if (res.code === 1) {
+                                    uni.showToast({ title: '关闭成功', icon: 'success' });
+                                    this.resetList();
+                                    this.getList();
+                                }
+                            });
+                    }
+                }
+            });
+        },
+        // 删除订单
+        deletOrder(id) {
+            uni.showModal({
+                title: '提示',
+                content: '是否删除订单？',
+                success: successRes => {
+                    if (successRes.confirm) {
+                        this.Post({ order_id: id }, '/api/order/delOrder')
+                           .then(res => {
+                                if (res.code === 1) {
+                                    uni.showToast({ title: '删除成功', icon: 'success' });
+                                    this.resetList();
+                                    this.getList();
+                                }
+                            });
+                    }
+                }
+            });
+        },
+        // 申请退款
+        refund(id, index) {
+            uni.showModal({
+                title: '提示',
+                content: '是否申请退款？',
+                success: successRes => {
+                    if (successRes.confirm) {
+                        this.Post({ order_id: id }, '/api/order/refund')
+                           .then(res => {
+                                if (res.code === 1) {
+                                    uni.showToast({ title: '申请成功', icon: 'success' });
+                                    this.onReload();
+                                }
+                            });
+                    }
+                }
+            });
+        },
+        // 搜索订单
+        search() {
+            this.resetList();
+            this.getList();
+        },
+        // 确定日期筛选
+        changeDate() {
+            if (this.dateIndex === 0) {
+                this.range = this.getLastNDays(7);
+            } else if (this.dateIndex === 1) {
+                this.range = this.getLastNDays(30);
+            }
+            this.$refs.popup.close();
+            this.resetList();
+            this.getList();
+        },
+        // 获取订单列表
+        getList() {
+            const data = {
+                state: this.typeList[this.typeIndex].id === 'ALL' ? '' : this.typeList[this.typeIndex].id,
+                offset: this.list.length,
+                limit: 5,
+                keywords: this.keywords,
+                start_date: this.range[0] || '',
+                end_date: this.range[1] || ''
+            };
+            this.Post(data, '/api/order/list')
+               .then(res => {
+                    this.list = [...this.list, ...res.data.list];
+                    if (res.data.length < 5) {
+                        this.finished = true;
+                    }
+                });
+        },
+        // 更新订单信息
+        UpdateOrder(id) {
+            this.ajaxFlag = false;
+            this.Post({ order_id: id }, '/api/order/orderDetail')
+               .then(res => {
+                    this.ajaxFlag = true;
+                    const newList = this.list.map(item => {
+                        if (item.order_id === id) {
+                            return res.data;
+                        }
+                        return item;
+                    });
+                    this.list = newList;
+                });
+        },
+        // 选择订单进入详情页
+        choseType(item) {
+            uni.navigateTo({ url: `/subPackages/order/orderDetail?id=${item.order_id}` });
+        },
+        // 重置订单列表
+        resetList() {
+            this.list = [];
+            this.finished = false;
+        }
+    }
+};
 </script>
 
 <style scoped lang="scss">
-	view {
-		box-sizing: border-box;
-	}
-
-	.common-box {
-		height: 90rpx;
-	}
-
-	.common-types {
-		background: white;
-		height: 90rpx;
-		font-size: 31rpx;
-		z-index: 10;
-		margin: auto;
-		color: #666;
-		overflow-x: scroll;
-		overflow-y: hidden;
-		padding: 0 27rpx;
-	}
-
-	.common-types::-webkit-scrollbar {
-		width: 0rpx;
-		height: 0;
-		display: none;
-	}
-
-	.common-type {
-		flex-shrink: 0;
-		margin: 0 26rpx;
-		line-height: 90rpx;
-		height: 90rpx;
-		position: relative;
-	}
-
-	.common-type.active {
-		font-size: 31rpx;
-		font-weight: bold;
-		color: #000;
-	}
-
-	.common-type.active:after {
-		display: block;
-		width: 60%;
-		font-size: 0;
-		content: '1';
-		margin: auto;
-		position: absolute;
-		left: 0;
-		right: 0;
-		bottom: 1rpx;
-		height: 4rpx;
-		background: #6A8A27;
-		border-radius: 2rpx;
-	}
-
-	.bg {
-		min-height: 100vh;
-		background-color: #f7f7f7;
-	}
-
-	.noDate {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		margin-top: 200rpx;
-	}
-
-	.noDate img {
-		width: 514rpx;
-		height: auto;
-	}
-
-	.noDate view {
-		font-size: 24rpx;
-		color: #777777;
-	}
-
-	.trade-list {
-		padding: 28rpx 26rpx;
-	}
-
-	.trade-items {
-		background-color: white;
-		margin-bottom: 28rpx;
-		border-radius: 20rpx;
-	}
-
-	.trade-item-head {
-		display: flex;
-		justify-content: space-between;
-		padding: 28rpx 20rpx;
-		border-bottom: 1rpx solid #d8d8d8;
-	}
-
-	.trade-item-head-tid {
-		font-size: 24rpx;
-		display: flex;
-		align-items: center;
-		color: #666666;
-	}
-
-	.trade-item-head-state {
-		font-size: 27rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: #6A8A27;
-	}
-
-	.trade-item-head-name {
-		display: flex;
-		align-items: center;
-
-		font-size: 31rpx;
-		font-family: PingFang SC;
-		font-weight: bold;
-		color: #333333;
-
-		image {
-			width: 33rpx;
-			height: 31rpx;
-		}
-
-		view {
-			margin-left: 13rpx;
-		}
-	}
-
-	.trade-item-pros {
-		display: flex;
-		/* background-color: #F2F2F2; */
-		flex-direction: column;
-	}
-
-	.trade-item-pro {
-		display: flex;
-		padding: 20rpx;
-		justify-content: space-between;
-	}
-
-	.trade-item-pro-img {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.trade-item-pro-img image {
-		width: 180rpx;
-		height: 180rpx;
-		border-radius: 10rpx;
-	}
-
-	.trade-item-pro-price {
-		display: flex;
-		flex-direction: column;
-	}
-
-	.trade-item-pro-title {
-		text-align: left;
-		flex: 1;
-		padding: 0 20rpx;
-		font-size: 28rpx;
-	}
-
-	.trade-item-pro-subtitle {
-		text-align: left;
-		flex: 1;
-		padding: 0 20rpx;
-		font-weight: 500;
-		font-size: 24rpx;
-		color: #6A8A27;
-		margin-top: 20rpx;
-	}
-
-	.trade-item-pro-price view {
-		display: flex;
-		flex-wrap: nowrap;
-		text-wrap: none;
-		white-space: nowrap;
-		justify-content: flex-end;
-	}
-
-	.trade-item-pro-price-pri {
-		font-size: 27rpx;
-		color: #6A8A27;
-		font-weight: 500;
-		color: #333333;
-	}
-
-	.trade-item-pro-num {
-		font-size: 24rpx;
-		color: #666666;
-		margin-top: 24rpx;
-	}
-
-	.trade-item-info {
-		font-size: 28rpx;
-		display: flex;
-		justify-content: flex-end;
-		align-items: center;
-		background-color: white;
-		padding: 0rpx 20rpx;
-		margin-top: -6rpx;
-		/* border-bottom: 1px solid #B6B6B6; */
-	}
-
-	.trade-item-info text {
-		font-size: 36rpx;
-		font-weight: bold;
-		color: rgba(195, 40, 46, 1);
-	}
-	.trade-item-info text::before {
-		font-size: 26rpx;
-		content: '￥';
-	}
-
-	.trade-item-btns {
-		display: flex;
-		flex-direction: row;
-		justify-content: flex-end;
-		align-items: center;
-		padding: 20rpx;
-	}
-
-	.trade-item-btns view {
-		margin-left: 20rpx;
-		background: rgba(237, 237, 237, 0);
-		border: 1rpx solid #999999;
-		border-radius: 27rpx;
-		padding: 8rpx 16rpx;
-		font-size: 27rpx;
-		font-family: PingFang SC;
-		font-weight: 500;
-		color: #333333;
-	}
-
-	.trade-item-btns .pay-btn {
-		color: #FFFFFF;
-		background: #6A8A27;
-		border: none;
-		padding: 10rpx 16rpx;
-	}
-
-	.comment-btn {
-		width: 100rpx;
-		text-align: center;
-		line-height: 40rpx;
-		border-radius: 20rpx;
-		border: 1px solid #999999;
-		color: #333333;
-		justify-content: center !important;
-		font-size: 24rpx;
-		margin-top: 16rpx;
-	}
-
-	.list-common-empty {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		min-height: 50vh;
-	}
-
-	.list-common-empty img {
-		width: 317.33rpx;
-		height: 282rpx;
-	}
-
-	.list-common-empty-tip {
-		margin-top: 36rpx;
-		font-weight: 500;
-		font-size: 32rpx;
-		color: #000000;
-	}
-
-	.com-flex-tao {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	.search-box {
-		width: 697rpx;
-		height: 67rpx;
-		background: #f2f2f2;
-		border-radius: 33rpx;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0 8rpx 0 28rpx;
-		margin: 0 auto;
-		margin-bottom: 20rpx;
-
-		.left {
-			display: flex;
-			align-items: center;
-
-			image {
-				width: 28rpx;
-				height: 30rpx;
-			}
-
-			input {
-				margin-left: 20rpx;
-				font-size: 31rpx;
-				font-weight: 400;
-				color: #333;
-				width: 450rpx;
-			}
-		}
-
-		.btn {
-			width: 107rpx;
-			height: 53rpx;
-			background: #71B580;
-			border-radius: 27rpx;
-			font-size: 28rpx;
-			font-weight: 400;
-			color: #ffffff;
-			line-height: 53rpx;
-			text-align: center;
-		}
-	}
-
-	.top-bg {
-		background: #fff;
-		padding-top: 20rpx;
-	}
+// 样式部分保持不变
+view {
+    box-sizing: border-box;
+}
+
+.common-box {
+    height: 90rpx;
+}
+
+.common-types {
+    background: white;
+    height: 90rpx;
+    font-size: 31rpx;
+    z-index: 10;
+    margin: auto;
+    color: #666;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    padding: 0 27rpx;
+}
+
+.common-types::-webkit-scrollbar {
+    width: 0rpx;
+    height: 0;
+    display: none;
+}
+
+.common-type {
+    flex-shrink: 0;
+    margin: 0 26rpx;
+    line-height: 90rpx;
+    height: 90rpx;
+    position: relative;
+}
+
+.common-type.active {
+    font-size: 31rpx;
+    font-weight: bold;
+    color: #000;
+}
+
+.common-type.active:after {
+    display: block;
+    width: 60%;
+    font-size: 0;
+    content: '1';
+    margin: auto;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 1rpx;
+    height: 4rpx;
+    background: #6A8A27;
+    border-radius: 2rpx;
+}
+
+.bg {
+    min-height: 100vh;
+    background-color: #f7f7f7;
+}
+
+.noDate {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 200rpx;
+}
+
+.noDate img {
+    width: 514rpx;
+    height: auto;
+}
+
+.noDate view {
+    font-size: 24rpx;
+    color: #777777;
+}
+
+.trade-list {
+    padding: 28rpx 26rpx;
+}
+
+.trade-items {
+    background-color: white;
+    margin-bottom: 28rpx;
+    border-radius: 20rpx;
+}
+
+.trade-item-head {
+    display: flex;
+    justify-content: space-between;
+    padding: 28rpx 20rpx;
+    border-bottom: 1rpx solid #d8d8d8;
+}
+
+.trade-item-head-tid {
+    font-size: 24rpx;
+    display: flex;
+    align-items: center;
+    color: #666666;
+}
+
+.trade-item-head-state {
+    font-size: 27rpx;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #6A8A27;
+}
+
+.trade-item-head-name {
+    display: flex;
+    align-items: center;
+
+    font-size: 31rpx;
+    font-family: PingFang SC;
+    font-weight: bold;
+    color: #333333;
+
+    image {
+        width: 33rpx;
+        height: 31rpx;
+    }
+
+    view {
+        margin-left: 13rpx;
+    }
+}
+
+.trade-item-pros {
+    display: flex;
+    /* background-color: #F2F2F2; */
+    flex-direction: column;
+}
+
+.trade-item-pro {
+    display: flex;
+    padding: 20rpx;
+    justify-content: space-between;
+}
+
+.trade-item-pro-img {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.trade-item-pro-img image {
+    width: 180rpx;
+    height: 180rpx;
+    border-radius: 10rpx;
+}
+
+.trade-item-pro-price {
+    display: flex;
+    flex-direction: column;
+}
+
+.trade-item-pro-title {
+    text-align: left;
+    flex: 1;
+    padding: 0 20rpx;
+    font-size: 28rpx;
+}
+
+.trade-item-pro-subtitle {
+    text-align: left;
+    flex: 1;
+    padding: 0 20rpx;
+    font-weight: 500;
+    font-size: 24rpx;
+    color: #6A8A27;
+    margin-top: 20rpx;
+}
+
+.trade-item-pro-price view {
+    display: flex;
+    flex-wrap: nowrap;
+    text-wrap: none;
+    white-space: nowrap;
+    justify-content: flex-end;
+}
+
+.trade-item-pro-price-pri {
+    font-size: 27rpx;
+    color: #6A8A27;
+    font-weight: 500;
+    color: #333333;
+}
+
+.trade-item-pro-num {
+    font-size: 24rpx;
+    color: #666666;
+    margin-top: 24rpx;
+}
+
+.trade-item-info {
+    font-size: 28rpx;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    background-color: white;
+    padding: 0rpx 20rpx;
+    margin-top: -6rpx;
+    /* border-bottom: 1px solid #B6B6B6; */
+}
+
+.trade-item-info text {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: rgba(195, 40, 46, 1);
+}
+
+.trade-item-info text::before {
+    font-size: 26rpx;
+    content: '￥';
+}
+
+.trade-item-btns {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 20rpx;
+}
+
+.trade-item-btns view {
+    margin-left: 20rpx;
+    background: rgba(237, 237, 237, 0);
+    border: 1rpx solid #999999;
+    border-radius: 27rpx;
+    padding: 8rpx 16rpx;
+    font-size: 27rpx;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #333333;
+}
+
+.trade-item-btns .pay-btn {
+    color: #FFFFFF;
+    background: #6A8A27;
+    border: none;
+    padding: 10rpx 16rpx;
+}
+
+.comment-btn {
+    width: 100rpx;
+    text-align: center;
+    line-height: 40rpx;
+    border-radius: 20rpx;
+    border: 1px solid #999999;
+    color: #333333;
+    justify-content: center !important;
+    font-size: 24rpx;
+    margin-top: 16rpx;
+}
+
+.list-common-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 50vh;
+}
+
+.list-common-empty img {
+    width: 317.33rpx;
+    height: 282rpx;
+}
+
+.list-common-empty-tip {
+    margin-top: 36rpx;
+    font-weight: 500;
+    font-size: 32rpx;
+    color: #000000;
+}
+
+.com-flex-tao {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.search-box {
+    width: 600rpx;
+    height: 67rpx;
+    background: #f2f2f2;
+    border-radius: 33rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 8rpx 0 28rpx;
+
+    .left {
+        display: flex;
+        align-items: center;
+
+        image {
+            width: 28rpx;
+            height: 30rpx;
+        }
+
+        input {
+            margin-left: 20rpx;
+            font-size: 31rpx;
+            font-weight: 400;
+            color: #333;
+            width: 450rpx;
+        }
+    }
+
+    .btn {
+        width: 107rpx;
+        height: 53rpx;
+        background: #71B580;
+        border-radius: 27rpx;
+        font-size: 28rpx;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 53rpx;
+        text-align: center;
+    }
+}
+
+.top-bg {
+    background: #fff;
+    padding-top: 20rpx;
+}
+
+.select-btn {
+    font-weight: bold;
+    font-size: 20rpx;
+    color: #6A8A27;
+
+    image {
+        width: 33.33rpx;
+        height: 33.33rpx;
+        display: block;
+    }
+}
+
+.popup-box {
+    height: 70vh;
+    border-radius: 10rpx 10rpx 0 0;
+    background: #F7F7F7;
+    padding: 0 25rpx;
+
+    .popup-top {
+        height: 110rpx;
+        font-weight: 400;
+        font-size: 31rpx;
+        color: #000000;
+
+        &>view:nth-child(2) {
+            font-weight: bold;
+            font-size: 35rpx;
+        }
+
+        &>view:last-child {
+            color: #6A8A2D;
+        }
+    }
+
+    .popup-content {
+        height: calc(70vh - 110rpx);
+        padding: 0 28rpx;
+        background-color: #fff;
+
+        .content-top {
+            height: 94rpx;
+            border-bottom: 1px solid #CCCCCC;
+            font-weight: bold;
+            font-size: 32rpx;
+            color: #000000;
+            display: flex;
+            align-items: center;
+        }
+
+        .content-bottom {
+            padding-top: 40rpx;
+
+            .content-item {
+                margin-bottom: 27rpx;
+                width: 307rpx;
+                line-height: 67rpx;
+                text-align: center;
+                background: #FFFFFF;
+                border-radius: 7rpx;
+                border: 1px solid #CCCCCC;
+                font-weight: 500;
+                font-size: 31rpx;
+                color: #000000;
+            }
+
+            .content-active {
+                border: 1px solid #6A8A27;
+                color: #6A8A27;
+            }
+
+            ::v-deep .uni-date {
+                border: 1px solid #CCCCCC;
+            }
+        }
+    }
+}
 </style>
\ No newline at end of file