jp-xpgj-GA-file/src/projects/business/views/Master/Live/Pay.vue

<template>
<div>

	<common @asynCallBack="asynCallBack"></common>
	<top-header :pageTitle="pageTitle"    ></top-header>

	<div class="mui-content vongi-qingjiadt margin60">
				<div class="vongi-cashier">

					<img   :src="detail.goodsPic" alt="">
					<div class="vongi-cashier-text">
						<div class="vongi-text-tit">
							<h3 class="flew-sp ellipsis">
								{{detail.goodsName}}</h3>
							<p class="ellipsis">{{detail.goodsDesc}}</p>
						</div>
						
						<h3 class="flew-sp">￥{{detail.totalFee}}<p>×1</p></h3>
					</div>
				</div>
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>购买者姓名</label>
						<span>{{detail.name}}</span>
					</div>

					<div class="mui-input-row">
						<label>支付订单号</label>
						<span>{{detail.outOrderNo}}</span>
					</div>
					<div class="mui-input-row">
						<label>合计金额</label>
						<span style="color:#ED6A0C">￥{{detail.totalFee}}</span>
					</div>
				</form>
				<div class="mui-content-padded"><h5>支付方式</h5></div>
				<form class="mui-input-group margin10">
					<div class="mui-input-row mui-radio">
						<label>微信支付</label>
						<input name="radio1" type="radio"  value="1" v-model="paytypeindex" >
					</div>
					<div class="mui-input-row mui-radio">
						<label>支付宝支付</label>
						<input name="radio1" type="radio"  value="2" v-model="paytypeindex">
					</div>
				</form>
			<div class="vongi-qingjiadt vongi-editme">
			<form class="mui-input-group">
					
					<div class="mui-input-row">
						<label>推广人</label>
						<input type="number" class="mui-input-clear" placeholder="请输入推广人编号，没有可不填"   v-model="paycode">
					</div>
					
				</form>
			</div>

				<div class="vongi-cashier-btn-row">
					<div class="vongi-cashier-btn-white">
						<span>合计：￥{{detail.totalFee}}</span>
						<div class="vongi-cashier-btn" @click="submit">支付</div>
					</div>
				</div>
			</div>
	<img id="qrcode">
	<loading :visible="isLoading"></loading>

</div>
</template>


<script>
	import * as API_Pay from '$project/apis/payment'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	require('$project/assets/js/mui.picker.min.js');
	import QRCode from 'qrcodejs2'

	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		wxPayJs
	} from '$project/utils/wxpay'
	import {

		convertCanvasToImage,
		currentTimeStamp,
		parseUnixTime
	} from '$project/utils'
	export default {
		name: 'MasterLivePay',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '收银台',
				paytypeindex:"1",
				paycode:'',
				paytype:"微信支付",
				qrCodeImg:"",
				isLoading: false,
				detail:{}

			}
		},
		created() {
			this.detail=this.$route.query;
			console.log(this.detail);
			if(this.detail.goodsPic=="null"){
				this.detail.goodsPic=null;
			}		},
		methods:  {
			selectPay() {
				var picker = new mui.PopPicker();

				picker.setData([{
					text: "微信支付",
					value: '1'
				}
					,
					{
						text: "支付宝扫码",
						value: '2'
					}
					// ,
					// {
					// 	text: "现场支付",
					// 	value: '0'
					// }
				]);

				picker.show((selectItems) => {
					this.paytypeindex=selectItems[0].value;
					this.paytype=selectItems[0].text;
				});
			},
			//提交表单
			submit() {
				this.isLoading=true;
				if(this.paytypeindex=="1"){
					API_Pay.wxJsapiPay(this.detail.id,this.paycode).then(data=>{
						//公共页面
						data.url=window.location.href.split("#")[0]+"/#/master/live/paySuccess";

						this.isLoading=false;
						wxPayJs(data)
					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})

				}else if(this.paytypeindex=="2"){
					API_Pay.tradePrecreatePay(this.detail.id,this.paycode).then(url=>{
						this.isLoading = false;
						let qrcode = new QRCode('qrcode', {
							width: 200,
							height: 200,
							text: url,
							correctLevel: QRCode.CorrectLevel.M,

						})
						var canvas = document.getElementsByTagName('canvas')[0];
						this.qrCodeImg = convertCanvasToImage(canvas);

						var btnArray = ['关闭',"支付成功?"];
						var _this=this
						mui.confirm('<img src="'+this.qrCodeImg+'" >',

								'请使用支付宝扫码', btnArray, function(e) {
									if (e.index == 1) {
										_this.$router.push({
											name: 'MasterLiveInfo',
										})
									}

								})


					}).catch(error => {
						this.isLoading = false;
						mui.toast(error);
					})
				}


			},asynCallBack(){},
		},
		mounted() {



		},


		destroyed() {

		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
			})
		}
	}
</script>

<style scoped src="$project/assets/css/pension.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style>
</style>