cosmetics_shop_wxapp/commodityPages/search/index.vue

<template>
	<view class="search">
		<!-- header -->
		<cu-custom isBack bgColor="bg-gradual-blue"><view slot="content">搜索页</view></cu-custom>
		  <view class="cu-bar search bg-white">
		    <view class="search-form round">
		      <text class="cuIcon-search"></text>
		      <input :value="value" @input="e=>value=e.detail.value" type="text" placeholder="请输入商品名字" confirm-type="search"></input>
		    </view>
		    <view class="action">
		      <button @click="search" class="cu-btn bg-green shadow-blur round">搜索</button>
		    </view>
		  </view>
		<cu-scrollView @refresherpulling="refresherpulling" @scroll="scroll" :height="height"  >
 		 <view class=" flex section">
			 <view class="item bg-white padding radius" @click="handler" v-for="(item, index) in ListValue" :key="index"  >
				 <!-- 图片 -->
				 <image style="width:calc(50vw - 60upx);height:calc(50vw - 60upx);" lazy-load="true" class="image radius margin-right-sm" :src="item.show_image_url | lazyImage" mode="aspectFit"></image>
				 <view class="content">
				 	<view style="text-align: justify;" class=" text-black cut">{{ item.name }}</view>
				 	<view class="text-gray flex margin-bottom-xs ">已售{{ item.sale_count }}件</view>
				 	<view class="flex justify-between align-center">
				 		<view>
							<view v-if="item.type==1" class="text-red">
								￥
								<cu-price :value="item.price" size="32" />
							</view>
							<view v-else>
								{{item.point_price}}积分
							</view>
							<view class="bg-orange light text-xs padding-lr-xs">
								<text class="cuIcon-vip lg">会员价</text>
								<text class="text-price margin-left-xs">{{ item.vip_price }}</text>
							</view>
						</view>
				 		<view @click.stop="custom(item)" class="cart"><text class="cuIcon-cart text-xl"></text></view>
				 	</view>
				 </view>
		     </view>
		 </view>	
		 <!-- 状态管理 -->
		 <view v-if="value || ListValue.length>0" class="cu-load" :class="{ loading: currentPage <= totalPage, over: currentPage > totalPage }"></view>
		</cu-scrollView>
		<!-- 工具 -->
		<cu-goodA :value="item" @addcart="addcart" @buyclicked="buyclicked" :number="number" @changeNum="val => (number = val)" :show.sync="show" />
	</view>
</template>

<script>
	import {CustomBarHeight} from "@/common/device/index.js";
	import {debounce} from"@/common/debounceThrottle/index.js";
	import { mapState, mapActions } from 'vuex';
	export default{
		data(){
			return {
				show:false,
				value:"",
				item:{},
				number:1,
			}
		},
		async onShow(){
			await this.reset();
		},
		computed: {
			...mapState(['bind']),
			...mapState('requestList', ['ListValue', 'currentPage', 'totalPage']),
			height() {
				return `calc(100vh - 100rpx - ${CustomBarHeight}px)`;
			}
		},
		methods:{
			...mapActions('requestList', ['reset', 'requestFunc']),
			// 下拉刷新
			async refresherpulling() {
				await this.reset();
				await this.requestFunc({ method: 'get', url: `/customer/commodity/list/`, data: { name:this.value, limit: 10 } });
			},
			// 上拉加载
			async scroll() {
				await this.requestFunc({ method: 'get', url: `/customer/commodity/list/`, data: { name:this.value,limit: 10 } });
			},
			search(){
				debounce(this.request)();
			},
			async request(){
				await this.reset();
				await this.requestFunc({ method: 'get', url: `/customer/commodity/list/`, data: { name:this.value, limit: 10 } });
			},
			// 添加购物车
			async addcart() {
				var result = await api.shoppingCart({ quantity: this.number, commodity_details: this.value.id });
				if (result.code == 0) {
					this.number = 1;
					this.value = {};
					this.show = false;
					uni.showToast({
						title: '添加成功',
						icon: 'success'
					});
				}
			},
				async buyclicked() {},
				custom(item) {
					if (this.bind != 1) return false;
					this.value = { id: item.id, price: item.price, img: item.show_image_url };
					this.show = true;
				},
		},
		watch:{
			value:function(newVal,oldVal){
				this.search()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search{
		.section{
			.item{
				width:calc(50vw - 30upx);
				.cut{
					text-align: justify;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
			.item:nth-child(2n+1){
			   margin:5upx 10upx 5upx 20upx;
			}
			.item:nth-child(2n){
			   margin:5upx 20upx 5upx 10upx;
			}
		}
		
	}
</style>