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"></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,
			}
		},
		onLoad() {
			this.fetchList()
		},
		methods: {
			fetchList(){
				if (this.current==0) {
					this.fetchShopList()
				}else if (this.current==1) {
					this.fetchMallList()
				}
			},
			fetchShopList(){
				this.$api.shop.list().then(res=>{
					this.shopList=res.data.records
					this.$forceUpdate()
					this.$refs.tabsSwiper.initSwiperHeight('.list0')
				})
			},
			fetchMallList(){
				this.$api.mall.list().then(res=>{
					this.mallList=res.data.records
					this.$forceUpdate()
					this.$refs.tabsSwiper.initSwiperHeight('.list1')
				})
			},
			currentChange(index){
				this.current=index
				this.fetchList()
			},
			chooseLocation(){
				console.log("选择位置");
				let that=this
				uni.chooseLocation({
				    success: function (res) {
						console.log(res);
						that.location=res.name
				    },
					fail: (err) => {
						console.log(err);
					}
				});
			},
		}
	}
</script>

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