From ab4209caf56abceed7a60a2d7ddcc11b5a331f86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=96=BB=E9=B9=8F?= <1242402566@qq.com>
Date: Tue, 12 May 2020 16:30:23 +0800
Subject: [PATCH] update

---
 src/components/CommodityCard/CommodityCard.vue     |  22 +-
 src/components/UniCountdown/UniCountdown.vue       | 190 +++++++
 src/pages.json                                     |  26 +-
 src/pages/cart/cart.vue                            | 188 +++++--
 .../detailsChoiceArgs/compoents/MyCollapse.vue     | 228 ++++++++
 src/pages/detailsChoiceArgs/detailsChoiceArgs.vue  | 571 +++++++++++++++++++++
 src/pages/myOrder/myOrder.vue                      |   3 +-
 src/pages/myOrderPaying/myOrderPaying.vue          | 129 ++---
 src/pages/user/user.vue                            |  27 +-
 9 files changed, 1263 insertions(+), 121 deletions(-)
 create mode 100644 src/components/UniCountdown/UniCountdown.vue
 create mode 100644 src/pages/detailsChoiceArgs/compoents/MyCollapse.vue
 create mode 100644 src/pages/detailsChoiceArgs/detailsChoiceArgs.vue

diff --git a/src/components/CommodityCard/CommodityCard.vue b/src/components/CommodityCard/CommodityCard.vue
index d277950..0d8eec8 100644
--- a/src/components/CommodityCard/CommodityCard.vue
+++ b/src/components/CommodityCard/CommodityCard.vue
@@ -1,16 +1,15 @@
 <template>
-	<view class="card" @tap="toGoods(goods.id)">
-		<image mode="widthFix" :src="goods.imgurl" ></image>
+	<view class="card" @tap="toGoods(goods.goods_id)">
+		<image mode="widthFix" :src="goods.img" ></image>
 		<view class="name">{{goods.name}}</view>
 		<view class="info">
 			<view class="priceBox">
-			<view class="price">{{goods.rsSon.Min_Price}}</view>
-			<view class="originCost">
-				{{Math.round(goods.rsSon.Min_Price / goods.rsSon.discount * 100)}}
-				<!-- {{goods.oldPrice}} -->
+				<view class="price">{{goods.price}}</view>
+				<view class="originCost">
+					{{goods.originCost}}
 				</view>
 			</view>
-			<view class="slogan">{{goods.trade_num}}</view>
+			<view class="slogan">{{goods.slogan}}</view>
 		</view>
 	</view>
 </template>
@@ -22,16 +21,17 @@
 			 * 商品数据
 			 */
 			goods: {
-				id: Number, 
-				imgurl: String, 
+				goods_id: Number, 
+				img: String, 
 				name: String,
-				oldPrice:String,
+				originCost:String,
 				price: String, 
-				memo:String
+				slogan:String
 			}
 			
 		},
 		created() {
+			console.log(this.goods)
 		},
 		data() {
 			return {
diff --git a/src/components/UniCountdown/UniCountdown.vue b/src/components/UniCountdown/UniCountdown.vue
new file mode 100644
index 0000000..ad7125a
--- /dev/null
+++ b/src/components/UniCountdown/UniCountdown.vue
@@ -0,0 +1,190 @@
+<template>
+	<view class="uni-countdown">
+		<text v-if="showDay" :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ d }}</text>
+		<text v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">天</text>
+		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ h }}</text>
+		<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</text>
+		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ i }}</text>
+		<text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</text>
+		<text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">{{ s }}</text>
+		<text v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">秒</text>
+	</view>
+</template>
+<script>
+	export default {
+		name: 'UniCountdown',
+		props: {
+			
+			showDay: {
+				type: Boolean,
+				default: true
+			},
+			showColon: {
+				type: Boolean,
+				default: true
+			},
+			backgroundColor: {
+				type: String,
+				default: '#FFFFFF'
+			},
+			borderColor: {
+				type: String,
+				default: '#000000'
+			},
+			color: {
+				type: String,
+				default: '#000000'
+			},
+			splitorColor: {
+				type: String,
+				default: '#000000'
+			},
+			day: {
+				type: Number,
+				default: 0
+			},
+			hour: {
+				type: Number,
+				default: 0
+			},
+			minute: {
+				type: Number,
+				default: 0
+			},
+			second: {
+				type: Number,
+				default: 0
+			}
+		},
+		data() {
+			return {
+				timer: null,
+				syncFlag: false,
+				d: '00',
+				h: '00',
+				i: '00',
+				s: '00',
+				leftTime: 0,
+				seconds: 0
+			}
+		},
+		watch: {
+			day(val) {
+				this.changeFlag()
+			},
+			hour(val) {
+				this.changeFlag()
+			},
+			minute(val) {
+				this.changeFlag()
+			},
+			second(val) {
+				this.changeFlag()
+			}
+		},
+		created: function(e) {
+			this.startData();
+		},
+		beforeDestroy() {
+			clearInterval(this.timer)
+		},
+		methods: {
+			toSeconds(day, hours, minutes, seconds) {
+				return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
+			},
+			timeUp() {
+				clearInterval(this.timer)
+				this.$emit('timeup')
+			},
+			countDown() {
+				let seconds = this.seconds
+				let [day, hour, minute, second] = [0, 0, 0, 0]
+				if (seconds > 0) {
+					day = Math.floor(seconds / (60 * 60 * 24))
+					hour = Math.floor(seconds / (60 * 60)) - (day * 24)
+					minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
+					second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
+				} else {
+					this.timeUp()
+				}
+				if (day < 10) {
+					day = '0' + day
+				}
+				if (hour < 10) {
+					hour = '0' + hour
+				}
+				if (minute < 10) {
+					minute = '0' + minute
+				}
+				if (second < 10) {
+					second = '0' + second
+				}
+				this.d = day
+				this.h = hour
+				this.i = minute
+				this.s = second
+			},
+			startData() {
+				this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
+				if (this.seconds <= 0) {
+					return
+				}
+				this.countDown()
+				this.timer = setInterval(() => {
+					this.seconds--
+					if (this.seconds < 0) {
+						this.timeUp()
+						return
+					}
+					this.countDown()
+				}, 1000)
+			},
+			changeFlag() {
+				if (!this.syncFlag) {
+					this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second)
+					this.startData();
+					this.syncFlag = true;
+				}
+				clearInterval(this.timer)
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	@import '~@/uni.scss';
+	$countdown-height: 48rpx;
+	$countdown-width: 52rpx;
+
+	.uni-countdown {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: flex-start;
+		padding: 2rpx 0;
+	}
+
+	.uni-countdown__splitor {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		line-height: $countdown-height;
+		padding: 5rpx;
+		font-size: 18px;
+	}
+
+	.uni-countdown__number {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+		width: $countdown-width;
+		height: $countdown-height;
+		line-height: $countdown-height;
+		margin: 5rpx;
+		text-align: center;
+		font-size: 18px;
+	}
+</style>
diff --git a/src/pages.json b/src/pages.json
index db9b855..38fcca7 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -68,10 +68,22 @@
 			"path": "pages/predelivery/predelivery"
 		},
 		{
-			"path": "pages/customerService/customerService"
+			"path": "pages/customerService/customerService",
+			"style":{
+				"navigationBarTitleText" : "在线客服"
+			}
 		},
 		{
-			"path": "pages/myOrderPaying/myOrderPaying"
+			"path": "pages/myOrderPaying/myOrderPaying",
+			"style":{
+				"navigationBarTitleText" : "我的订单"
+			}
+		},
+		{
+			"path": "pages/detailsChoiceArgs/detailsChoiceArgs",
+			"style":{
+				"navigationBarTitleText" : "镜片名称名称"
+			}
 		},
 		{
             "path" : "pages/detailStandard/detailStandard_sun",
@@ -117,5 +129,15 @@
 				"text": "我的"
 			}
 		]
+	},
+	"condition" : { //模式配置，仅开发期间生效
+		"current": 0, //当前激活的模式(list 的索引项)
+		"list": [
+			{
+				"name": "", //模式名称
+				"path": "", //启动页面，必选
+				"query": "" //启动参数，在页面的onLoad函数里面得到
+			}
+		]
 	}
 }
diff --git a/src/pages/cart/cart.vue b/src/pages/cart/cart.vue
index 2d75583..25e9787 100644
--- a/src/pages/cart/cart.vue
+++ b/src/pages/cart/cart.vue
@@ -1,62 +1,116 @@
 <template>
 	<view class="content">
-		<checkbox-group name="">
-			<label>
-				<view class="card">
-					<view class="cardHeader">
-						<checkbox color="#FF6B4A" :value="totalPrice"  style="transform:scale(0.7)"/>
-						<image src="../../static/customerService-btn.png" mode="aspectFill"></image>
-						<text>非常戴镜</text>
+		
+		<view class="card">
+			<view class="cardHeader">
+				<!-- <MyCheckbox :isOpenProp="controlCheck.partent" ></MyCheckbox> -->
+				<block v-if="pIsoPen">
+					<view class="partentChecked" @click="pChange(pIsoPen)">
+						<span class="status correct"></span>
 					</view>
-					<view class="cardBody">
-						<checkbox color="#FF6B4A" :value="totalPrice" style="transform:scale(0.7)" />
-						<view class="goodInfo">
-							<view class="imageWrap">
-								<image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
-							</view>
-							<view class="infoRight">
-								<text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text>
-								<view class="describ"><text>支持7天无理由退货 顺丰发货支持7天无理由退货 顺丰发货支持7天无理由退货 顺丰发货</text>
-								<!-- <text class="icon">></text> -->
-								</view>
-								<view class="priceBox">
-									<view class="price">￥198</view>
-									<text>(限购{{maxCount}}副)</text>
-									<view class="counter">
-										<view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
-										<text>{{count}}</text>
-										<view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
-									</view>
-								</view>
+				</block>
+				<block v-else>
+					<view class="partentCheck" @click="pChange(pIsoPen)"></view>
+				</block>
+				<image src="../../static/store.png" mode="aspectFill"></image>
+				<text>非常戴镜</text>
+			</view>
+			
+			<view class="cardBody">
+				<!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
+				<template v-if="childIsOpen.child1">
+					<view class="partentChecked" @click="cChange(childIsOpen.child1,'child1')">
+						<span class="status correct"></span>
+					</view>
+				</template>
+				<template v-else>
+					<view class="partentCheck" @click="cChange(childIsOpen.child1,'child1')"></view>
+				</template>
+				<view class="goodInfo">
+					<view class="imageWrap">
+						<image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
+					</view>
+					<view class="infoRight">
+						<text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
+						<view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text>
+						<!-- <text class="icon">></text> -->
+						</view>
+						<view class="priceBox">
+							<view class="price">￥{{198*this.count}}</view>
+							<text>(限购{{maxCount}}副)</text>
+							<view class="counter">
+								<view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
+								<text>{{count}}</text>
+								<view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
 							</view>
 						</view>
 					</view>
 				</view>
-			</label>
-		</checkbox-group>
-		
+			</view>
+		<view class="cardBody">
+			<!-- <MyCheckbox :isOpenProp="controlCheck.child1"></MyCheckbox> -->
+			<template v-if="childIsOpen.child2">
+				<view class="partentChecked" @click="cChange(childIsOpen.child2,'child2')">
+					<span class="status correct"></span>
+				</view>
+			</template>
+			<template v-else>
+				<view class="partentCheck" @click="cChange(childIsOpen.child2,'child2')"></view>
+			</template>
+			<view class="goodInfo">
+				<view class="imageWrap">
+					<image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image>
+				</view>
+				<view class="infoRight">
+					<text class="goodName">眼镜名称眼镜名称眼镜名称眼镜名称</text>
+					<view class="describ"><text>颜色 玫瑰金 /材质 钛合金 / 功能 防日光 / 配件 免费送 /折射 … </text>
+					<!-- <text class="icon">></text> -->
+					</view>
+					<view class="priceBox">
+						<view class="price">￥{{198*this.count}}</view>
+						<text>(限购{{maxCount}}副)</text>
+						<view class="counter">
+							<view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view>
+							<text>{{count}}</text>
+							<view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		</view>
 		
 		<view class="footer">
 			<view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
 			<view class="footerRight">
-				<view class="paybtn">立即支付</view>
+				<navigator url="/pages/myOrderPaying/myOrderPaying" hover-class="navigator-hover">
+					<view class="paybtn">立即支付</view>
+				</navigator>
 			</view>
 		</view>
+		
 	</view>
 </template>
 
 <script>
 	export default {
+
 		data() {
 			return {
 				totalPrice: 360,
 				count:1,
 				maxCount:20,
+				pIsoPen: false,
+				childIsOpen:{
+					"child1":true,
+					"child2":true
+				},
 			}
 		},
 		onLoad() {
 
-		},
+		}
+		,
 		methods: {
 			counter(isadd){
 				if(isadd){
@@ -65,6 +119,21 @@
 					this.count <= 1? this.desDisabled = true:this.count--;
 				}
 			},
+			pChange(isopen){
+				// console.log(isopen)
+				this.pIsoPen=!isopen
+				this.childIsOpen.child1=!isopen
+				this.childIsOpen.child2=!isopen
+			},
+			cChange(isopen,child){
+				// console.log(child)
+				if(child==='child1'){
+					this.childIsOpen.child1=!isopen
+				}
+				if(child==='child2'){
+					this.childIsOpen.child2=!isopen
+				}
+			}
 		}
 	}
 </script>
@@ -72,7 +141,7 @@
 <style lang="scss">
 	.content {
 		min-height: 100vh;
-		background-color: #F7F6F6;
+		background-color: #f2f2f2;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -80,6 +149,40 @@
 		padding: 20rpx 40rpx;
 		box-sizing: border-box;
 		
+		.partentCheck{
+			width: 16px;
+			height: 16px;
+			border-radius: 18px;
+			border: 1px solid #CFCFCF;
+			background-color: #FFFFFF;
+		}
+		.partentChecked{
+			width: 18px;
+			height: 18px;
+			border-radius: 18px;
+			background-color: #FF6B4A;
+			.correct {
+				display: inline-block;
+				width: 5px;
+				height: 1px;
+				background: #FFFFFF;
+				line-height: 0;
+				font-size: 0;
+				position: relative;
+				top: -10px;
+				left: 4px;
+				-webkit-transform: rotate(45deg);
+			}
+			.correct:after {
+				content: '/';
+				display: block;
+				width: 8px;
+				height: 1px;
+				background: #FFFFFF;
+				-webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
+			}
+		}
+		
 		.card{
 			background-color: #FFFFFF;
 			border-radius: 16rpx;
@@ -98,6 +201,14 @@
 				image{
 					height: 32rpx;
 					width: 32rpx;
+					padding-left: 6px;
+					padding-right: 10px;
+				}
+				text{
+					// font-family: PingFangSC-Regular;
+					font-size: 14px;
+					color: #333333;
+					letter-spacing: -0.26px;
 				}
 			}
 			.cardBody{
@@ -111,11 +222,13 @@
 					display: flex;
 					flex-direction: row;
 					justify-content: flex-start;
+					padding-left: 6px;
 					.imageWrap{
 						height: 188rpx;
 						width: 188rpx;
-							margin-right: 28rpx;
+						margin-right: 28rpx;
 						image{
+							border-radius: 4px;
 							height: 188rpx;
 							width: 188rpx;
 						}
@@ -125,7 +238,7 @@
 						flex-direction: column;
 						align-items: flex-start;
 						justify-content: space-between;
-						height: 220rpx;
+						height: 240rpx;
 						.goodName{
 							font-size: 28rpx;
 							color: #333333;
@@ -155,6 +268,7 @@
 							display: flex;
 							justify-content: space-between;
 							align-items: center;
+							// margin-top: 26px;
 							width: 100%;
 							font-size: 14px;
 							color: #999999;
@@ -189,7 +303,7 @@
 		.footer{
 			position: fixed;
 			left: 0;
-			bottom: 0;
+			bottom: 50px;
 			height: 112rpx;
 			width: 100%;
 			background-color: #FFFFFF;
@@ -229,4 +343,6 @@
 		}
 	}
 	
+	
+	
 </style>
diff --git a/src/pages/detailsChoiceArgs/compoents/MyCollapse.vue b/src/pages/detailsChoiceArgs/compoents/MyCollapse.vue
new file mode 100644
index 0000000..3bbf9f9
--- /dev/null
+++ b/src/pages/detailsChoiceArgs/compoents/MyCollapse.vue
@@ -0,0 +1,228 @@
+<template>
+	<!-- 折叠框 -->
+	<view class="myCollapse">
+		<view class="head">
+			<view>{{title}}</view>
+			<view v-if="title==='折射率'" class="headMid">注：折射率越高，镜片越薄，看着更美观。</view>
+			<view class="headRighted" v-if="this.isOpen" @click="myCollapseChange(isOpen)"></view>
+			<view class="headRight" v-else @click="myCollapseChange(isOpen)" ></view> 
+		</view>
+		<view class="body">
+			<block v-if="this.isOpen">
+				<view style="background-color: #FFFFFF;" class="funBox">
+					<template v-if="title==='镜片种类'">
+						<view class="noRange">
+							<block v-for="(item,index) in funList" :key="item.key">
+								<view class="boxChoiced" v-if="item.isChioce" @click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
+								<view class="boxChoice" v-else @click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
+							</block>
+						</view>
+						<view class="noRange">
+							<block v-for="(item,index) in funList2" :key="item.key">
+								<view class="boxChoiced-C" :style="colorList[index]"  v-if="item.isChioce" @click="choice2(index,item.key-1,item.isChioce)"></view>
+								<view class="boxChoice-C" :style="colorList[index]" v-else @click="choice2(index,item.key-1,item.isChioce)"></view>
+							</block>
+						</view>
+					</template>
+					<template v-else>
+						<view class="range" v-for="(item,index) in funList" :key="item.key">{{item.range}}</view>
+						<view class="noRange">
+							<block v-for="(item,index) in funList" :key="item.key">
+								<view class="boxChoiced" v-if="item.isChioce" @click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
+								<view class="boxChoice" v-else @click="choice(item.key-1,item.isChioce)">{{item.name}}</view>
+							</block>
+						</view>
+						<!-- 手动换行 -->
+						<view class="range" v-for="(item) in funList2" :key="item.key">{{item.range}}</view>
+						<view class="noRange" style="max-width: 624rpx">
+							<block v-for="(item,index) in funList2" :key="item.key">
+								<view class="boxChoiced" v-if="item.isChioce" @click="choice2(index,item.key-1,item.isChioce)">{{item.name}}</view>
+								<view class="boxChoice" v-else @click="choice2(index,item.key-1,item.isChioce)">{{item.name}}</view>
+							</block>
+						</view>
+					</template>
+					
+				</view>
+			</block>
+			<block v-else>
+				*<text v-for="(item,index) in funContent" :key="index">{{item}}</text>
+			</block>
+		</view>
+	</view>
+	
+</template>
+
+<script>
+	export default {
+		props:{
+			isOpenProps:{
+				// 是否展开，默认 true
+				type: Boolean,
+				default: true
+			},
+			funList:{
+				type: Array,
+				default: []
+			},
+			funList2:{
+				type:Array,
+				
+			}
+			,
+			funContent: {
+				type: Array,
+				default: []
+			},
+			title:{
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				isOpen:this.isOpenProps,
+				// 颜色数组要与传入的值手动相同
+				colorList:[
+					"background-image: linear-gradient(180deg, #ECEAEA 1%, #f2f2f2 100%);",
+					"background-image: linear-gradient(180deg, #ECEAEA 1%, #8D8C8C 100%);",
+					"background-image: linear-gradient(180deg, #AEA8A8 1%, #624B3F 100%);",
+					"background-image: linear-gradient(180deg, #AEA096 1%, #5E3521 100%);",
+					"background-image: linear-gradient(180deg, #6F6864 1%, #352B26 100%);"
+				]
+			};
+		},
+		methods:{
+			myCollapseChange(isopen){
+				this.isOpen = !isopen
+			},
+			choice(index,isChoice){
+				this.funList[index].isChioce = !isChoice
+				if(!isChoice){
+					this.funContent[index] = this.funList[index].name
+				}
+				else{
+					this.funContent[index] = ''
+				}
+			},
+			choice2(index,conIndex,isChoice){
+				this.funList2[index].isChioce = !isChoice
+				if(!isChoice){
+					this.funContent[conIndex] = this.funList2[index].name
+				}
+				else{
+					this.funContent[conIndex] = ''
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.myCollapse{
+		width: 100%;
+		padding-bottom: 28rpx;
+		margin-top: 7px;
+		border-bottom: 1px solid #E9E9E9;
+		.head{
+			display: flex;
+			justify-content: space-between;
+			height: 24px;
+			// font-family: PingFangSC-Medium;
+			font-size: 16px;
+			color: #333333;
+			letter-spacing: -0.3px;
+			text-align: justify;
+			line-height: 24px;
+			margin-bottom: 18rpx;
+			.headRighted{
+				width: 0;
+				height: 0;
+				border-left: 4px solid transparent;
+				border-right: 4px solid transparent;
+				border-bottom: 4px solid #CFCFCF;
+				transform: scaleY(-1);
+				margin-top: 10px;
+			}
+			.headMid{
+				// font-family: PingFangSC-Regular;
+				font-size: 10px;
+				color: #999999;
+				letter-spacing: -0.19px;
+				margin-left: -120rpx;
+			}
+			.headRight{
+				width: 0;
+				height: 0;
+				border-left: 4px solid transparent;
+				border-right: 4px solid transparent;
+				border-bottom: 4px solid #CFCFCF;
+				margin-top: 10px;
+			}
+		}
+		.body{
+			// font-family: PingFangSC-Regular;
+			font-size: 12px;
+			color: #666666;
+			letter-spacing: 0;
+			display: flex;
+			flex-wrap: wrap;
+			text{
+				padding-left: 4px;
+			}
+		}
+	}
+	.funBox {
+		// display: flex;
+		width: 100%;
+		// flex-wrap: wrap;
+		// max-width: 624rpx;
+		.range{
+			// font-family: PingFangSC-Regular;
+			font-size: 10px;
+			color: #999999;
+			letter-spacing: -0.19px;
+			margin-bottom: 5px;
+		}
+		.noRange{
+			display: flex;
+			flex-wrap: wrap;
+			// max-width: 624rpx;
+			// margin-bottom: 28rpx;
+			.boxChoiced,.boxChoice{
+				height: 60rpx;
+				border-radius: 4rpx;
+				// font-family: PingFangSC-Regular;
+				font-size: 12px;
+				letter-spacing: 0;
+				line-height: 60rpx;
+				box-sizing: border-box;
+				padding: 0 20rpx;
+				margin-right: 20rpx;
+				margin-bottom: 13rpx;
+			}
+			.boxChoiced{
+				background: rgba(255,107,74,0.15);
+				color: #FF6B4A;
+			}
+			.boxChoice{
+				background: #F2F2F2;
+				color: #666666;
+			}
+			.boxChoiced-C,.boxChoice-C{
+				width: 64rpx;
+				height: 64rpx;
+				border-radius: 32rpx;
+				margin-right: 8px;
+			}
+			.boxChoiced-C{
+				opacity: 0.7;
+				border: 1px solid #FF6B4A;
+			}
+			.boxChoice-C{
+				opacity: 0.7;
+				border: 1px solid #FFFFFF;
+			}
+		}
+
+	}
+</style>
diff --git a/src/pages/detailsChoiceArgs/detailsChoiceArgs.vue b/src/pages/detailsChoiceArgs/detailsChoiceArgs.vue
new file mode 100644
index 0000000..36aade9
--- /dev/null
+++ b/src/pages/detailsChoiceArgs/detailsChoiceArgs.vue
@@ -0,0 +1,571 @@
+<template>
+	<view class="content">
+		<view class="goods-info">
+			<image src="../../static/myorder-paying-pic.png"></image>
+			<view class="box-right">
+				<text class="p1">镜片名称型号功能镜片名称型镜片名称型号功能非球面…</text>
+				<text class="p2">支持7天无理由退货  顺丰发货</text>
+				<view class="priceBox">
+					<view class="price">￥{{price*count}}</view>
+					<view class="counter">
+						<view class="btn" disabled="this.disabled" @click="counter(false)">-</view>
+						<text>{{count}}</text>
+						<view class="btn" @click="counter(true)">+</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="goods-data">
+			<!-- 实用功能折叠框 -->
+			<MyCollapse :isOpenProps="funIsOpen" :funList="funList"  :funContent="funContent" title="实用功能"></MyCollapse>
+			<MyCollapse :isOpenProps="kindIsOpen" :funList="kindList1" :funList2="kindList2"  :funContent="kindContent" title="镜片种类"></MyCollapse>
+			<MyCollapse :isOpenProps="maIsOpen" :funList="maList1" :funList2="maList2" :funContent="maContent" title="材质选择"></MyCollapse>
+			<MyCollapse :isOpenProps="reIsOpen" :funList="reList1" :funList2="reList2" :funContent="reContent" title="折射率"></MyCollapse>
+			
+			<view class="opCollapse">
+				<view class="head">
+					<view v-if="!opIsOpen">填写验光数据</view>
+					<view v-else></view>
+					<view class="headRighted" v-if="this.opIsOpen" @click="myCollapseChange(opIsOpen)"></view>
+					<view class="headRight" v-else @click="myCollapseChange(opIsOpen)" ></view> 
+				</view>
+				<view class="body">
+					<block v-if="this.opIsOpen">
+						
+						<view class="goods-form">
+						    <text class="p1">填写验光数据</text>
+						    <text class="p2">没有验光数据？请到线下眼镜店验光哦～</text>
+						    <view class="picker" >
+						        <view class="picker-choice">
+						                    <view class="choice-left">
+						                        <text class="p11">{{pickerInfoList[0].nameC}}</text>
+						                        <text class="p12">{{pickerInfoList[0].nameE}}</text>
+						                    </view>
+						                    <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
+						                    <text class="p14">{{pickerInfoList[0].nameArray1[pickerInfoList[0].nameIndex1]}}</text>
+						                    <picker @change="bindPickerChange01" :value="pickerInfoList[0].nameIndex1" :range="pickerInfoList[0].nameArray1">
+						                        <image src="../../static/detail-tabicon.png" ></image>
+						                    </picker>
+						                    <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
+						                    <text class="p14">{{pickerInfoList[0].nameArray2[pickerInfoList[0].nameIndex2]}}</text>
+						                    <picker @change="bindPickerChange02" :value="pickerInfoList[0].nameIndex2" :range="pickerInfoList[0].nameArray2">
+						                        <image src="../../static/detail-tabicon.png" ></image>
+						                    </picker>
+						        </view>
+						    </view>
+						    <view class="picker" >
+						        <view class="picker-choice">
+						                    <view class="choice-left">
+						                        <text class="p11">{{pickerInfoList[1].nameC}}</text>
+						                        <text class="p12">{{pickerInfoList[1].nameE}}</text>
+						                    </view>
+						                    <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
+						                    <text class="p14">{{pickerInfoList[1].nameArray1[pickerInfoList[1].nameIndex1]}}</text>
+						                    <picker @change="bindPickerChange11" :value="pickerInfoList[1].nameIndex1" :range="pickerInfoList[1].nameArray1">
+						                        <image src="../../static/detail-tabicon.png" ></image>
+						                    </picker>
+						                    <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
+						                    <text class="p14">{{pickerInfoList[1].nameArray2[pickerInfoList[1].nameIndex2]}}</text>
+						                    <picker @change="bindPickerChange12" :value="pickerInfoList[1].nameIndex2" :range="pickerInfoList[1].nameArray2">
+						                        <image src="../../static/detail-tabicon.png" ></image>
+						                    </picker>
+						        </view>
+						    </view>
+						    <view class="picker" >
+						        <view class="picker-choice">
+						                    <view class="choice-left">
+						                        <text class="p11">{{pickerInfoList[2].nameC}}</text>
+						                        <text class="p12">{{pickerInfoList[2].nameE}}</text>
+						                    </view>
+						                    <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
+						                    <text class="p14">{{pickerInfoList[2].nameArray1[pickerInfoList[2].nameIndex1]}}</text>
+						                    <picker @change="bindPickerChange21" :value="pickerInfoList[2].nameIndex1" :range="pickerInfoList[2].nameArray1">
+						                        <image src="../../static/detail-tabicon.png" ></image>
+						                    </picker>
+						                    <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
+						                    <text class="p14">{{pickerInfoList[2].nameArray2[pickerInfoList[2].nameIndex2]}}</text>
+						                    <picker @change="bindPickerChange22" :value="pickerInfoList[2].nameIndex2" :range="pickerInfoList[2].nameArray2">
+						                        <image src="../../static/detail-tabicon.png" ></image>
+						                    </picker>
+						        </view>
+						    </view>
+						    <view class="picker" >
+						        <view class="picker-choice">
+						                    <view class="choice-left">
+						                        <text class="p11">{{pickerInfoList[3].nameC}}</text>
+						                        <text class="p12">{{pickerInfoList[3].nameE}}</text>
+						                    </view>
+						                    <text class="p13">左&nbsp;&nbsp;&nbsp;(OD)</text>
+						                    <text class="p14">{{pickerInfoList[3].nameArray1[pickerInfoList[3].nameIndex1]}}</text>
+						                    <picker @change="bindPickerChange31" :value="pickerInfoList[3].nameIndex1" :range="pickerInfoList[3].nameArray1">
+						                        <image src="../../static/detail-tabicon.png" ></image>
+						                    </picker>
+						                    <text class="p13">右&nbsp;&nbsp;&nbsp;(OS)</text>
+						                    <text class="p14">{{pickerInfoList[3].nameArray2[pickerInfoList[3].nameIndex2]}}</text>
+						                    <picker @change="bindPickerChange32" :value="pickerInfoList[3].nameIndex2" :range="pickerInfoList[3].nameArray2">
+						                        <image src="../../static/detail-tabicon.png" ></image>
+						                    </picker>
+						        </view>
+						    </view>
+						    <view class="picker" >
+						        <view class="picker-choice">
+						                    <view class="choice-left">
+						                        <text class="p11">{{pickerInfoList[4].nameC}}</text>
+						                    </view>
+						                    <text class="p13-date">年&nbsp;&nbsp;&nbsp;(Y)</text>
+						                    <text class="p14" style="width: 34px;">{{pickerInfoList[4].nameArray1[pickerInfoList[4].nameIndex1]}}</text>
+						                    <picker @change="bindPickerChange41" :value="pickerInfoList[4].nameIndex1" :range="pickerInfoList[4].nameArray1">
+						                        <image src="../../static/detail-tabicon.png" ></image>
+						                    </picker>
+						                    <text class="p13-date">月&nbsp;&nbsp;&nbsp;(M)</text>
+						                    <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray2[pickerInfoList[4].nameIndex2]}}</text>
+						                    <picker @change="bindPickerChange42" :value="pickerInfoList[4].nameIndex2" :range="pickerInfoList[4].nameArray2">
+						                        <image src="../../static/detail-tabicon.png" ></image>
+						                    </picker>
+						                    <text class="p13-date">日&nbsp;&nbsp;&nbsp;(D)</text>
+						                    <text class="p14" style="width: 30px;">{{pickerInfoList[4].nameArray3[pickerInfoList[4].nameIndex3]}}</text>
+						                    <picker @change="bindPickerChange43" :value="pickerInfoList[4].nameIndex3" :range="pickerInfoList[4].nameArray3">
+						                        <image src="../../static/detail-tabicon.png" ></image>
+						                    </picker>
+						        </view>
+						    </view>
+						    <view class="confirm">
+						        <image :src="tablist.confirm ? tabicon[0] : tabicon[1]" @click="changeConfirm"></image>
+						        <text>确认以上输入信息来源于我的验光数据!</text>
+						    </view>
+						</view>
+					
+					</block>
+					<block v-else>
+						<view v-for="item in pickerInfoList" :key="item.key" class="bodyBox">
+							<template v-if="item.nameC==='验光日期'">
+								<text class="names">{{item.nameC}}</text>
+								<text style="margin-right: 5px;">{{item.nameArray1[item.nameIndex1]}}年</text>
+								<text style="margin-right: 5px;">{{item.nameArray2[item.nameIndex2]}}月</text>
+								<text>{{item.nameArray3[item.nameIndex2]}}日</text>
+							</template>
+							<template v-else>
+								<template v-if="item.nameC==='度数'">
+									<text style="display: inline;">*</text>
+								</template>
+				
+									<text class="names">{{item.nameC}}</text>
+									<text style="margin-right: 10px;">左&nbsp;{{item.nameArray1[item.nameIndex1]}}</text>
+									<text>右&nbsp;{{item.nameArray2[item.nameIndex2]}}</text>
+							</template>
+						</view>
+					</block>
+				</view>
+			</view>
+		
+		</view>
+		<view class="submit">立即结算</view>
+	</view>
+</template>
+
+<script>
+	import MyCollapse from './compoents/MyCollapse.vue'
+	export default {
+		components: {
+			MyCollapse
+			},
+		data() {
+			return {
+				count:1,
+				disabled:false,
+				price:180,
+				// 实用功能参数
+				funIsOpen:true, // 默认myCollapse开启
+				funList: [
+					{"name":"防紫外线","isChioce":false,key:1},
+					{"name":"防蓝光","isChioce":false,key:2},
+					{"name":"智能变色","isChioce":false,key:3},
+					{"name":"易清洁","isChioce":false,key:4},
+					{"name":"防辐射","isChioce":false,key:5},
+					{"name":"抗疲劳","isChioce":false,key:6},
+				],
+				funContent:[],
+				
+				// 镜片种类参数
+				kindIsOpen:false, // 默认myCollapse开启
+				kindList1: [
+					{"name":"染色","isChioce":false,key:1},
+					{"name":"渐变","isChioce":false,key:2},
+				],
+				kindList2: [
+					{"name":"JB234759","isChioce":false,key:3},
+					{"name":"JB234759","isChioce":false,key:4},
+					{"name":"JB234759","isChioce":false,key:5},
+					{"name":"JB234759","isChioce":false,key:6},
+					{"name":"JB234759","isChioce":false,key:7},
+				],
+				kindContent:[],
+				// 材质选择
+				maIsOpen:false,
+				maList1: [
+					{"name":"树脂镜片","isChioce":false,key:1,"range":"0-300度","isRange":true},
+					{"name":"特殊镜片","isChioce":false,key:2},
+				],
+				maList2: [
+					{"name":"玻璃镜片","isChioce":false,key:3,"range":"300-1000度","isRange":true},
+					{"name":"玻璃镜片","isChioce":false,key:4},
+				],
+				maContent:[],
+				// 折射率参数
+				reIsOpen:false,
+				reList1: [
+					{"name":"1.56（推荐）","isChioce":false,key:1,"range":"0-300度","isRange":true},
+					{"name":"1.60","isChioce":false,key:2},
+				],
+				reList2: [
+					{"name":"1.71（推荐）","isChioce":false,key:3,"range":"300-1000度","isRange":true},
+					{"name":"1.67","isChioce":false,key:4},
+					{"name":"1.71","isChioce":false,key:5},
+					{"name":"1.74","isChioce":false,key:6},
+				],
+				reContent:[],
+				// 验光参数
+				opIsOpen:false,
+				tablist: {
+				        // read: true,
+				        // seeLong: false,
+				        confirm: false
+				},
+				tabicon:['/static/detail-button.png','/static/detail-button-unselected.png'],
+				    // 度数相关数据                
+				pickerInfoList:[
+				{nameC:"度数",nameE:"(SPH)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:0},
+				{nameC:"散光",nameE:"(CYL)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:1},
+				{nameC:"散光轴位",nameE:"(AXI)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:2},
+				{nameC:"双眼瞳距",nameE:"(PD)",nameArray1:[1.5,2.5,3.5,4.5],nameIndex1:0,nameArray2:[1.5,2.5,3.5,4.5],nameIndex2:0,key:3},
+				{nameC:"验光日期",nameE:'',nameArray1:[2017,2018,2019,2020,2021],nameIndex1:0,nameArray2:[1,2,3,4,5,6,7],nameIndex2:0,nameArray3:[1,2,3,4,5,6],nameIndex3:0}
+				],
+				
+			}
+		},
+		methods: {
+			counter(isadd){
+				if(isadd){
+					this.count++
+				}else{
+					this.count <= 1? this.disabled = true:this.count--
+				}
+			},
+			myCollapseChange(isopen){
+				// console.log(isopen)
+				this.opIsOpen = !isopen
+			},
+			changeConfirm() {
+			    this.tablist.confirm = !this.tablist.confirm
+			},
+			
+			bindPickerChange01: function(e) {
+			    this.pickerInfoList[0].nameIndex1 = e.target.value 
+			},
+			bindPickerChange02: function(e) {
+			    this.pickerInfoList[0].nameIndex2 = e.target.value 
+			},
+			
+			bindPickerChange11: function(e) {
+			    this.pickerInfoList[1].nameIndex1 = e.target.value 
+			},
+			bindPickerChange12: function(e) {
+			    this.pickerInfoList[1].nameIndex2 = e.target.value 
+			},
+			
+			bindPickerChange21: function(e) {
+			    this.pickerInfoList[2].nameIndex1 = e.target.value 
+			},
+			bindPickerChange22: function(e) {
+			    this.pickerInfoList[2].nameIndex2 = e.target.value 
+			},
+			
+			bindPickerChange31: function(e) {
+			    this.pickerInfoList[3].nameIndex1 = e.target.value 
+			},
+			bindPickerChange32: function(e) {
+			    this.pickerInfoList[3].nameIndex2 = e.target.value 
+			},   
+			
+			bindPickerChange41: function(e) {
+			    this.pickerInfoList[4].nameIndex1 = e.target.value 
+			},
+			bindPickerChange42: function(e) {
+			    this.pickerInfoList[4].nameIndex2 = e.target.value 
+			},         
+			bindPickerChange43: function(e) {
+			    this.pickerInfoList[4].nameIndex3 = e.target.value 
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content{
+		width: 100%;
+		background-color: #F2F2F2;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.goods-info{
+		width: 100%;
+		height: 272rpx;
+		box-sizing: border-box;
+		padding: 40rpx 40rpx 36rpx 36rpx;
+		margin: 36rpx 0 18rpx 0;
+		// margin-bottom: -18rpx;
+		// margin-top: -36rpx;
+		background: #FFFFFF;
+		border-radius: 16rpx;
+		display: flex;
+		image{
+			width: 94px;
+			height: 94px;
+			margin-right: 28rpx;
+		}
+		.box-right{
+			width: 458rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			justify-content: space-between;
+			.p1 {
+				// font-family: PingFangSC-Regular;
+				font-size: 14px;
+				color: #333333;
+				letter-spacing: -0.26px;
+				text-align: justify;
+				line-height: 18px;
+			}
+			.p2 {
+				// font-family: PingFangSC-Regular;
+				font-size: 10px;
+				color: #999999;
+				letter-spacing: -0.19px;
+				margin-top: -20rpx;
+			}
+			.priceBox{
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				width: 100%;
+				.price{
+					color: #FF6B4A;
+					font-size: 28rpx;
+				}
+				.counter{
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+					font-size: 28rpx;
+					color: #333333;
+					width: 122rpx;
+					.btn{
+						display: flex;
+						justify-content: center;
+						line-height: 32rpx;
+						height: 32rpx;
+						width: 32rpx;
+						background-color: #F2F2F2;
+						color: #CFCFCF;
+					}
+				}
+			}
+		}
+	}
+	
+	.goods-data{
+		width: 100%;
+		box-sizing: border-box;
+		padding: 37rpx 40rpx 0 40rpx;
+		background: #FFFFFF;
+		border-radius: 12rpx;
+		margin-bottom: 92px;
+		.opCollapse{
+			width: 100%;
+			padding-bottom: 28rpx;
+			margin-top: 7px;
+			border-bottom: 1px solid #E9E9E9;
+			.head{
+				display: flex;
+				justify-content: space-between;
+				height: 24px;
+				// font-family: PingFangSC-Medium;
+				font-size: 16px;
+				color: #333333;
+				letter-spacing: -0.3px;
+				text-align: justify;
+				line-height: 24px;
+				margin-bottom: 18rpx;
+				.headRighted{
+					width: 0;
+					height: 0;
+					border-left: 4px solid transparent;
+					border-right: 4px solid transparent;
+					border-bottom: 4px solid #CFCFCF;
+					transform: scaleY(-1);
+					margin-top: 10px;
+				}
+				.headMid{
+					// font-family: PingFangSC-Regular;
+					font-size: 10px;
+					color: #999999;
+					letter-spacing: -0.19px;
+					margin-left: -120rpx;
+				}
+				.headRight{
+					width: 0;
+					height: 0;
+					border-left: 4px solid transparent;
+					border-right: 4px solid transparent;
+					border-bottom: 4px solid #CFCFCF;
+					margin-top: 10px;
+				}
+			}
+			.body{
+				// font-family: PingFangSC-Regular;
+				font-size: 12px;
+				color: #666666;
+				letter-spacing: 0;
+				.bodyBox{
+					margin-top: 15px;
+					.names{
+						// font-family: PingFangSC-Regular;
+						font-size: 12px;
+						color: #151515;
+						letter-spacing: 0;
+						text-align: justify;
+						line-height: 17px;
+						margin-left: 5px;
+						margin-right: 10px;
+					}
+					text{
+						// font-family: PingFangSC-Regular;
+						font-size: 12px;
+						color: #666666;
+						letter-spacing: 0;
+						text-align: justify;
+					}
+				}
+
+			}
+		}
+
+	}
+	
+	.goods-form {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		background-color: #fff;
+	    width: 100%;
+	    
+		.p1 {
+	        font-size: 16px;
+	        color: #333333;
+	        letter-spacing: -0.3px;
+	        text-align: justify;
+	        line-height: 24px;
+	        margin: 4px 0;
+	
+	    }
+	    .p2 {
+	        font-size: 12px;
+	        color: #999999;
+	        letter-spacing: -0.23px;
+	        margin-bottom: 18rpx;
+	    }
+	    image{
+	        width: 28rpx;
+	        height: 26rpx;
+	    }
+	    .confirm {
+	        display: flex;
+	        align-items: center;
+	        font-size: 12px;
+	        color: #666666;
+	        letter-spacing: -0.23px;
+	        width: 684rpx;
+	        image{
+	            margin-right:25rpx;
+	        }
+	    }
+	    .picker{
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		image{
+			width: 10px;
+			height: 10px;
+			margin-right: 5px;
+		}
+		.picker-choice{
+			display: flex;
+			width: 684rpx;
+			align-items: center;
+	        margin-bottom: 40rpx;
+			.choice-left{
+				width: 210rpx;
+				.p11 {
+					font-size: 14px;
+					color: #333333;
+					letter-spacing: -0.26px;
+					text-align: justify;
+					line-height: 24px;
+					// margin-right: 10px;
+				}
+				.p12 {
+					font-size: 10px;
+					color: #3F3F3F;
+					letter-spacing: -0.19px;
+					text-align: justify;
+					line-height: 24px;
+				}
+	            
+	            
+			}
+			.p13 {
+				font-size: 10px;
+				color: #999999;
+				letter-spacing: -0.19px;
+				margin-right: 10px;
+			}
+	        .p13-date {
+	            font-size: 10px;
+				color: #999999;
+				letter-spacing: -0.19px;
+				margin-right: 5px;
+	        }
+			.p14 {
+				font-size: 14px;
+				color: #666666;
+				letter-spacing: -0.26px;
+				text-align: center;
+				width: 124rpx;
+				border-bottom: 1px solid #CFCFCF;
+			}
+	        
+		}
+	}
+	}
+	
+	.submit{
+		width: 100%;
+		height: 112rpx;
+		background: #FF6B4A;
+		position: fixed;
+		bottom: 0;
+		text-align: center;
+		line-height: 112rpx;
+		// font-family: PingFangSC-Regular;
+		font-size: 16px;
+		color: #FFFFFF;
+		letter-spacing: -0.3px;
+	}
+	
+</style>
diff --git a/src/pages/myOrder/myOrder.vue b/src/pages/myOrder/myOrder.vue
index 3f81338..d3ad1a7 100644
--- a/src/pages/myOrder/myOrder.vue
+++ b/src/pages/myOrder/myOrder.vue
@@ -20,7 +20,8 @@
 				<OrderCard :order = "order" :current="current"></OrderCard>
 			</view>
 		</view>
-		<view class="footer">已显示全部</view>
+		<navigator url="/pages/user/user" open-type="switchTab"><view class="footer">已显示全部</view></navigator>
+		<!-- <view class="footer">已显示全部</view> -->
 	</view>
 </template>
 <script>
diff --git a/src/pages/myOrderPaying/myOrderPaying.vue b/src/pages/myOrderPaying/myOrderPaying.vue
index 376752c..2805b99 100644
--- a/src/pages/myOrderPaying/myOrderPaying.vue
+++ b/src/pages/myOrderPaying/myOrderPaying.vue
@@ -1,20 +1,14 @@
 <template>
-	<view class="content">
-		<view class="header">
-			<view class="header-name">
-				<navigator open-type="navigateBack"  hover-class="navigator-hover">
-					<image src="/static/back.png"></image>
-				</navigator>
-				<text>我的订单</text>
-			</view>
+	<view class="content">		
+		<view class="order-hr"></view>
+		<view class="order-time">
+			<text>请在</text>
+			<!-- <text class="p2"></text> -->
+			<uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false" 
+			:hour="0" :minute="59" :second="58" style="margin: 36rpx 20rpx 0 20rpx"></uni-countdown> 
+			<text>内完成付款</text>
 		</view>
-		<scroll-view scroll-y class="scroll-view" :style="{ height: scrollHeight?1000:800 + 'px' }">
-			<view class="order-hr"></view>
-			<view class="order-time">
-				<text>请在</text>
-				<text class="p2">00:59:58 </text>
-				<text>内完成付款</text>
-			</view>
+		<view class="order">
 			<view class="order-user">
 				<view class="order-user-head">
 					<text class="p1">钱大大</text>
@@ -30,13 +24,16 @@
 					<image src="../../static/myorder-paying-pic.png"></image>
 					<view class="order-info-head-r">
 						<text class="p1">眼镜名称眼镜名称眼镜名称眼镜名称…</text>
-						<text class="p2">规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻</text>
-						<text class="p3">￥180</text>
+						<view class="p2" style="margin: 0;">
+							规格：玫瑰金 / 钛合金 / 防日光防紫外线 / 超薄超轻
+							<!-- <view class="arrow"></view> -->
+						</view>
+						<text class="p3"><span>￥180</span><span class="p4">X1</span></text>
 					</view>
 				</view>
-				<view class="order-info-goodsnum">
+<!-- 				<view class="order-info-goodsnum">
 					<text>X1</text>
-				</view>
+				</view> -->
 				<text class="order-info-freight">
 					<text class="p1">运费</text>
 					<text class="p2">0.00</text>
@@ -61,7 +58,7 @@
 					<text>联系客服</text>
 				</view>
 			</view>
-		</scroll-view>
+		</view>
 		<view class="order-confim">
 			<button class="b1">取消订单</button>
 			<button class="b2">立即支付</button>
@@ -70,7 +67,11 @@
 </template>
 
 <script>
+	import UniCountdown from '../../components/UniCountdown/UniCountdown.vue'
 	export default {
+		components: {
+			UniCountdown
+		},
 		data() {
 			return {
 				scrollHeight: false,
@@ -88,39 +89,13 @@
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
+		background-color: #f2f2f2;
 	}
 	
-	.header{
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-		height: 44px;
-		position: fixed;
-		top: 0;
-		z-index: 999;
-		background-color: #fff;
-		.header-name{
-			display: flex;
-			align-items: center;
-			width: 670rpx;
-			image {
-				width: 11px;
-				height: 18px;
-			}
-			text {
-				// font-family: PingFangSC-Regular;
-				font-size: 36rpx;
-				color: #333333;
-				letter-spacing: -0.34px;
-                margin: 0 0 10rpx 54rpx;
-			}
-		}
-	}
 	
-	.scroll-view {
-		// height: 1760rpx; // 测试
+	.order {
+		min-height: 1196rpx;
+		margin-bottom: 112rpx;
 		background: #F2F2F2;
 	}
 	.order-hr {
@@ -222,8 +197,30 @@
 				text{
 					display: block;
 				}
+				// .arrow{
+				// width: 0;
+				// height: 0;
+				// border-left: 5px transparent;
+				// border-right: 5px transparent;
+				// border-top: 5px #979797;
+				// border-bottom: 0 transparent;
+				// border-style: solid;
+				// position: relative;
+				// // transform: scaleY(-1);
+				// }
+				// .arrow::after{
+				//     content: '';
+				//     position: absolute;
+				//     top: -6.5px;
+				//     left: -5px;
+				// 	border-left: 5px transparent;
+				// 	border-right: 5px transparent;
+				// 	border-top: 5px #FFFFFF;
+				// 	border-bottom: 0 transparent;
+				// 	border-style: solid;
+				// }
 				.p1 {
-					height: 40px;
+					min-height: 40px;
 					// font-family: PingFangSC-Regular;
 					font-size: 14px;
 					color: #333333;
@@ -246,21 +243,27 @@
 					color: #FF6B4A;
 					letter-spacing: -0.26px;
 				}
+				.p4{
+					font-size: 12px;
+					color: #999999;
+					letter-spacing: -0.23px;
+					margin-left: 10px;
+				}
 			}
 
 		}
-		.order-info-goodsnum {
-			display: flex;
-			align-items: center;
-			justify-content: flex-end;
-			text {
-				margin-right: 44rpx;
-				// ont-family: PingFangSC-Regular;
-				font-size: 12px;
-				color: #999999;
-				letter-spacing: -0.23px;
-			}
-		}
+		// .order-info-goodsnum {
+		// 	display: flex;
+		// 	align-items: center;
+		// 	justify-content: flex-end;
+		// 	text {
+		// 		margin-right: 44rpx;
+		// 		// ont-family: PingFangSC-Regular;
+		// 		font-size: 12px;
+		// 		color: #999999;
+		// 		letter-spacing: -0.23px;
+		// 	}
+		// }
 		.order-info-freight {
 			display: block;
 			margin-left: 40rpx;
diff --git a/src/pages/user/user.vue b/src/pages/user/user.vue
index c9d0be5..d10a01c 100644
--- a/src/pages/user/user.vue
+++ b/src/pages/user/user.vue
@@ -22,19 +22,19 @@
 					</view>
 				</view>
 				<view class="orderBody">
-					<view class="item,waitPay" @click=toMyOrderPaying>
-						<image src="../../static/waitPay.png" mode="aspectFill"></image>
+					<view class="item waitPay" @click="toMyOrderPaying">
+						<image src="../../static/waitDeliver.png" mode="aspectFill"></image>
 						<text>待付款</text>
 					</view>
-					<view class="item,waitDeliver" @click=toPredelivery>
+					<view class="item waitDeliver" @click="toPredelivery" >
 						<image src="../../static/waitDeliver.png" mode="aspectFill"></image>
 						<text>待发货</text>
 					</view>
-					<view class="item,waitReceive">
+					<view class="item waitReceive" @click="torefunProgress">
 						<image src="../../static/waitReceive.png" mode="aspectFill"></image>
 						<text>待收货</text>
 					</view>
-					<view class="item,service">
+					<view class="item service" @click="torefundment">
 						<image src="../../static/service.png" mode="aspectFill"></image>
 						<text>退换/售后</text>
 					</view>
@@ -72,7 +72,7 @@
 				
 				//商品数据
 				goodsList:[
-					{ goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
+					{ goods_id: 0, img: "/static/img/goods/p1.jpg", name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
 					{ goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
 					{ goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
 					{ goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称',originCost:'￥198',price: '￥168', slogan:'1235人浏览' },
@@ -101,7 +101,7 @@
 			},
 			toPredelivery(){
 				uni.navigateTo({
-					url: '../Predelivery/Predelivery',
+					url: '../predelivery/predelivery',
 					success: res => {},
 					fail: () => {},
 					complete: () => {}
@@ -109,11 +109,21 @@
 			},
 			toMyOrderPaying(){
 				uni.navigateTo({
-					url: '../myorder-paying/myorder-paying',
+					url: '../myorderPaying/myorderPaying',
 					success: res => {},
 					fail: () => {},
 					complete: () => {}
 				});
+			},
+			torefundment(){
+				uni.navigateTo({
+					url:'../refundment/refundment',
+				})
+			},
+			torefunProgress(){
+				uni.navigateTo({
+					url:'../refundProgress/refundProgress'
+				})
 			}
 		}
 	}
@@ -240,6 +250,7 @@
 		box-shadow: 0 0 4px 0 rgba(133,107,107,0.10);
 		border-radius: 6px;
 		border-radius: 6px;
+		width: 100%;
 		.title{
 			display: flex;
 			flex-direction: row;
-- 
2.0.0