|
|
@@ -1,12 +1,360 @@
|
|
|
<script setup>
|
|
|
import { reactive, toRefs, onMounted, ref, unref } from "vue";
|
|
|
+import { getUserChoose, getUser, postChooseSubmit } from "@/api/api.js";
|
|
|
+import { Toast } from "vant";
|
|
|
+import { wxconfig } from "@/util/wxLogin";
|
|
|
+
|
|
|
+import "vant/es/toast/style";
|
|
|
+
|
|
|
+const isSelectedClick = ref(true);
|
|
|
+
|
|
|
+/**
|
|
|
+ * 用户详情
|
|
|
+ */
|
|
|
+const userInfo = ref({});
|
|
|
+const permissionList = ref([]);
|
|
|
+// 获取用户详情
|
|
|
+const getUse = async () => {
|
|
|
+ if (localStorage.getItem("Authorization")) {
|
|
|
+ let res = await getUser();
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ userInfo.value = res.Data;
|
|
|
+ permissionList.value = userInfo.value.Permission.split(",") || [];
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * 获取用户的选择
|
|
|
+ */
|
|
|
+const chooseList = ref([]);
|
|
|
+const activeTag = ref("");
|
|
|
+
|
|
|
+//点击产业 tag
|
|
|
+const tagHandel = (item) => {
|
|
|
+ isSelectedClick.value = true;
|
|
|
+ activeTag.value = item.ChartPermissionId;
|
|
|
+};
|
|
|
+//复选框组
|
|
|
+const handleCheckAllChange = (item) => {
|
|
|
+ isSelectedClick.value = true;
|
|
|
+ // 取到所有的子菜单id
|
|
|
+ let ids = item.List.map((item) => {
|
|
|
+ return item.IndustrialManagementId;
|
|
|
+ });
|
|
|
+ item.CheckList = item.checkAll ? ids : [];
|
|
|
+ item.isIndeterminate = false;
|
|
|
+};
|
|
|
+//复选框组
|
|
|
+const handleCheckedCitiesChange = (item) => {
|
|
|
+ isSelectedClick.value = true;
|
|
|
+ let len = item.CheckList.length;
|
|
|
+ item.checkAll = len === item.List.length;
|
|
|
+ item.isIndeterminate = len > 0 && len < item.List.length;
|
|
|
+};
|
|
|
+
|
|
|
+const objective = ref(false);
|
|
|
+const subjectivity = ref(false);
|
|
|
+
|
|
|
+const statusHandel = () => {
|
|
|
+ isSelectedClick.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+//获取用户的选择
|
|
|
+const getChooseList = async () => {
|
|
|
+ const res = await getUserChoose();
|
|
|
+ console.log(res);
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ let checkArr = [];
|
|
|
+ res.Data.List.forEach((item) => {
|
|
|
+ console.log(item);
|
|
|
+ let obj = {
|
|
|
+ checkAll: item.CheckList.length === item.List.length ? true : false,
|
|
|
+ isIndeterminate: item.CheckList.length > 0 && item.CheckList.length < item.List.length,
|
|
|
+ ...item,
|
|
|
+ };
|
|
|
+ checkArr.push(obj);
|
|
|
+ });
|
|
|
+ chooseList.value = checkArr;
|
|
|
+ objective.value = res.Data.IsObjective == 1 ? true : false;
|
|
|
+ subjectivity.value = res.Data.IsSubjective == 1 ? true : false;
|
|
|
+ isSelectedClick.value = res.Data.IsRefuse == 0 ? true : false;
|
|
|
+ activeTag.value = chooseList.value[0].ChartPermissionId;
|
|
|
+ }
|
|
|
+};
|
|
|
+//用户的选择保存
|
|
|
+const chooseSubmit = async () => {
|
|
|
+ let arr = [];
|
|
|
+ chooseList.value.forEach((item) => {
|
|
|
+ arr.push({
|
|
|
+ ChartPermissionId: item.ChartPermissionId,
|
|
|
+ IndustrialManagementIds: item.CheckList.join(","),
|
|
|
+ });
|
|
|
+ });
|
|
|
+ const res = await postChooseSubmit({
|
|
|
+ IsObjective: objective.value ? 1 : 0,
|
|
|
+ IsSubjective: subjectivity.value ? 1 : 0,
|
|
|
+ IsRefuse: isSelectedClick.value ? 0 : 1,
|
|
|
+ IndustrialManagementIds: arr.length && arr.flat(Infinity),
|
|
|
+ });
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ Toast.success("保存成功");
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
document.title = "推送规则";
|
|
|
+ getChooseList();
|
|
|
+ getUse();
|
|
|
+ wxconfig();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div class="container">123</div>
|
|
|
+ <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/img/init_imgurl.png" v-else />
|
|
|
+ </div>
|
|
|
+ <div class="details-item">
|
|
|
+ <template v-if="userInfo.HasPermission == 1 || userInfo.HasPermission == 2">
|
|
|
+ <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 == 1">
|
|
|
+ <div class="item" v-for="item in permissionList" :key="item">{{ item }}</div>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="userInfo.HasPermission == 2">
|
|
|
+ <div class="item">暂无权限</div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template v-if="userInfo.HasPermission == 1">
|
|
|
+ <div :class="['select-content', isSelectedClick ? 'is-active' : 'is-not']">
|
|
|
+ <p class="slogan">请向我推送以下行业/赛道的研究更新和活动提醒：</p>
|
|
|
+ <div class="checkbox-content">
|
|
|
+ <div class="checkbox-item">
|
|
|
+ <div :class="['item', activeTag == item.ChartPermissionId ? 'active' : '']" v-for="item in chooseList" :key="item.ChartPermissionId" @click="tagHandel(item)">
|
|
|
+ {{ item.PermissionName }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template v-for="item in chooseList" :key="item.ChartPermissionId">
|
|
|
+ <div v-if="activeTag == item.ChartPermissionId" class="check-ul">
|
|
|
+ <el-checkbox v-model="item.checkAll" :indeterminate="item.isIndeterminate" @change="handleCheckAllChange(item)">{{ item.AllTracks }}</el-checkbox>
|
|
|
+ <div class="check-li">
|
|
|
+ <el-checkbox-group v-model="item.CheckList" @change="handleCheckedCitiesChange(item)">
|
|
|
+ <el-checkbox v-for="key in item.List" :key="key.IndustrialManagementId" :label="key.IndustrialManagementId">{{ key.IndustryName }}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="distinguish">
|
|
|
+ <p>以上赛道</p>
|
|
|
+ <el-checkbox @change="isSelectedClick = true" v-model="objective" label="Option 1" size="large">请向我推送【客观类】内容</el-checkbox>
|
|
|
+ <p class="check-explain">（线上/线下调研及调研纪要、产业跟踪、季度跟踪）</p>
|
|
|
+ <el-checkbox @change="isSelectedClick = true" v-model="subjectivity" label="Option 2" size="large">请向我推送【主观类】内容</el-checkbox>
|
|
|
+ <p class="check-explain">（行业深度报告、路演精华、财报点评、分析师沙龙、产业深度路演）</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div :class="['no-push', isSelectedClick ? 'is-not' : 'is-active']" @click="statusHandel">我不希望接收最新报告和活动更新的推送</div>
|
|
|
+ <div class="confirm" @click="chooseSubmit">保存</div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <p class="inform" v-if="userInfo.HasPermission == 2">当前无行业权限，可前往【查研观向】小程序申请开通试用权限</p>
|
|
|
+ <p class="inform" v-else-if="userInfo.HasPermission == 3">请先前往【查研观向】小程序绑定您的联系方式并申请开通试用权限</p>
|
|
|
+ <div class="bottom-btn">
|
|
|
+ 去小程序
|
|
|
+ <wx-open-launch-weapp id="launch-btn" class="wx-app" username="gh_a9d3744e1072" path="pages/index/index">
|
|
|
+ <div v-is="'script'" type="text/wxtag-template">
|
|
|
+ <div class="btn">去小程序</div>
|
|
|
+ </div>
|
|
|
+ </wx-open-launch-weapp>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
-<style lang="" scoped></style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.container-tag {
|
|
|
+ padding: 34px;
|
|
|
+ background: #ffffff;
|
|
|
+ .top-content {
|
|
|
+ padding: 15px;
|
|
|
+ }
|
|
|
+ .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: #666666;
|
|
|
+ .name {
|
|
|
+ font-size: 34px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .phone {
|
|
|
+ padding: 10px 0 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .authority {
|
|
|
+ height: 138px;
|
|
|
+ width: 105%;
|
|
|
+ overflow: hidden;
|
|
|
+ padding-top: 10px;
|
|
|
+ .item {
|
|
|
+ width: 148px;
|
|
|
+ height: 34px;
|
|
|
+ font-size: 24px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #edf4ff;
|
|
|
+ display: inline-block;
|
|
|
+ margin: 20px 20px 0 0;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 32px;
|
|
|
+ border: 1px solid #3385ff;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #3385ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .no-info {
|
|
|
+ line-height: 100px;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 34px;
|
|
|
+ }
|
|
|
+ .inform {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 28px;
|
|
|
+ text-align: center;
|
|
|
+ width: 80%;
|
|
|
+ margin: 200px auto;
|
|
|
+ }
|
|
|
+ .select-content {
|
|
|
+ padding: 20px;
|
|
|
+ border: 1px dashed #dadfe5;
|
|
|
+ .checkbox-content {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ .slogan {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #666666;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ .checkbox-item {
|
|
|
+ width: 105%;
|
|
|
+ padding-bottom: 25px;
|
|
|
+ border-bottom: 1px dashed #dadfe5;
|
|
|
+ .item {
|
|
|
+ width: 124px;
|
|
|
+ height: 38px;
|
|
|
+ font-size: 24px;
|
|
|
+ border-radius: 4px;
|
|
|
+ display: inline-block;
|
|
|
+ margin: 20px 20px 0 0;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 36px;
|
|
|
+ border: 1px solid #3385ff;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #3385ff;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background: #3385ff;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .check-ul {
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ .check-li {
|
|
|
+ margin-top: 20px;
|
|
|
+ height: 520px;
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ .el-checkbox {
|
|
|
+ width: 48%;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .distinguish {
|
|
|
+ border-top: 1px dashed #dadfe5;
|
|
|
+ padding: 40px 10px;
|
|
|
+ .check-explain {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #999;
|
|
|
+ text-indent: 1em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .is-active {
|
|
|
+ background-color: #e9effe;
|
|
|
+ border: 1px dashed #3385ff !important;
|
|
|
+ }
|
|
|
+ .is-not {
|
|
|
+ background-color: #f9f9f9;
|
|
|
+ }
|
|
|
+ .confirm {
|
|
|
+ width: 368px;
|
|
|
+ height: 80px;
|
|
|
+ background: #3385ff;
|
|
|
+ font-size: 34px;
|
|
|
+ color: #fff;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80px;
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+ .no-push {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #333;
|
|
|
+ width: 100%;
|
|
|
+ height: 99px;
|
|
|
+ line-height: 99px;
|
|
|
+ border: 1px dashed #dadfe5;
|
|
|
+ margin: 30px 0 40px;
|
|
|
+ text-indent: 1em;
|
|
|
+ }
|
|
|
+ .el-checkbox-group {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-checkbox__label) {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .bottom-btn {
|
|
|
+ width: 368px;
|
|
|
+ height: 80px;
|
|
|
+ background: #3385ff;
|
|
|
+ line-height: 80px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-size: 34px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
db