确认订单页面

BigBoss
1 parent 0db2918105
Showing 4 changed files with 376 additions and 0 deletions Show diff stats
src/pages/confirmOrder/confirmOrder.vue
src/static/add.png
src/static/right.png
src/static/store.png
@@ -0,0 +1,376 @@
+<template>
+	<view class="wrap">
+		<view class="addAddress">
+			<view class="addIcon">
+				<image src="../../static/add.png" mode="aspectFill"></image>
+			</view>
+			<view class="addressText">{{addAddress}}</view>
+			<image src="../../static/right.png" mode="aspectFill"></image>
+		</view>
+		<view class="content">
+			<view class="orderInfo">
+				<view class="title">
+					<image src="../../static/store.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
+					<text>非常戴镜</text>
+				</view>
+				<view class="infoBox">
+						<view class="infoTop">
+							<image src="../../static/img/goods/p10.jpg" mode="aspectFill"></image>
+							<view class="infoRight"> 
+								<text class="goodName">商品名称商品名称商品名称名称名称</text>
+								<text class="remarks">支持7天无理由退货 顺丰发货</text>
+								<view class="priceBox">
+									<view class="price">￥198</view>
+									<view class="counter">
+										<view class="btn" disabled="this.disabled" type="default" @click="counter(false)">-</view>
+										<text>{{count}}</text>
+										<view class="btn" type="default" @click="counter(true)">+</view>
+									</view>
+								</view>
+							</view>
+						</view>
+						<view class="infoBottom">
+							<view class="norm">规格 <text>玫瑰金/钛合金</text></view>
+							<view class="shippingMethod">配送方式 <text>玫瑰金/钛合金</text></view>
+							<view class="message">买家留言 
+								<input type="text" value="" placeholder="建议提前协商(50字以内)" />
+							</view>
+						</view>
+					</view>
+			</view>
+			<view class="payWay">
+				<view class="item">
+					<text>支付方式</text>
+					<view class="itemRight">
+						<view class="rightText">
+							<view class="choosePayWay">
+								<image src="../../static/store.png" mode="aspectFill"></image>
+								<text>微信支付</text>
+							</view>
+							<view class="randomSubstraction">最高随机立减￥99</view>
+						</view>
+						<image src="../../static/right.png" mode="aspectFill"></image>
+					</view>
+				</view>
+				<view class="item">
+					<text>优惠券</text>
+					<view class="itemRight">
+						<view class="rightText">
+							<view class="chooseOffers">
+								<text>-￥70.00</text>
+							</view>
+							<view class="preferentialWay">最大优惠</view>
+						</view>
+						<image src="../../static/right.png" mode="aspectFill"></image>
+					</view>
+				</view>
+				<view class="item">
+					<text>运费</text>
+					<view class="itemRight">
+						<view class="freight">￥{{freight}}</view>
+					</view>
+				</view>
+				<view class="item">
+					<text>合计</text>
+					<view class="itemRight">
+						<view class="total">￥{{total}}</view>
+					</view>
+				</view>
+			</view>
+			
+			<view class="checkBox">
+				<checkbox-group>
+					<label>
+						<checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买
+					</label>
+				</checkbox-group>
+			</view>
+		</view>
+		<view class="footer">
+			<view class="footerLeft">实付金额:<text>￥{{total}}</text></view>
+			<view class="footerRight">
+				<view class="paybtn">立即支付</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				addAddress :'添加收货地址',
+				count:1,
+				disabled:false,
+				total:120,
+				freight:0.00
+				// isAnonymous:
+			};
+		},
+		methods:{
+			counter(isadd){
+				if(isadd){
+					this.count++
+				}else{
+					this.count <= 1? this.disabled = true:this.count--
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.wrap{
+		height: 100vh;
+		background-color:#F2F2F2 ;
+		font-family: PingFangSC-Regular;
+		letter-spacing: -0.23px;
+	}
+	.addAddress{
+		background-color:#ffffff ;
+		box-sizing: border-box;
+		height: 124rpx;
+		width: 100%;
+		display: flex;
+		align-items: center;
+		padding: 0 40rpx;
+		.addIcon{
+			background-color:#F2F2F2 ;
+			height: 56rpx;
+			width: 60rpx;
+			border-radius: 4rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			margin-right: 40rpx;
+		}
+		image{
+			height: 28rpx;
+			width: 28rpx;
+		}
+		.addressText{
+			font-size: 28rpx;
+			color: #333333;
+			margin-right: 364rpx;
+		}
+	}
+	.content{
+		background-color:#F2F2F2 ;
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		padding: 40rpx;
+		box-sizing: border-box;
+		.orderInfo{
+			width: 670rpx;
+			height: 488rpx;
+			background-color:#ffffff ;
+			border-radius: 20rpx;
+			box-sizing: border-box;
+			padding: 0 40rpx 40rpx 40rpx;
+			.title{
+				display: flex;
+				align-items: center;
+				font-size: 28rpx;
+				color: #333333;
+				height: 60rpx;
+				line-height: 40rpx;
+				padding: 10rpx 10rpx 10rpx 0rpx;
+				image{
+					margin-right: 20rpx;
+				}
+			}
+			.infoBox{
+				margin-top: 42rpx;
+				.infoTop{
+					display: flex;
+					flex-direction: row;
+					image{
+						height: 188rpx;
+						width: 188rpx;
+						margin-right: 24rpx;
+					}
+					.infoRight{
+						width: 374rpx;
+						display: flex;
+						flex-direction: column;
+						align-items: flex-start;
+						justify-content: space-between;
+						.goodName{
+							font-size: 28rpx;
+							color: #333333;
+						}
+						.remarks{
+							font-size: 20rpx;
+							color: #999999;
+						}
+						.priceBox{
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+							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;
+								}
+							}
+						}
+					}
+				}
+				.infoBottom{
+					display: flex;
+					flex-direction: column;
+					justify-content: flex-start;
+					font-size: 24rpx;
+					color: #333333;
+					text{
+						color: #999999;
+						margin-left: 20rpx;
+					}
+					
+					.norm{
+						margin-top: 28rpx;
+					}
+					.shippingMethod{
+						margin-top: 12rpx;
+					}
+					.message{
+						display: flex;
+						flex-direction: row;
+						align-items: center;
+						margin-top: 18rpx;
+						input{
+							margin-left: 20rpx;
+							width: 75%;
+						}
+					}
+				}
+			}
+		}
+		.payWay{
+			height: 464rpx;
+			width: 670rpx;
+			background-color: #ffffff;
+			color: #333333;
+			font-size: 24rpx;
+			border-radius: 20rpx;
+			box-sizing: border-box;
+			padding: 0 52rpx 0rpx 40rpx;
+			margin-top: 20rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: flex-start;
+			.item{
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				align-items: center;
+				width: 100%;
+				height: 115rpx;
+				.itemRight{
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+					align-items: center;
+					image{
+						height: 24rpx;
+						width: 12rpx;
+					}
+					.rightText{
+						margin-right: 20rpx;
+						text-align: right;
+						.choosePayWay{
+							text{
+								color: #333333 ;
+							}
+							image{
+								height:26rpx ;
+								width: 30rpx;
+								margin-right: 20px;
+							}
+						}
+						.randomSubstraction{
+							color: #FF6B4A ;
+						}
+						.preferentialWay{
+							color: #999999 ;
+						}
+					}
+					.freight,.total{
+						margin-right: 32rpx;
+					}
+					text{
+						color: #FF6B4A ;
+					}
+				}
+			}
+		}
+		.checkBox{
+			height: 58rpx;
+			line-height: 58rpx;
+			width: 100%;
+			margin-top: 36rpx;
+			margin-left: 40rpx;
+			font-size: 12px;
+			color: #999999;
+		}
+	}
+	.footer{
+		height: 112rpx;
+		width: 100%;
+		background-color: #ffffff;
+		font-size: 16px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		.footerLeft{
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: 50%;
+			color: #333333;
+			text{
+				color: #FF6B4A;
+			}
+		}
+		.footerRight{
+			display: flex;
+			justify-content: flex-end;
+			align-items: center;
+			width: 50%;
+			margin-right: 26rpx;
+			.paybtn{
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				background: #FF6B4A;
+				border-radius: 20px;
+				border-radius: 20px;
+				color: #FFFFFF;
+				width: 204rpx;
+				height: 80rpx;
+			}
+		}
+			
+	}
+	
+</style>
...	...	@@ -0,0 +1,376 @@
	1	+<template>
	2	+ <view class="wrap">
	3	+ <view class="addAddress">
	4	+ <view class="addIcon">
	5	+ <image src="../../static/add.png" mode="aspectFill"></image>
	6	+ </view>
	7	+ <view class="addressText">{{addAddress}}</view>
	8	+ <image src="../../static/right.png" mode="aspectFill"></image>
	9	+ </view>
	10	+ <view class="content">
	11	+ <view class="orderInfo">
	12	+ <view class="title">
	13	+ <image src="../../static/store.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
	14	+ <text>非常戴镜</text>
	15	+ </view>
	16	+ <view class="infoBox">
	17	+ <view class="infoTop">
	18	+ <image src="../../static/img/goods/p10.jpg" mode="aspectFill"></image>
	19	+ <view class="infoRight">
	20	+ <text class="goodName">商品名称商品名称商品名称名称名称</text>
	21	+ <text class="remarks">支持7天无理由退货顺丰发货</text>
	22	+ <view class="priceBox">
	23	+ <view class="price">￥198</view>
	24	+ <view class="counter">
	25	+ <view class="btn" disabled="this.disabled" type="default" @click="counter(false)">-</view>
	26	+ <text>{{count}}</text>
	27	+ <view class="btn" type="default" @click="counter(true)">+</view>
	28	+ </view>
	29	+ </view>
	30	+ </view>
	31	+ </view>
	32	+ <view class="infoBottom">
	33	+ <view class="norm">规格 <text>玫瑰金/钛合金</text></view>
	34	+ <view class="shippingMethod">配送方式 <text>玫瑰金/钛合金</text></view>
	35	+ <view class="message">买家留言
	36	+ <input type="text" value="" placeholder="建议提前协商(50字以内)" />
	37	+ </view>
	38	+ </view>
	39	+ </view>
	40	+ </view>
	41	+ <view class="payWay">
	42	+ <view class="item">
	43	+ <text>支付方式</text>
	44	+ <view class="itemRight">
	45	+ <view class="rightText">
	46	+ <view class="choosePayWay">
	47	+ <image src="../../static/store.png" mode="aspectFill"></image>
	48	+ <text>微信支付</text>
	49	+ </view>
	50	+ <view class="randomSubstraction">最高随机立减￥99</view>
	51	+ </view>
	52	+ <image src="../../static/right.png" mode="aspectFill"></image>
	53	+ </view>
	54	+ </view>
	55	+ <view class="item">
	56	+ <text>优惠券</text>
	57	+ <view class="itemRight">
	58	+ <view class="rightText">
	59	+ <view class="chooseOffers">
	60	+ <text>-￥70.00</text>
	61	+ </view>
	62	+ <view class="preferentialWay">最大优惠</view>
	63	+ </view>
	64	+ <image src="../../static/right.png" mode="aspectFill"></image>
	65	+ </view>
	66	+ </view>
	67	+ <view class="item">
	68	+ <text>运费</text>
	69	+ <view class="itemRight">
	70	+ <view class="freight">￥{{freight}}</view>
	71	+ </view>
	72	+ </view>
	73	+ <view class="item">
	74	+ <text>合计</text>
	75	+ <view class="itemRight">
	76	+ <view class="total">￥{{total}}</view>
	77	+ </view>
	78	+ </view>
	79	+ </view>
	80	+
	81	+ <view class="checkBox">
	82	+ <checkbox-group>
	83	+ <label>
	84	+ <checkbox color="#FF6B4A" value="isAnonymous" checked="true" />匿名购买
	85	+ </label>
	86	+ </checkbox-group>
	87	+ </view>
	88	+ </view>
	89	+ <view class="footer">
	90	+ <view class="footerLeft">实付金额:<text>￥{{total}}</text></view>
	91	+ <view class="footerRight">
	92	+ <view class="paybtn">立即支付</view>
	93	+ </view>
	94	+ </view>
	95	+ </view>
	96	+</template>
	97	+
	98	+<script>
	99	+ export default {
	100	+ data() {
	101	+ return {
	102	+ addAddress :'添加收货地址',
	103	+ count:1,
	104	+ disabled:false,
	105	+ total:120,
	106	+ freight:0.00
	107	+ // isAnonymous:
	108	+ };
	109	+ },
	110	+ methods:{
	111	+ counter(isadd){
	112	+ if(isadd){
	113	+ this.count++
	114	+ }else{
	115	+ this.count <= 1? this.disabled = true:this.count--
	116	+ }
	117	+ }
	118	+ }
	119	+ }
	120	+</script>
	121	+
	122	+<style lang="scss">
	123	+ .wrap{
	124	+ height: 100vh;
	125	+ background-color:#F2F2F2 ;
	126	+ font-family: PingFangSC-Regular;
	127	+ letter-spacing: -0.23px;
	128	+ }
	129	+ .addAddress{
	130	+ background-color:#ffffff ;
	131	+ box-sizing: border-box;
	132	+ height: 124rpx;
	133	+ width: 100%;
	134	+ display: flex;
	135	+ align-items: center;
	136	+ padding: 0 40rpx;
	137	+ .addIcon{
	138	+ background-color:#F2F2F2 ;
	139	+ height: 56rpx;
	140	+ width: 60rpx;
	141	+ border-radius: 4rpx;
	142	+ display: flex;
	143	+ justify-content: center;
	144	+ align-items: center;
	145	+ margin-right: 40rpx;
	146	+ }
	147	+ image{
	148	+ height: 28rpx;
	149	+ width: 28rpx;
	150	+ }
	151	+ .addressText{
	152	+ font-size: 28rpx;
	153	+ color: #333333;
	154	+ margin-right: 364rpx;
	155	+ }
	156	+ }
	157	+ .content{
	158	+ background-color:#F2F2F2 ;
	159	+ width: 100%;
	160	+ display: flex;
	161	+ flex-direction: column;
	162	+ justify-content: center;
	163	+ align-items: center;
	164	+ padding: 40rpx;
	165	+ box-sizing: border-box;
	166	+ .orderInfo{
	167	+ width: 670rpx;
	168	+ height: 488rpx;
	169	+ background-color:#ffffff ;
	170	+ border-radius: 20rpx;
	171	+ box-sizing: border-box;
	172	+ padding: 0 40rpx 40rpx 40rpx;
	173	+ .title{
	174	+ display: flex;
	175	+ align-items: center;
	176	+ font-size: 28rpx;
	177	+ color: #333333;
	178	+ height: 60rpx;
	179	+ line-height: 40rpx;
	180	+ padding: 10rpx 10rpx 10rpx 0rpx;
	181	+ image{
	182	+ margin-right: 20rpx;
	183	+ }
	184	+ }
	185	+ .infoBox{
	186	+ margin-top: 42rpx;
	187	+ .infoTop{
	188	+ display: flex;
	189	+ flex-direction: row;
	190	+ image{
	191	+ height: 188rpx;
	192	+ width: 188rpx;
	193	+ margin-right: 24rpx;
	194	+ }
	195	+ .infoRight{
	196	+ width: 374rpx;
	197	+ display: flex;
	198	+ flex-direction: column;
	199	+ align-items: flex-start;
	200	+ justify-content: space-between;
	201	+ .goodName{
	202	+ font-size: 28rpx;
	203	+ color: #333333;
	204	+ }
	205	+ .remarks{
	206	+ font-size: 20rpx;
	207	+ color: #999999;
	208	+ }
	209	+ .priceBox{
	210	+ display: flex;
	211	+ justify-content: space-between;
	212	+ align-items: center;
	213	+ width: 100%;
	214	+ .price{
	215	+ color: #FF6B4A;
	216	+ font-size: 28rpx;
	217	+ }
	218	+ .counter{
	219	+ display: flex;
	220	+ flex-direction: row;
	221	+ justify-content: space-between;
	222	+ font-size: 28rpx;
	223	+ color: #333333;
	224	+ width: 122rpx;
	225	+ .btn{
	226	+ display: flex;
	227	+ justify-content: center;
	228	+ line-height: 32rpx;
	229	+ height: 32rpx;
	230	+ width: 32rpx;
	231	+ background-color: #F2F2F2;
	232	+ color: #CFCFCF;
	233	+ }
	234	+ }
	235	+ }
	236	+ }
	237	+ }
	238	+ .infoBottom{
	239	+ display: flex;
	240	+ flex-direction: column;
	241	+ justify-content: flex-start;
	242	+ font-size: 24rpx;
	243	+ color: #333333;
	244	+ text{
	245	+ color: #999999;
	246	+ margin-left: 20rpx;
	247	+ }
	248	+
	249	+ .norm{
	250	+ margin-top: 28rpx;
	251	+ }
	252	+ .shippingMethod{
	253	+ margin-top: 12rpx;
	254	+ }
	255	+ .message{
	256	+ display: flex;
	257	+ flex-direction: row;
	258	+ align-items: center;
	259	+ margin-top: 18rpx;
	260	+ input{
	261	+ margin-left: 20rpx;
	262	+ width: 75%;
	263	+ }
	264	+ }
	265	+ }
	266	+ }
	267	+ }
	268	+ .payWay{
	269	+ height: 464rpx;
	270	+ width: 670rpx;
	271	+ background-color: #ffffff;
	272	+ color: #333333;
	273	+ font-size: 24rpx;
	274	+ border-radius: 20rpx;
	275	+ box-sizing: border-box;
	276	+ padding: 0 52rpx 0rpx 40rpx;
	277	+ margin-top: 20rpx;
	278	+ display: flex;
	279	+ flex-direction: column;
	280	+ justify-content: center;
	281	+ align-items: flex-start;
	282	+ .item{
	283	+ display: flex;
	284	+ flex-direction: row;
	285	+ justify-content: space-between;
	286	+ align-items: center;
	287	+ width: 100%;
	288	+ height: 115rpx;
	289	+ .itemRight{
	290	+ display: flex;
	291	+ flex-direction: row;
	292	+ justify-content: space-between;
	293	+ align-items: center;
	294	+ image{
	295	+ height: 24rpx;
	296	+ width: 12rpx;
	297	+ }
	298	+ .rightText{
	299	+ margin-right: 20rpx;
	300	+ text-align: right;
	301	+ .choosePayWay{
	302	+ text{
	303	+ color: #333333 ;
	304	+ }
	305	+ image{
	306	+ height:26rpx ;
	307	+ width: 30rpx;
	308	+ margin-right: 20px;
	309	+ }
	310	+ }
	311	+ .randomSubstraction{
	312	+ color: #FF6B4A ;
	313	+ }
	314	+ .preferentialWay{
	315	+ color: #999999 ;
	316	+ }
	317	+ }
	318	+ .freight,.total{
	319	+ margin-right: 32rpx;
	320	+ }
	321	+ text{
	322	+ color: #FF6B4A ;
	323	+ }
	324	+ }
	325	+ }
	326	+ }
	327	+ .checkBox{
	328	+ height: 58rpx;
	329	+ line-height: 58rpx;
	330	+ width: 100%;
	331	+ margin-top: 36rpx;
	332	+ margin-left: 40rpx;
	333	+ font-size: 12px;
	334	+ color: #999999;
	335	+ }
	336	+ }
	337	+ .footer{
	338	+ height: 112rpx;
	339	+ width: 100%;
	340	+ background-color: #ffffff;
	341	+ font-size: 16px;
	342	+ display: flex;
	343	+ justify-content: space-between;
	344	+ align-items: center;
	345	+ .footerLeft{
	346	+ display: flex;
	347	+ justify-content: center;
	348	+ align-items: center;
	349	+ width: 50%;
	350	+ color: #333333;
	351	+ text{
	352	+ color: #FF6B4A;
	353	+ }
	354	+ }
	355	+ .footerRight{
	356	+ display: flex;
	357	+ justify-content: flex-end;
	358	+ align-items: center;
	359	+ width: 50%;
	360	+ margin-right: 26rpx;
	361	+ .paybtn{
	362	+ display: flex;
	363	+ justify-content: center;
	364	+ align-items: center;
	365	+ background: #FF6B4A;
	366	+ border-radius: 20px;
	367	+ border-radius: 20px;
	368	+ color: #FFFFFF;
	369	+ width: 204rpx;
	370	+ height: 80rpx;
	371	+ }
	372	+ }
	373	+
	374	+ }
	375	+
	376	+</style>
...	...