talk_appAmin/pages/common/exchange/index.vue

<!-- 兑换商城 -->
<template class="content">
	<view class="cp">
		<view class="view-content" v-for="(item,index) in arr" :key="index">
			<view class="content-main" @click="goToDetail(item.id)">
				<view class="content-image">
					<image :src="bindIcon(item.coverPic)"></image>
				</view>
				<view class="content-text">
					<view class="text1">
						{{item.title}}
					</view>
					<view class="text-flex">

						<view class="text2">
							兑换所需
						</view>

						<view class="text3">
							<image src="../../../static/images/sign/one.png"></image>
							<!-- <image src="../../static/images/sign/1.png"></image> -->
							<text>{{item.goldCoin}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		toRefs
	} from "vue";

	const count = ref("750");

	import {
		listSignProduct,
		getSignProduct,
		delSignProduct,
		addSignProduct,
		updateSignProduct
	} from "@/api/signln/SignProduct/SignProduct";


	const data = reactive({
		form: {},
		queryParams: {
			pageNum: 1,
			pageSize: 10,
			coverPic: null,
			title: null,
			content: null,
			substitutionRe: null,
			inventory: null,
			goldCoin: null,
			detailsPic: null,
			time: null,
			isListing: null,
			discount: null
		},
		rules: {}
	});

	const {
		queryParams,
		form,
		rules
	} = toRefs(data);
	/** 查询商品列表 */
	function getList() {
		listSignProduct(queryParams.value).then(response => {
			arr.value = response.rows;
			console.log(arr.value)
		});
	}

	getList();

	import config from '@/config';

	function bindIcon(icon) {
		return config.baseUrl + icon;
	}

	let arr = ref([
		// {
		// 		id: 1,
		// 		src: "https://cbu01.alicdn.com/img/ibank/2018/374/990/9121099473_1558693147.jpg",
		// 		content: "[端午礼盒] 西凤酒52度头曲礼盒 陕西凤香型白酒礼11111111111",
		// 		count: 700
		// 	},
		// 	{
		// 		id: 2,
		// 		src: "https://cbu01.alicdn.com/img/ibank/2016/442/823/3216328244_1451018438.jpg",
		// 		content: "男生酷帅穿搭套装休闲夏季青少年潮牌短袖短裤初中1111111111	",
		// 		count: 200
		// 	},
		// 	{
		// 		id: 3,
		// 		src: "https://cbu01.alicdn.com/img/ibank/2018/374/990/9121099473_1558693147.jpg",
		// 		content: "男生酷帅穿搭套装休闲夏季青少年潮牌短袖短裤初中1111111111	",
		// 		count: 500
		// 	},
		// 	{
		// 		id: 3,
		// 		src: "https://cbu01.alicdn.com/img/ibank/2018/374/990/9121099473_1558693147.jpg",
		// 		content: "男生酷帅穿搭套装休闲夏季青少年潮牌短袖短裤初中1111111111	",
		// 		count: 500
		// 	},
		// 	{
		// 		id: 3,
		// 		src: "https://cbu01.alicdn.com/img/ibank/2018/374/990/9121099473_1558693147.jpg",
		// 		content: "男生酷帅穿搭套装休闲夏季青少年潮牌短袖短裤初中1111111111	",
		// 		count: 500
		// 	},
		// 	{
		// 		id: 3,
		// 		src: "https://cbu01.alicdn.com/img/ibank/2018/374/990/9121099473_1558693147.jpg",
		// 		content: "男生酷帅穿搭套装休闲夏季青少年潮牌短袖短裤初中1111111111	",
		// 		count: 500
		// 	}
	]);

	function return_left() {
		console.log("返回事件")
	}

	// 
	function goToDetail(id) {
		uni.navigateTo({
			url: '/pages/signln/exdetail?productid=' + id
		});
	}
</script>

<style>
	.content {
		background: #faf9fa;
		width: 756rpx;
	}

	.view-top {
		/* height: 100rpx; */
	}

	.view-top-rigth-text {
		margin-top: 24rpx;
		margin-left: 479rpx;
		margin-right: 32rpx;
	}

	.view-top-rigth-text>text {
		font-weight: Regular;
		width: 239rpx;
		height: 31rpx;
		font-size: 30rpx;
		text-align: left;
		color: #000000;
	}


	.cp {
		display: grid;
		grid-template-columns: auto auto;
		margin-left: 32rpx;
		margin-right: 32rpx;
		margin-top: 23rpx;
		grid-column-gap: 26rpx;
		grid-row-gap: 24rpx;
	}

	.view-content {
		width: 330rpx;
		height: 482rpx;
		box-sizing: border-box;
	}

	.content-main {
		width: 330rpx;
		height: 482rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background: #ffffff;
	}

	.content-image>image {
		width: 330rpx;
		height: 330rpx;
		border-radius: 24rpx 24rpx 0 0;
		display: block;
	}

	.content-text {
		margin-left: 24rpx;
		margin-top: 24rpx;
	}

	.text1 {
		font-weight: Regular;
		width: 266rpx;
		height: 54rpx;
		line-height: 27rpx;
		font-size: 22rpx;
		text-align: left;
		color: #000000;

		overflow: hidden;
		word-wrap: break-word;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;

	}

	.text-flex {
		margin-top: 28rpx;
		width: 330rpx;
		height: 20rpx;
	}

	.text2 {
		font-weight: Regular;
		width: 100rpx;
		height: 20rpx;
		font-size: 20rpx;
		text-align: left;
		color: #999999;
		line-height: 20rpx;
		align-items: center;
		float: left;
	}

	.text3 {
		float: right;
		margin-right: 24rpx;
		line-height: 19rpx;
	}

	.text3>image {
		width: 21rpx;
		height: 21rpx;
	}

	.text3>text {
		font-weight: Regular;
		width: 41rpx;
		height: 19rpx;
		font-size: 24rpx;
		text-align: left;
		color: #f99b46;
		padding: 1rpx;
		margin-left: 8rpx;
	}
</style>