<template>
  <div class="bottomAll">
    <div class="time-range" v-if="status==='initial' || status==='none'">
      <div v-if="activity" :style="activityShow === true ? activityCss : null">
        {{activityName}}{{ activity.startTime |dateTime }} 至 {{ activity.endTime|dateTime }}
      </div>
    </div>
    <div v-if="status==='initial' && activityflg === 1">
      <div class="gate-block" v-if="showUploader">
        <van-uploader :after-read="afterRead">
          <Button class="start-button">
            请先上传照片参加活动
          </Button>
        </van-uploader>
      </div>
      <div class="tabscss" :style="tabscssTop">
        <div class="leftLineDiv" :style="tabFlg === 0 ? mainStyle : null" @click="tabClick(0)">全部图片</div>
        <div style="width:2%; "></div>
        <div class="RightLineDiv" :style="tabFlg === 1 ? mainStyle : null" @click="tabClick(1)">我上传的图片</div>
        <!--    全部图片-->
        <div class="tabsleftcss" v-if="tabFlg === 0" :style="tabsleftcss">
          <div v-if="this.gridtextlist.length > 0" style="margin-top: 0.2rem">
            <van-grid :border="false" :column-num="2" :gutter="gutter < 370 ? 6.6 : 8">
              <van-grid-item
                v-for="(item,index) in gridtextlist"
                :key="index">
                <div v-if="isTemplate">
                  <img class="pictureimgNameCss" :src="item.taskUploadPraiseDetails.link" @click="getImg(item.taskUploadPraiseDetails.link)"/>
                </div>
                <div v-else>
                  <van-image
                    width="3.38rem"
                    height="2.77rem"
                    fit="cover"
                    :src="item.taskUploadPraiseDetails.link"
                    @click="getImg(item.taskUploadPraiseDetails.link)"
                  />
                </div>
                <div class="pictureNameCss">
                  <div class="pictureNameLeftCss" style="float:left;" v-bind:title=item.taskUploadPraiseDetails.nickName>{{item.taskUploadPraiseDetails.nickName | ellipsis}}</div>
                  <div class="pictureNameRightCss" style="float:right;">
                    <div v-if="item.isMyPraiseFlag === '0'">
                      <div style="width:25%; float:left;">
                        <div class="circular1">
                          <img  style="padding-top: 0.07rem;margin-left: -0.2rem" @click="myPariseClick(item)" src="//img10.360buyimg.com/imgzone/jfs/t1/184823/35/7670/796/60bdf53aE4d368f11/b960966d72b3671e.png" />
                        </div>
                      </div>
                      <div style="width:75%; float:left;text-align: left;padding-top: 0.05rem;margin-left: -0.1rem; font-size: 0.3rem">{{item.taskUploadPraiseDetails.praiseCount}}</div>
                    </div>
                    <div v-else >
                      <div style="width:25%; float:left;">
                        <div class="circular1">
                          <img  style="padding-top: 0.07rem;margin-left: -0.2rem" @click="myPariseClick(item)" src="//img10.360buyimg.com/imgzone/jfs/t1/189006/36/7017/986/60bdf53aEba73afbf/7c5f79d703a9fd7a.png" />
                        </div>
                      </div>
                      <div style="width:75%; float:left;text-align: left;padding-top: 0.05rem;margin-left: -0.1rem; font-size: 0.3rem">{{item.taskUploadPraiseDetails.praiseCount}}</div>
                    </div>
                  </div>
                </div>
              </van-grid-item>
            </van-grid>
          </div>
          <div v-else class="lightbox">
            <div class="imgCss">
              <img src="//img10.360buyimg.com/imgzone/jfs/t1/174425/7/13354/5631/60bdf53aEf7401426/4c91bc5dd9a01fcb.png" />
            </div>
            <div class="imgNameCss">
              <span>暂时还没有人上传图片哟~</span>
            </div>
          </div>
        </div>
        <!--    我上传的图片-->
        <div v-else class="myPictureCss">
          <div class="myPictureLeftCss">
            <div v-for="(item, index) in fileList" v-show="item" :key="index">
              <div v-if="isTemplate">
                <img
                  v-if="item"
                  :src="item"
                  calss="img"
                  style="height: 2.39rem;width: 2.99rem"
                  @click="getImg(fileList[index])"
                />
              </div>
              <div v-else>
                <van-image
                  width="2.99rem"
                  height="2.39rem"
                  fit="cover"
                  :src="item"
                  @click="getImg(fileList[index])"
                />
              </div>
            </div>
          </div>
          <div class="myPictureRightCss">
            <div v-if="myinfo===0">
              <div style="margin-top: 0.2rem;" class="verifyStatusCss1">您上传的照片正在审核中</div>
              <div class="upbtncss1">
                <van-uploader :after-read="afterRead">
                  <div style="margin-top: 0.1rem">重新上传</div>
                </van-uploader>
              </div>
            </div>
            <div v-else-if="myinfo===2">
              <div style="margin-top: 0.4rem;" class="verifyStatusCss2">您上传的照片审核没有通过，请再次上传</div>
              <div class="upbtncss2">
                <van-uploader :after-read="afterRead">
                  <div style="margin-top: 0.1rem">重新上传</div>
                </van-uploader>
              </div>
            </div>
            <div v-else-if="myinfo===1">
              <div class="circular">
                <img  style="padding-top:0.03rem" @click="myPariseClick()" src="//img10.360buyimg.com/imgzone/jfs/t1/186139/11/7972/1300/60bdf53aE52f7f7f7/afbb7759197e94c5.png" />
              </div>
              <div class="zanCountCss">当前{{praiseCount}}个赞</div>
              <div class="uploadTimeCss">
                <span >上传于：{{uploadTime}}</span></div>
              <div class="btncss" @click="setShareButton()">
                <div style="width:20%; float:left;padding-left:0.2rem;padding-top: 0.05rem">
                  <div class="circular3">
                    <img  style="top: -0.07rem" src="//img10.360buyimg.com/imgzone/jfs/t1/188833/6/7048/898/60bdf53aEdaf101dd/2031e0cd736a61a9.png" />
                  </div>
                </div>
                <div class="" style="width:80%; float:left;text-align: left" >分享给好友点赞</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="drawCss" :style="drawCssTop" >
        <img  style="padding-top:0.03rem" @click="drawClick()" src="http://img10.360buyimg.com/imgzone/jfs/t1/182444/17/9901/50528/60cc6f13Eceff43fb/35b55ac53adaca9b.gif" />
      </div>
    </div>

    <div v-else-if="status==='initial' && activityflg === 2">
      <!--    排行榜-->
      <ranking :taskUploadPraiseDetailsList="taskUploadPraiseDetailsList"
               :myPlace="myPlace"
               :rankingFlag = "rankingFlag"
               :prizeListId = "prizeListId"
               :isTemplate = "isTemplate"
               @getPrize="getPrize">
      </ranking>
    </div>
    <!--    活动说明-->
    <activitydes :prizesCount="prizesCount" @closeClick="closeClick" @participateClick="participateClick" v-if="showActivity">
    </activitydes>
    <!--    好友点赞-->
    <praise :pictureUrl="pictureUrl" @praiseCloseClick="praiseCloseClick" @praiseClick="praiseClick(1)" v-if="showPraise">
    </praise>
    <div><p class="tipCss" v-if="tipDis">{{ tip }}</p></div>
  </div>
</template>

<script>
import Vue from 'vue';
import {Button,Grid, GridItem,Tab, Tabs,Uploader,Icon,ImagePreview,Image as VanImage} from "vant";
import {callShare4MiniProgram} from '../../../util/share';
import apis1 from '../../../util/apis1.js';
import dateUtil from "../../../util/dateUtil.js";
import { getUrlQueryValueByKey } from '../../../util/tools.js';
import store from '../../../store/store.js';
import activitydes from './components/activityDescription.vue';
import praise from './components/praisePictures.vue';
import ranking from './components/ranking.vue';
import { joinVipService } from '../../../util/comCreate.js';
Vue.use(Uploader);
Vue.use(Icon);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(ImagePreview);
Vue.use(VanImage);
let { setShare,upLoadPictures,activityQueryIndex,clickPraise,checkMember} = apis1;

export default {
  props: ['isTemplate', 'datas', 'styleData', 'keyData', 'templateData'],
  components: {
      Button,
      Grid,
      GridItem,
      activitydes,
      praise,
      ranking,
    },
     data() {
         return {
             activityShow:false,
             activityName:'活动时间:',
             activityCss:{
                 'font-size': '12px',
                 '-webkit-transform':'scale(0.85)',
                 'margin-left':'-0.1rem',
             },
             //不满足条件
             tipDis:false,
             tabscssTop:{
                 'margin-top':'-.8rem'
             },
             drawCssTop:{
                 'margin-top':window.innerHeight - 335 + 'px'
             },
             tabsleftcss:{
             },
             mainStyle:{
                 'background-color':'#8393AC',
                 'color':'#fff',
             },
             //排行榜数据
             taskUploadPraiseDetailsList:[],
             //所有图片
             taskUpLoadPraiseDTOList:[],
             //我们名次
             myPlace:null,
             //排行榜领奖状态
             rankingFlag:null,
             //活动/排行版显示
             //1:全部图片  2:我上传的图片
             activityflg:1,
             //点赞图片地址
             pictureUrl:null,
             //可活动奖品总人数 活动说明中显示
             prizesCount:null,
             //每praiseNum次点赞可以抽奖一次
             zanDatas:{},
             //请先上传照片参加活动显示状态
             showUploader:true,
             //活动说明显示状态
             showActivity:false,
             //好友点赞显示状态
             showPraise:false,
             //0:全部图片  1:我上传的图片
             tabFlg:0,
             gutter:document.body.clientWidth,
              //请先上传照片参加活动显示状态
             participate: true,
              //图片主键
             detailsId :'',
              /**
               * 图片审核状态
               * 0:您上传的照片正在审核中
               * 1:当前点赞数(审核通过)
               * 2:您上传的照片审核没有通过，请再次上传
               */
             myinfo:null,
             //得赞数
             praiseCount:null,
             //上传照片时间
             uploadTime:null,
             /**
             * 活动状态
             * 0：默认状态,没有含义
             * 1:活动尚未开始
             * 2:活动已结束
             * 3:活动正常进行
             */
             actStatus: '0',
              //初期活动状态
             status: 'none',
             // 活动信息
             activity: null,
             //领取奖品ID
             prizeListId:null,
             //视频领取奖品ID
             shareFriendprizesId:null,
             //是否是分享者本人
             myself: false,
             //全部图片
             gridtextlist:[],
             //我上传的图片
             fileList: [],
         }
      },

     created() {
         this.publicData.$on('activityLoaded', this.activityLoaded);
      },

     methods : {
       // 活动加载完成
       activityLoaded(data) {
           if (this.isTemplate) {
               console.log("tabValue---",store.state.tabValue)
               //模板预览时期
               if (store.state.tabValue) {
                   this.setPreviewData(this.datas.previewData,store.state.tabValue);
               }
               else
               {
                   //选择模板预览的情况：store.state.tabValue === undefined 的场合
                   this.setPreviewData(this.datas.previewData,"4");//显示排行榜
               }
           }
           else{
               this.activity = data;
               this.setGate();
           }
       },
       // 设置入口
       setGate() {
           this.actStatus = sessionStorage.getItem("actStatus");
           if (this.actStatus === '3') {
               this.initData("2");
           }
       },
       //数据加载
       initData(selectFlag) {
           if(store.state.shareUserId !== undefined && store.state.shareUserId !== null && store.state.shareUserId !== ''){
               checkMember().then(res => {
                   if (res.resp_code == 0) {
                       if(res.data !== undefined && res.data !== null){
                           if (res.data.joinInfo !== undefined && res.data.joinInfo !== null) {
                               joinVipService.create(res.data, submit => {
                                   joinVipService.close();
                                   return;
                               });
                           }
                       }
                       else{
                           activityQueryIndex({
                               //shareUserId
                               shareUserId: store.state.shareUserId,
                               selectFlag: selectFlag
                           }).then(rest => {
                               this.initSetData(rest,selectFlag)
                           });
                       }
                   }
               });
           }
           else{
               activityQueryIndex({
                   //shareUserId
                   shareUserId: store.state.shareUserId,
                   selectFlag: selectFlag
               }).then(res => {
                   this.initSetData(res,selectFlag)
               });
           }
       },
       initSetData(res,selectFlag){
           if(res.resp_code === 0){
               this.status = 'initial';
               const data = res.data;
               //点赞人进入
               if(store.state.shareUserId != undefined){
                   if(store.state.shareUserId !== ''){
                       if(data.imgIsMyPraiseFlag === '0'){
                           this.showPraise = true;
                           //分享图片信息
                           let myinfo = data.myTaskUploadPraiseDetailsImg;
                           if(myinfo !== undefined){
                               //好友点赞图片
                               this.pictureUrl = [myinfo.link];
                           }
                       }
                   }
               }
               //显示排行榜
               if(data.flag !== undefined){
                   this.activityflg = 2;
                   //我的名次
                   this.myPlace = data.myPlace;
                   //排行榜领奖状态
                   this.rankingFlag = data.flag;
                   //领取奖品ID
                   this.prizeListId = data.prizeInfoId;
                   //排行榜数据
                   this.taskUploadPraiseDetailsList = data.taskUploadPraiseDetailsList;
               }
               else{//显示活动画面
                   //每*个赞可以抽奖一次
                   this.zanDatas.zanCount = data.praiseNum;
                   //最大获奖次数
                   this.zanDatas.zanFlg = data.winNumber;
                   //全部图片的情况
                   if(selectFlag === "1"){
                       //所有图片
                       if(data.taskUpLoadPraiseDTOList != undefined){
                           this.gridtextlist = data.taskUpLoadPraiseDTOList;
                           if(this.showUploader){
                               this.tabsleftcss = {
                                   'height': window.innerHeight - 290 + 'px'
                               }
                           }
                           else{
                               this.tabsleftcss = {
                                   'height': window.innerHeight - 230 + 'px'
                               }
                           }
                       }
                       else{
                           this.tabsleftcss = {
                               'height': '10rem'
                           }
                       }
                   }
                   else{
                       //我上传的图片
                       let myinfo = data.myTaskUploadPraiseDetails;
                       if(myinfo !== undefined){
                           //隐藏【请先上传照片参加活动】
                           this.showUploader = false;
                           this.tabscssTop = {
                               'margin-top':'0.3rem'
                           },
                               //显示我上传的图片
                               this.tabFlg = 1;
                           //我上传的图片主键
                           this.detailsId = myinfo.id;
                           //我上传的图片
                           this.fileList = [myinfo.link];
                           //审核状态：0：待审核 1:审核通过 2:未通过
                           this.myinfo = myinfo.verifyStatus;
                           //得赞数
                           this.praiseCount = myinfo.praiseCount;
                           //上传照片时间
                           if (myinfo.uploadTime) {
                               this.uploadTime = dateUtil.formatTime(myinfo.uploadTime, 'yyyy-MM-dd hh:mm');
                           }
                       }
                       else{
                           //可活动奖品总人数
                           this.prizesCount = data.num;
                           this.showActivity = true;
                       }
                   }
               }
           }
           else if(res.resp_code === 50009){
               location.reload();
           }
           else{
               if(res.resp_code == 60010 || res.resp_code == 60008){
                   this.tipDis = true;
                   this.tip = '不满足参加条件';
               }
               this.$toast({
                   duration: 0, // 持续展示 toast
                   forbidClick: true,
                   message: res.resp_msg,
               });
               //3秒后消失
               var x = setTimeout(() => {
                   this.publicData.$emit('follow', true);
                   clearTimeout(x);
                   this.$toast.clear()
               }, 3000);
           }
       },
       //抽奖
       drawClick(){
           if (this.isTemplate) {
               this.zanDatas.zanCount = 5;
               this.zanDatas.zanFlg = 3;
               this.publicData.$emit('picDrawShow', this.zanDatas);
           } else {
               this.publicData.$emit('picDrawShow', this.zanDatas);
           }
       },
       //请先上传照片参加活动 回调函数
       async afterRead(file) {
           if(this.isTemplate) {//预览模式返回
               this.$toast('活动预览，仅供查看');
               return;
           }
           if(file.file.size > 11534336){//1048500(1MB)、11534336【11M】、20971300(20M)、31457280(22M)
               this.$toast({
                   duration: 0, // 持续展示 toast
                   forbidClick: true,
                   message: '上传图片的大小应该在10MB以内',
               });
               //3秒后消失
               var x = setTimeout(() => {
                   this.publicData.$emit('follow', true);
                   clearTimeout(x);
                   this.$toast.clear()
               }, 3000);
               return;
           }
           //压缩图片
           var files = await this.compressImg(file.file);
           var newfiles =new File([files],file.file.name,{type:file.file.type});
           //var newfiles = file.file;
           // 此时可以自行将文件上传至服务器
           var formData = new FormData();
           formData.append("file", newfiles);
           upLoadPictures(formData).then(res => {
               if (res.resp_code == 0) {
                   //隐藏【请先上传照片参加活动】
                   this.showUploader = false;
                   this.tabscssTop = {
                       'margin-top':'0.3rem'
                   },
                   //显示我上传的图片
                   this.tabFlg = 1;
                   //图片审核状态(待审核)
                   this.myinfo = 0;
                   //绑定我上传的图片
                   this.fileList = [res.data];
               }
           });
       },
       //tab切换
       tabClick(flg){
           if(this.showUploader === false){
               this.tabFlg = flg;
               if(!this.isTemplate){//非预览模式
                   this.initData((flg + 1).toString());
               }
           }
       },
       //点赞处理
       myPariseClick(values){
           if(this.isTemplate) {//预览模式返回
               this.$toast('活动预览，仅供查看');
               return;
           }
           let detailsId = this.detailsId;
           if(values != undefined){
               detailsId = values.taskUploadPraiseDetails.id;
           }
           clickPraise({
               detailsId: detailsId
           }).then(res => {
               if(res.resp_code === 0){
                   if(res.data.flag === '002'){
                       //全部图片赞数判断
                       if(values != undefined){
                           //当前图片点赞总数
                           values.taskUploadPraiseDetails.praiseCount = res.data.num;
                           //点过赞标识
                           values.isMyPraiseFlag = "1";
                       }
                       else{
                           this.praiseCount = res.data.num
                       }
                   }
               }
               else{
                   //50023 集赞周期已结束
                   console.log(res.resp_code +"---"+ res.resp_msg);
                   this.$toast({
                       duration: 0, // 持续展示 toast
                       forbidClick: true,
                       message: res.resp_msg,
                   });
                   //3秒后消失
                   var a = setTimeout(() => {
                       this.publicData.$emit('follow', true);
                       clearTimeout(a);
                       this.$toast.clear()
                   }, 3500);
                   this.initData();
               }
           });
       },
       //查看图片
       getImg(images) {
           ImagePreview({
               images: [images],
               showIndex: false,
               loop: false,
               startPosition: 0
           });
       },
        /**
         * 活动状态.
         * 1:活动尚未开始
         * 2:活动已结束
         * 3:活动进行中
         */
       setShareButton() {
            if(this.isTemplate) {//预览模式返回
                this.$toast('活动预览，仅供查看');
                return;
            }
            // 1.从sessionStroage中取得活动的状态.
            let actStatus = sessionStorage.getItem('actStatus');
            if (!this.isTemplate) {//不是模板的场合.
                if (actStatus == 2) {
                    this.$toast('活动已结束');
                    return;
                }
                if (actStatus == 1) {
                    this.$toast('活动尚未开始');
                    return;
                }
                if (actStatus == 3) {//活动进行中
                    setShare(data => {
                        var cur_url = location.href;
                        var shareUserId = getUrlQueryValueByKey('shareUserId', cur_url);
                        var aUrl = cur_url.substring(0, cur_url.indexOf('shareUserId') + 1);
                        if (shareUserId) {
                            var invitionUrl = aUrl + '&shareUserId=' + data.data.shareUserId;
                        } else {
                            var invitionUrl = location.href + data.data.shareUserId;
                        }
                        //Test
                        store.state.clientType = '01';
                        if (store.state.clientType == '01') {
                            var title = store.state.shareTitle;
                            var content = store.state.shareTitle;
                            var logoUrl = store.state.shareImage;
                            var mpIconUrl = store.state.shareImage;

                            var isHeader = false; //false 头部分享 true 按钮分享
                            var url = invitionUrl;
                            var shopid = store.state.shopId;
                            var userpin = store.state.userPin;
                            var jdactivityid = store.state.jdActivityId;
                            console.log("分享口令url      " + url);
                            callShare4MiniProgram(
                                title,
                                content,
                                url,
                                logoUrl,
                                callBack => {
                                    console.log('测试分享');
                                },
                                isHeader,
                                mpIconUrl,
                                shopid,
                                userpin,
                                jdactivityid
                            );
                        }
                    });
                }
            }else {
                this.show = true;
                this.url = invitionUrl.replace('index/', '');
            }
        },

       //关闭好友图片点赞
       praiseCloseClick(){
             this.showPraise = false;
         },
       //好友图片点赞
       praiseClick(msg){
             this.showPraise = false;
         },
       //关闭活动说明
       closeClick() {
           this.initData("1");
           this.showActivity = false;
       },
       //活动说明按钮【确认参与】
       participateClick() {
           this.initData("1");
           this.showActivity = false;
        },
       //活动说明按钮【确认参与】
       getPrize() {
           this.initData("2");
       },
       // 设置预览数据
       setPreviewData(data,flg) {
           this.status = 'initial';
           //手机预览的情况
           let letBrowser = this.getBrowser();
           if(letBrowser.plat === "android" || letBrowser.plat === "iphone"){
           }
           else{
               this.activityShow = true;
               this.activityName = '活动时间:';
           }
           if(flg === "6"){//活动主页
               this.tabsleftcss = {
                   'height': '10rem'
               }
           }
           else if(flg === "7"){//集赞期
               //隐藏【请先上传照片参加活动】
               this.showUploader = false;
               this.tabscssTop = {
                   'margin-top':'0.3rem'
               },
               //显示我上传的图片
               this.tabFlg = 1;
               //我上传的图片
               this.fileList = [data.myUpload.link];
               //审核状态：0：待审核 1:审核通过 2:未通过
               this.myinfo = data.myUpload.verifyStatus;
               //得赞数
               this.praiseCount = data.myUpload.praiseCount;
               //上传照片时间
               this.uploadTime = data.myUpload.uploadTime;
               //所有图片
               this.gridtextlist = data.myUpload.gridtextlist;
           }
           else if(flg === "3"){//排行榜
               this.activityflg = 2;
               //我的名次
               this.myPlace = data.myRanking.myPlace;
               //排行榜领奖状态
               this.rankingFlag = data.myRanking.flag;
               //排行榜数据
               this.taskUploadPraiseDetailsList = data.myRanking.taskUploadPraiseDetailsList;
           }
           else if(flg === "4"){//选择模板排行榜
               this.activityflg = 2;
               //我的名次
               this.myPlace = data.myRankingChoice.myPlace;
               //排行榜领奖状态
               this.rankingFlag = data.myRankingChoice.flag;
               //排行榜数据
               this.taskUploadPraiseDetailsList = data.myRankingChoice.taskUploadPraiseDetailsList;
           }
       },
        //判断是否手机端浏览
       getBrowser(){
             var ua = navigator.userAgent.toLowerCase();
             var btypeInfo = (ua.match( /firefox|chrome|safari|opera/g ) || "other")[ 0 ];
             if( (ua.match( /msie|trident/g ) || [] )[ 0 ] )
             {
                 btypeInfo = "msie";
             }
             var pc = "";
             var prefix = "";
             var plat = "";
             //如果没有触摸事件 判定为PC
             var isTocuh = ("ontouchstart" in window) || (ua.indexOf( "touch" ) !== -1) || (ua.indexOf( "mobile" ) !== -1);
             if( isTocuh )
             {
                 if( ua.indexOf( "ipad" ) !== -1 )
                 {
                     pc = "pad";
                 } else if( ua.indexOf( "mobile" ) !== -1 )
                 {
                     pc = "mobile";
                 } else if( ua.indexOf( "android" ) !== -1 )
                 {
                     pc = "androidPad";
                 } else
                 {
                     pc = "pc";
                 }
             } else
             {
                 pc = "pc";
             }
             switch( btypeInfo )
             {
                 case "chrome":
                 case "safari":
                 case "mobile":
                     prefix = "webkit";
                     break;
                 case "msie":
                     prefix = "ms";
                     break;
                 case "firefox":
                     prefix = "Moz";
                     break;
                 case "opera":
                     prefix = "O";
                     break;
                 default:
                     prefix = "webkit";
                     break
             }
             plat = (ua.indexOf( "android" ) > 0) ? "android" : navigator.platform.toLowerCase();
             return {
                 version: (ua.match( /[\s\S]+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[ 1 ],     //版本
                 plat: plat,                   //系统
                 type: btypeInfo,              //浏览器
                 pc: pc,
                 prefix: prefix,                //前缀
                 isMobile: (pc == "pc") ? false : true              //是否是移动端
             };
         },
       //压缩图片
       compressImg(file) {
           var src;
           var files;
           var fileSize = parseFloat(parseInt(file['size']) / 1024 / 1024).toFixed(2);
           var read = new FileReader();
           read.readAsDataURL(file);
           return new Promise(function (resolve, reject) {
               read.onload = function (e) {
                   var img = new Image();
                   img.src = e.target.result;
                   img.onload = function () {
                       //默认按比例压缩
                       var w = this.width,
                           h = this.height;
                       //生成canvas
                       var canvas = document.createElement('canvas');
                       var ctx = canvas.getContext('2d');
                       var base64;
                       // 创建属性节点
                       canvas.setAttribute("width", w);
                       canvas.setAttribute("height", h);
                       ctx.drawImage(this, 0, 0, w, h);
                       if (fileSize < 1) {
                           //如果图片小于一兆 那么不执行压缩操作
                           base64 = canvas.toDataURL(file['type'], 1);
                       } else if (fileSize > 1 && fileSize < 2) {
                           //如果图片大于1M并且小于2M 那么压缩0.5
                           base64 = canvas.toDataURL(file['type'], 0.5);
                       } else if (fileSize >= 2 && fileSize < 10) {
                           //如果图片大于等于2M并且小于10M 那么压缩0.1
                           base64 = canvas.toDataURL(file['type'], 0.1);
                       // } else if (fileSize >= 10 && fileSize < 11) {
                       //     //如果图片大于1M并且小于2M 那么压缩0.5
                       //     base64 = canvas.toDataURL(file['type'], 0.09);
                       }
                       else{//10-11M的情况
                           base64 = canvas.toDataURL(file['type'], 0.09);
                       }
                       // 回调函数返回file的值（将base64编码转成file）
                       //files = this.dataURLtoFilea(base64); //如果后台接收类型为base64的话这一步可以省略

                       var arr = base64.split(','),
                           mime = arr[0].match(/:(.*?);/)[1],
                           bstr = atob(arr[1]),
                           n = bstr.length,
                           u8arr = new Uint8Array(n);
                       while (n--) {
                           u8arr[n] = bstr.charCodeAt(n);
                       }
                       files =  new File([u8arr], { type: mime });
                       resolve(files)
                   };
               };
           })
       },
     },

     filters: {
          //时间转换
          dateTime(val) {
              if (val) {
                  return dateUtil.formatTime(val, 'yyyy-MM-dd hh:mm');
              }
              return val;
          },
          ellipsis(value) {
              if (!value) return ''
              if (value.length > 5) {
                  return value.slice(0, 5) + '...'
              }
              return value
          },
      }
};
</script>

<style lang="scss" scoped>
.bottomAll{
  background-image: url('//img10.360buyimg.com/imgzone/jfs/t1/108784/13/29053/654203/62943844Eae805673/6524ac32926ce81b.png');
  width: 7.5rem;
  height: 8.54rem;
}
.tipCss {
  font-size: 0.3rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.78rem;
  letter-spacing: 0rem;
  color: #fefefe;
  margin: 0.5rem;
  line-height: 1;
  margin-top: 6.1rem;
}
.time-range {
   font-size: 0.22rem;
   color: #d8e4ff;
   text-align: center;
   position: absolute;
   top: 1.65rem;
   left: 0;
   width: 100%;
 }

.shareImage {
  width: 3rem;
  height: 2rem;
}
.gate-block {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -2.3rem;
}
.start-button {
  width: 4.95rem;
  height: 0.74rem;
  background-image: linear-gradient(0deg,
    #fde79e 1%,
    #f9d489 50%,
    #f4c174 100%),
  linear-gradient(
      #dcaf57,
      #dcaf57);
  background-blend-mode: normal,
  normal;
  border-radius: 0.1rem;
  font-family: MicrosoftYaHei;
  font-size: 0.36rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.36rem;
  letter-spacing: 0rem;
  color: #070a1e;
}
.pictureimgNameCss{
  height: 2.77rem;
  width: 3.38rem;
}
.pictureNameCss{
  width: 3.38rem;
  height: 0.66rem;
  background-color: #eaebf0;
  border-bottom-left-radius: 0.05rem;
  border-bottom-right-radius: 0.05rem;
  text-align: left;
  margin-top: -0.11rem;
}
.pictureNameLeftCss{
  width: 2rem;
  height: 0.25rem;
  font-size: 0.27rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.36rem;
  letter-spacing: 0rem;
  color: #070a1e;
  padding-left: 0.2rem;
  text-align: left;
  padding-top:0.19rem
}
.pictureNameRightCss{
  width: 1.30rem;
  height: 0.24rem;
  font-family: Roboto-Regular;
  font-size: 0.31rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.36rem;
  letter-spacing: 0rem;
  color: #070a1e;
  padding-top:0.10rem
}
.tabscss{
  position: absolute;
  width:6.9rem;
  height: 0.86rem;
  left: 50%;
  transform:translateX(-50%);
  border-width: 0 0 2px 0;
  border-style: solid;
  border-color: #8393AC;
}
.tabsleftcss{
  position: absolute;
  margin-top: 0.85rem;
  left: 50%;
  transform:translateX(-50%);
  width:7.2rem;
  clear: both;
  overflow-y: scroll;
  padding-bottom: 1rem;
}
//全部图片背景
.tabsleftDiscss{
  left: 50%;
  transform:translateX(-50%);
  position: absolute;
  width: 6.9rem;
  height: 6.83rem;
  background-color: #8393ac;
  border-radius: 0.1rem;
  opacity: 0.35;
  z-index: 0;
  text-align: center;
}
.tabsleftDiscssimg{
  width: 2.16rem;
  height: 1.67rem;
  background-color: #ffffff;
  opacity: 0.47;
  z-index: 1;
}
.leftLineDiv {
  border-top-left-radius: 0.15rem;
  border-top-right-radius: 0.15rem;
  width:3.39rem;
  float:left;
  height:0.82rem;
  padding-top:0.18rem;
  background-color: #fff;
}

.RightLineDiv {
  border-top-left-radius: 0.15rem;
  border-top-right-radius: 0.15rem;
  width:3.39rem;
  float:right;
  height:0.82rem;
  padding-top:0.18rem;
  background-color: #fff;
}
//我上传的图片
.myPictureCss{
  position: absolute;
  margin-top:0.86rem;
  width: 6.9rem;
  height: 6.39rem;
  background-color:rgba(131,147,172,0.35);
  border-radius: 0 0 0.1rem 0.1rem;
  z-index: 0;
}
//我上传的图片
.myPictureLeftCss{
  width: 2.99rem;
  height: 2.39rem;
  margin-top:0.38rem;
  margin-left: 0.22rem;
  opacity: 1;
  z-index: 100;
}
//我上传的图片
.myPictureRightCss{
  padding-left: 3.39rem;
  margin-top:-2.4rem;
  z-index: 200;
}
.verifyStatusCss1{
  font-size: 0.28rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 1.08rem;
  letter-spacing: 0rem;
  color: #fefefe;
  text-align: left;
  padding-left: 0.2rem;
}
.verifyStatusCss2{
  height: 0.68rem;
  font-size: 0.28rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #fefefe;
  text-align: left;
  padding-left: 0.2rem;
}
/*无用 for fileList*/
.myPictureImgCss{
  position:relative;
  width: 2.99rem;
  height: 2.39rem;
  background-color: #ffffff;
  border-radius: 0.05rem;
  padding-left: 0.22rem;
  overflow: hidden;
}

//重新上传
.upbtncss1{
  position:absolute;
  width: 2.03rem;
  height: 0.54rem;
  background-image: linear-gradient(0deg,
    #6f81a6 1%,
    #eaebf0 100%),
  linear-gradient(
      #dcaf57,
      #dcaf57);
  background-blend-mode: normal,
  normal;
  border-radius: 0.1rem;
  font-size: 0.29rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #070a1e;
  margin-top: 0.2rem;
  margin-left: 0.5rem;
}
//重新上传
.upbtncss2{
  position:absolute;
  width: 2.03rem;
  height: 0.54rem;
  background-image: linear-gradient(0deg,
    #6f81a6 1%,
    #eaebf0 100%),
  linear-gradient(
      #dcaf57,
      #dcaf57);
  background-blend-mode: normal,
  normal;
  border-radius: 0.1rem;
  font-size: 0.29rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0rem;
  color: #070a1e;
  margin-top: 0.4rem;
  margin-left: 0.5rem;
}
//圆圈点赞
.circular{
  width: 0.58rem;
  height:0.58rem;
  margin:0 auto;
}
//圆圈点赞
.circular1{
  width: 0.32rem;
  height: 0.33rem;
  margin:0 auto;
}
//圆圈分享
.circular3{
  width: 0.31rem;
  height: 0.31rem;
  margin:0 auto;
}
//当前点赞数
.zanCountCss{
  margin:0 auto;
  height: 0.35rem;
  font-size: 0.37rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.36rem;
  letter-spacing: 0rem;
  color: #fefefe;
  margin-top: 0.2rem;
}
//上传图片时间
.uploadTimeCss{
  /*width: 2.75rem;*/
  height: 0.22rem;
  font-size: 0.23rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.36rem;
  letter-spacing: 0rem;
  color: #6ac5d8;
  margin-top: 0.15rem;
}
//分享给好友点赞
.btncss{
  margin:0 auto;
  width: 3.03rem;
  height: 0.54rem;
  background-image: linear-gradient(0deg,
    #6f81a6 1%,
    #eaebf0 100%),
  linear-gradient(
      #dcaf57,
      #dcaf57);
  background-blend-mode: normal,normal;
  border-radius: 0.1rem;
  font-size: 0.3rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.36rem;
  letter-spacing: 0rem;
  color: #070a1e;
  padding-top: 0.09rem;
  margin-top: 0.3rem;
}
//转盘抽奖
.drawCss{
  position:absolute;
  border-radius: 60px;
  width: 1.3rem;
  height: 1.3rem;
  font-size: 0.22rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.36rem;
  letter-spacing: 0rem;
  color: #0b142b;
  z-index: 100;
  padding-top:0.25rem;
}
.lightbox{
  position: absolute;
  left: 50%;
  transform:translateX(-50%);
  width: 6.9rem;
  height: 6.83rem;
  z-index:101;
  background-color: #8393ac;
  border-radius: 0 0 0.1rem 0.1rem;
  opacity: 0.35;
}
.imgCss{
  position: absolute;
  left: 50%;
  transform:translateX(-50%);
  width: 2.16rem;
  height: 1.67rem;
  z-index:105;
  margin-top: 2.1rem;
}
.imgNameCss{
  position: absolute;
  left: 50%;
  transform:translateX(-50%);
  height: 0.27rem;
  font-size: 0.29rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0.36rem;
  letter-spacing: 0rem;
  color: #fefefe;
  margin-top: 4.2rem;
}
</style>

<style lang="scss">
  .van-grid-item{

    .van-grid-item__content{
      width: 3.36rem;
      display:-webkit-box;
      display:-webkit-flex;display:flex;
      -webkit-box-orient:vertical;
      -webkit-box-direction:normal;
      -webkit-flex-direction:column;
      flex-direction:column;
      box-sizing:border-box;
      padding:0px!important;
      border-top-left-radius: 0.1rem;
      border-top-right-radius: 0.1rem;
      border-bottom-left-radius: 0.1rem;
      border-bottom-right-radius: 0.1rem;
    }
  }
  .van-tabs__content{
    padding-top: 0.3rem;
  }
  .van-tabs__wrap{
    border-top-left-radius: 0.2rem;
    border-top-right-radius: 0.2rem;
  }
  /*body{*/
  /*  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/195335/37/2478/1252077/609a5d9cE957e265d/95a3117a1d8bb6ad.png);*/
  /*  background-attachment: fixed;*/
  /*  background-repeat: no-repeat;*/
  /*  background-size: cover;*/
  /*  height: 100vh;*/
  /*}*/
</style>

