Merge branch 'feature/record'

7e595c06 · Lays-lzq · 9c37af92 · 105f958a · 7e595c06 · 7e595c06
Commit 7e595c06 authored Nov 22, 2023 by Lays-lzq
Show whitespace changes
Inline Side-by-side

Showing with 91 additions and 39 deletions

pages/recordDetail/index.vue
+19 -14

pages/records/index.vue
+72 -25

No files found.
--- a/pages/recordDetail/index.vue
+++ b/pages/recordDetail/index.vue
@@ -16,11 +16,13 @@
            <label>参与时间：</label>
            <span v-if="detailInfo.drawTime">{{ (detailInfo.drawTime * 1000) | formatDate('YYYY-MM-DD HH:mm') }}</span>
          </li>
-          <li>
+          <li v-if="detailInfo.drawIntro">
-            <label v-if="detailInfo.drawIntro">抽奖介绍：</label>
+            <label>抽奖介绍：</label>
-            <label v-if="detailInfo.winningInstructions">中奖说明：</label>
+            <span>{{ detailInfo.drawIntro || '/' }}</span>
-            <span v-if="detailInfo.drawIntro">{{ detailInfo.drawIntro }}</span>
+          </li>
-            <span v-if="detailInfo.winningInstructions">{{ detailInfo.winningInstructions }}</span>
+          <li v-if="detailInfo.winningInstructions">
+            <label>中奖说明：</label>
+            <span>{{ detailInfo.winningInstructions || '/' }}</span>
          </li>
          <li>
            <label>获得奖品：</label>
@@ -29,13 +31,13 @@
              <img v-if="detailInfo.prizeIcon" v-lazy="detailInfo.prizeIcon" class="record-detail__info-img" alt="" />
            </div>
          </li>
-          <li>
+          <li v-if="detailInfo.prizeId !== 0">
            <label>领奖方式：</label>
            <span>{{ LOTTERY_EXCHANGE_TYPE_TXT[detailInfo.exchangeType] }}</span>
          </li>
        </ul>
      </div>
-      <div v-if="+detailInfo.exchangeType === +LOTTERY_EXCHANGE_TYPE.offline" class="record-detail__code-info">
+      <div v-if="+detailInfo.exchangeType === +LOTTERY_EXCHANGE_TYPE.offline && detailInfo.prizeId !== 0" class="record-detail__code-info">
        <QRCode :url="detailInfo.code" :width="70" :height="70"></QRCode>
        <p class="record-detail__code-text">
          <label>兑换码：</label>
@@ -48,7 +50,7 @@
        </p>
        <p class="record-detail__notice">*兑换信息请勿泄露给他人，以防冒充代领</p>
      </div>
-      <div v-if="+detailInfo.exchangeType === +LOTTERY_EXCHANGE_TYPE.mailing" class="record-detail__addressee-info">
+      <div v-if="+detailInfo.exchangeType === +LOTTERY_EXCHANGE_TYPE.mailing && detailInfo.prizeId !== 0" class="record-detail__addressee-info">
        <span v-if="!detailInfo.name" class="record-detail__edit-btn" @click="isShowAddressPopup = true"
          >填写收货地址</span
        >
@@ -70,7 +72,7 @@
            <li>
              <label>运单信息：</label>
              <div class="record-detail__tracking-info">
-                <p>{{ detailInfo.trackingCompany }}</p>
+                <p v-if="detailInfo.trackingCompany">{{ detailInfo.trackingCompany }}</p>
                <span v-if="detailInfo.trackingNo">
                  {{ detailInfo.trackingNo }}
                  <span class="record-detail__copy-btn" @click="onCopy(detailInfo.trackingNo)"
@@ -216,8 +218,10 @@ export default {
    font-weight: 500;
    color: #666;
    white-space: nowrap;
-    line-height: 19px;
+    line-height: 18.5px;
    min-width: 65px;
+    font-size: 13px;
+    font-family: PingFangSC-Medium, PingFang SC;
  }
  &__content {
    display: flex;
@@ -238,10 +242,11 @@ export default {
      }
      span,
      p {
-        color: #333;
+        line-height: 18.5px;
-        font-size: 14px;
+        font-size: 13px;
-        font-weight: 500;
+        font-family: PingFangSC-Regular, PingFang SC;
-        line-height: 19px;
+        font-weight: 400;
+        color: #333333;
      }
    }
  }

--- a/pages/records/index.vue
+++ b/pages/records/index.vue
@@ -13,20 +13,20 @@
        @load="loadData"
      >
        <div v-for="item in recordList" :key="item.id" class="records__list-item">
-          <div class="records__item-img">
+          <div class="records__item-top">
-            <img v-lazy="item.banner" alt="" />
+            <div class="records__item-toptitle">{{ item.title }}</div>
+            <div v-if="+item.prizeId !== 0" class="records__item-topstatus" :class="{ yet: +item.status === 0 }">{{ WRITEOFF_STATUS_TXT[+item.status] }}</div>
          </div>
-          <div class="records__item-info">
+          <div class="records__item-middle">
-            <div class="records__info-wrap">
+            <div class="records__item-middleimg">
-              <div class="records__item-name">{{ item.title }}</div>
+              <img v-lazy="item.banner" alt="" />
-              <div class="records__item-subs">
-                {{ (item.drawTime * 1000) | formatDate('YYYY/MM/DD') }} 第{{ item.drawPlay }}场抽奖
            </div>
+            <div class="records__item-middleinfo">
+              <div class="title">{{ item.prizeName }}</div>
+              <div class="time">{{ (item.drawTime * 1000) | formatDate('YYYY/MM/DD') }} 第{{ item.drawPlay }}场抽奖</div>
            </div>
-            <div class="records__item-prize">{{ item.prizeName }}</div>
          </div>
          <div class="records__item-operate">
-            <span class="records__item-write-off">{{ WRITEOFF_STATUS_TXT[+item.status] }}</span>
            <van-button class="records__btn" round @click="openPopup(item)">查看详情</van-button>
          </div>
        </div>
@@ -167,15 +167,28 @@ export default {
      }
    }
  }
+  .yet {
+    color: #FF753A;
+  }
  &__list-item {
    display: flex;
-    align-items: center;
+    flex-direction: column;
    padding: 12px 0;
+    box-shadow: 0px 1px 8px 1px rgba(200, 200, 200, 0.5);
+    margin-top: 8px;
+    border-radius: 8px;
+    padding: 10px 12px;
+    &:first-child {
+      margin-top: 12px;
+    }
  }
-  &__item-img {
+  &__item-middle {
+    display: flex;
+    overflow: hidden;
+    &img {
      width: 55px;
      height: 55px;
-    border: 1px solid #dddddd;
+      // border: 1px solid #dddddd;
      border-radius: 6px;
      overflow: hidden;
      img {
@@ -184,18 +197,53 @@ export default {
        height: 100%;
      }
    }
-  &__item-info {
+    &info {
      flex: 1;
-    overflow: hidden;
-    height: 55px;
      display: flex;
      flex-direction: column;
-    padding: 0 10px;
+      margin-left: 10px;
+      .title {
+        width: 220px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        line-height: 20px;
+        font-size: 14px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        margin-bottom: 8px;
      }
-  &__info-wrap {
+      .time {
-    flex: 1;
+        line-height: 18.5px;
+        font-size: 13px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #666666;
+      }
+    }
+  }
+  &__item-top {
    display: flex;
-    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    &title {
+      width: 85%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #666666;
+    }
+    &status {
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #666666;
+    }
  }
  &__item-name {
    width: 100%;
@@ -225,11 +273,10 @@ export default {
    height: 16px;
  }
  &__item-operate {
-    height: 55px;
+    margin-top: 10px;
    display: flex;
-    flex-direction: column;
    align-items: center;
-    justify-content: space-around;
+    justify-content: flex-end;
  }
  &__item-write-off {
    font-size: 12px;
@@ -244,16 +291,16 @@ export default {
  }
  &__empty {
    width: 100%;
-    height: 100%;
+    height: calc(100% - 46px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
-    font-size: 16px;
+    font-size: 14px;
    color: #999;
    font-weight: 500;
    img {
-      width: 40%;
+      width: 20%;
      margin-bottom: 10px;
    }
  }