编写易购模块的搜索页面
This commit is contained in:
赵毅
parent
47f1eaaa09
commit
dc5e328b3c
@ -18,4 +18,6 @@ export const apiArr = {
|
|||||||
getComment: '/api/v2/wechat/commodity/review/list', // 获取评论
|
getComment: '/api/v2/wechat/commodity/review/list', // 获取评论
|
||||||
|
|
||||||
mergePreorder: '/api/v2/wechat/commodity/order/preorder', // 商品订单合并预下单
|
mergePreorder: '/api/v2/wechat/commodity/order/preorder', // 商品订单合并预下单
|
||||||
|
|
||||||
|
goodsSearch: '/api/v2/wechat/commodity/search', // 商品搜索
|
||||||
}
|
}
|
||||||
@ -69,6 +69,12 @@ image {
|
|||||||
margin-top: 48rpx;
|
margin-top: 48rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hisTop{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
.hisTit {
|
.hisTit {
|
||||||
font-size: 33rpx;
|
font-size: 33rpx;
|
||||||
color: #222222;
|
color: #222222;
|
||||||
@ -182,12 +188,17 @@ image {
|
|||||||
|
|
||||||
.tag-img {
|
.tag-img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
/* top: 1; */
|
top: 0;
|
||||||
bottom: 1;
|
left: 0;
|
||||||
left: 10;
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tag-text {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
.tag-name {
|
.tag-name {
|
||||||
background-color: #ff7d00;
|
background-color: #ff7d00;
|
||||||
color: white;
|
color: white;
|
||||||
@ -209,6 +220,171 @@ image {
|
|||||||
margin-top: 10rpx;
|
margin-top: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 商品信息样式 */
|
||||||
|
.CateInfo_Item_Box {
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx 40rpx;
|
||||||
|
border-bottom: 1rpx solid #EBEBEB;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CateInfo_Item_left {
|
||||||
|
width: 140rpx;
|
||||||
|
min-width: 140rpx;
|
||||||
|
height: 140rpx;
|
||||||
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 15rpx;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CateInfo_Item_left image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CateInfo_Item_right {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CateInfo_Item_right_Tit {
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #000000;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CateInfo_Item_right_subtit {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CateInfo_Item_Money {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 27rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CateInfo_Item_Money_left {
|
||||||
|
font-size: 34rpx;
|
||||||
|
color: #FF370B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CateInfo_Item_Money_left span {
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.CateInfo_Item_Money_right .input {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 数量选择器样式 */
|
||||||
|
.minus {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
border-width: 1px;
|
||||||
|
border-color: #E6E6E6;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plus {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
background-color: #FF0000;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 规格选择样式 */
|
||||||
|
.gg {
|
||||||
|
width: 142rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
background: #FFEBEB;
|
||||||
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #FF370B;
|
||||||
|
position: absolute;
|
||||||
|
right: 100rpx;
|
||||||
|
bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GGList {
|
||||||
|
width: 550rpx;
|
||||||
|
background: rgba(255, 239, 239, 0.5);
|
||||||
|
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||||
|
padding: 25rpx 16rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-left: 26rpx;
|
||||||
|
position: relative;
|
||||||
|
left: 22%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noneBor {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GGItem {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GGItem_Image {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
margin: 0 20rpx 20rpx 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GGItem_Image image {
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GGItem_Con_Tit {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GGItem_Con {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GGItem_Con_Msg_left {
|
||||||
|
display: flex;
|
||||||
|
font-size: 30rpx;
|
||||||
|
color: #FF370B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GGItem_Con_Msg_left span {
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GGItem_Con_Msg {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GGItem_Con_Msg_right .input {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.searchItem_right_Money {
|
.searchItem_right_Money {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@ -1,109 +1,152 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="merchantList">
|
<view class="merchantList">
|
||||||
<div class="searchBox">
|
<view class="searchBox">
|
||||||
<div class="searchBox_left">
|
<view class="searchBox_left">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"></image>
|
<image
|
||||||
<u--input @focus="iptFocus" @blur="iptBlur" placeholder="搜索商品" border="surround" clearable></u--input>
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
||||||
|
@click="search">
|
||||||
<!-- 测试用 -->
|
</image>
|
||||||
<!-- <input type="text" v-model="searchQuery" placeholder="请输入搜索内容" @input="onSearch" @focus="showHistory = true" class="search-input" />
|
<u--input v-model="searchQuery" @focus="iptFocus" @blur="iptBlur" @confirm="search" placeholder="搜索商品"
|
||||||
<view v-if="results.length" class="search-results">
|
border="surround" clearable></u--input>
|
||||||
<view class="result-item">
|
|
||||||
{{item}}
|
|
||||||
</view>
|
</view>
|
||||||
</view> -->
|
<view class="searchBox_right">
|
||||||
<!-- 测试用 -->
|
<view class="cars" @click="goCar">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="searchBox_right">
|
|
||||||
<div class="cars">
|
|
||||||
<u-badge numberType="limit" type="error" max="99" :value="value"></u-badge>
|
<u-badge numberType="limit" type="error" max="99" :value="value"></u-badge>
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car.png" mode="widthFix"></image>
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car.png"
|
||||||
</div>
|
mode="widthFix"></image>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
|
</view>
|
||||||
<!-- 搜索联系 -->
|
<!-- 搜索联系 -->
|
||||||
<div class="searchMore" v-if="isSearch">
|
<!-- <view class="searchMore" v-if="!isSearched && searchHistory.length > 0">
|
||||||
<div class="searchMoreItem">猪肉肠</div>
|
<view class="searchMoreItem">猪肉肠</view>
|
||||||
<div class="searchMoreItem">猪肉肠</div>
|
<view class="searchMoreItem">猪肉肠</view>
|
||||||
<div class="searchMoreItem">猪肉肠</div>
|
<view class="searchMoreItem">猪肉肠</view>
|
||||||
</div>
|
</view> -->
|
||||||
|
|
||||||
<!-- 搜索历史 -->
|
<!-- 搜索历史 -->
|
||||||
<div class="his" v-if="isSearch">
|
<view class="his" v-if="!isSearched && searchHistory.length > 0">
|
||||||
<div class="hisTit">搜索历史</div>
|
<view class="hisTop">
|
||||||
<div class="HisList">
|
<view class="hisTit">搜索历史</view>
|
||||||
<div class="HisItem">羊肉</div>
|
<u-icon name="trash" color="#999999" size="40" class="history-trash" @click="deleteHistory"></u-icon>
|
||||||
<div class="HisItem">火锅底料</div>
|
</view>
|
||||||
<div class="HisItem">蒜蓉辣酱</div>
|
<view class="HisList">
|
||||||
<div class="HisItem">蒜蓉辣酱</div>
|
<view v-for="(item, index) in searchHistory" :key="index" class="HisItem" @click="selectHistory(item)">
|
||||||
<div class="HisItem">蒜蓉辣酱</div>
|
{{ item }}</view>
|
||||||
<div class="HisItem">蒜蓉辣酱</div>
|
</view>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 测试用 -->
|
|
||||||
<!-- <view v-if="showHistory && searchHistory.length > 0" class="history-list">
|
|
||||||
<view
|
|
||||||
v-for="(item, index) in searchHistory"
|
|
||||||
:key="index"
|
|
||||||
class="history-item"
|
|
||||||
@click="selectHistory(item)"
|
|
||||||
>
|
|
||||||
{{ item }}
|
|
||||||
</view>
|
</view>
|
||||||
</view> -->
|
|
||||||
<!-- 测试用 -->
|
|
||||||
|
|
||||||
|
|
||||||
<!-- 未搜索到 -->
|
<!-- 未搜索到 -->
|
||||||
<div class="empty" v-if="false">
|
<view class="empty" v-if="isSearched && searchGoodsLisat.length == 0">
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"></image>
|
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_noSearch.png"></image>
|
||||||
对不起没有找到您想要的商品
|
对不起没有找到您想要的商品
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="searchList">
|
|
||||||
<div class="searchSubTit">
|
|
||||||
<div class="searchSubItem">综合</div>
|
|
||||||
<div class="searchSubItem">
|
|
||||||
价格
|
|
||||||
<div class="iconBox">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="searchItem">
|
|
||||||
<div class="searchItem_left">
|
|
||||||
<view class="tag tag-img">当日达</view>
|
|
||||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_act2Img.png" mode="widthFix"></image>
|
|
||||||
</div>
|
|
||||||
<div class="searchItem_right">
|
|
||||||
<div class="searchItem_right_tit"><div class="tag-name" v-if="">当日达</div><div>泰国金枕榴莲</div></div>
|
|
||||||
<div class="searchItem_right_subTit">商品介绍商品介绍</div>
|
|
||||||
<div class="searchItem_right_Money">
|
|
||||||
<div class="Money_left">
|
|
||||||
<div class="money_unit">￥</div>
|
|
||||||
125.9
|
|
||||||
<div class="Money_dw">/个</div>
|
|
||||||
</div>
|
|
||||||
<div class="Money_right">
|
|
||||||
<u-number-box v-model="value">
|
|
||||||
<view slot="minus" class="minus">
|
|
||||||
<u-icon name="minus" size="22" bold></u-icon>
|
|
||||||
</view>
|
</view>
|
||||||
<text slot="input" style="width: 80rpx;text-align: center;" class="input">{{ value
|
|
||||||
|
<view class="searchList" v-if="isSearched && searchGoodsLisat.length > 0">
|
||||||
|
<!-- <view class="searchSubTit">
|
||||||
|
<view class="searchSubItem">综合</view>
|
||||||
|
<view class="searchSubItem">
|
||||||
|
价格
|
||||||
|
<view class="iconBox">
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view> -->
|
||||||
|
|
||||||
|
<view v-for="(item, index) in searchGoodsLisat" :key="index">
|
||||||
|
<view class="CateInfo_Item_Box">
|
||||||
|
<view class="CateInfo_Item_left" @click="goods(item)">
|
||||||
|
<view class="tag tag-img" v-if="
|
||||||
|
!item.commodity_goods_info_list[1] &&
|
||||||
|
item.commodity_goods_info_list[0].is_same_day
|
||||||
|
">当日达</view>
|
||||||
|
<image :src="handleImageUrl(item.commodity_pic)" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="CateInfo_Item_right" :class="GGshow ? 'noneBor' : ''">
|
||||||
|
<view class="CateInfo_Item_right_Tit" @click="goods(item)">
|
||||||
|
<view class="tag tag-text" v-if="
|
||||||
|
!item.commodity_goods_info_list[1] &&
|
||||||
|
item.commodity_goods_info_list[0].is_same_day
|
||||||
|
">当日达</view>
|
||||||
|
{{ item.commodity_name }}
|
||||||
|
</view>
|
||||||
|
<view class="CateInfo_Item_right_subtit" @click="goods(item)">
|
||||||
|
{{ item.commodity_intro }}
|
||||||
|
</view>
|
||||||
|
<view class="CateInfo_Item_Money">
|
||||||
|
<view class="CateInfo_Item_Money_left">
|
||||||
|
{{ getPriceRange(item.commodity_goods_info_list) }}
|
||||||
|
</view>
|
||||||
|
<view class="CateInfo_Item_Money_right" v-if="!(item.commodity_goods_info_list.length > 1)">
|
||||||
|
<u-number-box :min="0" v-model="item.commodity_goods_info_list[0].quantity"
|
||||||
|
@change="(value) => handleQuantityChange(value, item)">
|
||||||
|
<view slot="minus" class="minus">
|
||||||
|
<u-icon name="minus" size="20"></u-icon>
|
||||||
|
</view>
|
||||||
|
<text slot="input" style="width: 50px; text-align: center" class="input">{{
|
||||||
|
item.commodity_goods_info_list[0].quantity
|
||||||
|
? item.commodity_goods_info_list[0].quantity
|
||||||
|
: 0
|
||||||
}}</text>
|
}}</text>
|
||||||
<view slot="plus" class="plus">
|
<view slot="plus" class="plus">
|
||||||
<u-icon name="plus" color="#FFFFFF" size="22" bold></u-icon>
|
<u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
|
||||||
</view>
|
</view>
|
||||||
</u-number-box>
|
</u-number-box>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
</view>
|
||||||
</div>
|
|
||||||
</div>
|
<view class="gg" @click="chooseGG(item)" v-if="
|
||||||
</div>
|
item.commodity_goods_info_list.length > 1 && !item.isShow
|
||||||
|
">
|
||||||
|
选择规格
|
||||||
|
<u-icon name="arrow-down" size="26rpx" color="#FF370B"></u-icon>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="gg" @click="chooseGG(item)" v-if="
|
||||||
|
item.commodity_goods_info_list.length > 1 && item.isShow
|
||||||
|
">
|
||||||
|
收起
|
||||||
|
<u-icon name="arrow-up" size="26rpx" color="#FF370B"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="GGList" v-if="item.isShow">
|
||||||
|
<view class="GGItem" v-for="ite in item.commodity_goods_info_list" :key="ite.id"
|
||||||
|
@click="goods(item)">
|
||||||
|
<view class="GGItem_Image">
|
||||||
|
<view class="tag tag-img" v-if="ite.is_same_day">当日达</view>
|
||||||
|
<image :src="handleImageUrl(ite.commodity_pic)" mode="aspectFill"></image>
|
||||||
|
</view>
|
||||||
|
<view class="GGItem_Con">
|
||||||
|
<view class="GGItem_Con_Tit">
|
||||||
|
<view class="tag tag-text" v-if="ite.is_same_day">当日达</view>
|
||||||
|
{{ ite.goods_name }}
|
||||||
|
</view>
|
||||||
|
<view class="GGItem_Con_Msg">
|
||||||
|
<view class="GGItem_Con_Msg_left">
|
||||||
|
<span>￥</span>{{ ite.sales_price }}
|
||||||
|
</view>
|
||||||
|
<view class="GGItem_Con_Msg_right">
|
||||||
|
<u-number-box v-model="ite.quantity" :min="0"
|
||||||
|
@change="(value) => handleQuantityChange(value, ite)">
|
||||||
|
<view slot="minus" class="minus">
|
||||||
|
<u-icon name="minus" size="20"></u-icon>
|
||||||
|
</view>
|
||||||
|
<text slot="input" style="width: 50px; text-align: center" class="input">{{
|
||||||
|
ite.quantity ?
|
||||||
|
ite.quantity : 0 }}</text>
|
||||||
|
<view slot="plus" class="plus">
|
||||||
|
<u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
|
||||||
|
</view>
|
||||||
|
</u-number-box>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@ -111,9 +154,9 @@
|
|||||||
<script>
|
<script>
|
||||||
import {
|
import {
|
||||||
apiArr
|
apiArr
|
||||||
} from '../../../api/doorToDoor';
|
} from '../../../api/shop';
|
||||||
import {
|
import {
|
||||||
picUrl,
|
picUrl as basePicUrl,
|
||||||
menuButtonInfo,
|
menuButtonInfo,
|
||||||
request,
|
request,
|
||||||
NavgateTo
|
NavgateTo
|
||||||
@ -122,82 +165,224 @@ export default {
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
flag: false,
|
flag: false,
|
||||||
value: 3,
|
value: 0,
|
||||||
isSearch: false,
|
isSearch: false,
|
||||||
|
isSearched: false,
|
||||||
|
searchQuery: '',
|
||||||
// 测试用
|
searchHistory: [],
|
||||||
// searchQuery: '',
|
searchGoodsLisat: [],
|
||||||
// results: [], // 搜索结果
|
goodsDetail: []
|
||||||
// showHistory: false, // 是否显示历史记录
|
|
||||||
// searchHistory: [] // 保存搜索历史
|
|
||||||
// 测试用
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
goCar() {
|
||||||
|
NavgateTo('/packages/shop/shopCar/index')
|
||||||
|
},
|
||||||
|
getShopCar() {
|
||||||
|
request(apiArr.getCar, "POST", {}).then((res) => {
|
||||||
|
this.value = res.total;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 获取购物车数据
|
||||||
|
getShopCarList() {
|
||||||
|
request(apiArr.getCar, "POST").then((res) => {
|
||||||
|
this.value = res.total;
|
||||||
|
// 合并当日达和普通商品数据
|
||||||
|
this.goodsDetail = [].concat(res.same_day_cart_list || [], res.normal_cart_list || [])
|
||||||
|
.flatMap(supplier => supplier.commodity_cart_and_goods_model || []);
|
||||||
|
});
|
||||||
|
},
|
||||||
search() {
|
search() {
|
||||||
|
if (this.searchQuery.trim()) {
|
||||||
|
// 保存搜索历史到storage
|
||||||
|
this.saveSearchHistory();
|
||||||
|
// 设置搜索状态为已搜索
|
||||||
|
this.isSearched = true;
|
||||||
|
// 隐藏搜索历史面板
|
||||||
|
this.isSearch = false;
|
||||||
|
const params = {
|
||||||
|
query: this.searchQuery,
|
||||||
|
user_id: uni.getStorageSync('userId')
|
||||||
|
}
|
||||||
|
request(apiArr.goodsSearch, "POST", params).then((res) => {
|
||||||
|
// 深拷贝接口数据，避免引用问题
|
||||||
|
const commodityList = JSON.parse(JSON.stringify(res.commodity_list));
|
||||||
|
commodityList.forEach((item) => {
|
||||||
|
// 初始化isShow为响应式属性
|
||||||
|
this.$set(item, 'isShow', false);
|
||||||
|
item.commodity_goods_info_list.forEach((param) => {
|
||||||
|
// 从购物车数据中查找对应商品的数量，否则设为0
|
||||||
|
const goods = this.goodsDetail.find(g => g.goods_id === param.id);
|
||||||
|
this.$set(param, 'quantity', goods ? goods.count : 0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.searchGoodsLisat = commodityList;
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
ipt1(e) {
|
ipt1(e) {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
},
|
},
|
||||||
iptFocus() {
|
iptFocus() {
|
||||||
this.isSearch = true
|
this.isSearch = true;
|
||||||
|
this.loadSearchHistory();
|
||||||
},
|
},
|
||||||
iptBlur() {
|
iptBlur() {
|
||||||
this.isSearch = false
|
if (this.searchQuery) {
|
||||||
|
this.search();
|
||||||
|
} else {
|
||||||
|
this.searchGoodsLisat = [];
|
||||||
|
this.isSearch = true
|
||||||
|
this.isSearched = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 保存搜索历史
|
||||||
|
saveSearchHistory() {
|
||||||
|
if (this.searchQuery && !this.searchHistory.includes(this.searchQuery)) {
|
||||||
|
// 添加到数组开头
|
||||||
|
this.searchHistory.unshift(this.searchQuery);
|
||||||
|
// 限制最多保存10条历史记录
|
||||||
|
if (this.searchHistory.length > 10) {
|
||||||
|
this.searchHistory.pop();
|
||||||
|
}
|
||||||
|
// 保存到storage
|
||||||
|
uni.setStorageSync('shopSearchHistory', this.searchHistory);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 加载搜索历史
|
||||||
|
loadSearchHistory() {
|
||||||
|
const history = uni.getStorageSync('shopSearchHistory') || [];
|
||||||
|
this.searchHistory = history;
|
||||||
|
},
|
||||||
|
// 选择历史记录进行搜索
|
||||||
|
selectHistory(item) {
|
||||||
|
this.searchQuery = item;
|
||||||
|
this.search();
|
||||||
|
this.isSearch = false;
|
||||||
|
},
|
||||||
|
// 清除搜索历史
|
||||||
|
deleteHistory() {
|
||||||
|
uni.showModal({
|
||||||
|
title: '提示',
|
||||||
|
content: '确定清除所有搜索历史吗？',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
this.searchHistory = [];
|
||||||
|
uni.removeStorageSync('shopSearchHistory');
|
||||||
|
uni.showToast({
|
||||||
|
title: '搜索历史已清除',
|
||||||
|
icon: 'none'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 商品详情页
|
||||||
|
goods(e) {
|
||||||
|
NavgateTo(`../goods/index?item=${JSON.stringify(e)}`);
|
||||||
|
},
|
||||||
|
// 选择商品规格
|
||||||
|
chooseGG(targetItems) {
|
||||||
|
// 遍历商品列表找到目标对象
|
||||||
|
const itemIndex = this.searchGoodsLisat.findIndex(item => item.id === targetItems.id);
|
||||||
|
if (itemIndex > -1) {
|
||||||
|
// 直接修改数据源中的对象，确保响应式
|
||||||
|
const currentItem = this.searchGoodsLisat[itemIndex];
|
||||||
|
this.$set(currentItem, 'isShow', !currentItem.isShow);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 处理商品数量变化
|
||||||
|
handleQuantityChange(val, item) {
|
||||||
|
// 先在前端直接更新数量，确保页面显示及时变化
|
||||||
|
// 注意：这里的val可能是直接的数值，也可能是包含value属性的对象
|
||||||
|
const quantity = typeof val === 'object' && val !== null && 'value' in val ? val.value : val;
|
||||||
|
|
||||||
|
// 对于有规格的主商品（绑定到items.commodity_goods_info_list[0].quantity）
|
||||||
|
if (item.commodity_goods_info_list && item.commodity_goods_info_list.length) {
|
||||||
|
this.goodsId = item.commodity_goods_info_list[0].id;
|
||||||
|
// 使用$set确保响应式更新
|
||||||
|
this.$set(item.commodity_goods_info_list[0], 'quantity', quantity);
|
||||||
|
}
|
||||||
|
// 对于规格列表中的商品（绑定到ite.quantity）
|
||||||
|
else {
|
||||||
|
this.goodsId = item.id;
|
||||||
|
// 使用$set确保响应式更新
|
||||||
|
this.$set(item, 'quantity', quantity);
|
||||||
|
}
|
||||||
|
|
||||||
|
const params = {
|
||||||
|
user_id: uni.getStorageSync('userId'),
|
||||||
|
goods_id_and_count: [
|
||||||
|
{
|
||||||
|
goods_id: this.goodsId,
|
||||||
|
count: quantity,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
request(apiArr.updateCar, 'POST', params).then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
// 更新购物车数据
|
||||||
|
this.getShopCarList();
|
||||||
|
|
||||||
|
// 延迟时间，确保goodsDetail已经更新
|
||||||
|
setTimeout(() => {
|
||||||
|
// 重新同步商品列表中的数量
|
||||||
|
this.syncGoodsQuantities();
|
||||||
|
}, 100);
|
||||||
|
|
||||||
|
uni.showToast({
|
||||||
|
title: '操作成功！',
|
||||||
|
success() { },
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 同步商品列表中的数量与购物车数据
|
||||||
|
syncGoodsQuantities() {
|
||||||
|
// 遍历所有商品，同步数量
|
||||||
|
this.searchGoodsLisat.forEach((item) => {
|
||||||
|
item.commodity_goods_info_list.forEach((param) => {
|
||||||
|
const goods = this.goodsDetail.find(g => g.goods_id === param.id);
|
||||||
|
if (goods) {
|
||||||
|
this.$set(param, 'quantity', goods.count);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 获取价格范围
|
||||||
|
getPriceRange(goodsList) {
|
||||||
|
if (!goodsList || goodsList.length === 0) return '￥0';
|
||||||
|
const prices = goodsList.map(item => Number(item.sales_price));
|
||||||
|
const minPrice = Math.min(...prices);
|
||||||
|
const maxPrice = Math.max(...prices);
|
||||||
|
return minPrice === maxPrice ? `￥${minPrice}` : `￥${minPrice} ~ ￥${maxPrice}`;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 处理图片路径
|
||||||
// 测试用
|
handleImageUrl(imagePath) {
|
||||||
// 处理搜索
|
return basePicUrl + imagePath;
|
||||||
// onSearch() {
|
}
|
||||||
// // 在这里根据searchQuery进行搜索，假设我们用一个假数据做演示
|
},
|
||||||
// const fakeData = ['苹果', '香蕉', '橙子', '葡萄', '草莓'];
|
watch: {
|
||||||
// this.results = fakeData.filter(item => item.includes(this.searchQuery));
|
searchQuery: {
|
||||||
// if(this.searchQuery) {
|
handler(newVal, oldVal) {
|
||||||
// this.showHistory = true;
|
if (!newVal) {
|
||||||
// } else {
|
this.searchGoodsLisat = [];
|
||||||
// this.showHistory = false
|
this.isSearch = true
|
||||||
// }
|
this.isSearched = false
|
||||||
// },
|
}
|
||||||
|
},
|
||||||
// // 点击历史记录进行搜索
|
deep: true
|
||||||
// selectHistory(item) {
|
}
|
||||||
// this.searchQuery = item;
|
|
||||||
// this.onSearch();
|
|
||||||
// this.showHistory = false;
|
|
||||||
// },
|
|
||||||
|
|
||||||
// // 保存搜索历史
|
|
||||||
// saveSearchHistory() {
|
|
||||||
// if(this.searchQuery && !this.searchHistory.includes(this.searchQuery)) {
|
|
||||||
// this.searchHistory.unshift(this.searchQuery); // 将新的搜索内容加到历史记录
|
|
||||||
// if(this.searchHistory.length > 5) {
|
|
||||||
// this.searchHistory.pop(); // 限制最多保存几条搜索历史
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// 测试用
|
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 测试用
|
|
||||||
// watch: {
|
|
||||||
// // 监听搜索框内容变化，保存历史
|
|
||||||
// searchQuery(newQuery) {
|
|
||||||
// if(newQuery !== '') {
|
|
||||||
// this.saveSearchHistory();
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
|
|
||||||
// 测试用
|
|
||||||
|
|
||||||
onLoad(options) {
|
onLoad(options) {
|
||||||
|
this.loadSearchHistory();
|
||||||
|
this.isSearch = false;
|
||||||
|
this.isSearched = false;
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
this.getShopCarList();
|
||||||
},
|
},
|
||||||
onReachBottom() {
|
onReachBottom() {
|
||||||
if (this.flag) {
|
if (this.flag) {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user