<template>
	<view class="notice">
		<view class="notice-navbar">
			<u-navbar title="权益礼包" :border-bottom="false" :background="background1"></u-navbar>
		</view>
		<view class="notice-bd">
			<view class="a">
				<view class="title">认证商家专享权益包</view>
				<view class="desc">开通享8大权益</view>
				<view class="list">
					<view class="item">
						<image src="https://www.amiami.com.cn/static/caigou/icon-m-01.png"></image>
						订货优惠券
					</view>
					<view class="item">
						<image src="https://www.amiami.com.cn/static/caigou/icon-m-02.png"></image>
						专享活动
					</view>
					<view class="item">
						<image src="https://www.amiami.com.cn/static/caigou/icon-m-03.png"></image>
						专享券
					</view>
					<view class="item">
						<image src="https://www.amiami.com.cn/static/caigou/icon-m-04.png"></image>
						直采价
					</view>
					<view class="item">
						<image src="https://www.amiami.com.cn/static/caigou/icon-m-05.png"></image>
						线报
					</view>
					<view class="item">
						<image src="https://www.amiami.com.cn/static/caigou/icon-m-06.png"></image>
						快速发货
					</view>
					<view class="item">
						<image src="https://www.amiami.com.cn/static/caigou/icon-m-07.png"></image>
						专属客服
					</view>
				</view>
			</view>
			<view class="b">
				<view class="title">服务权益</view>
				<view class="list">
					<view class="item">
						<image src="https://www.amiami.com.cn/static/caigou/icon-m-08.png"></image>
						<view class="info">
							<view class="name">订货优惠券</view>
							<view class="desc">平台针对所有认证成功的采购商，定期或不定期发放订货优惠券，以及新人优惠券。</view>
						</view>
					</view>
					<view class="item">
						<image src="https://www.amiami.com.cn/static/caigou/icon-m-09.png"></image>
						<view class="info">
							<view class="name">专享活动/专享券</view>
							<view class="desc">平台针对采购量大的采购商，推出专享活动或发放专享券，采购量大的采购商有权参与，可获得专享优惠。</view>
						</view>
					</view>
					<view class="item">
						<image src="https://www.amiami.com.cn/static/caigou/icon-m-10.png"></image>
						<view class="info">
							<view class="name">直采价</view>
							<view class="desc">平台将不断对接更多品类的供应链资源，让平台上每一位采购商，获取更多跨界的产品直采资源。</view>
						</view>
					</view>
					<view class="item">
						<image src="https://www.amiami.com.cn/static/caigou/icon-m-11.png"></image>
						<view class="info">
							<view class="name">线报</view>
							<view class="desc">平台将每天在广场推出每日线报，方便采购商获取最新前沿的商品渠道行情，助力采购商零售批发双线齐发。</view>
						</view>
					</view>
					<view class="item">
						<image src="https://www.amiami.com.cn/static/caigou/icon-m-12.png"></image>
						<view class="info">
							<view class="name">专属客服</view>
							<view class="desc">每天09:00-21:00(周一至周六)在线实时解答订货疑虑，提供各种采购指导及售后处理。</view>
						</view>
					</view>
					<view class="item">
						<image src="https://www.amiami.com.cn/static/caigou/icon-m-13.png"></image>
						<view class="info">
							<view class="name">认证服务费</view>
							<view class="desc">采购商如果在支付认证服务费后，10日内，如未在本平台产生任何订单(包括退款订单)，支持认证服务费退费申请，平台将在2个工作日内，给您退回认证服务费。</view>
						</view>
					</view>
				</view>
			</view>
			<view class="pay-bd" v-if="orcInfo.isToWrite">
				<view class="title">选择支付方式</view>
				<view class="item" v-for="(a,i) in paymentMethods" @click="tabItem1(i)">
					<image v-if="tabIndex == i" src="https://www.amiami.com.cn/static/invoice/select-on.png"></image>
					<image v-else src="https://www.amiami.com.cn/static/invoice/select.png"></image>
					{{a.method == 'wechat'?'微信支付':'余额支付'}}<text v-if="a.method == 'balance'">（余额：{{personal.balance}}）</text>
				</view>
			</view>
		</view>
		
		<view class="notice-fd">
			<view class="btn" v-if="orcInfo.isToWrite" @click="openPage()">( ¥{{info.price}}/年  <text>¥{{info.year}}/年 </text> )  去支付</view>
			<view class="btn" v-else @click="openPage1()">立即提交</view>
		</view>
		<addShuiyin />
	</view>
</template>

<script>
	import { Wechat } from '@/core/payment'
	import * as newFunApi from '@/api/newFun'
	export default {
		data() {
			return {
				background1: {
					background: "url(https://www.amiami.com.cn/static/caigou/bg@2x.png) center top no-repeat",
					backgroundSize: '100% auto',
				},
				info: {},
				orcInfo: {},
				paymentMethods: {},
				personal: {},
				isClick: true,
				tabIndex: 0,
			};
		},
		onReady() {
			this.orcInfo = uni.getStorageSync("orcInfo");
			this.wholesalerPrice();
		},
		methods: {
			tabItem1(i){
				this.tabIndex = i
			},
			//识别营业执照
			async wholesalerPrice() {
				const { status, data, message } = await newFunApi.wholesalerPrice({client:'MP-WEIXIN'});
				if (status == 200) {
					this.info = data.info
					this.paymentMethods = data.paymentMethods
					this.personal = data.personal
				}
			},
			//微信支付
			async toWechatPay() {
				const that = this;
				const {status, data } = await newFunApi.wholesalerSubmit({
					method: 'wechat',
					client: "MP-WEIXIN",
					username: this.orcInfo.username,
					mobile: this.orcInfo.mobile,
					mobile_code: this.orcInfo.mobile_code,
					card_front_img_id: this.orcInfo.card_front_img_id,
					card_back_img_id: this.orcInfo.card_back_img_id,
					license_img_id: this.orcInfo.license_img_id,
					card_no: this.orcInfo.card_no,
					door_img_id: this.orcInfo.door_img_id,
					province_id: this.orcInfo.province_id,
					company_name: this.orcInfo.company_name,
					city_id: this.orcInfo.city_id,
					credit_code: this.orcInfo.credit_code,
					business: this.orcInfo.business,
					avatar_id: this.orcInfo.avatar_id,
				})
				if(status == 200) {
					Wechat.payment(data.payment)
					.then((result) => {
						console.log(22,result)
						uni.showToast({
							title: "支付成功"
						})
						this.isClick = true;
						
						setTimeout(()=>{
							uni.removeStorageSync("orcInfo");
							uni.redirectTo({
								url: "/pages/news/caigou/notice5"
							})
						},1000)
					})
					.catch(err => {
						uni.showToast({
							title: "支付失败"
						})
						this.isClick = true;
					})
				}
				
			},
			//去支付 余额支付
			async toPay() {
				const that = this;
				const {status, message} = await newFunApi.wholesalerSubmit({
					method: 'balance',
					client: "MP-WEIXIN",
					username: this.orcInfo.username,
					mobile: this.orcInfo.mobile,
					mobile_code: this.orcInfo.mobile_code,
					card_front_img_id: this.orcInfo.card_front_img_id,
					card_back_img_id: this.orcInfo.card_back_img_id,
					license_img_id: this.orcInfo.license_img_id,
					card_no: this.orcInfo.card_no,
					door_img_id: this.orcInfo.door_img_id,
					province_id: this.orcInfo.province_id,
					company_name: this.orcInfo.company_name,
					city_id: this.orcInfo.city_id,
					credit_code: this.orcInfo.credit_code,
					business: this.orcInfo.business,
					avatar_id: this.orcInfo.avatar_id,
				})
				if(status == 200) {
					uni.showToast({
						title: "支付成功"
					})
					
					this.isClick = true;
					setTimeout(()=>{
						uni.removeStorageSync("orcInfo");
						uni.redirectTo({
							url: "/pages/news/caigou/notice5"
						})
					},1000)
				}else{
					this.isClick = true;
					uni.showToast({
						icon: "none",
						title: message
					})
				}
			},
			openPage() {
				if(this.isClick == false){
					return;
				}
				this.isClick = false;
				if(this.paymentMethods[this.tabIndex].method == "balance"){
					if(Number(this.info.price) <= Number(this.personal.balance)){
						this.toPay()
					}else{
						this.isClick = true;
						uni.showToast({
							icon: "none",
							title: "余额不足，请选择其他支付方式"
						})
					}
				}else if(this.paymentMethods[this.tabIndex].method == "wechat"){
					this.toWechatPay();
				}
				
			},
			async openPage1() {
				if(this.isClick == false){
					return;
				}
				this.isClick = false;
				const that = this;
				const {status, message} = await newFunApi.wholesalerEditApply({
					client: "MP-WEIXIN",
					username: this.orcInfo.username,
					mobile: this.orcInfo.mobile,
					mobile_code: this.orcInfo.mobile_code,
					card_front_img_id: this.orcInfo.card_front_img_id,
					card_back_img_id: this.orcInfo.card_back_img_id,
					license_img_id: this.orcInfo.license_img_id,
					card_no: this.orcInfo.card_no,
					door_img_id: this.orcInfo.door_img_id,
					province_id: this.orcInfo.province_id,
					company_name: this.orcInfo.company_name,
					city_id: this.orcInfo.city_id,
					credit_code: this.orcInfo.credit_code,
					business: this.orcInfo.business,
					avatar_id: this.orcInfo.avatar_id,
				})
				if(status == 200) {
					uni.showToast({
						title: "提交成功"
					})
					this.isClick = true;
					setTimeout(()=>{
						uni.removeStorageSync("orcInfo");
						uni.redirectTo({
							url: "/pages/news/caigou/notice5"
						})
					},1000)
				}else{
					this.isClick = true;
					uni.showToast({
						icon: "none",
						title: message
					})
				}
			}
		},
		
		
	}
</script>
<style lang="scss" scoped>
.notice{
	min-height: 100vh;
	background: url(https://www.amiami.com.cn/static/caigou/bg@2x.png) center top no-repeat;
	background-size: 100% auto;
	padding-bottom: 150rpx;
	&-bd{
		width: 700rpx;
		margin: 0 auto;
		text-align: justify;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		margin: 0 auto;
		margin-top: 20rpx;
		.title{
			padding: 30rpx 0;
			font-size: 30rpx;
		}
		.item{
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #212121;
			image{
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}
			text{
				margin-left: 20rpx;
				color: #666;
			}
		}
		.a{
			width: 702rpx;
			min-height: 454rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			border: 1px solid #FFC8D7;
			margin: 15rpx auto;
			padding: 10rpx 20rpx 30rpx;
			box-sizing: border-box;
			text-align: center;
			.title{
				font-weight: 400;
				font-size: 36rpx;
				padding: 20rpx 0;
				color: #222222;
			}
			.desc{
				font-size: 24rpx;
				color: #999999;
			}
			.list{
				overflow: hidden;
				.item{
					width: 25%;
					text-align: center;
					float: left;
					margin-top: 25rpx;
					font-size: 24rpx;
					color: #333333;
					display: block;
					image{
						width: 90rpx;
						height: 90rpx;
						display: block;
						margin: 0 auto 15rpx;
					}
				}
			}
		}
		.b{
			padding: 60rpx 0 20rpx;
			.title{
				font-size: 30rpx;
				color: #222222;
				position: relative;
				&::after{
					content: "";
					width: 8rpx;
					height: 30rpx;
					border-radius: 10rpx;
					background-color: #F34A40;
					position: absolute;
					left: -25rpx;
					top: 4rpx;
					z-index: 2;
				}
			}
			.list{
				.item{
					padding: 30rpx 0 0;
					overflow: hidden;
					display: flex;
					align-items: flex-start;
					image{
						width: 82rpx;
						height: 82rpx;
						margin-right: 20rpx;
					}
					.info{
						padding-bottom: 30rpx;
						border-bottom: 1px solid #E9E9E9;
						max-width: 500rpx;
						.name{
							font-size: 28rpx;
							color: #F34A40;
						}
						.desc{
							font-size: 24rpx;
							color: #666666;
							line-height: 36rpx;
							margin-top: 15rpx;
						}
					}
				}
			}
		}
	}
	&-fd{
		height: 140rpx;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 22;
		background-color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		.btn{
			width: 662rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: #F34A40;
			border-radius: 90rpx;
			text-align: center;
			font-size: 32rpx;
			color: #FFFFFF;
			&-on{
				background-color: #ccc;
			}
			text{
				text-decoration: line-through;
				font-size: 24rpx;
			}
		}
	}
}
</style>
