front-end/mobile-code/src/components/app-coupon-sel.vue

<template>
	<div class="coupon-sel">
		<block v-if="!$util.isEmpty(shopUser)">
			<radio-group class="radio-group" name="coupon" @change="checkChange">
				<!-- 会员优惠 -->
				<div class="sel-list flex-center-between" v-if="discountArr.indexOf('member') > -1">
					<div class="sel-tit">
						<radio value="1" :checked="memberCheck">
							<span class="dis-pormpt">您是{{ shopUser.userAsset.member }}级会员，享{{ shopUser.userAsset.discount }}折优惠</span>
						</radio>
					</div>
					<!-- <div class="app-price app-size-28">-￥{{ totalDiscountPrice }}</div> -->
					<div class="app-price app-size-28"></div>
				</div>
				<!-- 优惠券优惠 -->
				<div class="sel-list" v-if="discountArr.indexOf('coupon') > -1">
					<div class="sel-tit">
						<radio value="2" >
							<span class="dis-pormpt">有优惠券可用，请选择</span>
						</radio>
					</div>
					<div class="coupon-wrap" v-show="selIndex == 2">
						<div class="coupon-list" v-for="(item, index) in data.coupon" :key="index" @click="couponChange(item, index + 1)">
							<div class="list-img">
								<!-- 已过期 -->
								<template v-if="couponSelInx && couponSelInx == (index + 1)">
									<img :src="`${constant.imgUrl}/retail/coupon/is-check.png`" alt mode="widthFix" />
								</template>
								<template v-else>
									<img :src="`${constant.imgUrl}/retail/coupon/no-check.png`" alt mode="widthFix" />
								</template>
							</div>
							<!-- 列表 -->
							<div class="list-det">
								<div class="list-det-left">
									<div class="price-wrap">
										<span>￥</span>
										<span class="price">{{ item.amount }}</span>
									</div>
									<div class="full-reduc app-size-28">满{{ item.miniCost }}可使用</div>
								</div>
								<div class="list-det-right">
									<div class="coupon-message">
										<div class="app-color-2">优惠券</div>
										<div>适用：全品类</div>
										<div>有效至：2020-10-11</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</radio-group>
		</block>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
// api
import { userDiscount } from '@/api/member'
import { getShopUser } from '@/utils/auth'
export default {
	name: 'coupon-sel',
	props: {
		// 可使用优惠列表
		// discountArr: {
		// 	type: Array,
		// 	default: () => []
		// }
		// 金额
		price: {
			type: [String, Number],
			default: 0
		}
	},
	data() {
		return {
			constant: this.$constant,
			memberCheck: false,
			selIndex: null,
			couponSelInx: null,
			couponId: 0,
			data: {}
		}
	},
	computed: {
		...mapGetters({ shopUser: 'getShopUser' }),
		// 可使用优惠列表
		discountArr() {
			let newArr = []
			if (this.$util.isEmpty(this.data)) return newArr
			if (!this.$util.isEmpty(this.data.member)) {
				newArr.push('member')
				this.selIndex = 1
				this.memberCheck = true
			}
			if (!this.$util.isEmpty(this.data.coupon)) {
				newArr.push('coupon')
			}
			return newArr
		},
		// 优惠金额
		totalDiscountPrice() {
			console.log(this.price)
			if (this.price) {
			// console.log(this.$util.floatFormat((this.price - this.price * this.shopUser.userAsset.discount / 10), 1))
			// return this.$util.floatFormat((this.price - this.price * this.shopUser.userAsset.discount / 10), 1)
				return ((this.price * 1000000) - (this.price * this.shopUser.userAsset.discount / 10) * 1000000) / 1000000
			} else {
				return 0
			}
		}
	},
	mounted() {
		// this.init()
		// getShopUser()
		// if (this.discountArr.indexOf('member') > -1) {
		// 	this.selIndex = 1
		// 	this.memberCheck = true
		// }
	},
	methods: {
		mInit() {
			// this._getUserDiscount()
		},
		async _getUserDiscount() {
			let arr = []
			await userDiscount().then(res => {
				this.data = res.data
				console.log('1111111')
				arr = this.discountArr
			})
			console.log('222222')
			return arr
		},
		checkChange(e) {
			this.selIndex = e.detail.value
			if (this.selIndex == 1) {
				this.couponId = 0
			}
			this.$emit('checkChange')
		},
		// 优惠券选择
		couponChange(item, index) {
			this.couponSelInx = this.couponSelInx == index ? null : index
			this.couponId = item.id
			this.$emit('couponChange')
		}
	}
}
</script>

<style lang="scss" scoped>
	.sel-list {
		.sel-tit {
			@include disFlex(center, flex-start);
			margin-top: 30px;
			.dis-pormpt {
				font-size: 28px;
				color: $fontColor2;
				margin-left: 6px;
			}
		}
		&:first-child .sel-tit {
			margin-top: 0;
		}
	}
	// 优惠券
	.coupon-wrap {
		padding-top: 20px;
		.coupon-list {
			position: relative;
			margin-bottom: 6px;
			.list-det {
				width: 100%;
				@include disFlex(center, space-between);
				position: absolute;
				top: 0;
				left: 0;
				.list-det-left {
					padding: 20px 0 20px 36px;
					width: 210px;
					color: $mainColor;
					.price-wrap {
						margin-bottom: 6px;
						font-size: 26px;
						.price {
							font-size: 60px;
							font-weight: bold;
							line-height: 1;
						}
					}
				}
				.list-det-right {
					width: calc(100% - 280px);
					margin-left: 22px;
					@include disFlex(center, space-between);
					padding: 20px 26px 20px 0;
					.coupon-message {
						color: $fontColor3;
						& > div {
							margin: 6px 0;
						}
					}
				}
			}
		}
	}
	// 修改uni-app组件
	/deep/.uni-radio-input-checked {
		background-color: $mainColor !important;
		border-color: $mainColor !important;
	}
</style>