mobile_h5/card/pages/exchange/style1/goodsList.vue

<!-- 
[商品兑换] 样式1 - 商品列表
http://localhost:5173/card/#/pages/exchange/style1/goodsList
https://oss-mbh5.colormaprun.com/card/#/pages/exchange/style1/goodsList
 -->
<template>
	<view class="body">
		<view v-if="pageReady" class="content uni-column">
			<view class="uni-column exchg-top">
				<my-topbar :exchangeTitle="exchangeTitle" ruleLable="兑换地点" class="exchgbar-color" @btnBackClick="btnBack"
					@btnInfoClick="btnInfo"></my-topbar>

				<view class="top-content">
					<view class="scoreBox-cornerMark">仅限本赛事</view>
					<view class="scoreBox uni-column uni-ais uni-jcse">
						<view class="scoreBox-title">剩余积分</view>
						<view class="scoreBox-score uni-row">
							<image class="scoreBox-score-ico" mode="aspectFit" src="/static/exchange/score.png"></image>
							<view class="scoreBox-score-value">{{scoreRs.score}}</view>
							<!-- <view class="scoreBox-score-unite">分</view> -->
						</view>
						<view class="scoreBox-expire">{{fmtTime(scoreRs.extTime)}} 到期</view>
					</view>
				</view>
			</view>

			<view class="main uni-column">
				<view class="gl-title">兑换商品列表</view>
				<view class="norecord" v-if="goodsList == null || goodsList.length == 0">暂无记录</view>
				<view class="list uni-row" v-else>
					<view class="item uni-column" v-for="(item, index) in goodsList" :key="index"
						@click="showDetail(item)">
						<view class="item-picbox">
							<view class="item-cornerMark">库存 {{fmtStockQty(item.goodsLeftNum)}}</view>
							<image class="item-pic" mode="aspectFit" :src="item.goodsPic"></image>
						</view>
						<view class="item-introduce uni-column uni-jcse uni-ais">
							<view class="item-introduce-name" style="margin-top: 3rpx;">{{item.goodsName}}</view>
							<view class="uni-row">
								<image class="item-introduce-ico" mode="aspectFit" src="/static/exchange/score2.png">
								</image>
								<view class="item-introduce-score">-{{item.corrScore}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<my-popup ref="mypopupExchg" :config="cardConfigData.popupExchgConfig" :dataList="cardConfigData.popupExchgList"></my-popup>
		</view>
	</view>
</template>

<script>
	import tools from '/common/tools';
	import cardfunc from '../../../common/cardfunc';
	import {
		localCardConfig
	} from "./cardconfig/test.js";
	import {
		token,
		apiOnlineScoreQuery,
		apiCanExchangeGoodsList,
		checkResCode
	} from '/common/api';

	export default {
		data() {
			return {
				cardConfigData: cardfunc.cardConfigData,
				pageReady: false,
				pageName: "goodsList",
				firstEnterKey: 'firstEnter-exchange-style1',
				queryObj: {},
				queryString: "",
				from: "", // 来源页面
				token: "",
				exchangeTitle: "兑换商品",

				ecId: 0, // 卡片id
				scoreRs: {
					score: 260, // 可用积分
					extTime: 0, // 积分到期时间戳
				},
				goodsList: [{
					goodsId: 0, // 商品id
					goodsName: "", // 商品名称
					goodsPic: "", // 商品图片
					goodsLeftNum: 0, // 商品剩余数量
					corrScore: 0, // 兑换所需积分
				}],
				/* goodsList: [
					{
						goodsId: 0, // 商品id
						goodsName: "正宗农家土鸡蛋1枚", // 商品名称
						goodsPic: "/static/common/jidanquan.png", // 商品图片
						goodsLeftNum: 99999, // 商品剩余数量
						corrScore: 20, // 兑换所需积分
					},
					{
						goodsId: 0, // 商品id
						goodsName: "正宗农家土鸡蛋2222枚", // 商品名称
						goodsPic: "/static/common/lingxiucheng.png", // 商品图片
						goodsLeftNum: 60, // 商品剩余数量
						corrScore: 20, // 兑换所需积分
					},
					{
						goodsId: 0, // 商品id
						goodsName: "正宗农家土鸡蛋 1 枚", // 商品名称
						goodsPic: "/static/common/baihuagongyuan.png", // 商品图片
						goodsLeftNum: 60, // 商品剩余数量
						corrScore: 20, // 兑换所需积分
					},
					{
						goodsId: 0, // 商品id
						goodsName: "正宗农家土鸡蛋 正宗农家土鸡蛋 正宗农家土鸡蛋", // 商品名称
						goodsPic: "/static/common/sdzxxq2.png", // 商品图片
						goodsLeftNum: 60, // 商品剩余数量
						corrScore: 20, // 兑换所需积分
					},
					{
						goodsId: 0, // 商品id
						goodsName: "正宗农家土鸡蛋 1 枚", // 商品名称
						goodsPic: "/static/common/baihuagongyuan.png", // 商品图片
						goodsLeftNum: 60, // 商品剩余数量
						corrScore: 20, // 兑换所需积分
					},
					{
						goodsId: 0, // 商品id
						goodsName: "正宗农家土鸡蛋 正宗农家土鸡蛋 正宗农家土鸡蛋", // 商品名称
						goodsPic: "/static/common/sdzxxq2.png", // 商品图片
						goodsLeftNum: 60, // 商品剩余数量
						corrScore: 20, // 兑换所需积分
					},
				] */
			}
		},
		computed: {},
		onLoad(query) { // 类型非必填，可自动推导
			// console.log(query);
			this.queryObj = query;
			this.queryString = tools.objectToQueryString(this.queryObj);
			// console.log(queryString);
			this.from = query["from"] ?? "";
			this.token = query["token"] ?? token;
			this.ecId = query["id"] ?? 0;

			this.firstEnterKey += "-" + this.ecId;
			console.log("firstEnterKey:", this.firstEnterKey);

			cardfunc.init(this, this.token, this.ecId);
			cardfunc.getCardConfig(this.cardConfigQueryCallback, localCardConfig);

			this.onlineScoreQuery();
			this.canExchangeGoodsList();
		},
		// 页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用
		onReady() {},
		onShow() {},
		onUnload() {},
		methods: {
			fmtTime(timestamp, type = 3) {
				return tools.timestampToTime(timestamp * 1000, type);
			},
			// 格式化库存数量
			fmtStockQty(num) {
				let fmtNum = num;
				if (num > 99) {
					fmtNum = "99+";
				}
				return fmtNum;
			},
			cardConfigQueryCallback(cardconfig) {
				this.loadConfig(cardconfig);
				// setTimeout(this.dealFirstEnter, 500);
			},
			loadConfig(cardconfig) {
				cardconfig = cardfunc.parseCardConfig(cardconfig);
				// console.log("[loadCardConfig] cardconfig:", cardconfig);

				// 加载卡片通用配置
				if (cardconfig.common != undefined) {
					cardfunc.loadCardCommonConfig(cardconfig.common);
				}

				// -------- 加载当前页面的配置 --------

				const config = cardfunc.parseCardConfig(cardconfig[this.pageName]);
				// console.log("[loadConfig] config_page:", config);
				if (config == undefined || config == null) {
					this.pageReady = true;
					return;
				}

				// 加载CSS样式
				const css = config.css;
				if (css != undefined && css.length > 0) {
					tools.loadCssCode(css);
				}

				this.pageReady = true;
			},
			// 卡片内可用积分查询
			onlineScoreQuery() {
				uni.request({
					url: apiOnlineScoreQuery,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token,
					},
					method: "POST",
					data: {
						ecId: this.ecId
					},
					success: (res) => {
						// console.log("onlineScoreQuery", res);
						if (checkResCode(res)) {
							this.scoreRs = res.data.data;
						}
					},
					fail: (err) => {
						console.log("onlineScoreQuery err", err);
					},
				});
			},
			// 积分可兑换商品列表查询
			canExchangeGoodsList() {
				uni.request({
					url: apiCanExchangeGoodsList,
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": this.token,
					},
					method: "POST",
					data: {
						ecId: this.ecId
					},
					success: (res) => {
						// console.log("canExchangeGoodsList", res);
						this.goodsList = res.data.data;
					},
					fail: (err) => {
						console.log("canExchangeGoodsList err", err);
					},
				});
			},
			btnBack() {
				if (this.from != '') {
					const url = this.from + '?' + this.queryString;
					tools.appAction(url, "uni.navigateTo");
				} else {
					const url = `action://to_home/`;
					tools.appAction(url);
				}
				// window.history.back();
			},
			btnInfo() {
				this.$refs.mypopupExchg.popupOpen();
			},
			showDetail(data) {
				console.log("showDetail data:", data);
				this.queryObj.goodsId = data.goodsId;
				this.queryString = tools.objectToQueryString(this.queryObj);
				const url = '/pages/exchange/style1/goodsDetail?' + this.queryString;
				tools.appAction(url, "uni.navigateTo");
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(119.37deg, #FFEF9E 0%, #FFEEDB 31.6%, #FFF3C2 100%);
	}

	.exchg-top {
		width: 100%;
		/* height: 170px; */
		padding-top: 36px;
		justify-content: space-between;
	}

	.exchgbar-color {
		/* color: #000000; */
	}
	
	.main {
		width: 100%;
		flex-grow: 1;
		margin-top: 10px;
		padding-bottom: 20px;
		border-radius: 19px 19px 0px 0px;
		border: 1px solid #FFFFFF;
		background: #F6F6F6;
	}

	.top-content {
		position: relative;
		width: 90%;
		height: 90px;
		margin-top: 10px;
		/* align-content: center; */
		border-radius: 8px;
		background: url('/static/exchange/top_right.png'), linear-gradient(117.53deg, #FFCD29 0%, #FFE694 42.36%, #FFC508 100%);
		background-repeat: no-repeat;
		background-position-x: 90%, center;
		background-position-y: 80%, center;
		background-size: 89px 53px, 100%;
	}

	.scoreBox {
		height: 80%;
		margin-left: 20px;
		margin-top: 10px;
	}

	.scoreBox-cornerMark {
		position: absolute;
		right: 0%;
		width: 60px;
		height: 17px;
		opacity: 1;
		border-radius: 0px 8px 0px 8px;
		background: #FFFFFF;

		font-size: 10px;
		font-weight: 500;
		color: #A65600;
		text-align: center;
		line-height: 17px;
	}

	.scoreBox-title {
		font-size: 12px;
		font-weight: 550;
		color: #000000;
	}

	.scoreBox-score {
		font-size: 12px;
		font-weight: 500;
		color: #A65600;
	}

	.scoreBox-score-ico {
		width: 23px;
		height: 19px;
	}

	.scoreBox-score-value {
		margin: 0 6px;
		font-size: 32px;
		font-weight: 700;
	}

	.scoreBox-score-unite {
		margin-top: 12px;
	}

	.scoreBox-expire {
		font-size: 10px;
		font-weight: 500;
		color: #A65600;
	}

	.gl-title {
		width: 90%;
		padding-top: 10px;
		padding-left: 20px;
		font-size: 15px;
		font-weight: 550;
		text-align: left;
	}

	.norecord {
		font-weight: 500;
		color: #818181;
		font-size: 14px;
		text-align: center;
		line-height: 58vh;
	}

	.list {
		width: 90%;
		flex-wrap: wrap;
		justify-content: flex-start;
		/* background-color: #FFCD29; */
	}

	.item {
		width: 43.8%;
		margin: 20rpx 20rpx;
		border-radius: 6px;
		background-color: #FFFFFF;
	}

	.item-picbox {
		position: relative;
		width: 100%;
		background: linear-gradient(180deg, #DBF1FF 0%, #FFFFDB 100%);
		border-radius: 6px 6px 0px 0px;
	}

	.item-cornerMark {
		position: absolute;
		left: 0%;
		width: 63px;
		height: 20px;
		opacity: 1;
		background: linear-gradient(90deg, rgb(255, 238, 184, 1) 0%, rgb(255, 239, 186, 0.3) 100%);
		border-radius: 6px 0px 6px 0px;

		font-size: 12px;
		font-weight: 400;
		color: #383838;
		text-align: center;
		line-height: 20px;
		white-space: nowrap;
	}

	.item-pic {
		width: 100%;
		height: 25vw;
		padding-top: 22px;
		padding-bottom: 10px;
	}

	.item-introduce {
		width: 86%;
		height: 60px;
		/* margin-top: 10rpx; */
	}

	.item-introduce-name {
		width: 100%;
		font-size: 14px;
		font-weight: 500;
		color: #000;
		white-space: nowrap;
		overflow: hidden;
		/* text-overflow: ellipsis; */
	}

	.item-introduce-ico {
		width: 30px;
		height: 20px;
	}

	.item-introduce-score {
		margin: 0 3px;
		font-size: 16px;
		font-weight: 500;
		color: #FF8D1A;
	}
</style>