com.kasite.client.uniapp.patient/pagesPersonal/st1/business/patientManagement/memberList/memberList.vue

<template>
  <view class="container">
    <view class="content">
      <view v-if="showNoData" class="noData">
        <no-data :value="noDataValue"></no-data>
      </view>
      <template v-if="memberList.length > 0">
        <view class="member_item" v-for="(item, index) in memberList" :key="index">
          <view class="bg_white member_infoBox" data-tag="member" :data-index="index" :data-item="item" @click="setDefaultMemberAndCard($event, item, 'member')">
            <view class="member_info displayFlexRow">
              <view class="info_memberMsg">
                <text class="name">{{item.memberName}}</text>
                <text class="tip">{{item.sex=='1'?'男':item.sex=='2'?'女':''}} {{item.age?item.age+'岁':''}}</text>
                <text class="tag">
                  <text class="bg backgroundCustom "></text>
                  <text class="text colorCustom">{{item.relationName}}</text>
                </text>
              </view>
              <view class="auto_btn displayFlexRow" v-if="item.isOpen || (item.userMemberList && item.userMemberList[0] && item.userMemberList[0].isDefaultMember == 1)">
                <image :src="item.userMemberList && item.userMemberList[0] && item.userMemberList[0].isDefaultMember == 1 ? iconUrl.icon_roundHook : iconUrl.icon_roundHook_n" />
                <text :class="item.userMemberList && item.userMemberList[0] && item.userMemberList[0].isDefaultMember == 1 ? 'colorCustom' : 'color666'">默认</text>
              </view>
            </view>
            <view class="member_info_num displayFlexRow">
              <view class="displayFlexCol">
                <text>证件号：{{item.idCardNo}}</text>
                <view>
                  <text>手机号：{{item.mobile}}</text>
                  <text class="upload_mobile colorCustom" @click.stop="updateMemberMobileClick(item)">更新</text>
                </view>
              </view>
            </view>
            <view class="electronMedical displayFlexCol" @click.stop="clickElectronMedical" v-if="item.memberType == 1">
              <image class="electronMedical_img" :src="iconUrl.memberList_icondzyb"></image>
              <view class="colorCustom">刷医保码</view>
            </view>
            <!-- 判断第0条数据不等于本人，显示点击认证 -->
            <view class="electronMedical displayFlexCol" @click.stop="toAddMember('addMy')" v-if="memberList[0].memberType != 1">
              <image class="electronMedical_img" :src="iconUrl.memberList_iconNo"></image>
              <view class="colorCustom_999">点击本人认证</view>
            </view>
          </view>
          <image :src="iconUrl.icon_memDivision" class="icon_memDivision" mode="widthFix"></image>
          <!-- 等于人本时展示授权与信用管理 -->
          <template v-if="item.memberType == 1">
            <view class="personallyBox">
              <view class="moduleBox displayFlexBetween" @click="forWard('authorizeIndex', item)">
                <view class="bg backgroundCustom_F08"></view>
                <view class="moduleInfo">
                  <view class="moduleInfo_txt">已授权他人使用</view>
                  <view class="colorCustom_F08">授权{{item.authQuantity || 0}}人</view>
                </view>
                <view class="moduleBox_btn backgroundCustom_F08">去管理</view>
              </view> 
              <view class="moduleBox displayFlexBetween" @click="forWard('creditIndex', item)">
                <view class="bg backgroundCustom"></view>
                <view class="moduleInfo">
                  <view class="moduleInfo_txt">信用权益</view>
                  <view class="colorCustom">您的诊疗信用良好，可享受先诊后付费权益</view>
                </view>
                <view class="moduleBox_btn backgroundCustom">去管理</view>
              </view> 
            </view>
            <image :src="iconUrl.icon_memDivision" class="icon_memDivision" mode="widthFix"></image>
          </template>
          <!-- 卡列表未展开 -->
          <view class="bg_white member_card_list displayFlexBetween" v-if="!item.isOpen">
            <view class="operateTxt displayFlexRow">
              <view class="operateTxt_btn boderColorCustom" @click.stop="delMemberInfo(item)" v-if="item.memberType != 1">
                <text class="bg backgroundCustom "></text>
                <text class="text colorCustom">解除绑定</text>
              </view>
              <view class="operateTxt_btn boderColorCustom" @click.stop="setDefaultMemberAndCard($event, item, 'member')" v-if="!item.isOpen && (item.userMemberList && item.userMemberList[0] && item.userMemberList[0].isDefaultMember != 1)">
                <text class="bg backgroundCustom "></text>
                <text class="text colorCustom">设为默认</text>
              </view>
            </view>
            <view class="transform displayFlexRow" @click="openaOrFold(index, 'open')">
              <image class="arrow transform_rotate_90" :src="iconUrl.icon_right"></image>就诊卡管理
            </view>
          </view>
          <!-- 展开的卡列表 -->
          <view class="bg_white member_card_list" v-if="item.isOpen">
            <view class="transform displayFlexRow retractTransform" @click="openaOrFold(index, 'fold')">
              <image class="arrow " :src="iconUrl.icon_right"></image>收起
            </view>
            <template v-if="item.cardNum > 0">
              <view class="member_card_num">
                <text>就诊卡</text>
                <text>{{item.cardNum}}</text>
                <text>张</text>
              </view>
              <view class="card_list_box">
                <template v-for="(childItem, childIndex) in item.Data_1" :key="childIndex">
                  <view class="card_item_box" v-if="childItem.cardType == 1">
                    <view class="card_item_info displayFlexRow">
                      <text>{{childItem.cardTypeName || "就诊卡"}}：{{childItem.cardNo}}</text>
                    </view>
                    <view class="mobile_box displayFlexRow">
                      <text>手机号：</text>
                      <text class="colorCustom" @click="lookMobile(index, childIndex, childItem)">{{childItem.mobile}}</text>
                      <image class="edit_icon" :src="iconUrl.edit" @click="setHisMobileClick(childItem)"/>
                    </view>
                    <view class="card_operation_box displayFlexRow">
                      <view class="auto_card displayFlexRow" @click="setDefaultMemberAndCard($event, item, 'card', childItem)">
                        <image :src="item.userMemberList && item.userMemberList[0] && item.userMemberList[0].isDefaultMember == 1 && childItem.isDefault == 1 ? iconUrl.icon_roundHook : iconUrl.icon_roundHook_n" mode=""/>
                        <text :class="item.userMemberList && item.userMemberList[0] && item.userMemberList[0].isDefaultMember == 1 && childItem.isDefault == 1 ? 'colorCustom' : 'color666'">默认就诊卡</text>
                      </view>
                      <view @click.stop="getCardBalance(index, childIndex, childItem)">
                        <text>余额：</text>
                        <text class="colorCustom">{{childItem.yuan}}</text>
                      </view>
                    </view>
                  </view>
                </template>
              </view>
            </template>
            <template v-if="item.hosNum > 0">
              <view class="member_card_num">
                <text>住院号</text>
                <text>{{item.hosNum}}</text>
                <text>个</text>
              </view>
              <view class="card_list_box">
                 <template v-for="(childItem, childIndex) in item.Data_1" :key="childIndex">
                  <view class="card_item_box" v-if="childItem.cardType == 14">
                    <view class="card_item_info displayFlexBetween">
                      <text>住院号：{{childItem.cardNo}}</text>
                    </view>
                    <view :class="['card_operation_box', 'displayFlexBetween', childItem.inHospitalStatus == 1?'colorCustom':'colorCustom_999']">
                      <text>在院状态：{{childItem.inHospitalStatus == 1 ? '在院' : '离院'}}</text>
                      <view @click.stop="getCardBalance(index, childIndex, childItem)">
                        <text>余额：</text>
                        <text class="colorCustom">{{childItem.yuan}}</text>
                      </view>
                    </view>
                  </view>
                </template>
              </view>
            </template>
            <template v-if="item.healthNum > 0">
              <view class="member_card_num">
                <text>健康卡</text>
                <text>{{item.healthNum}}</text>
                <text>个</text>
              </view>
              <view class="card_list_box">
                <template v-for="(childItem, childIndex) in item.Data_1" :key="childIndex">
                  <view class="card_item_box" v-if="childItem.cardType == 16">
                    <view class="card_item_info displayFlexRow">
                      <text>{{childItem.cardTypeName || "就诊卡"}}：{{childItem.cardNo}}</text>
                    </view>
                    <view class="mobile_box displayFlexRow">
                      <text>手机号：</text>
                      <text class="colorCustom" @click="lookMobile(index, childIndex, childItem)">{{childItem.mobile}}</text>
                      <image class="edit_icon" :src="iconUrl.ic_personalcentre_addressadministration_edit" @click="setHisMobileClick(childItem)"/>
                    </view>
                    <view class="card_operation_box displayFlexRow">
                      <view class="auto_card displayFlexRow" @click="setDefaultMemberAndCard($event, item, 'card', childItem)">
                        <image :src="item.userMemberList && item.userMemberList[0] && item.userMemberList[0].isDefaultMember == 1 && childItem.isDefault == 1 ? iconUrl.icon_roundHook : iconUrl.icon_roundHook_n" mode=""/>
                        <text :class="item.userMemberList && item.userMemberList[0] && item.userMemberList[0].isDefaultMember == 1 && childItem.isDefault == 1 ? 'colorCustom' : 'color666'">默认就诊卡</text>
                      </view>
                      <view @click.stop="getCardBalance(index, childIndex, childItem)">
                        <text>余额：</text>
                        <text class="colorCustom">{{childItem.yuan}}</text>
                      </view>
                    </view>
                  </view>
                </template>
              </view>
            </template>
          </view>
        </view>
        <view class="relativesBox displayFlexLeft" v-if="memberList.length > 0 && memberList[0].memberType == 1">
          <image :src="iconUrl.icon_relatives" class="icon_relatives"></image>
          <view>亲友成员（{{memberList.length-1}}人）</view>
        </view>
      </template>
      
      <view class="public_btn_con bg_white">
        <view class="public_btn backgroundCustom" @click="toAddMember('all')">添加就诊人</view>
      </view>
    </view>
    
    <view class="public_dialog" v-if="codeIsShow">
      <view class="code_inner">
        <image class="code_img_out" :src="iconUrl.icon_whiteClose" @click="codeStateChange"></image>
        <image class="code_img" :src="iconUrl.icon_codeBgTop"></image>
        <view class="code_tit">{{codeInfo.memberName}}-电子就诊码</view>
        <view class="code_con">
          <image :src="codeInfo.imagesApi"></image>
        </view>
      </view>
    </view>

    <view class="public_dialog" v-if="mobileModel">
      <view class="code_inner mobile_content_box">
        <text class="mobile_title_box">请选择手机号码</text>
        <text class="mobile_tips_box">修改手机号码涉及到就诊人的身份信息安全,请确认再修改</text>
        <view :class="['mobile_item_box', 'displayFlexRow', mobileIndex == index ? 'backgroundCustom' : '']" 
         v-for="(item, index) in mobileList" :key="index" @click="choiceMobile(index)">
          <text>{{item}}</text>
        </view>
        <view class="mobile_footer_box displayFlexRow">
          <text class="backgroundCustom_D9" @click="updateMobileModel">取消</text>
          <text class="backgroundCustom" @click="btnUpdateMobile">确定</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { common } from '@/utils';
import icon from '@/utils/icon';
import {
  delMemberInfo_V3,
  setDefaultMemberV3,
  setDefaultClinicCard_V3,
  queryCardBalance_V3,
  updateMemberMobile as updateMemberMobileApi,
  queryBaseMemberList_V3 as queryBaseMemberListApi,
  queryMemberCardList_V3 as queryMemberCardListApi
} from '@/pagesPersonal/service/patientManagement';
import { queryMemberHeaderInfo } from '@/pages/st1/service/base';
import { usePreserMember, queryMemberCardList_V3 } from '@/hook';
import noData from '@/pages/st1/components/noData/noData.vue';

const app = getApp();
const iconUrl = ref(icon);
const memberList = ref<any[]>([]);
const codeIsShow = ref(false);
const codeInfo = ref<any>({});
const showNoData = ref(false);
const noDataValue = ref('暂无就诊人,请添加就诊人');
const mobileModel = ref(false);
const mobileList = ref<string[]>([]);
const mobileIndex = ref(0);
const selectMemberId = ref('');

onLoad(async () => {
  await usePreserMember();
});

onShow(() => {
  main();
});

const main = () => {
  queryBaseMemberList_V3();
};

const queryBaseMemberList_V3 = async () => {
  let resp = await usePreserMember(); 
  if (!resp || resp.length === 0) {
      resp = uni.getStorageSync('memberList') || [];
  }
  
  if (common.isEmpty(resp)) {
    memberList.value = [];
    showNoData.value = true;
    return;
  }

  // Sort logic
  resp = resp.sort(function (a: any, b: any) {
    if (a.memberType !== b.memberType) {
      return a.memberType < b.memberType ? -1 : 1;
    } else {
        let aDefault = a.userMemberList && a.userMemberList[0] ? a.userMemberList[0].isDefaultMember : 0;
        let bDefault = b.userMemberList && b.userMemberList[0] ? b.userMemberList[0].isDefaultMember : 0;
        return a.memberType == 1 ? -1 : bDefault - aDefault;
    }
  });

  const asyncRequests = resp.map(async (item: any) => getQueryMemberHeaderInfo(item));
  await Promise.all(asyncRequests);
  
  memberList.value = resp;
  showNoData.value = common.isEmpty(resp);
};

const getQueryMemberHeaderInfo = async (item: any) => {
  if (item.memberType == 1) {
    let { resData } = await queryMemberHeaderInfo({
      memberId: item.memberId,
      accountSn: item.accountSn
    });
    item.authQuantity = resData.RespCode == 10000 && resData.Data && resData.Data[0] ? resData.Data[0].userCount : 0;
  }
  return item;
};

const delMemberInfo = (item: any) => {
  common.showModal(`尊敬的用户，是否确定解除【${item.memberName}】的 绑定？该操作无法回退！`, async () => {
    let queryData = {
      memberId: item.memberId,
      accountSn: item.accountSn,
    };
    let { resData } = await delMemberInfo_V3(queryData);
    if (resData.RespCode == 10000) {
      if (app.globalData.currentUser && item.memberId == app.globalData.currentUser.memberId) {
        app.globalData.currentUser = "";
      }
      common.showModal(`已成功解绑【${item.memberName}】`, async () => {
        await usePreserMember();
        queryBaseMemberList_V3();
      });
    }
  }, {
    title: '温馨提示',
    cancelText: '取消'
  });
};

const toAddMember = (type: string) => {
  common.goToUrl(`/pagesPersonal/st1/business/patientManagement/selecteBindCardMode/selecteBindCardMode?type=${type}`);
};

const codeStateChange = () => {
  codeIsShow.value = !codeIsShow.value;
};

const clickElectronMedical = () => {
  // #ifdef MP-WEIXIN
  uni.navigateToMiniProgram({
    appId: "wxb032bc789053daf4",
    path: "pages/esscard/scancode-nhsa/main?channel=AAEQHg2Pe4b-JhLqiIyHf2g0&cityCode=350000",
  });
  // #endif
  // #ifndef MP-WEIXIN
  common.showToast('请在微信小程序中使用');
  // #endif
};

const getCardBalance = async (index: number, childIndex: number, childItem: any) => {
    let data = {
      cardType: childItem.cardType,
      cardNo: childItem.cardNo,
      Store: {
        cardEncryptionStore: childItem.encryptionStore || '',
        baseMemberEncryptionStore: memberList.value[index].baseMemberEncryptionStore
      }
    };
    let { resData } = await queryCardBalance_V3(data);
    if (resData.RespCode == 10000 && resData.Data && resData.Data.length > 0) {
      if (resData.Data[0].balance == "") {
        memberList.value[index].Data_1[childIndex].yuan = 0;
      } else {
        memberList.value[index].Data_1[childIndex].yuan = common.centToYuan(resData.Data[0].balance);
      }
    }
};

const setDefaultMemberAndCard = async (e: any, item: any, tag: string, childItem?: any) => {
    let setMemberData = {
      memberId: item.memberId,
    };
    let { resData } = await setDefaultMemberV3(setMemberData);
    if (resData.RespCode == "10000") {
      if (tag == 'card' && childItem) {
        let data = {
          memberId: item.memberId,
          cardNo: childItem.cardNo,
          cardType: childItem.cardType,
          encryptionStore: childItem.encryptionStore,
        };
        await setDefaultClinicCard_V3(data);
      }
      common.showModal("设置成功", async () => {
        await usePreserMember();
        queryBaseMemberList_V3();
      });
    }
};

const openaOrFold = async (index: number, type: string) => {
    let item = memberList.value[index];
    if (type == "open") {
      console.log("open", item);
        if (common.isEmpty(item.Data_1)) {
            item = await getUserCardInfo(item);
        }
        item.isOpen = true;
    }
    if (type == "fold") {
        item.isOpen = false;
    }
    // Force reactivity update if needed, but array element mutation usually picked up if item is object
    memberList.value[index] = { ...item }; 
};

const getUserCardInfo = async (currentUser: any) => {
    let resp = await queryMemberCardList_V3(currentUser.memberId);
    if (!common.isEmpty(resp)) {
        resp.map((item: any) => {
            if (item.cardType == 16 && item.cardNo.length > 9) {
                item.cardNo = item.cardNo.replace(/\*{3,}/g, '***');
            }
            item.yuan = "点击查看";
        });
        currentUser.cardNum = resp.filter((cell: any) => cell.cardType == '1').length;
        currentUser.hosNum = resp.filter((cell: any) => cell.cardType == '14').length;
        currentUser.healthNum = resp.filter((cell: any) => cell.cardType == '16').length;
        currentUser.Data_1 = resp;
    }
    return currentUser;
};

const forWard = (router: string, memberInfo: any) => {
    app.globalData.myInfo = memberInfo;
    uni.setStorageSync('myInfo', memberInfo);
    let url = null;
    if (router == 'creditIndex') {
        url = `/pagesPersonal/st1/business/creditManagement/${router}/${router}`;
    } else if (router == 'authorizeIndex') {
        url = `/pagesPersonal/st1/business/authorizeMangement/${router}/${router}`;
    }
    if (url) common.goToUrl(url);
};

const lookMobile = (index: number, childIndex: number, childItem: any) => {
    if (childItem.mobile) {
        common.showModal(`手机号：${childItem.mobile}`, () => {}, { showCancel: false, confirmText: '知道了' });
    }
};

const updateMemberMobileClick = async (item: any) => {
    let queryMember = {
      accountSn: item.accountSn,
      memberId: item.memberId,
      isCache: "false",
      mobileFormatDesensitization: "false"
    };
    let { resData } = await queryBaseMemberListApi(queryMember);
    console.log("queryBaseMemberListApi", resData);
    if (resData.RespCode == 10000 && resData.Data && resData.Data.length > 0) {
      let realMobile = resData.Data[0].mobile;
      let cardMobiles = await queryMemberCardMobile(item.memberId);
      if (common.isNotEmpty(cardMobiles)) {
          let leafMobiel = cardMobiles.filter((p: string) => p !== realMobile);
          if (common.isNotEmpty(leafMobiel)) {
            mobileList.value = leafMobiel;
            selectMemberId.value = item.memberId;
            mobileIndex.value = 0;
            updateMobileModel();
          } else {
            common.showToast("您的手机号码已是最新的");
          }
      } else {
        common.showToast("您的手机号码已是最新的");
      }
    }
};

const queryMemberCardMobile = async (memberId: string) => {
    let querData = {      
      memberId: memberId,
      cardNoFormatDesensitization: "false",
      mobileFormatDesensitization: "false"
    };
    let { resData } = await queryMemberCardListApi(querData);
    if (resData.RespCode == 10000 && resData.Data) {
      const mobiles = resData.Data.filter((p: any) => p.cardType === 1 && common.isNotEmpty(p.mobile)).map((p: any) => p.mobile);
      const uniquemobiles = Array.from(new Set(mobiles));
      return uniquemobiles;
    }
    return [];
};

const setHisMobileClick = async (childItem: any) => {
    let queryMember = {
      accountSn: childItem.accountSn,
      memberId: childItem.memberId,
      memberNameFormatDesensitization: "false",
      certNumFormatDesensitization: "false"
    };
    let { resData } = await queryBaseMemberListApi(queryMember);
    if (resData.RespCode == 10000 && resData.Data && resData.Data.length > 0 && resData.Data[0].certType == '01') {
      let params = {
        CardNo: childItem.cardNo,
        MemberName: resData.Data[0].memberName,
        MemberId: childItem.memberId,
        IdCardNo: resData.Data[0].certNum
      };
      let url = `/pagesPersonal/st1/business/patientAuth/authFace/authFace?pageType=changeMobile&params=${JSON.stringify(params)}`;
      common.goToUrl(url);
    }
};

const choiceMobile = (index: number) => {
    mobileIndex.value = index;
};

const updateMobileModel = () => {
    mobileModel.value = !mobileModel.value;
};

const btnUpdateMobile = async () => {
    let selectMobiel = mobileList.value[mobileIndex.value];
    let updateParam = {
      "memberId": selectMemberId.value,
      "mobile": selectMobiel
    };     
    let { resData } = await updateMemberMobileApi(updateParam);
    if (resData.RespCode == 10000) {
        updateMobileModel();
        await usePreserMember();
        queryBaseMemberList_V3();
    }
};

</script>

<style lang="scss" scoped>
/* pages2/st1/merge/business/patientManagement/memberList/memberList.wxss */
.content{
  height: 100%;
  overflow: auto;
  padding-bottom: 210upx;
}

.member_item {
  box-sizing: border-box;
  margin: 30upx;
  border-radius: 20upx;
  overflow: hidden;
}
.member_infoBox {
  padding: 30upx 30upx 15upx;
  position: relative;
}

.member_info {
  margin-bottom: 37upx;
  justify-content: space-between;
}


.info_memberMsg .name {
  font-size: 36upx;
  font-weight: bold;
  color: #222326;
  margin-right: 20upx;
}

.info_memberMsg .tip {
  font-size: 28upx;
  color: #62626D;
  margin-right: 20upx;
}

.info_memberMsg .tag{
  position: relative;
  display: inline-block;
  font-size: 22upx;
  padding: 4upx 8upx;
  box-sizing: border-box;
  border-radius: 8upx;
}
.info_memberMsg .tag .bg{
  opacity: .1;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.auto_btn image {
  width: 35upx;
  height: 35upx;
  margin-right: 12upx;
}

.auto_btn text {
  font-size: 28upx;
}

.member_info_num {
  justify-content: space-between;
}

.member_info_num view {
  align-items: flex-start;
}

.member_info_num view text {
  font-size: 28upx;
  color: #222326;
}

.member_info_num view text:nth-child(1) {
  margin-bottom: 20upx;
}

.upload_mobile {
  font-size: 28upx;
  margin-left: 50upx;
  border-radius: 100upx;
}
.member_infoBox .electronMedical{
  position: absolute;
  right: 30upx;
  top: 70upx;
  font-size: 22upx;
}
.electronMedical_img{
  width: 80upx;
  height: 80upx;
  margin: 10upx 0;
}
.personallyBox{
  background-color: #fff;
  padding: 1upx 30upx;
}

.personallyBox .moduleBox{
  height: 120upx;
  position: relative;
  border-radius: 24upx;
  overflow: hidden;
  padding: 0 24upx;
}
.personallyBox .bg{
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: .2;
  left: 0;
  top: 0;
}
.personallyBox .moduleBox{
  font-size: 24upx;
  margin-top: 15upx;
}
.personallyBox .moduleInfo_txt{
  font-size: 28upx;
  font-weight: 600;
  margin-bottom: 8upx;
}
.personallyBox .moduleBox_btn{
  padding: 12upx 18upx;
  border-radius: 20upx;
}
.transform{
  font-size: 26upx;
  color: #898999;
}
.transform image {
  transform: rotate(270deg);
  margin-right: 10upx ;
}

.transform_rotate_90 {
  transform: rotate(90deg) !important;
}
.retractTransform{
  position: absolute;
  top: 0;
  right: 30upx;
}
.relativesBox{
  margin: 30upx;
  font-size: 30upx;
  font-weight: 600;
}
.relativesBox .icon_relatives{
  width: 42upx;
  height: 39upx;
  margin-right: 18upx;
}
/* 下半部分 */
.operateTxt .operateTxt_btn{
  padding: 10upx 17upx;
  font-size: 26upx;
  position: relative;
  border-radius: 5upx;
  border: 1upx solid #fff;
  overflow: hidden;
  margin-right: 10upx;
}
.operateTxt_btn .bg{
  opacity: 0.15;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: block;
}
.member_card_list {
  position: relative;
  padding:0 30upx 30upx;
}
.icon_memDivision{
  width: 100%;
  height: 50upx;

}
.member_card_num text {
  font-size: 28upx;
  color: #8A8A99;
}

.member_card_num text:nth-child(2) {
  color: #222326;
  padding: 0 10upx;
}

.card_list_box {
  padding: 0upx 30upx;
  box-sizing: border-box;
  margin: 30upx 0;
  background: #F8F8FA;
  border-radius: 10upx;
}
.member_card_list .card_list_box:last-child{
  margin-bottom: 0;
}
.card_item_box {
  padding: 38upx 0;
  box-sizing: border-box;
  border-bottom: 1px dotted #E6E6E6;
}

.card_item_box:last-child {
  border-bottom: none;
}

.card_item_info {
  justify-content: space-between;
}

.card_item_info text {
  font-size: 32upx;
  font-weight: bold;
  color: #222326;
}

.card_item_info image {
  width: 26upx;
  height: 26upx;
}

.mobile_box {
  margin-top: 24upx;
  justify-content: flex-start;
  position: relative;
}

.mobile_box text {
  font-size: 32upx;
  font-weight: bold;
  color: #222326;
}

.edit_icon {
  width: 35upx;
  height: 35upx;
  position: absolute;
  right: 0;
}

.card_operation_box {
  margin-top: 30upx;
  justify-content: space-between;
}

.card_operation_box text {
  font-size: 28upx;
  color: #8A8A99;
}

.card_operation_box view:nth-child(2) text {
  color: #222326;
}

.auto_card image {
  width: 30upx;
  height: 30upx;
  margin-right: 12upx;
}
/* 二维码 */
.public_dialog {
  background-color: rgba(1, 1, 1, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.code_inner {
  width: 600upx;
  border-radius: 24upx;
  position: relative;
  background-color: #fff;
  padding-bottom: 50upx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.code_img_out {
  width: 24upx;
  height: 24upx;
  position: absolute;
  right: 30upx;
  top: 30upx;
  z-index: 1;
}

.code_img {
  width: 100%;
  height: 200upx;
  position: absolute;
  top: 0;
  left: 0;
}

.code_tit {
  font-size: 40upx;
	font-weight: 500;
	height: 200upx;
	line-height: 210upx;
  position: relative;
  color: #fff;
}

.code_card {
  font-size: 28upx;
  font-family: Arial;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  margin: 23upx 0 107upx;
  position: relative;
}

.code_subtit {
  font-size: 28upx;
}

.code_con {
  margin: 37upx 0 30upx;
  width: 340upx;
  height: 340upx;
}

.code_tip {
  font-size: 26upx;
	color: #58AB56;
}

.qr_code {
  box-sizing: content-box;
  width: 340upx;
  height: 340upx;
  padding: 10upx 0;
}


/* 更新手机号弹窗 */
.mobile_content_box {
  width: 76%;
  padding: 30upx;
  box-sizing: border-box;
  background: white;
  border-radius: 20upx;
}

.mobile_title_box {
  font-size: 34upx;
  font-weight: bold;
  margin-bottom: 30upx;
}

.mobile_tips_box {
  font-size: 30upx;
  color: #666;
  margin-bottom: 60upx;
}

.mobile_item_box  {
  width: 100%;
  margin-bottom: 30upx;
  padding: 20upx;
  box-sizing: border-box;
  background: #f9f9f9;
  border-radius: 10upx;
  justify-content: flex-start;
}

.mobile_item_box image {
  width: 40upx;
  height: 40upx;
  margin-right: 30upx;
}

.mobile_item_box text {
  font-size: 30upx;
  font-weight: bold;
}

.mobile_footer_box {
  width: 100%;
  margin-top: 40upx;
  justify-content: space-between;
}

.mobile_footer_box text {
  width: 49%;
  line-height: 78upx;
  text-align: center;
  border-radius: 100upx;
}
</style>