guosen-ldt-client/pages/consume/consume.vue

<template>
	<view>
		<u-navbar :is-back="false" title=" ">
			<view class="margin-left-20 text-cut-1" style="width: 100%;z-index: 99;" @click="chooseLocation()">
				<view v-if="$isEmpty(location)" @click.stop="$u.toast('暂无位置信息')">
					<u-icon name="map-fill" color="#000" size="32"></u-icon>
					<text class="padding-left-sm " style="font-size: 32rpx;">暂无位置信息</text>
				</view>
				<view class="" v-else>
					<u-icon name="map-fill" color="#000" size="34"></u-icon>
					<text class="padding-left-sm " style="font-size: 34rpx;">{{location}}</text>
				</view>
			</view>
		</u-navbar>

		<tabsSwiper @currentChange="currentChange" ref="tabsSwiper" activeColor="#efc232">
			<view slot="swiper1">
				<mescroll-body :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback"
					@up="upCallback" :down="downOption" :up="upOption">
					<card1 :list="shopList" @filter="filter"></card1>
				</mescroll-body>
			</view>
			<view slot="swiper2">
				<mescroll-body :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback"
					@up="upCallback" :down="downOption" :up="upOption">
					<card2 :list="mallList"></card2>
				</mescroll-body>
			</view>
		</tabsSwiper>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
	import card2 from "./comps/card2.vue"
	import card1 from "./comps/card1.vue"
	import tabsSwiper from './comps/tabsSwiper.vue'
	export default {
		mixins: [MescrollMixin],
		components: {
			tabsSwiper,
			card1,
			card2
		},
		data() {
			return {
				background: {
					background: '#FF9549'
				},
				location: '',

				//数据列表
				list: [],
				shopList: [],
				mallList: [],
				//当前taginedx
				current: 0,

				filterValue: '',

				downOption: {
					use: false
				}
			}
		},
		onLoad() {
			this.getLocaltion()
		},
		methods: {
			downCallback() {
				setTimeout(() => {
					uni.showToast({
						title: "刷新成功",
						icon: "none"
					})
					this.mescroll.resetUpScroll();
				}, 1000)
			},
			upCallback(mescroll) {
				try {
					if (this.current == 0) {
						this.fetchShopList(mescroll)
					} else {
						this.fetchMallList(mescroll)
					}
				} catch (e) {
					this.mescroll.endErr()
				}
			},
			filter(index) {
				this.filterValue = ""
				switch (index) {
					case 1:
						this.filterValue = "sales"
						break;
					case 2:
						this.filterValue = "score"
						break;
					default:
						break;
				}
				this.mescroll.resetUpScroll();
			},
			async fetchShopList(mescroll) {
				let params = {
					current: mescroll.num,
					size: mescroll.size,
					auditStatus: 'PASS'
				}
				if (!this.$isEmpty(this.filterValue)) {
					params.filter = this.filterValue
				}
				let res = await this.$api.shop.list(params)
				let data = res.data.records
				let total = res.data.total
				mescroll.endBySize(data.length, total);
				if (mescroll.num == 1) this.shopList = []; //如果是第一页需手动制空列表
				this.shopList = this.shopList.concat(data); //追加新数据
				this.$forceUpdate()
				this.$refs.tabsSwiper.initSwiperHeight('.list0')
			},
			async fetchMallList(mescroll) {
				let params = {
					current: mescroll.num,
					size: mescroll.size,
					auditStatus: 'PASS'
				}
				let res = await this.$api.mall.list(params)
				let data = res.data.records
				let total = res.data.total
				mescroll.endBySize(data.length, total);
				if (mescroll.num == 1) this.mallList = []; //如果是第一页需手动制空列表
				this.mallList = this.mallList.concat(data); //追加新数据
				this.$forceUpdate()
				this.$refs.tabsSwiper.initSwiperHeight('.list1')
			},
			currentChange(index) {
				this.current = index
				this.mescroll.resetUpScroll();
			},
			getLocaltion() {
				let _this = this
				uni.getLocation({
					type: 'gcj02 ',
					success: function(res) {
						let params = {
							longitude: res.longitude,
							latitude: res.latitude
						}
						_this.$u.vuex('vuex_location', params)
						_this.$api.activity.getLocation(params).then(resp => {
							_this.location = resp.data.result.formatted_addresses.recommend
						})
					},
					fail: (err) => {
						console.log(err);
					}
				});
			},
			chooseLocation() {
				console.log("选择位置");
				let _this = this
				uni.chooseLocation({
					success: function(res) {
						let params = {
							longitude: res.longitude,
							latitude: res.latitude
						}
						_this.$u.vuex('vuex_location', params)
						_this.location = res.name
					},
					fail: (err) => {
						console.log(err);
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f6f6f6;
	}
</style>