绿满眶商城微信小程序-uniapp
507deefd69a980e4d0d0c2e8da0dacad800951f7..b1fd37e9f5ba5d3d7e35300ee97dff90a4065619
2025-10-27 zxl
我的页面
b1fd37 对比 | 目录
2025-10-27 peng
页面优化
aeff34 对比 | 目录
2025-10-27 peng
Merge remote-tracking branch 'origin/user_action' into user_action
287d63 对比 | 目录
2025-10-27 peng
页面优化
30ad7e 对比 | 目录
2025-10-27 zxl
主页页面,活动弹窗,图片适配
7ae4e2 对比 | 目录
11个文件已修改
291 ■■■■ 已修改文件
pages.json 17 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
pages/ActivityPopup/ActivityPopup.vue 19 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
pages/cusbar/cart/cartList.vue 5 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
pages/mine/deposit/index.vue 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
pages/mine/deposit/operation.vue 4 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
pages/passport/wechatMPLogin.vue 4 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
pages/prize/PrizeDetail/PrizeDetail.vue 2 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
pages/storeClaim/storePrizeClaim.vue 32 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
pages/tabbar/index/home.vue 163 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
pages/tabbar/user/my.vue 34 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
utils/storage.js 9 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
pages.json
@@ -1212,7 +1212,11 @@
        {
          "path": "home-page",
          "style": {
            "navigationBarTitleText": "TA的主页"
            "navigationBarTitleText": "TA的主页",
            "componentPlaceholder": {
                "u-icon": "view",
                "u-loadmore": "view"
            }
          }
        },
        {
@@ -1230,7 +1234,16 @@
        {
          "path": "video-edit",
          "style": {
            "navigationBarTitleText": "视频编辑"
            "navigationBarTitleText": "视频编辑",
            "componentPlaceholder": {
              "u-popup": "view",
              "u-button": "view",
              "u-icon": "view",
              "u-form": "view",
              "u-form-item": "view",
              "u-input": "view",
              "u-search": "view"
            }
          }
        },
        {
pages/ActivityPopup/ActivityPopup.vue
@@ -76,6 +76,7 @@
<script>
import {getPopupAcitivty,hideActivityPopupToday} from '@/api/popup.js'
import storage from "../../utils/storage";
export default {
  name: 'ActivityPopup',
  props: {
@@ -140,7 +141,7 @@
  },
  watch: {
    show(newVal) {
        console.log("弹窗监听变化",newVal)
          console.log("弹窗监听变化",newVal)
      if (newVal) {
        // 弹窗显示时重新获取容器宽度并计算图片尺寸
        this.$nextTick(() => {
@@ -275,16 +276,16 @@
    // 关闭弹窗
    onClose() {
      console.log("点击关闭按钮")
      this.hideActivityPopupToday();
      // this.hideActivityPopupToday();
      this.$emit('close');
    },
    hideActivityPopupToday(){
      //弹窗关闭
      console.log("修改今日不显示弹窗")
      hideActivityPopupToday().then(res =>{
      })
    },
    // hideActivityPopupToday(){
    //   //弹窗关闭
    //   console.log("修改今日不显示弹窗")
    //   hideActivityPopupToday().then(res =>{
    //
    //   })
    // },
    // 点击遮罩层关闭
    onMaskClick() {
      console.log("点击遮罩层关闭")
pages/cusbar/cart/cartList.vue
@@ -35,7 +35,7 @@
            }}</span>
            <u-icon @click="navigateToStore(item)"  size="24" style="margin-left:10rpx;"  name="arrow-right"></u-icon>
          </view>
          <view class="right-col" v-if="item.canReceiveCoupon" @click="navigateToCoupon(item)">
          <view class="right-col" v-if="item.canReceiveCoupon.length>0" @click="navigateToCoupon(item)">
            <div class="right-line"></div>
            <span>领劵</span>
          </view>
@@ -52,7 +52,8 @@
              </div>
            </div>
          </div>
          <view class="goods-row" :class="{ invalid: isInvalid(skuItem) }">
          <!-- <view class="goods-row" :class="{ invalid: isInvalid(skuItem) }"> -->
              <view class="goods-row" >
            <view class="goods-config">
              <view>
                <u-checkbox-group v-if="skuItem.invalid == 0 && !skuItem.errorMessage">
pages/mine/deposit/index.vue
@@ -4,7 +4,7 @@
    </u-navbar> -->
    <view class="wrapper-show-money">
      <view class="money-view">
        <h3>预存款金额 </h3>
        <h3>余额 </h3>
        <view class="money">¥{{walletNum | unitPrice }}</view>
      </view>
pages/mine/deposit/operation.vue
@@ -2,7 +2,7 @@
  <div class="wrapper">
    <!-- <u-navbar :custom-back="back" title="余额"></u-navbar> -->
    <div class="box">
      <div class="deposit">预存款金额</div>
      <div class="deposit">余额</div>
      <div class="money">¥{{walletNum | unitPrice }}</div>
      <div class="operation-btns">
          <!-- 移除提现按钮 -->
@@ -11,7 +11,7 @@
      </div>
    </div>
    <div class="box list" @click="navigateTo('/pages/mine/deposit/index')">
      <div class="list-left">预存款明细</div>
      <div class="list-left">余额明细</div>
      <div class="list-right">
        <!-- <u-icon name="arrow-right"></u-icon> -->
        <uni-icons type="right" size="24"></uni-icons>
pages/passport/wechatMPLogin.vue
@@ -95,7 +95,9 @@
            uni.showShareMenu({
                withShareTicket: true
            });
      //设置登录弹窗为开启
      storage.setPopupShow(true);
      console.log(storage.getPopupShow())
      //获取code
      uni.login({
pages/prize/PrizeDetail/PrizeDetail.vue
@@ -77,7 +77,7 @@
                </view>
                <view class="modal-buttons" v-if="currentPrize.id !== 'notWIn'">
                    <button class="confirm-btn" @tap="useItNow">去购物</button>
                    <button class="confirm-btn" @tap="useItNow">去兑换</button>
                </view>
                <view class="modal-buttons" v-else>
                    <button class="confirm-btn" @tap="closePrizeModal">确定</button>
pages/storeClaim/storePrizeClaim.vue
@@ -18,15 +18,17 @@
                <view slot="body" class="card-body">
                    <!-- 封面图片 -->
                    <view class="cover-image" v-if="prizeInfo.activityCover">
                        <u-image
                            :src="prizeInfo.activityCover"
                            width="100%"
                            height="300rpx"
                            mode="aspectFill"
                            border-radius="10"
                            :fade="true"
                            duration="450"
                        ></u-image>
            <view class="image-wrapper">
              <u-image
                  :src="prizeInfo.activityCover"
                  width="100%"
                  height="300rpx"
                  mode="aspectFit"
                  border-radius="10"
                  :fade="true"
                  duration="450"
              ></u-image>
            </view>
                    </view>
                    
                    <view class="prize-title">
@@ -273,6 +275,18 @@
</script>
<style lang="scss" scoped>
.image-wrapper {
  // 1. 限制溢出,确保aspectFill模式下图片不超出容器
  overflow: hidden;
  // 2. 把圆角放在容器上,避免组件样式冲突
  border-radius: 10rpx; // 注意单位:原代码写10,需补rpx(否则在小程序中无效)
  // 3. 确保容器和图片尺寸一致
  width: 100%;
  height: 300rpx;
  // 4. 兜底背景色,避免加载前空白
  background-color: #f5f5f5;
  margin-bottom: 30rpx; // 保持和原布局一致的间距
}
.container {
    background-color: #f5f5f5;
    min-height: 100vh;
pages/tabbar/index/home.vue
@@ -1,5 +1,11 @@
<template>
    <view class="video-container">
    <view class="fixed-float-window" @click="gotoPrizeActivity" v-if="prizeActivity.id">
      <!-- 悬浮窗内容:可替换为图标+文字/纯图标/图片 -->
          <text style="font-size: 36rpx;">🎁</text>
          <text class="float-text">抽奖活动</text>
    </view>
        <top-bar selectedTitleIndex="home" textColor="white" @changeTab="topBarChange" class="topBar"></top-bar>
        <!-- 视频加载 -->
        <zero-loading v-show="videoLoading" type="circle" color="#0ebd57" text=""></zero-loading>
@@ -276,8 +282,10 @@
import { nextTick } from "vue";
import { getVideoCover } from "@/api/common.js"
import {addPrizeNum} from '@/api/prize.js'
import UIcon from "../../subComponents/uview-components/uview-ui/components/u-icon/u-icon.vue";
import {getONPrizeActivity} from "../../../api/prize-activity";
export default {
    components: { TopBar, ActivityPopup },
    components: {UIcon, TopBar, ActivityPopup },
    computed: {
        hasPlayTime() {
            return this.sliderFormatTime(this.progress > 0 ? this.duration * this.progress / 100 : 0);
@@ -389,6 +397,7 @@
                    shareOption:"{}",
                    pageType:"LIST"
                },
      prizeActivity:{},
        }
    },
    onShow() {
@@ -402,8 +411,19 @@
                userAction(param)
            }
        })
    this.getONPrizeActivity()
    let showPopup = storage.getPopupShow();
    console.log(showPopup)
    if (showPopup) {
      console.log("首次打开,显示弹窗");
      storage.setPopupShow(true); // 标记为已显示
    } else {
      console.log("已显示过,不弹窗");
    }
    if(showPopup){
      this.openActivityPopup()
    }
        this.openActivityPopup()
        if (!this.userId) {
@@ -568,27 +588,54 @@
        });
    },
    methods: {
    getONPrizeActivity(){
      getONPrizeActivity().then(res =>{
        if(res.statusCode=== 200){
          //后端没查到开启的抽奖活动 res.data.data.id值为null
          this.prizeActivity = res.data.data; // 存储完整活动数据
          if (this.prizeActivity.endTime) {
          }else {
            this.prizeActivity = {}; // 无活动时清空
          }
        }
      })
    },
    gotoPrizeActivity(){
      uni.navigateTo({
        url:'/pages/prize/PrizeDetail/PrizeDetail?id=' + this.prizeActivity.id,
      });
    },
        async openActivityPopup() {
            await getPopupAcitivty().then(res => {
                if (res.statusCode === 200) {
          //请求成功修改弹窗展示状态 为false
          storage.setPopupShow(false);
                    let obj = res.data.data;
                    if (obj.enableStatus === 'ON') {
                        setPopupRedisTime().then(res => {
                            if (res.statusCode === 200) {
                                if (res.data.state) {
                                    this.showActivityPopup({
                                        title: obj.activityName,
                                        desc: obj.activityDes,
                                        image: obj.activityCoverUrl,
                                        endTime: new Date(obj.endTime).getTime(),
                                        prizeActivityId: obj.id
                                    })
                                } else {
                                    this.hideActivityPopup()
                                }
                            }
                        });
            this.showActivityPopup({
              title: obj.activityName,
              desc: obj.activityDes,
              image: obj.activityCoverUrl,
              endTime: new Date(obj.endTime).getTime(),
              prizeActivityId: obj.id
            })
                        // setPopupRedisTime().then(res => {
                        //     if (res.statusCode === 200) {
                        //         if (res.data.state) {
                        //             this.showActivityPopup({
                        //                 title: obj.activityName,
                        //                 desc: obj.activityDes,
                        //                 image: obj.activityCoverUrl,
                        //                 endTime: new Date(obj.endTime).getTime(),
                        //                 prizeActivityId: obj.id
                        //             })
                        //         } else {
                        //             this.hideActivityPopup()
                        //         }
            //
                        //     }
                        // });
                    }
                }
@@ -1871,7 +1918,7 @@
.progress-bar {
    position: relative;
    width: 100%;
    height: 5px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.2);
    /* 半透明背景 */
    overflow: hidden;
@@ -1936,4 +1983,82 @@
    left: 20rpx;
    z-index: 1000
}
.fixed-float-window {
  position: fixed;
  right: 20rpx;
  top: 10%;
  z-index: 1000;
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  box-shadow: 0 10rpx 16rpx rgba(110, 103, 103, 0.4);
  background-color: rgba(50, 48, 48, 0.7); /* 加深主体背景,增强对比 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  overflow: visible;
}
/* 内层主光圈(粗线条+强对比) */
.fixed-float-window::after {
  content: "";
  position: absolute;
  width: calc(100% + 25rpx);
  height: calc(100% + 25rpx);
  border-radius: 50%;
  /* 金色渐变边框,线条加粗至5rpx */
  border: 5rpx solid transparent;
  border-top-color: rgba(255, 215, 0, 0.9);
  border-right-color: rgba(255, 180, 0, 0.6);
  border-bottom-color: rgba(255, 215, 0, 0.9);
  border-left-color: rgba(255, 180, 0, 0.6);
  /* 加快旋转速度(4秒一圈) */
  animation: rotate 4s linear infinite;
  pointer-events: none;
}
/* 外层扩散光效(增强存在感) */
.fixed-float-window::before {
  content: "";
  position: absolute;
  width: calc(100% + 25rpx);
  height: calc(100% + 25rpx);
  border-radius: 50%;
  /* 模糊光效 */
  background: radial-gradient(circle, rgba(255,215,0,0.5) 0%, rgba(255,215,0,0) 70%);
  /* 呼吸式缩放动画 */
  animation: pulse 3s ease-in-out infinite;
  pointer-events: none;
}
/* 旋转动画 */
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* 呼吸扩散动画 */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.6;
  }
}
.float-text {
  color: rgba(255, 215, 0, 0.95); /* 文字更亮 */
  font-size: 26rpx;
  font-weight: bold; /* 加粗文字 */
  margin-top: 8rpx;
}
.fixed-float-window:active {
  transform: scale(0.95);
}
</style>
pages/tabbar/user/my.vue
@@ -23,7 +23,11 @@
      <view class="activity-content">
        <!-- 活动图标(使用接口返回的 activityCoverUrl) -->
        <view class="activity-icon">
          <image :src="prizeActivity.activityCoverUrl" mode="widthFix"></image>
          <view class="floating-btn-content">
            <text class="floating-btn-icon">🎁</text>
          </view>
<!--          <image :src="prizeActivity.activityCoverUrl" mode="aspectFit"></image>-->
        </view>
        <!-- 活动信息(名称、描述、倒计时) -->
        <view class="activity-info">
@@ -44,7 +48,7 @@
    <div class="pointBox box">
      <u-row text-align="center" gutter="16" class="point">
        <u-col text-align="center" span="4" @click="navigateTo('/pages/mine/deposit/operation')">
          <view>预存款</view>
          <view>余额</view>
          <view class="money">{{ walletNum | unitPrice }}</view>
        </u-col>
@@ -151,9 +155,11 @@
import storage from '@/utils/storage.js'
import { getSessionId, userAction } from "@/api/userAction.js";
import {getONPrizeActivity} from "@/api/prize-activity";
import UIcon from "../../subComponents/uview-components/uview-ui/components/u-icon/u-icon.vue";
export default {
  components: {
    UIcon,
    tool
  },
  data() {
@@ -401,7 +407,28 @@
body {
  overflow: auto;
}
  .floating-btn-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    position: relative;
  }
  .floating-btn-icon {
    font-size: 75rpx;
    color: white;
    filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.2));
    margin-bottom: 5rpx;
  }
  .floating-btn-text {
    font-size: 20rpx;
    color: white;
    z-index: 1;
    position: relative;
    text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
    white-space: nowrap;
  }
.member-gradient-bg {
    width: 98%;
    height: 250rpx;
@@ -432,7 +459,6 @@
    margin-right: 24rpx;
    border-radius: 16rpx;
    overflow: hidden;
    background: rgba(255,255,255,0.2);
    image {
      width: 100%;
      height: 100%;
utils/storage.js
@@ -26,6 +26,15 @@
  getHotWords() {
    return uni.getStorageSync(`hotWords`);
  },
  getPopupShow(){
    if (uni.getStorageSync(`popupShow`) === "" || uni.getStorageSync(`popupShow`) === undefined) {
      return true;
    }
    return uni.getStorageSync(`popupShow`);
  },
  setPopupShow(val){
    uni.setStorageSync("popupShow",val);
  },
  //写入 展示还是不展示
  setShow(val) {
    uni.setStorageSync("show", val);