qd_81fang/pages/intergalShop/index.vue

<template>
	<block>
		<view class="topBack" :style="'top: ' + menuButton.top + 'px'">
			<!-- <text class="ico-moon icon-leftarrow" wx:if="{{pages > 1}}" bindtap="toPage" data-mold="back"></text> -->

			<image v-if="pages > 1" @tap="toback"
				src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/f566738e424f33a415dea22dc4e11eec.png"
				class="ico-moon"></image>

			<image mode="heightFix" :style="'height: ' + menuButton.height * 2 + 'rpx'" @tap="toPage"
				data-url="/pages/tabbar/index/index" class="h-backBtn" v-else
				src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/2847/41c5f36528b8f4204130c4977c1ec2c5.png">
			</image>
			<view class="userName">积分商城</view>
		</view>

		<view class="tpBg" :style="'padding-top: ' + (menuButton.top+menuButton.height) + 'px'">

			<view class="userinfo">

				<image class="userimg"
					src="http://cdn.shop.weivee.com/shop/20200408/6162b21922f336ae9b320bc06582ab7f.png" mode=""></image>
				<view class="userintergal" @click="toPage" data-url='/pages/wallet/integral'>
					<view>
						我的积分
					</view>
					<view>
						{{info.score||0}}
						<image class="usearrow"
							src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/2e9b0e2d66ccbc9cdce81a5503262b83.png"
							mode=""></image>
					</view>
				</view>
			</view>


		</view>

		<view class="content">
			<view class="box">


				<view class="daitem" @click="toPage" data-url='/pages/wallet/integral'>
					<image
						src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/d17b79704d2bfbaa99e6c092b2bf2488.png"
						mode=""></image>
					<view>
						积分明细
					</view>
				</view>


				<view class="daitem" @click="toPage" data-url='/pages/intergalShop/logs'>
					<image
						src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/cb0958aaba111ea7ba861e3a1ad5e4e7.png"
						mode=""></image>
					<view>
						我的兑换
					</view>
				</view>

			</view>

		</view>

		<view class="content1">
			<view class="iNav iflex">
				<view class="iflexC aliCen tabItem" @tap="changeNav" :data-index="index" v-for="(item, index) in navs"
					:key="index">
					<text :class="'iNav-text ' + (navIndex == index ? 'ifontweight' : '')">{{ item.name }}</text>

					<image
						src="https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/0d08dcd267a9ecfb5aec198436d00646.png"
						v-if="navIndex == index"></image>
				</view>
			</view>

			<view class="goodsList">
				<view class="goodsItem" @tap="toPage" data-url="/pages/intergalShop/goodsDetail" :data-id="item.product_id"
					v-for="(item, index) in list" :key="index">
					<image :src="item.image" class="goodsImg"></image>

					<view class="goodsTitle">{{ item.title }}</view>

					<view class="goodsInfo">
						<view>￥{{ item.sales_price }}</view>
						<view>已兑{{ item.sales }}</view>
					</view>
				</view>
				
				
				    <view v-if="!list.length" style='width:100%;color:#999;text-align:center;margin:150rpx 0;font-size:30rpx'>暂无数据</view>

			</view>
		</view>


	</block>
</template>
<script module="parse" lang="wxs">
	module.exports = {
		filterTime: function(time) {

			console.log(time)

			var nowDate = getDate(time * 1000);
			var year = nowDate.getFullYear();
			var month = nowDate.getMonth() + 1;
			var date = nowDate.getDate();
			var hours = nowDate.getHours();
			var minutes = nowDate.getMinutes();
			var seconds = nowDate.getSeconds();

			month = month > 9 ? month : '0' + month;
			date = date > 9 ? date : '0' + date;
			hours = hours > 9 ? hours : '0' + hours;
			minutes = minutes > 9 ? minutes : '0' + minutes;
			seconds = seconds > 9 ? seconds : '0' + seconds;

			return year + '-' + month + '-' + date + " " + hours + ":" + minutes + ":" + seconds;

		}
	}
</script>
<script>
	// pages/backstage/index/index.js
	var app = getApp();

	export default {
		data() {
			return {
				navs: [
				],
				navIndex: 0,
				list: [

				],
				loaded: false,
				page: 1,
				info: {
					
				},



				menuButton: {
					top: '',
					height: 0
				},

			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		async onLoad(options) {
			let page = getCurrentPages();
			var menuButton = uni.getMenuButtonBoundingClientRect();
			console.log(menuButton);

			this.pages = page.length
			this.menuButton = menuButton


			this.getinfo();
			
			let data = await this.$api.request('/category/all','GET',{
				type:"intergral"
			});
			
			
			
			this.navs = data;
			
			
			console.log(this.navs)
			
			this.getlist();
			

		},



		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},

		onPullDownRefresh: function() {

		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
        this.loaded || this.getlist();
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {

			async getlist() {
        var that = this;
			         let res = await this.$api.request('/product/lists', 'GET', {
			         	page: this.page,
			         	pagesize: 10,
						type:1,
							fid	:this.navs[this.navIndex].id
			         });
					 
					 console.log(res)
			         if (res) {
			         	if (res.length > 0) {
			         
			         		this.list = this.list.concat(res);
			         
			         		this.page++;
			         		
			         	} else {
			         		this.loaded = true
			         		this.$api.msg('没有更多数据');
			         	}
			         }
				
				
				
				
				
					
			},
			

			

			changeNav(e) {
				let index = e.currentTarget.dataset.index;
				console.log(index);

				if (this.navIndex != index) {

					this.navIndex = index
					this.page = 1
					this.list = []
					this.loaded = false

					this.getlist();
				}
			},

			async getinfo() {
				let data = await this.$api.request('/wallet/index');
				if (data) {
					this.info = data;
				}
			},


			toPage(e) {
				app.globalData.toPage(e);
			},

			toback() {
				uni.navigateBack({
					delta: 1
				});
			},


		}
	};
</script>
<style>
	page {
		background: #F4F5F9;
	}

	.topBack {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		margin-top: 2rpx;
		display: flex;
		align-items: center;
	}

	.topBack .ico-moon {
		padding: 0 0rpx 0 30rpx;
		width: 70rpx;
		height: 40rpx;
	}

	.h-backBtn {
		margin-left: 30rpx;
	}

	.homeImg {
		height: 40rpx;
		width: 40rpx;
		margin-right: 10rpx;
	}




	.userName {
		font-size: 28rpx;
		color: #fff;
		margin-left: 20rpx;
		font-size: 36rpx;
	}

	.tpBg {
		background: url(https://ymyun-oss.oss-cn-hangzhou.aliyuncs.com/yidu_tc/public/upload/12/8/55fe2551ab3fd04275f3e1cc384081de.png);
		background-size: 100% 100%;
		width: 100%;
		height: 456rpx;
		box-sizing: border-box;
	}

	.content {
		margin: -80rpx 30rpx 25rpx;
	}

	.box {
		border-radius: 12rpx;
		background: #fff;

		padding: 40rpx 66rpx 50rpx 50rpx;

		margin-bottom: 25rpx;
		display: flex;

		align-items: center;
		justify-content: space-between;
	}

	.totalAllTitle {
		color: #9194A6;
		margin-bottom: 28rpx;
		text-align: center;
	}

	.total {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 20rpx;

	}

	.totalNum {
		font-size: 50rpx;
	}

	.totalJump {
		display: flex;
		align-items: center;
		width: 220rpx;
		height: 70rpx;
		justify-content: center;
		background: #FB4C6F;
		border-radius: 12rpx;
		border-radius: 12rpx;
	}


	.totalJump>view {
		font-size: 28rpx;
		color: #fff;

	}



	.totalJump>image {
		width: 14rpx;
		margin-left: 14rpx;
		margin-top: 5rpx;
	}


	.tip {
		font-size: 30rpx;
		padding-bottom: 10rpx;
	}



	.box1 {
		border-radius: 12rpx;
		background: #fff;

		padding: 50rpx;

		margin-bottom: 25rpx;
		padding-top: 0;
	}




	view {
		font-size: 24rpx;
	}

	.rWrap {

		display: flex;
		align-items: center;

	}

	.intergal {
		color: #000000;
		font-size: 30rpx;
		margin-right: 12rpx;
	}


	.userinfo {
		display: flex;
		align-items: center;
		padding: 60rpx 0 0 50rpx;
	}

	.userimg {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}


	.userintergal {
		margin-left: 20rpx;
	}

	.userintergal>view:nth-child(1) {
		font-size: 28rpx;
		color: #fff;
	}


	.userintergal>view:nth-child(2) {
		font-size: 80rpx;
		font-weight: 700;
		color: #fff;
	}

	.usearrow {
		width: 10rpx;
		height: 18rpx;
		vertical-align: center;
		margin: 0 0 20rpx 20rpx;
	}


	.daitem {

		display: flex;
		align-items: center;

	}

	.daitem>view {

		font-size: 28rpx;
		color: #000;
		margin-left: 18rpx;

	}

	.daitem>image {

		width: 60rpx;
		height: 60rpx;

	}



	.iNav {
		width: 710rpx;
		/* padding: 0 20rpx 0; */
		/* margin-top: 34rpx; */
		line-height: 1;
	}

	.iNav .iNav-text {
		padding: 30rpx 0rpx 28rpx;
		/* padding-top: 34rpx;
	  padding-bottom: 28rpx; */
		color: #121212;
		font-size: 34rpx;
	}

	.iNav image {
		width: 68rpx;
		height: 10rpx;
		margin-top: -30rpx;
		z-index: -1;
	}

	.jsbet {
		justify-content: space-between;
	}

	.iflex {
		display: flex;
	}

	.aliCen {
		align-items: center;
	}

	.iflexC {
		display: flex;
		flex-direction: column;
	}

	.ifontweight {
		font-weight: 700;
	}

	.content1 {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.tabItem {
		margin-right: 70rpx;
	}

	.goodsList {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.goodsItem {
		width: 330rpx;
		padding: 10rpx 12rpx 28rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		background: #fff;
		border-radius: 12rpx;
	}

	.goodsImg {
		width: 308rpx;
		height: 308rpx;
		border-radius: 12rpx;
	}

	.goodsTitle {
		margin-top: 22rpx;
		color: #011b33;
		font-weight: 700;
		font-size: 30rpx;
		width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.goodsInfo {
		margin-top: 22rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.goodsInfo>view:nth-child(1) {
		color: #F15071;
		font-size: 30rpx;
	}

	.goodsInfo>view:nth-child(2) {
		font-size: 22rpx;
		color: #999999;
	}
</style>