<template>
	<view class="paySuccess">
		<far-bottom></far-bottom>
		<!-- 头部 -->
		<view class="paySuccessTitle">
			<view class="payTitleTips">
				<image :src="imgfixUrls+ 'merchant/paySucImg.png'" />
				<view>
					<p>{{drawid?'领取成功':'支付成功'}}!</p>
					<p v-if="!drawid">实付 {{ payInfo.price }}</p>
				</view>
			</view>
			<view class="payTitleButton">
				<view @click="goIndex('pages/mainPages/index/index')" v-if="payInfo.plugin != 'housekeep'"><span>返回首页</span></view>
				<view @click="goIndex('pages/subPages2/homemaking/homeUser/homeUser')" v-if="plugin == 'housekeep'"><span>返回个人中心</span></view>
				<view @click="goIndex('pagesA/identityList/identityList')" v-if="pluginIndex == 3"><span>返回认证列表</span></view>
				<view @click="goykt" v-if="pluginIndex != 3&&(payInfo.plugin=='halfcard'||payInfo.plugin=='member'||payInfo.plugin=='payonline'||payInfo.plugin=='charge'||payInfo.plugin=='pocket'||payInfo.plugin=='wlfightgroup'||payInfo.plugin=='distribution'||payInfo.plugin=='wlcoupon'||payInfo.plugin=='attestation'||payInfo.plugin=='taxipay'||payInfo.plugin=='citycard')"><span>返回{{payInfo.fightstatus == 1?'组团': plguinList[pluginIndex]}}</span></view>
				<view  v-else-if="payInfo.plugin=='recruit'" @click="gowork">
					<span>返回列表</span>
				</view>
				<view @click="goOrderDetails" v-else-if="payInfo.plugin !='vehicle' && payInfo.plugin !='housekeep' && payInfo.plugin !='dating'"><span>查看订单</span></view>
				
			</view>
		</view>
		<!-- 头部 -->

		<!-- 支付详情 -->
		<view class="paymentDetails">
			<view class="paymentDetailsPackage">
				<view>
					<span>支付方式</span>
					<span>{{ payInfo.paytype }}</span>
				</view>
				<view v-if="payInfo.integral !== undefined && payInfo.integral != 0">
					<span>{{TextSubstitution.credittext}}奖励</span>
					<span>获得{{ payInfo.integral }}{{TextSubstitution.credittext}}</span>
				</view>
				<view v-if="Number(payInfo.balance)">
					<span>余额奖励</span>
					<span>获得{{ payInfo.balance }}元</span>
				</view>
				<view v-if="!!payInfo.code&&payInfo.code!=''">
					<span>激活码</span>
					<span>{{ payInfo.code }}<span style="color: #FF4444;padding-left: 10upx;" @click="copy(payInfo.code)">前往激活</span></span>
					
				</view>
			</view>
			<view class="paymentDetailsPackage" style="border-top: 20upx solid #F8F8F8;" v-if="tops.length > 0 && payInfo.plugin=='recruit'">
				<view style="margin-bottom: 30upx;">
					<span>信息置顶,持续提高曝光度</span>
				</view>
				<view class="f-26 col-6" style="margin: 0;border-top: 1upx solid #EEEEEE;padding: 25upx 0;" v-for="(item,index) in tops" :key="index" @click="StickyChange(item)">
					<text class="f-26 col-6">
						{{item.title}}
					</text>
				</view>
			</view>
		</view>
		<!-- 支付详情 -->

		<!-- 卡劵 -->
		<view class="coupon" v-if="!!payInfo.couponlist">
			<view class="couponPackage">
				<view class="couponLeft">
					<view>
						<image :src="imgfixUrls+ 'merchant/juan.png'" />
'					</view>
					<span>{{payInfo.couponlist[0]}}</span>
				</view>
				<view class="couponRight" v-if="payInfo.getcouflag == 0" @click="getCoupon"><span>领取</span></view>
				<view class="couponRight" v-if="payInfo.getcouflag == 1"><span>已领取</span></view>
			</view>
		</view>
		<!-- 卡劵 -->
		
		<!-- 红包 -->
				<view class="coupon" v-for="(redPacketItem,index) in payInfo.redpacklist" :key="index" v-if="!!payInfo.redpacklist.length>0">
					<view class="couponPackage">
						<view class="couponLefts" style="width: 100%;">
							<view class="usedpacket-list-item dis-flex m-btm20">
								<view class="usedpacket-itemleft p-r dis-flex flex-dir-column flex-x-center">
									<view class="usedpacket-priceStyle col-f f-50 t-c"><text class="f-30">¥</text>{{redPacketItem.cut_money}}</view>
									<view class="f-24 col-f t-c">满{{redPacketItem.full_money}}可用</view>
									<view class="itemleft_bgstyle"></view>
									<view class="itemleft_bgstyle2"></view>
								</view>
								<view class="usedpacket-itemright p-r flex-box b-f padding-box-all">
									<view class="usedpacket_titleType dis-flex flex-y-center">
										<!-- <view class="usedpacketType t-c m-right10 dis-flex flex-y-center"><text class="col-f f-24">{{redPacketItem.}}</text></view> -->
										<view class="usedpacketTitle onelist-hidden f-28 col-3">{{redPacketItem.title}}</view>
									</view>
									<view class="col-9 f-24 m-top-btm10 usedpacket-time onelist-hidden">范围：{{redPacketItem.use_where}}</view>
									<view class="col-9 f-24">{{redPacketItem.usetime_text}}</view>
									<!-- <view class="getDraw t-c col-f f-24" @click="getDraw(redPacketItem.id)" v-if="!redPacketItem.is_over"></view>
									<view class="getDraw t-c col-f f-24" style="background-color: #999999;" v-else>已领完</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>
				
				
				<!-- 红包 -->
		
		<!-- 广告 -->
		<view class="buyOrder_button_swiper" v-if="plugin=='taxipay'">
			<swiper :indicator-dots="indicatorDots" :indicator-active-color="indicatorActiveColor" :autoplay="autoplay"
			 :interval="interval" :circular="circular">
				<!-- 循环模板 -->
				<swiper-item v-for="(item, index) in masterAdvs" :key="index" @click="go(item.link)">
					<image :src="item.thumb" class="swiperImg" />
				</swiper-item>
				<!-- 循环模板 -->
			</swiper>
		</view>
		<view class="advertisement" @click="goThumb" v-if="!!payInfo.thumb&&plugin!='taxipay'">
			<image :src="payInfo.thumb" />
		</view>
		<!-- 广告 -->

		<!-- 推荐商品 -->
		<view class="tuiJian" v-if="recommendGoodlength > 0">
			<view class="tuiJianTitle">
				<view class="dot"></view>
				<span v-if="pluginIndex == 11">{{names}}</span>
				<span v-else>推荐商品</span>
				<view class="dot"></view>
			</view>
			<view class="tuiJianBody" v-if="pluginIndex == 11">
				<tab-contro :tabData="payInfos.tabinfo.data" :tabStyle="payInfos.tabinfo.style" :controType="payInfos.tabinfo.id"
				 :tabParmsType="[payInfos.tabinfo.params]"></tab-contro>
			</view>
			<RecommendGoods @recommendGoodNoOff="recommendGoodNoOff" v-else></RecommendGoods>
		</view>
		<view  style="padding: 60upx 0;" v-else>
			
		</view>
		<!-- 推荐商品 -->
	</view>
</template>

<script>
	import App from '@/common/js/app.js';

	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	// #endif

	import RecommendGoods from '@/components/page/pageComponents/Recommend_goods';
	import tabContro from '@/components/page/pageComponents/tabContro';
	let innerAudioContext = uni.createInnerAudioContext();

	export default {
		components: {
			RecommendGoods,
			tabContro
		},
		data() {
			return {
				type: 'options',
				circular: true,
				interval: 2000,
				autoplay: true,
				indicatorActiveColor: 'white',
				indicatorDots: true,
				masterAdvs: [],
				pluginIndex: null,
				tid: null,
				payInfo: {},
				payInfos:{},
				plugin: null,
				plguinList: ['一卡通', '个人中心', '消费记录', '店铺列表', '帖子详情', '详情', '个人中心', '', '详情', '卡卷详情', '认证中心', '订单列表', '我的名片'],
				temp_type: "",
				img:'',
				names:'',
				recommendGoodlength:0,
				state:1,
				drawid:0,
				tops:[],
				TextSubstitution:{}
			};
		},
		onLoad: function(option) {
			// debugger
			this.img= this.imgfixUrl;
			this.tid = option.tid;
			this.TextSubstitution = uni.getStorageSync('TextSubstitution');
			if(option.draw){
				this.drawid = option.draw;
			}
			if(option.state){
				this.state = option.state;
			}
			if (option.plugin == 'halfcard') {
				this.plugin = option.plugin;
			}
			if (option.plugin == 'housekeep') {
				this.plugin = option.plugin;
			}
			
			this.init();
			if(option.plugin == 'recruit'){
				this.getTop();
			}
		},
		onShow() {
			innerAudioContext.play();
		},
		methods: {
			getDraw(redPacket_id) {
				let _this = this;
				uni.showLoading()
				App._post_form('&p=redpack&do=getRedPack', {
					id: redPacket_id,
					red_pack_source: '1'
				}, res => {
					if (res.errno === 0) {
						App.showSuccess('领取成功');
						_this.getRedPacket();
					}
				}, false, () => {
					uni.hideLoading()
				})
			},
			StickyChange(item){
				let data = {
					type:'post',
					recruit_id:this.payInfo.recruit_id,
					top_day:item.day, 
					top_price:item.price
				}
				App._post_form(
					`&p=recruit&do=recruitTop`,
					data,
					res => {
						console.log(res);
						App.navigationTo({
							url:'pages/mainPages/payment/payment?orderid='+res.data.orderid+`&plugin=${res.data.type}`
						})
					},
					false,
					() => {}
				);
			},
			getTop(){
				App._post_form('&p=recruit&do=recruitTop', {}, res => {
					this.tops = res.data;
					this.tops.map(item => {
						item.title = `置顶${item.day}天仅需${item.price}元`;
					});
					console.info('masterAdvs', _this.tops)
				});
			},
			copy(text){
				App.navigationTo({
					url: 'pages/mainPages/memberCard/getMembership/getMembership?card=nhave&code=' + text
				});
			},
			recommendGoodNoOff(res){
				console.log(res.length,'推荐奖长度');
				this.recommendGoodlength = res.length;
			},
			go(link) {
				let _this = this;
				App.navigationTo({
					url: link
				});
			},
			init() {
				let _this = this;
				_this.payOver();

			},
			pay_bill(masid) {
				let _this = this;
				let data = {
					masid: masid
				};
				App._post_form('&p=taxipay&do=pay_adv', data, res => {
					_this.masterAdvs = res.data.adv;
					console.info('masterAdvs', _this.masterAdvs)
				});
				App._post_form('&p=taxipay&do=tabInfo', data, res => {
					console.log(res,'hudadssadsadad');
					_this.payInfos = res.data;
					this.names = res.data.tabtitle;
					// console.info('masterAdvs', _this.masterAdvs)
				});
			},
			// 跳转
			goIndex(url) {
				this.saveForm(this.temp_type);
				if(this.plugin == 'dating'){ //相亲去相亲首页
				let aid = uni.getStorageSync('agencyData').aid
				let urls = `pages/mainPages/index/diypage?i=1&aid=${aid}&type=16`;
					App.navigationTo({
						url: urls
					})
				}else if(this.plugin == 'vehicle'){
					App.navigationTo({
						url: 'pages/subPages2/hitchRide/index/index'
					})
				}else{
					App.navigationTo({
						url: url
					})
				}
			},
			gowork(){
				if(this.payInfo.release_sid == 0){
					App.navigationTo({
						url: 'pages/subPages2/hirePlatform/recruitmentEnter/recruitmentEnter'
					})
				}else{
					App.navigationTo({
						url: 'pages/subPages2/hirePlatform/recruitmentEnter/recruitmentEnter?sid=' + this.payInfo.release_sid 
					})
				}
				
			},
			goykt() {
				let _this = this
				_this.saveForm(_this.temp_type);
				if (_this.pluginIndex == 0) {
					App.navigationTo({
						url: 'pages/mainPages/memberCard/memberCard'
					})
				}
				if (_this.pluginIndex == 1) {
					App.navigationTo({
						url: 'pages/mainPages/userCenter/userCenter'
					})
				}
				if (_this.pluginIndex == 2) {
					App.navigationTo({
						url: 'pages/subPages/consumptionRecords/consumptionRecords'
					})
				}
				if (_this.pluginIndex == 3) {
					App.navigationTo({
						url: 'pages/subPages/merchant/merchantChangeShop/merchantChangeShop'
					})
				}
				if (_this.pluginIndex == 4) {
					App.navigationTo({
						url: 'pages/subPages/postDetails/postDetails?id=' + _this.payInfo.tieziid
					})
				}
				if (_this.pluginIndex == 5) {
					App.navigationTo({
						url: 'pages/subPages/group/assemble/assemble?orderid=' + _this.payInfo.orderid + '&plugin=wlfightgroup' +
							'&id=' + _this.payInfo.fightgoodsid
					})
				}
				if (_this.pluginIndex == 6) {
					App.navigationTo({
						url: 'pages/mainPages/userCenter/userCenter'
					})
				}
				if (_this.pluginIndex == 7) {
					App.navigationTo({
						url: 'pages/subPages/orderList/orderList'
					})
				}
				if (_this.pluginIndex == 8) {
					App.navigationTo({
						url: 'pages/subPages/orderList/orderDetails/orderDetails?orderid=' + _this.payInfo.orderid +
							'&plugin=wlfightgroup'
					})
				}
				if (_this.pluginIndex == 9) {
					App.navigationTo({
						url: 'pages/subPages/coupon/couponDetails/couponDetails?order_id=' + _this.payInfo.orderid + '&id=' + _this.payInfo
							.couponid
					})
				}
				if (_this.pluginIndex == 10) {
					App.navigationTo({
						url: 'pages/subPages/attestationCenter/index?rzType=' + _this.payInfo.type
					})
				}
				if (_this.pluginIndex == 11) {
					App.navigationTo({
						url: 'pages/subPages/orderList/orderList'
					})
				}
				if (_this.pluginIndex == 12) {
					App.navigationTo({
						url: 'pages/subPages/businesscard/carddetail/renewcarddetail'
					})
				}
			},
			// 跳转详情
			goOrderDetails() {
				let _this = this;
				
				_this.saveForm(_this.temp_type)
				if (_this.payInfo.plugin == 'citydelivery') {
					App.navigationTo({
						url: 'pages/subPages/orderList/orderTakeout/orderTakeout?orderid=' + _this.payInfo.orderid + '&plugin=' + _this
							.payInfo
							.plugin + '&state=' + _this.state
					})
				} else if(_this.payInfo.plugin == 'housekeep'){
					App.navigationTo({
						url: 'pages/subPages2/homemaking/myorderForm/myorderForm?type=1'
					})
				}else{
					App.navigationTo({
						url: 'pages/subPages/orderList/orderDetails/orderDetails?orderid=' + _this.payInfo.orderid + '&plugin=' + _this
							.payInfo
							.plugin
					})
				}

			},
			// 领取支付有礼卡券
			getCoupon() {
				let _this = this;
				let data = {
					id: _this.payInfo.paidprid
				};
				App._post_form('&p=pay&do=getCoupon', data, res => {
					uni.showToast({
						icon: 'none',
						title: '领取成功',
						duration: 2000
					});
				});
			},
			goThumb() {
				let _this = this;
				App.navigationTo({
					url: _this.payInfo.thumburl
				});
			},
			// 订单支付成功
			payOver() {
				let _this = this;
				let data = {
					tid: _this.tid,
				};
				App._post_form('&p=pay&do=payOver', data, res => {
					_this.payInfo = res.data;
					this.plugin = res.data.plugin;
					
					if (res.data.plugin == 'halfcard') {
						_this.pluginIndex = 0
					} else if (res.data.plugin == 'member') {
						_this.pluginIndex = 1
					} else if (res.data.plugin == 'payonline') {
						_this.pluginIndex = 2
					} else if (res.data.plugin == 'charge') {
						_this.pluginIndex = 3
					} else if (res.data.plugin == 'pocket') {
						App.navigationTo({
							url: `pages/mainPages/successRelease/successRelease?id=${res.data.tieziid}`,
							navType: 'rediRect'
						})
					} else if (res.data.plugin == 'wlfightgroup') {
						if (res.data.fightstatus == 2) {
							_this.pluginIndex = 8
						} else {
							_this.pluginIndex = 5
						}
					} else if (res.data.plugin == 'distribution') {
						_this.pluginIndex = 6
					} else if (res.data.plugin == 'wlcoupon') {
						_this.pluginIndex = 9
					} else if (res.data.plugin == 'attestation') {
						_this.pluginIndex = 10
					} else if (res.data.plugin == 'taxipay') {
						innerAudioContext.src = res.data.noticeurl;
						//#ifdef H5
						    jWeixin.ready(() => {
						     jWeixin.getLocation({
						      type: 'gcj02',
						      success: function(res) {
						       innerAudioContext.play();
						      }
						     });
						    });
						    //#endif
							//#ifndef H5
							innerAudioContext.play();
							//#endif
						innerAudioContext.onPlay(() => {
						  console.log('开始播放');
						});
						_this.pluginIndex = 11
						_this.pay_bill(res.data.masid);
					} else if (res.data.plugin == 'citycard') {
						_this.pluginIndex = 12
					} else{
						_this.pluginIndex = 7
					}
					// #ifndef H5
					_this.temp_type = res.data.temp_type;
					// #endif
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.buyOrder_button_swiper {
		width: 690upx;
		height: 250upx;
		border-radius: 10upx;
		overflow: hidden;
		margin: 20upx auto 0 auto;
	}

	.swiperImg {
		width: 690upx;
		height: 250upx;
	}

	.dot {
		width: 15upx;
		height: 15upx;
		background: rgba(255, 68, 68, 1);
		border-radius: 50%;
	}

	.tuiJian {
		text-align: center;
		margin: 40upx;
	}

	.tuiJianTitle {
		>view {
			vertical-align: middle;
			display: inline-block;
		}

		>span {
			margin: 0 20upx;
			vertical-align: middle;
			font-size: 30upx;

			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}

	page {
		overflow-x: hidden;
		background: #f8f8f8;
	}

	.paySuccess {
		width: 750upx;
		overflow-x: hidden;
		background: #f8f8f8;
		font-size: 0;
	}

	.tuiJianTitle {
		margin: 50upx 0;
	}

	.paySuccessTitle {
		border: 1upx solid rgba(0, 0, 0, 0);
		width: 750upx;
		height: 357upx;
		background: rgba(255, 94, 70, 1);
	}

	.payTitleTips {
		margin-top: 16upx;
		text-align: center;

		>image {
			vertical-align: middle;
			width: 150upx;
			height: 150upx;
		}

		>view {
			margin-left: 44upx;
			vertical-align: middle;
			display: inline-block;

			>p:nth-child(1) {
				margin-top: 1upx;
			}

			>p:nth-child(2) {
				margin-top: 10upx;
			}

			>p {
				text-align: left;
				margin: 0;
				padding: 0;
				font-size: 28upx;

				font-weight: bold;
				color: rgba(255, 255, 255, 1);
			}
		}
	}

	.payTitleButton {
		text-align: center;
		margin-top: 0upx;

		>view {
			margin: 0 20upx;
			display: inline-block;
			width: 180upx;
			height: 62upx;
			border: 1upx solid rgba(255, 255, 255, 1);
			border-radius: 31upx;
			text-align: center;

			>span {
				line-height: 62upx;
				font-size: 28upx;


				color: rgba(255, 255, 255, 1);
			}
		}
	}

	.paymentDetails {
		margin: -83upx auto 0 auto;
		width: 690upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;
	}

	.paymentDetailsPackage {
		padding: 30upx;

		>view:nth-child(2) {
			margin-top: 40upx;
		}

		>view:nth-child(3) {
			margin-top: 40upx;
		}

		>view {
			display: flex;
			justify-content: space-between;

			>span {
				font-size: 24upx;


			}

			>span:nth-child(1) {
				color: rgba(153, 153, 153, 1);
			}

			>span:nth-child(2) {
				color: rgba(51, 51, 51, 1);
			}
		}
	}

	.coupon {
		margin: 20upx auto 0 auto;
		width: 690upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;
	}

	.couponPackage {
		padding: 30upx;
		display: flex;
		justify-content: space-between;

		>view {
			display: inline-block;
		}
	}
	.couponLefts {
		width: 100%;
		.usedpacket-list-item {
				height: 170upx;
	
				.usedpacket-itemleft {
					width: 30%;
					height: 100%;
					background: linear-gradient(129deg, rgba(251, 131, 81, 1) 0%, rgba(255, 68, 68, 1) 100%);
					padding: 0 20upx;
					flex-shrink: 0;
	
					.usedpacket-priceStyle {
						margin-right: 12upx;
	
						>text {
							display: inline-block;
							vertical-align: top;
							margin-top: 4upx;
						}
					}
	
					.itemleft_bgstyle {
						width: 30upx;
						height: 30upx;
						border-radius: 50%;
						position: absolute;
						left: -16upx;
						top: 50%;
						transform: translateY(-50%);
						background-color: #F8F8F8;
					}
	
					.itemleft_bgstyle2 {
						position: absolute;
						right: 0;
						top: 0;
						width: 1%;
						height: 170upx;
						padding-left: 4upx;
						color: #fff;
						box-sizing: border-box;
						background: radial-gradient(transparent 0, transparent 8upx, #fff 8upx);
						background-size: 16upx 16upx;
						background-position: 16upx 0px;
						background-color: #fff;
					}
				}
	
				.usedpacket-itemright {
					height: 100%;
	
					.usedpacket_titleType {
						.usedpacketType {
							padding: 0 6upx;
							height: 28upx;
							background-color: #ff4444;
							border-radius: 14upx;
	
							>text {
								display: inline-block;
								transform: scale(.85);
							}
						}
	
						.usedpacketTitle {
							width: 240upx;
						}
					}
	
					.usedpacket-time {
						width: 240upx;
					}
				}
	
				.getDraw {
					position: absolute;
					right: -10upx;
					top: 56%;
					transform: translateY(-50%);
					width: 126upx;
					height: 40upx;
					line-height: 40upx;
					background-color: #ff4444;
					border-radius: 20upx;
				}
			}
	}
	.couponLeft {
		>view {
			vertical-align: middle;
			display: inline-block;
			width: 50upx;
			height: 50upx;
			background: rgba(255, 68, 68, 1);
			border-radius: 50%;

			>image {
				width: 50upx;
				height: 50upx;
			}
		}

		>span {
			vertical-align: middle;
			font-size: 24upx;


			color: rgba(51, 51, 51, 1);
		}
	}

	.couponRight {
		width: 121upx;
		height: 50upx;
		border: 1upx solid rgba(255, 68, 68, 1);
		border-radius: 25upx;
		text-align: center;

		>span {
			line-height: 50upx;
			font-size: 24upx;


			color: rgba(255, 68, 68, 1);
		}
	}

	.advertisement {
		margin: 20upx auto 0 auto;
		width: 690upx;
		height: 200upx;
		border-radius: 10upx;
		overflow: hidden;

		>image {
			width: 690upx;
			height: 200upx;
		}
	}
</style>
