barter-app/pages/coupons/magDetails.vue

<template>
	<view class="content" v-if="!isLoding">
		<view class="details">
			<view class="header">
				<view class="info">
					<image class="info-cover" :src="details.cover" mode="aspectFill"></image>
					<view class="info-title">{{details.title}}</view>
				</view>
				<view class="info-item">
					<view class="info-item-title">优惠券类型</view>
					<view class="info-item-text">{{details.type.text}}</view>
				</view>
				<view class="info-item">
					<view class="info-item-title">上架状态</view>
					<view class="info-item-text">{{details.status.text}}</view>
				</view>
				<view class="info-item">
					<view class="info-item-title">使用渠道</view>
					<view class="info-item-text">{{details.use_way}}</view>
				</view>
				<view class="info-item" v-if="details.type.value === 2">
					<view class="info-item-title">满减</view>
					<view class="info-item-text">满{{details.price}}减{{details.full}}</view>
				</view>
				<view class="info-item">
					<view class="info-item-title">券发放量</view>
					<view class="info-item-text">{{details.quantity}}</view>
				</view>
				<view class="info-item">
					<view class="info-item-title">已发放量</view>
					<view class="info-item-text">{{details.grant_quantity}}</view>
				</view>
				<view class="info-item">
					<view class="info-item-title">每人限领</view>
					<view class="info-item-text">{{details.person_quantity == 0 ? '不限制': details.person_quantity}}</view>
				</view>
				<view class="info-item">
					<view class="info-item-title">券有效期(起)</view>
					<view class="info-item-text">{{details.start_at}}</view>
				</view>
				<view class="info-item">
					<view class="info-item-title">券有效期(止)</view>
					<view class="info-item-text">{{details.end_at}}</view>
				</view>
				<view class="info-item">
					<view class="info-item-title">创建时间</view>
					<view class="info-item-text">{{details.created_at}}</view>
				</view>
			</view>
			<view class="mian">
				<view class="mian-title">适用权证</view>
				<view class="mian-goods">
					<view class="item" v-for="(item, index) in details.goods" :key="index">
						<view class="item-title nowrap">{{item.name}}</view>
						<view class="item-price nowrap">￥{{item.price}}</view>
					</view>
				</view>
				<view class="mian-title">使用说明</view>
				<view class="mian-text">
					<text>{{details.description || '-'}}</text>
				</view>
			</view>
		</view>
		<view class="ios-bottom"></view>
		<!-- footer -->
		<view class="footer">
			<view class="footer-flex">
				<view class="item" @click="putStatus">{{details.status.value == 4 ? '上架': '下架'}}</view>
				<view class="item" @click="$Router.push({name: 'selectGoods', params: {couponId: details.coupon_id}})">关联商品</view>
			</view>
			<view class="ios-bottom"></view>
		</view>
	</view>
</template>

<script>
	import { magCouponsInfo, magCouponsStatus } from '@/apis/interfaces/coupons'
	export default {
		data() {
			return {
				isLoding: true,
				details	: {}
			};
		},
		onShow() {
			magCouponsInfo(16).then(res => {
				this.isLoding = false
				this.details  = res
			})
		},
		methods:{
			// 上下架
			putStatus(){
				magCouponsStatus(this.details.coupon_id).then(res => {
					uni.showToast({
						title: res,
						icon : 'none'
					})
					this.$set(this.details, 'status', this.details.status.value == 4 ? {'value': 2,'text': "上架"} : {'value': 4,'text': "下架"})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	// content
	.content{
		padding-bottom: $padding + 90;
	}
	// footer
	.footer{
		box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
		background: white;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: ($padding/2) $padding;
		.footer-flex{
			display: flex;
			justify-content: space-between;
			.item{
				line-height: 70rpx;
				width: 50%;
				text-align: center;
				color: $text-price;
				font-size: $title-size-lg;
				font-weight: bold;
				border-right: solid 1rpx $border-color;
				&:last-child{
					border: none;
				}
			}
		}
	}
	.details{
		margin: $margin;
		background: white;
		border-radius: $radius;
		// 优惠券信息
		.header{
			position: relative;
			border-bottom: dashed 2rpx $border-color;
			padding: $padding;
			&::after,&::before{
				position: absolute;
				width: 30rpx;
				height: 30rpx;
				background: #f8f8f8;
				content: " ";
				bottom: -16rpx;
				border-radius: 50%;
			}
			&::after{
				left: -16rpx;
			}
			&::before{
				right: -16rpx;
			}
			.info{
				padding: $padding 0;
				text-align: center;
				.info-cover{
					width: 128rpx;
					height: 128rpx;
					border-radius: 50%;
					vertical-align: top;
				}
				.info-title{
					padding-top: $padding;
					text-align: center;
					font-weight: bold;
					font-size: $title-size;
				}
			}
			.info-item{
				position: relative;
				padding-left: 200rpx;
				min-height: 60rpx;
				font-size: $title-size-lg;
				padding-bottom: $padding/3;
				&:last-child{
					padding-bottom: 0;
				}
				.info-item-title{
					position: absolute;
					left: 0;
					top: 0;
					line-height: 50rpx;
					color: $text-color;
				}
				.info-item-text{
					line-height: 50rpx;
					color: $text-gray;
					text-align: right;
					@extend .nowrap;
				}
			}
		}
		// 优惠券介绍
		.mian{
			padding: $padding;
			.mian-title{
				font-size: $title-size-lg;
				font-weight: bold;
				line-height: 50rpx;
				color: $text-color;
			}
			.mian-text{
				font-size: $title-size-m;
				color: $text-gray;
				padding-top: $padding/3;
			}
			.mian-goods{
				padding-bottom: $padding;
				.item{
					display: flex;
					justify-content: space-between;
					line-height: 60rpx;
					font-size: $title-size-m;
					padding-top: $padding/3;
					.item-title{
						width: 75%;
						color: $text-gray;
					}
					.item-price{
						width: 25%;
						color: $text-price;
						font-weight: bold;
						text-align: right;
					}
				}
			}
		}
	}
</style>