feat:发红包前端页面

pages/redPacket/index.vue

@@ -1,15 +1,38 @@
 <template>
   <view class="red_packet" catchtouchmove="true">
     <image src="../../static/icon/red_packet_background.jpg" class="read_packet_background" />
-    <view class="rule">活动规则</view>
+    <view class="rule" @click="showRule">活动规则</view>
     <view class="get_content">
       <view class="custom_button"> 立即领取 </view>
       <text>点击领取后，红包将自动到账余额</text>
     </view>
+    <uni-popup ref="lotteryRule" type="center">
+      <view class="lottery_rule_box">
+        <view class="lottery_rule_title">
+          <text>活动规则</text>
+          <view class="close_btn" @click="closeRule"> X </view>
+        </view>
+        <scroll-view class="lottery_rule_info" scroll-y="true">
+          <rich-text nodes="lotteryInfo.rule" class="rich_text"></rich-text>
+        </scroll-view>
+      </view>
+    </uni-popup>
   </view>
 </template>
 
-<script></script>
+<script setup>
+import { ref } from "vue";
+
+const lotteryRule = ref();
+
+const closeRule = () => {
+  lotteryRule.value.close();
+};
+
+const showRule = () => {
+  lotteryRule.value.open("center");
+};
+</script>
 
 <style lang="less" scoped>
 .red_packet {
@@ -58,27 +81,67 @@
     border: 2px solid transparent;
     text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
     position: relative;
+    &:before,
+    &:after {
+      content: "";
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      background-color: #fbe6a0;
+      border: 2px solid #fbe6a0;
+      border-radius: 10rpx;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    &:before {
+      left: -6px;
+    }
+    &:after {
+      right: -6px;
+    }
   }
 
-  .custom_button:before,
-  .custom_button:after {
-    content: "";
-    position: absolute;
-    width: 24px;
-    height: 24px;
-    background-color: #fbe6a0;
-    border: 2px solid #fbe6a0;
+  .lottery_rule_box {
+    width: 500rpx;
+    display: block;
+    overflow: hidden;
+    background-color: #fc335f;
+    font-size: 26rpx;
+    margin: 0 auto;
+    line-height: 50rpx;
     border-radius: 10rpx;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  .custom_button:before {
-    left: -6px;
-  }
-
-  .custom_button:after {
-    right: -6px;
+    padding: 20rpx 25rpx 20rpx;
+    .lottery_rule_title {
+      color: #ffffff;
+      height: 60rpx;
+      font-size: 32rpx;
+      line-height: 60rpx;
+      text-align: center;
+      margin-bottom: 10rpx;
+      .close_btn {
+        float: right;
+        width: 40rpx;
+        height: 40rpx;
+        font-size: 24rpx;
+        margin-top: 9rpx;
+        line-height: 40rpx;
+        border-radius: 50%;
+        border: 1rpx solid #ffffff;
+      }
+    }
+    .lottery_rule_info {
+      display: block;
+      height: 500rpx;
+      font-size: 24rpx;
+      line-height: 40rpx;
+      border-radius: 10rpx;
+      padding: 20rpx;
+      box-sizing: border-box;
+      background-color: #ffffff;
+      .rich_text {
+        white-space: break-spaces;
+      }
+    }
   }
 }
 </style>

pages/user/index.vue

@@ -49,7 +49,10 @@
       </navigator>
     </view>
     <view class="alter_info">本程序暂不提供在线交易以及支付功能，您所提交的预约，我们将验证您的购药资质并交由有售卖药品资质的商业公司与您联系确认并提供线下后续服务。</view>
-    <image src="../../static/icon/red_packet.gif" class="red_packet" @click="_getRedPacket" />
+    <view class="packet_content">
+      <view class="close_btn" @click="closeRule"> X </view>
+      <image src="../../static/icon/red_packet.gif" class="red_packet" @click="_getRedPacket" />
+    </view>
   </view>
 </template>
 
@@ -281,11 +284,29 @@ export default {
     padding-top: 18rpx;
   }
 }
-.red_packet {
+.packet_content {
   position: absolute;
   right: 0;
   bottom: 15%;
   width: 160rpx;
   height: 160rpx;
+  .red_packet {
+    width: 100%;
+    height: 100%;
+  }
+  .close_btn {
+    width: 40rpx;
+    height: 40rpx;
+    font-size: 24rpx;
+    line-height: 40rpx;
+    border-radius: 50%;
+    border: 1rpx solid #ddd;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 5rpx;
+    left: 0;
+  }
 }
 </style>

pages/user/withdraw.vue

@@ -16,12 +16,18 @@
 </template>
 
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch, getCurrentInstance, onMounted } from "vue";
+
+const { appContext } = getCurrentInstance();
 
 const withdrawAmount = ref(0);
 const maxWithdrawAmount = ref(134.14);
 const isDisabled = ref(true);
 
+onMounted(() => {
+  console.log(appContext.config.globalProperties.$http);
+});
+
 const _valiteMoney = (e) => {
   if (!isNaN(e.target.value)) {
     if (maxWithdrawAmount.value < e.target.value) {