Merge branch 'master' of http://gitlab.platform.xinhuaapp.com/pengjiani/groupPurchase-miniapp

src/pages.json

@@ -16,6 +16,16 @@
 			"style": {
 				"navigationBarTitleText": "店铺首页"
 			}
+		},	{
+			"path": "pages/order/order",
+			"style": {
+				"navigationBarTitleText": "订单列表"
+			}
+		},	{
+			"path": "pages/order/detail",
+			"style": {
+				"navigationBarTitleText": "订单详情"
+			}
 		}
 	],
 	"globalStyle": {

src/pages/order/components/Header/index.vue

+<template>
+  <div class="header">
+    <div class="headbox">
+      <wd-icon
+        class="icon"
+        name="thin-arrow-left"
+        color="#333333"
+        size="18px"
+        @click="handleBack"
+      ></wd-icon>
+      <div class="title">{{ props.title }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+});
+const handleBack = () => {
+  uni.navigateBack();
+};
+</script>
+
+<style lang="scss" scoped>
+.header {
+  height: 88rpx;
+  background-color: #ffffff;
+  position: fixed;
+  z-index: 999;
+  width: 100%;
+
+  .headbox {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+
+    .icon {
+      padding: 0 20rpx;
+    }
+
+    .title {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 36rpx;
+      font-family: PingFang SC;
+      color: #333333;
+    }
+  }
+}
+</style>

src/pages/order/components/OrderList/index.vue

+<template>
+  <div class="content">
+    <div class="box">
+      <div class="header">
+        <div class="left">
+          <img src="@/static/order/shop.png" />
+          <div class="title">宽带融合5G 169套餐</div>
+        </div>
+        <span class="status">待消费</span>
+      </div>
+
+      <div class="info">
+        <img
+          mode="aspectFill"
+          src="https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg"
+        />
+        <div class="info-box">
+          <div class="text">下单时间：2023-06-27 15:53</div>
+          <div class="text">预约时间：2023-07-04 10:00-12:00</div>
+          <div class="text">数量：1</div>
+          <div class="text">实付：￥169</div>
+        </div>
+      </div>
+
+      <div class="btn">
+        <div class="btn-info">删除</div>
+        <div class="btn-info">查看预约</div>
+        <div class="btn-error">再来一单</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script></script>
+
+<style lang="scss" scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20rpx;
+
+  .box {
+    background-color: #fff;
+    width: 100%;
+    border-radius: 16rpx;
+    padding: 28rpx 18rpx;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    gap: 30rpx;
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .left {
+        display: flex;
+        align-items: center;
+        gap: 20rpx;
+
+        img {
+          height: 38rpx;
+          width: 38rpx;
+        }
+
+        .title {
+          color: #333;
+          font-size: 32rpx;
+          font-family: PingFang SC;
+        }
+      }
+
+      .status {
+        color: #666;
+        font-size: 28rpx;
+      }
+    }
+
+    .info {
+      display: flex;
+      gap: 20rpx;
+
+      img {
+        width: 110rpx;
+        height: 110rpx;
+        border-radius: 12rpx;
+      }
+
+      .info-box {
+        display: flex;
+        flex-direction: column;
+        gap: 18rpx;
+
+        .text {
+          color: #666;
+          line-height: 28rpx;
+          font-size: 28rpx;
+          font-family: PingFang SC;
+        }
+      }
+    }
+
+    .btn {
+      display: flex;
+      justify-content: flex-end;
+      gap: 14rpx;
+
+      .btn-info {
+        width: 162rpx;
+        height: 66rpx;
+        border-radius: 34rpx;
+        border: 1rpx solid #999999;
+        color: #666;
+        font-size: 28rpx;
+        font-family: PingFang SC;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .btn-error {
+        width: 162rpx;
+        height: 66rpx;
+        border-radius: 34rpx;
+        border: 1rpx solid #e9231b;
+        color: #e9231b;
+        font-size: 28rpx;
+        font-family: PingFang SC;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}
+</style>

src/pages/order/detail.vue

+<template>
+  <div class="container">
+    <Header title="订单详情"></Header>
+    <div class="content">
+      <div class="status">
+        <div class="status-box">
+          <wd-icon name="check-outline" size="26px" color="#333"></wd-icon>
+          <div class="status-text">已使用</div>
+        </div>
+        <div class="detail">请在2023年07月04前到店消费</div>
+      </div>
+
+      <div>
+        
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Header from './components/Header/index.vue';
+</script>
+
+<style scoped lang="scss">
+.container {
+  background-color: #f5f5f5;
+  height: 100vh;
+}
+
+.content {
+  padding-top: 44px;
+}
+
+.status {
+  display: flex;
+  flex-direction: column;
+  padding: 32rpx 20rpx;
+  gap: 6rpx;
+
+  .status-box {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+
+    .status-text {
+      font-size: 48rpx;
+      font-weight: bold;
+      color: #333;
+      font-family: PingFang SC;
+    }
+  }
+
+  .detail {
+    font-size: 28rpx;
+    color: #999;
+    font-family: PingFang SC;
+  }
+}
+</style>

src/pages/order/order.vue

+<template>
+  <div class="container">
+    <Header title="全部订单"></Header>
+    <div class="tabs">
+      <wd-tabs v-model="tab" animated lineWidth="38" lineHeight="3">
+        <block v-for="item in tabs" :key="item">
+          <wd-tab :title="`${item}`" :name="item">
+            <OrderList></OrderList>
+          </wd-tab>
+        </block>
+      </wd-tabs>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Header from './components/Header/index.vue';
+import OrderList from './components/OrderList/index.vue';
+
+const tabs = ref(['全部', '待付款', '待收货', '待使用', '待评价', '退款/售后']);
+const tab = ref('待使用');
+</script>
+
+<style scoped lang="scss">
+.container {
+  background-color: #f5f5f5;
+  height: 100vh;
+}
+
+.tabs {
+  padding-top: 44px;
+
+  .wd-tabs {
+    background-color: #f5f5f5;
+  }
+
+  &:deep(.wd-tabs__nav) {
+    background-color: #f5f5f5;
+  }
+
+  &:deep(.wd-tabs__line) {
+    background-color: #e9231b;
+    bottom: 2px;
+  }
+}
+</style>