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">
				<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)">
						<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(data) {
				uni.navigateTo({
					url: '/pages/shopdetail/index?cartId=' + data.id+'&classId='+data.category_id
				})
			},
			// 历史记录列表
			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: 86%;
		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>