detection-user/pages/detection/coupon.vue

<template>
	<view class="content">
		<view class="c-top">
			<view class="" @click="getback()">
				<uni-icons type="left" size="18"></uni-icons>
			</view>
			<view class="c-title">优惠券</view>
			<view class=""></view>
		</view>
		<view class="ail">
			<view class="imgqs" v-if="arrlist == ''">
				<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
			</view>
			<view class="q-box" v-for="(item,index) in arrlist" :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/newRequest'
	import config from '@/config'
	export default {
		data() {
			return {
				id: '',
				type: '',
				arrlist: [],
			}
		},
		onLoad(option) {
			this.id = option.id
			this.type = option.type
			this.imgs = this.$baseUrl
			this.getcanUseCoupon()

		},
		mounted() {

		},
		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
				})
			},

			async getcanUseCoupon() {
				let res = await request({
					url: '/app-api/goods/canUseCoupon?objectId=' + this.id + '&type=' + this.type,
					method: 'get',
				})
				this.arrlist = res.data
			},
			getback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: calc(100vh);
		background-color: #F6F6F6;
		box-sizing: border-box;
		padding-top: 45px;
	}

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

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

	.ail {
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
	}

	.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;
	}

	.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;
	}

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

	.xuan {
		width: 16px;
		height: 16px;
		border-radius: 8px;
		border: 1px solid #B4B3B1;
		margin-left: 20px;
	}

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

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

	.imgqs {
		width: 200px;
		height: 200px;
		margin: 0 auto;
		margin-top: 150px;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>