hwnc/components/ui-component/U_coupon/m/index.vue

<template>
	<view class="component-wrapper" :style="wrapper_style">
		<view v-if="datas.show_title" class="morebox">
			<view :style="title_style" class="title">{{ title }}</view>
			<view  class="title2" @click="more">查看更多
				<u-icon :style="img_style2" color="#949494" name="arrow-right" size="14"></u-icon>
			</view>
		</view>
		<view>
			<view class="box1" v-if="show==1">
				<view class="coupon" :style="coupon" v-for="(item, index) in list" :key="item.id">
					<view :style="circle_style" class="circle"></view>
					<view :style="circle_style" class="circle2"></view>
					<div class="coupon_left">
						<div class="box_left">¥{{item.money}}</div>
						<div class="box_right">
							<div>{{item.type}}</div>
							<div>{{item.usemoney}}</div>
						</div>
					</div>
					<view class="coupon_right" @click="receive(item.batch_num)">领取</view>
				</view>
			</view>
			<view v-if="show==2" class="box2">
				<view class="coupon2" v-for="(item, index) in list" :key="item.id">
					<view class="coupon2_left">
						<div class="box2_top">¥{{item.money}}</div>
						<div class="box2_bottom">
							<div>{{item.type}}</div>
						</div>
					</view>
					<view class="coupon2_right" @click="receive(item.batch_num)">领取</view>
				</view>
			</view>
			<view class="box3" v-if="show==3">
				<view class="coupon3" v-for="(item, index) in list" :key="item.id">
					<div class="price">¥{{item.money}}</div>
					<div class="discount">{{item.type}}</div>
					<div class="mall">{{item.usemoney}}</div>
					<view class="receive" @click="receive(item.batch_num)">领取</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import mallApi from '@/api/mall/index.js'
	export default {
		props: ['styles', 'datas'],
		data() {
			let siteinfo = getApp().globalData.siteinfo;
			return {
				settingFile: siteinfo,
				emptyImage: siteinfo.root_img + '/static/app/image.png',
			}
		},
		computed: {
			/** 副标题内容 */
			title() {
				return this.datas.title || '优惠券';
			},
			img_style2() {
				return `
				width:15px;
				height:15px;
				margin:auto;
				`;
			},
			// 副标题栏样式
			title_style() {
				const {
					text_size,
					text_color,
				} = this.datas;
				return `
			    font-size: ${text_size}px;
			    color: ${text_color};
			`;
			},
			// 排列样式
			show() {
				const {
					button_number
				} = this.datas
				return button_number
			},
			/** 样式 */
			wrapper_style() {
				if (this.datas) {
					const {
						padding_top,
						padding_bottom,
						padding_left,
						padding_right,
						bg_color
					} = this.datas;
					return `
                padding-top: ${padding_top}px;
                padding-bottom: ${padding_bottom}px;
                padding-left: ${padding_left}px;
                padding-right: ${padding_right}px;
				background-color:${bg_color};
            `;
				}
			},
			coupon() {
				return `
				display: flex;
				justify-content: space-between;
				align-items: center;
				width:100%;
				margin:auto;	
				margin-bottom:10px;
				border-radius: 10px;
				`
			},
			img_style() {
				const {
					picture_border,
				} = this.datas;
				return `
                border-radius: ${picture_border}px;
            `;
			},

			circle_style() {
				const {
					bg_color
				} = this.datas
				return `
					background-color:${bg_color};
				`;
			},

			/** 标题 */
			list() {
				return this.datas.goods;
			},
		},
		methods: {
			more() {
				uni.navigateTo({
					url: '/pagesB/pages/getcoupon/getcoupon'
				})
			},
			receive(batch_num) {
				let that = this
				let params = {
					batch_num: batch_num
				}
				mallApi.getcoupon(params).then(res => {
					if (res.status === 200) {
						that.$api.msg(res.msg)
					} else {
						that.$api.msg(res.msg)
					}
				})
			}
		}
	};
</script>
<style lang="less" scoped>
	.component-wrapper {
		.morebox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;

			.title2 {
				font-size: 28rpx;
				display: flex;
				color: #949494;
				align-items: center;
			}
		}

		.box1 {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;

			.coupon {
				color: #fff;
				height: 80px;
				position: relative;

				.circle {
					height: 26px;
					width: 26px;
					border-radius: 13px;
					position: absolute;
					top: -13px;
					right: 26.5%;
					background-color: #fff;
				}

				.circle2 {
					height: 26px;
					width: 26px;
					border-radius: 13px;
					position: absolute;
					bottom: -13px;
					right: 26.5%;
					background-color: #fff;
				}

				.coupon_left {
					background-image: linear-gradient(#BD8AFF, #5053FF);
					height: 100%;
					width: 70%;
					display: flex;
					justify-content: space-around;
					align-items: center;
					border-radius: 10px;

					.box_left {
						width: 30%;
						text-align: center;
						line-height: 80px;
						font-size: 27px;
					}

					.box_right {
						border-right: 2px dashed #fff;
						height: 50px;
						line-height: 25px;
						width: 70%;
						text-align: left;
						font-size: 13px;
					}
				}

				.coupon_right {
					background-image: linear-gradient(#BD8AFF, #5053FF);
					border-radius: 10px;
					width: 30%;
					height: 80px;
					line-height: 80px;
					text-align: center;
					font-size: 14px;
				}
			}
		}

		.box2 {
			display: flex;
			flex-wrap: wrap;
			width: 100%;

			.coupon2 {
				width: 45%;
				height: 90px;
				margin: 0 2.5%;
				margin-bottom: 15px;
				border-radius: 15px;
				background-image: linear-gradient(#BD8AFF, #5053FF);
				color: #fff;
				display: flex;
				align-items: center;

				.coupon2_left {
					width: 80%;
					text-align: center;

					.box2_top {
						font-size: 27px;
						margin-bottom: 5px;
					}
				}

				.coupon2_right {
					width: 20%;
					padding: 10px;
					font-size: 17px;
					writing-mode: lr-tb;
					text-align: center;
				}
			}
		}

		.box3 {
			display: flex;
			flex-wrap: wrap;
			width: 100%;

			.coupon3 {
				color: #fff;
				background-image: linear-gradient(#BD8AFF, #5053FF);
				width: 31.3%;
				margin: 0 1%;
				margin-bottom: 15px;
				padding: 15px 0;
				font-weight: lighter;
				border-radius: 15px;
				text-align: center;

				.price {
					font-size: 25px;
					margin-bottom: 10px;
					font-weight: lighter;
				}

				.discount {
					font-size: 15px;
					margin-bottom: 10px;
				}

				.mall {
					width: 100%;
					font-size: 13px;
					margin-bottom: 10px;
				}

				.receive {
					height: 25px;
					width: 60px;
					line-height: 25px;
					background-color: aliceblue;
					color: #1889f6;
					display: inline-block;
					border-radius: 15px;
					margin-top: 10px;
				}
			}
		}
	}
</style>