ddcCzrWechat/pages/rent/carpay/carDetail.vue

<template>
	<view class="product-con">
		<view class="product-con">
			<!-- #ifndef APP-PLUS -->
			<view class="navbar" :style="{ height: navH + 'rpx', opacity: opacity }">
				<view class="navbarH" :style="'height:' + navH + 'rpx;'">
					<view class="navbarCon acea-row row-center-wrapper"
						:style="{ paddingRight: (navbarRight-20) + 'px' }">
						<view class="header acea-row row-center-wrapper">
						</view>
					</view>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<view id="home" class="home acea-row row-center-wrapper" :class="[opacity>0.5?'on':'']"
				:style="{ top: homeTop +'rpx'}">
				<view class="iconfont icon-fanhui2" @tap="returns"></view>
				<!-- #ifdef MP -->
				<view class="line"></view>
				<view class="iconfont icon-gengduo5" @click="moreNav"></view>
				<!-- #endif -->
			</view>
			<!-- #endif -->
			<view>
				<scroll-view scroll-y="true" scroll-with-animation="true" :style="'height:' + height + 'px;'">
					<view id="past0">
						<!-- #ifdef APP-PLUS || MP -->
						<view class="" :style="'width:100%;' + 'height:'+sysHeight"></view>
						<!-- #endif -->
						<productConSwiper ref="proSwiper" :imgUrls="storeInfo.images" :videoline="storeInfo.video_link">
						</productConSwiper>
						<view class="wrapper">
							<view class="introduce" v-text="`${storeInfo.title}`"></view>
							<view class="share acea-row row-between row-bottom">
								<view class="money font-color">
									{{$t(`￥`)}}
									<text class="num" v-text="storeInfo.price || 0"></text>/月
								</view>
							</view>
						</view>
					</view>
					<view class="product-intro" id="past3">
						<view class="title">{{$t(`产品介绍`)}}</view>
						<view class="conter">
							<!-- #ifndef APP-PLUS -->
							<parser :html="description" ref="article" :tag-style="tagStyle"></parser>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS -->
							<view class="description" v-html="description"></view>
							<!-- #endif -->
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="footer acea-row row-between-wrapper" :class="{'eject':storeInfo.id}">
				<navigator hover-class="none" class="item" open-type="switchTab" url="/pages/index/index">
					<view class="iconfont icon-shouye6"></view>
					<view class="p_center">{{$t(`首页`)}}</view>
				</navigator>
				<view class="bnt">
					<form @submit="goBuy" class="buy bnts ">
						<button class="buy bnts virbnt" form-type="submit">
							{{$t(`立即购买`)}}
						</button>
					</form>
				</view>
			</view>
		</view>
		<payment :payMode="cartArr" :pay_close="pay_close" :isCall="true" :totalPrice="storeInfo.price"
			@changePayType="(type)=>{payType=type}" @onChangeFun="onChangeFun"></payment>
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import {
		getCarDetail,
		postCarCreate
	} from "@/api/rent.js";
	import {
		getUserInfo,
	} from "@/api/user.js";
	import {
		mapGetters
	} from "vuex";
	import productConSwiper from "@/components/productConSwiper";
	let app = getApp();
	import parser from "@/components/jyf-parser/jyf-parser";
	import {
		toLogin
	} from "@/libs/login.js";
	import payment from '@/components/payment';
	export default {
		components: {
			productConSwiper,
			parser,
			payment
		},
		data() {
			let that = this;
			return {
				sysHeight: sysHeight,
				id: 0, //商品id
				storeInfo: {}, //商品详情
				cart_num: 1, //购买数量
				description: "",
				navH: "",
				opacity: 0,
				height: 0,
				tagStyle: {
					img: "width:100%;display:block;",
					table: "width:100%",
					video: "width:100%;height:100%;",
				},
				navbarRight: 0,
				homeTop: 20,
				// 当前支付方式
				payType:'weixin',
				cartArr: [{
						"name": this.$t(`微信支付`),
						"icon": "icon-weixin2",
						value: 'weixin',
						title: this.$t(`使用微信快捷支付`),
						payStatus: 1,
					},
					{
						"name": this.$t(`支付宝支付`),
						"icon": "icon-zhifubao",
						value: 'alipay',
						title: this.$t(`使用支付宝支付`),
						payStatus: 1,
					},
					{
						"name": this.$t(`余额支付`),
						"icon": "icon-yuezhifu",
						value: 'yue',
						title: this.$t(`可用余额`),
						payStatus: 1,
						number:'0'
					},
				],
				// 显示隐藏支付弹窗
				pay_close: false,
				// 用户信息
				userdata:{},
				username:'',//购买用户名称
				from:'',//订单来源
			};
		},
		watch:{
			storeInfo: {
				handler: function() {
					this.$nextTick(() => {});
				},
				immediate: true,
			},
		},
		computed: mapGetters(["isLogin"]),
		onLoad(options) {
			let that = this;
			// #ifdef MP
			that.navH = app.globalData.navHeight;
			that.from = 'routine'
			// #endif
			// #ifdef H5
			that.navH = 96;
			that.from = that.$wechat.isWeixin() ? 'weixin' : 'weixinh5'
			// #endif
			// #ifdef APP-PLUS
			that.navH = 30;
			that.from = 'app'
			// #endif
			
			
			that.id = options.id;
			uni.getSystemInfo({
				success: function(res) {
					that.height = res.windowHeight;
					//res.windowHeight:获取整个窗口高度为px，*2为rpx；98为头部占据的高度；
					// #ifndef APP-PLUS || H5 || MP-ALIPAY
					that.navbarRight =
						res.windowWidth - uni.getMenuButtonBoundingClientRect().left;
					// #endif
				},
			});
			//扫码携带参数处理
			// #ifdef MP
			if (options.scene) {
				let value = that.$util.getUrlParams(decodeURIComponent(options.scene));
				if (value.id) options.id = value.id;
				//记录推广人uid
				if (value.pid) app.globalData.spid = value.pid;
			}
			// #endif
			that.getGoodsDetails();
		},
		onReady: function() {
			this.$nextTick(function() {
				// #ifdef MP
				const menuButton = uni.getMenuButtonBoundingClientRect();
				const query = uni.createSelectorQuery().in(this);
				query
					.select("#home")
					.boundingClientRect((data) => {
						this.homeTop = menuButton.top * 2 + menuButton.height - data.height || 0;
					})
					.exec();
				// #endif
			});
		},
		methods: {
			// 支付弹窗触发事件
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			// 弹窗支付点击事件
			payCheck(e){
				const that = this;
				that.payType = e;
				postCarCreate({
					'company_id': that.storeInfo.company_id,
					'agent_id': that.storeInfo.agent_id,
					'store_id': that.storeInfo.store_id,
					'cooperate_id': that.storeInfo.cooperate_id,
					'rent_id': that.storeInfo.id,
					'car_lease': that.storeInfo.car_lease,
					'several_months': that.storeInfo.several_months,
					'pay_type': that.payType,
					'pay_price':that.storeInfo.price,
					'real_name': that.username,
					'user_phone': that.userdata.record_phone,
					from:that.from
				}).then((res) => {
					let status = res.data.status,
					orderId = res.data.result.order_id,
					jsConfig = res.data.result.jsConfig,
					goPages = '/pages/rent/paySuccess?order_id=' + orderId + '&msg=' + res.msg +
					'&type=3' + '&totalPrice=' + that.storeInfo.price,
					friendPay = '/pages/users/payment_on_behalf/index?order_id=' + orderId + '&spread=' +
					that.$store.state.app.uid
					switch (status) {
						case 'ORDER_EXIST':
						case 'EXTEND_ORDER':
							uni.hideLoading();
							return that.$util.Tips({
								title: res.msg
							}, {
								tab: 5,
								url: goPages
							});
						case 'ALLINPAY_PAY':
							uni.hideLoading();
							// #ifdef MP
							this.initIn = true
							wx.openEmbeddedMiniProgram({
								appId: 'wxef277996acc166c3',
								extraData: {
									cusid: jsConfig.cusid,
									appid: jsConfig.appid,
									version: jsConfig.version,
									trxamt: jsConfig.trxamt,
									reqsn: jsConfig.reqsn,
									notify_url: jsConfig.notify_url,
									body: jsConfig.body,
									remark: jsConfig.remark,
									validtime: jsConfig.validtime,
									randomstr: jsConfig.randomstr,
									paytype: jsConfig.paytype,
									sign: jsConfig.sign,
									signtype: jsConfig.signtype
								}
							})
							this.jumpData = {
								orderId: res.data.result.orderId,
								msg: res.msg,
							}
							// #endif
							// #ifdef APP-PLUS
							plus.runtime.openURL(jsConfig.payinfo);
							setTimeout(e => {
								uni.reLaunch({
									url: goPages
								})
							}, 1000)
							// #endif
							// #ifdef H5
							this.formpost(res.data.result.pay_url, jsConfig)
							// #endif
							break;
						case 'PAY_ERROR':
							uni.hideLoading();
							return that.$util.Tips({
								title: res.msg
							}, {
								tab: 5,
								url: goPages
							});
							break;
						case 'SUCCESS':
							uni.hideLoading();
							if ((that.BargainId || that.combinationId || that.pinkId || that.seckillId || that
									.discountId) && that.payType != 'friend')
								return that.$util.Tips({
									title: res.msg,
									icon: 'success'
								}, {
									tab: 4,
									url: goPages
								});
							return that.$util.Tips({
								title: res.msg,
								icon: 'success'
							}, {
								tab: 4,
								url: that.payType == 'friend' ? friendPay : goPages
							});
							break;
						case 'WECHAT_PAY':
							that.toPay = true;
							// #ifdef MP
							/* that.toPay = true; */
							let mp_pay_name = ''
							if (uni.requestOrderPayment) {
								mp_pay_name = 'requestOrderPayment'
							} else {
								mp_pay_name = 'requestPayment'
							}
							uni[mp_pay_name]({
								timeStamp: jsConfig.timestamp,
								nonceStr: jsConfig.nonceStr,
								package: jsConfig.package,
								signType: jsConfig.signType,
								paySign: jsConfig.paySign,
								success: function(res) {
									uni.hideLoading();
									if (that.BargainId || that.combinationId || that.pinkId || that
										.seckillId || that.discountId)
										return that.$util.Tips({
											title: that.$t(`支付成功`),
											icon: 'success'
										}, {
											tab: 4,
											url: goPages
										});
									return that.$util.Tips({
										title: that.$t(`支付成功`),
										icon: 'success'
									}, {
										tab: 5,
										url: goPages
									});
								},
								fail: function(e) {
									uni.hideLoading();
									return that.$util.Tips({
										title: that.$t(`取消支付`)
									}, {
										tab: 5,
										url: goPages + '&status=2'
									});
								},
								complete: function(e) {
									uni.hideLoading();
									//关闭当前页面跳转至订单状态
									if (res.errMsg == 'requestPayment:cancel' || e.errMsg ==
										'requestOrderPayment:cancel') return that.$util
										.Tips({
											title: that.$t(`取消支付`)
										}, {
											tab: 5,
											url: goPages + '&status=2'
										});
								},
							})
							// #endif
							// #ifdef H5
							this.$wechat.pay(res.data.result.jsConfig).then(res => {
								return that.$util.Tips({
									title: that.$t(`支付成功`),
									icon: 'success'
								}, {
									tab: 5,
									url: goPages
								});
							}).catch(res => {
								if (!this.$wechat.isWeixin()) {
									uni.redirectTo({
										url: goPages + '&msg=' + that.$t(`支付失败`) + '&status=2'
										// '&msg=支付失败&status=2'
									})
								}
								if (res.errMsg == 'chooseWXPay:cancel') return that.$util.Tips({
									title: that.$t(`取消支付`)
								}, {
									tab: 5,
									url: goPages + '&status=2'
								});
							})
							// #endif
							// #ifdef APP-PLUS
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: jsConfig,
								success: (e) => {
									let url = goPages;
									uni.showToast({
										title: that.$t(`支付成功`)
									})
									setTimeout(res => {
										uni.redirectTo({
											url: url
										})
									}, 2000)
								},
								fail: (e) => {
									let url = '/pages/goods/order_pay_status/index?order_id=' +
										orderId +
										'&msg=' + that.$t(`支付失败`);
									uni.showModal({
										content: that.$t(`支付失败`),
										showCancel: false,
										success: function(res) {
											if (res.confirm) {
												uni.redirectTo({
													url: url
												})
											} else if (res.cancel) {}
										}
									})
								},
								complete: () => {
									uni.hideLoading();
								},
							});
							// #endif
							break;
						case 'PAY_DEFICIENCY':
							uni.hideLoading();
							//余额不足
							return that.$util.Tips({
								title: res.msg
							}, {
								tab: 5,
								url: goPages + '&status=1'
							});
							break;
					
						case "WECHAT_H5_PAY":
							uni.hideLoading();
							that.$util.Tips({
								title: that.$t(`订单创建成功`)
							}, {
								tab: 4,
								url: goPages + '&status=0'
							});
							setTimeout(() => {
								location.href = res.data.result.jsConfig.mweb_url;
							}, 2000);
							break;
					
						case 'ALIPAY_PAY':
							//#ifdef H5
							if (this.from === 'weixin') {
								uni.redirectTo({
									url: `/pages/users/alipay_invoke/index?id=${orderId}&pay_key=${res.data.result.pay_key}`
								});
							} else {
								uni.hideLoading();
								that.formContent = res.data.result.jsConfig;
								that.$nextTick(() => {
									document.getElementById('alipaysubmit').submit();
								})
							}
							//#endif
							// #ifdef MP
							uni.navigateTo({
								url: `/pages/users/alipay_invoke/index?id=${orderId}&link=${jsConfig.qrCode}`
							});
							// #endif
							// #ifdef APP-PLUS
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: jsConfig,
								success: (e) => {
									uni.showToast({
										title: that.$t(`支付成功`)
									})
									let url = '/pages/goods/order_pay_status/index?order_id=' +
										orderId +
										'&msg=' + that.$t(`支付成功`);
									setTimeout(res => {
										uni.redirectTo({
											url: url
										})
									}, 2000)
					
								},
								fail: (e) => {
									let url = '/pages/goods/order_pay_status/index?order_id=' +
										orderId +
										'&msg=' + that.$t(`支付失败`);
									uni.showModal({
										content: that.$t(`支付失败`),
										showCancel: false,
										success: function(res) {
											if (res.confirm) {
												uni.redirectTo({
													url: url
												})
											} else if (res.cancel) {}
										}
									})
								},
								complete: () => {
									uni.hideLoading();
								},
							});
							// #endif
							break;
					}
				}).catch((res) => {
					console.log(res);
				})
			},
			// 支付弹窗关闭事件
			payClose: function() {
				this.pay_close = false;
			},
			// 购买
			goBuy() {
				if (this.isLogin === false) {
					toLogin();
				} else {
					if(!this.userdata.record_phone){
						uni.showModal({
							title: '提示',
							content: '您未绑定手机号请先绑定手机号',
							cancelText: '取消',
							confirmText: '立即绑定',
							success: res => {
								if(res.confirm){
									uni.navigateTo({
										url:'/pages/users/user_phone/index'
									})
								}
							},
						});
					}else{
						uni.showModal({
							title: '请输入购买人姓名',
							editable: true,
							cancelText: '取消',
							confirmText: '确定',
							success: res => {
								if(res.confirm){
									if(!res.content){
										uni.showToast({
											title: '请输入姓名',
											icon:"error"
										});
									}else{
										this.username = res.content;
										this.pay_close = true;
									}
								}
							},
						});
					}
				}
			},
			// 后退
			returns() {
				// #ifdef H5
				return history.back();
				// #endif
				// #ifndef H5
				return uni.navigateBack({
					delta: 1,
				})
				// #endif
			},
			/*
			 * 获取用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then((res) => {
					that.$set(that, "userdata", res.data);
					that.cartArr[2].number = res.data.now_money
				});
			},
			/**
			 * 获取产品详情
			 *
			 */
			getGoodsDetails: function() {
				let that = this;
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getCarDetail({
						id: that.id
					})
					.then((res) => {
						uni.hideLoading();
						let storeInfo = res.data.info;
						let goodArray = new Array();
						that.$set(that, "storeInfo", storeInfo);
						that.$set(that, "description", storeInfo.description);
						if (this.description) {
							this.description = this.description.replace(
								/<img/gi,
								'<img style="max-width:100%;height:auto;float:left;display:block" '
							);
							this.description = this.description.replace(
								/<video/gi,
								'<video style="width:100%;height:300px;display:block" '
							);

						}
						if (that.isLogin) {
							that.getUserInfo();
						}
					})
					.catch((err) => {
						uni.hideLoading();
						//状态异常返回上级页面
						return that.$util.Tips({
							title: err.toString(),
						}, {
							tab: 3,
							url: 1,
						});
					});
			},
		},
	};
</script>

<style scoped lang="scss">
	button {
		padding: 0;
		margin: 0;
		line-height: normal;
		background-color: #fff;
	}

	button::after {
		border: 0;
	}

	action-sheet-item {
		padding: 0;
		height: 240rpx;
		align-items: center;
		display: flex;
	}



	.action-sheet {
		font-size: 17px;
		line-height: 1.8;
		width: 50%;
		position: absolute;
		top: 0;
		right: 0;
		padding: 25rpx 0;
	}






	.navbar .header {
		height: 96rpx;
		font-size: 30rpx;
		color: #050505;
		background-color: #fff;
		/* #ifdef APP-PLUS */
		width: 100%;
		/* #endif */
	}

	.home {
		/* #ifdef H5 */
		top: 20rpx !important;
		/* #endif */
	}

	.navbar .header .item {
		position: relative;
		margin: 0 25rpx;
	}

	.navbar .header .item.on:before {
		position: absolute;
		width: 60rpx;
		height: 5rpx;
		background-repeat: no-repeat;
		content: '';
		// background-image: linear-gradient(to right, #ff3366 0%, #ff6533 100%);
		background-color: var(--view-theme);
		bottom: -10rpx;
		left: 50%;
		margin-left: -28rpx;
	}

	.navbar {
		position: fixed;
		background-color: #fff;
		top: 0;
		left: 0;
		z-index: 99;
		width: 100%;
	}

	.navbar .navbarH {
		position: relative;
	}

	.navbar .navbarH .navbarCon {
		position: absolute;
		bottom: 0;
		height: 100rpx;
		width: 100%;
		/* #ifndef APP-PLUS || H5 || MP-ALIPAY */
		// justify-content: flex-end;
		padding-left: 48px;
		/* #endif */
	}

	.home {
		color: #333;
		position: fixed;
		/* #ifdef MP */
		width: 126rpx;
		left: 15rpx;
		/* #endif */
		/* #ifndef MP */
		width: 56rpx;
		left: 33rpx;
		/* #endif */
		height: 56rpx;
		z-index: 99;
		background: rgba(255, 255, 255, 0.3);
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 40rpx;
		font-size: 33rpx;

		&.right {
			right: 33rpx;
			left: unset
		}

		&.on {
			background: unset;
			color: #333;
		}

		&.homeIndex {
			/* #ifdef MP */
			width: 98rpx;
			/* #endif */
			/* #ifndef MP */
			border-color: rgba(255, 255, 255, 0);
			/* #endif */
		}
	}

	.home .iconfont {
		width: 58rpx;
		text-align: center;
	}

	.home .line {
		width: 1rpx;
		height: 34rpx;
		background: #B3B3B3;
	}



	.product-con .conter {
		display: block;
	}

	.product-con .conter img {
		display: block;
	}

	.product-con {
		.wrapper {
			padding-top: 1rpx;
		}
	}

	.product-con .wrapper .share .money image {
		width: 66rpx;
		height: 26rpx;
	}

	.introduce {
		min-height: 44rpx;
	}

	.limit_good {
		font-size: 16rpx;
		margin: 10rpx 30rpx;
		color: red;
	}

	.flex {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.introduce {
		min-height: 44rpx;
	}

	.product-con .footer {
		padding: 0 20rpx 0 30rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		background-color: rgba(255, 255, 255, 0.85);
		backdrop-filter: blur(10px);
		z-index: 277;
		border-top: 1rpx solid #f0f0f0;
		height: 100rpx;
		height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		transform: translate3d(0, 100%, 0);
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
	}

	.product-con {
		.footer {
			.item {
				font-size: 18rpx;
				color: #666;

				.iconfont {
					text-align: center;
					font-size: 40rpx;

					&.icon-shoucang1 {
						color: var(--view-theme);
					}

					&.icon-gouwuche1 {
						font-size: 40rpx;
						position: relative;

						.num {
							color: #fff;
							position: absolute;
							font-size: 18rpx;
							padding: 2rpx 10rpx 3rpx;
							border-radius: 200rpx;
							top: -10rpx;
							right: -10rpx;
						}
					}
				}
			}

			.bnt {
				margin-left: 30rpx;
				width: 444rpx;
				height: 76rpx;
				flex-grow: 1;

				.bnts {
					text-align: center;
					line-height: 76rpx;
					color: #fff;
					font-size: 28rpx;
					width: 100%;
				}

				.buy {
					border-radius: 50rpx;
					background-color: var(--view-theme);
					background-image: linear-gradient(to right, #fa6514 0%, #e93323 100%);
				}

				.virbnt {
					height: 76rpx !important;
					border-radius: 50rpx !important;
					overflow: hidden;
				}
			}
		}
	}
</style>