feat: 活动详情

src/lib/api/activity.js

@@ -19,4 +19,4 @@ export const getActivityDetail = (id) => request.get(`/weapp/activity/${id}`);
  *
  * [API](https://console-docs.apipost.cn/preview/888dcf083e39e4e4/ae9a5ffd745e57d1?target_id=e25b84fd-6dbb-4234-9fc5-bca51b0858cd)
  */
-export const joinActivity = (data) => request.post(`/weapp/activity`, data);
+export const joinActivity = (id) => request.post(`/weapp/activity/${id}`);

src/pages/activity/detail.vue

@@ -1,70 +1,26 @@
 <template>
   <view class="act-detail">
-    <view v-if="detail" class="detail-head">
-      <view class="detail-head-info" v-html="detail.desc" />
-      <!-- <view class="detail-head-desc"
-        >活动时间：{{ detail.start_time }} 至 {{ detail.open_time }}</view
-      > -->
-      <!-- <view class="detail-head-desc">开奖时间：{{ detail.open_time }}</view> -->
-    </view>
-    <view class="title">奖品列表</view>
-    <template v-if="detail && detail.skus && detail.skus.length">
-      <view class="title-desc">
-        <text class="title-item"
-          >价值：<text class="price">&yen; {{ detail.total_price }}</text></text
-        >
-        <text class="title-item"
-          >数量：<text class="color">{{ detail.sku_num }}</text></text
-        >
-      </view>
-      <view class="prize-list">
-        <view v-for="item in detail.skus" :key="item.id" class="prize-item">
-          <image class="prize-img" :src="item.img" mode="aspectFill"></image>
-          <view class="prize-body">
-            <view class="prize-title">{{ item.name }}</view>
-            <view class="prize-desc">
-              <text class="sale-label">&yen;</text>
-              <text class="big">{{ item.price }}</text>
-            </view>
-          </view>
-        </view>
-      </view>
-    </template>
-    <template v-if="detail && detail.winndr_list && detail.winndr_list.length">
-      <view class="title">中奖名单</view>
-      <view class="win-list">
-        <view
-          v-for="item in detail.winndr_list"
-          :key="item.id"
-          class="win-item"
-        >
-          <image
-            class="win-avatar"
-            :src="item.avatar"
-            mode="aspectFill"
-          ></image>
-          <text class="win-user">{{ item.nick_name }}</text>
-          <text class="win-name">{{ item.sku_name }}</text>
-        </view>
+    <image
+      class="banner"
+      v-if="detail && detail.img"
+      :src="detail.img"
+      mode="widthFix"
+    ></image>
+    <view class="detail-box" v-if="detail">
+      <view class="title">{{ detail.title }}</view>
+      <view class="time">
+        {{ detail.start_time }} - {{ detail.open_time }}
       </view>
-    </template>
-    <view class="title">
-      参与人员
-      <text>{{ detail.account_num || 0 }}人</text>
     </view>
-    <view
-      v-if="detail && detail.account_list && detail.account_list.length"
-      class="user-list"
-    >
-      <view
-        v-for="item in detail.account_list"
-        :key="item.id"
-        class="user-item"
-      >
-        <image class="user-avatar" :src="item.avatar" mode="aspectFill">
-        </image>
-        <text class="user-name">{{ item.nick_name }}</text>
-      </view>
+    <view class="detail-box" v-if="detail">
+      <view class="title">活动详情</view>
+      <image
+        class="img"
+        v-if="detail && detail.intro_img"
+        :src="detail.intro_img"
+        mode="widthFix"
+      ></image>
+      <view class="desc" v-html="detail.intro" />
     </view>
     <view class="act-footer">
       <button v-if="detail.status === 0" class="btn btn-gray">未开始</button>
@@ -81,7 +37,6 @@
         已拒绝
       </button>
       <button v-else class="btn" @click="handleJoin">立即参与</button>
-      <view class="act-footer-desc">开奖时间: {{ detail.open_time }}</view>
     </view>
   </view>
 </template>
@@ -139,10 +94,7 @@ export default {
   },
   methods: {
     async loadDetail() {
-      const res = await getActivityDetail(
-        this.id,
-        this.userInfo && this.userInfo.session ? this.userInfo.session : ""
-      );
+      const res = await getActivityDetail(this.id);
       this.detail = res.data;
       if (res.data.title) {
         uni.setNavigationBarTitle({
@@ -173,10 +125,7 @@ export default {
       this.joinActivity();
     },
     async joinActivity() {
-      const { data, errno, errmsg } = await joinActivity({
-        feature_activity_id: this.id,
-        session: this.userInfo.session,
-      });
+      const { data, errno, errmsg } = await joinActivity(this.id);
       if (errno === 10000) {
         uni.showToast({
           icon: "none",
@@ -200,212 +149,75 @@ export default {
   min-height: 100vh;
   background: #f5f5f5;
   box-sizing: border-box;
-  padding: 24rpx 24rpx 256rpx;
+  padding-bottom: 160rpx;
+}
+.banner {
+  margin-bottom: -40rpx;
+}
+.banner,
+.img {
+  width: 100%;
+}
+.detail-box {
+  box-sizing: border-box;
+  position: relative;
+  width: 670rpx;
+  border-radius: 20rpx;
+  background: #fff;
+  margin: 0 auto 40rpx;
+  padding: 20rpx 40rpx;
   .title {
-    margin: 44rpx 0 16rpx;
-    font-weight: 400;
-    font-family: ysbth;
-    font-size: 46rpx;
-    color: #000;
-    text {
-      font-size: 28rpx;
-      color: #9496a5;
-      margin-left: 18rpx;
-    }
+    font-size: 32rpx;
+    font-weight: bolder;
+    line-height: 2;
+    margin-bottom: 20rpx;
   }
-  .detail-head {
-    padding: 24rpx;
-    background: #fff;
+  .desc,
+  .time {
     font-size: 28rpx;
-    color: #292d3b;
-    border-radius: 10rpx;
-    line-height: 40rpx;
-    .detail-head-info {
-      color: #9496a5;
-      line-height: 36rpx;
-      letter-spacing: 1.5rpx;
-    }
-    .detail-head-desc {
-      line-height: 34rpx;
-      margin-top: 16rpx;
-      letter-spacing: 0.3rpx;
-    }
+    line-height: 1.5;
   }
-  .title-desc {
-    height: 40rpx;
-    font-size: 28rpx;
-    font-weight: 500;
+  .time {
     color: #9496a5;
-    line-height: 40rpx;
-    display: flex;
-    justify-content: flex-start;
-    margin: -8rpx 0 9rpx;
-    .title-item {
-      display: block;
-      margin-right: 66rpx;
-      .price {
-        color: #08c2c3;
-      }
-      .color {
-        color: #292d3b;
-      }
-    }
   }
-  .prize-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    margin: 0 -7rpx;
-  }
-  .prize-item {
-    display: flex;
-    width: 344rpx;
-    background: #ffffff;
-    margin: 7rpx;
-    border-radius: 5rpx;
-    .prize-img {
-      width: 144rpx;
-      height: 144rpx;
-    }
-    .prize-body {
-      width: 0;
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      padding: 10rpx 8rpx;
-      .prize-title {
-        width: 184rpx;
-        font-size: 20rpx;
-        font-weight: 500;
-        color: #292d3b;
-        line-height: 28rpx;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        overflow: hidden;
-        -webkit-line-clamp: 3;
-        -webkit-box-orient: vertical;
-        letter-spacing: 0.1rpx;
-      }
-      .prize-desc {
-        height: 34rpx;
-        line-height: 34rpx;
-        font-size: 20rpx;
-        font-weight: 600;
-        color: #08c2c3;
-        .sale-label {
-          margin-right: 5rpx;
-        }
-        .big {
-          font-size: 26rpx;
-          font-weight: normal;
-        }
-      }
-    }
+  .img {
+    margin-bottom: 30rpx;
   }
-  .win-list {
-    padding: 24rpx 18rpx;
-    margin: 20rpx 0;
-    background-color: #fff;
-    .win-item {
-      display: flex;
-      align-items: center;
-      font-size: 28rpx;
-      font-weight: 500;
-      color: #292d3b;
-      margin: 32rpx 0;
-      &:first-child {
-        margin-top: 0;
-      }
-      &:last-child {
-        margin-bottom: 0;
-      }
-      .win-avatar {
-        width: 40rpx;
-        height: 40rpx;
-        margin-right: 8rpx;
-        border-radius: 100%;
-      }
-      .win-user,
-      .win-name {
-        display: block;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-      }
-      .win-user {
-        width: 220rpx;
-      }
-      .win-name {
-        flex: 1;
-        width: 0;
-      }
-    }
-  }
-  .user-list {
-    display: grid;
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-    margin: 0 -7rpx;
-    .user-item {
-      margin: 12rpx 7rpx;
-      .user-avatar {
-        width: 95rpx;
-        height: 96rpx;
-        display: block;
-        margin: 0 auto;
-        border-radius: 100%;
-      }
-      .user-name {
-        display: block;
-        margin-top: 16rpx;
-        width: 100%;
-        height: 40rpx;
-        font-size: 24rpx;
-        font-weight: 500;
-        color: #9496a5;
-        line-height: 40rpx;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        text-align: center;
-      }
-    }
-  }
-  .act-footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
+}
+.act-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 24rpx 48rpx 32rpx;
+  background: #ffffff;
+  letter-spacing: 5rpx;
+  .btn {
+    display: block;
     width: 100%;
-    box-sizing: border-box;
-    padding: 24rpx 48rpx 32rpx;
-    background: #ffffff;
-    letter-spacing: 5rpx;
-    .btn {
-      display: block;
-      width: 100%;
-      border-radius: 0;
-      height: 96rpx;
-      line-height: 96rpx;
-      background: #08c2c3;
-      font-size: 36rpx;
-      font-weight: 500;
-      color: #292d3b;
-      &.btn-gray {
-        background: #9496a5;
-      }
-      &::after {
-        display: none;
-      }
+    border-radius: 0;
+    height: 96rpx;
+    line-height: 96rpx;
+    background: #08c2c3;
+    font-size: 36rpx;
+    font-weight: 500;
+    color: #292d3b;
+    &.btn-gray {
+      background: #9496a5;
     }
-    .act-footer-desc {
-      text-align: center;
-      margin-top: 16rpx;
-      font-size: 24rpx;
-      font-weight: 500;
-      color: #9496a5;
-      line-height: 34rpx;
-      letter-spacing: 0rpx;
+    &::after {
+      display: none;
     }
   }
+  .act-footer-desc {
+    text-align: center;
+    margin-top: 16rpx;
+    font-size: 24rpx;
+    font-weight: 500;
+    color: #9496a5;
+    line-height: 34rpx;
+    letter-spacing: 0rpx;
+  }
 }
 </style>

src/pages/index/index.scss

@@ -16,7 +16,7 @@
     padding: 0 24rpx;
     .logo {
       display: block;
-      width: 166rpx;
+      width: 148rpx;
       height: 40rpx;
     }
 
@@ -41,8 +41,8 @@
     position: relative;
     .icon {
       display: block;
-      width: 52rpx;
-      height: 52rpx;
+      width: 100rpx;
+      height: 100rpx;
       margin: 0 auto 12rpx;
     }
     .my-tip {