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="34"></u-icon>
					<text class="padding-left-sm " style="font-size: 34rpx;">暂无位置信息</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">
				<card1 :list="shopList" @filter="filter"></card1>
			</view>
			<view slot="swiper2">
				<card2 :list="mallList"></card2>
			</view>
		</tabsSwiper>
	</view>
</template>

<script>
	import card2 from "./comps/card2.vue"
	import card1 from "./comps/card1.vue"
	import tabsSwiper from './comps/tabsSwiper.vue'
	export default {
		components: {
			tabsSwiper,
			card1,
			card2
		},
		data() {
			return {
				background: {
					background: '#FF9549'
				},
				location: '',
				
				//数据列表
				shopList:[],
				mallList:[],
				//当前taginedx
				current:0,
				
				filterValue:''
			}
		},
		onLoad() {
			this.fetchList()
			this.getLocaltion()
		},
		methods: {
			filter(index){
				this.filterValue=""
				switch (index){
					case 1:
						this.filterValue="sales"
						break;
					case 2:
						this.filterValue="score"
						break;
					default:
						break;
				}
				this.fetchShopList()
			},
			fetchList(){
				if (this.current==0) {
					this.fetchShopList()
				}else if (this.current==1) {
					this.fetchMallList()
				}
			},
			fetchShopList(){
				let params={
					auditStatus:'PASS'
				}
				if (!this.$isEmpty(this.filterValue)) {
					params.filter=this.filterValue
				}
				this.$api.shop.list(params).then(res=>{
					this.shopList=res.data.records
					this.$forceUpdate()
					this.$refs.tabsSwiper.initSwiperHeight('.list0')
				})
			},
			fetchMallList(){
				let params={
					auditStatus:'PASS'
				}
				this.$api.mall.list(params).then(res=>{
					this.mallList=res.data.records
					this.$forceUpdate()
					this.$refs.tabsSwiper.initSwiperHeight('.list1')
				})
			},
			currentChange(index){
				this.current=index
				this.fetchList()
			},
			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>