zhishifufei_uniapp/pages/topic/subjectAnalysisDialog.vue

<template>
	<view v-if="show" class="dialog-mask">
		<view class="dialog-box">
			<view class="box-title">主观题答案解析</view>
			<view class="box-content">
				<view class="content-item" @click="payDialogOpen = true">
					<image src="@/static/images/special/lecturer.png" mode="aspectFill" style="height: 101rpx;"></image>
					<view class="item-info">
						<view>人工阅卷</view>
						<view>真人老师付费阅卷</view>
					</view>
					<text class="more"></text>
				</view>
				<view class="content-item" @click="payDialogOpen = true">
					<image src="@/static/images/special/live.png" mode="aspectFill" style="height: 93rpx;"></image>
					<view class="item-info">
						<view>直播阅卷</view>
						<view>真人老师付费阅卷</view>
					</view>
					<text class="more"></text>
				</view>
			</view>
		</view>
		<image src="@/static/images/special/close.png" mode="aspectFill" class="guanbi" @click="show = false;"></image>
		<PayDialog :open.sync="payDialogOpen" :money="Number(money)"
		  :now_money="nowMoney" :pay_type_num="pay_type_num" :special_id="Number(e_id || 0)" :template-id="templateId"
		  :is-wechat="isWechat" :is-yue="isYue" :wxpay-h5="wxpayH5" :is-alipay="isAlipay" :is-balance="isBalance" @change="onChange"
		  :isMember="!!isMember" :isMembership="true" :memberMoney="member_money" />
	</view>
</template>

<script>
  import PayDialog from "@/components/PayDialog/index.vue";
  import { getAuthInfo } from "@/api/auth";
	export default {
		components: {
			PayDialog,
		},
		props: {
			e_id: {
				type: Number,
				default: () => 0,
			}
		},
		data() {
			return {
				show: false,
				payDialogOpen: false, // 是否显示支付弹窗
        money: 10,
        nowMoney: 0,
				member_money: 10,
        pay_type_num: 80,
        special_id: 0,
        orderId: "",
				isMember: false,
        isWechat: false,
				isYue: true,
        templateId: "",
        wxpayH5: false,
        isAlipay: false,
        isBalance: false,
        isOpenWeixing: false,
        status: -1,
				is_analysis: 0,
				special_id: 0,
			};
		},
		watch: {
			show() {
				if (this.show) {
					console.log(this.$props, this.e_id);
					this.getAuthInfo();
				}
			},
			e_id() {
				console.log(this.e_id);
			},
		},
		methods: {
			async getAuthInfo() {
			  const res = await getAuthInfo();
			  const { nowMoney, isWechat, isAlipay, isBalance, wxpayH5 } = res.data
			  Object.assign(this, {
			    nowMoney,
			    isWechat,
			    isAlipay,
			    isBalance,
			    wxpayH5
			  })
			},
			onChange(obj) {
			  if (typeof obj != "object") {
			    obj = {};
			  }
			  var action = obj.action || "";
			  var value = obj.value || "";
			  this[action] && this[action](value);
			},
			pay_order(data) {
			  this.orderId = data.data.result.orderId || "";
			  switch (data.data.status) {
			    case "WECHAT_PAY":
			      this.wechatPay(data.data.result.jsConfig);
			      break;
			    case "WECHAT_ROUTINE_PAY":
			      this.$util.wechatRoutinePay(data.data.result.jsConfig, this);
			      break;
			    case "WECHAT_H5_PAY":
			      this.payDialogOpen = false;
			      this.$util.wechatH5Pay(data.data.result.jsConfig, this);
			      break;
			    case "ZHIFUBAO_PAY":
			      this.aliPay(data.data.result, "testpaper")
			      break;
			    case "SUCCESS":
			      this.successOrder(data.msg);
			      break;
			    case 'TOUTIAO_PAY':
			      this.$util.toutiaoPay(data.data.result.jsConfig, this);
			      break;
			    case 'KUAISHOU_PAY':
			      this.$util.kuaishouPay(data.data.result.jsConfig, this);
			      break
			    default:
			      this.extendOrder(data.msg);
			      break;
			  }
			},
			aliPay(msn, type) {
			  this.$util.aliPay(msn, type, this)
			},
			wechatPay(config) {
			  this.$util.weixinpay(config, this)
			},
			successOrder(msg) {
			  this.$util.showMsg(msg ? msg : "支付成功");
			  this.payDialogOpen = false;
			},
			extendOrder(msg) {
			  if (typeof msg === "object") {
			    if (msg.errMsg === "chooseWXPay:cancel") {
			      msg = "微信支付取消";
			    } else {
			      msg = "支付失败";
			    }
			  } else {
			    msg = "支付失败";
			  }
			  this.payDialogOpen = false
			  this.$util.showMsg(msg)
			},
		}
	};
</script>

<style lang="scss" scoped>
	.dialog-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 99;
		.dialog-box {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 100;
			padding: 60rpx 30rpx;
			background: linear-gradient(to bottom, #BED3FE 0%, #fff 100%);
			box-shadow: 0rpx 3rpx 2rpx 0rpx rgba(255,255,255,0.69);
			border-radius: 50rpx;
			border: 1px solid #FFFFFF;
			width: 610rpx;
			.box-title {
				color: #333333;
				font-size: 34rpx;
				text-align: center;
				font-weight: bold;
				margin-bottom: 30rpx;
			}
			.box-content {
				display: flex;
				align-items: center;
				flex-direction: column;
				.content-item {
					width: 524rpx;
					height: 150rpx;
					background: #F3F6FD;
					border-radius: 20rpx;
					border: 1px solid #92BCF4;
					display: flex;
					align-items: center;
					padding: 24rpx 40rpx 24rpx 20rpx;
					margin-bottom: 20rpx;
					image {
						width: 105rpx;
					}
					.item-info {
						color: #333333;
						font-size: 28rpx;
						line-height: 28rpx;
						>view:last-child {
							color: #999999;
							margin-top: 16rpx;
						}
					}
					.more {
						border-color: #0F74BB;
					}
				}
			}
		}
		.guanbi {
			position: absolute;
			left: 50%;
			top: 80%;
			transform: translate(-50%, -50%);
			width: 54rpx;
			height: 54rpx;
		}
	}
</style>