调整首页全部权益页面弹窗样式，调整全局弹窗关闭问题，新增接口

2025-10-29 09:05:49 +08:00
parent 603ec7c1e5
commit 367ba426a7
6 changed files with 393 additions and 30 deletions
--- a/src/api/benefits/index.js
+++ b/src/api/benefits/index.js
@@ -41,7 +41,7 @@ export function fetchBenefitInfoListV2(data) {
    data: data,
  })
 }
-
+// 新增家庭成员
 export function addCustomerFamilyMember(data) {
  return request({
    url: getUrl('/sysUserEx/addCustomerFamilyMember'),
@@ -66,3 +66,20 @@ export function activationCodeActive(data) {
    data: data,
  })
 }
+// 放弃家庭成员
+export function giveUpAddCustomerFamilyMember(data) {
+  return request({
+    url: getUrl('/sysUserEx/giveUpAddCustomerFamilyMember'),
+    method: 'post',
+    data: data,
+  })
+}
+
+// 客户权益使用手册
+export function downloadPdf(data) {
+  return request({
+    url: getUrl('/configCodeEx/getBenefitPdf'),
+    method: 'get',
+    params: data,
+  })
+}
--- a/src/assets/js/utils/request.js
+++ b/src/assets/js/utils/request.js
@@ -58,7 +58,7 @@ service.interceptors.response.use(
      } else {
        Toast({
          icon: 'warning-o',
-          message: res.content.content ? res.content.content : '接口服务异常',
+          message: res.message ? res.message : '接口服务异常',
        })
      }
    }
--- a/src/views/myBenefits/benefitsIntrodctuion.vue
+++ b/src/views/myBenefits/benefitsIntrodctuion.vue
@@ -38,7 +38,7 @@
            定级保费
            <img class="tips" @click="premPopupShow = true" src="@/assets/images/myBenefits/info.png" alt="" />
          </div>
-          <div class="userContent">{{ userInfo.stdPrem }}</div>
+          <div class="userContent">{{ userInfo.stdPrem }}元</div>
        </div>
      </div>
    </div>
@@ -94,9 +94,9 @@
        </m-swiper>
      </div>
    </div>
-    <van-popup v-lock-scroll="true" v-model="levelPopupShow" class="tipsPopup" :close-on-click-overlay="false">
+    <van-popup :lock-scroll="true" v-model="levelPopupShow" class="tipsPopup" :close-on-click-overlay="false">
      <div class="closeBtn" @click="levelPopupShow = false">
-        <img src="@/assets/images/myBenefits/benefitlevel/close.png" alt="" />
+        <img :src="require('@/assets/images/myBenefits/benefitlevel/close.png')" alt="" />
      </div>
      <div class="popupContent">
        <div class="bg">
@@ -157,7 +157,7 @@
        </div>
      </div>
    </van-popup>
-    <van-popup v-lock-scroll="true" v-model="premPopupShow" class="popupLevel" :close-on-click-overlay="false">
+    <van-popup :lock-scroll="true" v-model="premPopupShow" class="popupLevel" :close-on-click-overlay="false">
      <div class="closeBtn" @click="premPopupShow = false">
        <img src="@/assets/images/myBenefits/benefitlevel/close.png" alt="" />
      </div>
--- a/src/views/myBenefits/benefitsList.vue
+++ b/src/views/myBenefits/benefitsList.vue
@@ -27,7 +27,7 @@
    </div>
    <add-family-member v-if="adddInsured" :userInfo="userInfo" :adddInsuredShow="adddInsured" @close="adddInsured = false" />
    <!-- 返回提示 弹窗 -->
-    <van-popup v-lock-scroll="true" v-model="tipsPopupShow" class="tipsPopup" :close-on-click-overlay="false">
+    <!-- <van-popup v-lock-scroll="true" v-model="tipsPopupShow" class="tipsPopup" :close-on-click-overlay="false">
      <div class="bg"></div>
      <div class="popupDiv">
        <div class="title">提示</div>
@@ -39,8 +39,34 @@
          </van-button>
        </div>
      </div>
+    </van-popup> -->
+    <van-popup v-model="tipsPopupShow" class="tipsPopup1" :lock-scroll="true" :close-on-click-overlay="false">
+      <div class="closeBtn" @click="tipsPopupShow = false">
+        <img :src="require('@/assets/images/myBenefits/benefitlevel/close.png')" alt="" />
+      </div>
+      <div class="popupContent">
+        <div class="bg"></div>
+        <div class="popupDiv">
+          <div class="title">提示</div>
+          <div class="ocrContent">当前部分权益可与家庭成员共享，点击“继续”可以绑定家庭成员，点击“放弃绑定”则放弃本服务年度绑定家庭成员的权利。</div>
+          <div class="btnBottom flex">
+            <van-button class="sub2" round slot="button" size="small" v-no-more-click="1000" @click="giveUpBtn()" width="100%"> 放弃绑定 </van-button>
+            <van-button
+              class="sub"
+              round
+              slot="button"
+              size="small"
+              v-no-more-click="1000"
+              @click=";(tipsPopupShow = false), (adddInsured = true)"
+              width="100%"
+            >
+              继续
+            </van-button>
+          </div>
+        </div>
+      </div>
    </van-popup>
-    <van-popup v-lock-scroll="true" v-model="overUseTimes" class="tipsPopup" :close-on-click-overlay="false">
+    <van-popup v-model="overUseTimes" class="tipsPopup" :lock-scroll="true" :close-on-click-overlay="false">
      <div class="bg"></div>
      <div class="popupDiv">
        <div class="title">提示</div>
@@ -50,7 +76,7 @@
        </div>
      </div>
    </van-popup>
-    <van-popup v-lock-scroll="true" v-model="satisfyStarLevel" class="tipsPopup" :close-on-click-overlay="false">
+    <van-popup v-model="satisfyStarLevel" class="tipsPopup" :lock-scroll="true" :close-on-click-overlay="false">
      <div class="bg"></div>
      <div class="popupDiv">
        <div class="title">提示</div>
@@ -415,4 +441,113 @@ export default {
    }
  }
 }
+.tipsPopup1 {
+  top: calc(50% - 35px);
+  background-color: transparent;
+  .closeBtn {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    width: 30px;
+    height: 30px;
+    display: block;
+    z-index: 3000;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .popupContent {
+    background: #ffffff;
+    border-radius: 30px;
+    position: relative;
+    margin-top: 35px;
+  }
+  .bg {
+    position: absolute;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1;
+    height: 72px;
+    background: linear-gradient(180deg, #ffe4e7 0%, #ffffff 100%);
+    border-radius: 30px;
+  }
+  .popupDiv {
+    // background: #ffffff;
+    border-radius: 30px;
+    position: relative;
+    z-index: 5;
+    font-family: SourceHanSansCN, SourceHanSansCN;
+    font-weight: bold;
+    font-size: 18px;
+    color: #333333;
+    line-height: 21px;
+    text-align: center;
+    font-style: normal;
+    width: 327px;
+
+    .title {
+      padding-top: 16px;
+    }
+  }
+  .ocrContent {
+    padding: 45px 20px 45px;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 500;
+    font-size: 14px;
+    color: #333333;
+    line-height: 21px;
+    text-align: center;
+    font-style: normal;
+  }
+  .btnBottom {
+    padding-bottom: 24px;
+    padding-left: 18px;
+    padding-right: 18px;
+    box-sizing: border-box;
+    .sub1 {
+      background: #f3eeee;
+      border-radius: 20px;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 14px;
+      color: #666666;
+      line-height: 40px;
+      height: 40px;
+      text-align: center;
+      font-style: normal;
+      width: 100%;
+    }
+    .sub {
+      background: #bd1c2d;
+      border-radius: 20px;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 14px;
+      color: #fff;
+      line-height: 40px;
+      height: 40px;
+      text-align: center;
+      font-style: normal;
+      width: 100%;
+      margin-left: 22px;
+    }
+    .sub2 {
+      background: #f3eeee;
+      border-radius: 20px;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 600;
+      font-size: 14px;
+      color: #bd1c2d;
+      line-height: 40px;
+      height: 40px;
+      text-align: center;
+      font-style: normal;
+      width: 100%;
+    }
+  }
+}
 </style>
--- a/src/views/myBenefits/components/addFamilyMember.vue
+++ b/src/views/myBenefits/components/addFamilyMember.vue
@@ -1,7 +1,15 @@
 <template>
  <div>
    <!-- 使用Vant Popup组件 -->
-    <van-popup v-model="adddInsuredShow" position="bottom" round :style="{ height: '80vh' }" @close="handleClose">
+    <van-popup
+      v-model="adddInsuredShow"
+      position="bottom"
+      round
+      :style="{ height: '80vh' }"
+      @close="handleClose"
+      :lock-scroll="true"
+      :close-on-click-overlay="false"
+    >
      <div class="popup-container">
        <div class="popup-bg"></div>
        <div class="popup-content-container">
--- a/src/views/myBenefits/myBenefits.vue
+++ b/src/views/myBenefits/myBenefits.vue
@@ -40,27 +40,37 @@
          <!-- <img class="more-icon" src="@/assets/images/myBenefits/more.png" alt="" /> -->
        </div>
      </div>
-      <!-- <div class="view-more" @click="navigateToActiveCode()">
-        <span>激活码</span>
-        <van-icon name="arrow" />
-      </div> -->
+      <div class="view-manual" @click="navigateToPdf()">客户权益使用手册</div>
    </div>
    <add-family-member v-if="adddInsured" :userInfo="userInfo" :adddInsuredShow="adddInsured" @close="adddInsured = false" />
    <!-- 返回提示 弹窗 -->
-    <van-popup v-lock-scroll="true" v-model="tipsPopupShow" class="tipsPopup" :close-on-click-overlay="false">
+    <van-popup v-model="tipsPopupShow" class="tipsPopup1" :lock-scroll="true" :close-on-click-overlay="false">
+      <div class="closeBtn" @click="tipsPopupShow = false">
+        <img :src="require('@/assets/images/myBenefits/benefitlevel/close.png')" alt="" />
+      </div>
+      <div class="popupContent">
        <div class="bg"></div>
        <div class="popupDiv">
          <div class="title">提示</div>
-        <div class="ocrContent">当前权益可与家庭成员共享，需绑定后使用</div>
+          <div class="ocrContent">当前部分权益可与家庭成员共享，点击“继续”可以绑定家庭成员，点击“放弃绑定”则放弃本服务年度绑定家庭成员的权利。</div>
          <div class="btnBottom flex">
-          <van-button class="sub1" round slot="button" size="small" v-no-more-click="1000" @click="tipsPopupShow = false" width="100%"> 取消 </van-button>
-          <van-button class="sub" round slot="button" size="small" v-no-more-click="1000" @click=";(tipsPopupShow = false), (adddInsured = true)" width="100%">
+            <van-button class="sub2" round slot="button" size="small" v-no-more-click="1000" @click="giveUpBtn()" width="100%"> 放弃绑定 </van-button>
+            <van-button
+              class="sub"
+              round
+              slot="button"
+              size="small"
+              v-no-more-click="1000"
+              @click=";(tipsPopupShow = false), (adddInsured = true)"
+              width="100%"
+            >
              继续
            </van-button>
          </div>
        </div>
+      </div>
    </van-popup>
-    <van-popup v-lock-scroll="true" v-model="overUseTimes" class="tipsPopup" :close-on-click-overlay="false">
+    <van-popup v-model="overUseTimes" class="tipsPopup" :lock-scroll="true" :close-on-click-overlay="false">
      <div class="bg"></div>
      <div class="popupDiv">
        <div class="title">提示</div>
@@ -85,7 +95,15 @@

 <script>
 import { fetchUserInfo } from '@/api/user/token'
-import { fetchConfigCode, fetchBenefitInfoList, fetchBenefitCheck, fetchBenefitServiceUrl, yjyRegister } from '@/api/benefits'
+import {
+  fetchConfigCode,
+  fetchBenefitInfoList,
+  fetchBenefitCheck,
+  fetchBenefitServiceUrl,
+  yjyRegister,
+  giveUpAddCustomerFamilyMember,
+  downloadPdf,
+} from '@/api/benefits'
 import AddFamilyMember from './components/addFamilyMember.vue'

 export default {
@@ -117,6 +135,7 @@ export default {
      overUseTimes: false,
      satisfyStarLevel: false,
      tipsPopupShow: false,
+      selectedItem: {},
    }
  },
  computed: {},
@@ -143,7 +162,6 @@ export default {
        })
        .catch((error) => {
          console.error('获取权益信息列表失败:', error)
-          // this.showErrorDialog('获取权益信息列表失败')
        })
    },
    // 获取用户信息
@@ -167,8 +185,8 @@ export default {
            this.$toast(res.content.content || '获取用户信息失败')
          }
        })
-        .catch(() => {
-          this.showErrorDialog('您的登录已过期，请退出重试')
+        .catch((error) => {
+          console.error('获取用户信息失败:', error)
        })
    },
    // 获取当前星级下的所用服务
@@ -196,7 +214,6 @@ export default {
        })
        .catch((error) => {
          console.error('获取配置代码失败:', error)
-          // this.showErrorDialog('获取等级徽章失败')
        })
    },
    // 查看更多权益
@@ -217,6 +234,7 @@ export default {
      })
    },
    navigateToService(item) {
+      this.selectedItem = item
      fetchBenefitCheck({
        benefitCode: item.code,
      }).then((res) => {
@@ -245,6 +263,19 @@ export default {
        }
      })
    },
+    // 放弃绑定
+    giveUpBtn() {
+      giveUpAddCustomerFamilyMember({}).then((res) => {
+        if (res.content.result == '0') {
+          this.getBenefitsUrl(this.selectedItem)
+        } else {
+          this.$toast(res.content.content || '放弃绑定失败')
+        }
+      })
+    },
+    navigateToPdf() {
+      window.open(process.env.VUE_APP_ADMIN + '/configCodeEx/getBenefitPdf', '_top')
+    },
  },
 }
 </script>
@@ -252,6 +283,7 @@ export default {
 <style lang="scss" scoped>
 .my-benefits-container {
  background: #f8f8f8;
+  height: 100vh;
  .banner-bg {
    position: relative;
    width: 100%;
@@ -396,9 +428,58 @@ export default {
    }
  }
 }
+.view-manual {
+  margin: 20px auto 0;
+  width: fit-content;
+  height: 32px;
+  line-height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 12px;
+  text-decoration: underline;
+  color: #0066cc;
+  cursor: pointer;
+  user-select: text;
+  transition: all 0.2s ease;
+}
+
+.view-manual::before,
+.view-manual::after {
+  content: '';
+  height: 1px;
+  background-color: #ccc;
+  flex: 1;
+  max-width: 80px;
+  width: 80px;
+}
+
+.view-manual::before {
+  margin-right: 10px;
+}
+
+.view-manual::after {
+  margin-left: 10px;
+}
+
 .tipsPopup {
  background: #ffffff;
  border-radius: 30px;
+  .closeBtn {
+    position: absolute;
+    top: 0px;
+    right: 24px;
+    width: 30px;
+    height: 30px;
+    display: block;
+    z-index: 3000;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
  .bg {
    position: absolute;
    top: 0;
@@ -468,6 +549,128 @@ export default {
      width: 100%;
      margin-left: 22px;
    }
+    .sub2 {
+      background: #f3eeee;
+      border-radius: 20px;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 600;
+      font-size: 14px;
+      color: #bd1c2d;
+      line-height: 40px;
+      height: 40px;
+      text-align: center;
+      font-style: normal;
+      width: 100%;
+    }
+  }
+}
+.tipsPopup1 {
+  top: calc(50% - 35px);
+  background-color: transparent;
+  .closeBtn {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    width: 30px;
+    height: 30px;
+    display: block;
+    z-index: 3000;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .popupContent {
+    background: #ffffff;
+    border-radius: 30px;
+    position: relative;
+    margin-top: 35px;
+  }
+  .bg {
+    position: absolute;
+    top: 0px;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 1;
+    height: 72px;
+    background: linear-gradient(180deg, #ffe4e7 0%, #ffffff 100%);
+    border-radius: 30px;
+  }
+  .popupDiv {
+    // background: #ffffff;
+    border-radius: 30px;
+    position: relative;
+    z-index: 5;
+    font-family: SourceHanSansCN, SourceHanSansCN;
+    font-weight: bold;
+    font-size: 18px;
+    color: #333333;
+    line-height: 21px;
+    text-align: center;
+    font-style: normal;
+    width: 327px;
+
+    .title {
+      padding-top: 16px;
+    }
+  }
+  .ocrContent {
+    padding: 45px 20px 45px;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 500;
+    font-size: 14px;
+    color: #333333;
+    line-height: 21px;
+    text-align: center;
+    font-style: normal;
+  }
+  .btnBottom {
+    padding-bottom: 24px;
+    padding-left: 18px;
+    padding-right: 18px;
+    box-sizing: border-box;
+    .sub1 {
+      background: #f3eeee;
+      border-radius: 20px;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 14px;
+      color: #666666;
+      line-height: 40px;
+      height: 40px;
+      text-align: center;
+      font-style: normal;
+      width: 100%;
+    }
+    .sub {
+      background: #bd1c2d;
+      border-radius: 20px;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 14px;
+      color: #fff;
+      line-height: 40px;
+      height: 40px;
+      text-align: center;
+      font-style: normal;
+      width: 100%;
+      margin-left: 22px;
+    }
+    .sub2 {
+      background: #f3eeee;
+      border-radius: 20px;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 600;
+      font-size: 14px;
+      color: #bd1c2d;
+      line-height: 40px;
+      height: 40px;
+      text-align: center;
+      font-style: normal;
+      width: 100%;
+    }
  }
 }
 </style>