feat:增加红包列表页面

package.json

@@ -1,19 +0,0 @@
-{
-    "id": "w-select",
-    "name": "下拉选择器，选择框，支持单选、多选、筛选和清空功能，支持vue2和vue3",
-    "displayName": "下拉选择器，选择框，支持单选、多选、筛选和清空功能，支持vue2和vue3",
-    "version": "1.2.3",
-    "description": "用于下拉选择，使用v-model双向绑定值",
-    "keywords": [
-        "下拉选择框",
-        "单选框",
-        "vue2",
-        "vue3"
-    ],
-    "dcloudext": {
-        "category": [
-            "前端组件",
-            "通用组件"
-        ]
-    }
-}

pages.json

@@ -175,7 +175,7 @@
       }
     },
     {
-      "path": "pages/redPacket/index",
+      "path": "pages/redpacket/index",
       "style": {
         "navigationBarTitleText": "领取红包"
       }
@@ -197,6 +197,12 @@
       "style": {
         "navigationBarTitleText": "余额详情"
       }
+    },
+    {
+      "path": "pages/redpacket/list",
+      "style": {
+        "navigationBarTitleText": "红包列表"
+      }
     }
   ],
   "globalStyle": {

pages/index/index.vue

@@ -138,17 +138,17 @@ export default {
 
     //如果已选城市且没有添加客服每天弹窗一次
     if (this.$checkAccess.getCity() && this.$checkAccess.getFollowQrcode()) {
-		// 获取弹出时间
-		let followPopupTime		= uni.getStorageSync('followPopupTime');
-		// 现在的时候
-		let nowTime				= new Date().getTime();
-		// 时间戳
-		followPopupTime			= followPopupTime ? followPopupTime : 0;
-		// 弹出结果
-		if( followPopupTime <= 0 || followPopupTime - nowTime  > 86400000 ) {
-			this.$refs.addFollow.open("center");
-			uni.setStorageSync('followPopupTime',nowTime);
-		}
+      // 获取弹出时间
+      let followPopupTime = uni.getStorageSync("followPopupTime");
+      // 现在的时候
+      let nowTime = new Date().getTime();
+      // 时间戳
+      followPopupTime = followPopupTime ? followPopupTime : 0;
+      // 弹出结果
+      if (followPopupTime <= 0 || followPopupTime - nowTime > 86400000) {
+        this.$refs.addFollow.open("center");
+        uni.setStorageSync("followPopupTime", nowTime);
+      }
     }
     this.isManager = this.$checkAccess.isManager();
     // 没有数据的话，或者请求中，不允许刷新

pages/redPacket/index.vue

@@ -2,8 +2,8 @@
   <view class="red_packet" catchtouchmove="true">
     <image src="../../static/icon/red_packet_background.jpg" class="read_packet_background" />
     <view class="rule" @click="showRule">活动规则</view>
-    <view class="get_content">
-      <view class="custom_button"> 立即领取 </view>
+    <view class="get_content" v-if="!showReward">
+      <view class="custom_button" @click="showRectangle"> 立即领取 </view>
       <text>点击领取后，红包将自动到账余额</text>
     </view>
     <uni-popup ref="lotteryRule" type="center">
@@ -17,6 +17,13 @@
         </scroll-view>
       </view>
     </uni-popup>
+    <div :class="['rectangle', { show: showReward }]">
+      <image src="../../static/icon/red_packet_bottom.png" class="read_packet_background" />
+      <view class="text_content">
+        <view> <text style="font-size: 50rpx; font-weight: bold">8.88 </text>元 </view>
+        <view style="margin-top: 20rpx; color: #02a7f0" @click="_goWithdraw">已存入余额，去提现</view>
+      </view>
+    </div>
   </view>
 </template>
 
@@ -24,6 +31,7 @@
 import { ref } from "vue";
 
 const lotteryRule = ref();
+const showReward = ref(false);
 
 const closeRule = () => {
   lotteryRule.value.close();
@@ -32,6 +40,16 @@ const closeRule = () => {
 const showRule = () => {
   lotteryRule.value.open("center");
 };
+
+const showRectangle = () => {
+  showReward.value = true;
+};
+
+const _goWithdraw = () => {
+  uni.redirectTo({
+    url: "/pages/user/withdraw",
+  });
+};
 </script>
 
 <style lang="less" scoped>
@@ -143,5 +161,23 @@ const showRule = () => {
       }
     }
   }
+  .rectangle {
+    width: 100%;
+    height: 250px;
+    position: absolute;
+    bottom: -250px; /* 初始位置在视图之外 */
+    left: 0;
+    transition: bottom 1s ease; /* 添加过渡效果 */
+    &.show {
+      bottom: 0; /* 目标位置 */
+    }
+    .text_content {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -35%);
+      text-align: center;
+    }
+  }
 }
 </style>

pages/redPacket/list.vue

@@ -0,0 +1,108 @@
+<template>
+  <view class="red_packet_list">
+    <view v-for="(packet, index) in redpackets" :key="packet.id" class="red_packet_item" :class="{ disabled: index == 0 }" @click="handleClick(packet)">
+      <img src="../../static/icon/packet_list_backerground.png" alt="" class="redpacket_background" />
+      <view class="packet_header">
+        <view class="packet_image">福</view>
+        <view class="packet_info">
+          <h3 class="packet_title">{{ packet.title }}</h3>
+          <p class="packet_date">{{ packet.date }}</p>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const redpackets = ref([
+  { id: 1, title: "新年红包", date: "2023-01-01", amount: 88.88, image: "path/to/image1.jpg" },
+  { id: 2, title: "生日红包", date: "2023-02-14", amount: 66.66, image: "path/to/image2.jpg" },
+  { id: 3, title: "节日红包", date: "2023-03-08", amount: 99.99, image: "path/to/image3.jpg" },
+]);
+
+const handleClick = (packet) => {
+  uni.navigateTo({
+    url: "/pages/redpacket/index",
+  });
+};
+</script>
+
+<style lang="less" scoped>
+.red_packet_list {
+  display: flex;
+  flex-direction: column;
+  gap: 20rpx;
+  padding: 40rpx;
+}
+
+.red_packet_item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #c30a0a;
+  border-radius: 20rpx;
+  padding: 20rpx;
+  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  position: relative;
+  height: 140rpx;
+  overflow: hidden;
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.3;
+  }
+  .redpacket_background {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 120px;
+    z-index: 1;
+  }
+
+  .packet_header {
+    display: flex;
+    align-items: center;
+    z-index: 10;
+    .packet_image {
+      width: 100rpx;
+      height: 100rpx;
+      border-radius: 50%;
+      margin-right: 20rpx;
+      background-color: #fede9f;
+      color: #af3636;
+      font-size: 48rpx;
+      font-weight: bold;
+      text-align: center;
+      line-height: 100rpx;
+    }
+
+    .packet_info {
+      display: flex;
+      flex-direction: column;
+
+      .packet_title {
+        font-size: 32rpx;
+        font-weight: bold;
+        margin: 0;
+        color: #fff;
+      }
+
+      .packet_date {
+        font-size: 24rpx;
+        color: #fff;
+        margin: 0;
+        margin-top: 10rpx;
+      }
+    }
+  }
+
+  .packet_amount {
+    font-size: 36rpx;
+    font-weight: bold;
+    color: #e74c3c;
+  }
+}
+</style>

pages/user/index.vue

@@ -51,7 +51,7 @@
     <view class="alter_info">本程序暂不提供在线交易以及支付功能，您所提交的预约，我们将验证您的购药资质并交由有售卖药品资质的商业公司与您联系确认并提供线下后续服务。</view>
     <view class="packet_content">
       <view class="close_btn" @click="closeRule"> X </view>
-      <image src="../../static/icon/red_packet.gif" class="red_packet" @click="_getRedPacket" />
+      <image src="../../static/icon/red_packet.gif" class="red_packet" @click="_getredpacket" />
     </view>
   </view>
 </template>
@@ -128,9 +128,9 @@ export default {
     });
   },
   methods: {
-    _getRedPacket() {
+    _getredpacket() {
       uni.navigateTo({
-        url: "/pages/redPacket/index",
+        url: "/pages/redpacket/list",
       });
     },
     _goWithdraw() {

pages/user/withdraw.vue

@@ -16,16 +16,17 @@
 </template>
 
 <script setup>
-import { ref, watch, getCurrentInstance, onMounted } from "vue";
-
-const { appContext } = getCurrentInstance();
+import { ref, watch, onMounted } from "vue";
+import http from "@/utils/request";
 
 const withdrawAmount = ref(0);
 const maxWithdrawAmount = ref(134.14);
 const isDisabled = ref(true);
 
 onMounted(() => {
-  console.log(appContext.config.globalProperties.$http);
+  http.request("api/custom/get_info").then((res) => {
+    console.log(res);
+  });
 });
 
 const _valiteMoney = (e) => {

utils/common.js

@@ -0,0 +1,8 @@
+// 防抖函数
+export function debounce(func, wait) {
+  let timeout;
+  return function (...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(this, args), wait);
+  };
+}