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

fix: 商品详情UI优化、提示增强

Browse Source
This commit is contained in:
年糕崽崽
2025-12-10 17:01:15 +08:00
parent ddaf176371
commit 419c62cde7
2 changed files with 1079 additions and 1051 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1831
pages/home/home.vue
View File

File diff suppressed because it is too large Load Diff

299
subPackages/product/product.vue
View File

@@ -27,33 +27,30 @@
:key="item.id"
class="list-item"
@click="handClickProduct(item)"
:style="index % 2 === 0 ? 'background-color: #f9faff;' : ''"
>
<image
class="item-image"
:src="item.drug.image"
mode="aspectFill"
lazy-load
style="width: 200rpx; height: 200rpx; border-radius: 12rpx;"
/>
<view class="item-content">
<view class="item-title">{{ item.drug.drug_name }}</view>
<view class="item-spec">
<text class="spec-label">功效：</text>
<text class="spec-label">功效</text>
<text class="spec-value">{{ item.drug.function }}</text>
</view>
<view class="item-spec">
<text class="spec-label">规格：</text>
<text class="spec-label">规格</text>
<text class="spec-value">{{ item.drug.specification }}</text>
</view>
<view class="item-bottom">
<view class="price-section">
<text class="price-tag">¥{{ item.drug.drug_store_drug.price }}</text>
<text class="stock-tag">库存：999盒</text>
<text class="price-tag">¥{{ item.price }}</text>
<text class="stock-tag">库存充足</text>
</view>
<!-- 简洁的购物车图标按钮 -->
<view class="cart-icon-btn" @click.stop="showCartPopup(item)">
<u-icon name="shopping-cart" color="#4A90E2" size="36"></u-icon>
<u-icon name="shopping-cart" color="#ffffff" size="40"></u-icon>
</view>
</view>
</view>
@@ -70,7 +67,7 @@
@click="goToCart"
>
<u-badge :count="cartCount" :max="99" type="error" class="cart-badge" v-if="cartCount > 0"></u-badge>
<u-icon name="shopping-cart" color="#ffffff" size="32"></u-icon>
<u-icon name="shopping-cart" color="#ffffff" size="36"></u-icon>
</view>
<!-- 购物车弹窗 -->
@@ -120,8 +117,8 @@
</template>
<script>
import { getStoreDrugListBySalespersonApi} from "@/request/api/product";
import {getCartCountsApi, saveCartApi} from "@/request/api/cart";
import { getStoreDrugListBySalespersonApi } from "@/request/api/product";
import { getCartCountsApi, saveCartApi } from "@/request/api/cart";
export default {
data() {
@@ -132,7 +129,6 @@ export default {
scrollViewHeight: 0,
doctorId: 0,
r_type: 0,
// 购物车相关数据
cartCount: 0,
cartPosition: {
x: 0,
@@ -143,14 +139,12 @@ export default {
startY: 0,
moving: false
},
// 弹窗相关数据
showPopup: false,
currentProduct: {},
quantity: 1
};
},
computed: {
// 计算属性来处理可能为空的属性
getProductImage() {
return this.currentProduct.drug && this.currentProduct.drug.image ? this.currentProduct.drug.image : '';
},
@@ -164,7 +158,6 @@ export default {
onLoad(e) {
this.doctorId = e.doctor_id;
this.r_type = e.register_type;
console.log(e, 'e');
},
methods: {
getList() {
@@ -199,25 +192,18 @@ export default {
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}`
});
},
// 购物车相关方法
// 初始化购物车位置
initCartPosition() {
const systemInfo = uni.getSystemInfoSync();
this.cartPosition = {
x: systemInfo.windowWidth - 80, // 距离右侧80px
y: systemInfo.windowHeight - 200 // 距离底部200px
x: systemInfo.windowWidth - 80,
y: systemInfo.windowHeight - 200
};
},
// 触摸开始
onTouchStart(e) {
this.cartMove.startX = e.touches[0].clientX;
this.cartMove.startY = e.touches[0].clientY;
this.cartMove.moving = false;
},
// 触摸移动
onTouchMove(e) {
this.cartMove.moving = true;
const moveX = e.touches[0].clientX - this.cartMove.startX;
@@ -229,8 +215,6 @@ export default {
this.cartMove.startX = e.touches[0].clientX;
this.cartMove.startY = e.touches[0].clientY;
},
// 触摸结束
onTouchEnd() {
if (!this.cartMove.moving) return;
@@ -238,19 +222,16 @@ export default {
const screenWidth = systemInfo.windowWidth;
const screenHeight = systemInfo.windowHeight;
// 边界检测
let finalX = this.cartPosition.x;
let finalY = this.cartPosition.y;
// 限制在屏幕范围内
finalX = Math.max(10, Math.min(finalX, screenWidth - 70));
finalY = Math.max(10, Math.min(finalY, screenHeight - 70));
// 自动吸附到左侧或右侧
if (finalX < screenWidth / 2) {
finalX = 20; // 吸附到左侧
finalX = 20;
} else {
finalX = screenWidth - 70; // 吸附到右侧
finalX = screenWidth - 70;
}
this.cartPosition = {
@@ -258,58 +239,38 @@ export default {
y: finalY
};
},
// 跳转到购物车页面
goToCart() {
uni.navigateTo({
url: '/subPackages/shop/shop-cate'
});
},
// 显示购物车弹窗
showCartPopup(item) {
this.currentProduct = item;
this.quantity = 1;
this.showPopup = true;
},
// 关闭弹窗
closePopup() {
this.showPopup = false;
},
// 数量变化
quantityChange(value) {
console.log('数量变化:', value);
console.log('[v0] 数量变化:', value);
},
// 确认加入购物车
confirmAddToCart() {
try {
// 获取当前购物车数据
let cart = uni.getStorageSync('cart') || [];
// 确保cart是数组
if (!Array.isArray(cart)) {
cart = [];
}
// 查找商品是否已在购物车中
const existingItem = cart.find(cartItem => cartItem.id === this.currentProduct.drug.id);
saveCartApi({
store_id: uni.getStorageSync('store_id')|| '11001',
store_id: uni.getStorageSync('store_id') || '11001',
drug_id: this.currentProduct.drug.id,
quantity: this.quantity
}).then(() => {
// 更新购物车数量
this.updateCartCount();
// 关闭弹窗
this.closePopup();
// 显示成功提示
uni.showToast({
title: `已加入${this.quantity}件商品`,
icon: 'success',
@@ -318,7 +279,7 @@ export default {
})
} catch (error) {
console.error('加入购物车失败:', error);
console.error('[v0] 加入购物车失败:', error);
uni.showToast({
title: '加入购物车失败',
icon: 'none',
@@ -326,8 +287,6 @@ export default {
});
}
},
// 更新购物车数量
updateCartCount() {
let that = this;
getCartCountsApi({
@@ -345,7 +304,7 @@ export default {
this.getList();
this.calculateScrollViewHeight();
this.initCartPosition();
this.updateCartCount(); // 更新购物车数量
this.updateCartCount();
},
onReady() {
uni.onWindowResize(() => {
@@ -353,7 +312,6 @@ export default {
this.initCartPosition();
});
},
// 添加页面加载时的购物车初始化
mounted() {
this.updateCartCount();
}
@@ -363,7 +321,7 @@ export default {
<style lang="scss" scoped>
.container {
padding: 20rpx;
background: #f0f5ff;
background: linear-gradient(180deg, #f0f5ff 0%, #ffffff 100%);
min-height: 100vh;
box-sizing: border-box;
position: relative;
@@ -372,34 +330,55 @@ export default {
.search-section {
padding: 20rpx;
background: #ffffff;
border-radius: 16rpx;
box-shadow: 0 4rpx 12rpx rgba(74,144,226,0.1);
border-radius: 20rpx;
box-shadow: 0 6rpx 24rpx rgba(74,144,226,0.15);
margin-bottom: 24rpx;
}
.list-section {
padding-top: 20rpx;
padding-top: 10rpx;
}
.list-item {
display: flex;
padding: 24rpx;
margin-bottom: 20rpx;
border-radius: 16rpx;
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
transition: all 0.2s ease;
background-color: #ffffff;
padding: 28rpx;
margin-bottom: 24rpx;
border-radius: 20rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
box-shadow: 0 6rpx 20rpx rgba(65, 117, 238, 0.12);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4rpx;
background: linear-gradient(90deg, #4A90E2, #5B8FF9);
opacity: 0;
transition: opacity 0.3s ease;
}
&:active {
transform: translateY(4rpx);
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
box-shadow: 0 3rpx 12rpx rgba(65, 117, 238, 0.18);
&::before {
opacity: 1;
}
}
}
.item-image {
width: 200rpx;
height: 200rpx;
margin-right: 20rpx;
border-radius: 12rpx;
margin-right: 24rpx;
border-radius: 16rpx;
border: 3rpx solid #f0f5ff;
flex-shrink: 0;
}
.item-content {
@@ -410,124 +389,146 @@ export default {
.item-title {
font-size: 32rpx;
font-weight: 500;
color: #2c3e50;
margin-bottom: 12rpx;
font-weight: 600;
color: #232323;
margin-bottom: 16rpx;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.item-spec {
display: flex;
align-items: center;
margin-bottom: 8rpx;
color: #666;
font-size: 24rpx;
align-items: flex-start;
margin-bottom: 10rpx;
font-size: 26rpx;
}
.spec-label {
background: rgba(74,144,226,0.1);
padding: 2rpx 6rpx;
border-radius: 4rpx;
margin-right: 4rpx;
background: linear-gradient(135deg, #4A90E2, #5B8FF9);
color: #ffffff;
padding: 4rpx 12rpx;
border-radius: 6rpx;
margin-right: 12rpx;
flex-shrink: 0;
font-weight: 500;
}
.spec-value {
color: #666;
flex: 1;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.item-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16rpx 0;
border-top: 1rpx solid #f0f0f0;
padding-top: 16rpx;
margin-top: auto;
border-top: 2rpx solid #f0f5ff;
}
.price-section {
display: flex;
flex-direction: column;
gap: 6rpx;
}
.price-tag {
font-size: 32rpx;
font-weight: 500;
color: #3A86FF;
margin-bottom: 4rpx;
font-size: 36rpx;
font-weight: 700;
color: #FF6B6B;
}
.stock-tag {
font-size: 24rpx;
color: #95a5a6;
color: #52C41A;
font-weight: 500;
}
// 简洁的购物车图标按钮
.cart-icon-btn {
width: 72rpx;
height: 72rpx;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
background-color: rgba(74,144,226,0.1);
background: linear-gradient(135deg, #4A90E2, #5B8FF9);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
box-shadow: 0 6rpx 20rpx rgba(74,144,226,0.3);
transition: all 0.3s ease;
&:active {
background-color: rgba(74,144,226,0.2);
transform: scale(0.95);
transform: scale(0.9);
box-shadow: 0 3rpx 12rpx rgba(74,144,226,0.4);
}
}
// 购物车悬浮球样式
.cart-float {
position: fixed;
width: 100rpx;
height: 100rpx;
background: linear-gradient(135deg, #4A90E2, #3A86FF);
width: 110rpx;
height: 110rpx;
background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8rpx 24rpx rgba(74,144,226,0.3);
box-shadow: 0 8rpx 28rpx rgba(255, 107, 107, 0.4);
z-index: 999;
transition: transform 0.2s ease;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
transform: scale(0.92);
}
}
.cart-badge {
position: absolute;
top: -10rpx;
right: -10rpx;
top: -8rpx;
right: -8rpx;
}
// 弹窗样式
.popup-content {
padding: 40rpx;
padding-bottom: 60rpx; // 为底部安全区域留出空间
padding-bottom: calc(60rpx + env(safe-area-inset-bottom));
}
.popup-header {
margin-bottom: 40rpx;
text-align: center;
padding-bottom: 30rpx;
border-bottom: 2rpx solid #f0f5ff;
}
.popup-title {
font-size: 36rpx;
font-weight: 600;
color: #2c3e50;
font-size: 38rpx;
font-weight: 700;
color: #232323;
}
.product-info {
display: flex;
margin-bottom: 50rpx;
padding: 30rpx;
background-color: #f8f9fa;
border-radius: 16rpx;
background: linear-gradient(135deg, #f8fbff, #ffffff);
border-radius: 20rpx;
border: 2rpx solid #f0f5ff;
}
.product-image {
width: 120rpx;
height: 120rpx;
border-radius: 12rpx;
width: 140rpx;
height: 140rpx;
border-radius: 16rpx;
margin-right: 24rpx;
border: 2rpx solid #f0f5ff;
}
.product-details {
@@ -539,21 +540,22 @@ export default {
.product-name {
font-size: 30rpx;
font-weight: 500;
color: #2c3e50;
margin-bottom: 8rpx;
font-weight: 600;
color: #232323;
margin-bottom: 12rpx;
line-height: 1.4;
}
.product-spec {
font-size: 24rpx;
color: #95a5a6;
margin-bottom: 12rpx;
font-size: 26rpx;
color: #999;
margin-bottom: 16rpx;
}
.product-price {
font-size: 32rpx;
font-weight: 600;
color: #3A86FF;
font-size: 36rpx;
font-weight: 700;
color: #FF6B6B;
}
.quantity-selector {
@@ -561,56 +563,51 @@ export default {
justify-content: space-between;
align-items: center;
margin-bottom: 60rpx;
padding: 30rpx 0;
border-top: 1rpx solid #f0f0f0;
border-bottom: 1rpx solid #f0f0f0;
padding: 35rpx 0;
border-top: 2rpx solid #f0f5ff;
border-bottom: 2rpx solid #f0f5ff;
}
.quantity-label {
font-size: 30rpx;
color: #2c3e50;
font-weight: 500;
}
.quantity-controls {
display: flex;
align-items: center;
font-size: 32rpx;
color: #232323;
font-weight: 600;
}
.popup-actions {
display: flex;
justify-content: space-between;
gap: 20rpx;
}
.cancel-btn {
flex: 1;
margin-right: 20rpx;
background-color: #f8f9fa;
color: #95a5a6;
background: #f5f5f5;
color: #666;
border: none;
border-radius: 50rpx;
padding: 24rpx 0;
font-size: 30rpx;
font-weight: 500;
padding: 28rpx 0;
font-size: 32rpx;
font-weight: 600;
&:active {
background-color: #e9ecef;
background: #e8e8e8;
}
}
.confirm-btn {
flex: 1;
margin-left: 20rpx;
background: linear-gradient(135deg, #4A90E2, #3A86FF);
flex: 2;
background: linear-gradient(135deg, #4A90E2, #5B8FF9);
color: #ffffff;
border: none;
border-radius: 50rpx;
padding: 24rpx 0;
font-size: 30rpx;
font-weight: 500;
padding: 28rpx 0;
font-size: 32rpx;
font-weight: 600;
box-shadow: 0 6rpx 20rpx rgba(74,144,226,0.3);
&:active {
opacity: 0.8;
opacity: 0.85;
box-shadow: 0 3rpx 12rpx rgba(74,144,226,0.4);
}
}
</style>
</style>