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/request'
	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:'/appInspection/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>