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

<template>
	<view class="container clearfix">
		<view class="container-list">
			<view class="coupon-list">
				<view class="list-cell-le">
					<view class="list-cell-tags">
						<text class="tags">{{ coupon.couponType | TypeFormat }}</text>
					</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.couponAmount }}
					</view>
				</view>
			</view>
		</view>
		<view class="container-button">
			<view class="button" @click="MiniWxPayFor">￥10000购买</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:{
					couponId:257,
					couponAmount:10000.00,
					touchPrice:20000.00,
					startDate:"2022.02.10",
					endDate:"2022.04.10",
					couponType:0,
					userId:null,
					shopId:null,
					productType:1,
					categoryType:null,
					shopName:null,
					useStatus:null,
					couponBtnType:0,
					usePeriod:null
				},
				coupinList:[],
				clubId:0 ,// 机构Id
				couponId:0,//优惠券Id
				payAmount:100 //支付金额
			}
		},
		onLoad(option) {
			this.clubId = option.clubId
			this.couponId = option.couponId
			console.log('机构Id',this.clubId)
			console.log('价值优惠券Id',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: {
			async initGetStotage() {
				const userInfo = await this.$api.getStorage()
				const clubInfo = await this.$api.getComStorage('orderUserInfo')
				this.shareClubId = clubInfo.clubId ? clubInfo.clubId : 0
			},
			async MiniWxPayFor(){
				const wechatcode = await authorize.getCode('weixin')
				const params ={
						payAmount:this.$reg.formatAccMul(this.payAmount,100),
						payWay:'WEIXIN',
						code:wechatcode,
						orderId:18399
					}
				this.PayService.WeChatMiniWxPay(params).then(response =>{
					// 友盟埋点收集微信支付
					if(process.env.NODE_ENV != 'development'){
						this.$uma.trackEvent('Um_Event_ConfirmWechatPay', {
							Um_Key_PageName: '微信支付',
							Um_Key_SourcePage: '线上支付',
							Um_Key_PayName:`${this.buttonText}`,
							Um_Key_PayOrderID:`${this.orderId}`
						})
					}
					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/user/user'})
					},
					'fail':function(res){
						self.$util.msg('用户取消支付~')
					},
					'complete':function(res){
			
					}
				})
			},
			navigator(url){
				this.$api.navigateTo(url)
			},	
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.QueryCouponList()
				uni.stopPullDownRefresh()
			}, 200)
		},
		onReachBottom() {
			if(this.hasNextPage){
				this.loadding = true
				this.pullUpOn = true
				this.getOnReachBottomData()
			}	
		},
		onShow(){
			this.initGetStotage()
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F7F7;
	}
	.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: 100%;
			height: 200rpx;
			box-sizing: border-box;
			background: url(https://static.caimei365.com/app/img/icon/icon-coupon-buy@2x.png);
			background-size: cover;
			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>