zd/pages/shop/rent.vue

<template>
	<view class="content">
		<view class="top-tit">
			<view class="tit">
				为您展示【台州市】地区套餐，其他地域套餐待开放。
			</view>
			
		</view>
		<!-- 门店选择 -->
		<view class="yt-list tc-wrap" @click="navTo('/pages/shop/shopTab?select=1')">
			<view class="top-wrap flex">
				<view class="top-left">
					选择门店
				</view>
			</view>
			<view class="store-wrap flex" v-if="selctStore && selctStore.id">
				<view class="imgBox">
					<image class="logo" :src="selctStore.image" mode="aspectFit"></image>
				</view>
				<view class="padding-l-20 flex-grow-true">
					<view class="title clamp flex">
						<view class="name">
							{{selctStore.name}}
						</view>
						<view class="km" v-if="selctStore.range">
							{{selctStore.range<1?selctStore.distance+'m':selctStore.range+'km'}}
						</view>
					</view>
					<view class="flex addressBox margin-t-20">
						<image class="iconA margin-r-10" src="../../static/icon/shop.png" mode="">
						</image>
						<text class="clamp">
							{{selctStore.detailed_address}}
						</text>
					</view>
					<view class="addressBox flex">
						<image class="iconA margin-r-10" src="../../static/icon/shopPhone.png" mode="">

							<text class="clamp">
								{{selctStore.phone}}
							</text>
					</view>
					<view class="yysj">
						营业时间：{{selctStore.day_time}}
					</view>


				</view>
			</view>
			<view class="store-wrap-empty" v-else>
				选择门店
			</view>
		</view>
		<!-- 套餐 -->
		<view class="tc-wrap">
			<view class="top-wrap flex">
				<view class="top-left">
					选择套餐
				</view>
			</view>
			<view class="contet-list flex">
				<view class="tc flex" v-for="(item,index) in tcList" :class="{'action': selectTcIndex == index}"
					@click="choosTc(index,item)">

					<view class="tc-price">
						{{item.price}}
						<text class="tc-time-t">
							&nbsp;/&nbsp;{{item.day}}天
						</text>
					</view>
					<view class="tc-time-price">
						<text>{{(item.price*1/(item.day*1)).toFixed(2)}}</text>元/天
					</view>
				</view>
			</view>
		</view>
		<view class="dy-wrap" v-if="selectTc.id && userInfo.battery_deposit != 1">
			<view class="top-wrap flex">
				<view class="top-left">
					押金服务
				</view>
				<!-- <view class="top-right">
					<text>押金规则</text>
					<image src="../../static/icon/next1.png" mode="heightFix"></image>
				</view> -->
			</view>
			<view class="contet-list flex">
				<!-- <view class="tc flex dy">
					<view class="tc-time">
						<image src="../../static/icon/orderWx.png" mode="heightFix"></image>微信信用免押金
					</view>
					<view class="tc-time-price">
					微信信用≥550分
					</view>
					<view class="tc-price">
						77<text>￥88</text>
					</view>
				</view> -->
				<view class="tc flex dy action">
					<view class="tc-time">
						支付押金
					</view>
					<!-- <view class="tc-time-price">
					元/天
					</view> -->
					<view class="tc-price">
						{{selectTc.deposit}}
					</view>
				</view>
			</view>
		</view>
		<view class="dy-wrap">
			<view class="top-wrap flex">
				<view class="top-left">
					使用说明
				</view>
			</view>
			<view class="sysm" v-html="sm">
			</view>
		</view>

		<view class="yt-list">
			<view class="yt-list-cell b-b" @click="payType='weixin'">
				<view class="cell-tit flex">
					<image class="orderIcon" src="../../static/icon/orderWx.png" mode="widthFix"></image>
					<text class="margin-l-10">微信支付</text>
				</view>
				<image class="checked" v-if="payType=='weixin'" src="../../static/icon/addressIconXz.png"
					mode="widthFix"></image>
				<view v-else class="noChecked"></view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="yt-list-cell b-b" @click="payType='ali'">
				<view class="cell-tit flex">
					<image class="orderIcon" src="../../static/icon/orderAli.png" mode="widthFix"></image>
					<text class="margin-l-10">支付宝</text>
				</view>
				<image class="checked" v-if="payType=='ali'" src="../../static/icon/addressIconXz.png" mode="widthFix">
				</image>
				<view v-else class="noChecked"></view>
			</view>
			<!-- #endif -->
			<view class="yt-list-cell b-b" @click="payType='yue'">
				<view class="cell-tit flex">
					<image class="orderIcon" src="../../static/icon/ye.png" mode="widthFix"></image>
					<text class="margin-l-10">卡券({{now_money}})</text>
				</view>
				<image class="checked" v-if="payType=='yue'" src="../../static/icon/addressIconXz.png" mode="widthFix">
				</image>
				<view v-else class="noChecked"></view>
			</view>
		</view>
		<view class="ts">

		</view>
		<view class="btm-btn flex">
			<view class="pay-price" v-if="userInfo.battery_deposit == 1">
				总计费用：<text>{{(selectTc.price*1) || ''}}</text>
			</view>
			<view class="pay-price" v-else>
				总计费用：<text>{{(selectTc.price*1 + selectTc.deposit*1) || ''}}</text>
			</view>
			<view class="pay-btn" @click="toBuy" :class="{'zfz': loading}">
				{{loading?'支付中':'立即支付'}}
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef H5
	import weixinObj from "@/plugin/jweixin-module/index.js";
	// #endif
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		storeList,
	} from '@/api/product.js';
	import {
		getUserInfo
	} from '@/api/user.js';
	import {
		orderPay
	} from '@/api/order.js'
	import {
		getRents,
		rentCreate,
		details
	} from '@/api/index.js'
	export default {
		data() {
			return {
				selctStore: {
					id: ''
				},
				now_money: '',
				tcList: [],
				selectTc: {},
				selectTcIndex: 0,
				payType: 'yue',
				sm: '', //使用说明
				loading: false, //是否支付中
			}
		},
		computed: {
			...mapState('user', ['address', 'userInfo'])
		},
		onLoad() {
			this.getRents()
			this.getSm()
		},
		onShow() {
			this.userinfo()
		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			...mapMutations('user', ['setUserInfo']),
			// 获取使用说明
			getSm() {
				details({}, 1).then(res => {
					this.sm = res.data.content
				})
			},
			navTo(url) {
				uni.navigateTo({
					url,
					fail() {
						uni.switchTab({
							url
						})
					}
				})
			},
			userinfo() {
				getUserInfo({}).then(({
					data
				}) => {
					this.now_money = data.now_money;
					this.setUserInfo(data)
				});
			},
			choosTc(index, item) {
				this.selectTcIndex = index
				this.selectTc = item
			},
			getRents() {
				getRents().then(res => {
					this.tcList = res.data.rent
					this.selectTc = this.tcList[0]
				})
			},
			paySuccessTo() {
				uni.hideLoading();
				this.loading = false
				// uni.redirectTo({
				// 	url: '/pages/user_home/money/paySuccess?orderid=' + this.orderId,
				// });
				uni.redirectTo({
					url: '/pages/user_home/myRent'
				})
			},
			toBuy() {
				let that = this
				if (that.selctStore.id == '') {
					return that.$api.msg('请选择门店')
				}
				that.loading = true
				rentCreate({
					store_id: that.selctStore.id,
					rent_id: that.selectTc.id,
					// #ifdef H5
					from: 'weixin', //来源
					// #endif
					// #ifdef MP-WEIXIN
					from: 'routine', //来源
					// #endif
					// #ifdef APP-PLUS
					from: 'app', //来源
					// #endif
					pay_type: that.payType //支付方式
				}).then(({
					data,
					status,
					msg
				}) => {
					if (data.status == 'ORDER_EXIST') {
						uni.showModal({
							title: '提示',
							content: msg,
							showCancel: false
						});
						uni.hideLoading();
						that.loading = false;
						return;
					}
					// 保存订单号
					that.orderId = data.result.orderId;
					// 判断是否为卡券支付
					if (that.payType == 'yue') {
						console.log('卡券支付', status == 200 && data.status == 'SUCCESS');
						that.loading = false
						if (status == 200 && data.status == 'SUCCESS') {
							that.paySuccessTo();
						} else {
							that.$api.msg(msg);
						}
					} else {
						// 立即支付
						// obj.orderMoneyPay();
						let da = data.result.jsConfig;
						let paydata = {
							nonceStr: da.nonceStr,
							package: da.package,
							signType: da.signType,
							paySign: da.paySign,
							success: function(res) {
								that.paySuccessTo();
							},
							fail: () => {
								that.loading = false;
							}
						};
						// #ifdef H5
						paydata.timestamp = da.timestamp;
						weixinObj.chooseWXPay(paydata);
						// #endif
						// #ifdef MP-WEIXIN
						paydata.timeStamp = da.timestamp;
						wx.requestPayment(paydata);
						// #endif
					}
				})
			},
			orderMoneyPay() {
				let obj = this;
				orderPay({
						uni: obj.orderId,
						// #ifdef H5
						from: 'weixin', //来源
						// #endif
						// #ifdef MP-WEIXIN
						from: 'routine', //来源
						// #endif
						// #ifdef APP-PLUS
						from: 'app', //来源
						// #endif
						paytype: obj.payType //支付类型  weixin-微信 yue-卡券
					})
					.then(e => {
						// 判断是否微信小程序支付
						if (obj.payType == 'weixin') {
							// #ifdef H5 || MP
							let da = e.data.result.jsConfig;
							let data = {
								nonceStr: da.nonceStr,
								package: da.package,
								signType: da.signType,
								paySign: da.paySign,
								success: function(res) {
									obj.paySuccessTo();
								},
								fail: () => {
									uni.navigateTo({
										url: '/pages/order/order?state=0'
									});
								}
							};
							// #endif
							// #ifdef H5
							data.timestamp = da.timestamp;
							weixinObj.chooseWXPay(data);
							// #endif
							// #ifdef MP-WEIXIN
							data.timeStamp = da.timestamp;
							wx.requestPayment(data);
							// #endif
							// #ifdef APP
							console.log(e.data.result.jsConfig, '返回数值');
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: e.data.result.jsConfig,
								success(e) {
									obj.paySuccessTo();
								},
								fail: (e) => {
									console.log(e, '支付失败');
									uni.navigateTo({
										url: '/pages/order/order?state=0'
									});
								}
							})
							// #endif
						}
						// #ifdef APP
						if (obj.payType == 'ali') {
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: e.data.result.jsConfig,
								success(e) {
									obj.paySuccessTo();
								},
								fail: (e) => {
									console.log(e, '支付失败');
									uni.navigateTo({
										url: '/pages/order/order?state=0'
									});
								}
							})
						}
						// #endif
						uni.hideLoading();
						obj.payLoding = false;
					})
					.catch(e => {
						// 支付完成
						uni.hideLoading();
						obj.payLoding = false;
						console.log(e);
					});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-top: 1rpx;
	}

	.dy-wrap,
	.tc-wrap {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
		// padding: 25rpx 25rpx 45rpx;
		margin: 20rpx auto;

	}

	.contet-list {
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 25rpx 45rpx;

		.tc {
			width: 315rpx;
			height: 212rpx;
			background: #FFFFFF;
			border: 2px solid #E9E9E9;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			flex-direction: column;
			justify-content: center;

			// align-items: center;
			.tc-time {
				font-size: 28rpx;
				font-weight: bold;
				color: #00001A;
				display: flex;
				align-items: center;

				image {
					height: 34rpx;
					margin-right: 10rpx;
				}
			}

			.tc-price {
				font-size: 55rpx;
				font-weight: bold;
				color: #52C696;
				padding: 4rpx 0;

				&::before {
					content: '￥';
					font-size: 20rpx;

				}

				text {
					font-size: 22rpx;
					font-weight: 500;
					text-decoration: line-through;
					color: #999999;
				}
				.tc-time-t {
					font-size: 28rpx;
					font-weight: bold;
					color: #00001A;
					text-decoration: none;
				}
			}

			.tc-time-price {
				font-size: 22rpx;
				font-weight: 500;
				color: #999999;

				text {
					font-weight: bold;
				}
			}
		}

		.dy {
			height: 187rpx;
		}

		.action {
			background: #F3FFFB;
			border: 2px solid #5FCCA7;
		}
	}

	.top-wrap {
		justify-content: space-between;
		padding: 0 25rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #00001A;
		height: 85rpx;

		.top-left {}

		.top-right {
			text {
				font-size: 25rpx;
				font-weight: 500;
				color: #999999;
			}

			image {
				height: 22rpx;
				margin-left: 10rpx;
			}
		}
	}

	.sysm {
		padding: 34rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #666666;
	}

	.ts {
		height: 200rpx;
	}

	.btm-btn {
		width: 750rpx;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		z-index: 999;

		.pay-price {
			padding-left: 33rpx;
			flex-grow: 1;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;

			text {
				font-size: 48rpx;
				font-weight: 500;
				color: #FF6B2E;

				&::before {
					content: '￥';
					font-size: 28rpx;
				}
			}
		}

		.pay-btn {
			flex-shrink: 0;
			width: 287rpx;
			height: 98rpx;
			background: linear-gradient(-38deg, #6CDBC3, #6DD6B8);
			line-height: 100rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}

	.yt-list {
		background: #fff;
		margin: 0 $page-row-spacing;
		margin-top: 30rpx;
		border-radius: 20rpx;
	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 30rpx 10rpx 40rpx;
		line-height: 70rpx;
		position: relative;

		.checked,
		.noChecked {
			width: 36rpx;
			height: 36rpx;
		}

		.noChecked {
			border: 1px solid $font-color-light;
			border-radius: 100rpx;
		}

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30rpx;
		}

		.cell-icon {
			height: 32rpx;
			width: 32rpx;
			font-size: 22rpx;
			color: #fff;
			text-align: center;
			line-height: 32rpx;
			background: #f85e52;
			border-radius: 4rpx;
			margin-right: 12rpx;

			&.hb {
				background: #ffaa0e;
			}

			&.lpk {
				background: #3ab54a;
			}
		}

		.cell-more {
			align-self: center;
			font-size: 24rpx;
			color: $font-color-light;
			margin-left: 8rpx;
			margin-right: -10rpx;
		}

		.cell-tit {
			font-size: 26rpx;
			color: $font-color-light;
			margin-right: 10rpx;

			.orderIcon {
				width: 48rpx;
			}
		}

		.cell-tip {
			font-size: 26rpx;
			color: $font-color-dark;

			&.disabled {
				color: $font-color-light;
			}

			&.active {
				color: $base-color;
			}

			&.red {
				color: $base-color;
			}
		}

		&.desc-cell {
			.cell-tit {
				max-width: 90rpx;
			}
		}

		.desc {
			text-align: right;
			font-size: $font-base;
			color: $font-color-light;
		}
	}

	.store-wrap-empty {
		text-align: center;
		height: 100rpx;
	}

	.store-wrap {
		background-color: #FFFFFF;
		margin-bottom: 30rpx;
		padding: 30rpx;
		border-radius: 20rpx;

		.list,
		.km {
			color: $font-color-light;
			font-size: $font-sm;
		}

		.logo {
			height: 200rpx;
			width: 200rpx;
			border-radius: 20rpx;
		}

		.title {
			font-size: 36rpx;
			color: $font-color-dark;
		}

		.iconR {
			height: 24rpx;
		}

		.iconA {
			width: 24rpx;
			height: 24rpx;
		}

		.addressBox {
			font-size: 24rpx;
			color: $font-color-light;
			justify-content: flex-start;
			padding: 10rpx 0;
		}

		.yysj {
			display: inline-block;
			// width: 239rpx;
			padding: 0 10rpx;
			height: 32rpx;
			background: #ddf8f1;
			border-radius: 16rpx 16rpx 16rpx 0rpx;
			font-size: 20rpx;
			font-weight: bold;
			color: #5FCCA7;
			text-align: center;
			line-height: 32rpx;
			margin-top: 10rpx;
		}
	}

	.zfz {
		background: #999 !important;
	}
	.top-tit {
		width: 750rpx;
		background-color: #fff;
		padding: 10rpx;
		.tit {
			font-size: 28rpx;
			background-color:rgba(108, 217, 192, 0.4);
			border-radius: 5rpx;
			padding: 10rpx;
		}
	}
</style>