12.01修改

component/title.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="relative">
+    <img :src="`https://file.rongcyl.cn/festatic/bkm/first2/s/${title}.png`" style="width: 100%; height: 64rpx" />
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: '',
+  },
+}
+</script>
+<style></style>

pages.json

@@ -238,7 +238,16 @@
         "enablePullDownRefresh": false
       }
     }
-  ],
+      ,{
+            "path" : "pages/drawCardsList/drawCardsList",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+    ],
   "globalStyle": {
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "uni-app",

pages/drawCard_first/drawCard_first.vue

@@ -1,141 +1,347 @@
-<template>
-  <view class="container">
-    <view class="head">
-      <image class="img" :src="detail.prizeIcon" mode="aspectFill"></image>
-      <view class="info">
-        <view class="title row">
-          {{ detail.name }}
-        </view>
-        <view class="row">
-          <view class="price">
-            ￥{{ detail.price }}
-            <span class="text">/张明信片</span>
-          </view>
-          <image
-            @click="$navigateTo('/pages/rule/rule', { type: 5 })"
-            class="button"
-            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/invite/button1.png'"
-            mode="widthFix"
-          ></image>
-        </view>
-        <view class="row">
-          <!--          <view class="users">
-            <image
-              class="photo"
-              :style="'left:' + index * 11 + 'px'"
-              :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame1.png'"
-              v-for="(item, index) in userList"
-              mode="widthFix"
-            ></image>
-          </view>
-          <view class="hot">
-				<image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2' + /first/hot.png" mode="widthFix"></image>
-				{{ detail.hotNum }}
-			</view> -->
-        </view>
-      </view>
-    </view>
-
-    <view class="cardList">
-      <image class="bk" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/bk1.png'" mode="widthFix"></image>
-      <view class="leftButton" @click="left"></view>
-      <view class="rightButton" @click="right"></view>
-      <view class="list">
-        <view :class="['item', item.check ? 'active' : '']" v-for="(item, index) in cardList" @click="clickCard(item)">
-          <image
-            v-if="item.check"
-            class="kaBkActive"
-            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(1, item) + 'Active.png'"
-            mode="heightFix"
-          ></image>
-          <image
-            class="kaBk"
-            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(1, item) + '.png'"
-            mode="widthFix"
-          ></image>
-          <numImg class="num" :value="item" :type="1" />
-        </view>
-      </view>
-    </view>
-
-    <view class="examples">
-      <view class="example">
-        <image
-          class="exampleImg"
-          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(1, { status: 0 }) + '.png'"
-          mode="widthFix"
-        ></image>
-        <image class="tip" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/bkType1.png'" mode="widthFix"></image>
-      </view>
-      <view class="example">
-        <image
-          class="exampleImg"
-          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(1, { status: 2 }) + '.png'"
-          mode="widthFix"
-        ></image>
-        <image class="tip" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/bkType5.png'" mode="widthFix"></image>
-      </view>
-      <view class="example">
-        <image
-          class="exampleImg"
-          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(1, { status: 1 }) + '.png'"
-          mode="widthFix"
-        ></image>
-        <image class="tip" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/bkType4.png'" mode="widthFix"></image>
-      </view>
-    </view>
-    <view class="buttons">
-      <image
-        class="button1"
-        @click="toKnapsack"
-        :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/button6.png'"
-        mode="widthFix"
-      ></image>
-      <view class="">
-        <image
-          class="button2"
-          @click="submit"
-          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/button4.png'"
-          mode="widthFix"
-        ></image>
-        <!-- <image class="button2" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2' + /first/button1.png" mode="widthFix"></image> -->
-      </view>
-      <image
-        @click="toWinningRecord"
-        class="button1"
-        :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/button3.png'"
-        mode="widthFix"
-      ></image>
-    </view>
-
-    <view class="prizes">
-      <image class="title" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/title.png'" mode="widthFix"></image>
-      <view class="prizesList" v-for="(item, index) in prizeList">
-        <image class="bk" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/bk2.png'" mode="scaleToFill"></image>
-        <view class="prizesTitle">
-          {{ $selectDictLabel(rewardType, item.type) }}
-        </view>
-        <view class="prizesImgOne" v-if="item.type == 22">
-          <view class="image" v-for="(item2, index2) in item.prizeList" @click="showImg(item2)">
-            <image :class="item2.leftNum == 0 ? 'grey' : ''" :src="item2.icon" mode="aspectFill"></image>
-          </view>
-        </view>
-        <view class="prizesImg" v-else>
-          <view class="image" v-for="(item2, index2) in item.prizeList" @click="showImg(item2)">
-            <image :class="item2.leftNum == 0 ? 'grey' : ''" :src="item2.icon" mode="aspectFill"></image>
-          </view>
-        </view>
-      </view>
-    </view>
-    <image
-      class="refresh"
-      @click="refresh"
-      :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/refresh.png'"
-      mode="widthFix"
-    ></image>
-    <paymentPopup ref="paymentPopup" @callBack="paymentSuccess" />
-    <imgPopup ref="imgPopup" />
-  </view>
+<template style="background-color: red">
+  <div
+    style="
+      height: 100vh;
+
+      background: linear-gradient(216deg, #fe854c 0%, #ff9a5a 100%);
+      box-sizing: border-box;
+      overflow: scroll;
+    "
+  >
+    <div
+      class="first2"
+      :style="{
+        background: 'url(https://file.rongcyl.cn/festatic/bkm/first2/bg.png)',
+        height: 'calc(100vh - 160rpx)',
+        'background-repeat': 'no-repeat',
+        'background-position': 'center center',
+        'background-size': '100% 100%',
+        'padding-top': safeAreaTop,
+        'box-sizing': 'border-box',
+        overflow: 'scroll',
+        'padding-bottom': '160rpx',
+      }"
+    >
+      <div class="text-white bold text-center mt-2">FIRST赏详情</div>
+      <div class="card relative">
+        <div class="flex pt-3 px-3">
+          <img
+            src="https://fudaanfang.oss-cn-hangzhou.aliyuncs.com/festatic/bkm/card.png"
+            style="width: 168rpx; height: 169rpx; border-radius: 8px"
+          />
+          <div class="flex-1 pl-2">
+            <div class="" style="font-weight: 900">宝可梦日版PSA10变装皮来咯</div>
+            <div class="flex justify-between">
+              <div>
+                <span class="bold" style="color: #ff2c43; font-size: 24rpx">￥</span>
+                <span class="bold" style="color: #ff2c43; font-size: 38rpx">9</span>
+                <span class="bold" style="color: #ff2c43; font-size: 28rpx">.9</span>
+                <span style="color: #4e504f; font-size: 14px">/张明信片</span>
+              </div>
+              <div class="pt-2">
+                <img
+                  src="https://fudaanfang.oss-cn-hangzhou.aliyuncs.com/festatic/bkm/first2/rule.png"
+                  style="width: 134rpx; height: 48rpx"
+                />
+              </div>
+            </div>
+            <div class="flex justify-between">
+              <div>
+                <img
+                  src="https://fudaanfang.oss-cn-hangzhou.aliyuncs.com/festatic/bkm/item.png"
+                  style="width: 40rpx; height: 40rpx; border-radius: 50%; display: inline-block; border: 1px solid #fff"
+                />
+                <img
+                  src="https://fudaanfang.oss-cn-hangzhou.aliyuncs.com/festatic/bkm/item.png"
+                  class="relative right-2"
+                  style="width: 40rpx; height: 40rpx; border-radius: 50%; display: inline-block; border: 1px solid #fff"
+                />
+                <img
+                  src="https://fudaanfang.oss-cn-hangzhou.aliyuncs.com/festatic/bkm/item.png"
+                  class="relative right-4"
+                  style="width: 40rpx; height: 40rpx; border-radius: 50%; display: inline-block; border: 1px solid #fff"
+                />
+                <img
+                  src="https://fudaanfang.oss-cn-hangzhou.aliyuncs.com/festatic/bkm/item.png"
+                  class="relative right-6"
+                  style="width: 40rpx; height: 40rpx; border-radius: 50%; display: inline-block; border: 1px solid #fff"
+                />
+                <img
+                  src="https://fudaanfang.oss-cn-hangzhou.aliyuncs.com/festatic/bkm/item.png"
+                  class="relative right-8"
+                  style="width: 40rpx; height: 40rpx; border-radius: 50%; display: inline-block; border: 1px solid #fff"
+                />
+              </div>
+              <div class="flex items-center">
+                <img
+                  src="https://fudaanfang.oss-cn-hangzhou.aliyuncs.com/festatic/bkm/first2/hot.png"
+                  class="relative right-2"
+                  style="width: 32rpx; height: 32rpx; display: inline-block"
+                />
+                <span style="color: #fc5b20" class="fs11">2025</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="absolute left-0 right-0 bottom-6 mx-auto"
+          style="
+            width: 670rpx;
+            height: 128rpx;
+            background: url(https://fudaanfang.oss-cn-hangzhou.aliyuncs.com/festatic/bkm/first2/notice_c.png) no-repeat
+              center center;
+            background-size: cover;
+          "
+        >
+          <img
+            src="https://fudaanfang.oss-cn-hangzhou.aliyuncs.com/festatic/bkm/first2/notice.png"
+            class="absolute top-2 left-2"
+            style="width: 106rpx; height: 28rpx"
+          />
+          <div class="text-white fs12 mt-6 px-2">
+            购买须知购买须知购买须知购买须知购买须知购买须知购买须知购买须知购买须知购买须知购买须知购买须知。
+          </div>
+        </div>
+        <div
+          class="absolute left-0 right-0 bottom-1 mx-auto"
+          style="
+            width: 690rpx;
+            height: 12px;
+            background: #4f5150;
+            box-shadow: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.8);
+            border-radius: 22px 22px 22px 22px;
+            opacity: 1;
+          "
+        >
+          <div
+            class="absolute top-1 mx-auto"
+            style="
+              left: 10rpx;
+              right: 10rpx;
+              width: 670rpx;
+              height: 890rpx;
+              background: linear-gradient(180deg, #ccd3d9 0%, #ffffff 5%);
+              border-radius: 0px 0px 0px 0px;
+              opacity: 1;
+            "
+          >
+            <div class="flex justify-around mt-4">
+              <img
+                src="https://file.rongcyl.cn/festatic/bkm/first2/tab1.png"
+                v-if="tabIndex !== 1"
+                @click="tabIndex = 1"
+                style="width: 126rpx; height: 32rpx"
+              />
+              <img
+                v-if="tabIndex == 1"
+                src="https://file.rongcyl.cn/festatic/bkm/first2/tab1a.png"
+                @click="tabIndex = 1"
+                style="width: 126rpx; height: 32rpx"
+              />
+              <img
+                v-if="tabIndex !== 2"
+                src="https://file.rongcyl.cn/festatic/bkm/first2/tab2.png"
+                @click="tabIndex = 2"
+                style="width: 126rpx; height: 32rpx"
+              />
+              <img
+                v-if="tabIndex == 2"
+                src="https://file.rongcyl.cn/festatic/bkm/first2/tab2a.png"
+                @click="tabIndex = 2"
+                style="width: 126rpx; height: 32rpx"
+              />
+              <img
+                v-if="tabIndex != 3"
+                src="https://file.rongcyl.cn/festatic/bkm/first2/tab3.png"
+                @click="tabIndex = 3"
+                style="width: 126rpx; height: 32rpx"
+              />
+              <img
+                v-if="tabIndex == 3"
+                src="https://file.rongcyl.cn/festatic/bkm/first2/tab3a.png"
+                @click="tabIndex = 3"
+                style="width: 126rpx; height: 32rpx"
+              />
+            </div>
+            <div class="flex flex-wrap justify-between" style="padding: 20rpx 16rpx" v-if="tabIndex == 1">
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/0.png" style="width: 24rpx; height: 24rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/5.png" style="width: 24rpx; height: 24rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/999.png" style="width: 75rpx; height: 24rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/999.png" style="width: 75rpx; height: 24rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <!-- <img src="https://file.rongcyl.cn/festatic/bkm/first2/0.png" style="width: 24rpx; height: 24rpx" /> -->
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/999.png" style="width: 75rpx; height: 24rpx" />
+              </div>
+              <!-- 2 -->
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/1.png" style="width: 24rpx; height: 24rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/6.png" style="width: 24rpx; height: 24rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/999.png" style="width: 75rpx; height: 24rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/999.png" style="width: 75rpx; height: 24rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/gift_a.png" style="width: 60rpx; height: 72rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/999.png" style="width: 75rpx; height: 24rpx" />
+              </div>
+              <!-- 3 -->
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/2.png" style="width: 24rpx; height: 24rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/7.png" style="width: 24rpx; height: 24rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/999.png" style="width: 75rpx; height: 24rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/999.png" style="width: 75rpx; height: 24rpx" />
+              </div>
+              <div class="flex items-center justify-center c2">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/gift.png" style="width: 76rpx; height: 76rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/999.png" style="width: 75rpx; height: 24rpx" />
+              </div>
+              <!-- 4 -->
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/3.png" style="width: 24rpx; height: 24rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/8.png" style="width: 24rpx; height: 24rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/999.png" style="width: 75rpx; height: 24rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/999.png" style="width: 75rpx; height: 24rpx" />
+              </div>
+              <div class="flex items-center justify-center c2">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/lock.png" style="width: 60rpx; height: 60rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/999.png" style="width: 75rpx; height: 24rpx" />
+              </div>
+              <!-- 5 -->
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/4.png" style="width: 24rpx; height: 24rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/9.png" style="width: 24rpx; height: 24rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/999.png" style="width: 75rpx; height: 24rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/999.png" style="width: 75rpx; height: 24rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/999.png" style="width: 75rpx; height: 24rpx" />
+              </div>
+              <div class="flex items-center justify-center c1">
+                <img src="https://file.rongcyl.cn/festatic/bkm/first2/999.png" style="width: 75rpx; height: 24rpx" />
+              </div>
+            </div>
+            <div class="pt-4" v-if="tabIndex == 2">
+              <Title title="LAST" />
+              <div class="flex pl-3 pt-3 mb-3" style="background-color: #f6f0e9">
+                <div
+                  v-for="item in 3"
+                  class="mr-2"
+                  style="width: 168rpx; background-color: #f9f6f2; border-radius: 4px; margin-bottom: 10px"
+                >
+                  <img
+                    src="https://file.rongcyl.cn/festatic/bkm/card.png"
+                    style="width: 144rpx; height: 144rpx; border-radius: 5px; margin: auto"
+                  />
+                  <div class="fs13 pl-2">冲四层闯…</div>
+                  <div style="color: #ea6636" class="pl-2">
+                    <span class="fs11">参考价</span>
+                    <span class="fs14 bold">990.5</span>
+                  </div>
+                </div>
+              </div>
+              <Title title="FIRST" />
+              <div class="flex pl-3 pt-3 mb-3" style="background-color: #f6f0e9">
+                <div
+                  v-for="item in 3"
+                  class="mr-2"
+                  style="width: 168rpx; background-color: #f9f6f2; border-radius: 4px; margin-bottom: 10px"
+                >
+                  <img
+                    src="https://file.rongcyl.cn/festatic/bkm/card.png"
+                    style="width: 144rpx; height: 144rpx; border-radius: 5px; margin: auto"
+                  />
+                  <div class="fs13 pl-2">冲四层闯…</div>
+                  <div style="color: #ea6636" class="pl-2">
+                    <span class="fs11">参考价</span>
+                    <span class="fs14 bold">990.5</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="flex flex-wrap justify-between" style="padding: 20rpx 16rpx" v-if="tabIndex == 3">3</div>
+            <img
+              src="https://file.rongcyl.cn/festatic/bkm/first2/dots.png"
+              class="absolute mx-auto inline-block left-0 right-0"
+              style="width: 612rpx; height: 24rpx; bottom: -12rpx"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="fixed right-2 bottom-20" style="height: 460rpx">
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/first2/fu.png"
+          style="width: 88rpx; height: 88rpx; margin-bottom: 24rpx"
+        />
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/first2/bag.png"
+          style="width: 88rpx; height: 88rpx; margin-bottom: 24rpx"
+        />
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/first2/refresh.png"
+          style="width: 88rpx; height: 88rpx; margin-bottom: 24rpx"
+        />
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/first2/share.png"
+          style="width: 88rpx; height: 88rpx; margin-bottom: 24rpx"
+        />
+      </div>
+
+      <div class="buy items-center">
+        <div class="pica ml-2" style="margin-top: -38rpx">
+          <img src="https://file.rongcyl.cn/festatic/bkm/first2/pica.png" class="w-full h-full" />
+        </div>
+        <div class="flex-1 text-white fs12 ml12 relative bottom-3 pl-3">
+          <span class="inline-block">已选99个 合计:</span>
+          <span class="inline-block" style="color: #ea6636">
+            <span class="bold">¥</span>
+            <span class="fs18 bold">999.5</span>
+          </span>
+        </div>
+        <img src="https://file.rongcyl.cn/festatic/bkm/first2/bug.png" class="b_btn relative bottom-3 right-2" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -146,30 +352,26 @@ import { cardType } from '@/utils/utils.js'
 
 import numImg from '@/component/numImg.vue'
 import paymentPopup from '@/component/paymentPopup.vue'
-
+import Title from '@/component/title.vue'
 export default {
-  components: {
-    numImg,
-    paymentPopup,
-    imgPopup,
-  },
   data() {
     return {
-      cardType: cardType,
-      rewardType: rewardType,
+      safeAreaTop: '0px',
+      tabIndex: 1,
       params: {
         raffleId: '',
-        limit: 12,
+        limit: 100,
         page: 1,
       },
       detail: {},
-      total: 0,
-      userList: 8,
-      cardList: [],
-      selectIndex: [],
-      prizeList: [],
     }
   },
+  components: {
+    Title,
+    imgPopup,
+    paymentPopup,
+    numImg,
+  },
   onLoad(query) {
     console.log(query, 'query')
     if (query.id) {
@@ -178,6 +380,9 @@ export default {
     }
     this.paymentSuccess()
   },
+  mounted() {
+    this.getSafeAreaTop()
+  },
   methods: {
     init() {
       // 获取卡牌商品列表
@@ -187,29 +392,25 @@ export default {
       //获取奖池
       this.getPrizeList()
     },
-    showImg(value) {
-      this.$refs.imgPopup.show(value)
-    },
-    toKnapsack() {
-      // 跳转背包界面
-      wx.navigateTo({
-        url: '/pages/knapsack/knapsack',
+    getCardList() {
+      prizePoolStatusApi(this.params).then(res => {
+        console.log(res, '卡牌分页')
+        for (var i = 0; i < res.data.list.length; i++) {
+          res.data.list[i].check = false
+        }
+        this.cardList = res.data.list
+        this.selectFormat()
+        this.total = res.data.total
       })
     },
-    showRule() {
-      // 显示规则
-      // this.$refs.popup.open('center')
-    },
-    refresh() {
-      wx.showLoading()
-      setTimeout(function () {
-        wx.hideLoading()
-      }, 1000)
-      this.init()
-      this.selectIndex = []
-      for (var i = 0; i < this.cardList.length; i++) {
-        this.cardList[i].check = false
+    getDetail() {
+      let params = {
+        raffleId: this.params.raffleId,
       }
+      raffleDetailApi(params).then(res => {
+        console.log(res, '详情')
+        this.detail = res.data
+      })
     },
     getPrizeList() {
       let params = {
@@ -230,34 +431,6 @@ export default {
         this.prizeList = newArray
       })
     },
-    toWinningRecord() {
-      let params = {
-        raffleId: this.params.raffleId,
-      }
-      this.$navigateTo('/pages/winningRecord/winningRecord', params)
-    },
-    getDetail() {
-      let params = {
-        raffleId: this.params.raffleId,
-      }
-      raffleDetailApi(params).then(res => {
-        console.log(res, '详情')
-        this.detail = res.data
-      })
-    },
-    submit() {
-      if (this.selectIndex.length == 0) {
-        wx.showToast({
-          title: '请选则要购买的卡牌。',
-          icon: 'none',
-        })
-        return
-      }
-      let params = {
-        raffleId: this.params.raffleId,
-      }
-      this.$refs.paymentPopup.show(params, this.selectIndex, this.detail)
-    },
     // 支付成功后回调
     paymentSuccess() {
       let _this = this
@@ -265,317 +438,70 @@ export default {
       // 刷新界面
       _this.refresh()
     },
-    // 选中取消选中卡牌
-    clickCard(item) {
-      if (item.status == 0) {
-        item.check = !item.check
-      }
-      // 如果是选中
-      let index = this.selectIndex.indexOf(item.number)
-      if (item.check && index == -1) {
-        this.selectIndex.push(item.number)
-      } else if (!item.check && index != -1) {
-        this.selectIndex.splice(index, 1)
-      }
-    },
-    // 标记已经选中卡牌
-    selectFormat() {
-      for (var i = 0; i < this.cardList.length; i++) {
-        if (this.selectIndex.includes(this.cardList[i].number)) {
-          this.cardList[i].check = true
-        }
-      }
-    },
-    getCardList() {
-      prizePoolStatusApi(this.params).then(res => {
-        console.log(res, '卡牌分页')
-        for (var i = 0; i < res.data.list.length; i++) {
-          res.data.list[i].check = false
-        }
-        this.cardList = res.data.list
-        this.selectFormat()
-        this.total = res.data.total
+    getSafeAreaTop() {
+      wx.getSystemInfo({
+        success: res => {
+          this.safeAreaTop = res.safeArea.top + 'px'
+        },
       })
     },
-    left() {
-      console.log('上一页')
-      if (this.params.page > 1) {
-        this.params.page = this.params.page - 1
-      }
-      this.getCardList()
-    },
-    right() {
-      console.log('下一页')
-      let pages = Math.ceil(this.total / this.params.limit)
-      if (this.params.page < pages) {
-        this.params.page = this.params.page + 1
-      }
-      this.getCardList()
-    },
   },
 }
 </script>
 
 <style scoped lang="scss">
-.container {
-  background: #9ec8f9;
-  padding-top: 15px;
-  overflow: auto;
-
-  .refresh {
-    position: fixed;
-    right: 4px;
-    top: 55%;
-    width: 45px;
+.first2 {
+  padding-top: v-bind(safeAreaBottom);
+  color: v-bind(color);
+
+  .card {
+    width: 710rpx;
+    margin: auto;
+    background-color: #fff;
+    border-radius: 10px;
+    height: 400rpx;
+    margin-top: 18px;
   }
 
-  .head {
-    background: #fff;
-    border: 10px;
-    padding: 15px;
-    border-radius: 10px 10px 0 0;
-    display: flex;
-    justify-content: space-between;
-
-    .img {
-      width: 106px;
-      height: 106px;
-      border-radius: 5px;
-      overflow: hidden;
-      margin-right: 10px;
-    }
-
-    .info {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      flex: 1;
-      .row {
-        display: flex;
-        justify-content: space-between;
-        color: #999999;
-
-        .button {
-          width: 67px;
-        }
-
-        .hot {
-          display: flex;
-          font-size: 12px;
-          color: #999999;
-
-          image {
-            width: 16px;
-          }
-        }
-
-        .users {
-          position: relative;
-
-          .photo {
-            position: absolute;
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-          }
-        }
-      }
-
-      .title {
-        font-weight: 600;
-        color: #000;
-      }
-
-      .price {
-        font-size: 14px;
-        font-weight: 600;
-        color: #ff2c43;
-
-        .text {
-          color: #999999;
-          font-weight: 500;
-        }
-      }
-    }
+  .c1 {
+    background-image: url(https://file.rongcyl.cn/festatic/bkm/first2/ca.png);
+    width: 96rpx;
+    height: 128rpx;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: contain;
+    margin-bottom: 14rpx;
   }
 
-  .cardList {
-    margin-top: 10px;
-    position: relative;
-
-    .bk {
-      width: 100%;
-    }
-
-    .leftButton {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      left: 20px;
-      height: 40px;
-      width: 20px;
-      z-index: 5;
-    }
-
-    .rightButton {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      right: 20px;
-      height: 40px;
-      width: 20px;
-      z-index: 5;
-    }
-
-    .list {
-      padding: 35px 40px;
-      width: calc(100% - 80px);
-      height: calc(100% - 70px);
-      position: absolute;
-      top: 0;
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr;
-      grid-template-rows: 1fr 1fr 1fr;
-
-      .item {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-
-        .kaBkActive {
-          height: 132%;
-          width: 100%;
-          position: absolute;
-          z-index: 1;
-        }
-        .kaBk {
-          width: 70%;
-          border-radius: 4px;
-          z-index: 2;
-        }
-
-        .num {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          top: 0;
-          z-index: 2;
-        }
-      }
-    }
-  }
-
-  .buttons {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-
-    .button1 {
-      width: 25vw;
-    }
-
-    .button2 {
-      width: 35vw;
-      margin-bottom: 5px;
-    }
-  }
-
-  .prizes {
-    .title {
-      width: 103px;
-      margin: 0 auto;
-    }
-
-    .prizesList {
-      margin: 20px;
-      position: relative;
-      overflow: hidden;
-      // z-index: 5;
-
-      .bk {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-      }
-      .prizesTitle {
-        position: relative;
-        height: 30px;
-        line-height: 30px;
-        width: 100%;
-        margin-left: 1px;
-        margin-top: 15px;
-        padding-left: 15px;
-        color: #fff;
-        font-weight: 800;
-        background: linear-gradient(90deg, rgba(89, 166, 255, 0.8) 0%, rgba(158, 200, 249, 0) 100%);
-      }
-      .prizesImg {
-        position: relative;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        margin: 15px;
-        white-space: wrap;
-        text-align: center;
-        // overflow: auto;
-
-        .image {
-          text-align: center;
-
-          image {
-            display: inline-block;
-            width: 36vw;
-            height: 36vw;
-            border-radius: 10px;
-            margin: 0 5px;
-          }
-        }
-      }
-      .prizesImgOne {
-        position: relative;
-        display: flex;
-        justify-content: center;
-        margin: 15px;
-
-        .image {
-          text-align: center;
-
-          image {
-            display: inline-block;
-            width: 45vw;
-            height: 45vw;
-            border-radius: 10px;
-            margin: 0 5px;
-          }
-        }
-      }
-    }
+  .c2 {
+    background-image: url(https://file.rongcyl.cn/festatic/bkm/first2/cg.png);
+    width: 96rpx;
+    height: 128rpx;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: contain;
+    margin-bottom: 14rpx;
   }
-}
-.examples {
-  width: 100%;
-  margin-bottom: 20px;
-  padding: 0 10px;
-  display: flex;
 
-  .example {
-    width: 14vw;
-    margin-right: 10px;
+  .buy {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 750rpx;
+    height: 160rpx;
+    background: #000000;
+    opacity: 1;
     display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    position: relative;
 
-    .exampleImg {
-      width: 13vw;
+    .pica {
+      width: 88rpx;
+      height: 88rpx;
     }
 
-    .tip {
-      width: 100%;
-      position: absolute;
-      bottom: 0;
-      transform: translateY(50%);
+    .b_btn {
+      width: 232rpx;
+      height: 76rpx;
     }
   }
 }

pages/drawCard_first/drawCard_first_old.vue

@@ -0,0 +1,582 @@
+<template>
+  <view class="container">
+    <view class="head">
+      <image class="img" :src="detail.prizeIcon" mode="aspectFill"></image>
+      <view class="info">
+        <view class="title row">
+          {{ detail.name }}
+        </view>
+        <view class="row">
+          <view class="price">
+            ￥{{ detail.price }}
+            <span class="text">/张明信片</span>
+          </view>
+          <image
+            @click="$navigateTo('/pages/rule/rule', { type: 5 })"
+            class="button"
+            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/invite/button1.png'"
+            mode="widthFix"
+          ></image>
+        </view>
+        <view class="row">
+          <!--          <view class="users">
+            <image
+              class="photo"
+              :style="'left:' + index * 11 + 'px'"
+              :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame1.png'"
+              v-for="(item, index) in userList"
+              mode="widthFix"
+            ></image>
+          </view>
+          <view class="hot">
+				<image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2' + /first/hot.png" mode="widthFix"></image>
+				{{ detail.hotNum }}
+			</view> -->
+        </view>
+      </view>
+    </view>
+
+    <view class="cardList">
+      <image class="bk" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/bk1.png'" mode="widthFix"></image>
+      <view class="leftButton" @click="left"></view>
+      <view class="rightButton" @click="right"></view>
+      <view class="list">
+        <view :class="['item', item.check ? 'active' : '']" v-for="(item, index) in cardList" @click="clickCard(item)">
+          <image
+            v-if="item.check"
+            class="kaBkActive"
+            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(1, item) + 'Active.png'"
+            mode="heightFix"
+          ></image>
+          <image
+            class="kaBk"
+            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(1, item) + '.png'"
+            mode="widthFix"
+          ></image>
+          <numImg class="num" :value="item" :type="1" />
+        </view>
+      </view>
+    </view>
+
+    <view class="examples">
+      <view class="example">
+        <image
+          class="exampleImg"
+          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(1, { status: 0 }) + '.png'"
+          mode="widthFix"
+        ></image>
+        <image class="tip" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/bkType1.png'" mode="widthFix"></image>
+      </view>
+      <view class="example">
+        <image
+          class="exampleImg"
+          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(1, { status: 2 }) + '.png'"
+          mode="widthFix"
+        ></image>
+        <image class="tip" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/bkType5.png'" mode="widthFix"></image>
+      </view>
+      <view class="example">
+        <image
+          class="exampleImg"
+          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(1, { status: 1 }) + '.png'"
+          mode="widthFix"
+        ></image>
+        <image class="tip" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/bkType4.png'" mode="widthFix"></image>
+      </view>
+    </view>
+    <view class="buttons">
+      <image
+        class="button1"
+        @click="toKnapsack"
+        :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/button6.png'"
+        mode="widthFix"
+      ></image>
+      <view class="">
+        <image
+          class="button2"
+          @click="submit"
+          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/button4.png'"
+          mode="widthFix"
+        ></image>
+        <!-- <image class="button2" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2' + /first/button1.png" mode="widthFix"></image> -->
+      </view>
+      <image
+        @click="toWinningRecord"
+        class="button1"
+        :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/button3.png'"
+        mode="widthFix"
+      ></image>
+    </view>
+
+    <view class="prizes">
+      <image class="title" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/title.png'" mode="widthFix"></image>
+      <view class="prizesList" v-for="(item, index) in prizeList">
+        <image class="bk" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/bk2.png'" mode="scaleToFill"></image>
+        <view class="prizesTitle">
+          {{ $selectDictLabel(rewardType, item.type) }}
+        </view>
+        <view class="prizesImgOne" v-if="item.type == 22">
+          <view class="image" v-for="(item2, index2) in item.prizeList" @click="showImg(item2)">
+            <image :class="item2.leftNum == 0 ? 'grey' : ''" :src="item2.icon" mode="aspectFill"></image>
+          </view>
+        </view>
+        <view class="prizesImg" v-else>
+          <view class="image" v-for="(item2, index2) in item.prizeList" @click="showImg(item2)">
+            <image :class="item2.leftNum == 0 ? 'grey' : ''" :src="item2.icon" mode="aspectFill"></image>
+          </view>
+        </view>
+      </view>
+    </view>
+    <image
+      class="refresh"
+      @click="refresh"
+      :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/refresh.png'"
+      mode="widthFix"
+    ></image>
+    <paymentPopup ref="paymentPopup" @callBack="paymentSuccess" />
+    <imgPopup ref="imgPopup" />
+  </view>
+</template>
+
+<script>
+import imgPopup from '@/component/imgPopup.vue'
+import { rewardType } from '@/utils/commonConfig.js'
+import { prizePoolStatusApi, drawCardSubmitApi, raffleDetailApi, prizeListApi } from '@/api/drawCard.js'
+import { cardType } from '@/utils/utils.js'
+
+import numImg from '@/component/numImg.vue'
+import paymentPopup from '@/component/paymentPopup.vue'
+
+export default {
+  components: {
+    numImg,
+    paymentPopup,
+    imgPopup,
+  },
+  data() {
+    return {
+      cardType: cardType,
+      rewardType: rewardType,
+      params: {
+        raffleId: '',
+        limit: 12,
+        page: 1,
+      },
+      detail: {},
+      total: 0,
+      userList: 8,
+      cardList: [],
+      selectIndex: [],
+      prizeList: [],
+    }
+  },
+  onLoad(query) {
+    console.log(query, 'query')
+    if (query.id) {
+      this.params.raffleId = query.id
+      this.init()
+    }
+    this.paymentSuccess()
+  },
+  methods: {
+    init() {
+      // 获取卡牌商品列表
+      this.getCardList()
+      // 获取卡包详情
+      this.getDetail()
+      //获取奖池
+      this.getPrizeList()
+    },
+    showImg(value) {
+      this.$refs.imgPopup.show(value)
+    },
+    toKnapsack() {
+      // 跳转背包界面
+      wx.navigateTo({
+        url: '/pages/knapsack/knapsack',
+      })
+    },
+    showRule() {
+      // 显示规则
+      // this.$refs.popup.open('center')
+    },
+    refresh() {
+      wx.showLoading()
+      setTimeout(function () {
+        wx.hideLoading()
+      }, 1000)
+      this.init()
+      this.selectIndex = []
+      for (var i = 0; i < this.cardList.length; i++) {
+        this.cardList[i].check = false
+      }
+    },
+    getPrizeList() {
+      let params = {
+        raffleId: this.params.raffleId,
+      }
+      prizeListApi(params).then(res => {
+        console.log(res, '奖池预览')
+        let newArray = res.data
+        for (var i = 0; i < res.data.length; i++) {
+          if (res.data[i].type == 21) {
+            newArray = []
+            newArray.push(res.data[i])
+            res.data.splice(i, 1)
+            newArray.push(...res.data)
+            break
+          }
+        }
+        this.prizeList = newArray
+      })
+    },
+    toWinningRecord() {
+      let params = {
+        raffleId: this.params.raffleId,
+      }
+      this.$navigateTo('/pages/winningRecord/winningRecord', params)
+    },
+    getDetail() {
+      let params = {
+        raffleId: this.params.raffleId,
+      }
+      raffleDetailApi(params).then(res => {
+        console.log(res, '详情')
+        this.detail = res.data
+      })
+    },
+    submit() {
+      if (this.selectIndex.length == 0) {
+        wx.showToast({
+          title: '请选则要购买的卡牌。',
+          icon: 'none',
+        })
+        return
+      }
+      let params = {
+        raffleId: this.params.raffleId,
+      }
+      this.$refs.paymentPopup.show(params, this.selectIndex, this.detail)
+    },
+    // 支付成功后回调
+    paymentSuccess() {
+      let _this = this
+      console.log('刷新抽卡界面')
+      // 刷新界面
+      _this.refresh()
+    },
+    // 选中取消选中卡牌
+    clickCard(item) {
+      if (item.status == 0) {
+        item.check = !item.check
+      }
+      // 如果是选中
+      let index = this.selectIndex.indexOf(item.number)
+      if (item.check && index == -1) {
+        this.selectIndex.push(item.number)
+      } else if (!item.check && index != -1) {
+        this.selectIndex.splice(index, 1)
+      }
+    },
+    // 标记已经选中卡牌
+    selectFormat() {
+      for (var i = 0; i < this.cardList.length; i++) {
+        if (this.selectIndex.includes(this.cardList[i].number)) {
+          this.cardList[i].check = true
+        }
+      }
+    },
+    getCardList() {
+      prizePoolStatusApi(this.params).then(res => {
+        console.log(res, '卡牌分页')
+        for (var i = 0; i < res.data.list.length; i++) {
+          res.data.list[i].check = false
+        }
+        this.cardList = res.data.list
+        this.selectFormat()
+        this.total = res.data.total
+      })
+    },
+    left() {
+      console.log('上一页')
+      if (this.params.page > 1) {
+        this.params.page = this.params.page - 1
+      }
+      this.getCardList()
+    },
+    right() {
+      console.log('下一页')
+      let pages = Math.ceil(this.total / this.params.limit)
+      if (this.params.page < pages) {
+        this.params.page = this.params.page + 1
+      }
+      this.getCardList()
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.container {
+  background: #9ec8f9;
+  padding-top: 15px;
+  overflow: auto;
+
+  .refresh {
+    position: fixed;
+    right: 4px;
+    top: 55%;
+    width: 45px;
+  }
+
+  .head {
+    background: #fff;
+    border: 10px;
+    padding: 15px;
+    border-radius: 10px 10px 0 0;
+    display: flex;
+    justify-content: space-between;
+
+    .img {
+      width: 106px;
+      height: 106px;
+      border-radius: 5px;
+      overflow: hidden;
+      margin-right: 10px;
+    }
+
+    .info {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      flex: 1;
+      .row {
+        display: flex;
+        justify-content: space-between;
+        color: #999999;
+
+        .button {
+          width: 67px;
+        }
+
+        .hot {
+          display: flex;
+          font-size: 12px;
+          color: #999999;
+
+          image {
+            width: 16px;
+          }
+        }
+
+        .users {
+          position: relative;
+
+          .photo {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+          }
+        }
+      }
+
+      .title {
+        font-weight: 600;
+        color: #000;
+      }
+
+      .price {
+        font-size: 14px;
+        font-weight: 600;
+        color: #ff2c43;
+
+        .text {
+          color: #999999;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+
+  .cardList {
+    margin-top: 10px;
+    position: relative;
+
+    .bk {
+      width: 100%;
+    }
+
+    .leftButton {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      left: 20px;
+      height: 40px;
+      width: 20px;
+      z-index: 5;
+    }
+
+    .rightButton {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 20px;
+      height: 40px;
+      width: 20px;
+      z-index: 5;
+    }
+
+    .list {
+      padding: 35px 40px;
+      width: calc(100% - 80px);
+      height: calc(100% - 70px);
+      position: absolute;
+      top: 0;
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+      grid-template-rows: 1fr 1fr 1fr;
+
+      .item {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+
+        .kaBkActive {
+          height: 132%;
+          width: 100%;
+          position: absolute;
+          z-index: 1;
+        }
+        .kaBk {
+          width: 70%;
+          border-radius: 4px;
+          z-index: 2;
+        }
+
+        .num {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          top: 0;
+          z-index: 2;
+        }
+      }
+    }
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    .button1 {
+      width: 25vw;
+    }
+
+    .button2 {
+      width: 35vw;
+      margin-bottom: 5px;
+    }
+  }
+
+  .prizes {
+    .title {
+      width: 103px;
+      margin: 0 auto;
+    }
+
+    .prizesList {
+      margin: 20px;
+      position: relative;
+      overflow: hidden;
+      // z-index: 5;
+
+      .bk {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+      }
+      .prizesTitle {
+        position: relative;
+        height: 30px;
+        line-height: 30px;
+        width: 100%;
+        margin-left: 1px;
+        margin-top: 15px;
+        padding-left: 15px;
+        color: #fff;
+        font-weight: 800;
+        background: linear-gradient(90deg, rgba(89, 166, 255, 0.8) 0%, rgba(158, 200, 249, 0) 100%);
+      }
+      .prizesImg {
+        position: relative;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        margin: 15px;
+        white-space: wrap;
+        text-align: center;
+        // overflow: auto;
+
+        .image {
+          text-align: center;
+
+          image {
+            display: inline-block;
+            width: 36vw;
+            height: 36vw;
+            border-radius: 10px;
+            margin: 0 5px;
+          }
+        }
+      }
+      .prizesImgOne {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        margin: 15px;
+
+        .image {
+          text-align: center;
+
+          image {
+            display: inline-block;
+            width: 45vw;
+            height: 45vw;
+            border-radius: 10px;
+            margin: 0 5px;
+          }
+        }
+      }
+    }
+  }
+}
+.examples {
+  width: 100%;
+  margin-bottom: 20px;
+  padding: 0 10px;
+  display: flex;
+
+  .example {
+    width: 14vw;
+    margin-right: 10px;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    position: relative;
+
+    .exampleImg {
+      width: 13vw;
+    }
+
+    .tip {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      transform: translateY(50%);
+    }
+  }
+}
+</style>

pages/drawCardsList/drawCardsList.vue

@@ -0,0 +1,391 @@
+<template>
+  <view class="container" style="background-color: #131313">
+    <uni-swiper-dot
+      class="uni-swiper-dot-box"
+      @clickItem="clickItem"
+      :info="info"
+      :current="current"
+      :mode="mode"
+      :dots-styles="dotsStyles"
+      field="content"
+    >
+      <swiper class="swiper-box" @change="change" :current="swiperDotIndex">
+        <swiper-item>
+          <image
+            class="swiperItem"
+            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/2.jpg'"
+            mode="aspectFill"
+          />
+        </swiper-item>
+        <swiper-item>
+          <image
+            class="swiperItem"
+            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/3.jpg'"
+            mode="aspectFill"
+          />
+        </swiper-item>
+        <swiper-item>
+          <image
+            class="swiperItem"
+            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/1.jpg'"
+            mode="aspectFill"
+          />
+        </swiper-item>
+      </swiper>
+    </uni-swiper-dot>
+    <!-- <view class="tabs">
+      <view class="tab" @click="clickTab(1)">
+        <image
+          class="tabImg"
+          v-show="tabActive == 1"
+          src="https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/tab1a.png"
+          mode="widthFix"
+        />
+        <image
+          class="tabImg"
+          v-show="tabActive != 1"
+          src="https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/tab1.png"
+          mode="widthFix"
+        />
+      </view>
+      <view class="tab" @click="clickTab(2)">
+        <image
+          class="tabImg"
+          v-show="tabActive == 2"
+          src="https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/tab2a.png"
+          mode="widthFix"
+        />
+        <image
+          class="tabImg"
+          v-show="tabActive != 2"
+          src="https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/tab2.png"
+          mode="widthFix"
+        />
+      </view>
+      <view class="tab" @click="clickTab(3)">
+        <image
+          class="tabImg"
+          v-show="tabActive == 3"
+          src="https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/tab3a.png"
+          mode="widthFix"
+        />
+        <image
+          class="tabImg"
+          v-show="tabActive != 3"
+          src="https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/tab3.png"
+          mode="widthFix"
+        />
+      </view>
+      <view class="tab" @click="clickTab(4)">
+        <image
+          class="tabImg"
+          v-show="tabActive == 4"
+          src="https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/tab4a.png"
+          mode="widthFix"
+        />
+        <image
+          class="tabImg"
+          v-show="tabActive != 4"
+          src="https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/tab4.png"
+          mode="widthFix"
+        />
+      </view>
+    </view> -->
+    <view class="list2">
+      <!--      <view class="ka" v-for="(item, index) in list" @click="toDrawCard({ id: item.id })" :key="index">
+        <view class="top">
+          <image mode="aspectFit" :src="item.icon"></image>
+        </view>
+        <view class="ka-info">
+          <view class="ka-name">
+            {{ item.name }}
+          </view>
+          <view class="row">
+            <uni-tag class="tag" text="创意热销" inverted type="default"></uni-tag>
+            <view class="money">¥{{ item.price }}</view>
+          </view>
+        </view>
+      </view> -->
+      <div class="card relative" v-for="(item, i) in list" @click="toDrawCard({ id: item.id })" :key="i">
+        <image mode="aspectFill" :src="item.icon"></image>
+        <div class="mt-1">{{ item.name }}</div>
+        <div class="flex justify-between" style="font-size: 13px; margin-top: 12rpx">
+          <div
+            style="
+              border-radius: 3px;
+              height: 20px;
+              line-height: 20px;
+              text-align: center;
+              background: #fc5b20;
+              color: #fff;
+              padding: 0 8rpx;
+            "
+          >
+            创意热销
+          </div>
+          <!-- 	  		<div>
+	  			<span style="font-size: 14px; margin-right: 4px; color: #fc5b20"
+	  				class="bold">{{ item.totalNum }}</span>
+	  			<span style="color: #666666">销量</span>
+	  		</div> -->
+        </div>
+        <div style="color: #fc5b20; margin-top: 12rpx">
+          <span class="fs14">￥</span>
+          <span class="bold fs16">{{ item.price }}</span>
+        </div>
+      </div>
+    </view>
+  </view>
+</template>
+
+<script>
+import { raffleListApi } from '@/api/drawCard.js'
+
+export default {
+  data() {
+    return {
+      tabActive: 4,
+      list: [],
+      info: [],
+      dotsStyles: {},
+      current: 0,
+      mode: 'dot',
+      swiperDotIndex: 0,
+    }
+  },
+  onShow() {
+    this.getList()
+  },
+  methods: {
+    toDrawCard(params) {
+      let url = ''
+      if (this.tabActive == 1) {
+        url = '/pages/drawCard_infinite/drawCard_infinite'
+      } else if (this.tabActive == 2) {
+        url = '/pages/drawCard_last/drawCard_last'
+      } else if (this.tabActive == 3) {
+        url = '/pages/drawCard_fullSet/drawCard_fullSet'
+      } else if (this.tabActive == 4) {
+        url = '/pages/drawCard_box/drawCard_box'
+      }
+      this.$navigateTo(url, params)
+    },
+    getList() {
+      let params = {
+        limit: 999,
+        page: 1,
+        type: this.tabActive,
+      }
+      raffleListApi(params).then(res => {
+        console.log(res, 'res')
+        let list = res.data.list
+        for (var i = 0; i < list.length; i++) {
+          if (list[i].subType) {
+            list[i].subType = list[i].subType.split(',')
+          }
+        }
+        console.log('list', list)
+        this.list = list
+      })
+    },
+    subType(value) {
+      let index = null
+      if (value == 120) {
+        index = 1
+      } else if (value == 110) {
+        index = 2
+      } else if (value == 111) {
+        index = 3
+      } else if (value == 112) {
+        index = 4
+      }
+      return index
+    },
+    tabImg(index) {
+      let url =
+        'https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/tab' + index + (this.tabActive == index ? 'a' : '') + '.png'
+      return url
+    },
+    clickTab(index) {
+      this.list = []
+      this.tabActive = index
+      this.getList()
+    },
+    clickItem() {},
+    change() {},
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.swiperItem {
+  width: 100%;
+  height: 100%;
+}
+
+.tabs {
+  margin: 10px 0;
+  height: 36px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  .tab {
+    .tabImg {
+      width: 18vw;
+      height: 100%;
+    }
+  }
+}
+
+.list {
+  padding: 10px;
+
+  .kabk {
+    padding: 1px;
+    background: linear-gradient(180deg, rgba(211, 74, 216, 0.3) 0%, rgba(58, 67, 207, 0.3) 25%);
+    border-radius: 13px;
+    box-shadow: 1px 1px 4px rgba(176, 123, 255, 0.5);
+    margin-bottom: 10px;
+    overflow: hidden;
+  }
+
+  .ka1 {
+    padding: 10px;
+    display: flex;
+    background: #fff;
+    border-radius: 12px;
+    position: relative;
+
+    .leftImg {
+      width: 30vw;
+      height: 30vw;
+      border-radius: 10px;
+      margin-right: 8px;
+    }
+
+    .rightInfo {
+      flex: 1;
+
+      .row {
+        margin-bottom: 5px;
+
+        .price {
+          font-size: 14px;
+          font-weight: 600;
+          color: #ff2c43;
+        }
+      }
+
+      .title {
+        font-size: 17px;
+        font-weight: 600;
+        width: 100%;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      .prizes {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+
+        .prize {
+          border-radius: 4px;
+          width: 10vw;
+          height: 10vw;
+          margin-right: 5px;
+        }
+      }
+
+      .tags {
+        position: absolute;
+        right: -1px;
+        bottom: -2px;
+        display: flex;
+        flex-direction: row-reverse;
+        justify-content: flex-end;
+
+        .tag {
+          position: relative;
+          width: 50px;
+          height: 20px;
+        }
+
+        .tag_0 {
+          z-index: 3;
+        }
+
+        .tag_1 {
+          right: -9px;
+          z-index: 2;
+        }
+
+        .tag_2 {
+          right: -18px;
+          z-index: 1;
+        }
+      }
+    }
+  }
+}
+
+.list2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 10px;
+  padding: 10px;
+  width: calc(100% - 20px);
+
+  .card {
+    position: relative;
+    // box-sizing: border-box;
+    // width: 100%;
+    // width: 344rpx;
+    // height: 500rpx;
+    background: #fff;
+    border-radius: 10px;
+    margin-bottom: 20rpx;
+    padding: 20rpx;
+    padding-bottom: 12rpx;
+
+    image {
+      width: 100%;
+      height: 50vw;
+      border-radius: 8px;
+    }
+  }
+}
+
+.three {
+  grid-template-columns: 1fr 1fr 1fr;
+
+  .ka {
+    width: 100%;
+
+    .top {
+      image {
+        width: 80%;
+        height: 30vw;
+      }
+    }
+
+    .ka-info {
+      padding: 5px 5px 10px 5px;
+
+      .ka-name {
+        font-size: 12px;
+      }
+
+      .row {
+        margin-top: 2px;
+        justify-content: flex-end;
+
+        .tag {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>

pages/index2/index.vue

@@ -175,30 +175,37 @@ export default {
   width: 168px;
   height: 88px;
 }
+
 .c {
   width: 82px;
   height: 47px;
 }
+
 .center {
   width: 38px;
   height: 98px;
 }
+
 .clicks {
   height: 98px;
   background-image: linear-gradient(to bottom, #ffaea6, #ff654c);
+
   img {
     height: 82px;
     width: 82px;
   }
 }
+
 .more {
   width: 28px;
   height: 98px;
 }
+
 .p {
   position: fixed;
   bottom: 120px;
   right: 20px;
+
   img {
     width: 50px;
     height: 50px;
@@ -208,11 +215,13 @@ export default {
 .tabs {
   display: flex;
   justify-content: space-around;
+
   .tab {
     font-size: 16px;
     font-weight: 400;
     color: #fff;
     padding: 10px 0;
+
     &.active {
       font-weight: 600;
       border-bottom: 2px solid #fc5b20;
@@ -220,12 +229,14 @@ export default {
     }
   }
 }
+
 .cards {
   margin-top: 20px;
   display: flex;
   justify-content: space-between;
   padding: 0 20rpx;
   flex-wrap: wrap;
+
   .card {
     box-sizing: border-box;
     width: 344rpx;
@@ -235,6 +246,7 @@ export default {
     margin-bottom: 20rpx;
     padding: 20rpx;
     padding-bottom: 12rpx;
+
     img {
       width: 308rpx;
       height: 308rpx;