商品订单详情

src/views/shop-mall/shop-order-detail/index.module.less

@@ -0,0 +1,35 @@
+
+.shopOrderDetail {
+  padding: 12px 14px;
+}
+body {
+  background: #f7f8f9;
+}
+.box {
+  background: #fff;
+  border-radius: 10px;
+  overflow: hidden;
+  margin-bottom: 12px;
+  padding: 14px;
+}
+.box {
+  :global {
+    .van-card {
+      background: transparent;
+      padding: 0;
+    }
+    .van-cell-group__title{
+        font-size: 16px;
+        color: #333;
+        font-weight: 500;
+    }
+  }
+}
+.addressDetail{
+    :global{
+        .van-cell__title{
+            flex: none
+        }
+    }
+}
+

src/views/shop-mall/shop-order-detail/index.tsx

@@ -0,0 +1,65 @@
+import { Divider, Cell, CellGroup } from 'vant'
+import { defineComponent } from 'vue'
+import ShopItem from '../components/shop-item'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'shop-order-detail',
+  setup() {
+    return () => (
+      <div class={styles.shopOrderDetail}>
+        <div class={styles.box}>
+          {[1, 3].map((item, index) => (
+            <div>
+              <ShopItem></ShopItem>
+              {index === 1 ? null : <Divider></Divider>}
+            </div>
+          ))}
+        </div>
+
+        <div class={styles.box} style={{ padding: 0 }}>
+          <Cell border={false} title="商品价格：" value="￥5,300.00"></Cell>
+          <Cell border={false} title="优惠价格：" value="￥3.00"></Cell>
+          <Cell border={false} title="余额支付：" value="￥100.00"></Cell>
+          <Cell border={false} title="现金支付：" value="￥3000.00"></Cell>
+          <Cell border={false} title="订单状态：" value="支付成功"></Cell>
+          <Cell border={false} title="收货状态：" value="未确认收货"></Cell>
+          <Divider style={{ margin: 0 }}></Divider>
+          <Cell border={false} title="订单号：" value="28974892321"></Cell>
+          <Cell
+            border={false}
+            title="交易流水号："
+            value="23214124124234645662"
+          ></Cell>
+          <Cell
+            border={false}
+            title="创建时间："
+            value="2020-09-16 13:23:43"
+          ></Cell>
+          <Cell
+            border={false}
+            title="付款时间："
+            value="2020-09-16 13:24:12"
+          ></Cell>
+        </div>
+
+        <div class={styles.box} style={{ padding: 0 }}>
+          <CellGroup title="收货信息" border={false}>
+            <Cell border={false} title="姓名：" value="李晨"></Cell>
+            <Cell border={false} title="手机号：" value="173 9536 3706"></Cell>
+            <Cell class={styles.addressDetail}
+              border={false}
+              title="地址："
+              value="湖北省武汉市武昌区水果湖楚河汉街"
+            ></Cell>
+            <Cell
+              border={false}
+              title="运单编号："
+              value="请耐心等待发货"
+            ></Cell>
+          </CellGroup>
+        </div>
+      </div>
+    )
+  }
+})