Merge branch 'master' of http://47.99.76.149:3000/baokemeng/uniAppXCX

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": "潮米卡牌"
       }
@@ -35,6 +42,7 @@
     {
       "path": "pages/mine/mine",
       "style": {
+        "navigationStyle": "custom",
         "navigationBarTitleText": "我的",
         "enablePullDownRefresh": false
       }
@@ -257,31 +265,37 @@
   },
   "tabBar": {
     "color": "#B4C9DA",
-    "selectedColor": "#FBB434",
-    "height": "220px",
+    "selectedColor": "#fc5b20",
+    "backgroundColor": "#000000",
     "list": [
       {
         "pagePath": "pages/index/index",
-        "iconPath": "/static/img/tabBar1.png",
-        "selectedIconPath": "/static/img/tabBar1_s.png",
+        "iconPath": "/static/img/home.png",
+        "selectedIconPath": "/static/img/home_a.png",
         "text": "首页"
       },
       {
         "pagePath": "pages/shoppingMall/shoppingMall",
-        "iconPath": "/static/img/tabBar2.png",
-        "selectedIconPath": "/static/img/tabBar2_s.png",
+        "iconPath": "/static/img/shop.png",
+        "selectedIconPath": "/static/img/shop_a.png",
         "text": "商城"
       },
+      {
+        "pagePath": "pages/drawCardsList/drawCardsList",
+        "iconPath": "/static/img/cc.png",
+        "selectedIconPath": "/static/img/cc.png",
+        "text": "抽卡机"
+      },
       {
         "pagePath": "pages/knapsackTab/knapsack",
-        "iconPath": "/static/img/tabBar3.png",
-        "selectedIconPath": "/static/img/tabBar3_s.png",
+        "iconPath": "/static/img/bag.png",
+        "selectedIconPath": "/static/img/bag_a.png",
         "text": "背包"
       },
       {
         "pagePath": "pages/mine/mine",
-        "iconPath": "/static/img/tabBar4.png",
-        "selectedIconPath": "/static/img/tabBar4_s.png",
+        "iconPath": "/static/img/mine.png",
+        "selectedIconPath": "/static/img/mine_a.png",
         "text": "我的"
       }
     ]

pages/index/index.bk.vue

@@ -0,0 +1,390 @@
+<template>
+  <view class="container">
+    <image class="headImg" mode="aspectFill" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/homeHead.jpeg'" />
+    <view class="headBarrage">
+      <view class="barrage-container">
+        <view v-for="(item, index) in barrageData" :key="index" class="barrage-item" :style="item.style">
+          {{ item.text }}
+        </view>
+      </view>
+    </view>
+
+    <view class="tabs">
+      <!--     <view class="tab">
+        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame3.png'" alt="" />
+        <span>全部</span>
+      </view> -->
+      <view class="tab" @click="$navigateTo('/pages/excellentValue/excellentValue')">
+        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame4.png'" alt="" />
+        <span>超值挑战</span>
+      </view>
+      <view class="tab" @click="$navigateTo('/pages/task/index')">
+        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame2.png'" alt="" />
+        <span>任务大厅</span>
+      </view>
+      <view class="tab" @click="$navigateTo('/pages/index2/index')">
+        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame1.png'" alt="" />
+        <span>VIP福利</span>
+      </view>
+    </view>
+    <view class="buttons">
+      <view class="left">
+        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/button3.png'" @click="toInvite" />
+      </view>
+      <view class="right">
+        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/button1.png'" @click="showQRcode" />
+        <image
+          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/button2.png'"
+          @click="$navigateTo('/pages/raffle/raffle')"
+        />
+      </view>
+    </view>
+    <view class="list-title">- 热门推荐 -</view>
+    <view class="list">
+      <view class="ka" v-for="(item, index) in kaList" @click="drawCard(item)">
+        <view class="top">
+          <image mode="aspectFit" :src="item.icon" />
+        </view>
+        <view class="ka-info">
+          <view class="ka-name">{{ item.name }}</view>
+          <view class="row">
+            <uni-tag :text="item.tags" inverted type="default"></uni-tag>
+            <view class="money">¥{{ item.price }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <uni-popup class="popup" ref="popup" type="center">
+      <image
+        class="qrcodeImg"
+        :show-menu-by-longpress="true"
+        :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/QRcode.png'"
+        mode="widthFix"
+      />
+    </uni-popup>
+  </view>
+</template>
+
+<script>
+import { messageListApi } from '@/api/common.js'
+import { raffleListApi } from '@/api/drawCard.js'
+
+export default {
+  data() {
+    return {
+      timer: null,
+      kaList: [],
+      messageList: [],
+      barrageData: [],
+      barrageIndex: 0,
+      timeOut: null,
+      interval: null,
+      params: {
+        limit: 20,
+        page: 1,
+      },
+      total: null,
+      containerWidth: 0,
+      usedTops: [],
+    }
+  },
+  onLoad(query) {
+    if (query.inviteId) {
+      getApp().globalData.inviteId = query.inviteId
+    } else {
+      const scene = decodeURIComponent(query.scene)
+      let inviteId = scene.split('=')[1]
+      console.log(inviteId, 'inviteId')
+      getApp().globalData.inviteId = inviteId
+    }
+    console.log(this.$refs)
+  },
+  onShow() {
+    this.getMessage()
+    this.getHot()
+    this.interval = setInterval(() => {
+      console.log('重复获取消息')
+      this.barrageIndex = 0
+      this.getMessage()
+      // let num = this.params.page * this.params.limit
+      // if (this.total == null || this.total > num) {
+      // 	console.log('获取消息接口')
+      // 	// this.params.page += 1
+      // 	this.barrageIndex = 0
+      // 	this.getMessage()
+      // }
+    }, 60000)
+    setTimeout(() => {
+      this.launchBarrage()
+    }, 2000)
+  },
+  onHide() {
+    clearInterval(this.interval)
+    clearInterval(this.timer)
+  },
+  methods: {
+    showQRcode() {
+      this.$refs.popup.open()
+    },
+    drawCard(value) {
+      let url = ''
+      if (value.type == 1) {
+        url = '/pages/drawCard_infinite/drawCard_infinite'
+      } else if (value.type == 2) {
+        url = '/pages/drawCard_last/drawCard_last'
+      } else if (value.type == 3) {
+        url = '/pages/drawCard_fullSet/drawCard_fullSet'
+      } else if (value.type == 4) {
+        url = '/pages/drawCard_box/drawCard_box'
+      } else if (value.type == 5) {
+        url = '/pages/drawCard_first/drawCard_first'
+      }
+      this.$navigateTo(url, {
+        id: value.id,
+      })
+    },
+    getHot() {
+      let params = {
+        limit: 999,
+        page: 1,
+        isHot: true,
+      }
+      raffleListApi(params).then(res => {
+        this.kaList = res.data.list
+      })
+    },
+    getMessage() {
+      messageListApi(this.params).then(res => {
+        this.messageList = res.data.list
+        this.total = res.data.total
+        this.initBarrage()
+      })
+    },
+    launchBarrage() {
+      if (this.timer) {
+        clearInterval(this.timer)
+      }
+      this.timer = setInterval(() => {
+        this.barrageData.forEach((barrage, index) => {
+          if (!barrage.tag) {
+            barrage.tag = true
+            barrage.right = -400
+            barrage.top = this.randomTop()
+            barrage.style = `display: block; top: ${barrage.top}px; right: ${barrage.right}px;`
+          } else {
+            barrage.right = parseInt(barrage.right) + 2
+            barrage.style = `display: block; top: ${barrage.top}px; right: ${barrage.right}px;`
+          }
+        })
+      }, 20)
+    },
+    // 初始化弹幕
+    initBarrage() {
+      // console.log(this.barrageIndex, 'this.barrageIndex')
+      if (this.messageList.length > 0) {
+        this.timeOut = setTimeout(() => {
+          let barrage = {
+            text: this.messageList[this.barrageIndex].content,
+          }
+          this.$set(barrage, 'right', -400)
+          this.$set(barrage, 'top', this.randomTop())
+          this.$set(barrage, 'tag', false)
+          this.barrageData.push(barrage)
+
+          this.barrageIndex += 1
+          clearTimeout(this.timeOut)
+          if (this.barrageIndex > this.messageList.length - 1) {
+            this.barrageIndex = 0
+          } else {
+            this.initBarrage()
+          }
+        }, 1000)
+      }
+    },
+    // 发送弹幕
+    sendingBarrage() {
+      let messageList = this.messageList
+    },
+    randomTop() {
+      // return Math.floor(Math.random() * 150)
+
+      // 往前5个不重复top值
+      let top = 0
+      this.usedTops.push(top)
+      do {
+        top = Math.floor(Math.random() * 6) * 30 // 生成0, 30, 60, 90, 120的随机值
+      } while (this.usedTops.slice(-4).includes(top))
+
+      this.usedTops.push(top)
+
+      return top
+    },
+
+    toInvite() {
+      wx.navigateTo({
+        url: '/pages/invite/invite',
+      })
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.barrage-container {
+  width: 100%;
+  height: 180px;
+  position: relative;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.2);
+  /* 背景色，可根据需要调整 */
+}
+
+.barrage-item {
+  color: #fff;
+  padding: 5px 10px;
+  font-size: 14px;
+  line-height: 30px;
+  position: absolute;
+  white-space: nowrap;
+  display: none;
+  border-radius: 15px;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.container {
+  /* padding: 20px; */
+  font-size: 14px;
+  line-height: 24px;
+}
+
+.headImg {
+  height: 180px;
+  width: 100%;
+}
+
+.headBarrage {
+  height: 180px;
+  width: 100%;
+  position: absolute;
+  top: 0;
+}
+
+.tabs {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 10px;
+
+  > .tab {
+    width: 20%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    > image {
+      width: 40px;
+      height: 40px;
+    }
+  }
+}
+
+.buttons {
+  margin-top: 5px;
+  padding: 10px;
+  display: flex;
+  justify-content: space-between;
+
+  > .left {
+    width: calc(50vw - 15px);
+    height: 40vw;
+
+    image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  > .right {
+    width: calc(50vw - 15px);
+    height: 40vw;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+
+    image {
+      width: 100%;
+      height: calc(50% - 5px);
+    }
+  }
+}
+
+.list-title {
+  font-size: 16px;
+  font-weight: 600;
+  text-align: center;
+  padding: 10px;
+}
+
+.list {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 10px;
+  padding: 10px;
+
+  .ka {
+    width: calc(50vw - 15px);
+    box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    // height: 60vw;
+
+    .top {
+      // height: 60vw;
+      background: linear-gradient(180deg, #faf1a7 0%, #ffe456 100%);
+      text-align: center;
+      display: flex;
+      justify-content: center;
+
+      image {
+        width: 35vw;
+        height: 50vw;
+      }
+    }
+
+    .ka-info {
+      padding: 10px;
+
+      .ka-name {
+        font-size: 15px;
+        font-weight: 600;
+      }
+
+      .row {
+        margin-top: 5px;
+        display: flex;
+        justify-content: space-between;
+
+        .money {
+          font-size: 16px;
+          font-weight: 600;
+          color: #ff2c43;
+        }
+      }
+    }
+  }
+}
+
+.bullet {
+  height: 30px;
+  line-height: 30px;
+  padding: 0 10px;
+  border-radius: 15px;
+  background-color: rgba(0, 0, 0, 0.3);
+  color: #fff;
+}
+.qrcodeImg {
+  width: 70vw;
+  border-radius: 5px;
+}
+</style>

pages/index/index.vue

@@ -1,229 +1,195 @@
-<template>
-  <view class="container">
-    <image class="headImg" mode="aspectFill" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/homeHead.jpeg'" />
-    <view class="headBarrage">
-      <view class="barrage-container">
-        <view v-for="(item, index) in barrageData" :key="index" class="barrage-item" :style="item.style">
-          {{ item.text }}
-        </view>
-      </view>
-    </view>
-
-    <view class="tabs">
-      <!--     <view class="tab">
-        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame3.png'" alt="" />
-        <span>全部</span>
-      </view> -->
-      <view class="tab" @click="$navigateTo('/pages/excellentValue/excellentValue')">
-        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame4.png'" alt="" />
-        <span>超值挑战</span>
-      </view>
-      <view class="tab" @click="$navigateTo('/pages/task/index')">
-        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame2.png'" alt="" />
-        <span>任务大厅</span>
-      </view>
-      <view class="tab" @click="$navigateTo('/pages/index2/index')">
-        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame1.png'" alt="" />
-        <span>VIP福利</span>
-      </view>
-    </view>
-    <view class="buttons">
-      <view class="left">
-        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/button3.png'" @click="toInvite" />
-      </view>
-      <view class="right">
-        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/button1.png'" @click="showQRcode" />
-        <image
-          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/button2.png'"
-          @click="$navigateTo('/pages/raffle/raffle')"
+<template style="background-color: red">
+  <div
+    style="
+      background-image: url(https://file.rongcyl.cn/festatic/bkm/bg_i.png);
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: contain;
+      background-color: #000;
+    "
+  >
+    <img src="https://file.rongcyl.cn/festatic/bkm/banner.png" class="w-full" style="height: 400rpx" />
+    <div
+      style="
+        background: rgba(0, 0, 0, 0.85);
+        background-image: url(https://file.rongcyl.cn/festatic/bkm/box.png);
+        background-size: cover;
+      "
+    >
+      <div class="flex justify-between">
+        <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"
+          @click="$navigateTo('/pages/task/index')"
         />
-      </view>
-    </view>
-    <view class="list-title">- 热门推荐 -</view>
-    <view class="list">
-      <view class="ka" v-for="(item, index) in kaList" @click="drawCard(item)">
-        <view class="top">
-          <image mode="aspectFit" :src="item.icon" />
-        </view>
-        <view class="ka-info">
-          <view class="ka-name">{{ item.name }}</view>
-          <view class="row">
-            <uni-tag :text="item.tags" inverted type="default"></uni-tag>
-            <view class="money">¥{{ item.price }}</view>
-          </view>
-        </view>
-      </view>
-    </view>
-
-    <uni-popup class="popup" ref="popup" type="center">
-      <image
-        class="qrcodeImg"
-        :show-menu-by-longpress="true"
-        :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/QRcode.png'"
-        mode="widthFix"
-      />
-    </uni-popup>
-  </view>
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/invite.png"
+          class="area"
+          @click="$navigateTo('/pages/invite/invite')"
+        />
+      </div>
+
+      <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 couponList" :key="c.id" @click="receive(c)">
+            <img src="https://file.rongcyl.cn/festatic/bkm/clicked.png" v-if="c.status == 1" />
+            <img src="https://file.rongcyl.cn/festatic/bkm/click.png" v-if="c.status == 0" />
+            <div class="absolute top-4 left-0 text-center right-0">
+              <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" /> -->
+      </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" @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 == 5 }" @click="type = 5">FIRST赏</div>
+        <div class="tab" :class="{ active: type == 2 }" @click="type = 2">LAST赏</div>
+
+        <div class="tab" :class="{ active: type == 3 }" @click="type = 3">全套赏</div>
+        <div class="tab" :class="{ active: type == 1 }" @click="type = 1">无限赏</div>
+        <!-- <div class="tab" :class="{ active: type == 4 }" @click="type = 4">抽盒机</div> -->
+      </div>
+
+      <div class="cards">
+        <div class="card relative" v-for="(item, i) in list" @click="$navigateTo('/pages/first2/index')" :key="i">
+          <img
+            :src="`https://file.rongcyl.cn/festatic/bkm/tags/${item.type}.png`"
+            class="absolute top-0 left-0"
+            style="width: 62px; height: 24px"
+          />
+          <img :src="item.icon" />
+          <div class="mt-1">{{ item.name }}</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 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 && (item.type == 5 || item.type == 2)"
+            >
+              剩余 {{ item.balaceNum }}/ {{ item.totalNum }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="p">
+        <img src="https://file.rongcyl.cn/festatic/bkm/p.png" />
+        <div class="absolute text-white bottom-2 fs11 text-center left-0 right-0">3333</div>
+      </div>
+    </div>
+    <!-- <div
+      class="fixed left-0 right-0 bottom-0 pb-1 bg-black flex justify-around items-center fs13"
+      style="color: #b4c9da; height: 80px"
+    >
+      <div class="text-center">
+        <img src="https://file.rongcyl.cn/festatic/bkm/index2tabs/home_a.png" class="w-7 h-7" />
+        <div style="color: #fc5b20">首页</div>
+      </div>
+      <div class="text-center">
+        <img src="https://file.rongcyl.cn/festatic/bkm/index2tabs/shop.png" class="w-7 h-7" />
+        <div>商城</div>
+      </div>
+      <div class="text-center">
+        <img src="https://file.rongcyl.cn/festatic/bkm/index2tabs/cc.png" class="w-8 h-8" />
+        <div>抽卡机</div>
+      </div>
+      <div class="text-center">
+        <img src="https://file.rongcyl.cn/festatic/bkm/index2tabs/bag.png" class="w-7 h-7" />
+        <div>背包</div>
+      </div>
+      <div class="text-center">
+        <img src="https://file.rongcyl.cn/festatic/bkm/index2tabs/mine.png" class="w-7 h-7" />
+        <div>我的</div>
+      </div>
+    </div> -->
+  </div>
 </template>
 
 <script>
-import { messageListApi } from '@/api/common.js'
-import { raffleListApi } from '@/api/drawCard.js'
+import { raffleListApi } from '@/api/drawCard'
+import { couponCenter, couponReceive } from '@/api/coupon'
 
 export default {
   data() {
     return {
-      timer: null,
-      kaList: [],
-      messageList: [],
-      barrageData: [],
-      barrageIndex: 0,
-      timeOut: null,
-      interval: null,
-      params: {
-        limit: 20,
-        page: 1,
-      },
-      total: null,
-      containerWidth: 0,
-      usedTops: [],
+      list: [],
+      type: 0,
+      couponList: [],
     }
   },
-  onLoad(query) {
-    if (query.inviteId) {
-      getApp().globalData.inviteId = query.inviteId
-    } else {
-      const scene = decodeURIComponent(query.scene)
-      let inviteId = scene.split('=')[1]
-      console.log(inviteId, 'inviteId')
-      getApp().globalData.inviteId = inviteId
-    }
-    console.log(this.$refs)
+  created() {
+    this.getList()
+    this.getCouponList()
   },
-  onShow() {
-    this.getMessage()
-    this.getHot()
-    this.interval = setInterval(() => {
-      console.log('重复获取消息')
-      this.barrageIndex = 0
-      this.getMessage()
-      // let num = this.params.page * this.params.limit
-      // if (this.total == null || this.total > num) {
-      // 	console.log('获取消息接口')
-      // 	// this.params.page += 1
-      // 	this.barrageIndex = 0
-      // 	this.getMessage()
-      // }
-    }, 60000)
-    setTimeout(() => {
-      this.launchBarrage()
-    }, 2000)
-  },
-  onHide() {
-    clearInterval(this.interval)
-    clearInterval(this.timer)
+  watch: {
+    type() {
+      this.getList()
+    },
   },
+
   methods: {
-    showQRcode() {
-      this.$refs.popup.open()
+    activity() {
+      wx.showToast({
+        title: '敬请期待',
+        icon: 'none',
+      })
     },
-    drawCard(value) {
-      let url = ''
-      if (value.type == 1) {
-        url = '/pages/drawCard_infinite/drawCard_infinite'
-      } else if (value.type == 2) {
-        url = '/pages/drawCard_last/drawCard_last'
-      } else if (value.type == 3) {
-        url = '/pages/drawCard_fullSet/drawCard_fullSet'
-      } else if (value.type == 4) {
-        url = '/pages/drawCard_box/drawCard_box'
-      } else if (value.type == 5) {
-        url = '/pages/drawCard_first/drawCard_first'
-      }
-      this.$navigateTo(url, {
-        id: value.id,
+    receive(item) {
+      if (item.status == 1) return
+      couponReceive({ couponId: item.id }).then(res => {
+        wx.showToast({
+          title: '领取成功',
+          icon: 'none',
+        })
+        this.getCouponList()
       })
     },
-    getHot() {
+    getCouponList() {
+      couponCenter().then(res => {
+        this.couponList = res.data
+      })
+    },
+    getList() {
       let params = {
         limit: 999,
         page: 1,
-        isHot: true,
+        type: this.type || '',
+        isHot: this.type == 0,
       }
       raffleListApi(params).then(res => {
-        this.kaList = res.data.list
-      })
-    },
-    getMessage() {
-      messageListApi(this.params).then(res => {
-        this.messageList = res.data.list
-        this.total = res.data.total
-        this.initBarrage()
-      })
-    },
-    launchBarrage() {
-      if (this.timer) {
-        clearInterval(this.timer)
-      }
-      this.timer = setInterval(() => {
-        this.barrageData.forEach((barrage, index) => {
-          if (!barrage.tag) {
-            barrage.tag = true
-            barrage.right = -400
-            barrage.top = this.randomTop()
-            barrage.style = `display: block; top: ${barrage.top}px; right: ${barrage.right}px;`
-          } else {
-            barrage.right = parseInt(barrage.right) + 2
-            barrage.style = `display: block; top: ${barrage.top}px; right: ${barrage.right}px;`
+        let list = res.data.list
+        for (var i = 0; i < list.length; i++) {
+          if (list[i].subType) {
+            list[i].subType = list[i].subType.split(',')
           }
-        })
-      }, 20)
-    },
-    // 初始化弹幕
-    initBarrage() {
-      // console.log(this.barrageIndex, 'this.barrageIndex')
-      if (this.messageList.length > 0) {
-        this.timeOut = setTimeout(() => {
-          let barrage = {
-            text: this.messageList[this.barrageIndex].content,
-          }
-          this.$set(barrage, 'right', -400)
-          this.$set(barrage, 'top', this.randomTop())
-          this.$set(barrage, 'tag', false)
-          this.barrageData.push(barrage)
-
-          this.barrageIndex += 1
-          clearTimeout(this.timeOut)
-          if (this.barrageIndex > this.messageList.length - 1) {
-            this.barrageIndex = 0
-          } else {
-            this.initBarrage()
-          }
-        }, 1000)
-      }
-    },
-    // 发送弹幕
-    sendingBarrage() {
-      let messageList = this.messageList
-    },
-    randomTop() {
-      // return Math.floor(Math.random() * 150)
-
-      // 往前5个不重复top值
-      let top = 0
-      this.usedTops.push(top)
-      do {
-        top = Math.floor(Math.random() * 6) * 30 // 生成0, 30, 60, 90, 120的随机值
-      } while (this.usedTops.slice(-4).includes(top))
-
-      this.usedTops.push(top)
-
-      return top
-    },
-
-    toInvite() {
-      wx.navigateTo({
-        url: '/pages/invite/invite',
+        }
+        this.list = list
       })
     },
   },
@@ -231,160 +197,99 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.barrage-container {
-  width: 100%;
-  height: 180px;
-  position: relative;
-  overflow: hidden;
-  background-color: rgba(0, 0, 0, 0.2);
-  /* 背景色，可根据需要调整 */
+.area {
+  width: 168px;
+  height: 88px;
 }
 
-.barrage-item {
-  color: #fff;
-  padding: 5px 10px;
-  font-size: 14px;
-  line-height: 30px;
-  position: absolute;
-  white-space: nowrap;
-  display: none;
-  border-radius: 15px;
-  background-color: rgba(0, 0, 0, 0.3);
+.c {
+  width: 82px;
+  height: 47px;
 }
 
-.container {
-  /* padding: 20px; */
-  font-size: 14px;
-  line-height: 24px;
+.center {
+  width: 38px;
+  height: 98px;
 }
 
-.headImg {
-  height: 180px;
-  width: 100%;
+.clicks {
+  height: 98px;
+  background-image: linear-gradient(to bottom, #ffaea6, #ff654c);
+
+  img {
+    height: 82px;
+    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;
+}
+
+.p {
+  position: fixed;
+  bottom: 120px;
+  right: 20px;
 
-.headBarrage {
-  height: 180px;
-  width: 100%;
-  position: absolute;
-  top: 0;
+  img {
+    width: 50px;
+    height: 50px;
+  }
 }
 
 .tabs {
   display: flex;
   justify-content: space-around;
-  margin-top: 10px;
 
-  > .tab {
-    width: 20%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+  .tab {
+    font-size: 16px;
+    font-weight: 400;
+    color: #fff;
+    padding: 10px 0;
 
-    > image {
-      width: 40px;
-      height: 40px;
+    &.active {
+      font-weight: 600;
+      border-bottom: 2px solid #fc5b20;
+      color: #fc5b20;
     }
   }
 }
 
-.buttons {
-  margin-top: 5px;
-  padding: 10px;
+.cards {
+  margin-top: 20px;
   display: flex;
   justify-content: space-between;
-
-  > .left {
-    width: calc(50vw - 15px);
-    height: 40vw;
-
-    image {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  > .right {
-    width: calc(50vw - 15px);
-    height: 40vw;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-
-    image {
-      width: 100%;
-      height: calc(50% - 5px);
-    }
-  }
-}
-
-.list-title {
-  font-size: 16px;
-  font-weight: 600;
-  text-align: center;
-  padding: 10px;
-}
-
-.list {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 10px;
-  padding: 10px;
-
-  .ka {
-    width: calc(50vw - 15px);
-    box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.1);
+  padding: 0 20rpx;
+  flex-wrap: wrap;
+
+  .card {
+    box-sizing: border-box;
+    width: 344rpx;
+    // height: 500rpx;
+    background: #fff;
     border-radius: 10px;
-    // height: 60vw;
-
-    .top {
-      // height: 60vw;
-      background: linear-gradient(180deg, #faf1a7 0%, #ffe456 100%);
-      text-align: center;
-      display: flex;
-      justify-content: center;
-
-      image {
-        width: 35vw;
-        height: 50vw;
-      }
-    }
-
-    .ka-info {
-      padding: 10px;
-
-      .ka-name {
-        font-size: 15px;
-        font-weight: 600;
-      }
-
-      .row {
-        margin-top: 5px;
-        display: flex;
-        justify-content: space-between;
-
-        .money {
-          font-size: 16px;
-          font-weight: 600;
-          color: #ff2c43;
-        }
-      }
+    margin-bottom: 20rpx;
+    padding: 20rpx;
+    padding-bottom: 12rpx;
+
+    img {
+      width: 308rpx;
+      height: 308rpx;
+      border-radius: 8px;
     }
   }
 }
-
-.bullet {
-  height: 30px;
-  line-height: 30px;
-  padding: 0 10px;
-  border-radius: 15px;
-  background-color: rgba(0, 0, 0, 0.3);
-  color: #fff;
-}
-.qrcodeImg {
-  width: 70vw;
-  border-radius: 5px;
-}
 </style>

pages/mine/mine.vue

@@ -1,79 +1,199 @@
 <template>
-  <view class="container">
-    <view class="user">
-      <view class="userInfo">
-        <image @click="toUserInfo" class="userPhoto" :src="userInfo.avatar"></image>
-        <uni-badge class="message" :text="massageNum" absolute="rightTop" size="small" :max-num="99" :offset="[4, 4]">
-          <image
-            class="icon"
-            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/massage.png'"
-            mode="widthFix"
-            @click="$navigateTo('/pages/message/message')"
-          ></image>
-        </uni-badge>
-        <view class="info">
-          <view class="name" v-if="hasLogin">
-            {{ userInfo.nickname || '' }}
-          </view>
-          <view class="loginText" @click="toLogin" v-else>点击登录</view>
-          <view class="id">
-            ID:
-            <span v-if="hasLogin">{{ userId || '' }}</span>
-            <image
-              class="copy"
-              :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/copy.png'"
-              mode="widthFix"
-            ></image>
-          </view>
-          <view class="name vip" @click="$navigateTo('/pages/vip/vip')">VIP0</view>
-        </view>
-      </view>
-      <view class="row">
-        <view class="box" @click="$navigateTo('/pages/integralRecord/integralRecord')">
-          <view class="value" style="color: #ff2c43">
-            {{ userInfoDetail.integral || 0 }}
-          </view>
-          <view class="label">积分</view>
-        </view>
-        <view class="box" @click="$navigateTo('/pages/coupon/coupon')">
-          <view class="value">
-            {{ userInfoDetail.couponNum || 0 }}
-          </view>
-          <view class="label">优惠券</view>
-        </view>
-      </view>
-    </view>
-    <view class="menus">
-      <view class="title">
-        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/title.png'" mode=""></image>
-      </view>
-      <view class="menuList">
-        <view class="menu" @click="pageTo('/pages/addressManage/addressManage')">
-          <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/menu1.png'"></image>
+  <view style="overflow: scroll; background-color: #232428">
+    <img
+      src="https://file.rongcyl.cn/festatic/bkm/mine/mine_bgt.png"
+      style="width: 100%; height: 658rpx; position: absolute; z-index: 99"
+    />
+    <div style="width: 100%; height: 658rpx; z-index: 100; position: relative">
+      <div
+        :style="{
+          color: '#fff',
+          'margin-top': menuButton.top + 'px',
+          'line-height': menuButton.height + 'px',
+          textAlign: 'center',
+        }"
+      >
+        我的
+      </div>
+      <div class="flex pt-3 px-5">
+        <img @click="toUserInfo" style="width: 116rpx; height: 116rpx" :src="userInfo.avatar" class="rounded-full" />
+        <div style="color: #bbbcc3" class="ml-3" v-if="hasLogin">
+          <div>
+            <span>{{ userInfo.nickname || '' }}</span>
+            <span style="color: #9e9e9e" class="fs12 ml-4">ID:{{ userId || '' }}</span>
+          </div>
+          <div class="relative inline-block" style="width: 100rpx; height: 60rpx">
+            <img src="https://file.rongcyl.cn/festatic/bkm/mine/vip2.png" style="width: 100rpx; height: 60rpx" />
+            <div
+              class="absolute fs13"
+              style="top: 0; height: 60rpx; right: 15rpx; color: #713b08; z-index: 999; line-height: 60rpx"
+            >
+              1
+            </div>
+          </div>
+        </div>
+
+        <div class="text-white" @click="toLogin" v-else>点击登录</div>
+      </div>
+      <div class="flex justify-around text-white mt-4 items-center text-center">
+        <div class="">
+          <div class="fs16 bold">{{ 999 }}</div>
+          <div class="fs14">积分</div>
+        </div>
+        <div class="">
+          <div class="fs16 bold">{{ 999 }}</div>
+          <div class="fs14">优惠券</div>
+        </div>
+      </div>
+      <img
+        src="https://file.rongcyl.cn/festatic/bkm/mine/vip.png"
+        style="width: 152rpx; height: 170rpx; position: absolute"
+        :style="{ top: vipTop, right: '15rpx' }"
+      />
+    </div>
+    <div
+      style="
+        margin-top: -320rpx;
+        height: calc(100vh - 358rpx);
+        width: 100vw;
+        position: relative;
+        z-index: 100;
+        background: url(https://file.rongcyl.cn/festatic/bkm/mine/mine_bg.png) no-repeat;
+        background-size: cover;
+        color: #bbbcc3;
+        padding: 0 30rpx;
+        box-sizing: border-box;
+        padding-top: 100rpx;
+      "
+    >
+      <div class="flex justify-between items-center">
+        <div class="fs14">我的订单</div>
+        <div class="flex items-center">
+          <span class="fs12">查看全部</span>
+          <img
+            class="ml-2 inline-block"
+            src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
+            style="width: 28rpx; height: 28rpx"
+          />
+        </div>
+      </div>
+      <div class="flex justify-around my-5 fs12 text-center">
+        <div>
+          <img src="https://file.rongcyl.cn/festatic/bkm/mine/t1.png" style="width: 100rpx; height: 100rpx" />
+          <div class="mt-1">待发货</div>
+        </div>
+        <div>
+          <img src="https://file.rongcyl.cn/festatic/bkm/mine/t2.png" style="width: 100rpx; height: 100rpx" />
+          <div class="mt-1">待收货</div>
+        </div>
+        <div>
+          <img src="https://file.rongcyl.cn/festatic/bkm/mine/t3.png" style="width: 100rpx; height: 100rpx" />
+          <div class="mt-1">已完成</div>
+        </div>
+        <div>
+          <img src="https://file.rongcyl.cn/festatic/bkm/mine/t4.png" style="width: 100rpx; height: 100rpx" />
+          <div class="mt-1">消费记录</div>
+        </div>
+      </div>
+      <div class="flex justify-between fs14 items-center border-t border-zinc-600" style="height: 92rpx">
+        <div class="flex items-center">
+          <img
+            src="https://file.rongcyl.cn/festatic/bkm/mine/s1.png"
+            class="inline-block mr-2"
+            style="width: 32rpx; height: 32rpx"
+          />
+          <span>常见问题</span>
+        </div>
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
+          style="width: 28rpx; height: 28rpx; display: inline-block"
+        />
+      </div>
+      <div class="flex justify-between fs14 items-center border-t border-zinc-600" style="height: 92rpx">
+        <div class="flex items-center">
+          <img
+            src="https://file.rongcyl.cn/festatic/bkm/mine/s2.png"
+            class="inline-block mr-2"
+            style="width: 32rpx; height: 32rpx"
+          />
+          <span>意见反馈</span>
+        </div>
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
+          style="width: 28rpx; height: 28rpx; display: inline-block"
+        />
+      </div>
+      <div class="flex justify-between fs14 items-center border-t border-zinc-600" style="height: 92rpx">
+        <div class="flex items-center">
+          <img
+            src="https://file.rongcyl.cn/festatic/bkm/mine/s3.png"
+            class="inline-block mr-2"
+            style="width: 32rpx; height: 32rpx"
+          />
+          <span>加入群组</span>
+        </div>
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
+          style="width: 28rpx; height: 28rpx; display: inline-block"
+        />
+      </div>
+      <div class="flex justify-between fs14 items-center border-t border-zinc-600" style="height: 92rpx">
+        <div class="flex items-center">
+          <img
+            src="https://file.rongcyl.cn/festatic/bkm/mine/s4.png"
+            class="inline-block mr-2"
+            style="width: 32rpx; height: 32rpx"
+          />
+          <span>联系客服</span>
+        </div>
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
+          style="width: 28rpx; height: 28rpx; display: inline-block"
+        />
+      </div>
+      <div class="flex justify-between fs14 items-center border-t border-zinc-600" style="height: 92rpx">
+        <div class="flex items-center">
+          <img
+            src="https://file.rongcyl.cn/festatic/bkm/mine/s5.png"
+            class="inline-block mr-2"
+            style="width: 32rpx; height: 32rpx"
+          />
           <span>地址管理</span>
-        </view>
-        <view class="menu" @click="pageTo('/pages/consumptionRecords/consumptionRecords')">
-          <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/menu2.png'"></image>
-          <span>消费记录</span>
-        </view>
-        <view class="menu" @click="showQRcode">
-          <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/menu3.png'"></image>
-          <span>加群交流</span>
-        </view>
-        <view class="menu" @click="$navigateTo('/pages/rule/rule', { type: 0 })">
-          <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/menu4.png'"></image>
+        </div>
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
+          style="width: 28rpx; height: 28rpx; display: inline-block"
+        />
+      </div>
+      <div class="flex justify-between fs14 items-center border-t border-zinc-600" style="height: 92rpx">
+        <div class="flex items-center">
+          <img
+            src="https://file.rongcyl.cn/festatic/bkm/mine/s6.png"
+            class="inline-block mr-2"
+            style="width: 32rpx; height: 32rpx"
+          />
           <span>游戏规则</span>
-        </view>
-        <view class="menu" @click="$navigateTo('/pages/userAgreement/userAgreement')">
-          <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/menu5.png'"></image>
+        </div>
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
+          style="width: 28rpx; height: 28rpx; display: inline-block"
+        />
+      </div>
+      <div class="flex justify-between fs14 items-center border-t border-b border-zinc-600" style="height: 92rpx">
+        <div class="flex items-center">
+          <img
+            src="https://file.rongcyl.cn/festatic/bkm/mine/s7.png"
+            class="inline-block mr-2"
+            style="width: 32rpx; height: 32rpx"
+          />
           <span>用户协议</span>
-        </view>
-        <button class="menu btn" open-type="contact">
-          <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/mine/menu6.png'"></image>
-          <span>联系客服</span>
-        </button>
-      </view>
-    </view>
+        </div>
+        <img
+          src="https://file.rongcyl.cn/festatic/bkm/arrow.png"
+          style="width: 28rpx; height: 28rpx; display: inline-block"
+        />
+      </div>
+    </div>
     <uni-popup class="popup" ref="popup" type="center">
       <image
         class="qrcodeImg"
@@ -97,8 +217,29 @@ export default {
       hasLogin: false,
       userInfoDetail: {},
       massageNum: 0,
+      safeAreaTop: 0,
+      menuButton: {
+        top: 0,
+        height: 0,
+      },
     }
   },
+  created() {
+    const { top, height } = wx.getMenuButtonBoundingClientRect()
+    this.menuButton.top = top
+    this.menuButton.height = height
+    wx.getSystemInfo({
+      success: res => {
+        console.log(res.safeArea)
+        this.safeAreaTop = res.safeArea.top + 'px'
+      },
+    })
+  },
+  computed: {
+    vipTop() {
+      return this.menuButton.height + 15 + 'px'
+    },
+  },
   onShow() {
     // this.userInfo = wx.getStorageSync('userInfo');
     this.userId = wx.getStorageSync('userId')
@@ -164,131 +305,7 @@ export default {
     border: none;
   }
 }
-.container {
-  background: #9ec8f9;
-  padding: 0 10px;
-  overflow: scroll;
-}
-
-.user {
-  background: #fff;
-  border-radius: 10px;
-  padding: 0 10px;
-  position: relative;
-  margin-top: 10vw;
-
-  .userInfo {
-    display: flex;
-
-    .message {
-      position: absolute;
-      right: 10px;
-      top: 8px;
-      .icon {
-        width: 30px;
-      }
-    }
-    .userPhoto {
-      width: 74px;
-      height: 74px;
-      border-radius: 50%;
-      border: solid 3px #6bafff;
-      position: relative;
-      top: -20px;
-      background: #dedede;
-    }
-
-    .info {
-      padding: 10px;
-
-      .name {
-        font-weight: 600;
-      }
-
-      .loginText {
-        font-weight: 600;
-      }
-
-      .id {
-        margin-top: 5px;
-        font-size: 13px;
-        display: flex;
-        align-items: center;
-
-        .copy {
-          width: 14px;
-          margin-left: 5px;
-        }
-      }
-    }
-  }
-
-  .row {
-    display: flex;
-    justify-content: space-around;
-
-    .box {
-      display: flex;
-      flex-direction: column;
-      text-align: center;
-      padding: 20px 10px;
-
-      .label {
-        margin-top: 5px;
-        font-size: 15px;
-      }
-
-      .value {
-        font-size: 20px;
-        font-weight: 600;
-      }
-    }
-  }
-}
-
-.menus {
-  margin-top: 20px;
-  background: #fff;
-  border-radius: 10px;
-
-  // padding: 0 10px;
-  .title {
-    position: relative;
-    left: -10px;
-    top: -10px;
-    width: calc(100% + 10px);
-    height: 55px;
 
-    image {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .menuList {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    padding: 20px 20px 0 20px;
-
-    .menu {
-      margin-bottom: 30px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-
-      image {
-        width: 36px;
-        height: 36px;
-      }
-
-      span {
-        margin-top: 10px;
-        font-size: 14px;
-      }
-    }
-  }
-}
 .qrcodeImg {
   width: 70vw;
   border-radius: 5px;

pages/task/index.vue

@@ -44,19 +44,19 @@
                 class="fs11 bold"
                 :class="{ 'text-red-400': i >= todayIndex || day.status, 'text-gray-400': i < todayIndex }"
               >
-                +1
+                +{{ day.integral }}
               </span>
             </div>
           </div>
         </div>
         <div class="flex justify-between px-3 mt-2">
           <div v-for="day in signList">
-            <span v-if="day.status" class="fs12 text-green-500">已签到</span>
-            <span v-else="day.status" class="fs12 text-grey-500">未签到</span>
+            <span v-if="day.status == 1" class="fs12 text-green-500">已签到</span>
+            <span v-if="day.status != 1" class="fs12 text-grey-500">未签到</span>
           </div>
         </div>
         <div class="signInButton" @click="sign()">
-          {{ signList[todayIndex].status ? '今日已签到' : '立即签到' }}
+          {{ signList[todayIndex].status == 1 ? '今日已签到' : '立即签到' }}
         </div>
       </div>
       <div class="card rounded-md shadow-sm mx-auto mt-4 py-2">
@@ -170,11 +170,9 @@ export default {
         this.posTodayIndex()
       })
     },
-    sign(i) {
-      // console.log(this.signList[i].status)
-      // if (i == this.todayIndex && !this.signList[i].status) {
-      // }
-      if (!this.signList[this.todayIndex].status) {
+    sign() {
+      if ([0, 1].includes(this.signList[this.todayIndex].status)) return
+      if (this.signList[this.todayIndex].status == 2) {
         signToday().then(this.getList)
         wx.showToast({
           title: '签到成功',