提交信息确认页面切图

packages/myorder/infoconfirm.vue

@@ -0,0 +1,185 @@
+<template>
+	<view class="ordercontainer">
+		<view class="confirmbox">
+			<view class="confirmpicinfo">
+				<view class="imgbox">
+					<image src="../../static/confirmimg.jpg" mode="widthFix"></image>
+				</view>
+				<view class="pictitle">蟹太太大闸蟹红金款999型</view>
+				<text>公4.0两母3.0两 4对 8只装</text>
+			</view>
+		</view>
+		<view class="confirmlist" style="background-image: url(../../static/confirmbg2.jpg);">
+			<view class="iconimg">
+				<image src="../../static/icon1.png" mode="widthFix"></image>
+			</view>
+			<view class="confirmright">
+				<text class="confirmmarker">收货日期</text>
+				<view class="flex-li confirmdate">
+					<text>2024年9月28日</text>
+					<text class="smallfont">农历八月十三</text>
+				</view>
+				<view class="flex-li confirmdate">
+					<text>09：00-15：00</text>
+					<text class="smallfont">[周三]</text>
+				</view>		
+			</view>
+		</view>
+		<view class="confirmlist" style="background-image: url(../../static/confirmbg3.jpg);">
+			<view class="iconimg">
+				<image src="../../static/icon2.png" mode="widthFix"></image>
+			</view>
+			<view class="confirmright">
+				<text class="confirmmarker">收货地址</text>
+				<view class="flex-li confirmaddress">
+					<text>浙江省杭州市滨江区银泰海威国际xxxx</text>
+				</view>
+			</view>
+		</view>
+		<view class="confirmlist" style="background-image: url(../../static/confirmbg4.jpg);">
+			<view class="iconimg">
+				<image src="../../static/icon3.png" mode="widthFix"></image>
+			</view>
+			<view class="confirmright">
+				<text class="confirmmarker">收货人</text>
+				<view class="flex-li confirmcontact">
+					<text>王冰冰</text>
+					<text>15326589454</text>
+				</view>
+			</view>
+		</view>
+		<view class="confirmbtn">
+			<text class="edit">返回修改</text>
+			<text class="confirmtab">确认提货</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		
+		data() {
+			return {
+				
+			}
+		},
+		onLoad() {
+			
+		},
+		methods: {
+			
+			
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.ordercontainer{
+		background: #f0efed;
+		width: 100%;
+		height: 100vh;
+		padding: 42rpx 50rpx 300rpx;
+		overflow-y: scroll;
+	}
+	.confirmbox{
+		width: 100%;
+		padding-top: 22rpx;
+		padding-bottom: 35rpx;
+		background: url(../../static/confirmbg1.jpg) no-repeat center top;
+		background-size: cover;
+		border-radius: 10rpx;
+		box-shadow: 0 5rpx 15rpx rgba(0,0,0,.47);
+	}
+	.confirmpicinfo{
+		text-align: center;
+		font-size: 24rpx;
+		color: #d5c7b5;
+		line-height: 42rpx;
+	}
+	.imgbox{
+		width: 307rpx;
+		margin: 0 auto;
+		border-radius: 10rpx;
+		border: 1px solid #ba8b45;
+		overflow: hidden;
+		margin-bottom: 14rpx;
+	}
+	.imgbox image{
+		width:100%;
+		height: auto;
+		vertical-align: middle;
+	}
+	.confirmpicinfo .pictitle{
+		color: #ba8b45;
+	}
+	.confirmlist{
+		margin-top: 30rpx;
+		border-radius: 10rpx;
+		overflow: hidden;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background-repeat: no-repeat;
+		background-position: center top;
+	  background-size: cover;
+		box-shadow: 0 5rpx 15rpx rgba(0,0,0,.47);
+		padding: 10rpx 10rpx 10rpx 20rpx;
+	}
+	
+	.confirmlist image{
+		width: 62rpx;
+		height: auto;
+	}
+	.confirmlist .confirmright{
+		width: 550rpx;
+		background: #fff;
+		border-radius: 10rpx;
+		padding: 45rpx 20rpx 25rpx;
+	}
+	.confirmmarker{
+		display: block;
+		font-size:24rpx;
+		color: #000;
+		font-weight: bold;
+		margin-bottom: 8rpx;
+	}
+	.flex-li{
+		display: flex;
+		justify-content: space-between;
+		color: #000;
+		font-size: 30rpx;
+		line-height: 60rpx;
+	}
+	.confirmdate text.smallfont{
+		font-size: 24rpx;
+	}
+	.confirmbtn{
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		height: 115rpx;
+		display: flex;
+		padding: 0 10rpx;
+		justify-content: space-between;
+		background: #fff;
+		align-items: center;
+	}
+	.confirmbtn text{
+		display: inline-block;
+		width: 284rpx;
+		line-height: 74rpx;
+		height: 74rpx;
+		text-align: center;
+		border-radius: 74rpx;
+		border: 1rpx solid #d1d1d0;
+		margin: 0 38rpx;
+		font-size: 29rpx;
+		color:#000;
+	}
+	.confirmbtn text.confirmtab{
+		color: #fff;
+		border: 1rpx solid #ba8b45;
+		background: #ba8b45;
+	}
+</style>

packages/myorder/myorder.vue

@@ -5,9 +5,9 @@
 		</view>
 		<view class="orderlist">
 			<!-- 1条数据开始 -->
-			<view class="orderitem">
+			<view class="orderitem" @click="toDetail">
 				<view class="ordertop">
-					<text>运单号：SFSF1454237639361</text>
+					<text>运单号1：SFSF1454237639361</text>
 					<text>已发货</text>
 				</view>
 				<view class="orderinfo">
@@ -115,6 +115,12 @@
 			change(index) {
 				this.current = index;
 			},
+			toDetail(){
+				console.log("123")
+				uni.navigateTo({
+					url:'/packages/myorder/infoconfirm'
+				})
+			}
 			
 		}
 	}

pages.json

@@ -35,7 +35,13 @@
 			"style": {
 				"navigationBarTitleText": "我的订单"
 			}
-		}, {
+		},
+		{
+			"path" : "myorder/infoconfirm",
+			"style": {
+				"navigationBarTitleText": "订单详情"
+			}
+		},{
 			"path": "card/index",
 			"style": {
 				"navigationBarTitleText": "卡券查询"

project.config.json

@@ -0,0 +1,28 @@
+{
+  "appid": "wxcaf5838e90ef6189",
+  "compileType": "miniprogram",
+  "libVersion": "3.4.6",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "setting": {
+    "coverView": true,
+    "es6": true,
+    "postcss": true,
+    "minified": true,
+    "enhance": true,
+    "showShadowRootInWxmlPanel": true,
+    "packNpmRelationList": [],
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    }
+  },
+  "condition": {},
+  "editorSetting": {
+    "tabIndent": "insertSpaces",
+    "tabSize": 2
+  }
+}

project.private.config.json

@@ -0,0 +1,7 @@
+{
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "projectname": "x-xietaitai-shop-wx",
+  "setting": {
+    "compileHotReLoad": true
+  }
+}