zhongtuanCatering/pages/app/score-shop.vue

<!-- 页面  -->
<template>
	<s-layout title="积分商城">
		<view class="container">
			<!-- 顶部信息 -->
			<view class="conTop">
				<view class="textLine">
					<view class="fs30 bold c3" style="line-height: 26rpx;">当前积分</view>
					<view class="fs60 bold c3" style="margin-top: 30rpx;line-height: 60rpx;">6963</view>
					<view class="scoreDetail" @click="toPage('/pages/user/wallet/score')">
						<view class="fs28 c9">积分明细</view>
						<image style="width: 28rpx;height: 28rpx;margin-left: 10rpx;" 
						src="https://jiangxiaoxian.0rui.cn/rightMore.png"></image>
					</view>
				</view>
			</view>
			<!-- tabs页签 -->
			<view class="tabs-box">
				<su-tabs
				  :list="tabMaps"
				  @change="onChange"
				  :scrollable="false"
				  :current="currentTab"
				></su-tabs>
			</view>
			
			<!-- 可兑换券列表 -->
			<view class="exChangeBox">
				<view class="couponsList">
					<view class="list-item">
						<image style="width: 330rpx;height: 200rpx;" src="https://jiangxiaoxian.0rui.cn/fullCoupon.png"></image>
						<view class="item-text">
							<view class="fs30 c3" style="margin: 0 auto;">优惠券满100减50</view>
							<view class="exchangeBtn">
								100积分兑换
							</view>
						</view>
						
					</view>
					<view class="list-item">
						<image style="width: 330rpx;height: 200rpx;" src="https://jiangxiaoxian.0rui.cn/fullCoupon.png"></image>
						<view class="item-text">
							<view class="fs30 c3" style="margin: 0 auto;">优惠券满100减50</view>
							<view class="exchangeBtn">
								100积分兑换
							</view>
						</view>
						
					</view>
					<view class="list-item">
						<image style="width: 330rpx;height: 200rpx;" src="https://jiangxiaoxian.0rui.cn/fullCoupon.png"></image>
						<view class="item-text">
							<view class="fs30 c3" style="margin: 0 auto;">优惠券满100减50</view>
							<view class="exchangeBtn">
								100积分兑换
							</view>
						</view>
						
					</view>
				</view>
				
			</view>
			
			<!-- 无数据展示 
			<view class="flex flex-column flex-start align-items"
				v-if="feetHisList.length == 0" style="margin-top: 300rpx;">
				<image src="https://jiangxiaoxian.0rui.cn/noneList.png" mode="" style="width: 180rpx;height: 180rpx;">
				</image>
				<view style="margin-top: 30rpx;font-size: 28rpx;color: #323232;">暂无数据信息</view>
			</view>-->
			
			
		</view>
		
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue';
	import _ from 'lodash';
	
	const tabMaps = [
	  {
	    name: '优惠券',
	    value: '0',
	  },
	  {
	    name: '次数券',
	    value: '1',
	  },
	];
	const currentTab = ref(0)
	//切换tabs
	function onChange(e) {
		console.log('onChange',e);
	  currentTab.value = e.index
	  console.log('切换tabs',currentTab.value);
	  // getLogList();
	}
	
	//页面跳转
	const toPage = (e) => {
		uni.navigateTo({
			url: e
		})
			
	}

	// 上拉加载更多
	onReachBottom(() => {
		// loadmore();
	});
	onLoad(() => {
		// getData();
	});
</script>

<style lang="scss" scoped>
	.fs30 {
		font-size: 30rpx;
	}
	
	.fs60 {
		font-size: 60rpx;
	}
	
	.fs28 {
		font-size: 28rpx;
	}
	
	.bold {
		font-weight: bold;
	}
	
	.c3 {
		color: #333333;
	}
	
	.c9 {
		color: #999999;
	}
	
	.container {
		background-color: #ffffff;
		
		.conTop {
			width: 100%;
			height: 300rpx;
			background-image: url('https://jiangxiaoxian.0rui.cn/scoreTopBack.png');
			background-size: 100%;
			
			.textLine {
				position: relative;
				top: 68rpx;
				left: 60rpx;
				display: block;
				
				.scoreDetail {
					margin-top: 20rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
			}
		}
		
		.exChangeBox {
			background-color: #ffffff;
			width: 690rpx;
			
			.couponsList {
				width: 100%;
				padding: 0 30rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);;
				grid-gap: 20px;
				// display: flex;
				// justify-content: center;
				// align-items: center;
				
				
				.list-item {
					width: 330rpx;
					border-radius: 18rpx;
					box-shadow: 4rpx 4rpx 4rpx 4rpx rgba(153, 153, 153, 0.1);
					
					.item-text {
						padding: 30rpx;
						
						.exchangeBtn {
							background-color: #fcc74e;
							height: 70rpx;
							width: 270rpx;
							border-radius: 223rpx;
							align-items: center;
							justify-content: center;
							display: flex;
							font-size: 28rpx;
							line-height: 30rpx;
							font-weight: 400;
						}
					}
				}
				
			}

		}
		
	}
</style>