路泰科技体检小程序UI设计新版本
1
wwl
5 天以前 a6cdbcfe28fcc40ebb4919f57d60fb20122e8e57
pagesB/mine/xuanzeyuanqv/xuanzeyuanqv.vue
@@ -1,169 +1,170 @@
<template>
   <view class="box">
      <view class="box1" v-for="(item, index) in yyList" @click="gokeshi(item)">
         <img src="../../img/pic1.png" alt="" class="bgimg">
         <view class="yuan">{{item.hospAreaName}}</view>
         <view class="box2">
            <div class="address">
               <div class="img"></div>
               <div class="txt">{{item.areaName}}</div>
            </div>
            <div class="address">
               <div class="phone"></div>
               <div class="txt">{{item.phone}}</div>
            </div>
         </view>
      </view>
   </view>
   <!--       <view class="box1" @click="gokeshi(yyList[1])">
         <img src="../../img/pic2.png" alt="" class="bgimg">
         <view class="yuan">{{yyList[1].hospAreaName}}</view>
         <view class="box2">
            <div class="address">
               <div class="img"></div>
               <div class="txt">{{yyList[1].areaName}}</div>
            </div>
            <div class="address">
               <div class="phone"></div>
               <div class="txt">{{yyList[1].phone}}</div>
            </div>
         </view>
      </view> -->
   </view>
   </view>
  <view class="box">
    <view class="box1" v-for="(item, index) in yyList" :key="index" @click="gokeshi(item)">
      <img src="../../img/pic1.png" alt="" class="bgimg">
      <view class="yuan">{{item.hospAreaName}}</view>
      <view class="box2">
        <div class="address">
          <div class="img"></div>
          <div class="txt">{{item.areaName}}</div>
        </div>
        <div class="address">
          <div class="phone"></div>
          <div class="txt">{{item.phone || "暂无"}}</div>
        </div>
      </view>
    </view>
  </view>
</template>
<script>
   import {
      list
   } from "@/api/system/people.js";
   export default {
      data() {
         return {
            yyList: [],
            canshu: '',
         }
      },
      onLoad(options) {
         this.getList();
         if(options.id){
            this.canshu = options.canshu+"?"+"id="+options.id
         }else{
            this.canshu = options.canshu
         }
      },
      methods: {
         getList() {
            list().then(res => {
               this.yyList = res.data;
            })
         },
import { list } from "@/api/system/people.js";
         gokeshi(item) {
            uni.setStorageSync('hospId', item.code);
               uni.navigateTo({
                  url: `${this.canshu}`
                  // url: `/pages/${this.canshu}/${this.canshu}`
               });
         }
      }
   }
export default {
  data() {
    return {
      yyList: [],
      canshu: ''
    };
  },
  onLoad(options) {
    this.getList();
    if (options.id) {
      this.canshu = options.canshu + "?id=" + options.id;
    } else {
      this.canshu = options.canshu || '/pagesA/hospIntroduce/hospIntroduce';
    }
  },
  methods: {
    getList() {
      list().then(res => {
        this.yyList = res.data;
      });
    },
    // 检测是否为 Base64 编码
    isBase64(str) {
      if (!str || typeof str !== 'string') return false;
      const base64Regex = /^[A-Za-z0-9+/=]+$/;
      if (!base64Regex.test(str) || str.length % 4 !== 0) return false;
      try {
        return btoa(atob(str)) === str;
      } catch (e) {
        return false;
      }
    },
    // 解码 Base64,处理 Unicode 字符
    decodeBase64(str) {
      try {
        str = str.replace(/-/g, '+').replace(/_/g, '/');
        const decoded = atob(str);
        return decodeURIComponent(escape(decoded));
      } catch (e) {
        console.error("Base64 解码失败:", e);
        return null;
      }
    },
    gokeshi(item) {
      uni.setStorageSync('hospId', item.code);
      // 仅当目标页面是 hospIntroduce 时处理 introduction
      if (this.canshu.includes('hospIntroduce')) {
        let introduction = item.introduction;
        if (this.isBase64(introduction)) {
          const decoded = this.decodeBase64(introduction);
          introduction = decoded || '<p>无法解码医院简介,请检查数据</p>';
        }
        uni.setStorageSync('introduction', introduction);
      }
      uni.navigateTo({
        url: `${this.canshu}`
      });
    }
  }
};
</script>
<style scoped lang="scss">
   .box {
      padding: 20rpx
   }
.box {
  padding: 20rpx;
}
   .input {
      margin-bottom: 20rpx;
   }
.box1 {
  width: 702rpx;
  height: 348rpx;
  background: linear-gradient(180deg, rgba(65, 159, 253, 0.9) 0%, rgba(33, 80, 127, 0.38) 100%);
  border-radius: 12rpx;
  padding-top: 65rpx;
  margin-bottom: 32rpx;
  position: relative;
   .box1 {
      width: 702rpx;
      height: 348rpx;
      background: linear-gradient(180deg, rgba(65, 159, 253, 0.9) 0%, rgba(33, 80, 127, 0.38) 100%);
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      padding-top: 65rpx;
      margin-bottom: 32rpx;
      position: relative;
  .yuan {
    height: 44rpx;
    font-weight: bold;
    font-size: 44rpx;
    color: #FFFFFF;
    line-height: 62rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
      .yuan {
         height: 44rpx;
         font-weight: bold;
         font-size: 44rpx;
         color: #FFFFFF;
         line-height: 62rpx;
         text-align: center;
         font-style: normal;
         text-transform: none;
      }
  .bgimg {
    width: 702rpx;
    height: 348rpx;
    position: absolute;
    z-index: -1;
    margin-top: -65rpx;
  }
      .bgimg {
         width: 702rpx;
         height: 348rpx;
         position: absolute;
         z-index: -1;
         margin-top: -65rpx;
      }
  .box2 {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 27rpx;
      .box2 {
         display: flex;
         flex-direction: column;
         position: absolute;
         bottom: 27rpx;
    .address {
      display: flex;
      padding: 0 100rpx 0 35rpx;
         .address {
            display: flex;
            padding: 0 100rpx 0 35rpx;
      .img {
        width: 32rpx;
        height: 32rpx;
        background-image: url("../../img/address.png");
        background-size: 100% 100%;
        background-position: center center;
        background-repeat: no-repeat;
        flex: 0 0 auto;
        margin-top: 4rpx;
        margin-right: 12rpx;
        color: white;
      }
            .img {
               width: 32rpx;
               height: 32rpx;
               background-image: url("../../img/address.png");
               background-size: 100% 100%;
               background-position: center center;
               background-repeat: no-repeat;
               flex: 0 0 auto;
               margin-top: 4rpx;
               margin-right: 12rpx;
               color: white;
            }
      .phone {
        width: 32rpx;
        height: 32rpx;
        background-size: 100% 100%;
        background-position: center center;
        background-repeat: no-repeat;
        flex: 0 0 auto;
        margin-top: 4rpx;
        margin-right: 12rpx;
        background-image: url("../../img/phone.png");
      }
            .phone {
               width: 32rpx;
               height: 32rpx;
               background-size: 100% 100%;
               background-position: center center;
               background-repeat: no-repeat;
               flex: 0 0 auto;
               margin-top: 4rpx;
               margin-right: 12rpx;
               background-image: url("../../img/phone.png");
            }
            .txt {
               font-family: Source Han Sans CN, Source Han Sans CN;
               font-size: 28rpx;
               color: #FFFFFF;
               line-height: 44rpx;
               text-align: left;
               font-style: normal;
               text-transform: none;
               display: -webkit-box;
               -webkit-box-orient: vertical;
               -webkit-line-clamp: 2;
               overflow: hidden;
               text-overflow: ellipsis;
            }
         }
      }
   }
      .txt {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-size: 28rpx;
        color: #FFFFFF;
        line-height: 44rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>