ssj/pages/goods_details/goods.vue

<template>
	<view :style="viewColor">
		<view class="top-top">
			<view class="sys-bar" :style="{height:sysHeight}"></view>
			<!-- #ifdef MP -->
			<view class="title-bar" style="height: 43px;">
				<view class="icon" @click="home">
					<text class="iconfont icon-fanhui"></text>
				</view>
				购买消费券
			</view>
			<!-- #endif -->
			<view class="xf-num">
				{{userInfo.cash_price || 0}}
			</view>
			<view class="xf-tit">
				我的消费券
			</view>
		</view>
		<view class="xf-jl">
			<view class="jl-item" @click="navto('/pages/users/user_cash_price/index')">
				<image src="https://shushijia.qiniu1314.com/static/i2.png" mode=""></image>
				消费券明细
			</view>
			<view class="jl-item" @click="navto('/pages/users/user_cash_price/index?cu=1')">
				<image src="https://shushijia.qiniu1314.com/static/i1.png" mode=""></image>
				购买记录
			</view>
		</view>
		<view class="goods-list">
			<view class="goods"  v-for="(item,index) in productList" :key="index" @click="navto('/pages/goods_details/index?id=' + item.product_id)">
				<image :src="item.image" mode=""></image>
				<view class="title">
					{{item.store_name}}
				</view>
				<view class="price">
					{{item.price}}
				</view>
				<view class="btn">
					立即购买
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { getMenuList, getUserInfo, setVisit } from '@/api/user.js';
	import { getProductslist } from '@/api/store.js'
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	export default {
		data() {
			return {
				productList: [],
				sysHeight,
				isHome: false,
				page: 1,
				limit: 10,
				where: {
					page:1,
					limit:30,
					use_cash: 1
				},
				loadTitle: '',
				loadend: false,
				loading: false,
				userInfo: {}
			}
		},
		onLoad() {
			this.getList();
			this.getUserInfo();
		},
		onShow() {
			
		},
		methods: {
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data;
				});
			},
			navto(url) {
				uni.navigateTo({
					url
				})
			},
			back() {
				uni.navigateBack();
			},
			home() {
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			getList(isPage) {
				
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				if (isPage === true) that.$set(that, 'productList', []);
				that.loading = true;
				that.loadTitle = '';
				getProductslist(that.where).then(res => {
					let list = res.data.list;
					let productList = that.$util.SplitArray(list, that.productList);
					console.log('productList',productList);
					let loadend = list.length < that.where.limit;
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? '已全部加载' : '加载更多';
					that.$set(that, 'productList', productList);
					that.$set(that.where, 'page', that.where.page + 1);
				}).catch(err => {
					that.loading = false;
					that.loadTitle = '加载更多';
				});
			},
		}
	}
</script>

<style lang="scss">
	.noCommodity {
		background-color: #fff;
		padding-bottom: 30rpx;
	}
	.top-top {
		width: 750rpx;
		height: 480rpx;
		background-image: url('https://shushijia.qiniu1314.com/static/xf_bg.png');
		background-size: 100% 100%;
		color: #FFFFFF;
		.xf-num {
			text-align: center;
			font-weight: bold;
			font-size: 83rpx;
			padding-top: 30rpx;
		}
		.xf-tit {
			text-align: center;
			font-weight: 500;
			font-size: 33rpx;
			padding-top: 20rpx;
		}
	}
	.title-bar {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		font-weight: 500;
		color: #fff;
		line-height: 48rpx;
		
	}
	.icon {
		position: absolute;
		left: 30rpx;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80rpx;
		height: 80rpx;
		image {
			width: 50rpx;
			height: 50rpx;
		}
	}
	.xf-jl {
		width: 702rpx;
		height: 106rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50,50,52,0);
		border-radius: 15rpx;
		margin: -50rpx auto 0;
		display: flex;
		align-items: center;
		.line {
			width: 2rpx;
			height: 54rpx;
			background: #EEEEEE;
		}
		.jl-item {
			display: flex;
			flex-grow: 1;
			justify-content: center;
			align-items: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #111111;
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
			}
			
		}
	}
	.goods-list {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 24rpx;
		.goods {
			position: relative;
			width: 335rpx;
			height: 484rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50,50,52,0);
			border-radius: 20rpx;
			image {
				width: 335rpx;
				height: 335rpx;
				border-radius:20rpx 20rpx 0 0;
			}
			.btn {
				width: 147rpx;
				height: 46rpx;
				background: #ff6b2e;
				border-radius: 23rpx;
				text-align: center;
				font-weight: 500;
				font-size: 25rpx;
				color: #FFFFFF;
				line-height: 46rpx;
				position: absolute;
				right: 16rpx;
				bottom: 30rpx;
			}
			.title {
				width: 335rpx;
				padding:5rpx 20rpx;
				font-weight: bold;
				font-size: 29rpx;
				color: #333333;
				  white-space: nowrap;      /* 确保文本在一行内显示 */
				  overflow: hidden;         /* 超出容器部分的文本隐藏 */
				  text-overflow: ellipsis;  /* 超出部分显示省略号 */
			}
			.price {
				padding: 20rpx 0 0 20rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FF6B2E;
			}
		}
	}
</style>