detection-user/pages/detection/my-coupon.vue

<template>
	<view class="container">
		<view class="c-top">
			<view class="" @click="getfanhui()">
				<uni-icons type="left" size="18" color="black"></uni-icons>
			</view>
			<view class="c-title">我的优惠券 </view>
			<view style="width: 8%; height: 1px;"></view>
		</view>
		<view class="c-tap">
			<view class="tap-box" v-for="(item,index) in taplist" :key="index" @click="gettap(index)">
				<view :class="{'lan' : actindex == index}">{{item.dictLabel}}</view>
				<view class="gang" v-if="actindex == index"></view>
			</view>
		</view>
		<view class="ail">
			<view class="bjimg" v-if="couponarr == ''">
				<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
			</view>

			<view class="q-box" v-for="(item,index) in couponarr" :key="index"
				@click="getcouponId(item.couponId,item.discount,item.title,item.couponType)">
				<view class="dix">
					<view class="qimg">
						<image src="http://www.nuoyunr.com/lananRsc/detection/yhq.png" mode=""></image>
					</view>
					<view>
						<view class="q-title">{{item.title}}</view>
						<view class="q-hui">有效期{{item.startTime}}-{{item.expirationTime}}</view>
					</view>
				</view>
				<view class="dix">
					<view class="">
						<view class="ju"><text class="xju">￥</text> {{item.discount / 100}}</view>
					</view>
					<view class="xuan"></view>
				</view>
			</view>

		</view>


	</view>
</template>

<script>
	import request from '../../utils/request'
	import config from '@/config'
	export default {
		data() {
			return {
				actindex: 0,
				type: '',
				taplist: [{
						dictLabel: '待使用'
					},
					{
						dictLabel: '已使用'
					},
					{
						dictLabel: '已过期'
					}
				],
				couponarr: []
			}
		},
		onShow() {
			this.getListByUserId()
		},
		methods: {
			getcouponId(id, discount, title, couponType) {
				let data = {
					couponId: id,
					discount: discount / 100,
					title: title,
					couponType: couponType,
				}
				uni.$emit('userCouponDiscount', data)
				uni.navigateBack({
					delta: 1
				})
			},
			gettap(index, item) {
				this.actindex = index
				this.getListByUserId()
			},
			getfanhui() {
				uni.navigateBack()
			},
			async getListByUserId() {

				const res = await request({
					url: '/system/ShopCoupon/listByUserId',
					data: {
						couponStatus: this.actindex,
						pageSize: 99,
						pageNum: 1
					}
				})
				this.couponarr = res.rows
				console.log(res);



			},

		}

	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: calc(100vh);
		background-color: #F6F6F6;
		// background: url('http://www.nuoyunr.com/lananRsc/jcbjt.png') center no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding-bottom: 15px;
	}

	.c-top {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		padding-top: 15%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
	}

	.c-title {
		font-size: 18px;
		color: black;
		font-weight: bold;
	}

	.c-tap {
		width: 100%;
		height: 40px;
		box-sizing: border-box;
		padding: 15px;
		display: flex;
		background-color: white;
		align-items: center;
	}

	.tap-box {
		width: 33%;
		text-align: center;

	}

	.gang {
		height: 4px;
		background: #0D2E8D;
		width: 50%;
		margin: 0px auto;
	}

	.lan {
		color: #0D2E8D;
	}

	.ail {
		box-sizing: border-box;
		padding: 15px;

	}

	.bjimg {
		width: 255px;
		height: 236px;
		margin: 0px auto;
		margin-top: 100px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.coupon {
		width: 100%;
		height: 100px;
		background: url('http://www.nuoyunr.com/lananRsc/quanbg.png') center no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 15px;
		position: relative;
		overflow: hidden;
	}

	.c-left {
		width: 60%;
		height: 100%;

	}

	.c-right {
		width: 40%;
		height: 100%;
	}

	.paragraph {
		width: 100%;
		color: rgba(51, 51, 51, 1);
		font-size: 38rpx;
		font-weight: 700;
		text-align: left;
		margin: 15px 0px;

	}

	.text {
		overflow-wrap: break-word;
		color: rgba(104, 104, 104, 1);
		font-size: 24rpx;
		font-weight: NaN;
		text-align: left;
		white-space: nowrap;
		line-height: 24rpx;

	}

	.ju {
		width: 100%;
		text-align: center;
		overflow-wrap: break-word;
		color: rgba(255, 134, 27, 1);
		font-size: 50rpx;
		font-weight: 700;
		white-space: nowrap;
		line-height: 50rpx;
		margin-top: 20px;
	}

	.ysj {
		position: absolute;
		top: 0px;
		left: 0px;
		background-color: rgba(255, 179, 81, 1);
		border-radius: 6px 0px 6px 0px;
		width: 100rpx;
		height: 44rpx;
		text-align: center;
		font-size: 14px;
		font-weight: bold;
	}

	.q-box {
		width: 100%;
		height: 82px;
		background: #FFFFFF;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.dix {
		display: flex;
		align-items: center;
	}

	.qimg {
		width: 60px;
		height: 60px;
		margin-right: 10px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.q-title {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20px;
	}

	.q-hui {
		font-size: 13px;
		font-weight: 400;
		color: #666666;
	}

	.ju {
		font-size: 30px;
		font-weight: 400;
		color: #FF571A;
		margin-bottom: 0px;
	}

	.xju {
		font-size: 14px;
		font-weight: 400;
		color: #FF571A;
	}
</style>