mplace_source/pages/my/sponsored.vue

<template>
	<view>
		<!--标题栏-->
		<bar-title bgColor="bg-white" isBack>
			<block slot="content">我的红包</block>
			<block slot="right">
				<text class="text-black">使用说明</text>
			</block>
		</bar-title>
		
		<!--红包Tab-->
		<scroll-view scroll-x class="bg-white nav z text-center">
			<block v-for="(item,index) in TabData" :key="index">
				<view class="cu-item" :class="index == TabCur?'select':''" @tap="tabSelect" :data-id="index">
					<view :class="index == TabCur?'text-black':''">{{item}}</view>
					<view class="tab-dot bg-red"/>
				</view>
			</block>
		</scroll-view>
		
		<!--红包列表-->
		<view class="zaiui-sponsored-card-view">
			<view class="card-price-view">
				<view class="text-red price-left-view">
					<text class="text-sm">￥</text>
					<text class="price">10</text>
				</view>
				<view class="name-content-view">
					<view class="text-cut text-red">限购【某某某】店铺商品</view>
					<view class="text-xs">满99元可用</view>
					<view class="text-xs">04.01 00:00 - 12.01 23:59</view>
				</view>
				<view class="btn-right-view">
					<button class="cu-btn bg-red round sm">去使用</button>
				</view>
			</view>
			<view class="card-num-view">
				<view class="text-xs">满99可用</view>
				<text class="cuIcon-unfold"/>
			</view>
		</view>
		
		<view class="zaiui-sponsored-card-view">
			<view class="card-price-view">
				<view class="text-red price-left-view">
					<text class="text-sm">￥</text>
					<text class="price">10</text>
				</view>
				<view class="name-content-view">
					<view class="text-cut text-red">限购【某某某】店铺商品</view>
					<view class="text-xs">满99元可用</view>
					<view class="text-xs">04.01 00:00 - 12.01 23:59</view>
				</view>
				<view class="btn-right-view">
					<button class="cu-btn bg-red round sm">去使用</button>
				</view>
			</view>
			<view class="card-num-view">
				<view class="text-xs">满99可用</view>
				<text class="cuIcon-unfold"/>
			</view>
		</view>
		
		<view class="zaiui-sponsored-card-view">
			<view class="card-price-view">
				<view class="text-red price-left-view">
					<text class="text-sm">￥</text>
					<text class="price">10</text>
				</view>
				<view class="name-content-view">
					<view class="text-cut text-red">限购【某某某】店铺商品</view>
					<view class="text-xs">满99元可用</view>
					<view class="text-xs">04.01 00:00 - 12.01 23:59</view>
				</view>
				<view class="btn-right-view">
					<button class="cu-btn bg-red round sm">去使用</button>
				</view>
			</view>
			<view class="card-num-view">
				<view class="text-xs">满99可用</view>
				<text class="cuIcon-unfold"/>
			</view>
		</view>
		
	</view>
</template>

<script>
	import barTitle from '@/components/zaiui-common/basics/bar-title';
	import _tool from '@/static/zaiui/util/tools.js';	//工具函数
	export default {
		components: {
			barTitle
		},
		data() {
			return {
				TabCur: 0, TabData: ['未使用(4)','已使用','已过期'],
			}
		},
		onLoad() {
			
		},
		onReady() {
			_tool.setBarColor(true);
			uni.pageScrollTo({
			    scrollTop: 0,
			    duration: 0
			});
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 0
				});
			},
		}
	}
</script>

<style lang="scss">
	/* #ifdef APP-PLUS */
		@import "../../static/colorui/main.css";
		@import "../../static/colorui/icon.css";
		@import "../../static/zaiui/style/app.scss";
	/* #endif */
	page {
		background: #FFFFFF;
	}
	.zaiui-sponsored-card-view {
		position: relative;
		margin: 27.27upx 27.27upx 0;
		.card-price-view {
		    position: relative;
		    background: #FFF5F5;
			border-radius: 14.54upx 14.54upx 0 0;	
		    padding: 18.18upx;
			.price-left-view {
				position: absolute;
				height: 125.45upx;
				width: 145.45upx;
				text-align: center;
				line-height: 125.45upx;
				.price {
				    font-size: 45.45upx;
				    font-weight: 400;	
				}
			}
			.name-content-view {
				position: relative;
			    padding-left: 163.63upx;
			    padding-right: 145.45upx;
				height: 125.45upx;
				line-height: 1.8;
				color: #999898;
				&::before {
					content: '';
					position: absolute;
					top: -18.18upx;
					bottom: -18.18upx;
					margin-left: -18.18upx;
					border-left: 2upx dashed #fdbabc;
				}
			}
			.btn-right-view {
				position: absolute;
			    right: 27.27upx;
			    top: 18.18upx;
				height: 125.45upx;
				line-height: 125.45upx;
			}
		}
		.card-num-view {
		    position: relative;
		    background: #FFECED;
		    border-radius: 0 0 14.54upx 14.54upx;
			border-top: 2upx dashed #dedbdb;
		    padding: 10.9upx 27.27upx;
			color: #999898;
			&::before {
				content: '';
			    position: absolute;
			    width: 36.36upx;
			    height: 36.36upx;
			    background: #ffffff;
			    border-radius: 50%;
			    top: -18.18upx;
			    left: -18.18upx;
			}
			&::after {
			    content: '';
			    position: absolute;
			    width: 36.36upx;
			    height: 36.36upx;
			    background: #ffffff;
			    border-radius: 50%;
			    top: -18.18upx;
			    right: -18.18upx;
			}
			view {
				position: relative;
				padding-right: 72.72upx;
			}
			text {
			    position: absolute;
			    right: 27.27upx;
			    top: 14.54upx;
			}
		}
	}
</style>