mp_exhibitor_miniprog/pages/user/index.vue

<template>
  <page-layout class="user-index">
    <nav-bar title="个人中心" @init="onInitNavbar"></nav-bar>
    <u-scroll-view :tabbar-conflict="true">
      <view class="main-container">
        <view class="user-info" @click="navigateToAdLink('/pages/user/info')">
          <view class="user-avator">
            <image v-if="isLoginState && avatar" :src="avatar"/>
            <van-icon v-else class="icon" name="user"/>
          </view>
          <view class="user-title">
            <view class="user-name">
              <template v-if="isLoginState">{{ nickName || phone }}</template>
              <template v-else>请登录/注册</template>
            </view>
            <view v-if="isLoginState && nickName" class="user-phone">手机号：{{ phone }}</view>
          </view>
          <view class="user-option" @click.stop="navigateToAdLink('/pages/user/setting')">
            <view class="iconfont icon-setting"></view>
            <view>设置</view>
          </view>
        </view>
        <view class="user-grid-menu">
          <view hover-class="active" @click="navigateToAdLink('/pages/user/like')">
            <view class="iconfont icon-heart1"></view>
            <view>点赞</view>
          </view>
          <view hover-class="active" @click="navigateToAdLink('/pages/user/favorites')">
            <view class="iconfont icon-Favourites-Add-Large"></view>
            <view>收藏</view>
          </view>
          <view hover-class="active" @click="navigateToAdLink('/pages/user/vote')">
            <view class="iconfont icon-xiaochengxu-toupiaoicon"></view>
            <view>投票</view>
          </view>
          <view hover-class="active" @click="navigateTo('https://pc.global-eservice.com/h5/?lang=cn&channel=xcx#/')">
            <view class="iconfont icon-bishi"></view>
            <view>参观登记</view>
          </view>
        </view>
        <view class="user-list-item">
<!--          <van-cell-group>
            <van-cell title="我的奖品" icon="iconfont icon-jiangpin" is-link @click="navigateToAdLink('/pages/disclaimer/privacy')">
            </van-cell>
            <van-cell title="奖品核销" icon="iconfont icon-saoyisao_1" is-link @click="navigateToAdLink('/pages/disclaimer/privacy')">
            </van-cell>
            <van-cell title="隐私政策" is-link @click="navigateToAdLink('/pages/disclaimer/privacy')">
            </van-cell>
            <van-cell title="法律信息" is-link @click="navigateToAdLink('/pages/disclaimer/legalNotice')">
            </van-cell>
          </van-cell-group>-->
          <view class="user-item" @click="navigateToAdLink('/pages/user/award')">
            <view class="iconfont icon-jiangpin"></view>
            <text class="user-item-text">我的奖品</text>
            <view class="iconfont icon-Left-1"></view>
          </view>
          <view class="user-item" @click="scanCodeEvent()" v-if="is_super">
            <view class="iconfont icon-saoyisao_1"></view>
            <text class="user-item-text">奖品核销</text>
            <view class="iconfont icon-Left-1"></view>
          </view>
          <view class="user-item" @click="navigateToAdLink('/pages/disclaimer/privacy')">
            <text class="user-item-text">隐私政策</text>
            <view class="iconfont icon-Left-1"></view>
          </view>
          <view class="user-item" @click="navigateToAdLink('/pages/disclaimer/legalNotice')">
            <text class="user-item-text">法律信息</text>
            <view class="iconfont icon-Left-1"></view>
          </view>
        </view>
        <van-overlay :show="prizeShow">
          <view class="overlay_wrapper">
            <view class="overlay_body">
              <view class="overlay_title">
                <view class="iconfont icon-Check"></view> 核销奖品成功
              </view>
              <view class="overlay_image">
                <image mode="widthFix" :src="decodeInfo.picture_url"></image>
              </view>
              <view class="overlay_name">
                奖品：{{ decodeInfo.name }}
              </view>
              <view class="overlay_desc">
                打卡路线
                <text>{{ decodeInfo.route_count }}条</text>
              </view>
            </view>
            <view class="iconfont icon-Cancel-copy" @click="hideOverlay"></view>
          </view>
        </van-overlay>
        <view class="ad-space" v-if="adInfo && adInfo.ad_file" @tap="navigateToAdLink(adInfo.ad_link)">
          <image :src="adInfo.ad_file" mode="widthFix"/>
        </view>
      </view>
    </u-scroll-view>
  </page-layout>
</template>

<script>
import NavBar from '@/components/layout/nav-bar'
import UScrollView from '@/components/common/u-scroll-view'
import VanCell from '@/wxcomponents/vant/cell/index'
import VanOverlay from '@/wxcomponents/vant/overlay/index'
import VanCellGroup from '@/wxcomponents/vant/cell-group/index'
import PageLayout from "@/components/layout/page-layout";
import {getAdInfo} from '@/api'
import store from "@/store";
import {qrcodeDecode} from "@/api/checkIn";
import Toast from "@/wxcomponents/vant/toast/toast";

export default {
  options: {
    styleIsolation: 'shared'
  },
  components: {
    PageLayout,
    NavBar,
    UScrollView,
    VanCell,
    VanCellGroup,
    VanOverlay
  },
  computed: {

    isLoginState() {
      return this.$store.getters.user !== null
    },
    avatar() {
      const user = this.$store.getters.user
      if (user) {
        return user.avatar
      } else {
        return ''
      }
    },
    nickName() {
      const user = this.$store.getters.user
      if (user) {
        return user.nick_name
      } else {
        return ''
      }
    },
    phone() {
      const user = this.$store.getters.user
      if (user) {
        return user.phone
      } else {
        return ''
      }
    },
    is_super() {
      const user = this.$store.getters.user
      if (user) {
        return user.is_super === 2
      } else {
        return ''
      }
    }
  },
  data() {
    return {
      prizeShow: false,
      decodeInfo: {},
      adInfo: {
        ad_file: ''
      }
    }
  },
  created() {
    this.getAdData()
  },
  methods: {
    hideOverlay() {
      this.prizeShow = false
      this.decodeInfo = {}
    },
    getSceneParamsEvent(finalStr) {
      const {a, t} = finalStr.split('&').reduce((obj, pair) => {
        const [key, value] = pair.split('=');
        obj[key] = Number(value) || null; // 自动转数字
        return obj;
      }, {});
      return {a: a, t: t}
    },
    scanCodeEvent() {
      let that = this
      wx.scanCode({
        onlyFromCamera: true,
        success (res) {
          let scene = res.path.split('scene=')
          const decoded = decodeURIComponent(scene[1])
              .replace(/\%/g, '%25'); // 防止二次解码丢失%
          const finalStr = decodeURIComponent(decoded);
          that.qrcodeDecodeEvent(finalStr,()=>{
            that.prizeShow = true
          })
        }
      })
    },
    qrcodeDecodeEvent(scene, callback) {
      qrcodeDecode({scene: scene}).then(res => {
        if (res.code === 0) {
          Toast.success('核销奖品成功');
          this.decodeInfo = res.data
          if (callback) {
            callback()
          }
        }
      })
    },
    getAdData() {
      getAdInfo({
        number: "UserCenter001"
      }).then(res => {
        this.adInfo = res.data[0]
      })
    },
    navigateToAdLink(href) {
      if (!store.getters.user) {
        this.navigateTo('/pages/user/login?redirect=' + encodeURIComponent(href))
        return false
      } else {
        this.navigateTo(href)
      }
    }
  }
}
</script>

<style lang="scss">
.overlay_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  .overlay_body {
    background-color: #ffffff;
    padding: 40rpx;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-gap: 24rpx;
    width: 60%;
    font-size: 30rpx;
  }
  .overlay_title {
    font-size: 36rpx;
    display: flex;
    align-items: center;
    grid-gap: 10rpx;
    .iconfont {
      color: green;
      font-size: 50rpx;
    }
  }
  .overlay_desc {
    text {
      color: #E57519;
    }
  }
  .overlay_image {
    border: 1rpx solid #eeeeee;
    padding: 40rpx;
    image {
      aspect-ratio: 1;
      width: 220rpx;
      height: 220rpx;
    }
  }
  .overlay_name {

  }
  & > .iconfont {
    position: absolute;
    right: 30rpx;
    top: 250rpx;
    color: #ffffff;
    font-size: 40rpx;
  }
}
.user-info {
  display: flex;
  align-items: center;
  .user-title {
    flex: 1;
    min-width: 1px;
  }
  .user-option {
    display: flex;
    align-items: center;
    grid-gap: 6px;
    font-size: 28rpx;
    padding-left: 30rpx;
    height: 100rpx;
    padding-right: 20rpx;
    .iconfont {
      font-size: 36rpx;
    }
  }
  .user-avator {
    @include display-flex-center;
    width: 111rpx;
    height: 111rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 23rpx;
    background-color: $buttonPrimaryColor;

    .icon {
      color: #ffffff;
      opacity: 0.67;
      font-size: 70rpx;
    }
  }

  .user-name {
    font-size: 30rpx;
    color: #333333;
    //height: 100rpx;
  }

  .user-phone {
    font-size: $fontSize3;
    color: #7d7d7d;
  }
}

.user-grid-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 192rpx;
  margin-top: 60rpx;
  background-color: #FFFFFF;

  & > view {
    @include display-flex-center;
    flex-direction: column;
    font-size: $fontSize3;
    color: #333333;
    cursor: pointer;

    &.active {
      background-color: rgba(0, 0, 0, 0.05)
    }
  }

  .iconfont {
    margin-bottom: 19rpx;
    font-size: 44rpx;
  }

  .icon-Heart,
  .icon-xiaochengxu-toupiaoicon {
    font-size: 48rpx;
  }
}

.user-list-item {
  margin-top: 23rpx;
  display: flex;
  flex-direction: column;
  grid-gap: 21rpx;
  color: #181818;
  .user-item {
    display: flex;
    grid-gap: 14rpx;
    align-items: center;
    line-height: 1;
    padding: 40rpx;
    background-color: #ffffff;
    border-radius: 10rpx;
    .iconfont {
      font-size: 48rpx;
    }
    .icon-Left-1 {
      color: #4d4d4d;
      font-size: 42rpx;
    }
    .user-item-text {
      font-size: $fontSize4;
      flex: 1;
      min-width: 1px;
    }
  }
/*  .van-cell {
    --cell-horizontal-padding: 58rpx;
  }*/
}

.ad-space {
  width: 100%;
  margin-top: 23rpx;
}
</style>