tlfb/pages/product/jindouProduct.vue

<template>
	<view class="exchange">
		<view class="bg"><!-- <image src="@/static/img/bargainBg.jpg" mode=""></image> --></view>
		<view class="header">
			<view class="data">
				<view class="title">我的金豆</view>
				<view class="quantity">{{ userInfo.gold }}</view>
				<view class="button">查看明细</view>
			</view>
		</view>
		<view class="line">热门兑换</view>
		<view class="dataList"><data-list :data="data"></data-list></view>
	</view>
</template>

<script>
import { getProducts } from '@/api/product.js';
import dataList from '@/components/datalist.vue';
import { mapState, mapMutations } from 'vuex';
import { getUserInfo } from '@/api/user.js';
export default {
	data() {
		return {
			data: {
				page: 1,
				limit: 10,
				loadingType: 'loadmore',
				data: []
			}
		};
	},
	components: {
		dataList
	},
	computed: {
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
	},
	onLoad() {
		this.loadData();
		this.getData();
	},
	methods: {
		...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
		// 點擊搜索框
		clickSearch() {
			uni.navigateTo({
				url: '/pages/product/search'
			});
		},
		loadData() {
			getUserInfo({})
				.then(({ data }) => {
					this.setUserInfo(data);
					// 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
				})
				.catch(e => {
					console.log(e);
				});
		},
		getData() {
			const obj = this;
			getProducts({
				page: this.page,
				limit: this.limit,
				is_gold: 1
			})
				.then(function(res) {
					obj.data = res.data;
				})
				.catch(res => {});
		}
	}
};
</script>

<style lang="scss" scoped>
$grey: #95a0b1;
$text: #333333;
$red: #ff4c4c;
.exchange {
	.bg {
		width: 100%;
		height: 400rpx;
		background-color: $red;
		image {
			width: 100%;
		}
	}
	.header {
		.data {
			padding-top: 120rpx;
			width: 100%;
			text-align: center;
			position: absolute;
			top: 0;
			color: #fff;
			height: 400rpx;
			.quantity,
			.title,
			.button {
				margin: 10rpx auto;
			}
			.title {
				font-size: 24rpx;
			}
			.quantity {
				font-size: 54rpx;
				font-weight: bold;
			}
			.button {
				padding: 10rpx;
				border: solid 1rpx #fff;
				border-radius: 40rpx;
				font-size: 24rpx;
				width: 160rpx;
			}
		}
	}
	.line {
		background-color: #fff;
		font-size: 28rpx;
		padding: 30rpx;
		color: $red;
		font-weight: bold;
		text-align: center;
	}
	.dataList {
		background-color: #fff;
	}
}
</style>