H5_module/integralshop/index/index.vue

<template>
	<view>
		<!--pages/integralshop/integralshop.wxml-->
		<view class="banner">
			<!-- <image src="/integralshop/static/integralshop/images/integral_bg.png" role="img"></image> -->
		</view>
		<view class="top ">
			<view class="dflex integral">
				<view class="flex" @tap="goDetailed">
					<view class="txt">{{userIntegral}}</view>
					<view class="my dflex">积分余额</view>
					<!--    <view class="rule dflex" @tap="goRule">积分规则<image src="/static/integralshop/images/you_h.png"></image>
    </view> -->
				</view>
				<view class="rule dflex" @tap="isSign==0||sign==1?'':signFun()">
					<image src="../static/integralShop/images/qdico.png"></image>{{isSign==0||sign==1?'已签到':'签到'}}
				</view>
			</view>
		</view>
		<view class="nav">
			<view class="item dflex">
				<view @tap="goRule" class="dflex grule">
					<image src="/integralshop/static/integralshop/images/sign.png" class="more"></image>获取积分
				</view>
				<view @tap="goDetailed" class="dflex">
					<image src="/integralshop/static/integralshop/images/detailed.png" class="detailed"></image>积分明细
				</view>
				<!-- <view>
      <image src="/integralshop/images/card.png"></image>卡券兑换
    </view> -->
			</view>
		</view>
		<view class="cont">
			<view class="pop">
				<view :class="'filter dflex bgfff ' + (isShow?'filter1':'')">
					<view :class="'li ' + (active=='default'?'active':'')" @tap="ss" data-v="default">默认</view>
					<view :class="'li ' + (active=='stock'?'active':'')" @tap="ss" data-v="stock">销量
					</view>
					<view :class="'li ' + (active=='fraction'?'active':'')" @tap="ss" data-v="fraction">积分<image
							:src="isShow?'/integralshop/static/integralshop/images/integral_up.png':'/integralshop/static/integralshop/images/integral_down.png'"
							class="updown">
						</image>
					</view>
				</view>
				<view class="item" v-if="isShow">
					<view :class="'brbtm dflex ' + (sort=='gtIntegral'?'active':'')" @tap="fraction"
						data-v="gtIntegral">积分降序<image src="/integralshop/static/integralshop/images/integral_gou.png"
							v-if="sort=='gtIntegral'"></image>
					</view>
					<view :class="'dflex ' + (sort=='ltIntegral'?'active':'')" @tap="fraction" data-v="ltIntegral">积分升序
						<image src="/integralshop/static/integralshop/images/integral_gou.png"
							v-if="sort=='ltIntegral'"></image>
					</view>
				</view>
			</view>
			<view class="mask" @tap="eliminate" v-if="isShow"></view>
			<view class="pintuan pdlr20">
				<view v-for="(item, index) in pageList" :key="index" class="li" @tap="goproDetail" :data-id="item.id"
					:data-merchant="merchant.type==5?merchant.merchantDTO.id:merchant.id"
					:data-shopId="merchant.type==5?merchant.id:''">
					<view class="dflex">
						<view class="pinimgs">
							<image :src="item.pic" mode="aspectFit" class="pinimg"></image>
						</view>
						<view class="pininfo flex">
							<view class="proname">
								{{item.title}}
							</view>
							<view class="operate">
								<view class="introduce">
									{{item.brief}}
								</view>
							</view>
							<view class="price dflex">
								<view class="dflex">
									<text class="num">{{item.integral}}</text><text class="money">积分</text>
									<view><text class="prc">+￥{{item.actualPrice }}</text></view>
								</view>
								<view class="btn baglig">兑换</view>
								<!-- <view class="btn file" >积分不足</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nodata" v-if="ishow">
			<image :src="picUrlss+'empty_sp.png'"></image>
			<text>暂无商品</text>
		</view>
		<view class="nomore dflex">亲，没有更多了</view>
		<view class="placeholder-view" :style="'height:' + (bottomBlankHeight + 115) + 'rpx'"></view>
		<foot product-type="2" :isUpdate="isUpdate"></foot>
	</view>
</template>

<script>
	// pages/integralshop/integralshop.js
	const app = getApp();
	const req = require("../../utils/request.js");
	import foot from "../components/integral-nav/index";

	export default {
		data() {
			return {
				picUrlss: req.public.picUrls,
				page: 1,
				isLoad: true,
				isShow: false,
				sort: '',
				active: 'default',
				isUpdate: false // 是否更新消息
					,
				merchant: "",
				isSign: "",
				hasmore: false,
				pageList: "",
				ishow: false,
				sign: 0,
				hasemore: false
			};
		},

		components: {
			foot
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// this.getProct()
			// this.getMerchant()
			// this.setData({merchant:req.getStorage("MERCHANT")})
			this.setData({
				merchant: req.getStorage("defaultMerchant")
			});
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			// #ifdef MP-WEIXIN
			uni.hideHomeButton();
			// #endif
			this.getProct();
			this.isSignFun();
			this.getIntegral();
			this.setData({
				isUpdate: !this.isUpdate
			});
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {
			this.isLoad = true;
		},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
				this.page++;
				this.getProct();
			}
			/**
			 * 用户点击右上角分享
			 */
			// onShareAppMessage: function () {
			// }
			,
		methods: {
			// 是否签到{}
			isSignFun() {
				req.getRequest('/api/integral/isSign', {}, res => {
					this.setData({
						isSign: res
					});
				});
			},

			// 获取用户积分
			getIntegral() {
				req.getRequest('/api/integral/totalIntegral', {}, res => {
					// console.log(res);
					this.setData(res);
				});
			},

			getMerchant() {
				// let merchant = req.getStorage("MERCHANT");
				req.getRequest('/api/merchant/getMerchantList', {}, res => {
					res = res.filter(it => it.isDefault == 1);
					var timestamp = Date.parse(new Date());
					res[0].time = timestamp + 1 * 60 * 1000
					req.setStorage('MERCHANT', res[0]);
					this.setData({
						merchant: res[0]
					});
				});
			},

			// 获取产品列表
			getProct() {
				let isShowLoading = false;

				if (this.page == 1 && !isShowLoading) {
					req.loadIng('加载中');
					isShowLoading = true;
				}

				let that = this;
				if (!that.isLoad) return false;
				that.isLoad = false;
				let from = {
					page: this.page,
					limit: 10,
					mode: 2,
					sort: this.sort
				};
				req.getRequest('/api/product/list', from, data => {
					if (data && data.length >= 10) that.isLoad = true;
					if (that.page > 1) data = that.pageList.concat(data);

					if (!data || data.length < 10) {
						that.setData({
							hasmore: true
						});
					}

					that.setData({
						pageList: data
					});
					// console.log(data);

					if (data.length <= 0) {
						that.setData({
							ishow: true
						});
					} else {
						that.setData({
							ishow: false
						});
					}

					if (isShowLoading) {
						uni.hideLoading();
						isShowLoading = false;
					}
				});
			},

			// 商品详情
			goproDetail(e) {
				var id = e.currentTarget.dataset.id;
				let merchantId = e.currentTarget.dataset.merchant;
				let shopId = e.currentTarget.dataset.shopid;

				if (!shopId) {
					if (!merchantId) {
						uni.navigateTo({
							url: '/integralshop/detail/detail?id=' + id
						});
					} else {
						uni.navigateTo({
							url: '/integralshop/detail/detail?id=' + id + '&merchantId=' + merchantId
						});
					}
				} else {
					uni.navigateTo({
						url: '/integralshop/detail/detail?id=' + id + '&merchantId=' + merchantId + '&shopId=' +
							shopId
					});
				} // wx.navigateTo({
				//   url: '/integralshop/detail/detail?id='+id,
				// })

			},

			// 积分规则
			goRule() {
				uni.navigateTo({
					url: "/integralshop/integralRule/index"
				});
			},

			// 签到
			signFun() {
				req.postRequest('/api/integral/sign', {}, data => {
					if (data) {
						req.msg('连续签到' + data.continuityDay + '天' + ',获得' + data.IntegralChange + '积分');
						this.setData({
							sign: 1
						});
						this.getIntegral();
					}
				});
			},

			// 积分明细
			goDetailed() {
				uni.navigateTo({
					url: "/integralshop/integralDetailed/index"
				});
			},

			// 分数排序
			fraction(e) {
				var dt = e.currentTarget.dataset;
				this.isLoad = true;
				this.setData({
					isShow: false
				});
				this.refresh(dt.v);
			},

			ss(e) {
				var dt = e.currentTarget.dataset;

				if (dt.v == 'fraction') {
					this.setData({
						isShow: true
					});
				} else {
					this.setData({
						isShow: false
					});
				}

				if (dt.v == 'default') {
					this.isLoad = true;
					this.refresh(dt.v);
				}

				if (dt.v == 'stock') {
					this.isLoad = true;
					this.refresh(dt.v);
				} // this.data.isLoad = true;
				// this.refresh(dt.v);


				this.setData({
					active: dt.v
				});
			},

			refresh(s, t) {
				this.setData({
					hasemore: true,
					sort: s
				});
				this.page = 1;
				this.getProct();
			},

			eliminate() {
				this.setData({
					isShow: false
				});
			}

		}
	};
</script>
<style>
	@import "./index.css";
</style>