<template>
	<view class="container">
		<view class="" style="height: 52rpx;"></view>
		<view class="head-block">
			<view class="flex-y-center head-block-top">
				<view class="head-block-left">
					<!-- <i class="iconfont icon-shouyin logo-img" :style="{color:setColor}"></i> -->
					<image v-if="systemInfo.thumb" :src="URL+systemInfo.thumb" class="logo-img"></image>
					<i v-else class="iconfont icon-shouyin logo-img" :style="{color:setColor}"></i>
				</view>

				<view class="info">
					<view class="title">{{systemInfo.title}}</view>
				</view>
			</view>
			<view class="input-box box-pack-between flex-y-center">
				<view class="sign">￥</view>
				<view class="money" v-if="money.length">{{money.join('')}}</view>
				<view class="placeholder" v-else>消费金额</view>
			</view>
		</view>

		<view class="head-content">
			<block v-if="systemInfo.is_vip == 1">
				<view style="margin-top: 0;" class="input-box-coupon box-pack-between"
					v-if="menber_discount.discount&&menber_discount.name">
					<text> 会员优惠 </text>
					<view class="flex-y-center">
						{{menber_discount.name}}专享<text class="input-box-price">{{menber_discount.discount}} </text> 折优惠
					</view>
				</view>
			</block>

			<navigator v-if="money.length" hover-class="none"
				:url="`/pages/use-coupon-list/use-coupon-list?total_price=+${Number(money.join(''))}&pay_index=+${pay_index}`"
				class="box-pack-between input-box-coupon">
				<text>优惠劵</text>
				<view class="arr-r flex-y-center" :style="coupon_id?'color:red':''">
					{{coupon_id?'-￥'+coupon_price:'请选择优惠劵'}}
				</view>
			</navigator>

			<view class="input-box-coupon box-pack-between" v-if="systemInfo.is_vip == 1">
				<view class="flex-y-center box-pack-between flex-grow-1">
					<view class="choice_pay flex-center" :style="pay_index==0?'border: 1rpx solid'+ setColor:''"
						:class="pay_index==0?'act':''" @click="payrll(0)">
						<view>
							<view class="flex-center">
								<!-- #ifdef MP-ALIPAY -->
								<text class="iconfont ac icon-alipay" style="color: #1296db;"></text>
								<view>
									支付宝支付
								</view>
								<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<text class="iconfont ac icon-weixinzhifu" style="color: #07c160;"></text>
								<view>
									微信支付
								</view>
								<!-- #endif -->
							</view>
						</view>
						<text v-if="pay_index==0" :style="{color: setColor}"
							class="iconfont icon-youxiajiaogouxuan"></text>
					</view>
					<view v-if="systemInfo.is_vip == 1 && userInfo.mobile" class="choice_pay flex-center"
						:style="pay_index==1?'border: 1rpx solid'+ setColor:''" :class="pay_index==1?'act':''"
						@click="payrll(1)">
						<view>
							<view class="flex-center">
								<text class="iconfont ac icon-qianbaoyue" :style="{color:setColor}"></text>
								<view>
									余额支付
								</view>
							</view>
							<view class="ft22">
								{{'剩余余额:'+menber_discount.balance}}
							</view>
						</view>
						<text v-if="pay_index==1" :style="{color: setColor}"
							class="iconfont icon-youxiajiaogouxuan"></text>
					</view>
				</view>
			</view>

			<view style="padding-top: 30rpx;" v-if=" systemInfo.is_vip==1 && userInfo.mobile && czList.length>0">
				<scroll-view scroll-x="true" style="white-space: nowrap;">
					<view class="pay-price pr" :class="index==paytype?'act':''"
						:style="index==paytype?'border-color:#fff;color:#fff;background-color:'+setColor:''"
						v-for='(item,index) of czList' :key="index" :data-id='item.id' :data-content='item.pay_price'
						@click="choice_pay(index)" :data-index='index'>
						<text class="maney"> <text class="ft22">储值</text> ￥{{Number(item.pay_price)}}</text>
						<view class="maney_get" :style="index==paytype?'color:#fff;':''">赠送
							{{item.send_price}}
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="input-box-coupon box-pack-between" v-if="money.length">
				<text>支付金额</text>
				<view class="flex-y-center">
					实付：<text
						class="input-box-price">￥{{(Number(money.join(''))*price_discount-coupon_price).toFixed(2)}}</text>
				</view>
			</view>

			<view class="input-box-top">
				<input type="text" @input="bindRemark" maxlength="50" placeholder="添加备注(50个字以内)" />
			</view>
		</view>

		<view class="keyboard-block">
			<view class="table-block content is-iphonex-margin">
				<view hover-class="nav-hover" @click="inputNum(7)" class="td">7</view>
				<view hover-class="nav-hover" @click="inputNum(8)" class="td">8</view>
				<view hover-class="nav-hover" @click="inputNum(9)" class="td">9</view>
				<view hover-class="nav-hover" @click="delNum()" class="td">
					<image src="/static/backspace_icon.png" mode="aspectFit" class="backspace-icon"></image>
				</view>
				<view hover-class="nav-hover" @click="inputNum(4)" class="td">4</view>
				<view hover-class="nav-hover" @click="inputNum(5)" class="td">5</view>
				<view hover-class="nav-hover" @click="inputNum(6)" class="td">6</view>
				<view hover-class="nav-hover" class="td"></view>
				<view hover-class="nav-hover" @click="inputNum(1)" class="td">1</view>
				<view hover-class="nav-hover" @click="inputNum(2)" class="td">2</view>
				<view hover-class="nav-hover" @click="inputNum(3)" class="td">3</view>
				<view hover-class="nav-hover" class="td"></view>
				<view hover-class="nav-hover" @click="inputNum(0)" class="td td2">0</view>
				<view hover-class="nav-hover" @click="inputNum('.')" class="td">.</view>
				<view hover-class="nav-hover" class="td"></view>
				
				
				
				<view hover-class="nav-hover" v-if="paytype!=-1 && pay_index==1" @click="czPay" class="sub-btn"
					:style="{'background-color':setColor}">
					<view>确认</view>
					<view>支付</view>
				</view>
				
				<view hover-class="nav-hover" v-else-if="systemInfo.set.is_charge == 1" @click="mdPay" class="sub-btn"
					:style="{'background-color':setColor}">
					<view>确认</view>
					<view>支付</view>
				</view>
				
				<view hover-class="nav-hover" v-else @click="onSubmit()" class="sub-btn"
					:style="{'background-color':setColor}">
					<view>确认</view>
					<view>支付</view>
				</view>
				
			</view>
		</view>

		<uni-popup ref="popup" type="center">
			<view class="get-phone-pop" v-if="is_pay">
				<view class="content-block">
					<view class="content flex flex-y-center flex-x-center">提示</view>
				</view>
				<view class="flex-center content-tel">
					<text style="min-width: 130rpx;">订单处理成功</text>
				</view>
				<navigator open-type="redirect" :url="'../paySuccess/paySuccess?order_id='+order_id"
					class="btm-block flex flex-nowarp flex-x-between">
					<view form-type="submit" class="btn sub-btn">确定</view>
				</navigator>
			</view>
			<audio v-if="systemInfo.set.is_pop==1" />
			<coupon v-if="systemInfo.set.is_pop==2" />
			<swiper v-if="systemInfo.set.is_pop==3" />
		</uni-popup>

		<uni-popup ref="popup2" type="bottom">
			
			<view class="No_charge_recharging">
				
              <view class="box-pack-between No_charge_header flex-center">
                 <view class="No_charge_title"></view> 选择支付方式 <image src="/static/icon_9.png" @click="onClose" class="icon_close"></image>
              </view>
			  
				<!-- #ifdef MP-ALIPAY -->
				<view class="cell flex flex-nowarp flex-y-center" @click="payrll(0)">
					<image src="/static/icon_8.png" mode="aspectFit" class="pay-type-icon"></image>
					<view class="title">支付宝支付</view>
					<i v-if="pay_index==0" class="iconfont icon-lujing check-box" :style='{color:setColor}'></i>
					<view class="rund check-box" v-else :style='{color:setColor}'></view>
				</view>
				<!-- #endif -->

				<!-- #ifdef MP-WEIXIN -->
				<view class="cell flex flex-nowarp flex-y-center" @click="payrll(0)">
					<image src="/static/icon_7.png" mode="aspectFit" class="pay-type-icon"></image>
					<view class="title">微信支付</view>
					<i class="iconfont icon-lujing check-box" :style='{color:setColor}' v-if="pay_index==0"></i>
					<view class="rund check-box" :style='{color:setColor}' v-else></view>
				</view>
				<!-- #endif -->

				<view v-if="systemInfo.set.is_charge == 1" class="cell flex flex-nowarp flex-y-center"
					@click="payrll(5)">
					<image src="/static/icon_cz.png" mode="aspectFit" class="pay-type-icon"></image>
					<view class="title">充值 <text
							style="font-size: 34rpx;color: red;">￥{{total_price}}</text>
						免单</view>
					<i class="iconfont icon-lujing check-box" :style='{color:setColor}' v-if="pay_index==5"></i>
					<view class="rund check-box" :style='{color:setColor}' v-else></view>
				</view>

				<view v-if="systemInfo.is_vip==1&&userInfo.mobile&&menber_discount.balance"
					class="cell flex flex-nowarp flex-y-center" @click="payrll(1)">
					<image src="/static/icon_6.png" mode="aspectFit" class="pay-type-icon"></image>
					<view class="title">余额支付(剩余余额：{{menber_discount.balance}})</view>
					<i class="iconfont icon-lujing check-box" :style='{color:setColor}' v-if="pay_index==1"></i>
					<view class="rund check-box" :style='{color:setColor}' v-else></view>
				</view>
				<view class="No_charge_btn">
					 <button style="line-height: 2.55555556;" @click="payMdCz" type="primary">确认支付</button>
				</view>
			</view>
		</uni-popup>

	</view>
</template>


<script>
	// import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import audio from '../../diy/audio.vue';
	import swiper from '../../diy/swiper.vue';
	import coupon from '../../diy/coupon';

	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	let hideLoading = true;
	export default {
		components: {
			// uniPopup,
			coupon,
			swiper,
			audio
		},
		data() {
			return {
				money: [],
				storeInfo: {},
				coupon_id: "", //修改上一页data里面的sh参数值为100
				coupon_price: 0,
				activity: '',
				voucherCode: '',
				remark: "",
				price_discount: 1,
				menber_discount: {},
				pay_arr: [
					// #ifdef MP-WEIXIN
					"微信支付",
					// #endif
					// #ifdef MP-ALIPAY
					"支付宝支付",
					// #endif
					"余额支付"
				],
				pay_index: 0,
				userInfos: null,
				systemInfos: {},
				URL: getApp().globalData.URL,
				czList: [],
				paytype: -1,
				pay_price: 0,
				send_price: 0,
				order_id: '',
				is_pay: false,
				is_popup: 1,
				total_price:0, //充值免单金额
				pay_money:0, //支付金额
				cz_order_id:'', //免单充值id
				is_status_czailpay:false, 
				
			}
		},

		computed: {
			...mapState(['setColor', 'store_id', 'systemInfo', 'teen_index', 'userInfo', 'address']),
			dateRange() {
				const {
					store_id,
					userInfo,
					systemInfo
				} = this;
				return {
					store_id,
					userInfo,
					systemInfo
				}
			}
		},
		created() {
			this.bus.$on('send', (data) => {
				this.$refs.popup.close();
			})
		},
		onShow() {
			if(this.is_status_czailpay){
				let info =  uni.getStorageSync("order_id_info_pay");
				if(this.pay_index == 5){
					this.cz_order_id = info.order_id;
					this.aliPay(this.pay_money);
				}else{
					this.CzpaySuccess(info);
				}
			}
		},
		onLoad(options) {
			uni.hideTabBar();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.setColor,
			})
			if (this.$store.state.userInfo || this.$store.state.systemInfo) {
				this.userInfos = this.$store.state.userInfo;
				this.systemInfos = this.$store.state.systemInfo;
				this.init();
				this.czlist();
				this.setCopy();
				if (this.systemInfos.set) {
					// console.log(this.pay_index, "this.check_index")
					if (this.$store.state.systemInfo.set.is_pop != 0) {
						let is_pop = this.$store.state.systemInfo.set.is_pop;
						is_pop == 2 ? this.Coupons() :
							is_pop == 1 ? this.homePop(1) :
							is_pop == 3 ? this.homePop(3) : '';
					}
				}
			}
		},

		watch: {
			"$store.getters.store_id": function(nVal) {
				console.log("nVal", nVal)
				this.setCopy();
				this.czlist();
			},

			"$store.getters.userInfo": function(nVal) {
				console.log("nVal", nVal)
				this.userInfos = nVal;
			},

			"$store.getters.systemInfo": function(nVal) {
				console.log("nVal", nVal)
				this.systemInfos = nVal;
				// this.init();
				uni.setNavigationBarTitle({
					title: nVal.title
				})
			},

			setColor(nVal) {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: nVal,
				})
			},
			// 弹窗校检
			dateRange: {
				handler(val) {
					this.init();
					// console.log(val, "val")
					if (this.is_popup == 2) {
						return
					}
					if (val.systemInfo.set) {
						this.is_popup = 2;
						// 是否开启弹窗
						if (val.systemInfo.set.is_pop == 0) {
							return
						}
						// 优惠劵弹窗
						if (val.systemInfo.set.is_pop == 2) {
							if (val.store_id && val.userInfo) {
								this.can_popup(2)
							}
						}
						// 语音弹窗
						if (val.systemInfo.set.is_pop == 1) {
							if (val.store_id && val.userInfo) {
								this.can_popup(1)
							}
						}
						// 轮播图弹窗
						if (val.systemInfo.set.is_pop == 3) {
							if (val.store_id && val.userInfo) {
								this.can_popup(3)
							}
						}
					}
				},
				deep: true,
			},
		},

		methods: {
			...mapMutations(['SET_COUPON', 'SET_AUDIO', 'SET_SWIPER']),
			// 是否弹窗
			can_popup(type) {
				let couponList = [];
				this.$http.request('xcx/can_popup', {
					store_id: this.store_id,
					user_id: this.userInfos.id
				}, "", true, true).then(res => {
					// console.log(res, "can_popup")
					if (res.code === '200') {
						type == 1 ? this.homePop(1) : type == 2 ? this.Coupons() : type == 3 ? this
							.homePop(3) :
							'';
					}
				})
			},
			Coupons() {
				let couponList = [];
				this.$http.request('xcx/LqCoupons_lists', {
					store_id: this.store_id,
					user_id: this.userInfos.id
				}, "", true, true).then(res => {
					for (let s of res.data) {
						s.checked = false;
						s.state = 1;
						if (s.is_index == 1) {
							couponList.push(s);
							this.SET_COUPON(couponList);
							if (couponList.length > 0) {
								this.$refs.popup.open();
								this.popup_log();
							}
						}
					};
				})
			},
			// 获取语音||轮播图
			homePop(type) {
				this.$http.request('xcx/home_pop_up', {
					store_id: this.store_id,
					user_id: this.userInfos.id,
				}, "", true, true).then(res => {
					if (res.code === '200') {
						let arr = res.data;
						if (type == 1) {
							for (let s of arr) {
								s.is_check = 1;
								s.pic = getApp().globalData.URL + this.systemInfos.thumb;
								s.content = getApp().globalData.URL + s.src;
							}
							this.SET_AUDIO(arr);
						}
						if (type == 3) {
							this.SET_SWIPER(arr);
						}
						if (arr.length > 0) {
							this.$refs.popup.open();
							this.popup_log();
						}
					}
				})
			},

			popup_log() {
				this.$http.request('xcx/popup_log', {
					store_id: this.store_id,
					user_id: this.userInfos.id,
				}, "", true, true).then(res => {
					if (res.code === 200) {}
				})
			},

			init() {
				// console.log("init", this.userInfos)
				if (this.userInfos && this.systemInfos) {
					if (this.systemInfos.set) {
						this.pay_index = (this.systemInfos.set.is_yuer == 1 && this.systemInfos.is_vip == 1 && this
							.userInfos.mobile) ? 1 : this.pay_index;
					}
					this.menber_pay();
				}
			},

			setCopy() {
				if (getApp().globalData.isApp) {
					this.$http.request('xcx/funeng', {
						store_id: this.store_id,
					}, "", "", hideLoading).then(res => {
						let way_power = res.data.way_power;
						let content = way_power.replace(/<br\s*\/?\s*>/ig, "\n");
						uni.showLoading({
							title:'正在加载',
							mask:true
						})
						uni.setClipboardData({
							data: content,
							success: function(r) {
								getApp().globalData.isApp = false
								console.log('赋能成功', r);
							},
							complete:() =>{
								uni.hideLoading();
								uni.hideToast();
							}
						});
					})
				}
			},

			czlist() {
				this.$http.request('xcx/czlist', {
					store_id: this.store_id
				}).then(res => {
					console.log(res)
					this.czList = res.data;
				})
			},

			choice_pay(e) {
				if (this.paytype == e) {
					this.paytype = -1
					return
				}
				if (this.pay_index == 0) {
					return
				}
				this.paytype = e;
				this.pay_price = this.czList[e].pay_price;
				this.send_price = this.czList[e].send_price;
			},
			
			// 免单充值
			mdPay(){
				// 重复点击
				if (!this.clickThrottle()) {
					return
				}
				if (this.money.length <= 0) {
					uni.showToast({
						title: '请输入消费金额',
						icon: 'none'
					})
					return false
				}
				if (this.money.length) {
					let money = Number(this.money.join('')),
						pirce = 1;
					if (this.price_discount > 0) {
						pirce = this.price_discount;
					}
					money = (money * pirce - this.coupon_price).toFixed(2);
					this.pay_money = Number(money);
					this.total_price = (Number(this.systemInfo.set.charge_num) * Number(money)).toFixed(2);
				}
				this.$refs.popup2.open();
			},
	
			payMdCz(){
				if(this.pay_index==5){
					this.pay_price = this.total_price;
					this.czPay();
				}else{
					this.onSubmit();
				}
			},
			
			// 余额充值
			czPay(e) {
				
				// 重复点击
				if (!this.clickThrottle()) {
					return
				}
				
				if (this.money.length <= 0) {
					uni.showToast({
						title: '请输入消费金额',
						icon: 'none'
					})
					return false
				}

				// #ifdef MP-WEIXIN
				var url = 'xcxweixinpay/czorder',
					user_id = this.userInfos.id;
				// #endif
				// #ifdef MP-ALIPAY
				var url = 'xcxpay/czorder',
					user_id = this.userInfos.user_id;
				// #endif
				 uni.showLoading({
					title:'加载中',
					mask:true
				})
				this.$http.request(url, {
					store_id: this.store_id,
					user_id: user_id,
					pay_price: this.pay_price,
					send_price: this.paytype > -1 ? this.send_price : 0,
				}).then(res => {
					uni.hideLoading();
					console.log(res)
					// this.list = res.data;
					// #ifdef MP-ALIPAY
					this.czAliPay(res.data)
					// #endif
					// #ifdef MP-WEIXIN
					this.czWxPay(res.data)
					// #endif
				}).catch((err)=>{
					uni.hideLoading();
				})
			},

			//支付宝支付
			czAliPay(info) {
				// 防止支付完成不走回调
				this.is_status_czailpay = true;
				uni.setStorageSync("order_id_info_pay",info);
				my.tradePay({
					// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
					tradeNO: info.trade_no,
					success: (res) => {
						console.log(res)
						if (res.resultCode == 9000) {
							if(this.pay_index == 5){
								this.cz_order_id = info.order_id;
								this.aliPay(this.pay_money);
							}else{
								this.CzpaySuccess(info);
							}
						} else if (res.resultCode == 8000 || res.resultCode == 6004) {
							uni.showToast({
								title: "支付结果未知，请核对",
								icon: "none"
							})
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						})
					}
				});
			},

           CzpaySuccess(info){
			   	this.is_status_czailpay = false;
			   this.$http.request('xcxpay/CzAliOrderInfo', {
			   	out_trade_no: info.out_trade_no,
			   	store_id: this.store_id,
			   }).then(res => {
			   	console.log(res)
			   	this.Czdiscount();
			   })
		   },

			czWxPay(info) {
				wx.requestPayment({
					timeStamp: info.timeStamp,
					nonceStr: info.nonceStr,
					package: info.package,
					signType: info.signType,
					paySign: info.paySign,
					success: (res) => {
						if(this.pay_index == 5){
							this.cz_order_id = info.order_id;
							this.wxPay(this.pay_money);
						}else{
							this.Czdiscount();
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						})
					},
					complete: (res) => {
						console.log(res)
					}
				})
			},

			Czdiscount() {
				this.$http.request('xcx/discount', {
					user_id: this.userInfos.id,
					store_id: this.store_id,
				}, "", "", hideLoading).then(res => {
					console.log(res)
					if (Number(res.data.balance) < Number(this.money)) {
						uni.showToast({
							title: "您的余额不足，请充值后使用",
							icon: "none"
						})
						return
					}
					
					this.onSubmit();
					
				}).catch(err => {
					console.log(err)
				})
			},
			
			// 会员充值end
           onClose(){
			   	this.$refs.popup2.close();
		   },
		   
			// 选择支付方式
			payrll(index) {
				this.pay_index = index;
				if (this.pay_index == 0 ||this.pay_index == 5) {
					this.paytype = -1;
				}
				let money = Number(this.money.join(''));
				// 支付宝支付商家劵会导致无法使用，余额不能使用
				if (this.voucherCode && index != 0 ) {
					uni.showModal({
						title: "提示",
						content: "优惠劵状态发生变化,请重新选择优惠劵",
						showCancel: false,
						cancelText: '取消',
						confirmText: '重新选择',
						success: res => {
							if (res.confirm) {
								this.coupon_id = ""; //修改上一页data里面的sh参数值为100
								this.coupon_price = 0;
								this.activity = '';
								this.voucherCode = '';
								uni.navigateTo({
									url: `../use-coupon-list/use-coupon-list?total_price=${money}&pay_index=${index}`
								})
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
			},

			menber_pay() {
				if (this.systemInfos.is_vip != 1) {
					return
				}
				this.$http.request('xcx/discount', {
					user_id: this.userInfos.id,
					store_id: this.store_id,
				}, "", "", hideLoading).then(res => {
					console.log(res)
					this.menber_discount = res.data;
					if (this.userInfos.mobile && res.data.discount) {
						this.price_discount = Number(res.data.discount) * 0.1;
					}
				}).catch(err => {
					console.log(err)
				})
			},

			inputNum(num) {
				if (num == '.') {
					if (this.money.indexOf('.') != -1) {
						return false
					}
					if (this.money.length == 0) {
						return false
					}
				}
				if (this.money.indexOf('.') == -1) {
					if (this.money.length == 5 && num != '.') {
						return false
					}
				} else {
					if (this.money.indexOf('.') == this.money.length - 3) {
						return false
					}
				}
				this.money.push(num)
			},
			bindRemark(e) {
				this.remark = e.detail.value;
			},

			delNum() {
				if (this.money.length) {
					this.money.pop()
				}
			},

			onSubmit() {
				// 重复点击
				if (!this.clickThrottle()) {
					return
				}
				let subscribe = uni.getStorageSync('balance_subscribe');
				this.cz_order_id ='';
				if (this.money.length) {
					let money = Number(this.money.join('')),
						pirce = 1;
					if (this.price_discount > 0) {
						pirce = this.price_discount;
					}
					
					money = (money * pirce - this.coupon_price).toFixed(2);
					
					if (money <= 0) {
						uni.showToast({
							title: '请正确输入消费金额',
							icon: 'none'
						})
						return false
					} else {
						let that = this;
						console.log(subscribe.alipay_pay_tid, subscribe.alipay_balance, that.systemInfos.alipay_appid,
							"模板id")
						// #ifdef MP-ALIPAY
						if (this.pay_index == 1) {
							// 调用方法，唤起订阅组件
							my.requestSubscribeMessage({
								thirdTypeAppId: that.systemInfos.alipay_appid, // 可选，isv接入场景下必填
								entityIds: [subscribe.alipay_balance], // 模板id列表，最多3个
								// 接收结果的回调方法
								complete: (r) => {
									console.log('订阅回调', r);
									that.yuer_pay(money)
								},
							});
						} else {
							let entityIds = [subscribe.alipay_pay_tid];
							// 调用方法，唤起订阅组件
							my.requestSubscribeMessage({
								thirdTypeAppId: that.systemInfos.alipay_appid, // 可选，isv接入场景下必填
								entityIds: entityIds, // 模板id列表，最多3个
								// 接收结果的回调方法
								complete: (r) => {
									console.log('订阅回调', r);
									that.aliPay(money)
								},
							});
						}
						// #endif
						// #ifdef MP-WEIXIN
						if (this.pay_index == 1) {
							uni.requestSubscribeMessage({
								tmplIds: [subscribe.balance_tid, subscribe.jf_tid],
								success: (r) => {
									console.log(r, "success")
								},
								complete: (r) => {
									console.log(r, "complete")
									this.yuer_pay(money)
								}
							})
						} else {
							let tmplIds = [subscribe.pay_tid, subscribe.jf_tid];
							uni.requestSubscribeMessage({
								tmplIds: tmplIds,
								success: (r) => {
									console.log(r, "success")
								},
								complete: (r) => {
									console.log(r, "complete")
									this.wxPay(money)
								}
							})
						}
						// #endif	
					}
				} else {
					uni.showToast({
						title: '请输入消费金额',
						icon: 'none'
					})
					return false
				}
			},

			AddIntegral(order_id) {
				this.$http.request('xcx/AddIntegral', {
					order_id,
				}).then(res => {

				})
			},
			
			//支付宝支付
			aliPay(money) {
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				this.$http.request('Xcxpay/smAliorderNo', {
					user_id: this.userInfos.user_id,
					store_id: this.store_id,
					money,
					pay_price: money,
					total_price: Number(money) + Number(this.coupon_price),
					coupon_id: this.coupon_id,
					coupon_price: this.coupon_price,
					activity: this.activity, //商家优惠劵金额
					voucherCode: this.voucherCode, //商家劵码
					remark: this.remark,
					pay_type: 2,
					czorder_id:this.cz_order_id||''
				}, "", "", hideLoading).then(rex => {
					uni.hideLoading();
					this.is_status_czailpay = false;
					let out_trade_no = rex.data.out_trade_no;
					// 免单充值跳转
					if(this.pay_index == 5){
						uni.showModal({
							content: '支付成功',
							showCancel: false,
							success: r => {
								this.AddIntegral(rex.data);
								uni.redirectTo({
									url: '/pages/paySuccess/paySuccess?order_id=' +
										rex.data
								})
							}
						})
						return
					}
					my.tradePay({
						// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
						tradeNO: rex.data.trade_no,
						success: (res) => {
							console.log(res)
							if (res.resultCode == 9000) {
								this.AddIntegral(rex.data.order_id);
								this.is_pay = true;
								this.$refs.popup.open();
							} else if (res.resultCode == 8000 || res.resultCode == 6004) {
								my.alert({
									content: "支付结果未知，请核对",
									showCancle: false,
									success: () => {
										uni.switchTab({
											url: '/pages/index/index'
										})
									}
								});
							}
						},
						fail: (res) => {
							my.alert({
								content: JSON.stringify(res),
							});
						}
					});
				}).catch(err => {
						uni.hideLoading();
					console.log(err)
				})
			},

			wxPay(money) {
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				this.$http.request('Xcxweixinpay/smAliorderNo', {
					user_id: this.userInfos.id,
					// money,
					pay_price: money,
					total_price: Number(money) + Number(this.coupon_price),
					store_id: this.store_id,
					coupon_id: this.coupon_id,
					coupon_price: this.coupon_price,
					remark: this.remark,
					pay_type: 1,
					czorder_id:this.cz_order_id || '',
				}).then(res => {
						uni.hideLoading();
					if(this.pay_index == 5){
						uni.showModal({
							content: '支付成功',
							showCancel: false,
							success: r => {
								uni.redirectTo({
									url: '/pages/paySuccess/paySuccess?order_id=' +
										res.data
								})
							}
						})
						return
					}
					
					wx.requestPayment({
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: (r) => {
							this.AddIntegral(res.data.order_id);
							uni.showModal({
								content: '支付成功',
								showCancel: false,
								success: r => {
									uni.redirectTo({
										url: '/pages/paySuccess/paySuccess?order_id=' +
											res.data.order_id
									})
								}
							})
						},
						fail: (res) => {
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							})
						}
					})
					
				}).catch(err => {
						uni.hideLoading();
					console.log(err)
				})
			},

			yuer_pay(money) {
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				this.$http.request('xcx/hlep_yuer_pay', {
					user_id: this.userInfos.id,
					pay_price: money,
					total_price: Number(money) + Number(this.coupon_price),
					store_id: this.store_id,
					coupon_id: this.coupon_id,
					coupon_price: this.coupon_price,
					remark: this.remark,
					pay_type: 3,
				}).then(res => {
					uni.hideLoading();
					console.log(res)
					this.yuer_pay_order(res.data);
				}).catch((res) => {
					uni.hideLoading();
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					})
				})
			},
			// 余额支付
			yuer_pay_order(order_id) {
				// #ifdef MP-WEIXIN
				var is_type = 1;
				// #endif
				// #ifdef MP-ALIPAY
				var is_type = 2;
				// #endif
				this.$http.request('xcx/yuer_pay', {
					order_id,
					is_type,
				}).then(res => {
					this.AddIntegral(order_id);
					uni.showModal({
						content: '支付成功',
						showCancel: false,
						success: r => {
							uni.redirectTo({
								url: '/pages/paySuccess/paySuccess?order_id=' + order_id
							})
						}
					})
				}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eee;
	}

	.No_charge_recharging {
		width: 100%;
		background: #FFFFFF;
		height: 700rpx;
		padding: 0 20rpx;
		position: relative;
	}
	.No_charge_header{
		height: 100rpx;
		font-size: 32rpx;
	}
	.No_charge_title{
		width: 50rpx;
	}
	.No_charge_recharging .icon_close{
		width: 45rpx;
		height: 45rpx;
	}
    .No_charge_recharging .cell {
		padding: 30rpx 0;
	}
	 .No_charge_recharging .pay-type-icon {
		display: block;
		flex: none;
		width: 60rpx;
		height: 60rpx;
		margin-right: 10rpx;
	}

	 .No_charge_recharging .cell .title {
		font-size: 30rpx;
		flex: none;
	}

	 .No_charge_recharging .cell .desc {
		font-size: 28rpx;
		color: #bbb;
		padding-left: 30rpx;
		word-break: break-all;
	}

	.No_charge_recharging .cell .desc::after {
		border-color: #bbb #bbb transparent transparent;
	}
	.No_charge_recharging .rund {
		width: 32rpx;
		height: 32rpx;
		border: 1rpx solid #ccc;
		border-radius: 100rpx;
	}
	 .No_charge_recharging .check-box {
		margin-left: auto;
		flex: none;
		font-size: 32rpx;
		color: $theme-color;
	}
	.No_charge_btn{
		position: absolute;
		bottom: 20rpx;
		left: 0;
		width: 100%;
	}
	.No_charge_btn button{
		width: 90%;
		margin: 0 auto;
	}
	// 充值完成
	.pay-price {
		display: inline-block;
		border: 1rpx solid #ccc;
		text-align: center;
		padding: 20rpx 30rpx;
		border-radius: 8rpx;
		margin: 0rpx 20rpx 0 0;
		overflow: hidden;
	}

	.maney {
		font-size: 32rpx;
	}

	.maney_get {
		font-size: 24rpx;
		color: #999;
	}

	.pay-price .act .maney_get {
		color: #FFFFFF;
	}

	// 充值结束

	.choice_pay {
		width: 300rpx;
		height: 100rpx;
		background: #ffffff;
		border: 1rpx solid rgba(0, 0, 0, 0.10);
		position: relative;
		border-radius: 6rpx;
	}

	.choice_pay.act {
		border: 1rpx solid #FC8C04;
	}

	.choice_pay .ac {
		margin-right: 6rpx;
	}

	.icon-youxiajiaogouxuan {
		position: absolute;
		right: 0;
		bottom: 40rpx;
		color: #000;
		font-size: 40rpx;
		height: 0;
	}

	.is-iphonex-margin {
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
		padding-bottom: env(safe-area-inset-bottom);
	}

	.container .input-box-top {
		margin-top: 30rpx;
		font-size: 26rpx;
		color: #999;
		padding: 20rpx 15rpx;
		background: #f6f7f8;
	}

	.container .input-box-top input {
		width: 100%;
		font-size: 28rpx;
		background: none;
	}

	.input-box-coupon {
		font-size: 28rpx;
		margin-top: 30rpx;
	}

	.input-box-price {
		font-size: 32rpx;
		color: red;
	}

	.head-block {
		width: 690rpx;
		margin: 0 auto;
		background-color: #FFFFFF;
		border-radius: 14rpx;
		box-shadow: 0px 3px 30px 0px rgba(167, 177, 195, 0.06);
		padding: 22rpx 30rpx 40rpx 30rpx;
		// margin-top: 72rpx;
	}

	.head-block-left {
		position: relative;
		width: 110rpx;
		margin-right: 20rpx;
	}

	.head-block .logo-img {
		display: block;
		font-size: 100rpx;
		color: $theme-color;
		flex: none;
		margin-right: 18rpx;
		position: absolute;
		top: -62rpx;
		width: 110rpx;
		height: 110rpx;
		border-radius: 10rpx;
	}

	.head-block .title {
		font-size: 34rpx;
	}

	.input-box {
		height: 110rpx;
		opacity: 1;
		background: #f6f7f8;
		border-radius: 14rpx;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 0 20rpx;
		font-size: 34rpx;
		color: #333;
		margin-top: 40rpx;
	}

	.input-box .sign {
		margin-right: 10rpx;
		font-size: 56rpx;
	}

	.input-box .placeholder {
		color: #bbb;
	}

	.keyboard-block {
		height: 40vh;
	}

	.head-content {
		width: 690rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 14rpx;
		margin: 0 auto;
		box-shadow: 0px 3rpx 30rpx 0px rgba(167, 177, 195, 0.06);
		padding: 30rpx 30rpx 40rpx 30rpx;
		margin-top: 40rpx;
	}

	.table-block {
		display: table;
		width: 100%;
		height: 40vh;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
		bottom: env(safe-area-inset-bottom);
		display: flex;
		flex-flow: row wrap;
		z-index: 99;
	}

	.table-block .td {
		flex: none;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 1rpx solid #ccc;
		border-right: 1rpx solid #ccc;
		width: 25vw;
		height: 10vh;
		line-height: 10vh;
		box-sizing: border-box;
		text-align: center;
		vertical-align: middle;
		font-size: 40rpx;
		font-weight: bold;
		color: #555;

	}

	.table-block .td2 {
		width: 50vw;
	}

	.table-block .td .backspace-icon {
		display: block;
		width: 90rpx;
		height: 90rpx;
	}

	.table-block .sub-btn {
		width: 25vw;
		height: 30vh;
		box-sizing: border-box;
		border-top: 1rpx solid #ccc;
		// border-right: 1rpx solid #ccc;
		background-color: $theme-color;
		font-size: 40rpx;
		font-weight: bold;
		color: #fff;
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-items: center;
		position: absolute;
		right: 0;
		bottom: 0
	}

	.nav-hover {
		padding-top: 10rpx;
	}

	.get-phone-pop {
		/* 成为会员 */
		width: 550rpx;
		background-color: #fff;
		border-radius: 14rpx;
		overflow: hidden;
	}

	.code-btn {
		flex: none;
		width: 170rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background-color: #3387FF;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		font-size: 24rpx;
	}

	.get-phone-pop .content {
		// height: 180rpx;
		text-align: center;
		font-size: 35rpx;
		color: #000;
		// line-height: 60rpx;
		padding: 30rpx 0;
		padding-bottom: 0;
	}

	.content-tel {
		text-align: center;
		padding: 30rpx 0;
	}

	.get-phone-pop .btm-block {
		width: 100%;
		height: 100rpx;
		border-top: 1rpx solid #eef0ef;
		font-size: 28rpx;
	}

	.get-phone-pop .btm-block .btn {
		height: 100rpx;
		box-sizing: border-box;
		text-align: center;
		line-height: 100rpx;
		color: #010101;
		font-weight: bold;
		padding: 0;
		margin: 0;
		border: none;
		border-radius: 0;
		background-color: #fff;
		// font-size: 35rpx;
		margin: 0 auto;
	}
</style>
