feat: 优化中奖信息

pages/message/index.vue

@@ -43,15 +43,30 @@
           <template v-if="winInfo.exchangeType === LOTTERY_EXCHANGE_TYPE.offline">
           <template v-if="winInfo.exchangeType === LOTTERY_EXCHANGE_TYPE.offline">
             前往<span @click="openRecordHandler">抽奖记录</span>使用兑换码进行兑换
             前往<span @click="openRecordHandler">抽奖记录</span>使用兑换码进行兑换
           </template>
           </template>
-          <!-- 实物 邮寄 -->
-          <template v-if="winInfo.exchangeType === LOTTERY_EXCHANGE_TYPE.mailing && !winInfo.address">
-            填写<span @click="openAddressHandler">收货地址</span>等待官方邮寄
-          </template>
           <!-- 虚拟物品 -->
           <!-- 虚拟物品 -->
           <!-- <template v-if="lotteryInfo.prizeType === LOTTERY_MESSAGE_PRIZE_TYPE.online"
           <!-- <template v-if="lotteryInfo.prizeType === LOTTERY_MESSAGE_PRIZE_TYPE.online"
             >已进入您<span @click="openWalletHandler">个人中心-钱包</span>请查收</template
             >已进入您<span @click="openWalletHandler">个人中心-钱包</span>请查收</template
           > -->
           > -->
         </div>
         </div>
+        <div
+          v-if="winInfo.exchangeType === LOTTERY_EXCHANGE_TYPE.mailing"
+          class="lottery-message__rules"
+          @click="openAddressHandler"
+        >
+          <p class="lottery-message__rules-title">收货地址：</p>
+          <div class="lottery-message__rules-content">
+            <div>
+              <div v-if="!winInfo.address">请填写<span> 收货地址 </span>等待官方邮寄</div>
+              <div v-else>
+                <div class="title">{{ winInfo.name }} {{ winInfo.contactPhone }}</div>
+                <div class="adress">{{ winInfo.address }}</div>
+              </div>
+            </div>
+            <!-- <div class="img"> -->
+            <img src="./img/right.png" alt="" />
+            <!-- </div> -->
+          </div>
+        </div>
         <div class="lottery-message__rules">
         <div class="lottery-message__rules">
           <p class="lottery-message__rules-title">中奖说明：</p>
           <p class="lottery-message__rules-title">中奖说明：</p>
           <div class="lottery-message__rules-content">{{ lotteryInfo.winningInstructions }}</div>
           <div class="lottery-message__rules-content">{{ lotteryInfo.winningInstructions }}</div>
@@ -214,6 +229,9 @@ export default {
       })
       })
     },
     },
     openAddressHandler() {
     openAddressHandler() {
+      if (this.winInfo.address) {
+        return
+      }
       // 触发打开编辑地址
       // 触发打开编辑地址
       this.connection.emit('openAddressHandler', this.lotteryInfo)
       this.connection.emit('openAddressHandler', this.lotteryInfo)
     },
     },
@@ -305,8 +323,8 @@ export default {
     color: #ff2a2a;
     color: #ff2a2a;
   }
   }
   &__rules {
   &__rules {
-    width: 100%;
-    margin-top: 20px;
+    width: 90%;
+    margin-top: 8px;
     max-height: 100px;
     max-height: 100px;
     overflow: hidden;
     overflow: hidden;
     overflow-y: auto;
     overflow-y: auto;
@@ -315,13 +333,41 @@ export default {
     padding: 10px;
     padding: 10px;
     font-size: 12px;
     font-size: 12px;
     color: #666;
     color: #666;
+    font-family: PingFangSC-Regular, PingFang SC;
+    color: #666666;
+    line-height: 18px;
+    span {
+      color: #0091ff;
+    }
   }
   }
   &__rules-title {
   &__rules-title {
-    color: #333;
+    font-size: 12px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
   }
   }
   &__rules-content {
   &__rules-content {
-    margin-top: 5px;
-    line-height: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 8px;
+    img {
+      width: 16px;
+      height: 16px;
+    }
+    .title {
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #333333;
+    }
+    .adress {
+      margin-top: 5px;
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #666666;
+    }
   }
   }
   &__keywords {
   &__keywords {
     color: #0091ff;
     color: #0091ff;