编写易购模块的搜索页面
This commit is contained in:
赵毅
parent
47f1eaaa09
commit
dc5e328b3c
@ -18,4 +18,6 @@ export const apiArr = {
|
||||
getComment: '/api/v2/wechat/commodity/review/list', // 获取评论
|
||||
|
||||
mergePreorder: '/api/v2/wechat/commodity/order/preorder', // 商品订单合并预下单
|
||||
|
||||
goodsSearch: '/api/v2/wechat/commodity/search', // 商品搜索
|
||||
}
|
||||
@ -69,6 +69,12 @@ image {
|
||||
margin-top: 48rpx;
|
||||
}
|
||||
|
||||
.hisTop{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hisTit {
|
||||
font-size: 33rpx;
|
||||
color: #222222;
|
||||
@ -170,8 +176,8 @@ image {
|
||||
|
||||
.searchItem_right {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tag {
|
||||
background-color: #ff7d00;
|
||||
color: white;
|
||||
@ -182,24 +188,29 @@ image {
|
||||
|
||||
.tag-img {
|
||||
position: absolute;
|
||||
/* top: 1; */
|
||||
bottom: 1;
|
||||
left: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tag-name {
|
||||
background-color: #ff7d00;
|
||||
color: white;
|
||||
font-size: 22rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 20rpx 0 20rpx 20rpx;
|
||||
}
|
||||
|
||||
.tag-text {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.tag-name {
|
||||
background-color: #ff7d00;
|
||||
color: white;
|
||||
font-size: 22rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 20rpx 0 20rpx 20rpx;
|
||||
}
|
||||
|
||||
.searchItem_right_tit {
|
||||
font-size: 30rpx;
|
||||
color: #000000;
|
||||
font-weight: 600;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -209,6 +220,171 @@ image {
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -250,24 +426,24 @@ image {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 测试用 */
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
/* border: 1px solid #ccc; */
|
||||
}
|
||||
|
||||
.search-results {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
padding: 10px;
|
||||
/* border-bottom: 1px solid #ddd; */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 测试用 */
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
/* border: 1px solid #ccc; */
|
||||
}
|
||||
|
||||
.search-results {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
padding: 10px;
|
||||
/* border-bottom: 1px solid #ddd; */
|
||||
}
|
||||
/* 测试用 */
|
||||
@ -1,109 +1,152 @@
|
||||
<template>
|
||||
<view class="merchantList">
|
||||
<div class="searchBox">
|
||||
<div class="searchBox_left">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"></image>
|
||||
<u--input @focus="iptFocus" @blur="iptBlur" placeholder="搜索商品" border="surround" clearable></u--input>
|
||||
|
||||
<!-- 测试用 -->
|
||||
<!-- <input type="text" v-model="searchQuery" placeholder="请输入搜索内容" @input="onSearch" @focus="showHistory = true" class="search-input" />
|
||||
<view v-if="results.length" class="search-results">
|
||||
<view class="result-item">
|
||||
{{item}}
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- 测试用 -->
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="searchBox_right">
|
||||
<div class="cars">
|
||||
<view class="searchBox">
|
||||
<view class="searchBox_left">
|
||||
<image
|
||||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
||||
@click="search">
|
||||
</image>
|
||||
<u--input v-model="searchQuery" @focus="iptFocus" @blur="iptBlur" @confirm="search" placeholder="搜索商品"
|
||||
border="surround" clearable></u--input>
|
||||
</view>
|
||||
<view class="searchBox_right">
|
||||
<view class="cars" @click="goCar">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_car.png"
|
||||
mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 搜索联系 -->
|
||||
<div class="searchMore" v-if="isSearch">
|
||||
<div class="searchMoreItem">猪肉肠</div>
|
||||
<div class="searchMoreItem">猪肉肠</div>
|
||||
<div class="searchMoreItem">猪肉肠</div>
|
||||
</div>
|
||||
<!-- <view class="searchMore" v-if="!isSearched && searchHistory.length > 0">
|
||||
<view class="searchMoreItem">猪肉肠</view>
|
||||
<view class="searchMoreItem">猪肉肠</view>
|
||||
<view class="searchMoreItem">猪肉肠</view>
|
||||
</view> -->
|
||||
|
||||
<!-- 搜索历史 -->
|
||||
<div class="his" v-if="isSearch">
|
||||
<div class="hisTit">搜索历史</div>
|
||||
<div class="HisList">
|
||||
<div class="HisItem">羊肉</div>
|
||||
<div class="HisItem">火锅底料</div>
|
||||
<div class="HisItem">蒜蓉辣酱</div>
|
||||
<div class="HisItem">蒜蓉辣酱</div>
|
||||
<div class="HisItem">蒜蓉辣酱</div>
|
||||
<div class="HisItem">蒜蓉辣酱</div>
|
||||
</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 class="his" v-if="!isSearched && searchHistory.length > 0">
|
||||
<view class="hisTop">
|
||||
<view class="hisTit">搜索历史</view>
|
||||
<u-icon name="trash" color="#999999" size="40" class="history-trash" @click="deleteHistory"></u-icon>
|
||||
</view>
|
||||
<view class="HisList">
|
||||
<view v-for="(item, index) in searchHistory" :key="index" class="HisItem" @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>
|
||||
对不起没有找到您想要的商品
|
||||
</div>
|
||||
</view>
|
||||
|
||||
<div class="searchList">
|
||||
<div class="searchSubTit">
|
||||
<div class="searchSubItem">综合</div>
|
||||
<div class="searchSubItem">
|
||||
<view class="searchList" v-if="isSearched && searchGoodsLisat.length > 0">
|
||||
<!-- <view class="searchSubTit">
|
||||
<view class="searchSubItem">综合</view>
|
||||
<view class="searchSubItem">
|
||||
价格
|
||||
<div class="iconBox">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<view class="iconBox">
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<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 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>
|
||||
<view slot="plus" class="plus">
|
||||
<u-icon name="plus" color="#FFFFFF" size="20"></u-icon>
|
||||
</view>
|
||||
</u-number-box>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="gg" @click="chooseGG(item)" v-if="
|
||||
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>
|
||||
<text slot="input" style="width: 80rpx;text-align: center;" class="input">{{ value
|
||||
}}</text>
|
||||
<view slot="plus" class="plus">
|
||||
<u-icon name="plus" color="#FFFFFF" size="22" bold></u-icon>
|
||||
<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>
|
||||
</u-number-box>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
@ -111,9 +154,9 @@
|
||||
<script>
|
||||
import {
|
||||
apiArr
|
||||
} from '../../../api/doorToDoor';
|
||||
} from '../../../api/shop';
|
||||
import {
|
||||
picUrl,
|
||||
picUrl as basePicUrl,
|
||||
menuButtonInfo,
|
||||
request,
|
||||
NavgateTo
|
||||
@ -122,82 +165,224 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
flag: false,
|
||||
value: 3,
|
||||
isSearch: false,
|
||||
|
||||
|
||||
// 测试用
|
||||
// searchQuery: '',
|
||||
// results: [], // 搜索结果
|
||||
// showHistory: false, // 是否显示历史记录
|
||||
// searchHistory: [] // 保存搜索历史
|
||||
// 测试用
|
||||
value: 0,
|
||||
isSearch: false,
|
||||
isSearched: false,
|
||||
searchQuery: '',
|
||||
searchHistory: [],
|
||||
searchGoodsLisat: [],
|
||||
goodsDetail: []
|
||||
}
|
||||
},
|
||||
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() {
|
||||
|
||||
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) {
|
||||
console.log(e);
|
||||
},
|
||||
iptFocus() {
|
||||
this.isSearch = true
|
||||
this.isSearch = true;
|
||||
this.loadSearchHistory();
|
||||
},
|
||||
iptBlur() {
|
||||
this.isSearch = false
|
||||
},
|
||||
|
||||
|
||||
// 测试用
|
||||
// 处理搜索
|
||||
// onSearch() {
|
||||
// // 在这里根据searchQuery进行搜索，假设我们用一个假数据做演示
|
||||
// const fakeData = ['苹果', '香蕉', '橙子', '葡萄', '草莓'];
|
||||
// this.results = fakeData.filter(item => item.includes(this.searchQuery));
|
||||
// if(this.searchQuery) {
|
||||
// this.showHistory = true;
|
||||
// } else {
|
||||
// this.showHistory = false
|
||||
// }
|
||||
// },
|
||||
|
||||
// // 点击历史记录进行搜索
|
||||
// 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) {
|
||||
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;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
searchQuery: {
|
||||
handler(newVal, oldVal) {
|
||||
if (!newVal) {
|
||||
this.searchGoodsLisat = [];
|
||||
this.isSearch = true
|
||||
this.isSearched = false
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
this.loadSearchHistory();
|
||||
this.isSearch = false;
|
||||
this.isSearched = false;
|
||||
},
|
||||
onShow() {
|
||||
this.getShopCarList();
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.flag) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user