Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore：商品详情页面右上角有跳转到智能客服

Browse Source
This commit is contained in:
jinhhanhan
2026-03-17 09:53:24 +08:00
parent d8ba7ace0f
commit e33ad16d10
3 changed files with 44 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
pages_goods/_components/goods-detail-view/goods-detail-view.vue
View File

@@ -2,6 +2,11 @@
<view>
<view scroll-y="true" class="goods-detail" :class="isIphoneX ? 'active' : ''">
<view class="goods-container">
<!-- AI客服悬浮按钮 -->
<view class="ai-chat-float-btn" @tap.stop="$emit('aiChatClick')" v-if="goodsSkuDetail">
<text class="iconfont">🤖</text>
</view>
<!-- 弹幕 -->
<pengpai-fadein-out v-if="goodsSkuDetail.barrage_show && goodsSkuDetail.barrageData" ref="pengpai"
:duration="1600" :wait="1900" :top="200" :left="0" :radius="60" :loop="true"
@@ -481,4 +486,29 @@ export default {
<style lang="scss">
@import '@/common/css/goods_detail.scss';
</style>
<style scoped></style>
<style scoped>
.ai-chat-float-btn {
position: fixed;
right: 20rpx;
top: 100rpx;
width: 80rpx;
height: 80rpx;
border-radius: 50%;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
z-index: 9999;
transition: all 0.3s ease;
}
.ai-chat-float-btn:active {
transform: scale(0.9);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
.ai-chat-float-btn .iconfont {
font-size: 40rpx;
}
</style>

40
pages_goods/detail.vue
View File

@@ -6,7 +6,7 @@
</view> -->
<!-- #endif -->
<goods-detail-view :goodsSkuDetail="goodsSkuDetail" ref="goodsDetailView">
<goods-detail-view :goodsSkuDetail="goodsSkuDetail" ref="goodsDetailView" @aiChatClick="sendToAIChat(goodsSkuDetail)">
<!-- 价格区域 -->
<template v-slot:price>
<!-- 限时折扣 -->
@@ -94,11 +94,6 @@
<text v-if="goodsSkuDetail.stock_show">{{$lang('stock')}}: {{ goodsSkuDetail.stock +goodsSkuDetail.unit}}</text>
<text v-if="goodsSkuDetail.sale_show">{{$lang('sales')}}: {{ goodsSkuDetail.sale_num+goodsSkuDetail.unit }}</text>
</view>
<view class="ai-chat-btn" @tap.stop="sendToAIChat(goodsSkuDetail)">
<text class="iconfont">🤖</text>
<text>更多详情</text>
</view>
<!-- 会员卡 -->
<!-- <view class="member-card-wrap" @click="$util.redirectTo('/pages_tool/member/card_buy')" v-if="membercard">
<text class="iconfont icon-huiyuan"></text>
@@ -544,11 +539,11 @@ export default {
*/
sendToAIChat(item) {
const productInfo = {
goods_id: item.goods_id,
goods_name: item.goods_name,
price: item.discount_price || item.member_price || item.price,
image: item.sku_image,
category_id: item.category_id
goods_id: item.goods_id || '',
goods_name: item.goods_name || '',
price: item.discount_price || item.member_price || item.price || '',
image: item.sku_image || '',
category_id: item.category_id || ''
}
uni.setStorageSync('selectedProduct', productInfo)
@@ -667,27 +662,4 @@ export default {
line-height: 72rpx;
}
.ai-chat-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
padding: 8rpx 16rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 20rpx;
font-size: 24rpx;
font-weight: 500;
margin-top: 10rpx;
transition: all 0.3s ease;
}
.ai-chat-btn:active {
transform: scale(0.95);
opacity: 0.8;
}
.ai-chat-btn .iconfont {
font-size: 28rpx;
}
</style>