县市区点击弹框

src/apis/model/userInfoModel.ts

@@ -7,14 +7,15 @@ export interface UpdateUserInfoRequestModel {
     avatar: string
     // addres: string
 }
-export interface UserInfoModel{
+export interface UserInfoModel {
     /** 用户id */
     uid: string
     /** 微信用户 id */
     /** 市/县代理 */
-    area_manage_type:string
+    area_manage_type: string
+    area_manage: manageModel
     /**股东 id */
-    stockholder:number
+    stockholder: number
     wechat_user_id: string
     /** 支付宝用户 id */
     ali_user_id: string
@@ -144,4 +145,9 @@ export interface UserInfoModel{
     /** 团队人数 */
     team_number: number
     is_bangfu: boolean
+}
+export interface manageModel {
+    area_name: []
+    code_list: string
+    type: string
 }

src/components/FPopup/FPopup.vue

@@ -7,7 +7,10 @@ import { usePopup } from './use-popup'
 const props = defineProps(popupProps)
 const emit = defineEmits(popupEmits)
 const { showValue, classes } = usePopup(props, emit)
-
+onLoad(()=>{
+  console.log(showValue, classes);
+  
+})
 const animationName = {
   center: 'fade',
   top: 'slide-down',

src/pages/my-rules/index.vue

@@ -181,37 +181,37 @@ const userType = computed(() => {
   }
 })
 //0:普通用户 1:股东
-const AlholderType = computed(() => {
-  const stockholder = userStore.userInfo?.stockholder
-  console.log('我是stockholder',userStore.userInfo.stockholder)
-  // 普通用户
-  if (stockholder == 0) {
-    return ['']
-  }
-  // 股东
-  if (stockholder == 1) {
-    return ['../../static/img-hy/股东.png']
-  }
+// const AlholderType = computed(() => {
+//   const stockholder = userStore.userInfo?.stockholder
+//   console.log('我是stockholder',userStore.userInfo.stockholder)
+//   // 普通用户
+//   if (stockholder == 0) {
+//     return ['']
+//   }
+//   // 股东
+//   if (stockholder == 1) {
+//     return ['../../static/img-hy/股东.png']
+//   }
   
-})
+// })
 // '':普通用户 district-区/县代 city-市代',
-const areaType = computed(() => {
-  const areamanage = userStore.userInfo?.area_manage_type
-  console.log('我是area_manage_type',userStore.userInfo.area_manage_type)
-  // 县/区代理
-  if (areamanage == 'district') {
-    return ['../../static/img-hy/区/县代理.png']
-  }
-  // 市代理
-  if (areamanage == 'city') {
-    return ['../../static/img-hy/市级代理.png']
-  }
-  //普通用户
-  if(!areamanage){
-    return['']
-  }
+// const areaType = computed(() => {
+//   const areamanage = userStore.userInfo?.area_manage_type
+//   console.log('我是area_manage_type',userStore.userInfo.area_manage_type)
+//   // 县/区代理
+//   if (areamanage == 'district') {
+//     return ['../../static/img-hy/district.png']
+//   }
+//   // 市代理
+//   if (areamanage == 'city') {
+//     return ['../../static/img-hy/city.png']
+//   }
+//   //普通用户
+//   if(!areamanage){
+//     return['']
+//   }
   
-})
+// })
 
 
 
@@ -331,9 +331,9 @@ function handleToVipPage() {
             <div class="flex gap-1 items-center px-1">
               <div class="flex rounded-full  text-[12px] text-white w-12 h-5 justify-center items-center w-fit px-1">
                 <image class="vip_img" :src="userType" v-if="userType"></image>
-                <image class="vip_img" :src="AlholderType" v-if="AlholderType
+                <!-- <image class="vip_img" :src="AlholderType" v-if="AlholderType
                   "></image>
-                <image class="vip_img" :src="areaType" v-if="areaType"></image>
+                <image class="vip_img" :src="areaType" v-if="areaType"></image> -->
               </div>
             </div>
             <!--            <div-->

src/pages/user/index.vue

@@ -1,12 +1,14 @@
 <script lang="ts" setup>
-import {useUserStore} from "~/stores/userStore";
+import { useUserStore } from "~/stores/userStore";
 import CXBAuthorize from "~/components/CXBAuthorize/CXBAuthorize.vue";
-import {getAgentInfo, getUserInfo} from "~/apis/user";
-import {CDN_URL} from "~/config/app";
+import { getAgentInfo, getUserInfo } from "~/apis/user";
+import { CDN_URL } from "~/config/app";
 import Routine from "~/libs/routine";
-import {totalOrderNumber} from "~/apis/order.api";
-import type {OrderQuantityModel} from "~/apis/model/order.model";
-import type {Ref} from "vue";
+import { totalOrderNumber } from "~/apis/order.api";
+import type { OrderQuantityModel } from "~/apis/model/order.model";
+import FPopup from "~/components/FPopup/FPopup.vue";
+import { CANCEL_EVENT, OPEN_EVENT } from "~/constants/event";
+import type { Ref } from "vue";
 const pageStore = usePageStoreWidthOut()
 const currentType = ref('')
 const myOrderList = [{
@@ -42,13 +44,18 @@ const contactUsList = [{
   icon: '/static/icon/kefu_icon.png',
   text: '联系客服',
   url: 'https://work.weixin.qq.com/kfid/kfce29f31a08fd53ee0'
-},{
+}, {
   type: 'link',
   icon: CDN_URL + '/static/assets/bangzhuzhongxin_220620.png',
   text: '帮助中心',
   url: '/pages/help-center/index'
 }]
 
+
+//市/区代表弹框标识
+const showValue = ref(false)
+
+
 const myServiceList = [{
   icon: CDN_URL + '/static/assets/wodeyaoqing_220620.png',
   text: '我的邀请',
@@ -237,34 +244,34 @@ const userType = computed(() => {
   // console.log(userStore.userInfo)
   // 普通用户
   if (userRichType == 0) {
-    
+
     return ['../../static/img-hy/用户.png']
   }
   // 会员
   if (userRichType == 1) {
-    
+
     return ['../../static/img-hy/会员.png']
 
   }
   if (userRichType == 3) {
-   
+
     return ['../../static/img-hy/创始人.png']
   }
   // 高级会员
   if (userRichType == 4) {
-    
+
     return ['../../static/img-hy/高级会员.png']
   }
   if (userRichType == 8) {
-    
+
     return ['../../static/img-hy/合伙人.png']
   }
   if (userRichType == 9) {
-   
+
     return ['../../static/img-hy/联合创始人.png']
   }
   if (!userRichType) {
-   
+
     return ['']
   }
 })
@@ -280,24 +287,54 @@ const AlholderType = computed(() => {
   if (stockholder == 1) {
     return ['../../static/img-hy/股东.png']
   }
-  
+
 })
 // '':普通用户 district-区/县代 city-市代',
 const areaType = computed(() => {
   const areamanage = userStore.userInfo?.area_manage_type
   // 县/区代理
   if (areamanage == 'district') {
-    return ['../../static/img-hy/区/县代理.png']
+    return ['../../static/img-hy/district.png']
   }
   // 市代理
   if (areamanage == 'city') {
-    return ['../../static/img-hy/市级代理.png']
+    return ['../../static/img-hy/city.png']
   }
   //普通用户
-  if(!areamanage){
-    return['']
+  if (!areamanage) {
+    return ['']
+  }
+
+})
+
+//弹框展示
+function openPopup() {
+  const areamanage = userStore.userInfo?.area_manage.area_name
+  console.log(areamanage);
+  showValue.value = true
+}
+//关闭弹框
+const onCancel = () => {
+  // show.value = false
+  showValue.value = false
+}
+
+//计算市区县展示图片
+const backImg = computed(() => {
+  const areamanage = userStore.userInfo?.area_manage.type
+  // 县/区代理
+  if (areamanage == 'district') {
+    return ['../../static/dl/xqdl.png']
+  }
+  // 市代理
+  if (areamanage == 'city') {
+    return ['../../static/dl/city.png']
   }
-  
+})
+const textType = computed(() => {
+  const areamanage = userStore.userInfo?.area_manage.area_name
+  let res = areamanage.join("");
+  return res
 })
 
 
@@ -348,17 +385,9 @@ function handleShowMyRulePage() {
       <div class="pt-15 ">
         <div class="flex gap-2 mb-2 text-white mb-6">
           <image v-if="userStore.userInfo && userStore.userInfo.avatar" :src="userStore.userInfo.avatar"
-                 @click="handleShowMyProfile"
-                 mode="widthFix"
-                 class="w-9 h-9 rounded-full"
-          ></image>
-          <image
-              v-else
-              @click="checkAuth"
-              src="https://app.bjtdba.com/uploads/logo.jpg"
-              mode="widthFix"
-              class="w-9 h-9 rounded-full"
-          />
+            @click="handleShowMyProfile" mode="widthFix" class="w-9 h-9 rounded-full"></image>
+          <image v-else @click="checkAuth" src="https://app.bjtdba.com/uploads/logo.jpg" mode="widthFix"
+            class="w-9 h-9 rounded-full" />
           <div class="flex flex-col">
             <div class="flex">
               <div class="text-sm">
@@ -372,62 +401,74 @@ function handleShowMyRulePage() {
             </div>
             <div class="btm flex gap-1 px-1">
               <!-- 用户 -->
-            <div
-                v-for="(item, index) in userType"
-                :key="index"
-                @click="handleShowMyRulePage()"
+              <div v-for="(item, index) in userType" :key="index" @click="handleShowMyRulePage()"
                 class="flex rounded-full  text-[12px] text-white w-12 h-5  w-fit px-1">
-                <image class="vip_img"  :src="item" v-show="userType" ></image>
-            </div>
-            <!-- 市县代理 -->
-            <div
-                v-for="(item, index) in AlholderType"
-                :key="index"
+                <image class="vip_img" :src="item"></image>
+              </div>
+              <!-- 市区县代理 -->
+              <div @click="openPopup" v-for="(item, index) in areaType" :key="index"
                 class="flex rounded-full  text-[12px] text-white w-12 h-5  w-fit px-1">
-                <image class="vip_img"  :src="item" v-show="AlholderType" ></image>
-            </div>
-            <!-- 股东 -->
-            <div
-                v-for="(item, index) in areaType"
-                :key="index"
+                <image class="vip_img" :src="item"></image>
+              </div>
+              <!-- 股东 -->
+              <div v-for="(item, index) in AlholderType" :key="index"
                 class="flex rounded-full  text-[12px] text-white w-12 h-5   w-fit px-1">
-                <image class="vip_img"  :src="item" v-show="areaType" ></image>
-            </div>
+                <image class="vip_img" :src="item"></image>
+              </div>
             </div>
           </div>
-
+          <FPopup v-model:show="showValue" position="center" exClass="box_2 ">
+            <div class="box_2 flex-row">
+              <div class="box_2" v-for="(item, index) in backImg " :key="index">
+                <image class="img_1" :src="item"></image>
+              </div>
+              <div class="group_2 flex-col lolr ">
+                <div class="div_box pong1 ">
+                  <div class="blue_1">
+                    <image class="off_3" src="../../static/dl/DLqy.png" />
+                    <span class="pan">代理区域</span>
+                  </div>
+                  <div class="blue_2 height1 ">
+                    {{ textType }}
+                  </div>
+                </div>
+                <div class="div_box pong2 ">
+                  <div class="blue_1">
+                    <image class="off_3" src="../../static/dl/QYDL.png" />
+                    <span class="pan">代理权益</span>
+                  </div>
+                  <div class="block_1 flex-col blue_2 height2 ">
+                    <div class="text-group_4 flex-col justify-between">
+                      <div class=" pend">所辖区域的区域管理分红</div>
+                      <div class="text_5 pand ">(参照会员系统佣金逻辑）</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div @click="onCancel" class="off_1">
+              <image class="off_2" src="../../static/dl/关闭.png" />
+            </div>
+          </FPopup>
 
         </div>
         <div class="bg-white rounded flex flex-col gap-6 py-4 text-xl">
-          <div
-              v-if="userStore.userInfo"
-              class="flex flex-wrap">
-            <div
-                @tap="handleShowAnnuityDetail"
-                class="w-1/3 flex flex-col justify-center items-center"
-            >
+          <div v-if="userStore.userInfo" class="flex flex-wrap">
+            <div @tap="handleShowAnnuityDetail" class="w-1/3 flex flex-col justify-center items-center">
               <div>{{ userStore.yanglao.all_yanglao }}</div>
               <div class="text-xs">养老金</div>
             </div>
-            <div
-                @tap="handleShowMyInvitation"
-                class="w-1/3  flex flex-col justify-center items-center">
-              <div>{{ agentInfo.brokerage_price ? agentInfo.brokerage_price : '0.00'}}</div>
+            <div @tap="handleShowMyInvitation" class="w-1/3  flex flex-col justify-center items-center">
+              <div>{{ agentInfo.brokerage_price ? agentInfo.brokerage_price : '0.00' }}</div>
               <div class="text-xs">我的佣金</div>
             </div>
-            <div
-                @tap="handleShowMyIntegral"
-                class="w-1/3  flex flex-col justify-center items-center">
+            <div @tap="handleShowMyIntegral" class="w-1/3  flex flex-col justify-center items-center">
               <div>{{ userStore.userInfo.score }}</div>
               <div class="text-xs">我的积分</div>
             </div>
           </div>
-          <div
-              v-if="userStore.userInfo"
-              class="flex">
-            <div
-                @click="handleToRedIntegral"
-                class="w-1/2 flex flex-col justify-center items-center">
+          <div v-if="userStore.userInfo" class="flex">
+            <div @click="handleToRedIntegral" class="w-1/2 flex flex-col justify-center items-center">
               <div>{{ userStore.userInfo.red }}</div>
               <div class="text-xs">红积分提现</div>
             </div>
@@ -445,9 +486,7 @@ function handleShowMyRulePage() {
         <div class="flex justify-between pt-4 mb-4">
           <div>我的订单</div>
           <div class="flex items-center">
-            <div
-                @click="handleShowMyAllOrder(0)"
-                class="text-sm text-gray">查看全部
+            <div @click="handleShowMyAllOrder(0)" class="text-sm text-gray">查看全部
             </div>
             <div class="f-text-color-2 i-tabler-chevron-right"></div>
           </div>
@@ -455,51 +494,35 @@ function handleShowMyRulePage() {
 
         </div>
         <div class="flex pb-4">
-          <div
-              @click="handleShowMyAllOrder(index + 1)"
-              v-for="(item, index) in myOrderList" :key="index"
-              class="flex flex-col justify-center items-center w-1/5 gap-3"
-          >
+          <div @click="handleShowMyAllOrder(index + 1)" v-for="(item, index) in myOrderList" :key="index"
+            class="flex flex-col justify-center items-center w-1/5 gap-3">
             <div class="relative">
-              <div class="bg-primary rounded-full w-3 h-3 text-[9px] text-white flex justify-center items-center absolute top--1 right--2 text-center"
-                   v-if="
-                   item.id == 'noPay' && orderQuantity &&  orderQuantity.noPay != '0'"
-
-              >
-                {{ orderQuantity.noPay}}
+              <div
+                class="bg-primary rounded-full w-3 h-3 text-[9px] text-white flex justify-center items-center absolute top--1 right--2 text-center"
+                v-if="item.id == 'noPay' && orderQuantity && orderQuantity.noPay != '0'">
+                {{ orderQuantity.noPay }}
               </div>
-              <div class="bg-primary rounded-full w-3 h-3 text-[9px] text-white flex justify-center items-center absolute top--1 right--2 text-center"
-                   v-if="
-                   item.id == 'refund' && orderQuantity && orderQuantity.refund != '0'"
-
-              >
-                {{ orderQuantity.refund}}
+              <div
+                class="bg-primary rounded-full w-3 h-3 text-[9px] text-white flex justify-center items-center absolute top--1 right--2 text-center"
+                v-if="item.id == 'refund' && orderQuantity && orderQuantity.refund != '0'">
+                {{ orderQuantity.refund }}
               </div>
-              <div class="bg-primary rounded-full w-3 h-3 text-[9px] text-white flex justify-center items-center absolute top--1 right--2 text-center"
-                   v-if="
-                   item.id == 'noDeliver' && orderQuantity && orderQuantity.noDeliver != '0'"
-
-              >
-                {{ orderQuantity.noDeliver}}
+              <div
+                class="bg-primary rounded-full w-3 h-3 text-[9px] text-white flex justify-center items-center absolute top--1 right--2 text-center"
+                v-if="item.id == 'noDeliver' && orderQuantity && orderQuantity.noDeliver != '0'">
+                {{ orderQuantity.noDeliver }}
               </div>
-              <div class="bg-primary rounded-full w-3 h-3 text-[9px] text-white flex justify-center items-center absolute top--1 right--2 text-center"
-                   v-if="
-                   item.id == 'noPostage' && orderQuantity && orderQuantity.noPostage != '0'"
-
-              >
-                {{ orderQuantity.noPostage}}
+              <div
+                class="bg-primary rounded-full w-3 h-3 text-[9px] text-white flex justify-center items-center absolute top--1 right--2 text-center"
+                v-if="item.id == 'noPostage' && orderQuantity && orderQuantity.noPostage != '0'">
+                {{ orderQuantity.noPostage }}
               </div>
-              <div class="bg-primary rounded-full w-3 h-3 text-[9px] text-white flex justify-center items-center absolute top--1 right--2 text-center"
-                   v-if="
-                   item.id == 'noComment' && orderQuantity && orderQuantity.noComment != '0'"
-
-              >
-                {{ orderQuantity.noComment}}
+              <div
+                class="bg-primary rounded-full w-3 h-3 text-[9px] text-white flex justify-center items-center absolute top--1 right--2 text-center"
+                v-if="item.id == 'noComment' && orderQuantity && orderQuantity.noComment != '0'">
+                {{ orderQuantity.noComment }}
               </div>
-              <image :src="item.icon"
-                     mode="widthFix"
-                     class="w-7 h-7 "
-              />
+              <image :src="item.icon" mode="widthFix" class="w-7 h-7 " />
             </div>
 
             <div class="text-xs">{{ item.text }}</div>
@@ -512,15 +535,9 @@ function handleShowMyRulePage() {
           <div>我的服务</div>
         </div>
         <div class="flex flex-wrap ">
-          <div
-              v-for="(item, index) in myServiceList" :key="index"
-              @tap="handleService(item)"
-              class="flex flex-col justify-center items-center w-1/4 gap-2 mb-4"
-          >
-            <image :src="item.icon"
-                   mode="widthFix"
-                   class="w-6 h-6 "
-            />
+          <div v-for="(item, index) in myServiceList" :key="index" @tap="handleService(item)"
+            class="flex flex-col justify-center items-center w-1/4 gap-2 mb-4">
+            <image :src="item.icon" mode="widthFix" class="w-6 h-6 " />
             <div class="text-xs">{{ item.text }}</div>
           </div>
         </div>
@@ -532,15 +549,9 @@ function handleShowMyRulePage() {
           <div>联系我们</div>
         </div>
         <div class="flex flex-wrap ">
-          <div
-              v-for="(item, index) in contactUsList" :key="index"
-              @tap="handleToContact(item)"
-              class="flex flex-col justify-center items-center w-1/4 gap-2 mb-4"
-          >
-            <image :src="item.icon"
-                   mode="widthFix"
-                   class="w-6 h-6 "
-            />
+          <div v-for="(item, index) in contactUsList" :key="index" @tap="handleToContact(item)"
+            class="flex flex-col justify-center items-center w-1/4 gap-2 mb-4">
+            <image :src="item.icon" mode="widthFix" class="w-6 h-6 " />
             <div class="text-xs">{{ item.text }}</div>
           </div>
         </div>
@@ -556,16 +567,114 @@ function handleShowMyRulePage() {
 page {
   background-color: #f8f8f8;
 }
-.flex-height{
+
+.flex-height {
   margin-left: 3px;
 }
-.btm{
-  margin-top:1px ;
+
+.btm {
+  margin-top: 1px;
 }
-.vip_img{
-  width:58px;
+
+.vip_img {
+  width: 58px;
   height: 29px;
 }
+
+.box_2 {
+  background-color: #ffffff00;
+}
+
+.img_1 {
+  width: 280px;
+  height: 330px;
+}
+
+.off_1 {
+  width: 36px;
+  height: 36px;
+  position: absolute;
+  margin-top: 20px;
+  left: 50%;
+  margin-left: -18px;
+}
+
+.off_2 {
+  width: 100%;
+  height: 100%;
+}
+
+.off_3 {
+  width: 17px;
+  height: 17px;
+}
+
+.div_box {
+  width: 248px;
+  height: 76px;
+  background: #E5F9FF;
+  border-radius: 16rpx;
+  margin-left: 16px;
+}
+
+.blue_1 {
+  height: 40px;
+  line-height: 40px;
+}
+
+.blue_1 image {
+  margin-left: 13px;
+  margin-top: 7px;
+}
+
+.pan {
+  font-size: 14px;
+  margin-left: 5px;
+  font-family: SourceHanSansCN, SourceHanSansCN;
+  font-weight: 500;
+  color: #4D4D69;
+
+}
+
+.blue_2 {
+  font-size: 15px;
+  font-family: SourceHanSansCN, SourceHanSansCN;
+  font-weight: bold;
+  color: #4D4D69;
+  background: #C2F0FF;
+  padding-left: 13px;
+}
+
+.pand {
+  font-size: 22rpx;
+  font-family: SourceHanSansCN, SourceHanSansCN;
+  font-weight: bold;
+  color: black;
+}
+
+.height1 {
+  height: 74rpx;
+  line-height: 74rpx;
+}
+
+.pend {
+  padding-top: 14rpx
+}
+
+.height2 {
+  height: 90rpx;
+  border-radius: 0rpx 0rpx 16rpx 16rpx;
+}
+
+.pong1 {
+  position: absolute;
+  top: 255rpx
+}
+
+.pong2 {
+  position: absolute;
+  top: 447rpx
+}
 </style>
 <route lang="yaml">
 style: