frontend_h5/treegitee/pages/exchange/index.vue

<template>
	<view v-if="istrue" class="content plr30 exchange">
		<view class="flex_start flex_items mt30">
			<view class="search flex_start flex_items plr10 ptb15">
				<image :src="imgUrl+'search.png'" style="width: 32rpx;height: 32rpx;" mode=""></image>
				<input v-model="form.name" class="uni-input pl10 f26" confirm-type="search" @confirm="doSearch"
					placeholder="搜索" style="width:100%;" />
			</view>
	<!-- 		<view class="flex_column flex_items ml35" style="color: #414141;" @click="gomyfen">
				<image :src="imgUrl+'jf.png'" style="width: 40rpx;height: 40rpx" mode=""></image>
				<text class="f18" style="margin-top: -5rpx;">我的积分</text>
			</view>
			<view class="flex_column flex_items ml20" style="color: #414141;" @click="gomyorder">
				<image :src="imgUrl+'dd.png'" style="width: 40rpx;height: 40rpx" mode=""></image>
				<text class="f18" style="margin-top: -5rpx;">我的订单</text>
			</view> -->
		</view>
		<!-- t2 -->
		<!-- 		<view class="mt30">
			<swiper indicator-dots autoplay interval="5000" duration="500">
				<swiper-item v-for="(item,index) in banners" :key="index">
					<image :src="item.url" style="width: 100%;height:454rpx;" mode="aspectFit" @click="goout(item.target_url)"></image>
				</swiper-item>
			</swiper>
		</view> -->
		<!-- t3 -->
		<!-- 		<view class="mt30 flex_between flex_items">
			<view v-for="(item,index) in daos" :key="index" class="flex_column flex_items">
				<image :src="item.img" style="width:82rpx;height: 82rpx;" mode=""></image>
				<text class="f24" style="color: #4D4D4D;">{{item.tt}}</text>
			</view>
		</view> -->
		<!-- t4 -->
		<view class="flex_start flex_items mt40">
			<view class="flex_column flex_items">
				<text class="f32 bold" style="color: #003A6E;">积分专区</text>
				<view class="line mt10"></view>
			</view>
			<view class="flex_start flex_items ml35" style="overflow-x: auto;width:500rpx;white-space: nowrap">
				<view v-for="(item,index) in tags" :key="index"
					:class="['plr20','ptb10','f26','mr20','flex_center',index==curindex?'chose':'nochose']">
					<view @click="chosetag(index,item.id)">{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- t5 -->
		<view v-if="list.length!=0" class="my-waterfall mt30">
			<myWaterfall v-model="list">
				<template v-slot:left="{leftList}">
					<MyGoodsDemo :list="leftList" @godetail="godetail"></MyGoodsDemo>
				</template>
				<template v-slot:right="{rightList}">
					<MyGoodsDemo :list="rightList" @godetail="godetail"></MyGoodsDemo>
				</template>
			</myWaterfall>
			<!-- 加载更多 -->
			<!-- <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore> -->
		</view>
		<view v-else class="ptb50 plr30 f26 f-center" style="color: #9a9a9a;margin-top: 80rpx;">--暂无数据--</view>
		<view style="width: 100%;height: 30rpx;"></view>
		<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
	</view>
</template>

<script>
	import myWaterfall from '@/components/waterfull.vue'
	import MyGoodsDemo from './goods.vue'
	export default {
		data() {
			return {
				hotProduct: [],
				curindex: 0,
				tags: [],
				loadStatus: 'loadmore',
				flowList: [],
				list: [],
				banners: [],
				istrue: false,
				// daos: [{
				// 	tt: "机场贵宾",
				// 	img: require('@/static/fj.png'),
				// 	jf: 30
				// }, {
				// 	tt: "代驾",
				// 	img: require('@/static/dj.png'),
				// 	jf: 30
				// }, {
				// 	tt: "QQ会员",
				// 	img: require('@/static/qq.png'),
				// 	jf: 30
				// }, {
				// 	tt: "盒马",
				// 	img: require('@/static/hm.png'),
				// 	jf: 30
				// }, {
				// 	tt: "立减金",
				// 	img: require('@/static/ljj.png'),
				// 	jf: 30
				// }, ],
				form: {
					category_id: "",
					name: "",
					page: 1,
					pageSize: 10
				},
				imgUrl: ""

			}
		},
		components: {
			myWaterfall,
			MyGoodsDemo
		},
		onLoad(options) {
			this.imgUrl = this.api.imgUrl
			if (options.keywords) {
				this.form.name = options.keywords
			}
			if (options.keyindex) {
				this.curindex = options.keyindex
			}
			this.getdata()
		},
		methods: {
			getdata() {
				uni.showLoading({
					title: "加载中..."
				})
				this.api.homedata().then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						this.banners = res.data.data.banner
						this.hotProduct = res.data.data.hotProduct
						this.getclassification()
					} else {
						uni.showToast({
							icon: "none",
							title: res.data.message
						})
					}
				})
			},
			getclassification() {
				this.api.getcategory().then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						this.tags = res.data.data
						this.form.category_id = res.data.data[this.curindex].id
						this.istrue = true
						if (this.form.name != "") {
							this.doSearch()
						} else {
							this.getlist()
						}
					} else {
						uni.showToast({
							icon: "none",
							title: res.data.message
						})
					}
				})
			},
			getlist() {
				this.api.getgoods(this.form).then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						uni.stopPullDownRefresh();
						if (res.data.data.data.length != 0) {
							for (let i = 0; i < res.data.data.data.length; i++) {
								this.list.push(res.data.data.data[i])
							}
						}
						setTimeout(function() {
							uni.hideLoading()
						}, 300);

					} else {
						this.istrue = true
						uni.showToast({
							icon: "none",
							title: res.data.message
						})
					}
				})
			},
			doSearch() {
				this.form.page = 1
				this.list = []
				this.getlist()
			},
			chosetag(idx, id) {
				this.curindex = idx
				this.form.category_id = id
				this.form.page = 1
				this.list = []
				this.getlist()
			},
			addRandomData() {
				for (let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.list[index]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			// 商品点击回调
			godetail(val) {
				console.log(val)
				uni.navigateTo({
					url: "/pages/product/detail?id=" + val
				})
			},
			gomyfen() {
				uni.navigateTo({
					url: "/pages/my/index"
				})
			},
			gomyorder() {
				uni.navigateTo({
					url: "/pages/order/index"
				})
			},
			goout(url) {
				// uni.navigateTo({
				// 	url: "/pages/outline/index?src=" + url
				// })
				var href = url
				window.open(href, '_self')
			},
		},
		onReachBottom() {
			uni.showLoading({
				title: "加载中..."
			})
			// 模拟数据加载
			setTimeout(() => {
				// this.addRandomData();
				this.form.page += 1
				this.getlist()
			}, 1000)
		},
		onPullDownRefresh() {
			this.form.page = 1
			this.list = []
			this.form.name = ""
			this.getdata()
		}
	}
</script>

<style>
	page {
		background: #f5f5f5 !important;
	}

	.search {
		width: 100%;
		border-radius:46rpx;
		opacity: 1;
		border: 1rpx solid #D3D3D3;
	}

	.line {
		width: 24rpx;
		height: 7rpx;
		background: linear-gradient(157deg, #FFBCA0 0%, #FF8A5D 100%);
		border-radius: 0rpx;
	}

	.nochose {
		border-radius: 8rpx;
		border: 2rpx solid #CCCCCC;
		color: #767676;
		width: 150rpx;
	}

	.chose {
		border-radius: 8rpx;
		border: 2rpx solid #F5393A;
		color: #fff;
		width: 150rpx;
		background: #F5393A;
	}

	.exchange uni-swiper {
		height: 454rpx !important;
	}
</style>