xkyy/xk-client-wx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
liqi
2025-12-11 15:23:18 +08:00
parent 730e286eb5
commit 40fa6ba2e8
2 changed files with 401 additions and 370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

557
pages/home/home.vue
View File

@@ -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>
<!-- ================= 导航栏区域 ================= -->
<!-- 场景1：诊所模式 (显示挂号 + 购药) -->
<!-- 导航栏区域：诊所模式 (显示挂号和购药) -->
<!-- 优化点：使用第一版的"左文右图+副标题"布局，但背景保留原有的bg图片 -->
<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
v-if="storeType === '0'"
class="doctor-card-optimized"
@click="goLookDoctor(item.id)"
v-for="(item,index) in doctorList"
:key="item.id"
>
<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 v-if="storeType === '0'" class="doctor-card" @click="goLookDoctor(item.id)" v-for="(item,index) in doctorList" :key="item.id">
<view class="card-content">
<image :src="item.avatar || '/static/mine/avatar_1.png'" mode="aspectFill" class="doctor-avatar"></image>
<view class="doctor-info">
<view class="name-section">
<text class="doctor-name">{{item.name}}</text>
<view class="title-badge">{{item.title}}</view>
</view>
<!-- 信息容器 -->
<view class="info-box">
<!-- 第一行：姓名与职称 -->
<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 class="department-section">
<text class="iconfont icon-location"></text>
<text class="department">{{item.depart}} | {{item.store}}</text>
</view>
</view>
<!-- 分割线 -->
<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 class="expertise">
<text class="expertise-label">擅长：</text>
<text class="expertise-content">{{item.good_at}}</text>
</view>
<!-- 咨询按钮 (修复：增加图标，优化样式) -->
<view class="action-btn">
<text class="iconfont icon-consult"></text>
<text>立即咨询</text>
<view class="stats">
<view class="stat-item">
<text class="stat-value">{{item.inquiry_num}}</text>
<text class="stat-label">问诊量</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');
uni.navigateTo({
url: '/subPackages/doctor/doctor-detail?store_id=' + currentStsId + '&id=' + id
})
},
toStore() {
uni.navigateTo({
url: '/subPackages/my/mystore'
})
}
},
mounted() {
const token = uni.getStorageSync('token')
const id = uni.getStorageSync('store_id')
const d_id = uni.getStorageSync('doctors_id')
const d_store = uni.getStorageSync('st_id')
if (token && id) {
this.toChang(id)
}
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;
padding: 20rpx 30rpx;
justify-content: space-between; // 左右分布：左文字 右图片
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 {
}
}
/* 背景图资源引用 */
.bg-clinic { background-image: url('/static/home/bg01.png'); }
.bg-pharmacy { background-image: url('/static/home/bg02.png'); }
// 诊所背景 (bg01)
.bg-clinic {
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 {
width: 710rpx;
margin: 0 auto 24rpx;
/* 医生卡片样式 (诊所模式) */
.doctor-card {
background: #FFFFFF;
border-radius: 24rpx;
/* 更柔和的阴影，提升高级感 */
box-shadow: 0 8rpx 24rpx rgba(65, 117, 238, 0.08);
transition: all 0.3s ease;
border-radius: 16rpx;
box-shadow: 0 4rpx 12rpx rgba(65, 117, 238, 0.08);
margin: 0 auto 24rpx;
width: 710rpx;
overflow: hidden;
&:active {
transform: scale(0.99);
}
&:active { transform: translateY(2rpx); }
.card-inner {
padding: 30rpx;
}
.card-content { display: flex; padding: 24rpx; }
.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; }
/* 顶部布局：头像+信息 */
.card-top {
display: flex;
margin-bottom: 24rpx;
.name-section { display: flex; align-items: center; margin-bottom: 12rpx; }
.doctor-name { font-size: 32rpx; font-weight: bold; color: #232323; margin-right: 16rpx; }
.title-badge { font-size: 22rpx; color: #4175EE; background: #eef4ff; border-radius: 8rpx; padding: 4rpx 12rpx; flex-shrink: 0; }
.avatar-box {
margin-right: 24rpx;
.avatar-img {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
border: 4rpx solid #F0F6FF; /* 增加浅蓝色边框 */
}
}
.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; } }
.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; } }
.info-box {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
/* 第一行：姓名 */
.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;
}
}
}
.stats { display: flex; align-items: center; justify-content: space-between; padding-top: 12rpx; border-top: 1rpx dashed #e0e7ff; }
.stat-item { flex: 1; text-align: center; }
.stat-value { font-size: 32rpx; font-weight: bold; color: #4175EE; display: block; line-height: 1.2; }
.stat-label { font-size: 24rpx; color: #888; display: block; }
.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; } }
}
/* ============ 优化后的医生卡片样式 (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;
.product-name { font-size: 30rpx; font-weight: bold; color: #333; margin-right: 12rpx; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.otc-tag { font-size: 20rpx; padding: 2rpx 8rpx; border-radius: 4rpx; font-weight: bold; border: 1px solid; }
display: flex;
align-items: center;
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;
.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; }
display: flex;
justify-content: space-between;
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;
}
}
}
}

214
pages/login/login.vue
View File

@@ -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>-->
<button class="btn" :class="form['check']?'':'bg'" :disabled="!form['check']"
@click="getToLogin">一键登录</button>
<!-- 修改点1：移除 disabled 属性和 bg 样式判断，使其始终可点击且显示激活颜色 -->
<button class="btn" @click="handleLoginClick">一键登录</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 {
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;
}
// 移除了 .bg 样式，因为现在按钮始终是激活颜色
}
}
@@ -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>