nanhuashi_h5/src/components/tabbar/index.vue

<template>
  <div>
    <div class="tabbar" :class="{dark: handleType}">
      <div
        class="tabbarItem"
        @click="handleItem(item, index)"
        :class="{ activeMenu: active == index }"
        v-for="(item, index) in list"
        :key="index"
      >
        <div :class="{ aotoImg: index == 2 }">
          <img
            :src="active == index ? item.active : handleType ? item.dark : item.light"
            :width="index == 2 ? '50px' : '48px'"
            :height="index == 2 ? '50px' : '48px'"
          ></img>
        </div>
        <div class="hightImg" v-show="active == index">
          <img
            src="/static/img/icon_active@2x.png"
            width="68px"
            height="81px"
          ></img>
        </div>
        <div class="tabbarItemText" :class="{ active: active == index }">{{
          item.name
        }}</div>
      </div>
    </div>
    <van-popup
      closeIconPos="bottom-right"
      v-model="show"
      position="center"
      round
      bgColor="transparent"
      style="background: transparent"
      @close="close"
      @open="open"
    >
      <div class="codeData" ref="downDiv">
        <div class="close" @click="close">
          <img
            width="42px"
            height="42px"
            src="/static/img/icon_cancel@2x.png"
          ></img>
        </div>
        <div class="text">
          <img
            width="100%"
            height="185px"
            src="https://4dscene.4dage.com/new4dkk/v2/lang/images/solutions/government/survey1.png"
          ></img>
          <div class="text-center pt-20px pb-8px text-2xl">一花五叶</div>
          <img
            width="100%"
            height="10px"
            src="https://4dscene.4dage.com/new4dkk/deng/static/img/line@2x.png"
          ></img>
          <div class="codeDataText">
            此灯组以禅宗“一花五叶”为主题，传承禅宗经典。您可欣赏花开五叶的意象，感受南宗禅衍化出临济、曹洞、法眼、沩仰和云门五家，发展壮大的辉煌历史，领悟慧能大师法脉的深邃智慧。
          </div>
          <div class="codeImg flex justify-end items-center">
            <div class="qrcode" ref="qrCodeUrl1"></div>
            <div class="qrcode" ref="qrCodeUrl2"></div>
          </div>
        </div>
      </div>
      <div class="codebutList">
          <!-- <div class="downText" v-if="false">
            <div class="img flex justify-center items-center">
              <div style="width: 36px; height: 36px">
                <img
                width="36px"
                height="36px"
                src="https://4dscene.4dage.com/new4dkk/deng/static/img/icon_download@2x.png"
              ></img>
              </div>
              <div class="pl-10">下载图片</div>
            </div>
            <div class="tips">完成6处打卡，即可点灯祈愿</div>
          </div> -->
          <div class="downButtom flex justify-center">
            <div class="downButtomItem" @click="handleDown">下载图片</div>
            <div class="downButtomItem" @click="handleqiyuan">去祈愿</div>
          </div>
        </div>
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import QRCode from 'qrcodejs2'
let wx = window.wx
// import QiyanQrcode from '@/components/qiyan-qrcode/qiyan-qrcode.vue'
// import uButton from "udiv-ui/components/u-button/u-button.vue";
export default {
  components: {
    // QiyanQrcode
  },
  data() {
    return {
      show: false,
      qrcode1: null,
      qrcode2: null,
      title1: '1.现在时间戳：' + Date.now(),
      list: [
        {
          active: '/static/img/icon_home_active.png',
          dark: '/static/img/icon_home_dark.png',
          light: '/static/img/icon_home_light.png',
          name: '首页',
          path: '/home'
        },
        {
          active: '/static/img/icon_scan_active@2x.png',
          dark: '/static/img/icon_scan_dark@2x.png',
          light: '/static/img/icon_scan_light@2x.png',
          name: '扫码打卡'
        },
        {
          active: '/static/img/icon_map_active@2x.png',
          dark: '/static/img/icon_map_dark@2x.png',
          light: '/static/img/icon_map_light@2x.png',
          name: '地图',
          path: '/map'
        },
        {
          active: '/static/img/icon_ai_active@2x.png',
          dark: '/static/img/icon_ai_dark@2x.png',
          light: '/static/img/icon_ai_light@2x.png',
          name: '妙笔生花',
          path: '/composite'
        },
        {
          active: '/static/img/icon_lotus_active@2x.png',
          dark: '/static/img/icon_lotus_dark@2x.png',
          light: '/static/img/icon_lotus_light@2x.png',
          name: '点亮',
          path: '/prayers/clocked'
        },
        // {
        //   active: '/static/img/icon_user_active@2x.png',
        //   dark: '/static/img/icon_user_dark@2x.png',
        //   light: '/static/img/icon_user_light@2x.png',
        //   name: '我的',
        //   path: '/my'
        // }
      ],
      title: 'Hello'
    }
  },
  computed: {
    ...mapState('home', ['active']),
    handleType() {
      return this.$route.name == 'PrayersClocked'? true : false
    }
  },
  watch: {
    $route(to, from) {
      let path = to.path
      console.log('handleItem', path)
      this.list.map((item, index) => {
        if (to.path == item.path) {
          this.$store.commit('home/changeActive', index)
        }
      })
    }
  },
  mounted() {
    // let path = this.$route.path
    // this.list.map((item, index) => {
    //   if (path == item.path) {
    //     console.log('path', path, item, index)
    //     this.$store.commit('home/changeActive', index)
    //   }
    // })
  },
  methods: {
    handleItem(item, index) {
      console.log('handleItem', item, index)
      let that = this
      if (item.name == '扫码打卡') {
        // 只允许通过相机扫码
        // uni.scanCode({
        //   onlyFromCamera: true,
        //   success: function (res) {
        //     console.log('条码类型：' + res.scanType)
        //     console.log('条码内容：' + res.result)
        // wx.miniProgram.postMessage({ data: { foo: 'scanCode', type: 'tabbar' } })
        wx.miniProgram.navigateTo({
          url: '/pages/my/index?scanCode=true'
        })
        // that.show = true
        // that.$store.commit('home/changeActive', index)
        // setTimeout(() => {
        //   this.creatQrCode()
        // }, 200)
        //   },
        //   fail: function (e) {
        //     console.log('扫码失败', e)
        //     that.show = true
        //   }
        // })
        return
      }else if (item.name == '我的') {
        this.$store.commit('home/changeActive', 4)
        wx.miniProgram.navigateTo({
          url: '/pages/my/index',
          active: 4
        })
        return
      }
      console.log('handleItem', item, index, this.active)
      if(this.active == index) return
      // that.$store.commit('home/changeActive', index)
      if (item.path) {
        this.$router.push(item.path)
      }
    },
    handleHome() {
      console.log('开启云上观灯', uni)
      // uni.$u.route('/pages/home/home')
    },
    handleDown() {
      this.$store.dispatch('home/saveImage', this.$refs.downDiv)
    },
    handleqiyuan() {
      this.show = false
      this.$router.push('/prayers/list')
    },
    close() {
      console.log('close', this.qrcode1, this.qrcode2)
      this.show = false
      // console.log('close');
    },
    open() {},
    creatQrCode() {
      if (this.qrcode1) {
        this.qrcode1 && this.qrcode1.clear() //清除二维码
        this.qrcode2 && this.qrcode2.clear() //清除二维码
        this.qrcode1.makeCode('xxxxx')
        this.qrcode2.makeCode('ssssss')
      } else {
        this.qrcode1 = new QRCode(this.$refs.qrCodeUrl1, {
          text: 'xxxx', // 需要转换为二维码的内容
          width: 72,
          height: 72,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
        this.qrcode2 = new QRCode(this.$refs.qrCodeUrl2, {
          text: 'xxxx', // 需要转换为二维码的内容
          width: 72,
          height: 72,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tabbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  width: 100vw;
  z-index: 1000;
  height: 81px;
  left: 0;
  padding: -2px 0 16px 0;
  background-image: url(https://4dscene.4dage.com/new4dkk/deng/static/img/menu_light@2x.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .tabbarbg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .tabbarItem {
    text-align: center;
    width: 50px;
    font-weight: 400;
    font-size: 11px;
    color: #303030;
    line-height: 13px;
    text-align: center;
    position: relative;
    z-index: 1;
    .hightImg {
      position: absolute;
      z-index: 2;
      top: 0;
      left: -10px;
    }
    .aotoImg {
      position: relative;
      top: -5px;
    }
  }
}
.dark {
  background-image: url(https://4dscene.4dage.com/new4dkk/deng/static/img/menu_dark@2x.png);
  .tabbarItem{
    color: #fff;
  }
}
.codebutList {
  text-align: center;
  position: relative;
  width: 100%;
  // top: 76px;
  .downText {
    .img {
      margin-right: 10px;
      font-weight: 400;
      font-size: 16px;
      color: #ffffff;
      line-height: 19px;
      text-align: center;
    }
    .tips {
      padding-top: 10px;
      font-weight: 400;
      font-size: 16px;
      color: #a49d94;
      line-height: 19px;
      text-align: center;
    }
  }
  .downButtom {
    .downButtomItem {
      width: 140px;
      height: 42px;
      background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/btn01@2x.png) 100% 100%
        no-repeat;
      background-size: cover;
      font-weight: 400;
      font-size: 16px;
      color: #ffffff;
      line-height: 19px;
      font-style: normal;
      margin: 0 5px;
      line-height: 42px;
      text-align: center;
    }
  }
}
.codeData {
  // background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/pop2@2x.png) no-repeat cover;
  background: url(https://4dscene.4dage.com/new4dkk/deng/static/img/pop2@2x.png) 100% 100% no-repeat;
  background-size: 100% 100%;
  width: calc(100vw - 108px);
  height: 490px;
  padding: 48px 52px 30px 36px;
  position: relative;
  .close {
    position: absolute;
    right: -0px;
    top: -0px;
    width: 42px;
    height: 42px;
  }
  .text {
    font-weight: 400;
    font-size: 24px;
    color: #d86332;
    line-height: 29px;
    position: relative;
    padding-bottom: 72px;
    .codeDataText {
      padding: 8px 0 16px 0;
      font-weight: 400;
      font-size: 14px;
      color: #b1967b;
      line-height: 18px;
      text-align: left;
    }
    .codeImg {
      text-align: right;
      width: 100%;
      height: 72px;
      // float: right;
      .qrcode {
        padding: 5px;
        margin: 0 5px;
        background: #fff;
      }
    }
  }
}
</style>