|
|
@@ -0,0 +1,508 @@
|
|
|
+<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>
|
bding
