@alu008/test_yuanqikaixiang 1.0.0

package/subpackages/myCards/myCards.vue

@@ -0,0 +1,1250 @@
+<template>
+  <view class="myCards">
+       <!-- <image class="bgc" src="https://img.shinemang.com/static/rednote/myCardsRed.png" mode="scaleToFill" /> -->
+    <u-sticky bgColor="#f6f6f6">
+      <headers title="我的奖品"></headers>
+
+      <view style="padding: 6px; display: flex; align-items: center">
+        <u-tabs
+          :list="tabsList"
+          :activeStyle="{
+            color: '#000000',
+            fontWeight: 'bold',
+            fontSize: '32rpx',
+          }"
+          :inactiveStyle="{
+            color: 'rgba(0, 0, 0, 0.5)',
+            fontWeight: 'bold',
+            fontSize: '28rpx',
+          }"
+          @change="changeStatus"
+          lineColor="linear-gradient( 90deg, #0BD690 0%, #00B0E0 100%);"
+          :current="current"
+        ></u-tabs>
+
+        <view @click="toMyOrder" class="addressManager">
+          <image src="https://img.shinemang.com/static/img/orderIcon.png" mode="scaleToFill" />
+          <text>中奖记录</text>
+        </view>
+      </view>
+      <view v-if="current == 0" class="goodsType">
+        <view
+          @click="changeGoodsType('GoodsState_Spots')"
+          :class="[goodsType == 'GoodsState_Spots' ? 'active' : '']"
+        >
+          现货
+        </view>
+        <view
+          @click="changeGoodsType('GoodsState_Booking')"
+          :class="[goodsType == 'GoodsState_Booking' ? 'active' : '']"
+        >
+          预售
+        </view>
+      </view>
+     <view v-if="current == 1" class="goodsType">
+        <view
+          @click="changeXuniType('ThirdPartyGoodsStockState_InStock')"
+          :class="[xuniType == 'ThirdPartyGoodsStockState_InStock' ? 'active' : '']"
+        >
+          未领取
+        </view>
+        <view
+          @click="changeXuniType('ThirdPartyGoodsStockState_Released')"
+          :class="[xuniType == 'ThirdPartyGoodsStockState_Released' ? 'active' : '']"
+        >
+          已领取
+        </view>
+      </view> 
+    </u-sticky>
+     <!-- :style="{
+        height:
+          current == 0 || current == 1
+            ? `calc(100vh  - ${statusBarHeight + 128}px)`
+            : `calc(100vh  - ${statusBarHeight + 100}px)`,
+      }" -->
+    <view
+ 
+      class="cardsContent"
+    >
+      <view class="myCardsContent">
+        <view class="cardsBox bgcCenter" style="background-color: transparent">
+          <!-- @click="toDetail(value)" -->
+          <view style="width: 100%; height: 100%; overflow-y: scroll">
+            <view v-if="list.length > 0" class="cardsList">
+              <view
+                v-for="value in list"
+                :key="value.id"
+                class="item bgcCenter"
+                @click="showPreviewDetail(value)"
+                :style="{
+               
+                  backgroundColor: 'transparent',
+                }"
+              >
+                <view class="boxImg">
+                  <view
+                    :style="{
+                      backgroundSize:value.item.itemType == 'ItemType_Goods_GreetingCard' ? 'contain' : 'cover',
+                      backgroundImage:
+                        'url(' + formateUrl(value.item.itemCoverThumb) + ')',
+                    }"
+                    class="cardBg bgcCenter"
+                  >
+                    <view class="count">x{{current == 0 ? value.stockId.length : value.item.itemNum}}</view>
+                  </view>
+                </view>
+
+                <view
+                  :style="{
+                    backgroundImage: `url(${goldText})`
+                  }"
+                  class="title over bgcCenter"
+                >
+                  {{ value.item.itemName }}
+                </view>
+              </view>
+            </view>
+            <view v-if="!isFirstLoading && list.length == 0" class="noData">
+              <image src="https://img.shinemang.com/static/noData.png" mode="scaleToFill" />
+              <view>暂无相关物品</view>
+            </view>
+          </view>
+
+          <view v-if="current == 0" class="confirmBtn">
+            <view
+              class="bgcCenter"
+              @click="toFragment"
+              hover-class="hoverActive"
+            ></view>
+            <view
+              class="bgcCenter"
+              @click="toSend"
+              hover-class="hoverActive"
+            ></view>
+          </view>
+          <!-- </scroll-view> -->
+        </view>
+      </view>
+    </view>
+
+    <view v-if="showPreview" @click="showPreview = false" class="previewImage">
+      <view>
+        <view id="toImg" style="position: relative;">
+            <!-- borderRadius:rewardDetail.item.itemType == 'ItemType_Goods_GreetingCard' ? '0' : '20rpx' -->
+          <img :style="{
+          
+          }" :src="formateUrl(rewardDetail.item.itemCoverThumb)" alt="" />
+
+          <!-- <view v-if="rewardDetail.item.itemType == 'ItemType_Goods_GreetingCard'" class="avatar ">{{ nickName.length >7? nickName.slice(0,7) + '...' : nickName }}</view> -->
+          <view class="mask"></view>
+        </view>
+        <view class="goodsName">{{ rewardDetail.item.itemName }}</view>
+    <!-- 
+        <view
+          v-if="!honery && rewardDetail.item.itemType == 'ItemType_Goods_GreetingCard'"
+          class="actions"
+        >
+          <view @click.stop.prevent="toImg(2)" class="action">
+            <view
+              ><image src="https://img.shinemang.com/static/img/share.png" mode="scaleToFill"
+            /></view>
+            <view>分享</view>
+          </view>
+          <view  @click.stop.prevent="toImg(1)" class="action">
+            <view><image src="https://img.shinemang.com/static/img/save.png" mode="scaleToFill" /></view>
+            <view>保存</view></view
+          >
+        </view> -->
+      
+      <!-- <view
+         v-if="rewardDetail.showCliamBtn == true &&  rewardDetail.item.itemType == 'ItemType_ThirdParty_Ticket' && current == 1 && xuniType == 'ThirdPartyGoodsStockState_InStock'
+          " 
+          class="exchange"
+        >
+        <view class="tips">温馨提示：领取将在&nbsp;{{rewardDetail.item.itemParams.expire_at}}&nbsp;结束,过期不提交视为自动放弃.</view>
+          <view class="bgcCenter" @click.stop.prevent="confirmExchange"
+            ></view
+          >
+        </view>  -->
+
+        <view class="exchange" v-if="!rewardDetail.showCliamBtn && rewardDetail.item.itemType == 'ItemType_ThirdParty_Ticket' && current == 1 && xuniType == 'ThirdPartyGoodsStockState_InStock'">
+            <view class="tips">资料收集时间已过，请前往芒果APP联系客服处理</view>
+        </view>
+
+        
+        <view class="exchange" v-if="rewardDetail.item.itemType == 'ItemType_ThirdParty_Ticket' && current == 1 && xuniType == 'ThirdPartyGoodsStockState_Released'">
+            <view class="tips">资料已收集，请按时抵达现场</view>
+        </view>
+      <!--    <view
+          v-if="
+            rewardDetail.item.itemType ==
+            'ItemType_ThirdParty_MGTV_EShop_Coupon'
+          "
+          class="exchange"
+        >
+          <view class="bgcCenter" @click.stop.prevent="toUsexiaomang"
+            >去使用</view
+          >
+        </view> -->
+      </view>
+    </view>
+    <u-popup
+      @close="showShare = false"
+      :show="showShare"
+      mode="bottom"
+      :round="32"
+      zIndex="10076"
+      @click.stop.prevent
+      class="sharePopupBox"
+      :safeAreaInsetBottom="false"
+    >
+      <view v-if="showShare" class="sharePopup">
+        <!-- <view class="title">
+          <view>分享</view>
+          <image
+            @click="showShare = false"
+            src="https://img.shinemang.com/static/img/closeIcon.png"
+            mode="scaleToFill"
+          />
+        </view> -->
+        <view class="content">
+          <view @click="share(1)">
+            <image src="https://img.shinemang.com/static/img/wechat.png" mode="scaleToFill" />
+            <view>微信</view>
+          </view>
+          <view @click="share(2)">
+            <image src="https://img.shinemang.com/static/img/wechat1.png" mode="scaleToFill" />
+            <view>朋友圈</view>
+          </view>
+        </view>
+      </view>
+    </u-popup>
+    <!-- <u-popup
+      @close="showExchangePeitunPoupon = false"
+      :show="showExchangePeitunPoupon"
+      mode="center"
+      :round="32"
+      zIndex="10076"
+      class="sharePopupBox"
+      :safeAreaInsetBottom="false"
+    >
+      <view v-if="showExchangePeitunPoupon" class="exchangeCouponPopup">
+        <view class="content">
+          <view class="message">
+            <view>姓名</view>
+          <input type="text" v-model="realName" placeholder="请输入姓名" /></view>
+            <view class="message">
+            <view>性别</view>
+              <u-radio-group 
+                  v-model="sex"
+                  iconPlacement="right">
+                <u-radio  iconSize="12px" labelSize="12px"  :customStyle="{marginRight: '8px',fontSize:'24rpx',gap:'4px'}" v-for="(item, index) in radiolist"
+                  :key="index"
+                  :label="item.name"
+                  :name="item.name" ></u-radio>
+              </u-radio-group>
+          </view>
+          <view class="message">
+            <view>手机号</view>
+          <input type="number" v-model="phone" placeholder="请输入手机号" /></view>
+          <view class="message">
+            <view>证件类型</view>
+             <uni-data-select
+             :clear="false"
+              v-model="cardType"
+              :localdata="cardTypes"
+              @change="cardTypesChange"
+            ></uni-data-select>
+          </view>
+          <view class="message"><view>证件号码</view>
+            <input type="text" v-model="cardNum" placeholder="请输入证件号码" /></view>
+                <view class="message"><view>出发地</view>
+          <input type="text" v-model="fromAddress" placeholder="请输入出发地" /></view>
+          <view class="tips">
+            温馨提示：领取将在&nbsp;{{rewardDetail.item.itemParams.expire_at}}&nbsp;结束,过期不提交视为自动放弃,请仔细核对填写信息.
+          </view>
+        </view>
+
+        <view class="buttons">
+          <view @click="showExchangePeitunPoupon = false">取消</view>
+          <view @click="exchangePeitunPoupon">确认领取</view>
+        </view>
+      </view>
+    </u-popup> -->
+   <fillInfo :rewardDetail="rewardDetail" :showExchangePeitunPoupon="showExchangePeitunPoupon" @closePoupon="closePoupon" @exchangePeitunPoupon="exchangePeitunPoupon"></fillInfo>
+    <confirmModal :subdes="subdes" :showUseBtn="showUseBtn" @cancel="cancel" @confirm="confirm" :des="des" v-if="showConfirmModal"></confirmModal>
+  </view>
+</template>
+<script>
+import {
+  fetchMyBackPack,
+  fetchThirdPartyGoods,
+  fetchThirdPartyGoodsExchange,
+} from "@/utils/fetch";
+import {
+  formateServerUrl,
+  isHonery,
+  isMobilePhone,
+  jumpUrl,
+  navigateTo,
+  reportMessage,
+  toBannerUrl,
+  toUseXiaomangQuan,
+  toUsexiaomang,
+} from "@/utils";
+import confirmModal from "@/components/confirmModal/confirmModal.vue";
+import headers from "@/components/header/header.vue";
+import html2canvas from "html2canvas";
+import { sendLogisticsFee } from "@/utils";
+import fillInfo from '@/components/fillInfo/fillInfo.vue'
+
+import goldText from "@/static/img/goldText.png";
+export default {
+  data() {
+    return {
+      showUseBtn: false,
+      subdes:'',
+      des:'',
+      showConfirmModal:false,
+      xuniType:'ThirdPartyGoodsStockState_InStock',
+      goldText: goldText,
+      itemType: "ItemType_Goods",
+      goodsType: "GoodsState_Spots", // 现货  // GoodsState_Booking 预售
+      tabsList: [
+        {
+          name: "实物奖品",
+          status: "ItemType_Goods",
+        },
+        // {
+        //   name: "电子贺卡",
+        //   status: "ItemType_Goods_GreetingCard",
+        // },
+        {
+          name: "虚拟奖品",
+          status: "other",
+        },
+        // {
+        //   name: "已拥有的小卡",
+        //   status: "carriage_start",
+        // },
+      ],
+      scrollTop: 0,
+      triggered: false,
+      show: false,
+      cardDetail: null,
+      cardItem: "",
+      pageSize: 15,
+      pageNo: 1,
+      hasMore: false,
+      isFirstLoading: true,
+      list: [],
+      seriesList: [],
+      defaultSeriesId: 0,
+      showSelectTypesModal: false,
+      totalNums: 0,
+      titleName: "全部卡集",
+      current: 0,
+      showPreview: false,
+      rewardDetail:null,
+      showShare: false,
+      sendLogisticsFee: sendLogisticsFee,
+      statusBarHeight: 0,
+      showExchangePeitunPoupon:false,
+       honery:isHonery(),
+    };
+  },
+  components: { headers ,confirmModal,fillInfo},
+  onLoad(option) {
+    this.nickName = uni.getStorageSync("nickname")
+    if(option.current){
+      this.current = option.current
+      if(this.current == 1){
+        this.itemType = "ThirdPartyGoodsStockState_Released"
+      }
+      // else if(this.current == 2){
+      //   if(option.type && option.type == 2){
+      //     this.xuniType = 'ThirdPartyGoodsStockState_Released'
+      //   }
+      // }
+    }
+  },
+  methods: {
+    closePoupon(state){
+     this.showExchangePeitunPoupon = state.state;
+    },
+    cardTypesChange(e){
+     
+    },
+    cancel(){
+     this.showConfirmModal = false;
+    },
+
+    toUsexiaomang() {
+      toUseXiaomangQuan();
+    },
+    confirmExchange() {
+      this.showExchangePeitunPoupon = true;
+    },
+    exchangePeitunPoupon(data) {
+      fetchThirdPartyGoodsExchange({
+        phone: data.phone.trim(),
+        stock_id: this.rewardDetail.stockId[0],
+        real_name:data.realName,
+        id_card_no:data.cardNum.trim(),
+        id_card_type:data.cardType,
+        other:{
+          address:data.fromAddress,
+          sex:data.sex
+        }
+      }).then((res) => {
+        console.log(res);
+        uni.showToast({
+          title: "领取成功",
+          icon: "none",
+        });
+        uni.setStorageSync("phone", data.phone);
+        uni.setStorageSync("realName", data.realName);
+         uni.setStorageSync("fromAddress", data.fromAddress);
+        this.showExchangePeitunPoupon = false;
+        this.showPreview = false;
+        this.getCardsList();
+      });
+    },
+
+    changeXuniType(type){
+       this.xuniType = type;
+         uni.pageScrollTo({ scrollTop: 1,duration:300 })
+       this.getCardsList();
+    },
+    changeGoodsType(type) {
+      this.goodsType = type;
+        uni.pageScrollTo({ scrollTop: 1,duration:300 })
+      this.getCardsList();
+    },
+    changeStatus(e) {
+      this.current = e.index;
+      this.itemType = e.status;
+      uni.pageScrollTo({ scrollTop: 1,duration:300 })
+      this.getCardsList();
+    },
+    confirm(){
+      this.showConfirmModal = false
+        if(this.rewardDetail.item.itemType == 'ItemType_ThirdParty_MGTV_EShop_Coupon'){
+            toUseXiaomangQuan();
+        }else if(this.rewardDetail.item.itemType == 'ItemType_ThirdParty_MGTV_Point'){
+            jumpUrl('https://app.mgtv.com/credits/v2.html#/?source=yhfc')
+        }
+       
+    },
+    showPreviewDetail(value) {
+        this.rewardDetail = value;
+      if(this.current == 2){
+        if(this.xuniType == 'ThirdPartyGoodsStockState_InStock'){
+          if(value.item.itemType != 'ItemType_ThirdParty_MeiTuan_Coupon'){
+            return;
+          }
+        }else{
+         if(value.item.itemType == 'ItemType_ThirdParty_MGTV_VIP'){
+          this.des = value.item.itemName +'已发放到当前账户'
+          this.subdes = '前往芒果TV APP查看'
+          this.showUseBtn = false
+          this.showConfirmModal = true
+      
+         }else if(value.item.itemType == 'ItemType_ThirdParty_MGTV_EShop_Coupon'){
+          this.des = value.item.itemName +'已发放'
+             this.subdes = ''
+          this.showUseBtn = true
+         this.showConfirmModal = true
+         }else if(value.item.itemType == 'ItemType_ThirdParty_MGTV_UNION_VIP'){
+          this.des = value.item.itemName +'已发放到当前账户,前往芒果TV 我的-资产服务-我的资产-联合会员查看'
+           this.subdes = ''
+          this.showUseBtn = false
+         this.showConfirmModal = true
+         }else if(value.item.itemType == 'ItemType_ThirdParty_MGTV_Point'){
+             this.des = value.item.itemName +'已发放到当前账户'
+               this.subdes = ''
+             this.showUseBtn = true
+             this.showConfirmModal = true
+         }else if(value.item.itemType == 'ItemType_ThirdParty_MeiTuan_Coupon'){
+             this.des = value.item.itemName +'已发放,请前往美团APP中查看'
+               this.subdes = ''
+              this.showUseBtn = false
+             this.showConfirmModal = true
+
+         }
+         this.showConfirmModal = true;
+         return;
+        }
+      }
+      // if (value.item.itemType == "ItemType_Goods_GreetingCard") {
+
+      if(value.item.itemType == 'ItemType_ThirdParty_Ticket' && this.xuniType == 'ThirdPartyGoodsStockState_InStock'){
+             const now = Date.now();
+            const endTime = new Date(
+          value.item.itemParams.expire_at + "+08:00",
+        ).getTime();
+
+       if(now > endTime){
+          this.rewardDetail.showCliamBtn = false
+       }else{
+          this.rewardDetail.showCliamBtn = true;
+          this.confirmExchange();
+          return;
+       }
+      }
+  
+      this.showPreview = true;
+      // }
+    },
+    share(type) {
+      reportMessage('集好运-点击我的奖品-分享电子贺卡')
+      setTimeout(async () => {
+        const dom = document.getElementById("toImg");
+        var canvas1 = document.createElement("canvas");
+        canvas1.width = dom.offsetWidth * 2;
+        canvas1.height = dom.offsetHeight * 2;
+        const canvas = await html2canvas(dom, {
+          // allowTaint: false,
+          width: dom.offsetWidth,
+          canvas: canvas1,
+          height: dom.offsetHeight,
+          useCORS: true, // 处理跨域图片
+          scale: 2, // 提高清晰度
+          allowTaint: true, // 允许使用跨域资源
+          tainTest: false,
+          backgroundColor: null,
+        });
+        const base64 = canvas.toDataURL("image/png");
+        let option = "";
+        if (type == 1) {
+          option = "wechat";
+          //分享到 微信和微信朋友圈
+        } else {
+          option = "moments";
+          // 信朋友圈
+        }
+        MgtvApi.shareTo({
+          type: option, // 分享平台：wechat(微信好友), moments(微信朋友圈)
+          style: 1, // 分享类型 0(链接), 1(图片)
+          title: "", // 分享标题
+          shareUrl: base64, // 分享链接（当style为1时，这里填写分享的图片地址或base64），dom生成base64 图片可使用 html2canvas,dom-to-image,vue-canvas-poster 等
+          shareDesc: "", // 分享描述
+          shareIcon: "", // 分享图标
+        });
+      }, 100);
+    },
+
+    toImg(type) {
+      if (type == 1) {
+        setTimeout(async () => {
+          const dom = document.getElementById("toImg");
+          var canvas1 = document.createElement("canvas");
+          canvas1.width = dom.offsetWidth * 2;
+          canvas1.height = dom.offsetHeight * 2;
+          const canvas = await html2canvas(dom, {
+            allowTaint: false,
+            width: dom.offsetWidth,
+            height: dom.offsetHeight,
+            useCORS: true, // 处理跨域图片
+            scale: 2, // 提高清晰度
+            canvas: canvas1,
+            useCORS: true, // 使用跨域
+            allowTaint: true, // 允许使用跨域资源
+            tainTest: false,
+            backgroundColor: null,
+          });
+          const base64 = canvas.toDataURL("image/png");
+
+          MgtvApi.callhandler("savePicture", {
+            imgUrl: base64,
+          });
+          // 报错到相册
+        }, 100);
+      } else {
+        this.showShare = true;
+      }
+    },
+    toMyOrder() {
+      reportMessage('集好运-点击我的奖品-中奖记录');
+      navigateTo("/subpackages/myOrder/myOrder");
+    },
+    changeType(value) {
+      this.defaultSeriesId = value.id;
+      this.titleName = value.name;
+      this.showSelectTypesModal = false;
+      this.pageNo = 1;
+      this.getCardsList();
+    },
+    formateUrl(url) {
+      return formateServerUrl(url);
+    },
+    toGachaDetail() {},
+
+    toFragment() {
+      reportMessage('集好运-点击我的奖品-去分解');
+      navigateTo("/subpackages/fragment/fragment");
+    },
+    // 获取小卡详情
+    getGoodsDetail() {
+      // fetchCardDetail({
+      //   id: value.id,
+      // }).then((res) => {
+      //   this.cardDetail = res.data;
+      //   this.show = true;
+      // });
+    },
+
+    // 我的卡包
+    getCardsList() {
+      // || this.current == 1
+      console.log(this.current);
+      if (this.current == 0 ) {
+        fetchMyBackPack({
+          page: this.pageNo,
+          page_size: 10000,
+          item_type: this.itemType,
+          goods_state: this.current == 0 ? this.goodsType : "GoodsState_Nil",
+        }).then((res) => {
+          this.list = res.list;
+          this.isFirstLoading = false;
+        });
+      } else {
+        fetchThirdPartyGoods({
+          page: this.pageNo,
+          page_size: 10000,
+          state:this.xuniType
+        }).then((res) => {
+          this.list = res.list;
+        });
+      }
+    },
+    toDetail(value) {
+      // if (value.seriesId == "0") {
+      //   return;
+      // }
+      // // 顺便打开对应的那个
+      // uni.navigateTo({
+      //   url:
+      //     "/subpackages/gachaDetail/gachaDetail?series_id=" +
+      //     value.seriesId +
+      //     "&cardId=" +
+      //     value.id,
+      // });
+    },
+    toSend() {
+      reportMessage('集好运-点击我的奖品-去邮寄');
+      uni.navigateTo({
+        url: "/subpackages/sendLogistics/sendLogistics",
+      });
+    },
+    refresherrefresh({ done }) {
+      if (!this.triggered) {
+        this.triggered = true;
+        setTimeout(() => {
+          this.triggered = false;
+        }, 5000);
+      }
+    },
+    scrollToLower() {
+      console.log("scrollToLower");
+    },
+    toLogistics() {},
+
+    onReachBottom() {
+      // if (this.hasMore) {
+      //   this.pageNo++;
+      //   this.getCardsList();
+      // }
+    },
+  },
+  onShow() {
+    // const systemInfo = uni.getSystemInfoSync();
+    const safeTop = uni.getStorageSync("safeTop") || 0;
+    this.statusBarHeight = safeTop 
+    // alert(JSON.stringify(systemInfo))
+    const toOrder = uni.getStorageSync("toOrder");
+    if (toOrder) {
+      uni.removeStorageSync("toOrder");
+      navigateTo("/subpackages/myOrder/myOrder?type=1");
+    }
+    this.getCardsList();
+  },
+  onShareAppMessage() {},
+  onShareTimeline() {},
+};
+</script>
+
+<style lang="less" scoped>
+
+page {
+  // background-color: #fff !important;
+ min-height: 100vh;
+  background-color: #f6f6f6  !important;
+  // background-color: #ffe0b3 !important;
+}
+/deep/.tabs__wrapper__nav__line {
+  width: 30rpx;
+  height: 4rpx;
+  background: linear-gradient( 90deg, #0BD690 0%, #00B0E0 100%);;
+  border-radius: 338rpx 338rpx 338rpx 338rpx;
+}
+.addressManager {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 32rpx;
+  font-size: 28rpx;
+  font-weight: bold;
+  image {
+    width: 40rpx;
+    height: 40rpx;
+    margin-right: 5rpx;
+  }
+}
+.myCards {
+  width: 100%;
+  // height: 100%;
+  background-position: top center !important;
+  // background-image: url("https://img.shinemang.com/static/rednote/myPackBgc.png");
+   > .bgc {
+    width: 750rpx;
+    position: fixed;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 654rpx;
+    @media (min-width: 500px) {
+    max-width: 375px !important;
+  }
+}
+  .cardsBox {
+    width: 702rpx;
+    height: 1164rpx;
+    overflow: hidden;
+    padding: 32rpx 0;
+    background-image: url("https://img.shinemang.com/static/rednote/backPackRed.png");
+
+    // overflow-y: scroll;
+  }
+  .goodsType {
+    display: flex;
+    // align-items: center;
+    padding-left: 32rpx;
+    height: 28px;
+    view {
+      width: 44px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24rpx;
+      line-height: 44px;
+      color: #505050;
+      border-radius: 10px;
+      margin-right: 24rpx;
+      color:rgba(0, 31, 58, 0.5);
+      &.active {
+        background: #C8E2EA;
+        color: #001F3A;
+      }
+    }
+  }
+}
+
+.typesPopup {
+  background-color: #fff;
+  padding: 38rpx 28rpx;
+  z-index: 3;
+  max-height: 600rpx;
+  overflow-y: auto;
+  box-sizing: content-box;
+  .item {
+    font-size: 28rpx;
+    color: #666666;
+    margin-bottom: 40rpx;
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &.active {
+      color: #7c66ff;
+    }
+  }
+
+  &.active {
+    top: 80rpx;
+  }
+}
+.seriesType {
+  height: 80rpx;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 32rpx;
+  font-size: 28rpx;
+  color: #666666;
+  position: relative;
+  background-color: #fff;
+
+  .selectType {
+    font-size: 36rpx;
+    display: flex;
+    align-items: center;
+    // gap: 10rpx;
+    font-weight: bold;
+
+    color: #000;
+    image {
+      width: 23rpx;
+      height: 13rpx;
+      margin-left: 10rpx;
+    }
+  }
+}
+.cardsContent {
+  // height: calc(100% - 102px - 56rpx);
+  width: 100%;
+  z-index: 3;
+  position: relative;
+  margin-top: 30rpx;
+  // overflow: hidden;
+  // position: absolute;
+}
+.myCardsContent {
+  padding-bottom: 164rpx;
+  // position: absolute;
+  width: 100%;
+  // height: 100%;
+  // height: calc(100% - 102px);
+  // overflow-y: scroll;
+  justify-content: center;
+  display: flex;
+
+  // padding-top: 100rpx;
+  .noData {
+    text-align: center;
+    margin-top: 166rpx;
+    color: #999999;
+    font-size: 28rpx;
+    image {
+      width: 370rpx;
+      height: 368rpx;
+    }
+    view {
+      margin-top: -10rpx;
+    }
+
+    .toShop {
+      width: 322rpx;
+      height: 80rpx;
+      background: #7c66ff;
+      border-radius: 864rpx 864rpx 864rpx 864rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-size: 32rpx;
+      margin: auto;
+      margin-top: 40rpx;
+    }
+  }
+
+  .cardsList {
+    // padding: 0 32rpx;
+    // gap: 24rpx;
+    display: flex;
+    // padding: 52rpx 0;
+
+    padding-left: 32rpx;
+    // padding-top: 20rpx;
+    flex-wrap: wrap;
+    // padding-bottom: 16rpx;
+    padding-right: 0;
+    .item {
+      width: 200rpx;
+      margin-bottom: 24rpx;
+      margin-right: 20rpx;
+      height: 252rpx;
+      padding-top: 38rpx;
+      // box-shadow: 2rpx 2rpx 12rpx 0rpx rgba(212, 131, 69, 0.5);
+      border-radius: 24rpx;
+      position: relative;
+      background-image: url('https://img.shinemang.com/static/activity2/cardBgc.png');
+
+      &:nth-child(3n) {
+        margin-right: 0;
+      }
+      .boxImg {
+        width: 176rpx;
+        height: 176rpx;
+        margin-left: 12rpx;
+        border-radius: 14rpx 14rpx 14rpx 14rpx;
+        // border: 2rpx solid #ffb286;
+      }
+      .cardBg {
+        width: 176rpx;
+        height: 176rpx;
+        position: relative;
+        border-radius: 16rpx;
+
+        .count {
+          position: absolute;
+          right: 8rpx;
+          bottom: 22rpx;
+          background: rgba(0, 0, 0, 0.5);
+          border-radius: 16rpx;
+          // padding: 0 14rpx;
+          width: 48rpx;
+          height: 32rpx;
+          color: #fff;
+          font-size: 24rpx;
+          line-height: 32rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .title {
+        font-size: 28rpx;
+        // font-weight: bold;
+        color: #000;
+        padding-left: 16rpx;
+        width: 100%;
+        height: 48rpx;
+        // display: flex;
+        // align-items: center;
+        line-height: 48rpx;
+        position: absolute;
+        background-color: transparent;
+        left: 0;
+        bottom: 8rpx;
+        // text-align: center;
+      }
+      .time {
+        font-size: 20rpx;
+        color: #999999;
+        line-height: 36rpx;
+        text-align: center;
+      }
+    }
+  }
+  .confirmBtn {
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    // max-width: 500px;
+    height: 154rpx;
+    background: #EDEDED;
+    padding-left: 32rpx;
+
+    // border-top: 1px solid rgba(0, 0, 0, 0.1);
+    padding-top: 16rpx;
+    display: flex;
+    justify-content: center;
+    view {
+      width: 298rpx;
+      background-color: transparent;
+      height: 100rpx;
+      &:first-child {
+        margin-right: 40rpx;
+        background-image: url("https://img.shinemang.com/static/rednote/btn3.png");
+      }
+      &:last-child {
+        background-image: url("https://img.shinemang.com/static/rednote/btn4.png");
+      }
+    }
+  }
+}
+.previewImage {
+  width: 100%;
+  height: 100vh;
+  background-color: #000;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  z-index: 9999;
+  transition: all 0.3s ease-in-out;
+  color: #fff;
+  font-size: 28rpx;
+  .goodsName {
+    font-size: 28rpx;
+    padding-top: 30rpx;
+    padding-left: 32rpx;
+    padding-right: 32rpx;
+
+    // font-weight: bold;
+    text-align: center;
+  }
+  .info {
+    display: flex;
+    color: #666666;
+    align-items: center;
+
+    &.levelInfo {
+      > view {
+        margin-right: 6rpx !important;
+      }
+    }
+
+    .line {
+      width: 1px;
+      height: 38rpx;
+      background: #bdbdbd;
+    }
+  }
+  > view {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+  .userInfo {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    img {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+    }
+  } 
+    .avatar {
+      position: absolute;
+      top: 15.5%;
+      left: 20%;
+       font-size: 45rpx;
+       font-family: 'fxlh';
+       width: 350rpx;
+       color: #000;
+       text-align: left;
+
+    }
+
+    #toImg{
+      position: relative;
+      .mask{
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background-color:transparent;
+      }
+    }
+  img {
+    width: 100vw;
+    // height: 100vw;
+    border-radius: 20rpx;
+    @media (min-width: 500px) {
+      width: 375px;
+      // height: 375px;
+    }
+  }
+  .name {
+    padding-left: 32rpx;
+    padding-right: 32rpx;
+    margin-top: 20rpx;
+    margin-bottom: 15rpx;
+  }
+  .count {
+    margin-top: 15rpx;
+  }
+
+  .exchange {
+    display: flex;
+    flex-direction: column;
+    margin-top: 40rpx;
+    align-items: center;
+    justify-content: center;
+    .tips{
+        font-size: 24rpx;
+      color: #e73e3d;
+      text-align: center;
+      margin-bottom: 15rpx;
+      padding: 0 32rpx;
+
+    }
+    .bgcCenter {
+      width: 229rpx;
+      height: 102rpx;
+      display: flex;
+      // align-items: center;
+      justify-content: center;
+      color: #fff;
+      background-image: url("https://img.shinemang.com/static/rednote/tobaPack.png");
+      font-size: 38rpx;
+      font-family: "fxlh";
+      // background: #ff9a96;
+      // border-radius: 41rpx;
+      // border: 4rpx solid #FFFFFF;
+      line-height: 66rpx;
+    }
+  }
+}
+.actions {
+  // display: flex;
+  // margin-top: 40rpx;
+  justify-content: center;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 20rpx;
+  transform: translateY(-50%);
+  padding: 20rpx;
+  .action {
+    font-size: 28rpx;
+    // width: 96rpx;
+    // height: 96rpx;
+    color: #fff;
+    font-family: "AlibabaPuHuiTiMedium";
+    text-align: center;
+
+    &:first-child {
+      // margin-right: 40rpx;
+      margin-bottom: 20rpx;
+    }
+
+    image {
+      width: 60rpx;
+      height: 60rpx;
+    }
+    image {
+    }
+  }
+}
+.sharePopup {
+  width: 100%;
+  padding: 40rpx;
+  height: 322rpx;
+  padding-top: 88rpx;
+  background-color: #ffff;
+  border-radius: 32rpx 32rpx 0 0;
+  .title {
+    border-radius: 32rpx 32rpx 0 0;
+    height: 100rpx;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 100rpx;
+    font-size: 36rpx;
+
+    image {
+      width: 48rpx;
+      height: 48rpx;
+      position: absolute;
+      top: 26rpx;
+      left: 32rpx;
+    }
+  }
+  .content {
+ 
+    display: flex;
+    justify-content: center;
+    view {
+      font-size: 24rpx;
+      font-family: "AlibabaPuHuiTiMedium";
+      text-align: center;
+
+      &:first-child {
+        margin-right: 56rpx;
+      }
+      image {
+        width: 88rpx;
+        height: 88rpx;
+        margin-bottom: 4rpx;
+      }
+    }
+  }
+}
+
+.exchangeCouponPopup {
+  width: 100%;
+  padding: 30rpx 48rpx;
+  // padding-top: 48rpx;
+  background-color: #ffff;
+  border-radius: 32rpx;
+  width: 654rpx;
+  .title {
+    // height: 100rpx;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // line-height: 100rpx;
+    font-size: 36rpx;
+    font-weight: bold;
+    padding: 0 24rpx;
+  }
+  .content {
+    margin-top: 15rpx;
+     .message{
+      margin-bottom: 10rpx;
+      >view{
+        &:first-child{
+          margin-bottom: 4rpx;
+        }
+      }
+    }
+    .subtitle {
+      font-size: 28rpx;
+      font-weight: bold;
+      margin-bottom: 16rpx;
+      text-align: center;
+    }
+    input {
+      // height: 100rpx;
+      background-color: #f6f6f6;
+      padding: 16rpx;
+      font-size: 28rpx;
+      text-align: left;
+      border-radius: 8rpx;
+    }
+    .tips {
+      font-size: 24rpx;
+      color: #e73e3d;
+      text-align: center;
+
+      margin-top: 56rpx;
+    }
+  }
+  .buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 36rpx;
+    > view {
+      width: 264rpx;
+      height: 80rpx;
+
+      border-radius: 40rpx 40rpx 40rpx 40rpx;
+      font-size: 32rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &:first-child {
+        margin-right: 30rpx;
+        background: #e9e9e9;
+      }
+
+      &:last-child {
+        background: linear-gradient( 90deg, #0BD690 0%, #00B0E0 100%);;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>