提单页面

src/pages.json

@@ -1,175 +1,181 @@
-{
-  "easycom": {
-    "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
-  },
-  "pages": [
-    {
-      "path": "pages/index",
-      "style": {
-        "navigationBarTitleText": "开屏广告",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/tabbar/home/index",
-      "style": {
-        "navigationBarTitleText": "首页",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/tabbar/community/index",
-      "style": {
-        "navigationBarTitleText": "社区",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/tabbar/message/index",
-      "style": {
-        "navigationBarTitleText": "消息",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/tabbar/mine/index",
-      "style": {
-        "navigationBarTitleText": "我的"
-      }
-    },
-    {
-      "path": "pages/login/index",
-      "style": {
-        "navigationBarTitleText": "登录"
-      }
-    },
-    {
-      "path": "pages/login/phoneLogin",
-      "style": {
-        "navigationBarTitleText": "手机验证"
-      }
-    }
-  ],
-  "subPackages": [
-    {
-      "root": "pages/business",
-      "pages": [
-        {
-          "path": "category",
-          "style": {
-            "navigationBarTitleText": "商家分类"
-          }
-        },
-        {
-          "path": "list",
-          "style": {
-            "navigationBarTitleText": "商家列表"
-          }
-        },
-        {
-          "path": "detail",
-          "style": {
-            "navigationBarTitleText": "商家详情"
-          }
-        },
-        {
-          "path": "service/list",
-          "style": {
-            "navigationBarTitleText": "服务列表"
-          }
-        },
-        {
-          "path": "service/detail",
-          "style": {
-            "navigationBarTitleText": "服务详情"
-          }
-        }
-      ]
-    },
-    {
-      "root": "pages/user",
-      "pages": [
-        {
-          "path": "collect/list",
-          "style": {
-            "navigationBarTitleText": "我的收藏"
-          }
-        },
-        {
-          "path": "appoint/index",
-          "style": {
-            "navigationBarTitleText": "预约列表"
-          }
-        },
-        {
-          "path": "coupon/index",
-          "style": {
-            "navigationBarTitleText": "优惠券"
-          }
-        },
-        {
-          "path": "score/index",
-          "style": {
-            "navigationBarTitleText": "我的积分"
-          }
-        },
-        {
-          "path": "info/index",
-          "style": {
-            "navigationBarTitleText": "个人中心"
-          }
-        },
-        {
-          "path": "info/update",
-          "style": {
-            "navigationBarTitleText": "编辑资料"
-          }
-        },
-        {
-          "path": "settings/index",
-          "style": {
-            "navigationBarTitleText": "设置"
-          }
-        }
-      ]
-    }
-  ],
-  "tabBar": {
-    "color": "#999999",
-    "selectedColor": "#42b2fa",
-    "borderStyle": "black",
-    "backgroundColor": "#ffffff",
-    "list": [
-      {
-        "text": "首页",
-        "pagePath": "pages/tabbar/home/index",
-        "iconPath": "static/images/home.png",
-        "selectedIconPath": "static/images/home-select.png"
-      },
-      {
-        "pagePath": "pages/tabbar/community/index",
-        "text": "社区",
-        "iconPath": "static/images/community.png",
-        "selectedIconPath": "static/images/community-select.png"
-      },
-      {
-        "pagePath": "pages/tabbar/message/index",
-        "text": "消息",
-        "iconPath": "static/images/message.png",
-        "selectedIconPath": "static/images/message-select.png"
-      },
-      {
-        "pagePath": "pages/tabbar/mine/index",
-        "text": "我的",
-        "iconPath": "static/images/mine.png",
-        "selectedIconPath": "static/images/mine-select.png"
-      }
-    ]
-  },
-  "globalStyle": {
-    "navigationBarTextStyle": "black",
-    "navigationBarTitleText": "uni-app",
-    "navigationBarBackgroundColor": "#F8F8F8",
-    "backgroundColor": "#F8F8F8"
-  }
-}
+{
+	"easycom": {
+		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+	},
+	"pages": [{
+			"path": "pages/index",
+			"style": {
+				"navigationBarTitleText": "开屏广告",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/tabbar/home/index",
+			"style": {
+				"navigationBarTitleText": "首页",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/tabbar/community/index",
+			"style": {
+				"navigationBarTitleText": "社区",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/tabbar/message/index",
+			"style": {
+				"navigationBarTitleText": "消息",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/tabbar/mine/index",
+			"style": {
+				"navigationBarTitleText": "我的"
+			}
+		},
+		{
+			"path": "pages/login/index",
+			"style": {
+				"navigationBarTitleText": "登录"
+			}
+		},
+		{
+			"path": "pages/login/phoneLogin",
+			"style": {
+				"navigationBarTitleText": "手机验证"
+			}
+		}
+	],
+	"subPackages": [{
+			"root": "pages/business",
+			"pages": [{
+					"path": "category",
+					"style": {
+						"navigationBarTitleText": "商家分类"
+					}
+				},
+				{
+					"path": "service/detail",
+					"style": {
+						"navigationBarTitleText": "服务详情"
+					}
+				},
+				{
+					"path": "list",
+					"style": {
+						"navigationBarTitleText": "商家列表"
+					}
+				},
+				{
+					"path": "detail",
+					"style": {
+						"navigationBarTitleText": "商家详情"
+					}
+				},
+				{
+					"path": "service/list",
+					"style": {
+						"navigationBarTitleText": "服务列表"
+					}
+				}
+			]
+		},
+		{
+			"root": "pages/user",
+			"pages": [{
+					"path": "collect/list",
+					"style": {
+						"navigationBarTitleText": "我的收藏"
+					}
+				},
+				{
+					"path": "appoint/index",
+					"style": {
+						"navigationBarTitleText": "预约列表"
+					}
+				},
+				{
+					"path": "coupon/index",
+					"style": {
+						"navigationBarTitleText": "优惠券"
+					}
+				},
+				{
+					"path": "score/index",
+					"style": {
+						"navigationBarTitleText": "我的积分"
+					}
+				},
+				{
+					"path": "info/index",
+					"style": {
+						"navigationBarTitleText": "个人中心"
+					}
+				},
+				{
+					"path": "info/update",
+					"style": {
+						"navigationBarTitleText": "编辑资料"
+					}
+				},
+				{
+					"path": "settings/index",
+					"style": {
+						"navigationBarTitleText": "设置"
+					}
+				}
+			]
+		},
+		{
+			"root": "pages/order",
+			"pages": [
+				{
+					"path": "order",
+					"style": {
+						"navigationBarTitleText": "提价订单"
+					}
+				}
+			]
+		}
+	],
+	"tabBar": {
+		"color": "#999999",
+		"selectedColor": "#42b2fa",
+		"borderStyle": "black",
+		"backgroundColor": "#ffffff",
+		"list": [{
+				"text": "首页",
+				"pagePath": "pages/tabbar/home/index",
+				"iconPath": "static/images/home.png",
+				"selectedIconPath": "static/images/home-select.png"
+			},
+			{
+				"pagePath": "pages/tabbar/community/index",
+				"text": "社区",
+				"iconPath": "static/images/community.png",
+				"selectedIconPath": "static/images/community-select.png"
+			},
+			{
+				"pagePath": "pages/tabbar/message/index",
+				"text": "消息",
+				"iconPath": "static/images/message.png",
+				"selectedIconPath": "static/images/message-select.png"
+			},
+			{
+				"pagePath": "pages/tabbar/mine/index",
+				"text": "我的",
+				"iconPath": "static/images/mine.png",
+				"selectedIconPath": "static/images/mine-select.png"
+			}
+		]
+	},
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "uni-app",
+		"navigationBarBackgroundColor": "#F8F8F8",
+		"backgroundColor": "#F8F8F8"
+	}
+}

src/pages/order/order.vue

@@ -0,0 +1,282 @@
+<template>
+	<view class="order-continar">
+		<!-- 商品信息 -->
+		<view class="shop-info public">
+			<view class="title margin-bot flex">
+				<text class="title-font">
+					[养车]标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
+				</text>
+				<text class="general-font">¥{{shop.shopPrice}}</text>
+			</view>
+			<view class="num margin-bot after-line flex">
+				<text class="lighter-fornt">数量</text>
+				<view class="buy-num-block flex">
+					<view class="add-block block" @tap="shop.buyQuantity++">+</view>
+					<u-input v-model="shop.buyQuantity" type="number" height="100%" />
+					<view class="reduce-block block" @tap="shop.buyQuantity--">-</view>
+				</view>
+			</view>
+			<view class="account margin-bot flex">
+				<text class="lighter-fornt">小计</text>
+				<text style="color: rgb(250,111,25);">¥{{shopAccount}}</text>
+			</view>
+		</view>
+
+		<!-- 优惠 -->
+		<view class="discount public">
+			<view class="discount-item after-line flex"
+				v-for="(item,index) in discountGroup" :key="index">
+				<view class="flex" style="justify-content: space-between;width:250rpx;">
+					<text class="icon title-font">惠</text>
+					<text class="general-font">活动优惠</text>
+				</view>
+				<text class="money general-font">-¥{{item.money}}</text>
+			</view>
+		</view>
+
+		<!-- 订单总价 -->
+		<view class="total-money flex public">
+			<text>订单总价</text>
+			<view class="order-total">
+				<text class="bill">¥{{orderTotalPrice>0?orderTotalPrice:0}}</text>
+				<text class="discount general-font">(已优惠¥{{totalAccount}})</text>
+			</view>
+		</view>
+
+		<!-- 支付方式 -->
+		<view class="pay-methods flex public">
+			<text>支付方式</text>
+			<text @tap="popupShow">微信支付 ></text>
+		</view>
+
+		<!-- 购买须知 -->
+		<view class="use-info public">
+			<view class="after-line buy-info" style="position: relative;">购买须知</view>
+			<view class="lighter-fornt info-item " v-for="(item,index) in useInfoGroup" :key="index">{{item.content}}</view>
+		</view>
+		
+		<!-- 底部支付 -->
+		<view class="bottom-pay public flex">
+			<view class="total-price">总计：<text class="price">¥{{orderTotalPrice>0?orderTotalPrice:0}}</text></view>
+			<view class="pay-button">立即支付</view>
+		</view>
+		
+		<!-- 弹窗 -->
+		<u-popup :show="show" mode="bottom" mask="true" closeable close-icon-pos="top-right" @close="show=false">
+			<view>微信</view>
+			<view>支付宝</view>
+			<view>银联</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				shop: {
+					buyQuantity: 1,
+					shopPrice: 256
+				},
+				show: false,
+				useInfoGroup: [{
+						content: '编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑'
+					},
+					{
+						content: '编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑编辑'
+					}
+				],
+				discountGroup:[
+					{
+						money:168.22
+					},
+					{
+						money:22.5
+					},
+					{
+						money:33.45
+					},
+				]
+			};
+		},
+		computed: {
+			shopAccount() {
+				return this.shop.buyQuantity<0?0:this.shop.buyQuantity * this.shop.shopPrice
+			},
+			totalAccount() {
+				let total = 0
+				this.discountGroup.forEach(i=>{
+					total+=i.money
+				})
+				return total.toFixed(2)
+			},
+			orderTotalPrice(){
+				return (this.shopAccount - this.totalAccount).toFixed(2)
+			}
+		},
+		methods: {
+			popupShow() {
+				this.show = true
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.order-continar {
+		height: 100vh;
+		width: 750rpx;
+		background-color: rgb(235, 236, 237);
+
+		view {
+			box-sizing: border-box;
+		}
+		.title-font{
+			display:inline-block;
+			width: 85%;
+			font-size: 32rpx;
+			font-weight: 800;
+		}
+		.general-font{
+			font-size: 28rpx;
+			font-weight:400;
+		}
+		.lighter-fornt{
+			font-weight:lighter;
+			font-size: 25rpx;
+		}
+
+		.public {
+			background-color: #fff;
+			width: 750rpx;
+			padding: 30rpx;
+			margin-bottom: 20rpx;
+		}
+
+		.flex {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+		}
+		.margin-bot{
+			margin-bottom: 30rpx;
+		}
+		.after-line{
+			&::after{
+				display: block;
+				content: " ";
+				width: 100%;
+				left: 0;
+				bottom: 0;
+				position: absolute;
+				background-color: rgb(229, 229, 229);
+				height: 2px;
+				width: 100%;
+			}
+		}
+	}
+
+	.shop-info {
+		.num{
+			height: 100rpx;
+			position: relative;
+		}
+		.buy-num-block {
+			justify-content: center;
+			width: 200rpx;
+
+			.block {
+				width: 52rpx;
+				height: 52rpx;
+				line-height: 45rpx;
+				text-align: center;
+				border: 1px solid rgb(230, 230, 230);
+			}
+		}
+
+		::v-deep .u-input {
+			border: 1px solid rgb(229, 229, 229);
+			border-right: none;
+			border-left: none;
+			border-radius: 0 !important;
+			padding-top: 0 !important;
+			padding-bottom: 0 !important;
+		}
+	}
+	
+	.discount-item{
+		height: 120rpx;
+		width: 100%;
+		position: relative;
+		.icon{
+			height: 75rpx;
+			line-height: 75rpx;
+			text-align: center;
+			color: #fff;
+			width: 85rpx;
+			border-radius: 20rpx;
+			background-color: rgb(250,111,25);
+		}
+	}
+	
+	.total-money .order-total{
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		.bill{
+			font-size: 32rpx;
+			font-weight: 800;
+			color:rgb(250,111,25)
+		}
+		.discount{
+			color: rgb(250,111,25);
+		}
+	}
+	
+	.use-info{
+		margin-bottom: 0 !important;
+		.buy-info{
+			padding-bottom: 30rpx;
+			margin-bottom: 30rpx;
+		}
+		.info-item{
+			margin-bottom: 20rpx;
+			position: relative;
+			text-indent: 15rpx;
+			&:last-child{
+				margin-bottom: 0;
+			}
+			&:before{
+				display: block;
+				content: ' ';
+				position: absolute;
+				height: 6rpx;
+				width: 6rpx;
+				top: 10rpx;
+				left: 4rpx;
+				border-radius: 3rpx;
+				background-color: rgb(128,128,128);
+			}
+		}
+	}
+	
+	.bottom-pay{
+		.total-price{
+			color:rgb(250,111,25);
+			.price{
+				font-size: 32rpx;
+				font-weight: 800;
+			}
+		}
+		.pay-button{
+			width: 400rpx;
+			height: 80rpx;
+			line-height: 80rpx;
+			text-align: center;
+			color:#fff;
+			background-color: rgb(250,111,25);
+			border-radius: 40rpx;
+		}
+	}
+</style>

src/pages/tabbar/mine/index.vue

@@ -53,10 +53,11 @@
       </view>
 
       <!-- 我的订单 -->
-      <view
+      <!-- <view
         class="order-out-box"
         @tap="$Router.push('/pages/user/myOrder/index')"
-      >
+      > -->
+	  <view class="order-out-box">
         <view class="order-inner-box">
           <u-grid :border="false" col="4" style="background-color: #fff">
             <u-grid-item
@@ -66,7 +67,8 @@
               <u-icon
                 :customStyle="{ paddingTop: 20 + 'rpx' }"
                 :name="listItem.name"
-                :size="34"
+                :size="34"
+				@tap="gotoOrder(listItem)"
               ></u-icon>
               <text class="grid-text">{{ listItem.title }}</text>
             </u-grid-item>
@@ -181,7 +183,8 @@ export default {
         },
         {
           name: 'lock',
-          title: '待付款',
+          title: '待付款',
+		  order: true
         },
         {
           name: 'star',
@@ -214,7 +217,14 @@ export default {
   },
   computed: {
     ...mapGetters(['user_info']),
-  },
+  },
+  methods:{
+	  gotoOrder(item){
+		  if(item.order){
+			this.$Router.push('/pages/order/order');
+		  }
+	  }
+  }
 };
 </script>
 <style lang="scss" scoped>