talk_appAmin/pages/signln/exdetail.vue

<!-- 兑换商城详情 -->
<template>
	<view class="uninavbar">
		<image src="../../static/images/sign/return.png"></image>
	</view>
	<view>
		<image :src="images"></image>
	</view>

	<view style="background-color: #ffffff; overflow-x: hidden;">
		<view style="margin-left: 32rpx; margin-right: 32rpx;">
			<view style="margin-top: 33rpx;">
				<image class="nv-image" src="../../static/images/sign/one.png"></image>
				<text class="nv-text">200</text>
				<text class="nv-ku">库存20</text>
			</view>

			<view>
				<text class="nv-con">男生酷帅穿搭套装休闲夏季青少年潮牌短袖短裤初
					中生潮流套装</text>
			</view>

			<view style="
		width: 750rpx;
		height: 8rpx;
		background: #faf9fa;
		margin-top: 28rpx;
		"></view>

			<view style="margin-top: 24rpx;">
				<text class="nv-r">兑换规则</text>
			</view>

			<view style="margin-top: 24rpx;">
				<p>
					(1)活动参与:通过参加我们组织的促销活动、问卷调查或者签到等方式可以获得积分。不同活动的积分奖励数额会有所不同，请您注意查看活动规则。
				</p>
				<p>
					(2)消费累积:您在我们的商城购物进行支付时，将会根据您的消费额度累积相应的积分。具体积分累积规则可以在购物时的结算界面或活动页面上获得。
				</p>
				<p>
					(3)推荐好友:通过邀请好友注册、购物等方式参与我们的服务，您可以获得定的积分奖励。请注意，为了避免滥用行为，我们可能会对邀请积分进行限制或验证。
				</p>
			</view>


			<view style="
		width: 750rpx;
		height: 8rpx;
		background: #faf9fa;
		margin-top: 25rpx;
		"></view>

			<view style="margin-top: 30rpx;">
				<text style="
			font-weight: Regular;
			width: 100rpx;
			height: 25rpx;
			font-size: 24.37rpx;
			text-align: left;
			color: #000000;
			margin: auto ;
			display: block;
			">商品详情</text>
			</view>
		</view>


		<view style="overflow-x: hidden;width: 100%; margin-top: 33rpx;background-color: #ffffff;">
			<view v-for="(item,index) in arrImage" :key="index">
				<image style="margin-top: 24rpx;display: block;" :src="item.address"></image>
			</view>
		</view>


		<view class="but" @click="butOn()" style="position: fixed; bottom: 92rpx; left: 32rpx;">
			<text>立即兑换</text>
		</view>
	</view>




	<!-- 弹起 -->
	<uni-popup ref="popup" border-radius="32rpx 32rpx 0 0" background-color="#ffffff">

		<view style="position:absolute; right: 32rpx; vertical-align:middle; z-index: 10;">
			<image @click="clone()" style="width: 32rpx;height: 32rpx;" src="../../static/images/sign/clone.png"></image>
		</view>

		<view class="uni-popup-view">
			<view class="uni-top">
				<text class="uni-top-text">确认兑换</text>
			</view>


			<view v-if="arraddress.length >= 1" style="margin-top: 57rpx;margin-left: 32rpx;" @click="handerGoTo()">
				<view>
					<text class="textname">
						沈辞<text class="textphone">19993849411</text>
					</text>
					<image style="width: 14rpx;height: 23rpx;" class="icons" src="../../static/images/sign/rig.png">
					</image>
					<text class="textaddress">天津 天津市河北区建昌道街道红星北路72号11111111111111111111111</text>
				</view>
			</view>

			<view v-else style="margin-top: 73rpx;margin-left: 32rpx;" @click="handerGoTo()">
				<view>
					<text class="textname">
						请先添加收货信息
					</text>
					<image style="width: 14rpx;height: 23rpx;" class="icons1" src="../../static/images/sign/rig.png">
					</image>
				</view>
			</view>




			<view class="boxconte">
				<view style="display: flex;">
					<view>
						<image :src="images" class="boximage"></image>
					</view>
					<view>
						<text class="boxtext">
							男生酷帅穿搭套装休闲夏季青少年潮牌短袖短裤初中生潮流套装男生酷帅穿搭套装休闲夏季青少年潮牌短袖短裤初中生潮流套装
						</text>

						<view class="boxbottom-image">
							<image class="right-image" src="../../static/images/sign/one.png"></image>
							<text>200</text>


							<view class="right-rigth">
								<view @click="right_first_child()" class="right-first-child">-</view>
								<text class="right-text">{{sum}}</text>
								<view @click="right_last_child()" class="right-last-child">+</view>
							</view>

						</view>
					</view>
				</view>

			</view>

			<view class="boxbottom">
				<input placeholder="留言备注 (限50字)" placeholder-class="inputcolor" v-model="inputvalue" />
			</view>


			<view @click="butOnBut()" class="but" style="position: absolute;bottom: 24rpx;left: 32rpx;right: 32rpx;">
				<text>立即兑换</text>
			</view>


		</view>
	</uni-popup>

</template>

<script setup>
	import {
		reactive,
		ref
	}
	from "vue"
	const popup = ref(null);
	const images = ref("https://cbu01.alicdn.com/img/ibank/2018/374/990/9121099473_1558693147.jpg");
	const inputvalue = ref("");
	const IsShow = ref(false);
	const sum = ref(1)

	const arraddress = reactive([{
		id: 1,
		name: "1",
		phone: "1",
		address: "1"
	}])

	function butOn() {
		popup.value.open('bottom');
	}

	function clone() {
		popup.value.close()
	}
	//地址
	function handerGoTo() {
		uni.navigateTo({
			url: './harvestaddress'
		});
	}
	//减
	function right_first_child() {
		if (sum >= 1) {
			sum = sum.value--;
		}
	}
	//加
	function right_last_child() {
		sum = sum.value++;
	}
	//立即越换
	function butOnBut() {
		uni.navigateTo({
			url: './successfulexchange'
		});
	}


	const arrImage = reactive([{
			address: "https://img2.baidu.com/it/u=498628918,3669803110&fm=253&fmt=auto&app=138&f=JPEG?w=565&h=374"
		},
		{
			address: "https://img1.cfw.cn/editors/attached/image/20231123/202311231332325212.jpg"
		},
		{
			address: "http://t13.baidu.com/it/u=2134668050,4238032983&fm=224&app=112&f=JPEG?w=500&h=500"
		},
		{
			address: "http://t13.baidu.com/it/u=2134668050,4238032983&fm=224&app=112&f=JPEG?w=500&h=500"
		}
	])
</script>

<style scoped>
	
	/* 	:deep(.uni-popup .uni-popup__wrapper){
		background-color:red !important;
	} */

	.uninavbar {
		position: absolute;
		z-index: 9999;
		top: 110rpx;
		left: 32rpx;
	}

	.uninavbar>image {
		width: 31rpx;
		height: 44rpx;
		color: #000000;
	}

	view>image {
		width: 750rpx;
		height: 500rpx;
	}

	.but {
		width: 686rpx;
		height: 88rpx;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		background: linear-gradient(-90deg, #c9f6f5, #f7f8e3);
	}

	.but>text,
	.buts>text {
		font-weight: Regular;
		width: 131rpx;
		height: 33rpx;
		font-size: 32rpx;
		text-align: left;
		color: #000000;
		display: block;
		margin: auto;
		line-height: 88rpx;
	}

	.bot-bot {
		width: 750rpx;
		height: 1000rpx;
		border-radius: 32rpx 32rpx 0 0;
		/* background: #ffffff; */
		background-color: #000000;
		position: absolute;
		bottom: 40rpx;
		left: 0rpx;
		transition: bottom 5s;
		/* Slide in effect */
	}

	.buts {
		position: absolute;
		bottom: 91rpx;
	}

	.uni-popup-view {
		position: relative;
		left: 0rpx;
		height: 70vh;
		width: 750rpx;
		margin-top: 31rpx;
	}

	.uni-top {
		display: flex;
	}

	.uni-top-text {
		font-weight: Regular;
		width: 124rpx;
		height: 31rpx;
		font-size: 30rpx;
		text-align: left;
		color: #000000;
		display: block;
		margin: auto;
		line-height: 31rpx;
	}

	.textname,
	.textphone,
	.textaddress {
		font-weight: Regular;
		width: 48rpx;
		height: 24rpx;
		font-size: 24rpx;
		text-align: left;
		color: #999999;
	}

	.icons {
		float: right;
		margin-top: 19rpx;
		margin-right: 32rpx;
	}

	.icons1 {
		float: right;
		margin-top: 1rpx;
		margin-right: 32rpx;
	}

	.textphone {
		margin-left: 26rpx;
	}

	.textaddress {
		display: block;
		width: 501rpx;
		/* height: 24rpx; */
		line-height: 24rpx;
		overflow: hidden;
		word-wrap: break-word;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.boxconte {
		width: 686rpx;
		height: 198rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background: #ffffff;
		box-shadow: 0 0 10rpx #ffffff;
		margin-left: 32rpx;
		margin-top: 24rpx;
		margin-right: 32rpx;
	}

	.boximage {
		width: 150rpx;
		height: 150rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background: #999999;
		margin: 24rpx 0rpx 24rpx 24rpx;
	}

	.boxtext {
		font-weight: Regular;
		width: 459rpx;
		height: 44rpx;
		line-height: 22rpx;
		font-size: 20rpx;
		text-align: left;
		color: #000000;
		margin: 24rpx 29rpx 0 29rpx;

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

		/* display: block; */

	}

	.boxbottom-image {
		margin-left: 24rpx;
		margin-top: 80rpx;
	}

	.boxbottom-image>text {
		font-weight: Regular;
		width: 34rpx;
		height: 17rpx;
		font-size: 20rpx;
		text-align: left;
		color: #F99B46;
		margin-left: 10rpx;
		vertical-align: middle;
	}

	.boxbottom {
		width: 686rpx;
		height: 88rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background: #f6f6f6;
		margin: 32rpx
	}

	.boxbottom>input {
		width: 686rpx;
		height: 88rpx;
		padding-left: 25rpx;
	}

	.right-image {
		width: 25rpx;
		height: 26rpx;
		vertical-align: middle;
	}

	:deep(.inputcolor) {
		font-weight: Regular;
		width: 207rpx;
		height: 88rpx;
		font-size: 24.37rpx;
		text-align: left;
		color: #999999;
	}

	.right-rigth {
		float: right;
		margin-right: 24rpx;
		display: flex;

	}

	.right-first-child {
		width: 33.94rpx;
		height: 33.94rpx;
		background: #ffffff;
		line-height: 32rpx;
		text-align: center;
		border-radius: 32rpx;

		color: #F6F6F6;
		line-height: 32rpx;
		text-align: center;
		font-size: 20rpx;
	}

	.right-text {
		vertical-align: middle;
		font-weight: Regular;
		width: 7rpx;
		height: 16rpx;
		font-size: 20rpx;
		color: #000000;
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-top: 4rpx;
	}

	.right-last-child {
		vertical-align: middle;
		width: 32rpx;
		height: 32rpx;
		background: #f99b46;
		border-radius: 32rpx;

		color: #F6F6F6;
		line-height: 32rpx;
		text-align: center;
		font-size: 20rpx;
	}

	.nv-image {
		width: 37rpx;
		height: 38rpx;
		vertical-align: middle;
	}

	.nv-text {
		font-weight: Regular;
		width: 60rpx;
		height: 30rpx;
		font-size: 36rpx;
		text-align: left;
		color: #F99B46;
		margin-left: 12rpx;
		vertical-align: middle;
	}

	.nv-ku {
		font-weight: Regular;
		width: 94rpx;
		height: 30rpx;
		font-size: 30rpx;
		text-align: left;
		color: #999999;
		vertical-align: middle;
		float: right;
		margin-right: 1rpx;
	}

	.nv-con {
		font-weight: Regular;
		width: 659rpx;
		height: 66rpx;
		font-size: 30rpx;
		text-align: left;
		color: #000000;
		margin-top: 27rpx;
		line-height: 30rpx;
		overflow: hidden;
		word-wrap: break-word;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.nv-r {
		font-weight: Regular;
		width: 118rpx;
		height: 30rpx;
		font-size: 30rpx;
		text-align: left;
		color: #000000;
	}

	p {
		color: #000000;
		font-weight: Regular;
		font-face: Microsoft YaHei;
		font-size: 24rpx;
		text-align: left;
		line-height: 36rpx;
	}
</style>