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 && historyType">
					<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>

		<view class="scroll-view-css bgc-F5F4F9 p-32 box-border-box" v-else>
			<view class="" v-for="(item,i) in goodsList" :key="i">
				<view class="menu-list flex-justify-space bgc-f p-24 box-border-box b-rad-20 mb-16" v-for="(info,k) in item.list" :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>
		</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>
	</view>
</template>

<script>
	import tools from "@/service/tools";
	import {
		getSearchList,
		delSearch
	} from '@/api/goods.js';
	export default {
		data() {
			return {
				search: '',
				isOpen: false,
				showClearIcon: false,
				list: [],
				goodsList: [{
					type: 0,
					name: '测试1',
					list: [{
						goods_id: 1,
						goods_name: '测试商品1-1',
						price: '10',
						spec_type: 1,
						goods_number: 0,
						goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
					}, {
						goods_id: 2,
						goods_name: '测试商品1-2',
						price: '10',
						goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
					}, {
						goods_id: 3,
						goods_name: '测试商品1-3',
						price: '10',
						goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
					}]
				}, {
					type: 1,
					name: '测试2',
					list: [{
						goods_id: 4,
						goods_name: '测试商品2-1',
						price: '10',
						goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
					}, {
						goods_id: 5,
						goods_name: '测试商品2-2',
						price: '10',
						goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
					}, {
						goods_id: 6,
						goods_name: '测试商品2-3',
						price: '10',
						goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
					}]
				}],
				historyType: false
			}
		},
		onShow() {},
		mounted() {},
		methods: {
			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;
				}
			},
			history() {
				const query = uni.createSelectorQuery().in(this)
				query
					.select('.search-history')
					.boundingClientRect(data => {
						console.log(data.height)
					})
					.exec();
			},
			getList() {
				getSearchList().then((res) => {
					if (res.code === 1) {
						this.list = res.data.my_search;
					}
				})
			},
			toList(name) {
				let search = '';
				if (name) {
					search = name;
				} else {
					search = this.search;
				}
				if (!search) {
					return tools.error('请输入搜索内容')
				}
				uni.navigateTo({
					url: "pages/index/search-list?search=" + search
				})
			},
			delList() {
				delSearch().then((res) => {
					if (res.code === 1) {
						tools.success('删除成功');
						this.list = [];
					}
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.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 {
				width: 116rpx;
				height: 44rpx;
				background: linear-gradient( 270deg, #FF3333 0%, #FE6122 100%);
				line-height: 44rpx;
				position: relative;

				.selectedNum {
					position: absolute;
					right: 2rpx;
					top: -22rpx;
					font-size: 24rpx;
					color: #fff;
					width: 32rpx;
					height: 32rpx;
					line-height: 32rpx;
					background: #FB3D03;
					border-radius: 50%;
				}
			}

			.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-2 {
				min-width: 50rpx;
			}
		}
	}
</style>