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

<template>
	<!--pages2/st1/merge/business/patientManagement/selecteBindCardMode/selecteBindCardMode.wxml-->
	<view class="container">
	  <view class="content">
	    <view class="content_inner" v-if="menuList[0] && menuList[0].IsShow == 1">
	      <text class="menu_tips">微信本人推荐方式</text>
        <template v-for="(item, index) in menuList[0].Children" :key="index">
          <view class="inner_menulist displayFlexRow" v-if="item.IsShow==1" @click="goto(item)">
            <image class="img" :src="item.Icon"></image>
            <view class="menulis_box">
              <view class="menulis_box_title">{{item.MenuName}}</view>
              <view class="menulis_box_tip">{{item.MenuSubName}}</view>
            </view>
            <image class="public_right_img" :src="iconUrl.icon_right"></image>
            <view class="recommend_img" v-if="index == 0">
              <text>推荐</text>
              <image :src="iconUrl.icon_add_tj"></image>
            </view>
          </view>
        </template>
	    </view>
	    <view class="menu_listBox" v-if="type != 'addMy' && menuList[1]">
        <template v-for="(item, index) in menuList[1].Children" :key="index">
          <view class="inner_menulist displayFlexLeft" v-if="item.IsShow==1" @click="goto(item)">
            <image class="img" :src="item.Icon"></image>
            <view class="menulis_box">
              <view class="menulis_box_title">{{item.MenuName}}</view>
              <view class="menulis_box_tip">{{item.MenuSubName}}</view>
            </view>
            <image class="public_right_img" :src="iconUrl.icon_right"></image>
          </view>
        </template>
	    </view>
	    <view class="public_tip">
	      <view class="public_tip_box displayFlexRow">
	        <image class="tips_icon" :src="iconUrl.spot_left"  />
	        <text class="colorCustom">温馨提示</text>
	        <image class="tips_icon" :src="iconUrl.spot_right"  />
	      </view>
	      <view class="public_tip_text">1、微信账号本人：请选择“医保屏”，绑定医保电子凭证；</view>
	      <view class="public_tip_text">2、手动录入：适用于婴幼儿、港澳台同胞、外籍人士，或帮亲友代办的情况。</view>
	      <view class="public_tip_text">3、“卡号添加”，适用于已有就诊卡、住院号的用户；</view>
	      <view class="public_tip_text">4、“电子健康卡”，适用于已授权电子健康卡用户；</view>
	      <!-- <view class="public_tip_text">2、“卡号添加”，适用于已有就诊卡、住院号的用户；</view>
	      <view class="public_tip_text">2、“卡号添加”，适用于已有就诊卡、住院号的用户；</view> -->
	    </view>
	  </view>
	</view>
</template>

<script lang="ts" setup>
import { getYlzMemberOuthUrl } from '@/pagesPersonal/service/patientManagement';
import { common } from '@/utils';
import icon from '@/utils/icon';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';

const app = getApp();
const iconUrl = ref(icon);
const menuList = ref<any[]>([]);
const type = ref("");

onShow(() => {
    let list = uni.getStorageSync('menuList').filter((item: any) => item.MenuName == 'AddMember');
    menuList.value = list[0] ? list[0].Children : [];
});

onLoad((options: any) => {
    type.value = options.type || '';
});

const goto = async (item: any) => {
    if(item.AppId) {
        // #ifdef MP-WEIXIN
        uni.navigateToMiniProgram({
            appId: item.AppId,
            path: item.Url
        });
        // #endif
        // #ifndef MP-WEIXIN
        common.showToast('请在微信小程序中使用');
        // #endif
    } else if(item.MenuName.indexOf("医保") != -1){
        let { resData } = await getYlzMemberOuthUrl({
            hosId: app.globalData.districtId || app.globalData.hosId
        });
        if(resData.RespCode == 10000 && common.isNotEmpty(resData.Data)){
             let data = resData.Data;
             // @ts-ignore
             // #ifdef MP-WEIXIN
             uni.navigateToMiniProgram({
                appId: data[0].AppId,
                path: data[0].Path,
                envVersion: data[0].EnvVersion && 'trial',
             });
             // #endif
             // #ifndef MP-WEIXIN
             common.showToast('请在微信小程序中使用');
             // #endif
        }
    } else {
        common.goToUrl(item.Url, { skipWay: "redirectTo" });
    }
};
</script>

<style lang="scss" scoped>
	/* pages2/st1/merge/business/patientManagement/selecteBindCardMode/selecteBindCardMode.wxss */
	
	.container {
	  padding: 30upx;
	}
	
	.content_inner {
	  padding: 30upx;
	  box-sizing: border-box;
	  background: white;
	  border-radius: 20upx;
	  margin-bottom: 30upx;
	}
	.content_inner .menu_tips {
	  font-size: 32upx;
	  font-weight: 550;
	  color: #62626D;
	}
	
	.content_inner .inner_menulist {
	  margin: 30upx 0 0;
	  background: #FFFFFF;
	  border-radius: 10upx;
	  padding: 44upx 30upx;
	  box-shadow: 0px 0px 58px 0px rgba(0,0,0,0.05);
	  justify-content: flex-start;
	  align-items: flex-start;
	  position: relative;
	}
	
	.content_inner .inner_menulist .img {
	  width: 86upx;
	  height: 86upx;
	  margin-top: 8upx;
	  margin-right: 30upx;
	  box-shadow: 1upx 1upx 10upx -1upx black;
	  border-radius: 50%;
	}
	
	.content_inner .menulis_box {
	  width: 70%;
	}
	
	.content_inner .menulis_box_title {
	  font-size: 34upx;
	  font-weight: bold;
	  color: #222326;
	  margin-bottom: 20upx;
	}
	
	.content_inner .menulis_box_tip {
	  font-size: 28upx;
	  color: #62626D;
	}
	
	.content_inner .public_right_img {
	  width: 14upx;
	  height: 24upx;
	  right: 30upx;
      position: absolute; /* Added position absolute to align right like original css implying 'right: 30upx' works with relative parent */
      top: 50%;
      transform: translateY(-50%);
	}
	
	.content_inner .recommend_img {
	  width: 70upx;
	  height: 34upx;
	  position: absolute;
	  top: 0;
	  right: 0;
	}
	
	.content_inner .recommend_img image {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  top: 0;
	  right: 0;
	}
	
	.content_inner .recommend_img text {
	  display: inline-block;
	  width: 70upx;
	  line-height: 34upx;
	  text-align: center;
	  font-size: 22upx;
	  color: white;
	  position: absolute;
	  top: 0;
	  right: 0;
	  z-index: 3;
	}
	
	
	
	
	.inner_menulist {
	  margin-bottom: 30upx;
	  padding: 40upx 30upx;
	  background: #FFFFFF;
	  border-radius: 24upx;
	  position: relative;
	}
	
	.inner_menulist .img {
	  width: 98upx;
	  height: 98upx;
	  margin-right: 22upx;
	}
	.menulis_box{
	  width: 70%;
	}
	.menulis_box_title {
	  font-size: 32upx;
	  font-weight: bold;
	  color: #222326;
	  margin-bottom: 18upx;
	}
	
	.menulis_box_tip {
	  font-size: 26upx;
	  color: #8A8A99;
	  line-height: 40upx;
	}
	
	.public_right_img {
	  width: 14upx;
	  height: 24upx;
	  right: 30upx;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
	}
	
	.public_tip {
	  border-radius: 24upx;
	  background: white;
	  padding: 30upx; /* Added padding to match original appearance possibly */
	}
	
	.public_tip .tips_icon {
	  width: 75upx;
	  height: 23upx;
	}
	
	.public_tip_box {
	  margin-bottom: 48upx;
      justify-content: center;
      align-items: center;
	}
	
	.public_tip_box text {
	  font-size: 32upx;
	  font-weight: bold;
	  padding: 0 24upx;
	  box-sizing: border-box;
	  color: #222326;
	}
	
	.public_tip_text {
	  font-size: 28upx;
	  color: #62626D;
	  padding-bottom: 28upx;
	  line-height: 44upx;
	}
	
	.public_tip_text:last-child {
	  padding-bottom: 0;
	}
</style>