商品详情

src/pages/mine/subs/order/components/order-item.vue

@@ -1,13 +1,145 @@
 <template>
   <view class='card-view'>
+    <view class='goods-info-view c-flex-row'>
+      <image class='goods-image' :src='assetsUrl("test_bg.png")' />
+      <view class='c-flex-column' style='flex: 1;'>
+        <view class='c-flex-row'>
+          <text class='goods-name'>女童夏装套装洋气装短袖阔腿裤子夏装套装</text>
+          <text class='status'>未支付</text>
+        </view>
+        <view class='bottom-view c-flex-row'>
+          <text>
+            均色，120cm
+          </text>
+          <text>
+            共1件
+          </text>
+          <text>23.20元</text>
+        </view>
+      </view>
+    </view>
+    <view class='action-view c-flex-row'>
+      <view class='countdown c-flex-row'>
+        <image :src='assetsUrl("ic_time.png")' />
+        <text class='primary-text-color'>支付剩余时间
+          <text class='accent-text-color'>05:23</text>
+        </text>
+      </view>
 
+      <view class='c-flex-row'>
+        <text class='secondary-text-color'>加入购物车</text>
+        <text class='accent-text-color'>立即支付</text>
+      </view>
+    </view>
   </view>
 </template>
 
 <script lang='ts' setup>
+import { assetsUrl } from '@/utils/assets';
 
+defineProps({
+  item: Object
+});
 </script>
 
 <style lang='scss' scoped>
+.card-view {
+  padding: 30rpx 20rpx 20rpx 30rpx;
+  margin: 20rpx 24rpx;
+}
 
+.goods-info-view {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+
+  .goods-image {
+    width: 180rpx;
+    height: 180rpx;
+    border-radius: 10rpx;
+    margin-right: 20rpx;
+  }
+
+  .goods-name {
+    font-size: 30rpx;
+    font-weight: 400;
+    -webkit-line-clamp: 2;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin-right: 20rpx;
+    color: #333333;
+    flex: 1;
+  }
+
+  .status {
+    font-size: 26rpx;
+    font-weight: 400;
+    color: #F32B2B;
+    right: 0;
+  }
+
+  .bottom-view {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 40rpx;
+
+    text:nth-of-type(1) {
+      font-size: 26rpx;
+      font-weight: 400;
+      flex: 1;
+      color: #999999;
+    }
+
+    text:nth-of-type(2) {
+      font-size: 24rpx;
+      color: #333333;
+      margin-right: 5rpx;
+    }
+
+    text:nth-of-type(3) {
+      font-size: 34rpx;
+      color: #333333;
+      font-weight: bold;
+    }
+  }
+}
+
+.action-view {
+  margin-top: 37rpx;
+
+  .countdown {
+    flex: 1;
+
+    image {
+      width: 37rpx;
+      height: 37rpx;
+      margin-right: 5rpx;
+    }
+
+    text {
+      font-size: 26rpx;
+      font-weight: 400;
+    }
+  }
+
+  view:nth-of-type(2) {
+    text {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 12rpx 28rpx;
+      font-size: 26rpx;
+      border-radius: 34rpx;
+    }
+
+    text:nth-of-type(1) {
+      border: 1rpx solid #ACACAC;
+    }
+
+    text:nth-of-type(2) {
+      border: 1rpx solid #F32B2B;
+      margin-left: 20rpx;
+    }
+  }
+}
 </style>

src/pages/mine/subs/order/order-list.vue

@@ -1,9 +1,13 @@
 <template>
   <tabbar :titles="['全部', '进行中', '已结束']" @change='args => {}' />
+  <order-item v-for='(item,index) in orderList' :key='index' :item='item' />
 </template>
 
 <script lang='ts' setup>
 
+import OrderItem from '@/pages/mine/subs/order/components/order-item.vue';
+
+const orderList = ref([1, 2, 4, 5]);
 </script>
 
 <style lang='scss' scoped>