主页页面，活动弹窗，图片适配

zxl

2025-10-27 7ae4e27a487e282b60dc65d7836d1bcd86e7a464

 pages/tabbar/user/my.vue

@@ -17,22 +17,32 @@
      </view>
      <u-icon style="display: flex;align-items: flex-start;" name="arrow-right"></u-icon>
    </view>
	
   <view class="member-gradient-bg">	
    <view class="member-content">
         <view class="vip-icon">
           <image src="/static/tabbar/vip.png" mode="widthFix"></image>
         </view>
         <view class="vip-info">
           <p class="vip-level">绿满筐会员</p>
           <p class="vip-validity">长期有效</p>
         </view>
	      
         <!-- 会员标识装饰 -->
         <view class="vip-badge">
           <text class="badge-text">尊享特权</text>
         </view>
       </view>
   <!-- <button  type="default" @click="goTOSuccess">立即查看</button> -->
   <view class="member-gradient-bg" v-if="prizeActivity.enableStatus === 'ON'">
    <view class="member-gradient-bg" @click="gotoPrizeActivity" >
      <view class="activity-content">
        <!-- 活动图标（使用接口返回的 activityCoverUrl） -->
        <view class="activity-icon">
          <view class="floating-btn-content">
            <text class="floating-btn-icon">🎁</text>
            <text class="floating-btn-text">抽奖活动</text>
          </view>

<!--          <image :src="prizeActivity.activityCoverUrl" mode="aspectFit"></image>-->
        </view>
        <!-- 活动信息（名称、描述、倒计时） -->
        <view class="activity-info">
          <p class="activity-name">{{ prizeActivity.activityName }}</p>
          <p class="activity-desc">{{ prizeActivity.activityDes }}</p>
          <p class="activity-desc">{{ formatDate(prizeActivity.beginTime) }} - {{ formatDate(prizeActivity.endTime)}}</p>
        </view>
        <!-- 立即参与入口 -->
        <view class="activity-enter">
          <text class="enter-text">立即参与</text>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>
    </view>
      
   </view>
    <!-- 积分，优惠券，关注， -->
@@ -130,24 +140,32 @@
   </view>
    <!-- 撑起下方 -->
   <view style="height:64px;">
		
   </view>
  <custom-tabbar bgColor="#ffffff" selected="my"></custom-tabbar>
  
  </view>
</template>
<script>
import '@/pages/subComponents/uview-components/uview-ui';
import tool from "@/pages/tabbar/user/utils/tool.vue";
import { getSTSToken } from "@/api/common.js";
import { getCouponsNum, getFootprintNum } from "@/api/members.js";
import { getCouponsNum, getFootprintNum,bindMemberAndStore } from "@/api/members.js";
import { getUserWallet } from "@/api/members";
import configs from '@/config/config'
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() {
    return {
      prizeActivity: {},
     endpoint: '',
      configs,
      userImage:configs.defaultUserPhoto,
@@ -158,12 +176,83 @@
      couponNum: "",
      footNum: "",
      walletNum: "",
     pageSessionNo:"",
     actionParam:{
         sessionId:'',
         actionType:"PAGE",
         joinType:"SELF",
         pageCode:"TBA_BAR_MY",
         pageParams:"{}",
         pageStatus:"JOIN",
         pageType:"DETAIL"
      }
    };
  },
  onLoad() {
     this.initCOS()
  onLoad(option) {
    this.actionParam.pageParams = JSON.stringify(option)
    console.log('-----------分享出的数据---------->', option)
    let shareStoreId = null;
    let shareTime = null;
    // 检查是否存在q参数
    if (option.q) {
      // 双重解码：微信对URL进行了两次编码
      const decodedUrl = decodeURIComponent(decodeURIComponent(option.q));
      console.log('原始URL:', decodedUrl);

      // 解析URL中的查询参数
      const params = this.parseUrlParams(decodedUrl);
      shareStoreId = params.shareStoreId;
      try {
        // 将数据存储到本地缓存
        uni.setStorageSync('shareStoreId', shareStoreId);
        //创建一个扫码的时间
        // 获取当前时间并格式化为 yyyy-MM-dd HH:mm:ss
        const now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1
        const day = String(now.getDate()).padStart(2, '0');
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');

        shareTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        uni.setStorageSync('shareTime', shareTime);
        console.log('数据存储成功');
      } catch (e) {
        console.error('存储失败：', e);
      }
    }
    this.initCOS()
   },
  onUnload() {
    let   param = Object.assign({}, this.actionParam);
    if (this.sendOnShow)return
    param.pageStatus = "LEAVE"
    userAction(param)
  },
  onHide() {
    this.startHidenTime = Date.now()
    let   param =Object.assign({}, this.actionParam);
    this.sendOnShow = true;
    param.pageStatus = "LEAVE"
    userAction(param)
  },
  // onLoad(options) {
   //
   //   this.initCOS()
  // },
  onShow() {
    this.getONPrizeActivity();
     getSessionId().then(res=>{
      this.pageSessionNo = res.data.data
      this.actionParam.sessionId = res.data.data
      if(this.pageSessionNo){
      let   param = Object.assign({}, this.actionParam);
         param.sessionId = this.pageSessionNo
         userAction(param)
      }
     })

    this.userInfo = this.$options.filters.isLogin() || {};
    if (this.$options.filters.isLogin("auth")) {
      this.getUserOrderNum();
@@ -172,10 +261,21 @@
      this.couponNum = 0;
      this.footNum = 0;
    }

   let shareStoreId = uni.getStorageSync('shareStoreId');
   let shareTime = uni.getStorageSync('shareTime');
   console.log('从缓存读取参数:', { shareStoreId, shareTime });
   if (shareStoreId && shareTime) {
     console.log('检测到有效参数，调用后端接口');
     this.bindMemberAndStore(shareStoreId, shareTime);
   } else {
     console.log('无有效参数，执行正常逻辑');
   }
  },
  onPullDownRefresh() {
    this.getUserOrderNum();
    this.userInfo = this.$options.filters.isLogin();
    this.getONPrizeActivity(); // 下拉刷新同步最新活动状态
  },
  // #ifndef MP
  onNavigationBarButtonTap(e) {
@@ -188,6 +288,76 @@

  mounted() { },
  methods: {
    formatDate(isoTime) {
      if (!isoTime) return '';
      const date = new Date(isoTime);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}年${month}月${day}日`; // 转换为中文格式
    },
    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,
      });
    },
     // 解析URL参数
     parseUrlParams(url) {
        const params = {};
        // 处理可能存在的hash（如果有的话）
        const cleanUrl = url.split('#')[0];
        const queryStr = cleanUrl.split('?')[1] || '';

        queryStr.split('&').forEach(pair => {
           const [key, value] = pair.split('=');
           if (key) {
              // 如果值存在，则解码，否则设为空字符串
              params[key] = value ? decodeURIComponent(value) : '';
           }
        });

        return params;
     },
    async bindMemberAndStore(shareStoreId, shareTime){
      let form ={
        shareStoreId: shareStoreId,
        shareTime: shareTime
      }
      // let form ={
      //            shareStoreId: "1376433565247471616",
      //            shareTime: "2025-09-26 16:18:00"
      // }
      try {
        const res = await bindMemberAndStore(form);
        if(res.statusCode === 200){
          //清除缓存
          uni.removeStorageSync('shareStoreId');
          uni.removeStorageSync('shareTime');
        }
      }
      catch(error) {
        console.error('出错:', error);
      };
    },
     // goTOSuccess(){
     //        uni.redirectTo({
     //           url:"/pages/cart/payment/success?paymentMethod=WECHAT" +
     //                    "&payPrice=" +
     //                    10,
     //                });
     // },
     // 初始化腾讯云cos客户端
     initCOS() {
        // 调用后端获取sts临时访问凭证
@@ -233,11 +403,33 @@
</script>

<style lang="scss" scoped>
   @import url("/pages/subComponents/static/bgStyle.css");
html,
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: 70rpx;
    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;
@@ -250,7 +442,95 @@
     &:active {
       transform: scale(0.98);
     }
  cursor: pointer; // 增加点击指针样式
  overflow: hidden; // 防止内容溢出
  .activity-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 40rpx;
    box-sizing: border-box;
  }

  // 活动图标
  .activity-icon {
    width: 130rpx;
    height: 130rpx;
    margin-right: 24rpx;
    border-radius: 16rpx;
    overflow: hidden;
    background: rgba(255,255,255,0.2);
    image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  // 活动信息区域
  .activity-info {
    flex: 1;
    .activity-name {
      font-size: 32rpx;
      font-weight: bold;
      color: #fff;
      margin: 0 0 8rpx 0;
      text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
    }
    .activity-desc {
      font-size: 22rpx;
      color: rgba(255,255,255,0.9);
      margin: 0;
    }
  }

  // 倒计时样式
  .activity-countdown {
    display: flex;
    align-items: center;
    margin-top: 12rpx;
    .countdown-label {
      font-size: 20rpx;
      color: rgba(255,255,255,0.8);
      margin-right: 8rpx;
    }
    .countdown-box {
      display: flex;
      align-items: center;
    }
    .countdown-item {
      display: inline-block;
      width: 36rpx;
      height: 36rpx;
      line-height: 36rpx;
      background: rgba(255,255,255,0.3);
      border-radius: 8rpx;
      color: #fff;
      font-size: 20rpx;
      text-align: center;
      margin: 0 4rpx;
    }
    .countdown-sep {
      color: #fff;
      font-size: 22rpx;
      margin: 0 4rpx;
    }
  }

  // 立即参与入口
  .activity-enter {
    display: flex;
    align-items: center;
    .enter-text {
      font-size: 24rpx;
      color: #fff;
      margin-right: 8rpx;
      font-weight: 500;
    }
  }
}

/* 内容区域 */
.member-content {
  width: 100%;
@@ -324,7 +604,7 @@
    background-size: cover;
    border-bottom-left-radius: 30rpx;
    border-bottom-right-radius: 30rpx;
    background-image: url("/pages/subComponents/static/img/main-bg.png");
    background-image: var(--main-bg);
    background-position: bottom;
    background-repeat: no-repeat;
    color: #ffffff;
@@ -433,7 +713,6 @@
   background: #fff;
   border-radius: 20rpx;
   box-shadow: 0 4rpx 24rpx 0 #f6f6f6;
    transform: translateY(-30rpx);
}

.user-name {