zh_order_food_xcx/pages/index/search-record.vue

<template>
	<view class="flex-common-css iPhone-bottom box-border-box bgc-f">
		<image class="order-bg" src="@/static/img/order-food/ss-bg.png" mode=""></image>
		<newNav textName="搜索商品" class="mb-20" titleColor='#333' leftIconColor='#333'></newNav>

		<view class="plr-24 box-border-box">
			<view class="s-input box-border-box bgc-f align-items-center flex-justify-space b-rad-200 z-3">
				<view class="align-items-center flex-1 mr-16">
					<image class="wh36 mr-16 flex-shrink0" src="/static/img/order-food/ss-icon.png" mode=""></image>
					<input class="input-box fs-32" placeholder-class="fc-9" v-model="search" type="text"
						placeholder="请搜索商品" @input="clearInput">
				</view>
				<view class="align-items-center">
					<image v-if="showClearIcon" @click="clearIcon" class="qk-icon mr-24"
						src="@/static/img/order-food/qk-icon.png" mode="">
					</image>
					<view class="input-buttom fs-28 fc-f fw-500 b-rad-200 text-align-center" @click="toList()">搜索</view>
				</view>
			</view>
		</view>

		<view class="scroll-view-css bgc-f seacrh-info box-border-box p-32" v-if="goodsList.length<=0">
			<view class="flex-justify-space mb-32">
				<view class="fs-32 fw-600 fc-3">搜索历史</view>
				<view class="align-items-center" v-if="list.length > 0">
					<view @click="isOpen=!isOpen" class="">{{!isOpen?'收起':'展开'}}</view>
					<view @click="isOpen=!isOpen" :class="!isOpen?'down':'up'">
						<uni-icons type="right" size="14" color="#999"></uni-icons>
					</view>
					<view class="view-x"></view>
					<uni-icons @click="delList()" type="trash" size="18" color="#999"></uni-icons>
				</view>
			</view>
			<view id='' :class="isOpen?'hide-h':''" class="flex-wrap-wrap mb-50 search-history" v-if="list.length > 0">
				<view class="fs-28 list-item text-overflow-ellipsis-one" @click="toList(item)" v-for="(item,i) in list"
					:key="i">{{item}}</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll-view-css bgc-F5F4F9 p-32 box-border-box" v-else
			@scrolltolower="scrolltolower">
			<!-- <view class="scroll-view-css bgc-F5F4F9 p-32 box-border-box" v-else> -->
			<view class="menu-list flex-justify-space bgc-f p-24 box-border-box b-rad-20 mb-16"
				v-for="(info,k) in goodsList" :key="k" :id="'goods_id'+ info.goods_id">
				<image class="flex-shrink0 goods_img mr-20" :src="info.goods_image" mode="scaleToFill"></image>
				<view class="menu-list-right flex-direction flex-justify-space">
					<view class="mb-8">
						<view class="mb-4 goods-name text-overflow-ellipsis fs-32 fw-600">
							{{info.goods_name}}
						</view>
						<view class="text-overflow-ellipsis-one fw-400 fc-9 fs-24 mb-2 goods-name"
							v-if="info.spec_type == 1">
							{{info.goods_desc?info.goods_desc:''}}
						</view>
					</view>
					<view class="flex-justify-space align-items-flex-end">
						<view class="">
							<span class="fs-24 fw-400 fc-3">￥</span>
							<span class="fs-36 fw-b fc-3">{{info.seckill_money>0?info.seckill_money:info.price}}</span>
							<span class="fs-24 fc-9">/份起</span>
						</view>
						<view class="display-flex align-items-center" v-if="info.spec_type == 1">
							<image v-show="info.num > 0" class="wh-44" @click="addred(1,info)"
								src="@/static/img/order-food/reduce-img.png" mode=""></image>
							<view v-show="info.num > 0" class="right-only-right-2 text-align-center fs-28 fw-400">
								{{info.num}}
							</view>
							<image class="wh-44" src="@/static/img/order-food/add-img.png" @click="addred(2,info)"
								mode=""></image>
						</view>
						<view v-else class="right-only-right text-align-center b-rad-200" @click="addred(3,info)">
							<view class="fw-500 fs-28 fc-f">
								选规格
							</view>
							<view class="selectedNum" v-if="info.num>0">
								{{info.num}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- </view> -->
		</scroll-view>

		<view v-if="goodsList.length>0" class="shop-buttom-money p-24 box-border-box bgc-F5F4F9" @click="openBuyCrad()">
			<view
				class="shop-buttom-money-1 bgc-f flex-justify-space align-items-center pl-24 box-border-box pr-8 b-rad-200">
				<view class="align-items-center">
					<image class="gwc-img mr-36" src="@/static/img/order-food/gwc-img.png" mode="scaleToFill"></image>
					<view class="shop-buttom-num bgc-FE6B2C fs-24 fc-f text-align-center">{{cartData.total_num || 0}}
					</view>
					<view class="align-items-baseline">
						<view class="fw-600 fs-28 fc-3 mr-4">￥</view>
						<view class="fw-600 fs-48 fc-3">{{cartData.total_price || 0}}</view>
					</view>
				</view>

				<view class="shop-buttom-money-2 text-align-center fc-f fs-32 fw-600 b-rad-200"
					:class="cartData.total_num>0?'':'opacity-4'" @click.stop="toConfirmOrder()">去结算
				</view>
			</view>
		</view>

		<uni-popup ref="popupBuy" type="bottom" background-color="transparent" borderRadius='20px 20rpx 0 0'>
			<view class="buy-card flex-index-css">
				<view class="buy-card-top box-border-box plr-32 flex-justify-space align-items-center b-rad-20-20-0-0">
					<view class="">
						<span class="fs-32 fc-3 mr-12">已选商品</span>
					</view>
					<view class="fs-28 fw-400 fc-9 align-items-center" @click.stop="setShopIngDel">
						<view class="">
							<uni-icons type="trash" size="18" color="#999"></uni-icons>
						</view>
						<view class="fs-28 fw-400 fc-9">清空</view>
					</view>
				</view>
				<view class="scroll-view-css bgc-ECECEC box-border-box car-scroll-box">
					<view class="buy-card-item bgc-f b-rad-20 display-flex p-20 box-border-box"
						v-for="(goods,i) in cartData.goods_list" :key="i">
						<image class="goods_img" :src="goods.goods_image" mode="scaleToFill"></image>
						<view class="flex-1 flex-direction flex-justify-space">
							<view class="">
								<view class="w-514 text-overflow-ellipsis-one fs-34 fw-600 mb-8">
									{{goods.goods_name}}
								</view>
								<view class="fc-6">
									{{goods.goods_attr}}
								</view>
							</view>
							<view class="flex-justify-space">
								<view class="">
									<span class="fs-24 fc-FB3D03 fw-400">￥</span>
									<span class="fs-40 fc-FB3D03 fw-b">{{goods.price}}</span>
								</view>
								<view class="display-flex align-items-center">
									<image class="wh-44" @click.stop="setShoppingSave(goods,2)"
										src="@/static/img/order-food/reduce-img.png" mode="">
									</image>
									<view class="right-only-right-2 text-align-center fs-28 fw-400">
										{{goods.goods_number}}
									</view>
									<image class="wh-44" src="/static/img/order-food/add-img.png"
										@click.stop="setShoppingSave(goods,1)" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<en-blank navBackgroundColor='#ECECEC' v-if="cartData.goods_list.length<=0"
						message="快去选购商品吧！~"></en-blank>
				</view>
				<view class="pop-shop-buttom-money box-border-box" @click="openBuyCrad()">
					<view
						class="shop-buttom-money-1 bgc-f flex-justify-space align-items-center pl-24 box-border-box pr-8 b-rad-200">
						<view class="align-items-center">
							<image class="gwc-img mr-36" src="@/static/img/order-food/gwc-img.png" mode="scaleToFill">
							</image>
							<view class="shop-buttom-num bgc-FE6B2C fs-24 fc-f text-align-center">{{cartData.total_num}}
							</view>
							<view class="align-items-baseline">
								<view class="fw-600 fs-28 fc-3 mr-4">￥</view>
								<view class="fw-600 fs-48 fc-3">{{cartData.total_price}}</view>
							</view>
						</view>

						<view class="shop-buttom-money-2 text-align-center fc-f fs-32 fw-600 b-rad-200"
							:class="cartData.total_num>0?'':'opacity-4'" @click.stop="toConfirmOrder()">去结算
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import cartStore from '@/utils/cartStore.js';
	import tools from "@/service/tools";
	import {
		getSearch,
		getSearchList,
		delSearch
	} from '@/api/goods.js';
	export default {
		data() {
			return {
				search: '',
				isOpen: false,
				showClearIcon: false,
				list: [],
				goodsList: [],
				historyType: false,
				total: '',
				page: 1,
				cartData: { // 添加购物车数据
					total_price: 0,
					total_num: 0,
					goods_list: []
				}
			}
		},
		onLoad() {
			cartStore.setShopId();
			this.getList()
		},
		onShow() {
			this.getCartData();
		},
		mounted() {},
		methods: {
			scrolltolower() {
				if (this.goodsList.length < this.total) {
					this.page += 1;
					this.getSearch(this.search);
				}
			},
			openBuyCrad() {
				this.$refs.popupBuy.open()
			},
			getCartData() {
				// 获取购物车数据
				const shopCart = cartStore.getShopCart(this.shop_id);
				if (shopCart) {
					this.cartData = {
						total_price: shopCart.total_price || 0,
						total_num: shopCart.total_num || 0,
						goods_list: shopCart.goods_list || [],
						pack_price: shopCart.pack_price || 0,
						total_goods_money: shopCart.total_goods_money || 0
					};

					// 更新商品列表中的数量显示
					this.updateGoodsNumFromCart();
				}
			},
			// 更新商品列表中的数量显示
			updateGoodsNumFromCart() {
				if (!this.goodsList.length) return;

				const shopCart = cartStore.getShopCart(this.shop_id);
				if (!shopCart) return;

				// 创建商品数量映射
				const goodsQuantityMap = {};
				shopCart.goods_list.forEach(item => {
					if (!goodsQuantityMap[item.goods_id]) {
						goodsQuantityMap[item.goods_id] = 0;
					}
					goodsQuantityMap[item.goods_id] += item.goods_number;
				});

				// 更新商品列表数量
				this.goodsList.forEach(goods => {
					goods.num = goodsQuantityMap[goods.goods_id] || 0;
				});
			},
			toList(name) {
				let search = '';
				if (name) {
					search = name;
					this.search = name
				} else {
					search = this.search;
				}
				this.page = 1
				this.goodsList = []
				this.getSearch(search)
			},
			getSearch(search) {
				// 搜索商品列表
				getSearch({
					search: search,
					page: this.page
				}).then((res) => {
					if (res.code * 1 === 1) {
						const newGoods = res.data.items || [];
						// 为每个商品添加购物车数量
						newGoods.forEach(goods => {
							goods.num = 0; // 初始化为0
							goods.pack_price = parseFloat(goods.pack_price || 0);
						});
						this.total = res.data.total
						this.goodsList = [...this.goodsList, ...res.data.items]
						// 更新购物车数量显示
						this.updateGoodsNumFromCart();
					}
				})
			},
			addred(type, item) {
				if (type === 1) {
					// 减
					if (item.num <= 0) return;

					item.num--;
					if (item.num <= 0) {
						// 从购物车移除
						cartStore.removeFromCart(item.goods_id, item.goods_spec || []);
					} else {
						// 更新数量
						cartStore.updateQuantity(item.goods_id, item.goods_spec || [], item.num);
					}

				} else if (type === 2) {
					// 加
					item.num++;

					// 判断是否已存在购物车
					const currentQty = cartStore.getGoodsQuantity(item.goods_id, item.goods_spec || []);
					if (currentQty <= 0) {
						// 新商品，添加到购物车
						cartStore.addToCart(item, item.goods_spec || [], 1);
					} else {
						// 已存在，更新数量
						cartStore.updateQuantity(item.goods_id, item.goods_spec || [], item.num);
					}

				} else if (type === 3) {
					// 选规格
					uni.navigateTo({
						url: `/pages-takeout/new-specs-info?goods_id=${item.goods_id}&category_id=${item.category_id}`
					})
				}
				// 更新购物车数据
				this.getCartData();
			},

			setShoppingSave(item, type) {
				if (type === 1) {
					// 加
					item.goods_number = item.goods_number + 1
				} else {
					// 减
					item.goods_number = item.goods_number - 1
				}

				if (item.goods_number <= 0) {
					// 数量为0，移除商品
					cartStore.removeFromCart(item.goods_id, item.goods_spec || []);
				} else {
					// 更新商品数量
					cartStore.updateQuantity(
						item.goods_id,
						item.goods_spec || [],
						item.goods_number
					);
				}
				// 更新页面数据
				this.getShopIngList();
			},
			getShopIngList() {
				// 获取购物车列表
				const shopCart = cartStore.getShopCart(this.shop_id);
				if (shopCart) {
					this.cartData = {
						...this.cartData,
						total_price: shopCart.total_price,
						total_num: shopCart.total_num,
						goods_list: shopCart.goods_list
					};
					// 同步更新商品列表中的数量
					this.updateGoodsNumFromCart();
				}
			},
			clearIcon() {
				this.search = '';
				this.showClearIcon = false;
			},
			clearInput(event) {
				this.search = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			getList() {
				// 获取搜索历史内容
				getSearchList().then((res) => {
					if (res.code === 1) {
						this.list = res.data.my_search;
					}
				})
			},
			delList() {
				delSearch().then((res) => {
					if (res.code === 1) {
						tools.success('删除成功');
						this.list = [];
					}
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.buy-card-item {
		width: 100%;
		margin-bottom: 32rpx;
	}

	.right-only-right-2 {
		min-width: 50rpx;
	}

	.pop-shop-buttom-money {
		width: 100%;
		// height: 140rpx;
		background: #ECECEC;
		padding-left: 24rpx;
		padding-right: 24rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 12rpx);
		padding-top: 22rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 5;
	}

	.goods_img {
		width: 152rpx;
		height: 152rpx;
		border-radius: 12rpx;
		margin-right: 20rpx;
	}

	.car-scroll-box {
		padding: 12rpx 24rpx calc(env(safe-area-inset-bottom) + 48rpx);
	}

	.buy-card {
		height: 60vh;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.buy-card-top {
		width: 100%;
		height: 92rpx;
		background: #FCF5DB;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.shop-buttom-money-1 {
		width: 100%;
		height: 96rpx;
		position: relative;
	}

	.qk-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.shop-buttom-money {
		width: 100%;
		// height: 140rpx;
	}

	.shop-buttom-money-1 {
		width: 100%;
		height: 96rpx;
		position: relative;
	}

	.shop-buttom-money-2 {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient(270deg, #FF3333 0%, #FE6122 100%);
	}

	.gwc-img {
		width: 88rpx;
		height: 88rpx;
	}

	.shop-buttom-num {
		width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		border-radius: 50%;
		position: absolute;
		top: 0rpx;
		left: 85rpx;
		border: 1rpx solid #FFFFFF;
	}

	.z-3 {
		position: relative;
		z-index: 3;
	}

	.order-bg {
		width: 100%;
		height: 17vh;
		position: fixed;
		left: 0;
		top: 0;
	}

	.hide-h {
		height: 232rpx !important;
		overflow: hidden !important;
	}

	.down {
		transform: rotate(-90deg);
		transition: all 0.5s;
	}

	.up {
		transform: rotate(90deg);
		transition: all 0.5s;
	}

	.view-x {
		width: 2rpx;
		height: 20rpx;
		background-color: #eee;
		margin: 0 24rpx;
	}

	.find-item {
		width: 48%;
		text-align: left;
	}

	.list-item {
		max-height: 688rpx;
		min-width: 10rpx;
		height: 56rpx;
		line-height: 56rpx;
		background: #F7F8FC;
		border-radius: 200rpx;
		margin: 0 8rpx 32rpx 0;
		box-sizing: border-box;
		padding: 0 24rpx;
	}

	.seacrh-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 376rpx;
		filter: blur(80rpx);
		background-image: linear-gradient(to right, #C9F7FC, #F9F6E0, #F6F5F3);
		z-index: -1;
	}

	.wh36 {
		width: 36rpx;
		height: 36rpx;
	}

	.input-box {
		width: 100%;
	}

	.input-buttom {
		width: 120rpx;
		height: 60rpx;
		background: linear-gradient(270deg, #FF3333 0%, #FE6122 100%);
		line-height: 60rpx;
	}

	.s-input {
		width: 100%;
		height: 72rpx;
		padding: 6rpx 6rpx 6rpx 24rpx;
	}

	.seacrh-info {
		margin-top: 20rpx;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
	}

	.seacrh-record-index {
		position: relative;
	}

	.wh-44 {
		width: 44rpx;
		height: 44rpx;
	}

	.menu-list {
		width: 100%;

		.goods_img {
			width: 168rpx;
			height: 168rpx;
			border-radius: 12rpx;
		}
	}

	.menu-list-right {
		flex: 1;
	}

	.right-only-right-red {
		width: 44rpx;
		height: 44rpx;
		line-height: 40rpx;
		border-radius: 12rpx;
		border: 1rpx solid #41ABF5;
		color: #41ABF5;
	}

	.right-only-right-add {
		width: 44rpx;
		height: 44rpx;
		line-height: 40rpx;
		background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
		border-radius: 12rpx;
	}

	.right-only-right {
		width: 116rpx;
		height: 44rpx;
		background: linear-gradient(270deg, #FF3333 0%, #FE6122 100%);
		line-height: 44rpx;
		position: relative;
	}

	.selectedNum {
		position: absolute;
		right: -10rpx;
		top: -22rpx;
		font-size: 24rpx;
		color: #fff;
		width: 32rpx;
		height: 32rpx;
		line-height: 32rpx;
		background: #FE6B2C;
		border-radius: 50%;
		border: 1rpx solid #FFFFFF;
	}
</style>