wardrobe/pages/shopsoso/index.vue

<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }" :class="[$tm.vx.state().tmVuetify.black ? 'black' : ' ']">
		<tm-menubars title="" :shadow="0" :showback="false"></tm-menubars>
		<view class="C1b1b1b pb-10">
			<view class="sousuo">
				<tm-pickersCity class="dingwei fl" btn-color="bg-gradient-blue-accent" @confirm="okCity" :default-value="addr">
					<view>
						<text class="text-size-n">{{addr[1]}}</text>
						<tm-icons :size="24" color="white" name="icon-angle-down"></tm-icons>
					</view>
				</tm-pickersCity>
				<view>
					<tm-search @confirm="sosoFun" class="fl" v-model="soso" color="white" confirm-text=""></tm-search>
					<text class="quxiao fr" @click="goindex()">取消</text>
				</view>
			  <view style="clear: both;"></view>
			  <view v-if="sosotype==1">
			  	<text class="text-size-m fl mt-30">搜索记录</text>
			  	<view class="fr mt-30 qingchu" @click="qingkong" v-if="libiaoList.length !=0">
			  		<text class="text-size-s fl">清空记录</text>
			  		<tm-badges :offset="[0,-5]" icon="icon-times"></tm-badges>
			  	</view>
			  </view>
			  <view v-if="sosotype==2">
			  	<tm-dropDownMenu @change="change" :type="typeclick" un-color="white" :list="list2"></tm-dropDownMenu>
			  </view>
			  <view style="clear: both;"></view>
			</view>	
		</view>
		<!-- 列表 -->
		<tm-grouplist class="liebiao mt-40" v-if="sosotype==1 && libiaoList.length !=0">
			<tm-listitem v-for="item in libiaoList" @click="sousuo(item.name)" :title="item.name" left-icon="" show-left-icon :show-right-icon="false">
			</tm-listitem>
		</tm-grouplist>
		<tm-empty v-if="sosotype==1 && libiaoList==undefined" label="暂无数据" color="white" icon="icon-paperplane-fill"></tm-empty>
		<div class="zhuti"  v-if="sosotype==2">
			<tm-sheet class="kuang" style="padding-bottom: 30px !important;"  v-if="listdata.length!=0">
				<view style="width: 94%;margin:0 auto;" class="remen">
					<view v-for="(item,index) in listdata"  class="round-5 contone black mt-20" :class="index%2==0?'fl':'fr'" @click="goDetail(item.category_id)">
						<image class="logo" :src="item.image" mode="widthFix"></image>
						<view class="pa-15 text-size-s">
							<view class="text-overflow-2">
								<text class="text-size-lg">{{item.goods_name}}</text>
								<view class="text-gray mt-6">销量：{{item.stock_num}}</view>
							</view>
							<view class="mt-2 flex-between flex-center">
								<view class="touxiang mt-30">
									<text class="text-white text-size-m text-weight-b">￥{{item.sale_price}}</text>
								</view>
								<view >
									<image @click.stop="jiarufuFun(item)" class="remenzan" src="/static/img/86.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
					<view style="clear: both;"></view>
					<view style="clear: both;" class="more ma-40 pt-40" @click="gengmore()" v-if="listdata.length<total">
						<image src="/static/img/30.png" mode="widthFix"></image>
						<text class="text-size-s">下拉加载更多~</text>
					</view>
				</view>
			</tm-sheet>
			<view style="height:60px"></view>
		</div>
		<!-- 弹出层消息 -->
		<tm-message ref="toast"></tm-message>
	</view>
</template>	
<script>
import{myRequest} from '@/api/request.js'
export default {
	data() {
		return {
			libiaoList:[],
			activeIndex:0,
			soso:'',
			addr:['江西省','南昌市','西湖区'],
			value:'',
			list2: [{
					title: '最近上新',
					shang:true
				}, {
					title: '价格',
					shang:true
				},{
					title: '销量',
					shang:true
				}],
			typeclick:1,
			listdata:[],
			sosotype:1,
			page:1,
			pagesize:8,
			total:0,
			jia:1,
			num:1,
		};
	},
	onLoad() {
		
	},
	created() {
		this.sys = uni.getSystemInfoSync();	
		this.getlishi()
	},
	methods: {
		goDetail(cartId){
			uni.navigateTo({
				url:'/pages/shopdetail/index?cartId='+cartId
			})
		},
		getlishi(){
			var that=this;
			myRequest({
				url: "/api/ShopGoods/shopSearchList",
				method:'get',
				data:{}
			}).then(res => {
				if (res.data.code == 200) {
					that.libiaoList=res.data.data;
				}else{}
			})
		},
		qingkong(){
			var that=this;
			myRequest({
				url: "/api/ShopGoods/deleteShopSearch",
				method:'get',
				data:{}
			}).then(res => {
				if (res.data.code == 200) {
					that.getlishi();
					that.$refs.toast.show({model:'success',label:res.data.msg})
				}else{
					
				}
			})
		},
		sousuo(name){
			console.log(name,'nam');
			this.soso=name;
			this.sosoFun();
		},
		sosoFun(){
			let that=this;
			myRequest({
				url:'/api/ShopGoods/shopGoodsSearch',
				method:'post',
				data:{search:that.soso,page:that.page,pagesize:that.pagesize,sale_price:that.jia,sale_num:that.num}
			}).then(res=>{
				if(res.data.code==200){
					that.listdata=[];
					if(res.data.data.length!=0){
						that.total=res.data.data.total;
					if(res.data.data.data.length>0){
					that.listdata=res.data.data.data;	
					}else{
						that.listdata=[];
					}
					}else{
						that.listdata=[];
					}	
				}else{
					that.$refs.toast.show({
						model: 'error',
						label: res.data.msg
					})
				}
			})
			this.sosotype=2
		},
		
		gengmore(){
			// this.randouh()
		},
		jiarufuFun(data){
			var that=this;
			console.log(data)
			// if(data.type==2){
				myRequest({
					url: "/api/ShopCart/addShopCart",
					method:'post',
					data:{
						goods_id:data.id,
						goods_name:data.goods_name,
						goods_image:data.image,
						goods_price:data.sale_price,
						goods_num:1
					}
				}).then(res => {
					if (res.data.code == 200) {
						that.$refs.toast.show({model:'success',label:res.data.msg})
					}else{
						that.$refs.toast.show({model:'error',label:res.data.msg})
					}
				})
			// uni.navigateTo({
			// 	url: "/pages/gouwuche/index",
			// })
			// console.log(data)
			// this.gouwuche.push(data)
		},
		goindex(){
			uni.navigateBack();
		},
		change(e){
			console.log(e);
			if(e.title=='价格'){
				if(e.shang){
					this.jia=1
				}else{
					this.jia=2
				}
				console.log(e.shang);
			}else{
				if(e.shang){
					this.num=1
				}else{
					this.num=2
				}
			}
			this.sosoFun()
		},
	},
}
</script>

<style lang="scss">
	/deep/ .tm-menubars .body{background-color: #1b1b1b !important;}
	/deep/ .zhuti{padding: 10px 10px;}
	/deep/ .kuang{margin:0 !important;padding: 0px !important;}
	/deep/ .icon-search{
		font-size: 23px !important;
		color: #8E8E93 !important;
	}
	/deep/ .tm-search{
		width: 66%;
		background-color: #414141 !important;
		border-radius: 10px;
	}
	/deep/ .tm-search .grey-darken-5{
		background-color: #414141 !important;
	}
	.qingchu{background: #303440;padding:5px 15px;border-radius: 20px;width: 62px;}
	/deep/ .liebiao .grey-darken-4.bk{background-color: #0D0D0D !important;}
	/deep/ .liebiao .py-24{padding-top: 15px;padding-bottom: 15px;}
	/deep/ .tm-grouplist{margin:0 10px !important;}
	.quxiao{color: #707070;line-height: 47px;}
	/deep/ .tm--badges--cm{border: 1px solid #303440 !important;
	background-color: #303440 !important;right: -7px !important;top: 6px !important;}
	/deep/ .tm--badges{display: inherit !important;}
	.qingchu{background: #303440;padding:5px 15px;border-radius: 20px;width: 62px;}
	/deep/ .liebiao .grey-darken-4.bk{background-color: #0D0D0D !important;}
	/deep/ .liebiao .py-24{padding-top: 15px;padding-bottom: 15px;}
	/deep/ .tm-grouplist{margin:0 10px !important;}
	
	/deep/ .qiehuan2 .tm-tabs-con-item-border{display: none;}
	/deep/ .qiehuan1 .text-primary{color: white !important;}
	/deep/ .qiehuan2 .tm-tabs-con-item-text{
		font-size: 14px;
		background: none !important;
		height: 28px;
		vertical-align: middle;
		line-height: 28px;
		border-radius: 20px;
		padding-left: 14px;
		padding-right: 14px;
		margin-top: 17%;
	}
	/deep/ .qiehuan2 .text-weight-b{
		font-size: 14px;
		background: #303440 !important;
		height: 28px;
		vertical-align: middle;
		line-height: 28px;
		border-radius: 20px;
		padding-left: 14px;
		padding-right: 14px;
		margin-top: 17%;
		color: white !important;
	}
	.dingwei{width: 21%;margin-top:3%;}
	.shuruk{width: 77%;}
	.sousuo{width:94%;margin:0 auto;}
	.quxiao{color: #707070;line-height: 47px;}
	.contone{width: 48%;}
	.logo{width: 100%;}
	.remenzan{width: 18px !important;margin-top: 10px;}
	.more{text-align: center;}
	.more image{margin-right: 10px;vertical-align: middle;width: 30px;}
</style>