WashingCar-frontend-Ver3.0/pages/integral/integral.vue

<template>
	<navigationStyle :titles="titles" :bgcolor="bgcolor" :color="color"></navigationStyle>
	<scroll-view class="integral" scroll-y="true">
		<view class="tops">
			
		</view>
		<view class="header">
			<swiper class="swiper" :autoplay="true" :indicator-dots="true" indicator-color="rgba(220,192,203,1)"
				indicator-active-color="rgba(255,255,255,1)">
				<swiper-item class="swiper-item">
					<img src="https://www.jiubaotongxue.love/image/tin.jpg" class="img" alt="" />
				</swiper-item>
			</swiper>
		</view>

		<view class="body-data">
			<view class="datas" v-for="(item,index) in demo" :key="index">
				<img class="img" src="" alt="" />
				<view class="title">
					商品名字
				</view>
				<view class="shopPrice">
					售价：20积分
				</view>
				<img class="add" src="https://www.jiubaotongxue.love/image/tin.jpg" alt="" />
			</view>
		</view>
		<view class="ding">
			
		</view>
	</scroll-view>
	<view class="crty">
		<view class="crty-left" @click="qiehuan()">
			<view class="crtyimg">
				<img class="crtyimage" src="https://www.jiubaotongxue.love/image/tin.jpg" alt="" />
				<!-- <view class="icons"> -->
				<view class="icons">
					10
				</view>
			</view>
			<view class="c-money">
				总计金额:200
			</view>
		</view>
		<view class="crty-right" @click="jieshuan">
			去结算
		</view>
	</view>
	<scroll-view class="popup" v-show="isShow===1">
		<scroll-view class="limit" scroll-y="true">
			<!-- <view class="listr"> -->
			<view class="listr" v-for="(item,index) in demo" :key="index">
				<view class="r-left">
					<img class="r-img" src="https://www.jiubaotongxue.love/image/tin.jpg" alt="" />
				</view>
				<view class="r-right">
					<view class="r-titles">
						商品名
					</view>
					<view class="r-title">
						20积分/个
					</view>
					
					
				</view>
				<view class="updatas">
					<!-- <view class="jian"> -->
					<view class="jian" @click="romevs(item,index)">
						-
					</view>
					<!-- <view class="numbers"> -->
					<view class="numbers">
						10
					</view>
					<!-- <view class="jian"> -->
					<view class="jian" @click="increases(item,index)">
						+
					</view>
				</view>
			</view>
			<view class="listr">
				<!-- 已经到底了哦 -->
			</view>
		</scroll-view>
	
	</scroll-view>
</template>

<script setup>
import {ref} from "vue"
const demo = ref([0,1,2,3,4,5,6])
const isShow = ref(0)
const titles = ref('积分兑换')
	const bgcolor= ref('#fff')
	const color = ref('#000')
const qiehuan = ()=>{
	if(isShow.value===1){
		isShow.value=0
	}else{
		isShow.value=1
		
	}
	
}
</script>

<style lang="scss">
	.integral {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #d7d7d7;
		.tops{
			width: 100%;
			height: 11%;
			position: relative;
			background-color: red;
		}
		.header {
			position: relative;
			width: 96%;
			height: 350rpx;
			margin-left: 50%;
			margin-top: 20rpx;
			transform: translateX(-50%);

			.swiper {
				width: 100%;
				height: 100%;

				.swiper-item {
					width: 100%;
					height: 100%;

					.img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.body-data {
			position: relative;
			width: 96%;
			// height: 350rpx;
			margin-left: 50%;
			transform: translateX(-50%);
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		
			.datas {
				position: relative;
				width: 47%;
				// height: 360rpx;
				background-color: #ffffff;
				margin-top: 25rpx;
		
				.img {
					width: 180rpx;
					height: 180rpx;
					margin-top: 30rpx;
					position: relative;
					margin-left: 50%;
					transform: translateX(-50%);
					border: 1rpx solid #666;
				}
				.title{
					width: 100%;
					height: 80rpx;
					font-size: 30rpx;
					text-align: center;
					line-height: 80rpx;
				}
				.shopPrice{
					width: 60%;
					height: 60rpx;
					font-size: 26rpx;
					margin-left: 50%;
					transform: translateX(-50%);
					text-align: center;
					line-height: 40rpx;
				}
				.add{
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					bottom: 10rpx;
					right: 10rpx;
				}
		
			}
		}
		.ding{
			width: 100%;
			height: 200rpx;
		}
	}

	.crty {
		position: fixed;
		bottom: 40rpx;
		width: 90%;
		height: 90rpx;
		// border: 2rpx solid red;
		background-color: #fff;
		display: flex;
		border-radius: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;

		.crty-left {
			width: 76%;
			height: 90rpx;
			border-radius: 50rpx 0rpx 0rpx 50rpx;
			// background-color: red;
			display: flex;

			.crtyimg {
				width: 30%;
				height: 90rpx;
				border-radius: 50rpx 0rpx 0rpx 50rpx;
				// background-color: blue;
				position: relative;

				.crtyimage {
					position: absolute;
					width: 50%;
					height: 70rpx;
					// border: 1rpx solid red;
					top: 50%;
					right: 20rpx;
					transform: translateY(-50%);
				}

				.icons {
					width: 40rpx;
					height: 40rpx;
					background-color: red;
					text-align: center;
					line-height: 40rpx;
					border-radius: 50%;
					color: white;
					font-size: 22rpx;
					position: absolute;
					top: 5rpx;
					left: 115rpx;
				}
			}

			.c-money {
				width: 67%;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 28rpx;
				margin-left: 3%;
				color: red;
				// background-color: lightblue;
			}
		}

		.crty-right {
			width: 30%;
			height: 90rpx;
			background-color: red;
			border-radius: 0rpx 50rpx 50rpx 0rpx;
			text-align: center;
			line-height: 90rpx;
			color: white;
			font-size: 28rpx;
		}
	}
	.popup {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		height: 60%;
		background-color:#d7d7d7;
	
		.limit {
			width: 100%;
			height: 100%;
	
			// border: 1rpx solid black;
			.listr {
				width: 100%;
				height: 200rpx;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-top: 1rpx solid #ccc;
				.r-left {
					width: 130rpx;
					height: 130rpx;
					margin-top: 10rpx;
					margin-left: 40rpx;
					.r-img {
						width: 100%;
						height: 100%;
						// border-radius: 10rpx 10rpx 10rpx 10rpx;
					}
				}
	
				.r-right {
					width: 70%;
					height: 130rpx;
					position: relative;
					margin-left: 10rpx;
					display: flex;
					align-items: center;
					flex: 1;
				
	
					.r-title {
						width: 60%;
						// height: 130rpx;
						position: relative;
						text-align: left;
						font-size: 28rpx;
						text-align: center;
					}
					.r-titles{
						// width: 45%;
						// height: 130rpx;
						position: relative;
						text-align: left;
						font-size: 28rpx;
						font-weight: bold;
							// background-color: red;
					}
				}
				
				.updatas {
					// width: 130rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 130rpx;
					margin-right: 20rpx;
					
					.jian {
						width: 30rpx;
						height: 30rpx;
						background-color: red;
						border-radius: 50%;
						font-size: 28rpx;
						color: white;
						text-align: center;
						line-height: 30rpx;
					}
					
					.numbers {
						width: 40rpx;
						height: 30rpx;
						font-size: 28rpx;
						color: black;
						text-align: center;
						line-height: 30rpx;
						// border: 1rpx solid red;
					}
				}
			}
		}
	
	}
</style>