caimei-applets-caimei/pages/seller/cart/coupon-share.vue

<template>
	<view class="container clearfix" >
		<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading	="true" :loadingType="5"></tui-skeleton>
		<view class="container-content tui-skeleton" v-else>
			<view class="container-list">
				<view class="coupon-list">
					<view class="list-cell-le">
						<view class="list-cell-tags">
							<template v-if="coupon.moneyCouponFlag == 1">
								<text class="tags" v-if="coupon.moneyCouponType == 1"
									>意向{{ coupon.couponType | TypeFormat }}</text
								>
								<text class="tags" v-else>定向{{ coupon.couponType | TypeFormat }}</text>
							</template>
							<template v-else>
								<text class="tags">{{ coupon.couponType | TypeFormat }}</text>
							</template>
						</view>
						<view class="list-cell-price"> {{ coupon.couponAmount }}元满{{ coupon.touchPrice }}可用 </view>
						<view class="list-cell-texts">
							<text v-if="coupon.couponType == 0">
								{{ coupon.productType && coupon.productType == 1 ? '全商城商品通用' : '仅可购买指定商品' }}
							</text>
							<text v-if="coupon.couponType == 1">
								{{ coupon.categoryType == 1 ? '仅限购买产品类商品' : '仅限购买仪器类商品' }}
							</text> 
							<text v-if="coupon.couponType == 3">仅限购买店铺【{{ coupon.shopName }}】的商品</text>
							<text v-if="coupon.couponType == 4 || coupon.couponType == 2">全商城商品通用</text>
						</view>
						<view class="list-cell-time">{{ coupon.startDate }} - {{ coupon.endDate }}</view>
					</view>
					<view class="list-cell-ri">
						<view class="coupon-minMoney">售价</view>
						<view class="coupon-maxMoney"> <text class="small">￥</text> {{ coupon.moneyCouponPrice }} </view>
					</view>
				</view>
			</view>
			<view class="container-button">
				<view class="button" @click="createCouponRecord">￥{{ coupon.moneyCouponPrice }}购买</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import authorize from '@/common/config/authorize.js'
export default {
	data() {
		return {
			StaticUrl: this.$Static,
			isIphoneX: this.$store.state.isIphoneX,
			coupon: {},
			coupinList: [],
			userId: 0, // 机构Id
			couponId: 0, //优惠券Id
			payAmount: 100 ,//支付金额
			skeletonShow:true
		}
	},
	onLoad(option) {
		this.userId = option.userId
		this.couponId = option.couponId
		console.log('机构userId', this.userId)
		console.log('价值优惠券Id', this.couponId)
		this.initCouponDetail(this.couponId)
	},
	filters: {
		TypeFormat(value) {
			switch (value) {
				case 0:
					return '活动券'
					break
				case 1:
					return '品类券'
					break
				case 2:
					return '用户专享券'
					break
				case 3:
					return '店铺券'
					break
				case 4:
					return '新用户券'
					break
			}
		}
	},
	computed: {
		...mapState(['hasLogin', 'userInfo', 'identity', 'isActivity'])
	},
	methods: {
		initCouponDetail(couponId) {
			// 初始化优惠券信息
			this.ProductService.QueryCouponDetail({ couponId: couponId })
				.then(response => {
					this.coupon = response.data
					this.skeletonShow = false
				})
				.catch(error => {
					console.log('初始化优惠券信息异常~')
				})
		},
		createCouponRecord(){
			// 生成购买优惠券记录Id
			this.PayService.WeChatCouponRecord({
				userId: this.userId,
				couponId: this.couponId
			})
			.then(response => {
				this.MiniWxPayFor(response.data.couponRecordId)
			})
			.catch(error => {
				console.log(error)
			})
		},
		async MiniWxPayFor(couponRecordId) {
			const wechatcode = await authorize.getCode('weixin')
			this.PayService.WeChatCouponMiniWxPay({
				userId: this.userId,
				couponId: this.couponId,
				couponRecordId:couponRecordId,
				payWay: 'WEIXIN',
				code: wechatcode,
				source: 1 //支付来源 1 小程序 2 WWW
			})
				.then(response => {
					// 友盟埋点收集微信支付
					if (process.env.NODE_ENV != 'development') {
						this.$uma.trackEvent('Um_Event_shareCouponPay', {
							Um_Key_PageName: '分享优惠券',
							Um_Key_SourcePage: '线上支付优惠券',
							Um_Key_CouponId: `${this.couponId}`,
							Um_Key_userId: `${this.userId}`
						})
					}
					let PayInfo = JSON.parse(response.data.data.payInfo)
					this.WxRequestPayment(PayInfo)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		WxRequestPayment(data) {
			let self = this
			wx.requestPayment({
				timeStamp: data.timeStamp,
				nonceStr: data.nonceStr,
				package: data.package,
				signType: data.signType,
				paySign: data.paySign,
				success: function(res) {
					wx.reLaunch({ url: '/pages/tabBar/home/index' })
				},
				fail: function(res) {
					self.$util.msg('用户取消支付~')
				},
				complete: function(res) {}
			})
		},
		navigator(url) {
			this.$api.navigateTo(url)
		}
	},
	onShow() {}
}
</script>

<style lang="scss">
page {
	background-color: #FFFFFF;
}
.container {
	width: 100%;
	height: auto;
}
.container-list {
	box-sizing: border-box;
	padding: 24rpx;
	.empty-container-image {
		width: 260rpx;
		height: 260rpx;
		margin-top: -300rpx;
	}
	.toIndexPage {
		bottom: 390rpx;
	}
	.coupon-list {
		width: 702rpx;
		height: 200rpx;
		box-sizing: border-box;
		background: url(https://static.caimei365.com/app/img/icon/icon-coupon-buy@2x.png) no-repeat;
		background-position: center;
		background-size: auto 200rpx;
		position: relative;
		.list-cell-le {
			width: 502rpx;
			height: 100%;
			box-sizing: border-box;
			padding: 23rpx 32rpx;
			float: left;
			.list-cell-tags {
				width: 100%;
				height: 32rpx;
				margin-bottom: 7rpx;
				.tags {
					display: inline-block;
					padding: 0 10rpx;
					height: 32rpx;
					line-height: 32rpx;
					background: linear-gradient(270deg, #f94b4b 0%, #feb673 100%);
					color: #ffffff;
					font-size: $font-size-22;
					border-radius: 8rpx;
					text-align: center;
					float: left;
				}
			}
			.list-cell-price {
				width: 100%;
				height: 45rpx;
				line-height: 45rpx;
				font-size: $font-size-32;
				color: #333333;
				text-align: left;
				margin-top: 10rpx;
				font-weight: bold;
			}
			.list-cell-texts {
				width: 100%;
				height: auto;
				line-height: 40rpx;
				text-overflow: ellipsis;
				display: -webkit-box;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				font-size: 26rpx;
				color: #333333;
			}
			.list-cell-time {
				width: 100%;
				height: 32rpx;
				line-height: 32rpx;
				text-align: left;
				font-size: $font-size-20;
				color: #999999;
			}
		}
		.list-cell-ri {
			width: 200rpx;
			height: 100%;
			box-sizing: border-box;
			padding: 58rpx 0 0 0;
			float: right;
			.coupon-maxMoney {
				width: 100%;
				height: 78rpx;
				line-height: 78rpx;
				font-size: 40rpx;
				color: #f94b4b;
				text-align: center;
				.small {
					font-size: $font-size-26;
				}
			}
			.coupon-minMoney {
				width: 100%;
				height: 33rpx;
				line-height: 33rpx;
				font-size: $font-size-26;
				color: #f94b4b;
				text-align: center;
			}
		}
	}
}
.container-button {
	width: 100%;
	height: 90rpx;
	margin-top: 190rpx;
	.button {
		width: 600rpx;
		height: 90rpx;
		text-align: center;
		background: $btn-confirm;
		line-height: 90rpx;
		font-size: $font-size-30;
		color: #ffffff;
		margin: 0 auto;
		border-radius: 45rpx;
	}
}
</style>