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() {
    this.getuserInfo();
  },
  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();
    },

    getuserInfo() {
      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"
          ? "eyJhbGciOiJSUzI1NiJ9.eyJyZWFsTmFtZSI6IiIsIm5pY2tOYW1lIjoiRFAzODA3IiwiaXNzIjoibmluZ2JvIiwidXNlclR5cGUiOiIwMCIsImV4cCI6MTcxNjYwNDQ1NywidXNlcklkIjoiMjAyMzA5MTUxNTA4MjAxMDMwMDAwMjgxMjY5ODI0MDIiLCJpYXQiOjE3MTQwMTI0NTcsImp0aSI6IjFkYmEwMmU1MTM0NTFmNTkwODE4YWI1OGEzNThhYzNiIn0.zD8CVi_NZta9_pu4KKXH-AO--FPx6ke_BGEkJ8j0uPqCmD8DiywBBhOAClayOmpdY7Qz_IW28l-vcrwx2E9nKu87bBKSEvtkrwiiA-78WPJxviX5bcVnSTIHISFOztFdeYFeCs5oAK_BYjhhq3tmNQDFRHb6GEW3-YCD174PqhtMfEgrrm1ceHxt6VQhNDeBGDkR562Ba9iDKMdTVUsqpgycmsWNMBfYbz-EoWqBML3crZOUAYpPCPUSPJwCY4a5DX-1FLz6D70ZYaKPDdsL1MD5xmWPWSexijklaHh6S6fi8J_vIKlnHivHCZTiVlIpiYMNQYzdXfzBtRqyJQDOzw"
          : query.token;
      const url =
        process.env.NODE_ENV == "development"
          ? ""
          : "https://lantu.ytyanhuo.com/api";
      uni.request({
        url: "https://inlife.ytyanhuo.com/oxm-user-center/user/userInfo/findByUserId",
        method: "post",
        header: {
          Authorization: token,
        },
        data: {},
        success: (res) => {
          if (res.data.code !== "200") {
            uni.showToast({
              title: res.data.msg,
              icon: "none",
              duration: 3000,
            });
            return;
          }
          var info = res.data.data;
          uni.request({
            url: url + "/auth/thirdlogin/resiInfo-lantu",
            method: "post",
            data: {
              loginMobile: info.loginMobile,
            },
            success: (res1) => {
              if (res1.data.code === 0) {
                if (res1.data.data.userBaseInfoId) {
                  const userBaseInfoId = res1.data.data.userBaseInfoId;
                  uni.request({
                    url: url + "/auth/thirdlogin/resilogin-hfive",
                    method: "post",
                    data: {
                      userBaseInfoId,
                    },
                    success: (res2) => {
                      if (res2.data.code === 0) {
                        const data = res2.data.data;
                        userTools.setStoreUserInfo(
                          JSON.stringify({
                            gridId: data.gridId,
                            authorization: data.authorization,
                            customerId: "1535072605621841922",
                          })
                        );
                        userTools.setStoreGridInfo(
                          JSON.stringify({
                            gridId: data.gridId,
                          })
                        );
                        this.setData(
                          {
                            userInfo: {
                              gridId: data.gridId,
                              authorization: data.authorization,
                              customerId: "1535072605621841922",
                            },
                            gridInfo: {
                              gridId: data.gridId,
                            },
                            showPage: true,
                          },
                          () => {
                            this.init();
                          }
                        );
                      }
                    },
                  });
                } else {
                  uni.showToast({
                    title:
                      "您尚未完善社区信息，请到“我的房产”完善社区信息后重试",
                    icon: "none",
                    duration: 3000,
                  });
                  setTimeout(() => {
                    uni.navigateBack({
                      delta: 1, // 默认值是1，表示返回的页面层数
                    });
                  }, 3000);
                }
              }
            },
          });
        },
      });
      // const gridId =
      //   process.env.NODE_ENV == "development"
      //     ? "32a5f8a8-f7c9-11ee-96cf-fa163ef15b63"
      //     : query.gridId;
      // userTools.setStoreUserInfo(
      //   JSON.stringify({
      //     gridId: gridId,
      //     authorization: token,
      //     customerId: "1535072605621841922",
      //   })
      // );
      // userTools.setStoreGridInfo(
      //   JSON.stringify({
      //     gridId: gridId,
      //   })
      // );
      // this.setData(
      //   {
      //     userInfo: {
      //       gridId: gridId,
      //       authorization: token,
      //       customerId: "1535072605621841922",
      //     },
      //     gridInfo: {
      //       gridId,
      //     },
      //     showPage: true,
      //   },
      //   () => {}
      // );
      // this.setData({showPage:true})
      // this.init();
    },
    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: #329aff;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #fff;
}

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