nanhuashi_applet/components/tabbar/index.vue

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

<script>
import { mapState } from "vuex";
import QiyanQrcode from "@/components/qiyan-qrcode/qiyan-qrcode.vue";
// import uButton from "uview-ui/components/u-button/u-button.vue";
export default {
  components: {
    QiyanQrcode,
  },
  props: {
    type: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      show: false,
      title1: "1.现在时间戳：" + Date.now(),
      codeImg: 'https://4dscene.4dage.com/new4dkk/deng/static/img/code/01.png',
      codeList:{
        code1: 'https://4dscene.4dage.com/new4dkk/deng/static/img/code/01.png',
        code2: 'https://4dscene.4dage.com/new4dkk/deng/static/img/code/01.png',
        code3: 'https://4dscene.4dage.com/new4dkk/deng/static/img/code/01.png',
        code4: 'https://4dscene.4dage.com/new4dkk/deng/static/img/code/01.png',
        code5: 'https://4dscene.4dage.com/new4dkk/deng/static/img/code/01.png',
        code6: 'https://4dscene.4dage.com/new4dkk/deng/static/img/code/01.png',
        code7: 'https://4dscene.4dage.com/new4dkk/deng/static/img/code/02.png',
        code8: 'https://4dscene.4dage.com/new4dkk/deng/static/img/code/01.png',
        code9: 'https://4dscene.4dage.com/new4dkk/deng/static/img/code/12.png',
      },
      list: [
        {
          active: "https://4dscene.4dage.com/new4dkk/deng/static/img/icon_scan_active@2x.png",
          dark: "https://4dscene.4dage.com/new4dkk/deng/static/img/icon_scan_dark@2x.png",
          light: "https://4dscene.4dage.com/new4dkk/deng/static/img/icon_scan_light@2x.png",
          name: "扫码打卡",
        },
        {
          active: "https://4dscene.4dage.com/new4dkk/deng/static/img/icon_lotus_active@2x.png",
          dark: "https://4dscene.4dage.com/new4dkk/deng/static/img/icon_lotus_dark@2x.png",
          light: "https://4dscene.4dage.com/new4dkk/deng/static/img/icon_lotus_light@2x.png",
          name: "点亮",
          url: "https://sit-nanhuacs.4dage.com/web/index.html#/prayers/list",
        },
        {
          active: "https://4dscene.4dage.com/new4dkk/deng/static/img/icon_map_active@2x.png",
          dark: "https://4dscene.4dage.com/new4dkk/deng/static/img/icon_map_dark@2x.png",
          light: "https://4dscene.4dage.com/new4dkk/deng/static/img/icon_map_light@2x.png",
          name: "地图",
          path: "/pages/home/map",
          url: "https://sit-nanhuacs.4dage.com/web/index.html#/map",
        },
        {
          active: "https://4dscene.4dage.com/new4dkk/deng/static/img/icon_ai_active@2x.png",
          dark: "https://4dscene.4dage.com/new4dkk/deng/static/img/icon_ai_dark@2x.png",
          light: "https://4dscene.4dage.com/new4dkk/deng/static/img/icon_ai_light@2x.png",
          name: "妙笔生花",
          url: "https://sit-nanhuacs.4dage.com/web/index.html#/composite",
        },
        {
          active: "https://4dscene.4dage.com/new4dkk/deng/static/img/icon_user_active@2x.png",
          dark: "https://4dscene.4dage.com/new4dkk/deng/static/img/icon_user_dark@2x.png",
          light: "https://4dscene.4dage.com/new4dkk/deng/static/img/icon_user_light@2x.png",
          name: "我的",
        },
      ],
      title: "Hello",
    };
  },
  computed: {
    ...mapState(["active"]),
  },
  onLoad() {},
  methods: {
    handleItem(item, index) {
      let obj = { 
        'https://houseoss.4dkankan.com/project/nanHua/index.html#/code?m=1':this.codeList.code1,
        'https://houseoss.4dkankan.com/project/nanHua/index.html#/code?m=2':this.codeList.code2,
        'https://houseoss.4dkankan.com/project/nanHua/index.html#/code?m=3':this.codeList.code3,
        'https://houseoss.4dkankan.com/project/nanHua/index.html#/code?m=4':this.codeList.code4,
        'https://houseoss.4dkankan.com/project/nanHua/index.html#/code?m=5':this.codeList.code5,
        'https://houseoss.4dkankan.com/project/nanHua/index.html#/code?m=6':this.codeList.code6,
        'https://houseoss.4dkankan.com/project/nanHua/index.html#/code?m=7':this.codeList.code7,
        'https://houseoss.4dkankan.com/project/nanHua/index.html#/code?m=8':this.codeList.code8,
        'https://houseoss.4dkankan.com/project/nanHua/index.html#/code?m=9':this.codeList.code9,
       };
       let objclockIn = { 
        'https://houseoss.4dkankan.com/project/nanHua/index.html#/code?m=1':'SG-PHP2F5mD35e',
        'https://houseoss.4dkankan.com/project/nanHua/index.html#/code?m=2':'SG-PHP2F5mD35e',
        'https://houseoss.4dkankan.com/project/nanHua/index.html#/code?m=3':'SG-PHP2F5mD35e',
        'https://houseoss.4dkankan.com/project/nanHua/index.html#/code?m=4':'SG-PHP2F5mD35e',
        'https://houseoss.4dkankan.com/project/nanHua/index.html#/code?m=5':'SG-PHP2F5mD35e',
        'https://houseoss.4dkankan.com/project/nanHua/index.html#/code?m=6':'SG-PHP2F5mD35e',
        'https://houseoss.4dkankan.com/project/nanHua/index.html#/code?m=7':'SG-PHP2F5mD35e',
        'https://houseoss.4dkankan.com/project/nanHua/index.html#/code?m=8':'SG-PHP2F5mD35e',
        'https://houseoss.4dkankan.com/project/nanHua/index.html#/code?m=9':'SG-PHP2F5mD35e',
       };
      let that = this;
      if (item.name == "扫码打卡") {
        // 只允许通过相机扫码
        uni.scanCode({
          onlyFromCamera: true,
          success: function (res) {
            console.log("条码类型：" + res.scanType);
            console.log("条码内容：" + res.result);
            that.show = true;
            that.codeImg = obj[res.result];
            that.$store.commit("changeActive", index);
            that.getRequest('/api/wx/clockIn', {code: objclockIn[res.result]})
          },
          fail: function (e) {
            console.log("扫码失败", e);
            that.$store.commit("changeActive", 4);
            that.show = true;
          },
        });
        return;
      } else if (item.name == "我的") {
      }
      this.$store.commit("changeActive", index);
      if (item.url){
        uni.$u.route("/pages/home/webview", {
          url: item.url,
          index: index,
        });
      }
    },
    handleHome() {
      console.log("开启云上观灯", uni);
      uni.$u.route("/pages/home/home");
    },
    handleqiyan() {
        uni.$u.route("/pages/home/webview", {
          url: 'https://sit-nanhuacs.4dage.com/web/index.html#/prayers/list',
        });
    },
    close() {
      this.show = false;
      // console.log('close');
    },
    open() {},
  },
};
</script>

<style lang="less" 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;
  .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;
    }
  }
}
.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/code1.png)
    100% 100% no-repeat;
  background-size: 100% auto;
  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: 72px;
      height: 72px;
      float: right;
    }
  }
  .codebutList {
    text-align: center;
    text-align: center;
    position: absolute;
    bottom: -42px;
    width: 100%;
    left: 0;
    margin: 0 auto;
    .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;
      }
    }
  }
}
</style>