yixiang/pageB/components/youhui.vue

<template>
	<view class="popu">
		<view class="top hflex acenter jbetween">
			<view></view>
			<view class="title">优惠券</view>
			<image src="../static/close.png" mode="aspectFill" @click="close"></image>
		</view>
		<view class="list vflex">
			<u-radio-group  placement="column" @change="selectaddress">
				<view class="list-item hflex acenter jbetween" :class="active == index ? 'active-item' : ''" v-for="(item,index) in list" :key="index" @click="select(index)">
					<image src="../static/youhuiquan.png" mode="aspectFill"></image>
					<view class="left vflex jbetween">
						<text>{{item.title}}</text>
						<text>{{item.intro}}</text>
					</view>
					<u-radio shape="circle" :name="index" activeColor="#00B0B0"></u-radio>
				</view>	
				<view class="list-item hflex acenter jbetween" :class="active == 0 ? 'active-item' : ''" @click="select('0')" v-if="type == 'vip'">
					<view class="name">使用</view>
					<u-radio shape="circle" :name="0" activeColor="#00B0B0"></u-radio>
				</view>
				<view class="list-item hflex acenter jbetween" :class="active == -1 ? 'active-item' : ''" @click="select('-1')">
					<view class="name">不使用</view>
					<u-radio shape="circle" :name="-1" activeColor="#00B0B0"></u-radio>
				</view>
			</u-radio-group>
		</view>	
		<view class="btns" @click="sure">
			确定
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		props: {
			list: {
				typeof: Array,
				default: []
			},
			type: {
				typeof: String,
				default: ''
			},
			index: {
				typeof: Number,
				default: -1
			}
		},
		data() {
			return {
				active: '',
			}
		},
		watch: {
			index(newvalue,oldvalue) {
				this.active = newvalue
			},
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		onPullDownRefresh() {
			
		},
		onReachBottom() {
			
		},
		methods: {
			selectaddress(e) {
				this.active = e
			},
			select(index) {
				this.active = index
			},
			sure() {
				this.$emit('select',this.active)
			},
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss">
	.popu {
		max-height: 70vh;
		overflow: auto;
		background: #FFFFFF;
		border-radius: 28rpx 26rpx 0rpx 0rpx;
		padding: 36rpx 28rpx;
		position: relative;
		.btns {
			position: fixed;
			bottom: 44rpx;
			left: 28rpx;
			width: 694rpx;
			height: 84rpx;
			background: #00B0B0;
			border-radius: 42rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 84rpx;
		}
		.list {
			padding: 0 0 144rpx;
			.active-item {
				background: rgba(0,176,176,0.06);
			}
			.list-item {
				padding: 32rpx 30rpx 28rpx;
				border-bottom: 1px solid #F1F7FE;
				background: #F8F8F8;
				border-radius: 16rpx;
				margin: 0 0 20rpx;
				.name {
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #222222;
				}
				.left {
					width: 450rpx;
					padding: 0 52rpx 0 20rpx;
					text:first-child {
						font-size: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #222222;
					}
					text:last-child {
						font-size: 24rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #666666;
						padding: 14rpx 0 0;
					}
				}
				image {
					width: 104rpx;
					height: 104rpx;
					margin: 0 28rpx 0 0;
				}
			}
		}
		.top {
			padding: 0 0 28rpx;
			.title {
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			image {
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
</style>