index

api/coupon.js

@@ -8,3 +8,19 @@ export function couponListApi(data) {
     data: data,
   })
 }
+
+export function couponCenter(data) {
+  return request({
+    url: '/wx/coupon/center',
+    method: 'get',
+    data: data,
+  })
+}
+
+export function couponReceive(data) {
+  return request({
+    url: '/wx/coupon/receive',
+    method: 'post',
+    data: data,
+  })
+}

pages.json

@@ -5,6 +5,13 @@
   "pages": [
     {
       "path": "pages/index/index",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "潮米卡牌"
+      }
+    },
+    {
+      "path": "pages/index/index.bk",
       "style": {
         "navigationBarTitleText": "潮米卡牌"
       }
@@ -258,6 +265,7 @@
   "tabBar": {
     "color": "#B4C9DA",
     "selectedColor": "#fc5b20",
+    "backgroundColor": "#000000",
     "list": [
       {
         "pagePath": "pages/index/index",

pages/index/index.vue

@@ -17,7 +17,7 @@
       "
     >
       <div class="flex justify-between">
-        <img src="https://file.rongcyl.cn/festatic/bkm/activity.png" class="area" />
+        <img src="https://file.rongcyl.cn/festatic/bkm/activity.png" class="area" @click="activity" />
         <img
           src="https://file.rongcyl.cn/festatic/bkm/task.png"
           class="area"
@@ -33,26 +33,26 @@
       <div class="flex justify-between m-2 co">
         <img src="https://file.rongcyl.cn/festatic/bkm/center.png" class="center" />
         <div class="clicks flex-1 overflow-scroll flex flex-nowrap">
-          <div class="ml-2 mt-2 inline-block relative" v-for="c in click" :key="c">
+          <div class="ml-2 mt-2 inline-block relative" v-for="c in couponList" :key="c.id" @click="receive(c)">
             <img src="https://file.rongcyl.cn/festatic/bkm/click.png" />
             <div class="absolute top-4 left-0 text-center right-0">
-              <div class="bold fs12">闯关9-2</div>
-              <div class="fs11 text-zinc-600">闯关9-2</div>
+              <div class="bold fs12">{{ c.name }}</div>
+              <div class="fs11 text-zinc-600">{{ c.desc }}</div>
             </div>
           </div>
         </div>
-        <img src="https://file.rongcyl.cn/festatic/bkm/more.png" class="more" />
+        <!-- <img src="https://file.rongcyl.cn/festatic/bkm/more.png" class="more" /> -->
       </div>
 
       <div class="flex justify-between m-2">
         <img src="https://file.rongcyl.cn/festatic/bkm/c1.png" class="c" />
-        <img src="https://file.rongcyl.cn/festatic/bkm/c2.png" class="c" />
+        <img src="https://file.rongcyl.cn/festatic/bkm/c2.png" @click="$navigateTo('/pages/vip/vip')" class="c" />
         <img src="https://file.rongcyl.cn/festatic/bkm/c3.png" class="c" />
         <img src="https://file.rongcyl.cn/festatic/bkm/c4.png" class="c" />
       </div>
 
       <div class="tabs">
-        <div class="tab" :class="{ active: type == 0 }" @click="type = 0">全部</div>
+        <div class="tab" :class="{ active: type == 0 }" @click="type = 0">热门</div>
         <div class="tab" :class="{ active: type == 5 }" @click="type = 5">FIRST赏</div>
         <div class="tab" :class="{ active: type == 2 }" @click="type = 2">LAST赏</div>
 
@@ -70,28 +70,30 @@
           />
           <img :src="item.icon" />
           <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 class="flex justify-between" style="font-size: 13px; margin-top: 12rpx">
+            
+            <img src="https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/tag2.png" style="height: 35rpx; width: 80rpx" />
             <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 class="flex justify-between">
+            <div style="color: #fc5b20; margin-top: 12rpx">
+              <span class="fs14">￥</span>
+              <span class="bold fs16">{{ item.price }}</span>
+            </div>
+            <div v-if="item.subType">
+              <div class="tag" v-if="item.subType.includes('110')">欧王</div>
+              <div class="tag" v-if="item.subType.includes('120')">连击</div>
+              <div class="tag" v-if="item.subType.includes('112')">免单</div>
+            </div>
+            <div
+              style="margin-top: 12rpx; color: #a79e9e; font-size: 12px"
+              v-if="!item.subType && (type == 5 || type == 2)"
+            >
+              剩余 {{ item.balaceNum }}/ {{ item.totalNum }}
+            </div>
           </div>
         </div>
       </div>
@@ -130,17 +132,19 @@
 
 <script>
 import { raffleListApi } from '@/api/drawCard'
+import { couponCenter, couponReceive } from '@/api/coupon'
 
 export default {
   data() {
     return {
-      click: 6,
       list: [],
       type: 0,
+      couponList: [],
     }
   },
   created() {
     this.getList()
+    this.getCouponList()
   },
   watch: {
     type() {
@@ -149,11 +153,33 @@ export default {
   },
 
   methods: {
+    activity() {
+      wx.showToast({
+        title: '敬请期待',
+        icon: 'none',
+      })
+    },
+    receive(item) {
+      if (item.status == 1) return
+      couponReceive({ couponId: item.id }).then(res => {
+        wx.showToast({
+          title: '领取成功',
+          icon: 'none',
+        })
+        this.getCouponList()
+      })
+    },
+    getCouponList() {
+      couponCenter().then(res => {
+        this.couponList = res.data
+      })
+    },
     getList() {
       let params = {
         limit: 999,
         page: 1,
         type: this.type || '',
+        isHot: this.type == 0,
       }
       raffleListApi(params).then(res => {
         let list = res.data.list
@@ -194,7 +220,19 @@ export default {
     width: 82px;
   }
 }
-
+.tag {
+  border-radius: 3px;
+  margin-top: 12rpx;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  background: #fc5b20;
+  color: #fff;
+  padding: 0 8rpx;
+  font-size: 13px;
+  display: inline-block;
+  margin-left: 10px;
+}
 .more {
   width: 28px;
   height: 98px;