jingheng_H5/pagesA/themes/default/components/themes-coupon-one.vue

<template>
	<view class="themes-coupon">
		<!-- <themes-chunk-title title="优惠立减" :iconSrc="event_rul + '/static/theme/conpon-icon.svg'"></themes-chunk-title> -->
		<scroll-view class="scroll-list" :scroll-x="true">
			<block v-for="(item, idx) in shopCoupon1" :key="idx">
				<!-- isUse 是按钮为'去使用'的优惠券 -->
				<view class="scroll-list__item" v-if="!item.isOver" :class="{ 'isUse': item.isUse }" @tap.stop="getcoupon" :data-idx="idx" :data-id="item.couponid" :data-price="item.price" :data-score="item.score">
					<image class="scroll-list__item-bg" :src="item.isUse ? event_rul + '/static/images/df-cunp1.png' : event_rul + '/static/images/df-cunp2.png'"></image>
					<view class="conpon-price">
						<view class="conpon-price-c flex j-center">
							<text class="price-f">¥</text>
							<text class="price-num font-w">{{ item.money }}</text>
						</view>
						<view class="conpon-price-h">满{{ item.minprice }}元使用</view>
					</view>
					<view class="conpon-btn  flex al-item-center flex-colum">
						<text class="" style="color: #9A521B;">{{ '优惠券' }}</text>
						<text class=" text-center" style="border-radius: 6rpx;" :class="item.isUse? 'use-b': 'get-b'">{{item.isUse ? '去使用' : '点击领取' }}</text>
					</view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	var app = getApp();
	import { mapState } from "vuex";
	import themesChunkTitle from './themes-chunk-title.vue'
	export default{
		components: {
			themesChunkTitle
		},
		props:{
			shopCoupon: {
				type: Array,
				default: function() {
					return [];
				},
			},
		},
		data() {
			return {
				shopCoupon1: this.shopCoupon,
				event_rul: app.globalData.event_url,
			}
		},
		watch: {
			shopCoupon (newV, oldV) {
				this.shopCoupon1 = newV;
			}
		},
		computed: {
			...mapState(['opt'])
		},
		methods: {
			// 点击领取
			getcoupon: function (e) {
				
				var that = this;
				var idx = e.currentTarget.dataset.idx;
				var id = e.currentTarget.dataset.id;
				var score = parseInt(e.currentTarget.dataset.score);
				var price = e.currentTarget.dataset.price;
				
				if (price > 0) {
					app.post('ApiCoupon/buycoupon', {id: id}, function (res) {
						console.log(res)
						if(res.status == 0) {
								app.error(res.msg);
						} else {
							app.goto('/pages/pay/pay?id=' + res.payorderid);
						}
					})
					return;
				}
				if (score > 0) {
					app.confirm('确定要消耗' + score + '' + that.t('积分') + '兑换吗?', function () {
						app.showLoading('兑换中');
						app.post('ApiCoupon/getcoupon', {id: id}, function (data) {
							app.showLoading(false);
							if (data.status == 0) {
								app.error(data.msg);
							} else {
								app.success(data.msg);
							}
						});
					});
				}
				that.shopCoupon.map((item,index) => {
					if(index === idx) {
						if(item.isUse) {
							uni.navigateTo({
								url:'/pages/shop/prolist?cpid='+ id
							})
						} else if(item.isOver) {
							return;
						} else {
							app.showLoading('领取中');
							app.post('ApiCoupon/getcoupon', {id: id}, function (data) {
								app.showLoading(false);
								if (data.status == 0) {
									app.error(data.msg);
								} else {
									app.success(data.msg);
									that.$set(item,"msg","去使用");
									that.$set(item,'isUse',true);
									that.$set(item,'isOver',false);
								}
							});
						}
					}
				})				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.themes-coupon {
		margin-top: 30rpx;
		// background: #FFF;
		border-radius: 20rpx;
		// padding: 0 0 24rpx 22rpx;
		.scroll-list {
			width: 104%;
			white-space: nowrap;
			& ::-webkit-scrollbar {
				display: none;
			}
			.scroll-list__item {
				display: inline-flex;
				// flex-direction: column;
				padding-bottom: 5px;
				align-items: flex-end;
				margin-right: 28rpx;
				position: relative;
				width: 232rpx;
				height: 104rpx;
				// padding: 14rpx;
				z-index: 1;
				&:last-child {
					margin-right: 22rpx;
				}
				&.isUse {
					// .conpon-price {
					// 	color: #CE0000;
					// }
					// .conpon-btn {
					// 	color: #CE0000;
					// }
				}
				&-bg {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					z-index: -1;
				}
				.conpon-price {
					width: 60%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: #7E4019;
					.conpon-price-c {
						// align-items: flex-start;
						align-items: baseline;
						.price-f {
							padding: 10rpx 2rpx 0 0;
							font-size: 24rpx;
							// line-height: 34rpx;
						}
						.price-num {
							font-size: 44rpx;
							// line-height: 100rpx;
							letter-spacing: 2rpx;
						}
					}
					.conpon-price-h {
						margin-top: -6rpx;
						font-size: 20rpx;
						font-weight: 500;
						line-height: 28rpx;
					}
				}
				.conpon-btn {
					width: 40%;
					
					justify-content: center;
					// margin-top: 35rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #333;
					// line-height: 34rpx;
					
					.use-b {			
						width: 76rpx;
						height: 26rpx;
						margin-top: 12rpx;
						font-size: 16rpx;
						line-height: 26rpx;
						border: 2rpx solid #7E4019;
					}
					
					.get-b {
						width: 76rpx;
						height: 26rpx;
						margin-top: 12rpx;
						font-size: 16rpx;
						line-height: 26rpx;
						background-color: #151515;
						color: #fff;
					}
				}
			}
		}
	}
	
	.top {margin-top: -70rpx;}
	.top-z {margin-top: 30rpx;}
	.top-m {margin-top: -40rpx;}
</style>