修复了部分bug，优化了首页和商品列表、商品详情、购物车的UI

pages/home/home.vue

@@ -1,14 +1,14 @@
 <template>
   <view class="content safe-area-inset-bottom">
-    <!-- ================= 头部区域 ================= -->
+    <!-- 头部区域：保留原有的蓝色渐变风格 -->
     <view class="head">
-      <!-- 门店名称：支持点击切换 -->
+      <!-- 门店信息：点击可切换门店 -->
       <view class="store" @click="toStore">
         {{infoList.store['name'] || storeinfo[0].store['name'] || info.name || ''}}
         <text class="iconfont icon-qiehuan"></text>
       </view>
 
-      <!-- 地理位置信息 -->
+      <!-- 定位信息 -->
       <view class="area">
         <view class="place">
           <text class="iconfont icon-dizhi"></text>
@@ -17,17 +17,15 @@
       </view>
     </view>
 
-    <!-- ================= 轮播图区域 ================= -->
+    <!-- 轮播图区域 -->
     <view class="section">
-      <!-- u-swiper: 轮播组件，border-radius 设置圆角 -->
+      <!-- 使用 u-swiper 组件，设置圆角增加柔和感 -->
       <u-swiper :list="list" :img-mode="aspectFill" :height="300" :interval="4000" @click="toBanner" border-radius="12"></u-swiper>
     </view>
 
-    <!-- ================= 导航栏区域 ================= -->
+    <!-- 导航栏区域：诊所模式 (显示挂号和购药) -->
-
+    <!-- 优化点：使用第一版的"左文右图+副标题"布局，但背景保留原有的bg图片 -->
-    <!-- 场景1：诊所模式 (显示挂号 + 购药) -->
     <view class="nav" v-if="storeType === '0'">
-      <!-- 到店挂号卡片：左文右图布局 -->
       <view class="nav_service bg-clinic" @click="goYard(1)">
         <view class="nav_content">
           <view class="nav_title">到店挂号</view>
@@ -38,7 +36,6 @@
         </view>
       </view>
 
-      <!-- 预约购药卡片 -->
       <view class="nav_service bg-pharmacy" @click="golist(3)">
         <view class="nav_content">
           <view class="nav_title">预约购药</view>
@@ -50,7 +47,8 @@
       </view>
     </view>
 
-    <!-- 场景2：药店模式 (仅显示购药) -->
+    <!-- 导航栏区域：药店模式 (仅显示预约购药，且宽度铺满) -->
+    <!-- 优化点：单个卡片铺满，内容更丰富，避免显得单薄 -->
     <view class="nav" v-if="storeType === '1'">
       <view class="nav_service bg-pharmacy" @click="golist(3)" style="width: 100%;">
         <view class="nav_content">
@@ -63,10 +61,7 @@
       </view>
     </view>
 
-
+    <!-- 诊所模式：医生列表标题 -->
-    <!-- ================= 医生列表区域 (仅诊所模式显示) ================= -->
-
-    <!-- 标题栏 -->
     <view v-if="storeType === '0'" class="doctor_list" @click="goYard(1)">
       医生列表
       <view class="info">
@@ -74,75 +69,42 @@
       </view>
     </view>
 
-    <!-- 医生卡片列表：UI重点优化部分 -->
+    <!-- 诊所模式：医生列表卡片 (保持原有逻辑) -->
-    <view
+    <view v-if="storeType === '0'" class="doctor-card" @click="goLookDoctor(item.id)" v-for="(item,index) in doctorList" :key="item.id">
-        v-if="storeType === '0'"
+      <view class="card-content">
-        class="doctor-card-optimized"
+        <image :src="item.avatar || '/static/mine/avatar_1.png'" mode="aspectFill" class="doctor-avatar"></image>
-        @click="goLookDoctor(item.id)"
+        <view class="doctor-info">
-        v-for="(item,index) in doctorList"
+          <view class="name-section">
-        :key="item.id"
+            <text class="doctor-name">{{item.name}}</text>
-    >
+            <view class="title-badge">{{item.title}}</view>
-      <view class="card-inner">
-        <!-- 顶部：头像与主要信息 -->
-        <view class="card-top">
-          <!-- 头像容器 -->
-          <view class="avatar-box">
-            <image :src="item.avatar || '/static/mine/avatar_1.png'" mode="aspectFill" class="avatar-img"></image>
           </view>
-
+          <view class="department-section">
-          <!-- 信息容器 -->
+            <text class="iconfont icon-location"></text>
-          <view class="info-box">
+            <text class="department">{{item.depart}} | {{item.store}}</text>
-            <!-- 第一行：姓名与职称 -->
-            <view class="name-row">
-              <text class="name-txt">{{item.name}}</text>
-              <view class="title-tag">{{item.title}}</view>
-            </view>
-
-            <!-- 第二行：科室与门店 -->
-            <view class="dept-row">
-              <text class="dept-txt">{{item.depart}}</text>
-              <view class="divider" v-if="item.store">|</view>
-              <text class="store-txt">{{item.store}}</text>
-            </view>
-
-            <!-- 第三行：擅长领域 (限制行数) -->
-            <view class="skill-row">
-              <text class="label">擅长：</text>
-              <text class="content">{{item.good_at}}</text>
-            </view>
           </view>
-        </view>
+          <view class="expertise">
-
+            <text class="expertise-label">擅长：</text>
-        <!-- 分割线 -->
+            <text class="expertise-content">{{item.good_at}}</text>
-        <view class="card-line"></view>
-
-        <!-- 底部：数据与按钮 -->
-        <view class="card-bottom">
-          <!-- 数据展示区 -->
-          <view class="data-area">
-            <view class="data-item">
-              <text class="num">{{item.inquiry_num}}</text>
-              <text class="lbl">问诊量</text>
-            </view>
-            <view class="data-item">
-              <text class="num">{{item.accept_percent}}</text>
-              <text class="lbl">好评率</text>
-            </view>
           </view>
-
+          <view class="stats">
-          <!-- 咨询按钮 (修复：增加图标，优化样式) -->
+            <view class="stat-item">
-          <view class="action-btn">
+              <text class="stat-value">{{item.inquiry_num}}</text>
-            <text class="iconfont icon-consult"></text>
+              <text class="stat-label">问诊量</text>
-            <text>立即咨询</text>
+            </view>
+            <view class="stat-item">
+              <text class="stat-value">{{item.accept_percent}}</text>
+              <text class="stat-label">接诊率</text>
+            </view>
+            <view class="consult-btn">
+              <text class="iconfont icon-consult"></text>
+              咨询
+            </view>
           </view>
         </view>
       </view>
     </view>
 
-
+    <!-- 药店模式：热销药品标题 -->
-    <!-- ================= 热门药品区域 (仅药店模式显示) ================= -->
-
-    <!-- 标题栏 -->
     <view v-if="storeType === '1'" class="doctor_list" @click="golist(3)">
       热销药品
       <view class="info">
@@ -150,26 +112,38 @@
       </view>
     </view>
 
-    <!-- 药品列表容器 -->
+    <!-- 药店模式：药品列表容器 -->
     <view v-if="storeType === '1'" class="product-list-container">
+      <!-- 药品卡片：优化后的单卡片UI布局 -->
       <view class="product-card-simple" @click="goProductDetail(item)" v-for="(item,index) in productList" :key="item.drug.id">
+        <!-- 左侧：药品封面图 -->
         <image :src="item.drug.image || '/static/mine/avatar_1.png'" mode="aspectFill" class="product-img"></image>
+
+        <!-- 右侧：药品详情信息 -->
         <view class="product-info-simple">
+          <!-- 上部分：名称与规格 -->
           <view class="product-main">
             <view class="product-name-row">
+              <!-- 药名：加粗显示，超出部分省略 -->
               <text class="product-name">{{item.drug.drug_name}}</text>
+              <!-- OTC标签：根据属性动态显示颜色 -->
               <text class="otc-tag" :class="item.drug.is_otc ? 'otc-green' : 'otc-red'">{{item.drug.is_otc ? 'OTC' : 'Rx'}}</text>
             </view>
+            <!-- 规格：灰色小字 -->
             <text class="product-spec">{{item.drug.specification}}</text>
+            <!-- 分类标签：如果有分类则显示 -->
             <view class="product-tags" v-if="item.drug.category">
               <text class="tag">{{item.drug.category}}</text>
             </view>
           </view>
+
+          <!-- 下部分：价格与购买按钮 -->
           <view class="product-bottom">
             <view class="price-box">
               <text class="currency">¥</text>
               <text class="price">{{item.price}}</text>
             </view>
+            <!-- 购买按钮：阻止冒泡，避免误触详情页跳转 -->
             <view class="buy-btn" @click.stop="buyProduct(item)">
               购买
             </view>
@@ -178,10 +152,11 @@
       </view>
     </view>
 
-    <!-- 全局组件：遮罩与提示 -->
+    <!-- 全局遮罩层 -->
     <view class="bg-" v-if="bgShow" @click="bgShow=false">
       <image src="/static/home/bg.png" mode=""></image>
     </view>
+    <!-- 全局消息提示 -->
     <u-toast ref="uToast" />
   </view>
 </template>
@@ -204,7 +179,7 @@ export default {
       storeType: 0,
       storeinfo: [],
       doctorList: [],
-      productList: [],
+      productList: [], // 存储药品列表数据
       show: true,
       showed: false,
       shopList: {},
@@ -230,6 +205,15 @@ export default {
       this.getList();
     }
   },
+  created() {
+    const token = uni.getStorageSync('token')
+    const userInfo = uni.getStorageSync('userinfo')
+    if (!token || !userInfo) {
+      uni.navigateTo({
+        url: '/pages/home/index'
+      })
+    }
+  },
   onReady() {
     if (uni.getStorageSync('store_id')) {
       this.getStore();
@@ -237,7 +221,8 @@ export default {
       this.goNewlist()
     }
     uni.setNavigationBarTitle({
-      title: this.headerTitle
+      title: this.headerTitle,
+      success() {}
     });
     uni.setNavigationBarColor({
       frontColor: '#000000',
@@ -259,7 +244,69 @@ export default {
         url: '/pages/Inquiries/Inquiries?type=' + type
       })
     },
-    // 获取门店信息
+    getH5() {
+      getToken({
+        method: "post",
+        data: {
+          user_id: uni.getStorageSync('user_id'),
+          avatarurl: uni.getStorageSync('userinfo')['avatarurl'],
+          mobile: uni.getStorageSync('userinfo')['mobile'],
+          nickname: uni.getStorageSync('userinfo')['nickname'],
+          openid: uni.getStorageSync('userinfo')['openid'],
+          session_key: uni.getStorageSync('userinfo')['session_key'],
+          store_id: uni.getStorageSync('store_id') || '11001',
+        },
+      }).then((res) => {
+        if (res.data.errcode == 0) {
+          uni.setStorageSync('token_platform_id', res.data.data.token)
+        } else {
+          this.$refs.uToast.show({
+            title: res.data.msg,
+            type: 'default',
+            icon: false
+          })
+        }
+      })
+    },
+    tosearch() {
+      uni.navigateTo({
+        url: '/subPackages/shop/search-home'
+      })
+    },
+    toStore() {
+      uni.navigateTo({
+        url: '/subPackages/my/mystore'
+      })
+    },
+    goLookDoctor(id, sts_id) {
+      if (!sts_id) {
+        let sts_id = uni.getStorageSync('store_id')
+      }
+      setTimeout(() => {
+        uni.requestSubscribeMessage({
+          tmplIds: ['JdSs08cMSiL17xwwHZ8fZ5UBUqeY0eKAuvyW7n4Fl20',
+            'OERMugiahk-aKRVH9GHmdJCRBE3yldzEKTzbMCJhY6U',
+            'p-Ix0uIuwPKxm-_yKDlI8mkI-niUgPtaMUZyAaa5vvA'
+          ],
+          complete: (res) => {
+            uni.navigateTo({
+              url: '/subPackages/doctor/doctor-detail?store_id=' + sts_id + '&id=' + id
+            })
+          }
+        })
+      }, 200)
+    },
+    toSee() {
+      uni.scanCode({
+        success: function(res) {
+          uni.showToast({
+            title: '扫码成功',
+            duration: 2000,
+            icon: "success"
+          });
+        },
+      });
+    },
     getStore() {
       if (uni.getStorageSync('store_id')) {
         this.show = false
@@ -274,8 +321,13 @@ export default {
             this.infoList = res.data.data
             this.headerTitle = res.data.data.store['name']
             uni.setNavigationBarTitle({
-              title: this.headerTitle
+              title: this.headerTitle,
+              success() {},
+              fail() { this.getStore() }
             });
+            uni.setNavigationBarColor({
+              frontColor: '#000000',
+            })
             this.getBannered();
           }
         })
@@ -301,14 +353,28 @@ export default {
             uni.setStorageSync('store_id', this.storeinfo[0].store.id)
             this.headerTitle = this.storeinfo[0].store['name']
             uni.setNavigationBarTitle({
-              title: this.headerTitle
+              title: this.headerTitle,
+              success() {}
             });
+            uni.setNavigationBarColor({
+              frontColor: '#000000',
+            })
             this.getBannered();
           }
+        } else {
+          if (this.isShow_envVersion) {
+            uni.navigateTo({ url: '/pages/home/index' })
+          } else {
+            uni.navigateTo({ url: '/pages/home/index' })
+          }
         }
       })
     },
-    // 获取医生列表
+    goList(id) {
+      uni.navigateTo({
+        url: '/pages/home/index-list?type=' + 1 + '&id?=' + id
+      })
+    },
     getList() {
       this.doctorList = [];
       doctorList({
@@ -333,7 +399,6 @@ export default {
         }
       })
     },
-    // 获取Banner
     getBannered() {
       getBanner({
         method: "post",
@@ -355,11 +420,13 @@ export default {
       if (!this.urlInfo[e].external_link) return
       if (this.urlInfo[e].link_type == 1 && this.isShow_envVersion == false) {
         uni.navigateTo({
-          url: this.urlInfo[e].external_link
+          url: this.urlInfo[e].external_link,
+          success() {}
         })
       } else {
         uni.navigateTo({
-          url: '/pages/home/home-banner?id=' + this.urlInfo[e].external_link
+          url: '/pages/home/home-banner?id=' + this.urlInfo[e].external_link,
+          success() {}
         })
       }
     },
@@ -368,33 +435,36 @@ export default {
       getStoreDrugListBySalespersonApi({
         store_id: uni.getStorageSync('store_id') || '11001',
         page: 1,
-        limit: 3 // 只展示3个商品
+        limit: 3 // 【优化点】首页只展示3个热门商品，保持版面简洁
       }).then((res) => {
         if (res.data.code == 0) {
           this.productList = res.data.result.records;
         }
       })
     },
+    // 跳转药品详情
     goProductDetail(item) {
       uni.navigateTo({
         url: `/subPackages/product/symptoms?id=${item.drug.id}&drug_name=${item.drug.drug_name}&is_otc=${item.drug.is_otc}&image=${item.drug.image}&price=${item.price}`
       });
     },
+    // 直接购买
     buyProduct(item) {
       uni.navigateTo({
         url: `/subPackages/product/product?doctor_id=39&register_type=3`
       });
-    },
+    }
-    goLookDoctor(id, sts_id) {
+  },
-      let currentStsId = sts_id || uni.getStorageSync('store_id');
+  mounted() {
-      uni.navigateTo({
+    const token = uni.getStorageSync('token')
-        url: '/subPackages/doctor/doctor-detail?store_id=' + currentStsId + '&id=' + id
+    const id = uni.getStorageSync('store_id')
-      })
+    const d_id = uni.getStorageSync('doctors_id')
-    },
+    const d_store = uni.getStorageSync('st_id')
-    toStore() {
+    if (token && id) {
-      uni.navigateTo({
+      this.toChang(id)
-        url: '/subPackages/my/mystore'
+    }
-      })
+    if (d_id && token && d_store) {
+      this.goLookDoctor(d_id, d_store)
     }
   },
   onShow() {
@@ -402,7 +472,7 @@ export default {
     this.infoList = ""
     this.getStore();
     this.getList();
-    this.getProductList();
+    this.getProductList(); // 每次显示页面刷新商品列表
   },
 }
 </script>
@@ -411,6 +481,7 @@ export default {
 .content {
   background-color: #fff;
   width: 750rpx;
+  max-height: 100%;
   min-height: 100vh;
   padding-bottom: env(safe-area-inset-bottom);
   position: relative;
@@ -426,7 +497,7 @@ export default {
     image { width: 510rpx; height: 621rpx; vertical-align: middle; margin: 200rpx auto 0; }
   }
 
-  /* 头部区域样式 */
+  // 1. 头部样式：品牌蓝色渐变背景
   .head {
     width: 750rpx;
     height: 390rpx;
@@ -438,9 +509,10 @@ export default {
       height: 78rpx;
       line-height: 78rpx;
       font-size: 28rpx;
+      font-family: PingFang SC-Bold, PingFang SC;
       font-weight: bold;
       color: #FFFFFF;
-      margin: 0 auto;
+      margin: 0rpx auto 0rpx;
       .iconfont { font-size: 27rpx; color: #fff; margin-left: 16rpx; }
     }
 
@@ -450,23 +522,26 @@ export default {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin: 0 auto;
+      margin: 0rpx auto;
+
       .place {
         font-size: 26rpx;
+        font-family: PingFang SC-Regular, PingFang SC;
+        font-weight: 500;
         color: #FFFFFF;
         .iconfont { font-size: 25rpx; color: #FFFFFF; margin-right: 10rpx; }
       }
     }
   }
 
-  /* 轮播图区域 */
+  // 2. 轮播图区域
   .section {
     width: 710rpx;
     margin: -180rpx auto 30rpx;
     height: 300rpx;
   }
 
-  /* 导航栏样式：左文右图布局 + 背景图片 */
+  // 3. 导航栏样式优化：结合V1布局结构和原版背景图
   .nav {
     width: 710rpx;
     background: #FFFFFF;
@@ -476,31 +551,36 @@ export default {
     justify-content: space-between;
     margin: 30rpx auto;
 
+    // 通用导航卡片样式
     .nav_service {
       width: 348rpx;
       height: 178rpx;
       display: flex;
       align-items: center;
-      justify-content: space-between;
+      justify-content: space-between; // 左右分布：左文字 右图片
-      padding: 20rpx 30rpx;
+      padding: 20rpx 30rpx; // 增加内边距
       box-sizing: border-box;
       border-radius: 24rpx;
       background-size: 100% 100%;
       background-repeat: no-repeat;
       position: relative;
 
+      // 左侧文字区域
       .nav_content {
         z-index: 2;
         display: flex;
         flex-direction: column;
         justify-content: center;
+
         .nav_title {
-          font-size: 38rpx;
+          font-size: 38rpx; // 加大标题
+          font-family: PingFang SC-Heavy, PingFang SC;
           font-weight: 800;
           color: #FFFFFF;
           margin-bottom: 8rpx;
           text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
         }
+
         .nav_desc {
           font-size: 22rpx;
           color: rgba(255,255,255,0.9);
@@ -508,12 +588,14 @@ export default {
         }
       }
 
+      // 右侧图片区域
       .nav_img_wrapper {
         width: 100rpx;
         height: 100rpx;
         display: flex;
         align-items: center;
         justify-content: center;
+
         .nav_img {
           width: 80rpx;
           height: 80rpx;
@@ -522,175 +604,71 @@ export default {
       }
     }
 
-    /* 背景图资源引用 */
+    // 诊所背景 (bg01)
-    .bg-clinic { background-image: url('/static/home/bg01.png'); }
+    .bg-clinic {
-    .bg-pharmacy { background-image: url('/static/home/bg02.png'); }
+      background-image: url('/static/home/bg01.png');
+    }
+
+    // 药店背景 (bg02)
+    .bg-pharmacy {
+      background-image: url('/static/home/bg02.png');
+    }
   }
 
-  /* 标题栏通用样式 */
+  // 列表标题样式 (医生列表/热销药品)
   .doctor_list {
     width: 710rpx;
     font-size: 36rpx;
+    font-family: PingFang SC-Bold, PingFang SC;
     font-weight: bold;
     color: #232323;
     margin: 44rpx auto 24rpx;
     display: flex;
     justify-content: space-between;
     align-items: center;
+
     .info {
       font-size: 28rpx;
+      font-weight: 500;
       color: #666666;
     }
   }
 
-  /* ============ 优化后的医生卡片样式 (start) ============ */
+  /* 医生卡片样式 (诊所模式) */
-  .doctor-card-optimized {
+  .doctor-card {
-    width: 710rpx;
-    margin: 0 auto 24rpx;
     background: #FFFFFF;
-    border-radius: 24rpx;
+    border-radius: 16rpx;
-    /* 更柔和的阴影，提升高级感 */
+    box-shadow: 0 4rpx 12rpx rgba(65, 117, 238, 0.08);
-    box-shadow: 0 8rpx 24rpx rgba(65, 117, 238, 0.08);
+    margin: 0 auto 24rpx;
-    transition: all 0.3s ease;
+    width: 710rpx;
+    overflow: hidden;
 
-    &:active {
+    &:active { transform: translateY(2rpx); }
-      transform: scale(0.99);
-    }
 
-    .card-inner {
+    .card-content { display: flex; padding: 24rpx; }
-      padding: 30rpx;
+    .doctor-avatar { width: 100rpx; height: 100rpx; border-radius: 50%; border: 2rpx solid #f0f5ff; flex-shrink: 0; margin-right: 20rpx; }
-    }
+    .doctor-info { flex: 1; min-width: 0; }
 
-    /* 顶部布局：头像+信息 */
+    .name-section { display: flex; align-items: center; margin-bottom: 12rpx; }
-    .card-top {
+    .doctor-name { font-size: 32rpx; font-weight: bold; color: #232323; margin-right: 16rpx; }
-      display: flex;
+    .title-badge { font-size: 22rpx; color: #4175EE; background: #eef4ff; border-radius: 8rpx; padding: 4rpx 12rpx; flex-shrink: 0; }
-      margin-bottom: 24rpx;
 
-      .avatar-box {
+    .department-section { display: flex; align-items: center; margin-bottom: 16rpx; .iconfont { font-size: 24rpx; color: #888; margin-right: 6rpx; } .department { font-size: 24rpx; color: #666; } }
-        margin-right: 24rpx;
+    .expertise { display: flex; font-size: 26rpx; color: #444; line-height: 1.4; margin-bottom: 16rpx; .expertise-label { color: #666; flex-shrink: 0; } .expertise-content { flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } }
-        .avatar-img {
-          width: 120rpx;
-          height: 120rpx;
-          border-radius: 50%;
-          border: 4rpx solid #F0F6FF; /* 增加浅蓝色边框 */
-        }
-      }
 
-      .info-box {
+    .stats { display: flex; align-items: center; justify-content: space-between; padding-top: 12rpx; border-top: 1rpx dashed #e0e7ff; }
-        flex: 1;
+    .stat-item { flex: 1; text-align: center; }
-        display: flex;
+    .stat-value { font-size: 32rpx; font-weight: bold; color: #4175EE; display: block; line-height: 1.2; }
-        flex-direction: column;
+    .stat-label { font-size: 24rpx; color: #888; display: block; }
-        justify-content: space-around;
+    .consult-btn { background: #4175EE; color: white; border-radius: 40rpx; padding: 10rpx 24rpx; font-size: 26rpx; display: flex; align-items: center; .iconfont { font-size: 24rpx; margin-right: 6rpx; } }
-
-        /* 第一行：姓名 */
-        .name-row {
-          display: flex;
-          align-items: center;
-          margin-bottom: 8rpx;
-          .name-txt {
-            font-size: 34rpx;
-            font-weight: bold;
-            color: #333;
-            margin-right: 16rpx;
-          }
-          .title-tag {
-            font-size: 22rpx;
-            color: #4175EE;
-            background: rgba(65, 117, 238, 0.1);
-            padding: 4rpx 12rpx;
-            border-radius: 8rpx;
-          }
-        }
-
-        /* 第二行：科室 */
-        .dept-row {
-          display: flex;
-          align-items: center;
-          font-size: 26rpx;
-          color: #666;
-          margin-bottom: 8rpx;
-          .divider { margin: 0 10rpx; color: #ddd; }
-        }
-
-        /* 第三行：擅长 */
-        .skill-row {
-          display: flex;
-          font-size: 24rpx;
-          color: #999;
-          line-height: 1.4;
-          .label { flex-shrink: 0; }
-          .content {
-            display: -webkit-box;
-            -webkit-line-clamp: 1;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-          }
-        }
-      }
-    }
-
-    /* 分割线 */
-    .card-line {
-      height: 1px;
-      background: #F5F7FA;
-      margin-bottom: 24rpx;
-    }
-
-    /* 底部数据与按钮 */
-    .card-bottom {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .data-area {
-        display: flex;
-        gap: 40rpx;
-        .data-item {
-          text-align: center;
-          .num {
-            display: block;
-            font-size: 32rpx;
-            font-weight: bold;
-            color: #333;
-            margin-bottom: 4rpx;
-          }
-          .lbl {
-            font-size: 22rpx;
-            color: #999;
-          }
-        }
-      }
-
-      /* 修复后的咨询按钮样式 */
-      .action-btn {
-        width: 170rpx;
-        height: 64rpx;
-        /* 使用flex布局确保内容居中 */
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: linear-gradient(135deg, #4A90E2 0%, #5B8FF9 100%);
-        color: #fff;
-        font-size: 26rpx;
-        border-radius: 32rpx;
-        font-weight: 500;
-        box-shadow: 0 6rpx 16rpx rgba(74, 144, 226, 0.3);
-
-        .iconfont {
-          font-size: 28rpx;
-          margin-right: 6rpx;
-        }
-      }
-    }
   }
-  /* ============ 优化后的医生卡片样式 (end) ============ */
 
-  /* 药店模式 - 药品列表容器 */
+  // 4. 药店模式 - 药品列表容器
   .product-list-container {
     padding: 0 20rpx;
   }
 
-  /* 药品卡片样式 */
+  // 【优化点】首页专用药品卡片：极简风格
   .product-card-simple {
     background: #fff;
     border-radius: 16rpx;
@@ -698,10 +676,19 @@ export default {
     padding: 24rpx;
     display: flex;
     align-items: center;
+    // 使用微弱的蓝色阴影，呼应主题
     box-shadow: 0 4rpx 12rpx rgba(65, 117, 238, 0.08);
 
-    .product-img { width: 160rpx; height: 160rpx; border-radius: 12rpx; margin-right: 24rpx; background: #f8f8f8; }
+    // 药品缩略图
+    .product-img {
+      width: 160rpx;
+      height: 160rpx;
+      border-radius: 12rpx;
+      margin-right: 24rpx;
+      background: #f8f8f8;
+    }
 
+    // 右侧信息区域布局
     .product-info-simple {
       flex: 1;
       height: 160rpx;
@@ -710,21 +697,77 @@ export default {
       justify-content: space-between;
 
       .product-main {
+        // 第一行：药名 + 标签
         .product-name-row {
-          display: flex; align-items: center; margin-bottom: 8rpx;
+          display: flex;
-          .product-name { font-size: 30rpx; font-weight: bold; color: #333; margin-right: 12rpx; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+          align-items: center;
-          .otc-tag { font-size: 20rpx; padding: 2rpx 8rpx; border-radius: 4rpx; font-weight: bold; border: 1px solid; }
+          margin-bottom: 8rpx;
+          .product-name {
+            font-size: 30rpx;
+            font-weight: bold;
+            color: #333;
+            margin-right: 12rpx;
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          // OTC标签通用样式
+          .otc-tag {
+            font-size: 20rpx;
+            padding: 2rpx 8rpx;
+            border-radius: 4rpx;
+            font-weight: bold;
+            border: 1px solid;
+          }
+          // 绿底白字 / 红底白字
           .otc-green { color: #00B578; border-color: #00B578; }
           .otc-red { color: #FF4D4F; border-color: #FF4D4F; }
         }
-        .product-spec { font-size: 24rpx; color: #999; display: block; margin-bottom: 8rpx; }
+
-        .product-tags { display: flex; .tag { font-size: 20rpx; color: #666; background: #f5f5f5; padding: 2rpx 10rpx; border-radius: 4rpx; } }
+        // 规格显示
+        .product-spec {
+          font-size: 24rpx;
+          color: #999;
+          display: block;
+          margin-bottom: 8rpx;
+        }
+
+        // 底部标签容器
+        .product-tags {
+          display: flex;
+          .tag {
+            font-size: 20rpx;
+            color: #666;
+            background: #f5f5f5;
+            padding: 2rpx 10rpx;
+            border-radius: 4rpx;
+          }
+        }
       }
 
+      // 底部价格与按钮行
       .product-bottom {
-        display: flex; justify-content: space-between; align-items: flex-end;
+        display: flex;
-        .price-box { color: #FF4D4F; font-weight: bold; .currency { font-size: 24rpx; margin-right: 2rpx; } .price { font-size: 36rpx; } }
+        justify-content: space-between;
-        .buy-btn { background: #4175EE; color: #fff; font-size: 26rpx; padding: 10rpx 30rpx; border-radius: 30rpx; font-weight: 500; }
+        align-items: flex-end;
+
+        .price-box {
+          color: #FF4D4F;
+          font-weight: bold;
+          .currency { font-size: 24rpx; margin-right: 2rpx; }
+          .price { font-size: 36rpx; }
+        }
+
+        // 购买按钮：保持品牌色
+        .buy-btn {
+          background: #4175EE;
+          color: #fff;
+          font-size: 26rpx;
+          padding: 10rpx 30rpx;
+          border-radius: 30rpx;
+          font-weight: 500;
+        }
       }
     }
   }

pages/login/login.vue

@@ -7,10 +7,9 @@
           欢迎登录
         </view>
         <image src="@/static/empty/login.png" mode="aspectFit"></image>
-        <!--				<button class="btn" :class="form['check']?'':'bg'" :disabled="!form['check']" open-type="getPhoneNumber"-->
+
-        <!--					@getphonenumber="getToLogin">手机号一键登录</button>-->
+        <!-- 修改点1：移除 disabled 属性和 bg 样式判断，使其始终可点击且显示激活颜色 -->
-        <button class="btn" :class="form['check']?'':'bg'" :disabled="!form['check']"
+        <button class="btn" @click="handleLoginClick">一键登录</button>
-                @click="getToLogin">一键登录</button>
 
         <view class="word">
           <u-icon size="35" :color="form['check']?'#2979FF':'#E5E5E5'" name="checkmark-circle-fill"
@@ -23,20 +22,37 @@
           </view>
         </view>
         <view class="text" @click="back">取消登录</view>
-
-        <!-- <view class="footer" @click="toLogon">
-          输入其他手机号码注册
-        </view> -->
       </view>
     </view>
 
+    <!-- 原有的协议内容展示弹窗 -->
+    <!-- 修复：添加 z-index 属性，确保协议详情弹窗层级高于确认弹窗(确认弹窗默认z-index较低) -->
     <u-popup v-model="show" :safe-area-inset-bottom="true" mode="bottom" height="88%" border-radius="20"
-             :closeable="true">
+             :closeable="true" z-index="20000">
       <view class="agreen">
         <u-parse :html="content"></u-parse>
       </view>
     </u-popup>
 
+    <!-- 修改点2：新增未勾选协议时的确认模态框 -->
+    <!-- 确认弹窗 z-index 保持默认或稍低，确保详情弹窗能覆盖它 -->
+    <u-popup v-model="showConfirm" mode="center" border-radius="24" width="600" z-index="10075">
+      <view class="confirm-modal">
+        <view class="confirm-title">服务协议和隐私政策</view>
+        <view class="confirm-desc">
+          请您在使用前仔细阅读并同意
+          <text class="link" @click="getInfo(1)">《用户服务协议》</text>
+          和
+          <text class="link" @click="getInfo(2)">《隐私政策》</text>
+          。
+        </view>
+        <view class="confirm-footer">
+          <button class="cancel-btn" @click="showConfirm = false">不同意</button>
+          <button class="agree-btn" @click="agreeAndLogin">同意并登录</button>
+        </view>
+      </view>
+    </u-popup>
+
     <u-toast ref="uToast" />
   </view>
 </template>
@@ -60,6 +76,7 @@ export default {
       iv: "",
       session_key: "",
       show: false,
+      showConfirm: false, // 控制确认弹窗显示
       content: ``,
       type: 1,
       id: 1,
@@ -77,7 +94,6 @@ export default {
   },
   methods: {
     back() {
-
       uni.navigateTo({
         url: "/pages/home/index",
         fail: (e) => {
@@ -86,98 +102,35 @@ export default {
         success() {
         }
       })
-      // uni.navigateBack({ delta: 1 })
     },
+
+    // 修改点3：处理登录点击逻辑
+    handleLoginClick() {
+      if (!this.form.check) {
+        // 如果未勾选，显示确认弹窗
+        this.showConfirm = true;
+      } else {
+        // 如果已勾选，直接登录
+        this.getToLogin();
+      }
+    },
+
+    // 修改点4：同意协议并登录
+    agreeAndLogin() {
+      this.form.check = true; // 勾选协议
+      this.showConfirm = false; // 关闭弹窗
+      this.getToLogin(); // 执行登录
+    },
+
     getPhoneNumber(e) {
       uni.loading({
         title: "加载中"
       });
 
       setTimeout(function () {
-
         uni.hideLoading();
       }, 800)
       return;
-      if (!this.form['check']) {
-        uni.showToast({
-          icon: "error",
-          title: '请勾选协议'
-        })
-        return
-      }
-
-      if (e.detail.errMsg && e.detail.errMsg == 'getPhoneNumber:fail user deny') {
-        // uni.showToast({
-        // 	icon: "error",
-        // 	title: '未获取手机号码'
-        // })
-        this.$refs.uToast.show({
-          title: '未获取手机号码',
-          type: 'default',
-          icon: false
-        })
-        return
-      }
-
-      this.encryptedData = e.detail.encryptedData; //需要解密的内容
-      this.iv = e.detail.iv; //偏移量
-      this.code = e.detail.code
-      // console.log(e);
-
-      let data = {
-        iv: this.iv,
-        encryptedData: this.encryptedData,
-        code: this.code,
-        store_id: '11001'
-      }
-      getLogin({
-        method: 'post',
-        data: data
-      }).then((res) => {
-        // console.log(res, 'login');
-        if (res.data.errcode == 0) {
-          if (this.type == 1) {
-            uni.navigateTo({
-              url: "/pages/home/index-list?id=" + this.id,
-              fail: (e) => {
-                // console.log(e);
-              },
-              success() {
-                uni.showToast({
-                  title: '登陆成功',
-                  duration: 2000
-                });
-                uni.hideLoading();
-              }
-            })
-            return
-          }
-          // 进入h5 token是登录返回的platform_token   user_id是萧康的用户id
-          uni.setStorageSync('token_h5', res.data.data.plate_token)
-
-          // setTimeout(() => {
-          // 	this.getH5();
-          // }, 100)
-          uni.reLaunch({
-            url: "/pages/home/home",
-            fail: (e) => {
-              // console.log(e);
-            },
-            success() {
-              uni.showToast({
-                title: '登陆成功',
-                duration: 2000
-              });
-              uni.hideLoading();
-            }
-          })
-        } else {
-          uni.showToast({
-            icon: "error",
-            title: res.data.msg
-          })
-        }
-      })
     },
 
     toLogon() {
@@ -200,8 +153,6 @@ export default {
           store_id: uni.getStorageSync('store_id') || '11001',
         }
       }).then((res) => {
-        // console.log(res);
-
         if (e == 1) {
           this.content = res.data.data[0].content
         } else {
@@ -211,7 +162,6 @@ export default {
     },
 
     getToLogin(e) {
-
       uni.showLoading({
         title: "登录中"
       });
@@ -220,7 +170,6 @@ export default {
         provider: 'weixin',
         success: (loginRes) => {
           this.code = loginRes.code
-          // console.log(loginRes.code);
           getsLogin({
             method: "post",
             data: {
@@ -230,7 +179,6 @@ export default {
           }).then((res) => {
 
             uni.hideLoading();
-            // console.log(res, "res");
             if (res.data.errcode == 0) {
               uni.setStorageSync('token', res.data.data.token) //存储token
               uni.setStorageSync('user_id', res.data.data.data.user.id)
@@ -267,10 +215,6 @@ export default {
               }
 
             } else if (res.data.errcode != 0) {
-              // uni.showToast({
-              // 	icon: "error",
-              // 	title: res.data.msg
-              // })
               this.$refs.uToast.show({
                 title: res.data.msg,
                 type: 'default',
@@ -387,18 +331,7 @@ export default {
         border-radius: 64rpx;
       }
 
-      .bg {
+      // 移除了 .bg 样式，因为现在按钮始终是激活颜色
-        width: 648rpx;
-        height: 88rpx;
-        background: #8ABAFF;
-        line-height: 88rpx;
-        font-size: 32rpx;
-        text-align: center;
-        font-family: PingFang SC-Medium, PingFang SC;
-        font-weight: 400;
-        color: #FFFFFF;
-        border-radius: 64rpx;
-      }
     }
 
   }
@@ -406,5 +339,60 @@ export default {
   .agreen {
     padding: 60rpx 50rpx 20rpx;
   }
+
+  // 确认弹窗样式
+  .confirm-modal {
+    padding: 40rpx 30rpx;
+    background: #fff;
+
+    .confirm-title {
+      font-size: 34rpx;
+      font-weight: bold;
+      color: #333;
+      text-align: center;
+      margin-bottom: 30rpx;
+    }
+
+    .confirm-desc {
+      font-size: 28rpx;
+      color: #666;
+      line-height: 1.6;
+      margin-bottom: 40rpx;
+      text-align: center;
+
+      .link {
+        color: #2979FF;
+      }
+    }
+
+    .confirm-footer {
+      display: flex;
+      justify-content: space-between;
+      gap: 20rpx;
+
+      button {
+        flex: 1;
+        height: 80rpx;
+        line-height: 80rpx;
+        border-radius: 40rpx;
+        font-size: 30rpx;
+        border: none;
+
+        &::after {
+          border: none;
+        }
+      }
+
+      .cancel-btn {
+        background: #F5F7FA;
+        color: #909399;
+      }
+
+      .agree-btn {
+        background: #4175EE;
+        color: #FFFFFF;
+      }
+    }
+  }
 }
 </style>