<template>
	<view v-if="detail" class="page-cashier">
		<view class="c-box">
			<view class="c-box-title">
				<text>实付金额</text>
			</view>
			<view class="c-box-money">
				<text>￥</text>
				<text>{{ detail.orderAmt }}</text>
			</view>
			<view v-if="false" class="c-box-time">
				<text>剩余支付时间<text>00:35:38</text></text>
			</view>
		</view>
		<view class="c-way">
			<view class="c-way-title">
				<text>请选择支付方式</text>
			</view>
			<view class="c-way-list">
				<view class="c-way-line">
					<image src="/static/img-pay-ali.png"></image>
					<text>支付宝</text>
				</view>
			</view>
		</view>
		<view class="c-footer">
			<view @click="handlePay" class="c-btn">
				<text>立即支付</text>
			</view>
		</view>
	</view>
</template>

<script>
import API from '../../server/common'
export default {
	data() {
		return {
			id: null,
			detail: null
		}
	},
	onLoad(options) {
		if (options.id) {
			this.id = options.id;
			this.init()
		}
	},
	methods: {
		// 初始化收银台
		async init() {
			try {
				const params = {
					orderId: this.id
				}
				const res = await API.initOrder({ ...params })
				if (res.success) {
					this.detail = res.result;
				}
			} catch (err) {
				console.log(err, '初始化订单详情')
			}
		},
		// 处理支付报错
		appPayFail(err) {
			const a = { "errMsg": "requestPayment:fail [payment支付宝:62001]用户中途取消支付操作", "errCode": -100, "code": -100 }
			const { errMsg } = err;
			const lastIndexNum = errMsg.indexOf(']');
			let message = errMsg.substring(lastIndexNum + 1)
			if (message === '未知错误') message = '请检查您的手机是否安装了支付宝~'

			uni.showToast({
				icon: 'none',
				title: message,
				duration: 2000
			});
		},
		// 支付
		handlePay() {

			const that = this;
			// 调用uniapp API uni.getProvider 获取服务供应商
			uni.getProvider({
				/* 获取服务类型，可选值如下:
				* @param share: 分享
				* @param oauth: 授权登录
				* @param push: 推送
				* @param payment: 支付类型
				*/
				service: 'payment',
				success: (res) => {
					console.log(res,'日111')
					/*
					* @ res.service 获取服务供应商 ==> 'payment'
					* @ res.provider 这里选择的是支付类型，所以包含["alipay","wxpay"]
					* ‘alipay’: 表示支付宝
					* ‘wxpay’: 表示微信
					*/
					// 检查res.provider中是否有 alipay
					if (res.provider.indexOf('alipay') != -1) {
						// 后台支付接口需要的一些参数
						let data = {
							orderNo: that.detail.orderNo, // 订单id
							totalAmount: that.detail.orderAmt // 用户选择的支付类型
						};
						//发起后台支付接口请求
						that.$request('/app/payment/pay', 'POST', data).then(res => {
							console.log('支付宝订单数据', JSON.stringify(res));
							//调用uniapp API uni.requestPayment 支付接口
							uni.requestPayment({
								//服务提供商 通过uni.getProvider获取
								provider: 'alipay',
								//后台返回的订单数据
								orderInfo: res.result,
								//调用成功的回调
								success(res) {
									console.log('success:' + res);
									uni.showToast({
										icon: 'none',
										title: '支付成功，即将返回，请耐心等待！',
										duration: 3000
									});
									setTimeout(() => {
										uni.navigateBack();
									}, 3000)
								},
								//调用失败的回调
								fail(err) {
									that.appPayFail(err)
									console.log('fail:' + JSON.stringify(err));
								}
							})
						})
					}
				}

			})

		}
	}
}
</script>

<style lang="less" src="./cashier.less"></style>
