feat: 优化

src/interface.ts

@@ -41,22 +41,40 @@ export interface IPaging<T> {
 
 export interface IOrder {
   id?: number;
-  user?: any; // 用户信息
+  /** 用户信息 */
+  user?: IUser;
+  /** 商品信息 */
+  goods?: IGoods;
   billd_live_user_id?: number;
-  out_trade_no?: string;
-  total_amount?: string;
-  subject?: string;
+  billd_live_goods_id?: number;
+  billd_live_live_room_id?: number;
+  /** 判断幂等 */
+  billd_live_order_version?: number;
+  billd_live_order_subject?: string;
   product_code?: string;
   qr_code?: string;
+  /** 买家支付宝账号 */
   buyer_logon_id?: string;
+  /** 买家实付金额，单位为元，两位小数。 */
   buyer_pay_amount?: string;
+  /** 买家在支付宝的用户id */
   buyer_user_id?: string;
+  /** 交易的订单金额，单位为元，两位小数。该参数的值为支付时传入的total_amount */
+  total_amount?: string;
+  /** 交易中用户支付的可开具发票的金额，单位为元，两位小数。 */
   invoice_amount?: string;
+  /** 积分支付的金额，单位为元，两位小数。 */
   point_amount?: string;
+  /** 实收金额，单位为元，两位小数。该金额为本笔交易，商户账户能够实际收到的金额 */
   receipt_amount?: string;
-  send_pay_date?: string;
+  /** 支付宝交易号 */
   trade_no?: string;
+  /** 商家订单号 */
+  out_trade_no?: string;
+  /** 交易状态：WAIT_BUYER_PAY（交易创建，等待买家付款）、TRADE_CLOSED（未付款交易超时关闭，或支付完成后全额退款）、TRADE_SUCCESS（交易支付成功）、TRADE_FINISHED（交易结束，不可退款） */
   trade_status?: string;
+  /** 本次交易打款给卖家的时间 */
+  send_pay_date?: string;
   created_at?: string;
   updated_at?: string;
   deleted_at?: string;

src/views/home/index.vue

@@ -1,85 +1,93 @@
 <template>
   <div class="home-wrap">
-    <div class="left">
-      <div
-        class="cover"
-        :style="{ backgroundImage: `url(${currentLiveRoom?.coverImg})` }"
-      ></div>
-      <!-- x-webkit-airplay这个属性应该是使此视频支持ios的AirPlay功能 -->
-      <!-- playsinline、 webkit-playsinline IOS微信浏览器支持小窗内播放 -->
-      <!-- x5-video-player-type 启用H5播放器，是wechat安卓版特性 -->
-      <!-- x5-video-player-fullscreen 全屏设置 -->
-      <!-- x5-video-orientation 声明播放器支持的方向，可选值landscape横屏，portraint竖屏。默认值portraint。 -->
-      <video
-        v-if="currentLiveRoom?.flvurl"
-        id="localVideo"
-        ref="localVideoRef"
-        autoplay
-        playsinline
-        webkit-playsinline="true"
-        x-webkit-airplay="allow"
-        x5-video-player-type="h5"
-        x5-video-player-fullscreen="true"
-        x5-video-orientation="portraint"
-        :muted="appStore.muted"
-      ></video>
-      <template v-if="currentLiveRoom">
-        <div class="controls">
-          <VideoControls></VideoControls>
-        </div>
-        <div class="join-btn">
-          <div
-            v-if="currentLiveRoom.system === 2"
-            class="btn webrtc"
-            @click="joinRoom()"
-          >
-            进入直播（webrtc）
+    <div class="banner"></div>
+    <div class="container">
+      <div class="left">
+        <div
+          class="cover"
+          :style="{ backgroundImage: `url(${currentLiveRoom?.coverImg})` }"
+        ></div>
+        <!-- x-webkit-airplay这个属性应该是使此视频支持ios的AirPlay功能 -->
+        <!-- playsinline、 webkit-playsinline IOS微信浏览器支持小窗内播放 -->
+        <!-- x5-video-player-type 启用H5播放器，是wechat安卓版特性 -->
+        <!-- x5-video-player-fullscreen 全屏设置 -->
+        <!-- x5-video-orientation 声明播放器支持的方向，可选值landscape横屏，portraint竖屏。默认值portraint。 -->
+        <video
+          v-if="currentLiveRoom?.flvurl"
+          id="localVideo"
+          ref="localVideoRef"
+          autoplay
+          playsinline
+          webkit-playsinline="true"
+          x-webkit-airplay="allow"
+          x5-video-player-type="h5"
+          x5-video-player-fullscreen="true"
+          x5-video-orientation="portraint"
+          :muted="appStore.muted"
+        ></video>
+        <template v-if="currentLiveRoom">
+          <div class="controls">
+            <VideoControls></VideoControls>
+          </div>
+          <div class="join-btn">
+            <div
+              v-if="currentLiveRoom.system === 2"
+              class="btn webrtc"
+              @click="joinRoom()"
+            >
+              进入直播（webrtc）
+            </div>
+            <div
+              v-if="currentLiveRoom?.flvurl"
+              class="btn flv"
+              @click="joinFlvRoom()"
+            >
+              进入直播（flv）
+            </div>
           </div>
+        </template>
+      </div>
+      <div class="right">
+        <div
+          v-if="liveRoomList.length"
+          class="list"
+        >
           <div
-            v-if="currentLiveRoom?.flvurl"
-            class="btn flv"
-            @click="joinFlvRoom()"
+            v-for="(item, index) in liveRoomList"
+            :key="index"
+            :class="{
+              item: 1,
+              active: item.live_room_id === currentLiveRoom?.live_room_id,
+            }"
+            :style="{ backgroundImage: `url(${item.coverImg})` }"
+            @click="changeLiveRoom(item)"
           >
-            进入直播（flv）
+            <div
+              class="border"
+              :style="{
+                opacity:
+                  item.live_room_id === currentLiveRoom?.live_room_id ? 1 : 0,
+              }"
+            ></div>
+            <div
+              v-if="item.live_room_id === currentLiveRoom?.live_room_id"
+              class="triangle"
+            ></div>
+            <div class="txt">{{ item.live_room?.roomName }}</div>
           </div>
         </div>
-      </template>
-    </div>
-    <div class="right">
-      <div
-        v-if="liveRoomList.length"
-        class="list"
-      >
         <div
-          v-for="(item, index) in liveRoomList"
-          :key="index"
-          :class="{
-            item: 1,
-            active: item.live_room_id === currentLiveRoom?.live_room_id,
-          }"
-          :style="{ backgroundImage: `url(${item.coverImg})` }"
-          @click="changeLiveRoom(item)"
+          v-else
+          class="none"
         >
-          <div
-            class="border"
-            :style="{
-              opacity:
-                item.live_room_id === currentLiveRoom?.live_room_id ? 1 : 0,
-            }"
-          ></div>
-          <div
-            v-if="item.live_room_id === currentLiveRoom?.live_room_id"
-            class="triangle"
-          ></div>
-          <div class="txt">{{ item.live_room?.roomName }}</div>
+          当前没有在线的直播间
         </div>
       </div>
-      <div
-        v-else
-        class="none"
-      >
-        当前没有在线的直播间
-      </div>
+    </div>
+
+    <div class="foot">
+      <h1>billd-live当前是beta状态，欢迎测试~</h1>
+      <h2>billd-live目前只有作者一人维护，期待有志者参与~</h2>
     </div>
   </div>
 </template>
@@ -172,187 +180,191 @@ function joinFlvRoom() {
 
 <style lang="scss" scoped>
 .home-wrap {
-  padding: 20px 0;
-  min-width: $large-width;
-  height: 610px;
-  background-color: papayawhip;
-  text-align: center;
-
-  .left {
-    position: relative;
-    display: inline-block;
-    overflow: hidden;
-    box-sizing: border-box;
-    width: $large-left-width;
-    height: 610px;
-    border-radius: 4px;
-    background-color: rgba($color: #000000, $alpha: 0.3);
-    vertical-align: top;
-
-    @extend %coverBg;
+  .container {
+    padding: 20px 0;
+    min-width: $large-width;
+    background-color: papayawhip;
+    text-align: center;
+    .left {
+      position: relative;
+      display: inline-block;
+      overflow: hidden;
+      box-sizing: border-box;
+      width: $large-left-width;
+      height: 610px;
+      border-radius: 4px;
+      background-color: rgba($color: #000000, $alpha: 0.3);
+      vertical-align: top;
 
-    .cover {
-      position: absolute;
-      background-position: center center;
-      background-size: cover;
-      filter: blur(30px);
+      @extend %coverBg;
 
-      inset: 0;
-    }
+      .cover {
+        position: absolute;
+        background-position: center center;
+        background-size: cover;
+        filter: blur(30px);
 
-    #localVideo {
-      position: relative;
-      width: 100%;
-      height: 100%;
-    }
-    .controls {
-      display: none;
-    }
+        inset: 0;
+      }
 
-    &:hover {
-      .join-btn {
-        display: inline-flex;
+      #localVideo {
+        position: relative;
+        width: 100%;
+        height: 100%;
       }
       .controls {
-        display: block;
+        display: none;
       }
-    }
-    .join-btn {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      display: none;
-      align-items: center;
-      transform: translate(-50%, -50%);
 
-      .btn {
-        padding: 14px 26px;
-        border: 2px solid rgba($color: papayawhip, $alpha: 0.5);
-        border-radius: 6px;
-        background-color: rgba(0, 0, 0, 0.3);
-        color: papayawhip;
-        font-size: 16px;
-        cursor: pointer;
-        &:hover {
-          background-color: rgba($color: papayawhip, $alpha: 0.5);
-          color: white;
+      &:hover {
+        .join-btn {
+          display: inline-flex;
         }
-        &.webrtc {
-          margin-right: 10px;
+        .controls {
+          display: block;
         }
-        &.flv {
+      }
+      .join-btn {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: none;
+        align-items: center;
+        transform: translate(-50%, -50%);
+
+        .btn {
+          padding: 14px 26px;
+          border: 2px solid rgba($color: papayawhip, $alpha: 0.5);
+          border-radius: 6px;
+          background-color: rgba(0, 0, 0, 0.3);
+          color: papayawhip;
+          font-size: 16px;
+          cursor: pointer;
+          &:hover {
+            background-color: rgba($color: papayawhip, $alpha: 0.5);
+            color: white;
+          }
+          &.webrtc {
+            margin-right: 10px;
+          }
+          &.flv {
+          }
         }
       }
     }
-  }
-  .right {
-    display: inline-block;
-    overflow: scroll;
-    box-sizing: border-box;
-    margin-left: 10px;
-    padding: 12px;
-    height: 610px;
-    border-radius: 4px;
-    background-color: rgba($color: #000000, $alpha: 0.3);
-    vertical-align: top;
+    .right {
+      display: inline-block;
+      overflow: scroll;
+      box-sizing: border-box;
+      margin-left: 10px;
+      padding: 12px;
+      height: 610px;
+      border-radius: 4px;
+      background-color: rgba($color: #000000, $alpha: 0.3);
+      vertical-align: top;
 
-    .list {
-      .item {
-        position: relative;
-        box-sizing: border-box;
-        margin-bottom: 10px;
-        width: 200px;
-        height: 110px;
-        border-radius: 4px;
-        background-color: rgba($color: #000000, $alpha: 0.3);
-        cursor: pointer;
+      .list {
+        .item {
+          position: relative;
+          box-sizing: border-box;
+          margin-bottom: 10px;
+          width: 200px;
+          height: 110px;
+          border-radius: 4px;
+          background-color: rgba($color: #000000, $alpha: 0.3);
+          cursor: pointer;
 
-        @extend %coverBg;
+          @extend %coverBg;
 
-        &:last-child {
-          margin-bottom: 0;
-        }
-        .border {
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          z-index: 1;
-          border: 2px solid papayawhip;
-          border-radius: 4px;
-        }
-        .triangle {
-          position: absolute;
-          top: 50%;
-          left: 0;
-          display: inline-block;
-          border: 5px solid transparent;
-          border-right-color: papayawhip;
-          transform: translate(-100%, -50%);
-        }
-        &.active {
-          &::before {
-            background-color: transparent;
+          &:last-child {
+            margin-bottom: 0;
+          }
+          .border {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            z-index: 1;
+            border: 2px solid papayawhip;
+            border-radius: 4px;
+          }
+          .triangle {
+            position: absolute;
+            top: 50%;
+            left: 0;
+            display: inline-block;
+            border: 5px solid transparent;
+            border-right-color: papayawhip;
+            transform: translate(-100%, -50%);
+          }
+          &.active {
+            &::before {
+              background-color: transparent;
+            }
+          }
+          &:hover {
+            &::before {
+              background-color: transparent;
+            }
           }
-        }
-        &:hover {
           &::before {
-            background-color: transparent;
+            position: absolute;
+            display: block;
+            width: 100%;
+            height: 100%;
+            border-radius: 4px;
+            background-color: rgba(0, 0, 0, 0.4);
+            content: '';
+            transition: all cubic-bezier(0.22, 0.58, 0.12, 0.98) 0.4s;
+          }
+          .txt {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            box-sizing: border-box;
+            padding: 4px 8px;
+            width: 100%;
+            border-radius: 0 0 4px 4px;
+            background-image: linear-gradient(
+              -180deg,
+              rgba(0, 0, 0, 0),
+              rgba(0, 0, 0, 0.6)
+            );
+            color: white;
+            text-align: initial;
+            font-size: 13px;
           }
-        }
-        &::before {
-          position: absolute;
-          display: block;
-          width: 100%;
-          height: 100%;
-          border-radius: 4px;
-          background-color: rgba(0, 0, 0, 0.4);
-          content: '';
-          transition: all cubic-bezier(0.22, 0.58, 0.12, 0.98) 0.4s;
-        }
-        .txt {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          box-sizing: border-box;
-          padding: 4px 8px;
-          width: 100%;
-          border-radius: 0 0 4px 4px;
-          background-image: linear-gradient(
-            -180deg,
-            rgba(0, 0, 0, 0),
-            rgba(0, 0, 0, 0.6)
-          );
-          color: white;
-          text-align: initial;
-          font-size: 13px;
         }
       }
-    }
-    .none {
-      width: 200px;
-      color: white;
-      font-size: 14px;
+      .none {
+        width: 200px;
+        color: white;
+        font-size: 14px;
+      }
     }
   }
+  .foot {
+    text-align: center;
+  }
 }
 
 // 屏幕宽度小于$large-width的时候
 @media screen and (max-width: $large-width) {
   .home-wrap {
-    height: 460px;
-    .left {
-      width: $medium-left-width;
-      height: 460px;
-    }
-    .right {
-      height: 460px;
+    .container {
+      .left {
+        width: $medium-left-width;
+        height: 460px;
+      }
+      .right {
+        height: 460px;
 
-      .list {
-        .item {
-          width: 150px;
-          height: 80px;
+        .list {
+          .item {
+            width: 150px;
+            height: 80px;
+          }
         }
       }
     }

src/views/order/index.vue

@@ -30,7 +30,7 @@
         </div>
 
         <div class="account">{{ item.buyer_logon_id }}</div>
-        <div class="gift">{{ item.subject }}</div>
+        <div class="gift">{{ item.billd_live_order_subject }}</div>
         <div class="gift">{{ item.total_amount }}元</div>
         <div class="status">
           {{

src/views/shop/index.vue

@@ -121,7 +121,7 @@ function changeTab(type: GoodsTypeEnum) {
 }
 
 function startPay(item: IGoods) {
-  if (Number(Number(item.price).toFixed(0)) <= 0) {
+  if (Number(item.price) === 0) {
     window.$message.info('该商品是免费的，不需要购买！');
     return;
   }