raiwechat_link_h5/src/views/cygx/pushrulesPages.vue

<script setup>
import { reactive, toRefs, onMounted, ref, unref, watch } from "vue";
import { getUserChoose, getUser, postChooseSubmitPush, postChooseSubmitType } from "@/api/cygx/api.js";
import { Toast, Checkbox, CheckboxGroup } from "vant";

import { useRouter, useRoute } from "vue-router";
import "vant/es/toast/style";

const router = useRouter();
const route = useRoute();
/**
 * 用户详情
 */
const userInfo = ref({});
const permissionList = ref([]);
// 获取用户详情
const getUseDate = async () => {
  let res = await getUser();
  if (res.Ret === 200) {
    userInfo.value = res.Data;
    console.log(userInfo.value);
  }
};

/**
 * 获取用户的选择
 */
const chooseList = ref([]);
const activeTag = ref(0);

const tabsHandler = (item, index) => {
  activeTag.value = index;
};

//获取用户的选择
const getChooseList = async () => {
  const res = await getUserChoose();
  if (res.Ret === 200) {
    const { Data } = res;
    IsRefuse.value = Data.IsRefuse;
    IsSubjective.value = Data.IsSubjective;
    IsObjective.value = Data.IsObjective;
    permissionList.value = Data.List;
  }
};
//用户的选择保存
const chooseSubmit = async () => {};

const CheckListPushAll = ref(false); // 接受推送的全选
const followAll = ref(false); // 接受推送的全选
const uninterestedAll = ref(false); // 接受推送的全选

// 点击每个小选项的全选
const allHandleCheck = async (e, key) => {
  if (key == "TS") {
    if (!CheckListPushAll.value) {
      permissionList.value[activeTag.value].CheckListPush = [];
    } else {
      permissionList.value[activeTag.value].CheckListPush = permissionList.value[activeTag.value].ListPush.map((item) => item.IndustrialManagementId);
    }
  } else if (key == "GZ") {
    if (!followAll.value) {
      permissionList.value[activeTag.value].CheckListFollow = [];
    } else {
      permissionList.value[activeTag.value].CheckListFollow = permissionList.value[activeTag.value].ListFollow.map((item) => item.IndustrialManagementId);
    }
  } else {
    if (!uninterestedAll.value) {
      permissionList.value[activeTag.value].CheckListUninterested = [];
    } else {
      permissionList.value[activeTag.value].CheckListUninterested = permissionList.value[activeTag.value].ListUninterested.map((item) => item.IndustrialManagementId);
    }
  }
};

const allCheck = ref(false);

const allInHandleCheck = (e) => {
  CheckListPushAll.value = followAll.value = uninterestedAll.value = e;
};
// 推送更新内容
const IsRefuse = ref(0);
const IsSubjective = ref(0);
const IsObjective = ref(0);

// 推送规则的请求
const pushHandle = async () => {
  const res = await postChooseSubmitPush({
    IsRefuse: IsRefuse.value,
    IsSubjective: IsSubjective.value ? 1 : 0,
    IsObjective: IsObjective.value ? 1 : 0,
  });
  if (res.Ret === 200) {
    Toast("操作成功");
    getChooseList();
  }
};

// 底部的确认按钮
import FocusBtn from "../../assets/cygx/img/FocusBtn.png";
import AcceptBtn from "../../assets/cygx/img/AcceptBtn.png";
import uninterestedBtn from "../../assets/cygx/img/uninterestedBtn.png";
const confirmList = [
  {
    name: "重点关注",
    key: 1,
    imgUrl: FocusBtn,
  },
  {
    name: "接受推送",
    key: 0,
    imgUrl: AcceptBtn,
  },
  {
    name: "不感兴趣",
    key: 3,
    imgUrl: uninterestedBtn,
  },
];

// 底部确认按钮
const btnConfirm = async (item) => {
  let List = [];
  permissionList.value.forEach((_, index) => {
    if (activeTag.value === index) {
      List.push({
        ChartPermissionName: _.PermissionName,
        CheckList: [..._.CheckListFollow, ..._.CheckListPush, ..._.CheckListUninterested],
      });
    }
  });
  console.log(List);
  return;

  const res = await postChooseSubmitType({
    FollowType: item.key,
    List,
  });
  if (res.Ret == 200) {
    Toast("操作成功");
    getChooseList();
  }
};

onMounted(() => {
  document.title = "推送规则";
  let access_token = route.query.token || "";
  localStorage.setItem("access_token", access_token);
  getChooseList();
  getUseDate();
});
</script>

<template>
  <div class="container-tag">
    <div class="top-content">
      <div class="personal-details">
        <div class="head-portrait">
          <img :src="userInfo.Headimgurl" v-if="userInfo.Headimgurl" />
          <img src="@/assets/cygx/img/init_imgurl.png" v-else />
        </div>
        <div class="details-item">
          <template v-if="userInfo.HasPermission == 0 || userInfo.HasPermission == 2 || userInfo.HasPermission == 3">
            <p class="name">{{ userInfo.RealName }}</p>
            <p class="phone">{{ userInfo.Mobile }}</p>
            <p class="company">{{ userInfo.CompanyName }}</p>
          </template>
          <p class="no-info" v-else>暂无您的客户信息</p>
        </div>
      </div>
      <div class="authority">
        <template v-if="userInfo.HasPermission == 0">
          <div :class="['item', activeTag == index && 'act-item']" v-for="(item, index) in permissionList" :key="item.ChartPermissionId" @click="tabsHandler(item, index)">
            {{ item.PermissionName }}
            <img v-if="item.HasCheck" src="@/assets/cygx/img/WithPermission.png" alt="" />
            <img v-else src="@/assets/cygx/img/NoPermission.png" alt="" />
          </div>
        </template>
        <template v-else-if="userInfo.HasPermission == 2 || userInfo.HasPermission == 3">
          <div class="item">暂无权限</div>
        </template>
      </div>
    </div>
    <template v-if="userInfo.HasPermission == 0">
      <div class="push-updates-content">
        <div class="switch-content">
          <div>
            <span>推送更新内容</span>
            <span>(重点关注+接受推送) </span>
          </div>
          <van-switch v-model="IsRefuse" :active-value="1" :inactive-value="0" @change="pushHandle" />
        </div>
        <div class="distinguish" v-show="IsRefuse">
          <div class="distinguish-content">
            <Checkbox key="one" @toggle="pushHandle" :name="1" v-model="IsObjective" icon-size="14" shape="square" checked-color="#E2C586">请向我推送【客观类】内容</Checkbox>
            <p class="check-explain">（线上/线下调研及调研纪要、产业跟踪、季度跟踪）</p>
          </div>
          <div class="distinguish-content">
            <Checkbox v-model="IsSubjective" @toggle="pushHandle" :name="1" icon-size="14" shape="square" checked-color="#E2C586">请向我推送【主观类】内容</Checkbox>
            <p class="check-explain">（行业深度报告、路演精华、财报点评、分析师沙龙、产业深度路演）</p>
          </div>
        </div>
      </div>

      <div class="select-content" v-if="permissionList && permissionList.length > 0">
        <!-- 重点关注 -->
        <div class="checkbox-content">
          <div class="title-content-all">
            <div class="title-img">
              <img src="@/assets/cygx/img/FocusIcon.png" alt="" />
              重点关注
            </div>
            <Checkbox v-model="followAll" @change="allHandleCheck($event, 'GZ')" icon-size="14" shape="square" checked-color="#E2C586">全选</Checkbox>
          </div>

          <div class="checkbox-item">
            <CheckboxGroup v-model="permissionList[activeTag].CheckListFollow">
              <Checkbox
                icon-size="14"
                shape="square"
                checked-color="#E2C586"
                :name="item.IndustrialManagementId"
                v-for="item in permissionList[activeTag].ListFollow"
                :key="item.IndustrialManagementId"
                >{{ item.IndustryName }}</Checkbox
              >
            </CheckboxGroup>
          </div>
        </div>
        <!-- 接受推送 -->
        <div class="checkbox-content">
          <div class="title-content-all">
            <div class="title-img">
              <img src="@/assets/cygx/img/AcceptIcon.png" alt="" />
              接受推送
            </div>
            <Checkbox v-model="CheckListPushAll" @change="allHandleCheck($event, 'TS')" icon-size="14" shape="square" checked-color="#E2C586">全选</Checkbox>
          </div>

          <div class="checkbox-item">
            <CheckboxGroup v-model="permissionList[activeTag].CheckListPush" ref="acceptGroup">
              <Checkbox
                icon-size="14"
                shape="square"
                checked-color="#E2C586"
                :name="item.IndustrialManagementId"
                v-for="item in permissionList[activeTag].ListPush"
                :key="item.IndustrialManagementId"
                >{{ item.IndustryName }}</Checkbox
              >
            </CheckboxGroup>
          </div>
        </div>
        <!-- 不感兴趣 -->
        <div class="checkbox-content">
          <div class="title-content-all">
            <div class="title-img">
              <img src="@/assets/cygx/img/uninterested.png" alt="" />
              不感兴趣
            </div>
            <Checkbox v-model="uninterestedAll" @change="allHandleCheck($event, 'XQ')" icon-size="14" shape="square" checked-color="#E2C586">全选</Checkbox>
          </div>

          <div class="checkbox-item">
            <CheckboxGroup v-model="permissionList[activeTag].CheckListUninterested">
              <Checkbox
                icon-size="14"
                shape="square"
                checked-color="#E2C586"
                :name="item.IndustrialManagementId"
                v-for="item in permissionList[activeTag].ListUninterested"
                :key="item.IndustrialManagementId"
                >{{ item.IndustryName }}</Checkbox
              >
            </CheckboxGroup>
          </div>
        </div>
      </div>

      <div class="confirm-box">
        <div>
          <Checkbox v-model="allCheck" @change="allInHandleCheck" icon-size="14" shape="square" checked-color="#E2C586">全选</Checkbox>
        </div>
        <div class="btn-content">
          <div class="btn-item" @click="btnConfirm(item)" v-for="item in confirmList" :key="item.key">
            <img :src="item.imgUrl" alt="" />
            <p>{{ item.name }}</p>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.container-tag {
  min-height: 100vh;
  padding: 30px 25px 150px;
  background: url("@/assets/cygx/img/bg_icon.png") no-repeat;
  background-size: 100% 100%;
  .top-content {
    width: 100%;
    height: 438px;
    background: url("@/assets/cygx/img/tag_bg.png") no-repeat;
    background-size: 100% 100%;
    padding: 68px 25px;
    box-sizing: border-box;
  }
  .personal-details {
    display: flex;
    .head-portrait {
      width: 126px;
      height: 126px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .details-item {
      margin-left: 30px;
      font-size: 28px;
      color: #fff;
      .name {
        font-size: 34px;
        font-weight: 500;
        color: #fff;
      }
      .phone {
        padding: 10px 0 5px;
      }
    }
  }
  .authority {
    width: 105%;
    overflow: hidden;
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
    .item {
      padding: 0 30px;
      height: 50px;
      font-size: 24px;
      border-radius: 4px;
      background-color: #403f3e;
      margin: 20px 20px 0 0;
      border: 1px solid #e5cfb1;
      font-weight: 400;
      color: #e5cfb1;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        display: block;
        margin-left: 10px;
        width: 24px;
        height: 24px;
      }
    }
    .act-item {
      background-color: #e2c586;
      color: #6c4d08;
    }
  }

  .select-content {
    .checkbox-content {
      padding: 20px;
      background-color: #2b2a2a;
      border-radius: 16px;
      margin-top: 10px;
      overflow: hidden;
      .title-content-all {
        margin: 30px 0;
        color: #e2c586;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title-img {
          display: flex;
          align-items: center;
          img {
            width: 40px;
            height: 40px;
            margin-right: 8px;
          }
        }
      }
    }
  }
  .distinguish {
    .distinguish-content {
      border: 1px solid #e5cfb133;
      color: #e5efff;
      padding: 10px 20px;
      border-radius: 8px;
      margin-top: 20px;
    }
    .check-explain {
      font-size: 24px;
      color: #e5cfb1;
      text-indent: 1em;
    }
  }
  .confirm-box {
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 112px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: calc(0px + constant(safe-area-inset-bottom));
    padding-bottom: calc(0px + env(safe-area-inset-bottom));
    background: linear-gradient(90deg, #242524 0%, #403e3d 100%);
    z-index: 9;
    .btn-content {
      display: flex;
      .btn-item {
        text-align: center;
        margin-left: 62px;
        font-size: 24px;
        color: #e2c58666;
        img {
          display: inline-block;
          margin-bottom: 5px;
          width: 40px;
          height: 40px;
        }
      }
    }
  }
  .checkbox-item {
    :deep(.CheckboxGroup) {
      display: flex;
      flex-wrap: wrap;
    }
    :deep(.van-checkbox) {
      width: 50%;
    }
  }

  .bottom-btn {
    position: relative; // 相对定位
    z-index: 0;
    width: 368px;
    height: 80px;
    background: #3385ff;
    line-height: 80px;
    text-align: center;
    margin: 0 auto;
    font-size: 34px;
    color: #fff;
  }
  .push-updates-content {
    .van-switch--on {
      background-color: #e2c586;
    }
    margin: 20px 0;
    padding: 20px;
    border-radius: 8px;
    background: linear-gradient(90deg, #242424 0%, #403f3e 100%);
  }
  .switch-content {
    color: #e2c586;
    span:nth-child(1) {
      font-weight: 600;
      font-size: 28px;
      padding-right: 12px;
    }
    span {
      color: #e2c586;
      font-size: 24px;
    }
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .wx-app {
    position: absolute; // 绝对定位
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    opacity: 0;
    .btn {
      width: 100%;
      height: 100%;
    }
  }
}
</style>

<style scoped>
::v-deep .van-checkbox__label {
  color: #e2c586 !important; /* 修改复选框标签的颜色 */
  font-size: 24px !important;
  font-weight: 600;
}
::v-deep .van-checkbox__icon .van-icon {
  border: 1px solid #e2c586;
}
</style>