changshu_WeChat/subPackages/user/coupon.vue

<template>
	<view class="bg">
		<!-- 导航栏 -->
		<view class="nav-list">
		    <view :class="['nav-item',{active:index==navActive}]" v-for="(item,index) in navList" :key="index"
		         @click="changeNav(index)">{{ item.name }}
		    </view>
		</view>
		
		<!-- 列表 -->
		<view class="coupon-list" v-if="coupon.length>0">
		    <view :class="['coupon-item',{'hasUse':navActive!=0}]"  v-for="(item, index) in coupon" :key="index">
				<!-- 分割线上部分 -->
				<view class="item-top">
					<view class="top-left">
						<view class="price price-before"  v-if="item.type == 1">
							<span>{{item.discounts/100}}</span>
						</view>
						<view class="price" v-else>
							<span>{{getPecenet(item.percent)}}</span>折
						</view>
						<view class="subtitle">
							满{{item.min_limit/100}}元可用
						</view>
					</view>
					<view class="top-right">
						<view class="title">
							{{item.title}}
						</view>
						<view class="time">
							{{item.open_time.slice(0,10)}}-{{item.end_time.slice(0,10)}}可用
						</view>
					</view>
				</view>
				<!-- 分割线 -->
				<view class="item-circle">
				    <view class="circle left"></view>
				    <view class="line"></view>
				    <view class="circle right"></view>
				</view>
				<!-- 分割线下部分 -->
				<view class="item-bottom">
					<view class="rules" @click="changeRules(item,index)">
						<span v-if="!item.openRules">使用规则：{{item.coupon_activity.note}}</span>
						<view class="open" v-else>使用规则：{{item.coupon_activity.note}}</view>
						<!-- <span v-if="!item.openRules">使用规则：{{item.content}}</span>
						<view class="open" v-else>使用规则：{{item.content}}</view> -->
						<image v-if="!item.openRules" src="https://yjks.oss-cn-shanghai.aliyuncs.com/uploads/20230415/6a7630c176f976bb16674dde482779fb.png" mode=""></image>
						<image v-else src="https://yjks.oss-cn-shanghai.aliyuncs.com/uploads/20230415/f0073b18b3ab88cac62de60411360fc1.png" mode=""></image>
					</view>
					<!-- <view class="use" @click="use" v-if="navActive==0">
						去使用
					</view>
					<view class="use" v-else>
						已失效
					</view> -->
				</view>
		    </view>
		</view>
		
		<view v-else class="noCoupon">
			<!-- <img src="https://static.ticket.sz-trip.com/yandu/images/user/couponNo.png" class="no-couPon"> -->
			<view>暂无优惠券</view>
		</view>
			
		<!-- 兑换优惠券	 -->
		<!-- <view class="duihuan" @click="open">
			兑换优惠券 >
		</view> -->
		<!-- 弹框 -->
		<uni-popup ref="popup" type="center">
			<view class="popupBox">
				<view class="name">
					兑换优惠券
				</view>
				<input type="text" v-model="password" placeholder="请输入兑换码">
				<view class="btns">
					<view class="cancel" @click="cancel">
						取消
					</view>
					<span></span>
					<view class="sub" @click="submitPassword">
						兑换
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList: [
				     {name: '可使用', id:"wait_use"},
				     {name: '已失效', id:"past"},
				],
				navActive:'', // 当前导航
				coupon:[],
				// openRules: false,
				password:''
			}
		},
		onShow() {
			this.getList(this.navList[0])
		},
		methods: {
			getPecenet:function (percent) {
				if(percent>=100 || percent<=0) return "";
					percent = 100 - percent;
				if(percent%10==0){
					percent = percent/10;
				}
				return percent
			},
			use() {
				uni.switchTab({
					url: "/pages/index/index",
				});
			},
			submitPassword() {
				console.log('提交的兑换码',this.password);
				let that = this
				that.password = that.password.trim()
				that.$refs.popup.close()
				if (that.password== '') {
					uni.showToast({
						title: '请输入优惠券领取卡号',
						icon: 'none'
					})
					return
				}
				that.Post({
					card_key: that.password
				}, "/api/coupon/getCoupon").then((res) => {
					console.log(res.code);
					if (res.code == 200) {
						that.coupon = []
						this.getList(this.navList[0])
						uni.showToast({
							title: '兑换成功',
							icon: 'none'
						})
					} else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
				that.password = ''
			},
			cancel() {
				this.password = ''
				this.$refs.popup.close()
			},
			open() {
				this.$refs.popup.open('center')
			},
			// 打开使用规则
			changeRules(item,index){
				let list = this.coupon
				list.forEach((Item, Index) => {
					if (Index === index) {
						Item.openRules = !Item.openRules
					} else {
						Item.openRules = false
					}
				})
				this.coupon = list
				this.$forceUpdate()
			},
			// 处理价格
			showNoPriceNew(price) {
			    if (price && price > 0) {
			        return (price / 100)
			    } else {
			        return '0'
			    }
			},
			// 切换导航
			changeNav(index){
			   this.navActive=index
			   this.getList(this.navList[this.navActive])
			},
			// 获取优惠券列表
			getList(item) {
			    let that = this
				that.Post({
					status: item.id,
					offset: 0,
					limit: 100,
				}, "/api/coupon/getUserCoupon").then((res) => {
					if (res) {
						console.log(res.data);
						that.coupon = res.data
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.bg {
	background: #F7F7F7;
	min-height: 100vh;
}
		
/*导航*/
.nav-list {
	width: 100%;
	height: 107rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	position: fixed;
	background: #FFFFFF;
}

.nav-list .nav-item {
    text-align: center;
    line-height: 106rpx;
    box-sizing: border-box;
    font-size: 31rpx;
    font-weight: bold;
    padding: .23rpx 0;
    color: #333333;
}

.nav-list .nav-item.active {
	color: #00AEA0;
    border-bottom: 7rpx solid #00AEA0;
}

.coupon-list{
	/* width: 100%; */
	position: absolute;
	top: 115rpx;
    padding: 0 26.67rpx;
	background: #F7F7F7;
	min-height: 100vh;
	padding-bottom: 30rpx;
}

.coupon-list .coupon-item {
    background: #ffffff;
	margin-top: 20rpx;
    border-radius: 13rpx;
}
	
.coupon-list .coupon-item .item-top {
	display: flex;
	padding: 30rpx 16rpx 24rpx 36rpx;
	align-items: center;
}

.coupon-item .item-top .price {
	font-size: 25rpx;
	font-weight: bold;
	color: #FC5209;
	display: flex;
	align-items: baseline;
	justify-content: center;
}

.coupon-item .item-top .price span {
	font-size: 60rpx;
	margin-right: 6.67rpx;
}

.top-left .subtitle {
	width: 100%;
	font-size: 24rpx;
	color: #FC5209;
	padding-left: 6rpx;
	overflow: hidden;
	white-space: nowrap;
}

.top-left .price-before::before{
	content: '￥';
	font-size: 32rpx;
}

.top-right {
	margin-left: 46.67rpx;
	font-size: 25rpx;
	font-weight: 500;
	color: #111;
}

.top-right .title {
	margin-bottom: 26rpx;
	font-size: 31rpx;
	font-weight: bold;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.coupon-list .coupon-item .item-circle {
    /* position: relative; */
	line-height: 1rpx;
    height: 1rpx;
    width: 692rpx;
}

.coupon-list .coupon-item .item-circle .line {
    border-bottom: 1px dashed #ccc;
    /* position: absolute; */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* width: calc(100% - 1rem); */
    height: .1rpx;
    margin: auto;
    z-index: 9;
}

.coupon-list .coupon-item .item-circle .circle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    background: #ccc;
    width: .46rpx;
    height: .46rpx;
    z-index: 10;
}
.coupon-list .coupon-item .item-circle .circle.left{
    left:-.23rpx;
}
.coupon-list .coupon-item .item-circle .circle.right{
    right: -.23rpx;
}

.item-bottom {
	padding: 16rpx 20rpx;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.item-bottom .rules {
	font-size: 24rpx;
	font-weight: 500;
	color: #999;
	display: flex;
	line-height: 47rpx;
}

.item-bottom .rules span {
	width: 569rpx;
	overflow: hidden;  //超出隐藏
	white-space: nowrap; //不折行
	text-overflow: ellipsis;
}

.item-bottom .rules image {
	width: 20rpx;
	height: 20rpx;
	margin-left: 68rpx;
	margin-top: 15rpx;
}

.item-bottom .use {
	width: 133rpx;
	height: 47rpx;
	border: 1px solid #FC5209;
	border-radius: 23rpx;
	text-align: center;
	font-size: 25rpx;
	font-weight: 500;
	color: #fc5209;
	line-height: 47rpx;
}

.open {
	width: 569rpx;
	min-height: 30rpx;
	flex-wrap: wrap;
}

.duihuan {
	width: 293rpx;
	height: 67rpx;
	background: #fff;
	box-shadow: 0rpx 0rpx 7rpx 0rpx rgba(153,153,153,0.18);
	border-radius: 33rpx;
	font-size: 31rpx;
	font-weight: 500;
	color: #07C49B;
	text-align: center;
	line-height: 67rpx;
	margin-left: 228.67rpx;
	position: fixed;
	bottom: 52.67rpx;
}
.top-left {
	width: 140rpx;
}
.top-left .price {
  width: 100%;
  /* overflow: hidden; */
  white-space: nowrap;
}

.popupBox {
	background: #fff;
	border-radius: 20rpx;
	padding: 40.67rpx 39.33rpx 35.33rpx 40rpx;
}

.popupBox .name {
	font-size: 35rpx;
	color: #111;
	font-weight: bold;
	margin-bottom: 57.33rpx;
	text-align: center;
}

.popupBox input {
	width: 454rpx;
	height: 81rpx;
	border: 1px solid #D8D8D8;
	border-radius: 7rpx;
	font-size: 31rpx;font-weight: 500;
	color: #999999;
	line-height: 81rpx;
	margin: 0 39.33rpx 72.67rpx 40rpx;
	text-align: center;
}

.popupBox .btns {
	display: flex;
	align-items: center;
	font-size: 35rpx;
	justify-content: space-around;
}

.popupBox .btns .cancel {
	color: #111;
}

.popupBox .btns span {
	width: 1rpx;
	height: 53rpx;
	background: #D8D8D8;
}

.popupBox .btns .sub {
	color: #07C49B;
}

.hasUse {
	color: #999 !important;
}
.hasUse .item-top .top-left .price{
	color: #999 !important;
}
.hasUse .item-top .top-left .subtitle{
	color: #999 !important;
}
.hasUse .item-top .top-right .title {
	color: #999 !important;
}
.hasUse .item-top .top-right .time {
	color: #999 !important;
}
.hasUse .item-bottom .use {
	border: 1px solid #B3B3B3 !important;
	color: #999999 !important;
}

.noCoupon{
	padding-top: 524rpx;
	text-align: center;
	font-size: 31rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	
	.no-couPon{
		width: 173rpx;
		height: 173rpx;
		margin-bottom: 15rpx;
	}
}
</style>