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>
		<!-- 弹窗提示 -->
		<tui-modal
			:show="modal"
			@click="handleClick"
			@cancel="hideMobel"
			:content="contentModalText"
			:button="modalButton"
			color="#333"
			:size="32"
			shape="circle"
			:maskClosable="false"
		>
		</tui-modal>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import wxLogin from '@/common/config/wxLogin.js'
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,
			contentModalText: '', //操作文字提示语句
			modal: false,
			modalButton: [
				{
					text: '取消',
					type: 'gray',
					plain: true //是否空心
				},
				{
					text: '去升级',
					customStyle: {
						color: '#fff',
						bgColor: 'linear-gradient(90deg, #F28F31 0%, #E15616 100%)'
					},
					plain: false
				}
			],
		}
	},
	onLoad(option) {
		wxLogin.wxLoginAuthorize()
		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 => {
				if(error.code == -1){//个人机构不能购买
					this.contentModalText ='该优惠券仅限医美机构购买，请升级为医美机构后再次购买。'
					this.modal = true
					
				}else if(error.code == -2){//会员机构不是医美机构不能购买
					this.$util.msg('该优惠券仅限医美机构购买', 2000)
				}
			})
		},
		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) {}
			})
		},
		hideMobel(){
			this.modal = false
		},
		handleClick(e){
			//个人机构跳转升级页面
			if (e.index == 1) {
				this.$api.navigateTo('/pages/login/apply')
			}
			this.modal = false
		},
		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>