yantai-app/yt_huizhangguanli/pages/index/index.vue

<template>
  <view class="badge">
    <view class="m-list">
      <view class="list">
        <view
          class="item"
          key="badgeId"
          v-for="(item, index) in badgeList"
          :key="'item'+index"
        >
          <view class="pic">
            <image class="pic-bg" mode="aspectFill" :src="item.badgeIcon" />
            <image class="pic-show" mode="aspectFill" :src="item.badgeIcon" />
          </view>

          <view class="info">
            <view class="name">{{ item.badgeName }}</view>

            <view class="status" v-if="item.auditStatus == 'approved'">
              <image src="/static/data/images/renzheng2.png" />
              <text>已认证</text>
            </view>
            <view class="status" v-if="item.auditStatus == 'rejected'">
              <image src="/static/data/images/renzheng.png" />
              <text>认证失败</text>
            </view>
            <view class="status" v-if="item.auditStatus == 'auditing'">
              <image src="/static/data/images/renzheng.png" />
              <text>审核中</text>
            </view>
            <view
              class="status"
              v-if="!item.auditStatus && item.isCertificated == 'yes'"
            >
              <image src="/static/data/images/renzheng2.png" />
              <text>已认证</text>
            </view>
            <view
              class="status"
              v-if="!item.auditStatus && item.isCertificated == 'no'"
            >
              <image src="/static/data/images/renzheng.png" />
              <text>未认证</text>
            </view>
          </view>

          <view class="operate" :data-index="index" @click="handleTapBadge">
            <view class="btn" v-if="item.isLighted == 'no'">点亮徽章</view>
            <view class="btn z-grey" v-if="item.isLighted == 'yes'"
              >取消点亮</view
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
// import userTools from '../../utils/user';
import * as userTools from "../../utils/user";
import { operlist, openedorclosed } from "../../utils/api/customerApi.js";
const app = getApp();
export default {
  data() {
    return {
      userInfo: null,
      gridInfo: null,

      badgeList: [
        // {
        //   isLighted: "fkZmROEhaC",
        //   isCertificated: "km8C85iG3y",
        //   isReject: "5OD3FakDoQ",
        //   badgeId: "62628",
        //   badgeName: 9009,
        //   badgeIcon: "lk9oD7epp3",
        //   badgeType: "", //徽章类型:  party:党员认证【目前只有党员认证】
        // },
      ],

      showPage: false,
    };
  },
  onLoad() {
    let _this = this;

    function getIframeQueryParams() {
      // 使用URLSearchParams解析查询参数
      function getStringAfterQuestionMark(str) {
        return str.split("?").pop();
      }
      var result = getStringAfterQuestionMark(window.location.href);
      var params = new URLSearchParams(result);
      // 创建一个对象来存储解析后的参数
      var queryParams = {};
      // 遍历所有查询参数并存储到对象中
      params.forEach((value, key) => {
        queryParams[key] = value;
      });

      return queryParams;
    }
    const query = getIframeQueryParams();
    const token =
      process.env.NODE_ENV == "development"
        ? "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJhcHAiOiJnb3YiLCJjbGllbnQiOiJ3ZWIiLCJleHAiOjE4MTQxNDkxOTksInVzZXJJZCI6IjE3MTQ1Njc3MDIxNDQ3NzgyNDEiLCJpYXQiOjE3MTk1NDExOTl9.Rm5CP020giWIlMDXUin22Td4vJIRlCxRsM9YBsRTyrOvEjqjdlR554R3PtAkwDErgVYkBLgnmqpomDKo_Mfktg"
        : query.token;
    const gridId =
      process.env.NODE_ENV == "development"
        ? "32a5f8a8-f7c9-11ee-96cf-fa163ef15b63"
        : query.gridId;
    userTools.setStoreUserInfo(
      JSON.stringify({
        authorization: token,
        customerId: "1535072605621841922",
      })
    );
    userTools.setStoreGridInfo(
      JSON.stringify({
        gridId: gridId,
      })
    );
    _this.init();
  },
  async onShow() {
    if (this.showPage) {
      await this.init();
      await this.getBadgeList();
    }
  },
  methods: {
    async init() {
      let userInfo = userTools.getStoreUserInfo();
      let gridInfo = userTools.getStoreGridInfo();
      this.setData({
        userInfo,
        gridInfo,
        showPage: true,
      });
      await this.getBadgeList();
    },

    async getBadgeList() {
      let customerId = this.userInfo.customerId;
      const { data, code, msg } = await operlist({
        customerId,
      });
      if (msg === "success" && code === 0) {
        this.setData({
          badgeList: data,
        });
      }
    },

    handleTapBadge(e) {
      console.log(e);
      const {
        currentTarget: {
          dataset: { index },
        },
      } = e;
      const { badgeList } = this;
      const item = badgeList[index];
      if (item.isCertificated == "yes") {
        // 已认证
        this.lighten(index);
      } else {
        uni.navigateTo({
          url: "/pages/apply/apply?badgeId=" + item.badgeId,
        });
      }
    },

    async lighten(index) {
      const customerId = this.userInfo.customerId;
      const { badgeList } = this;
      const { badgeId, isLighted } = badgeList[index];
      uni.showLoading({
        content: "提交中",
      });
      const { code, data, msg } = await openedorclosed(
        {
          customerId,
          badgeId,
        },
        {
          // isMock: true,
          // isQuiet: false,
        }
      );
      uni.hideLoading();
      if (msg === "success" && code === 0) {
        badgeList[index].isLighted = isLighted == "yes" ? "no" : "yes";
        this.setData({
          badgeList,
        });
        uni.showToast({
          title: "操作成功",
          icon: "none",
          duration: 1500,
        });
      }
    },
  },
};
</script>
<style>
@charset "UTF-8";

.f-cb {
  float: none;
  clear: both;
  height: 0;
}

.f-cs::after {
  display: block;
  visibility: hidden;
  clear: both;
  overflow: hidden;
  height: 0;
  content: "";
}

.f-hide {
  display: none;
}

.f-fl {
  float: left;
}

.f-fr {
  float: right;
}

.f-bs1 {
  box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.1);
}

.f-bs2 {
  box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.16);
}

.f-bs3 {
  box-shadow: 0 6rpx 18rpx 0 rgba(0, 0, 0, 0.22);
}

.f-blur {
  filter: blur(3px);
}

.f-shield {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8rpx);
}

@keyframes fade_in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade_in_up {
  0% {
    transform: translate3d(0, 360rpx, 0);
    opacity: 0.3;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes fade_in_down {
  0% {
    transform: translate3d(0, -360rpx), 0;
    opacity: 0.3;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes fade_in_right {
  0% {
    transform: translate3d(360rpx, 0, 0);
    opacity: 0.3;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes fade_in_left {
  0% {
    transform: translate3d(-360rpx, 0, 0);
    opacity: 0.3;
  }

  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.a-fade-in {
  animation: fade_in 0.27s ease-in;
}

.a-fade-in-up {
  animation: fade_in_up 0.27s ease-in;
}

.a-fade-in-right {
  animation: fade_in_right 0.27s ease-in;
}

.a-fade-in-left {
  animation: fade_in_left 0.27s ease-in;
}

.a-fade-in-down {
  animation: fade_in_down 0.27s ease-in;
}

@keyframes fade_out {
  0% {
    display: block;
    opacity: 1;
  }

  100% {
    display: block;
    opacity: 0;
  }
}

@keyframes fade_out_up {
  0% {
    display: block;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  100% {
    display: block;
    transform: translate3d(0, 360rpx, 0);
    opacity: 0;
  }
}

@keyframes fade_out_down {
  0% {
    display: block;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  100% {
    display: block;
    transform: translate3d(0, -360rpx, 0);
    opacity: 0;
  }
}

@keyframes fade_out_right {
  0% {
    display: block;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  100% {
    display: block;
    transform: translate3d(360rpx, 0, 0);
    opacity: 0;
  }
}

@keyframes fade_out_left {
  0% {
    display: block;
    transform: translate3d(0);
    opacity: 1;
  }

  100% {
    display: block;
    transform: translate3d(-360rpx, 0, 0);
    opacity: 0;
  }
}

.a-fade-out {
  animation: fade_out 0.27s ease-out;
}

.a-fade-out-up {
  animation: fade_out_up 0.27s ease-out;
}

.a-fade-out-right {
  animation: fade_out_right 0.27s ease-out;
}

.a-fade-out-left {
  animation: fade_out_left 0.27s ease-out;
}

.a-fade-out-down {
  animation: fade_out_down 0.27s ease-out;
}

@keyframes scale_in {
  0% {
    opacity: 0;
    transform: scale3d(0, 0, 0);
  }

  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

@keyframes scale_in_left_up {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

@keyframes scale_in_right_down {
  0% {
    opacity: 0;
    transform: translate3d(50%, 50%, 0) scale3d(0, 0, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

@keyframes scale_in_right_up {
  0% {
    opacity: 0;
    transform: translate3d(50%, -50%, 0) scale3d(0, 0, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

@keyframes scale_in_left_down {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 50%, 0) scale3d(0, 0, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

.a-scale-in {
  animation: scale_in 0.27s ease-in;
}

.a-scale-in-left-up {
  animation: scale_in_left_up 0.27s ease-in;
}

.a-scale-in-right-up {
  animation: scale_in_right_up 0.27s ease-in;
}

.a-scale-in-left-down {
  animation: scale_in_left_down 0.27s ease-in;
}

.a-scale-in-right-down {
  animation: scale_in_right_down 0.27s ease-in;
}

page {
  background-color: #f5f6f7;
  padding-bottom: 20rpx;
}

.badge {
  width: 100% !important;
  box-sizing: border-box;
}

.m-list .list .item {
  position: relative;
  margin: 20rpx auto;
  width: 710rpx;
  height: 200rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.m-list .list .item .pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 200rpx;
  height: 200rpx;
}

.m-list .list .item .pic .pic-bg {
  display: block;
  width: 200rpx;
  height: 200rpx;
  opacity: 0.1;
}

.m-list .list .item .pic .pic-show {
  display: block;
  position: absolute;
  right: -10rpx;
  bottom: 0;
  width: 120rpx;
  height: 120rpx;
}

.m-list .list .item .info {
  position: absolute;
  left: 240rpx;
  top: 50%;
  width: 240rpx;
  transform: translateY(-50%);
}

.m-list .list .item .info .name {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: block;
  line-height: 50rpx;
  font-size: 34rpx;
  color: #333;
}

.m-list .list .item .info .status {
  line-height: 30rpx;
}

.m-list .list .item .info .status image {
  margin-right: 10rpx;
  width: 30rpx;
  height: 30rpx;
  vertical-align: bottom;
}

.m-list .list .item .info .status text {
  font-size: 26rpx;
  color: #999;
}

.m-list .list .item .operate {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 40rpx;
  height: 60rpx;
  margin: auto 0;
}

.m-list .list .item .operate .btn {
  width: 160rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  background: #22BDF0;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #fff;
}

.m-list .list .item .operate .btn.z-grey {
  background-color: #999;
}
</style>