update

mobile-code/src/components/app-coupon-sel.vue

@@ -0,0 +1,165 @@
+<template>
+	<div class="coupon-sel">
+		<radio-group class="radio-group" name="coupon" @change="checkChange">
+            <!-- 会员优惠 -->
+			<div class="sel-list flex-center-between" v-if="discountArr.indexOf('member') > -1">
+				<div class="sel-tit">
+					<radio value="1" :checked="memberCheck" />
+					<span class="dis-pormpt">您是3级会员，享9折优惠</span>
+				</div>
+				<div class="app-price app-size-28">-￥5</div>
+			</div>
+            <!-- 优惠券优惠 -->
+			<div class="sel-list" v-if="discountArr.indexOf('coupon') > -1">
+				<div class="sel-tit">
+					<radio value="2" />
+					<span class="dis-pormpt">您有优惠券可用，请选择</span>
+				</div>
+				<div class="coupon-wrap" v-show="selIndex == 2">
+					<div class="coupon-list" v-for="(item, index) in 2" :key="index" @click="couponChange(index)">
+						<div class="list-img">
+							<!-- 已过期 -->
+							<template v-if="couponSelInx && couponSelInx == index">
+								<img src="../static/images/coupon/is-check.png" alt mode="widthFix" />
+							</template>
+							<template v-else>
+								<img src="../static/images/coupon/no-check.png" alt mode="widthFix" />
+							</template>
+						</div>
+						<!-- 列表 -->
+						<div class="list-det">
+							<div class="list-det-left">
+								<div class="price-wrap">
+									<span>￥</span>
+									<span class="price">1000</span>
+								</div>
+								<div class="full-reduc app-size-28">满100可使用</div>
+							</div>
+							<div class="list-det-right">
+								<div class="coupon-message">
+									<div class="app-font-color-2">优惠券</div>
+									<div>适用：全品类</div>
+									<div>有效至：2020-10-11</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</radio-group>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'coupon-sel',
+	props: {
+		// 可使用优惠列表
+		discountArr: {
+			type: Array,
+			default: () => []
+		}
+	},
+	data() {
+		return {
+			mainColor: 'green',
+			memberCheck: false,
+			selIndex: null,
+			couponSelInx: null
+		}
+	},
+	computed: {
+	},
+	mounted() {
+		if (this.discountArr.indexOf('member') > -1) {
+			this.selIndex = 1
+		    this.memberCheck = true
+		}
+	},
+	methods: {
+		checkChange(e) {
+			this.selIndex = e.detail.value
+		},
+		// 优惠券选择
+		couponChange(index) {
+			this.couponSelInx = index
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.sel-list {
+		.sel-tit {
+            @include disFlex(center, flex-start);
+            margin-top: 30px;
+            .dis-pormpt {
+                font-size: 28px;
+                color: $fontColor2;
+                margin-left: 6px;
+            }
+        }
+        &:first-child .sel-tit {
+            margin-top: 0;
+        }
+	}
+	// 优惠券
+	.coupon-wrap {
+        padding-top: 20px;
+		.coupon-list {
+			position: relative;
+			margin-bottom: 6px;
+			.list-det {
+				width: 100%;
+				@include disFlex(center, space-between);
+				position: absolute;
+				top: 0;
+				left: 0;
+				.list-det-left {
+					padding: 20px 0 20px 36px;
+					width: 210px;
+					color: $mainColor;
+					.price-wrap {
+						margin-bottom: 6px;
+						font-size: 26px;
+						.price {
+							font-size: 60px;
+							font-weight: bold;
+							line-height: 1;
+						}
+					}
+				}
+				.list-det-right {
+					width: calc(100% - 280px);
+					margin-left: 22px;
+					@include disFlex(center, space-between);
+					padding: 20px 26px 20px 0;
+					.coupon-message {
+						color: $fontColor3;
+						& > div {
+							margin: 6px 0;
+						}
+					}
+					.button-com {
+						padding-top: 15px;
+						padding-bottom: 15px;
+					}
+					.icon-wrap {
+						position: absolute;
+						top: 20px;
+						right: 20px;
+						.iconfont {
+							font-size: 128px;
+							color: #ffbbcd;
+						}
+					}
+				}
+			}
+		}
+	}
+	// 修改uni-app组件
+	/deep/.uni-radio-input-checked {
+		background-color: $mainColor !important;
+		border-color: $mainColor !important;
+	}
+</style>

mobile-code/src/pages.json

@@ -9,19 +9,19 @@
 		{
 			"path": "pages/category/index",
 			"style": {
-				"navigationBarTitleText": "加载中..."
+				"navigationBarTitleText": "分类"
 			}
 		},
 		{
 			"path": "pages/shop/index",
 			"style": {
-				"navigationBarTitleText": "加载中..."
+				"navigationBarTitleText": "门店"
 			}
 		},
 		{
 			"path": "pages/user/index",
 			"style": {
-				"navigationBarTitleText": "加载中..."
+				"navigationBarTitleText": "我的"
 			}
 		},
 		{
@@ -79,7 +79,11 @@
 			"root": "pages/coupon",
 			"pages": [
 				{
-					"path": "list"
+					"path": "list",
+					"style": {
+						"navigationBarTitleText": "优惠券",
+						"enablePullDownRefresh": true
+					}
 				}
 			]
 		},
@@ -87,7 +91,18 @@
 			"root": "pages/order",
 			"pages": [
 				{
-					"path": "list"
+					"path": "list",
+					"style": {
+						"navigationBarTitleText": "订单列表",
+						"enablePullDownRefresh": true
+					}
+				},
+				{
+					"path": "detail",
+					"style": {
+						"navigationBarTitleText": "订单列表",
+						"enablePullDownRefresh": true
+					}
 				}
 			]
 		}

mobile-code/src/pages/order/detail.vue

@@ -0,0 +1,170 @@
+<template>
+	<div class="app-content">
+        <div class="page-top">
+            <div class="page-top-img">
+                <img src="../../static/images/order/bg.png" alt="">
+            </div>
+            <div class="page-top-det">
+                <div>
+                    <div class="page-status">等待支付</div>
+                    <div class="page-prompt">请尽快支付哟~</div>
+                </div>
+                <div class="page-status-img">
+                    <img src="../../static/images/order/wait-pay.png" alt="">
+                </div>
+            </div>
+        </div>
+        <!-- 订单详情 -->
+        <div class="page-det">
+            <!-- 商品信息 -->
+            <div class="module-com">
+                <div class="module-tit">商品信息</div>
+                <div class="module-det">
+				    <list-module v-for="(item, subIndex) in 2" :key="subIndex" />
+                </div>
+            </div>
+            <!-- 订单信息 -->
+            <div class="module-com order-msg">
+                <div class="module-tit">订单信息</div>
+                <div class="module-det">
+                    <!--  -->
+                    <div class="order-msg-blo">
+                        <div class="msg-list">
+                            <div class="label">收花人</div>
+                            <div class="value">叶落西风</div>
+                        </div>
+                        <div class="msg-list">
+                            <div class="label">电话</div>
+                            <div class="value">叶落西风</div>
+                        </div>
+                        <div class="msg-list">
+                            <div class="label">地址</div>
+                            <div class="value">海路36号（福建省厦门市软件园二期 望海路36号403室）</div>
+                        </div>
+                    </div>
+                    <!--  -->
+                    <div class="order-msg-blo">
+                        <div class="msg-list">
+                            <div class="label">送达时间</div>
+                            <div class="value">叶落西风</div>
+                        </div>
+                        <div class="msg-list">
+                            <div class="label">贺卡</div>
+                            <div class="value">叶落西风</div>
+                        </div>
+                        <div class="msg-list">
+                            <div class="label">地址</div>
+                            <div class="value">叶落西风</div>
+                        </div>
+                    </div>
+                    <!--  -->
+                    <div class="order-msg-blo">
+                        <div class="msg-list">
+                            <div class="label">订单号</div>
+                            <div class="value">叶落西风</div>
+                        </div>
+                        <div class="msg-list">
+                            <div class="label">时间</div>
+                            <div class="value">叶落西风</div>
+                        </div>
+                        <div class="msg-list">
+                            <div class="label">总价</div>
+                            <div class="value">叶落西风</div>
+                        </div>
+                        <div class="msg-list">
+                            <div class="label">运费</div>
+                            <div class="value">￥10</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 优惠信息 -->
+            <div class="module-com coupon-wrap">
+                <div class="module-tit">优惠信息</div>
+                <div class="module-det">
+				    <app-coupon :discountArr="['member', 'coupon']" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import listModule from './components/list'
+import appCoupon from '@/components/app-coupon-sel'
+export default {
+	name: 'order-detail',
+	components: {
+		listModule,
+		appCoupon
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.page-top {
+    position: relative;
+    .page-top-det {
+        position: absolute;
+        top: 22px;
+        @include disFlex(center, space-between);
+        width: 84%;
+        padding: 0 48px;
+        color: #fff;
+        .page-status {
+            font-size: 36px;
+            font-weight: bold;
+            margin-bottom: 16px;
+        }
+        .page-prompt {
+            color: #FFDEDE;
+        }
+        .page-status-img {
+            width: 180px;
+        }
+    }
+}
+.page-det {
+    width: 94%;
+    margin: 0 auto;
+    position: relative;
+    top: -40px;
+    .order-msg {
+        .order-msg-blo {
+            font-size: 28px;
+            padding: 20px 0;
+            border-top: 1px solid $borderColor;
+            .msg-list {
+                @include disFlex(flex-start, space-between);
+                margin: 8px 0;
+                .label {
+                    width: 40%;
+                    color: $fontColor3;
+                }
+            }
+        }
+        & .order-msg-blo:first-child {
+            border-top: none;
+        }
+    }
+    .coupon-wrap {
+        .module-det {
+            padding: 20px 0;
+        }
+    }
+}
+// 公共模块
+.module-com {
+    border-radius: 10px;
+    background-color: #fff;
+    padding: 0 20px;
+    box-shadow: 0px 6px 16px #ddd;
+    margin-bottom: 20px;
+    .module-tit {
+        padding: 20px 0;
+        font-size: 28px;
+        font-weight: 600;
+        border-bottom: 1px solid $borderColor;
+    }
+}
+</style>

mobile-code/src/pages/order/list.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="app-content">
-		<div class="list-wrap" v-for="(item, index) in 4" :key="index">
+		<div class="list-wrap" v-for="(item, index) in 4" :key="index" @click="$util.pageTo('/pages/order/detail')">
 			<div class="list-top flex-center-between">
 				<div class="app-font-color-3">订单编号：3261515151</div>
 				<div class="app-price">等待支付</div>
@@ -36,7 +36,8 @@ export default {
 	onReachBottom() {
 		console.log('5151')
 	},
-	methods: {}
+	methods: {
+	}
 }
 </script>