Refactor(云灵AI):礼品商品轮播效果实现
This commit is contained in:
lifizer
+224
-8
@@ -38,7 +38,7 @@
|
||||
})">播放</button> -->
|
||||
<block v-if="chatMessageListLength < 1">
|
||||
<view class="home-wrap">
|
||||
<view class="home-focus-wrap">
|
||||
<view class="home-focus-wrap" style="display: none;">
|
||||
<view class="focus-guide-wrap">
|
||||
<view class="guide-left">
|
||||
<image
|
||||
@@ -53,6 +53,49 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 这里实现商品轮播 -->
|
||||
<view class="recommend-goods-wrap" v-if="recommendGoodsList.length > 0">
|
||||
<swiper
|
||||
class="goods-swiper"
|
||||
:indicator-dots="false"
|
||||
:autoplay="false"
|
||||
previous-margin="120rpx"
|
||||
next-margin="120rpx"
|
||||
circular
|
||||
@change="onSwiperChange"
|
||||
>
|
||||
<swiper-item
|
||||
v-for="(item, index) in recommendGoodsList"
|
||||
:key="index"
|
||||
>
|
||||
<view
|
||||
class="goods-item"
|
||||
:class="{ 'active': currentSwiperIndex === index }"
|
||||
@click="productItemClickHandle(item)"
|
||||
>
|
||||
<view class="supplier">
|
||||
<image
|
||||
:src="webUrl + '/aiChat/icon-57.png'"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<text class="s-name">{{ item.supplierName || '供应商名称' }}</text>
|
||||
<u-icon name="arrow-right" color="#999" size="12"></u-icon>
|
||||
</view>
|
||||
<view class="title one-t">{{ item.productName || item.name || '商品名称' }}</view>
|
||||
<image :src="item.image || item.img" class="p-img" mode="aspectFill" />
|
||||
<view class="price">
|
||||
<text class="unit">￥</text>
|
||||
<text class="num">{{ item.price || '0.00' }}</text>
|
||||
</view>
|
||||
<view class="actions">
|
||||
<view class="btn-buy" @click.stop="productItemBuyNowClickHandle(item)">立即下单</view>
|
||||
<view class="btn-gift" @click.stop="productItemGiftBuyClickHandle(item)">送给朋友</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<view class="topic-wrap">
|
||||
<view class="title">
|
||||
<view class="title-left">大家都在问</view>
|
||||
@@ -225,9 +268,9 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.showMoreInfo.showType === '店铺'" class="list-wrap">
|
||||
<view v-if="item.shopList.length > 0" class="list-wrap">
|
||||
<view
|
||||
v-for="(hotel, hotelIndex) in item.showMoreInfo.resultItems"
|
||||
v-for="(hotel, hotelIndex) in item.shopList"
|
||||
:key="hotelIndex"
|
||||
class="product-item"
|
||||
@click="hotelItemClickHandle(hotel)"
|
||||
@@ -314,12 +357,21 @@
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.showMoreInfo.showType !== '优惠活动' && item.orderList.length === 0" class="change-btn">
|
||||
<view
|
||||
v-if="item.shopList.length > 0 ||
|
||||
item.goodsList.length > 0 ||
|
||||
item.giftGoodsList.length > 0 ||
|
||||
item.ichList.length > 0 ||
|
||||
item.qianxianList.length > 0 ||
|
||||
item.shopList.length > 0
|
||||
"
|
||||
class="change-btn"
|
||||
>
|
||||
<image
|
||||
:src="webUrl + '/aiChat/icon-change.png'"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
@click="analyzeKeywordsChangeHandle(item.conversationId, item.showMoreInfo)"
|
||||
@click="analyzeKeywordsChangeHandle(item.conversationId, item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
@@ -413,11 +465,24 @@
|
||||
:status-bar-height="statusBarHeight"
|
||||
@enter-history="audioStopHandle"
|
||||
/>
|
||||
<ProductWindow
|
||||
ref="attrWindow"
|
||||
:attr="attr"
|
||||
:cart-num="cart_num"
|
||||
:show-ok="!showGiftBtn"
|
||||
:is-gift="showGiftBtn"
|
||||
:padding-bottom="bottomSafeDistance + 'px'"
|
||||
ok-text="立即购买"
|
||||
@changeFun="changeFun"
|
||||
@ok="buyNowOrGiftBuyReq(1)"
|
||||
@gift="buyNowOrGiftBuyReq(2)"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { chatMixinsV2 } from '../mixins/chatMixinsV2.js'
|
||||
import goCartMixin from '@/mixins/goCartMixins'
|
||||
import {
|
||||
getAiSystemInfoSetting,
|
||||
getAiSystemInfoTopic
|
||||
@@ -425,21 +490,69 @@ import {
|
||||
import AiHistoryList from '../components/historyList'
|
||||
import BottomSend from '../components/bottomSend.vue'
|
||||
import OrderItem from '../components/orderItem.vue'
|
||||
import ProductWindow from '@/components/ProductWindow'
|
||||
export default {
|
||||
name: 'AiChatIndexPage',
|
||||
components: {
|
||||
AiHistoryList,
|
||||
BottomSend,
|
||||
OrderItem
|
||||
OrderItem,
|
||||
ProductWindow
|
||||
},
|
||||
mixins: [chatMixinsV2],
|
||||
mixins: [chatMixinsV2, goCartMixin],
|
||||
data() {
|
||||
return {
|
||||
cityName: '',
|
||||
animationWidth: '150%',
|
||||
animationStr: '',
|
||||
settingInfo: {},
|
||||
topicList: []
|
||||
topicList: [],
|
||||
currentSwiperIndex: 0,
|
||||
recommendGoodsList: [
|
||||
{
|
||||
supplierName: '供应商名称',
|
||||
productName: '云南枇杷花蜜',
|
||||
image: 'https://resource.xdd618.com/最近喜欢上了独龙玉手镯_3_若瑜_来自小红书网页版-20250616101810.jpg',
|
||||
price: '65.00',
|
||||
id: 334
|
||||
},
|
||||
{
|
||||
supplierName: '供应商名称',
|
||||
productName: '云南枇杷花蜜',
|
||||
image: 'https://resource.xdd618.com/最近喜欢上了独龙玉手镯_3_若瑜_来自小红书网页版-20250616101810.jpg',
|
||||
price: '65.00',
|
||||
id: 334
|
||||
},
|
||||
{
|
||||
supplierName: '供应商名称',
|
||||
productName: '云南枇杷花蜜',
|
||||
image: 'https://resource.xdd618.com/最近喜欢上了独龙玉手镯_3_若瑜_来自小红书网页版-20250616101810.jpg',
|
||||
price: '65.00',
|
||||
id: 334
|
||||
},
|
||||
{
|
||||
supplierName: '供应商名称',
|
||||
productName: '云南枇杷花蜜',
|
||||
image: 'https://resource.xdd618.com/最近喜欢上了独龙玉手镯_3_若瑜_来自小红书网页版-20250616101810.jpg',
|
||||
price: '65.00',
|
||||
id: 334
|
||||
},
|
||||
{
|
||||
supplierName: '供应商名称',
|
||||
productName: '云南枇杷花蜜',
|
||||
image: 'https://resource.xdd618.com/最近喜欢上了独龙玉手镯_3_若瑜_来自小红书网页版-20250616101810.jpg',
|
||||
price: '65.00',
|
||||
id: 334
|
||||
},
|
||||
{
|
||||
supplierName: '供应商名称',
|
||||
productName: '云南枇杷花蜜',
|
||||
image: 'https://resource.xdd618.com/最近喜欢上了独龙玉手镯_3_若瑜_来自小红书网页版-20250616101810.jpg',
|
||||
price: '65.00',
|
||||
id: 334
|
||||
}
|
||||
],
|
||||
onlyOneToAddCart: false
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
@@ -505,6 +618,9 @@ export default {
|
||||
this.createNewHandle()
|
||||
}
|
||||
},
|
||||
onSwiperChange(e) {
|
||||
this.currentSwiperIndex = e.detail.current
|
||||
},
|
||||
pageContainerBeforeleave() {
|
||||
if (!this.chatNumber) {
|
||||
if (getCurrentPages().length > 1) {
|
||||
@@ -591,6 +707,106 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.recommend-goods-wrap {
|
||||
width: 100%;
|
||||
padding: 24rpx 0;
|
||||
.goods-swiper {
|
||||
width: 100%;
|
||||
height: 724rpx;
|
||||
}
|
||||
.goods-item {
|
||||
display: block;
|
||||
width: 460rpx;
|
||||
margin: 0 auto;
|
||||
padding: 24rpx;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
box-shadow: 0rpx 6rpx 30rpx rgba(0,0,0,0.16);
|
||||
white-space: normal;
|
||||
transition: all 0.3s ease;
|
||||
transform: scale(0.9);
|
||||
opacity: 0.8;
|
||||
&.active {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
.supplier {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
margin-bottom: 16rpx;
|
||||
.icon {
|
||||
display: block;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
.s-name {
|
||||
flex: 1;
|
||||
margin: 0 8rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 16rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.p-img {
|
||||
width: 412rpx;
|
||||
height: 412rpx;
|
||||
margin-bottom: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.price {
|
||||
color: #C52733;
|
||||
text-align: center;
|
||||
margin-bottom: 16rpx;
|
||||
.unit {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.num {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.btn-buy {
|
||||
width: 160rpx;
|
||||
height: 56rpx;
|
||||
margin: 0 12rpx;
|
||||
line-height: 56rpx;
|
||||
text-align: center;
|
||||
background: #C52733;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
border-radius: 28rpx;
|
||||
}
|
||||
.btn-gift {
|
||||
width: 160rpx;
|
||||
height: 56rpx;
|
||||
margin: 0 12rpx;
|
||||
line-height: 52rpx;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
color: #C52733;
|
||||
font-size: 24rpx;
|
||||
border-radius: 28rpx;
|
||||
border: 2rpx solid #C52733;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.topic-wrap {
|
||||
width: 100%;
|
||||
.title {
|
||||
|
||||
Reference in New Issue
Block a user