shop-applet/pages/payment/get_payment.vue

<template>
	<view class="container">
		<view v-if="!isWeixin" class="v-navbar">
			<u-navbar title="提货付款" :safeAreaInsetTop="false" :fixed="false" @leftClick="leftClick" bgColor="transparent"
				leftIconColor="#333" :titleStyle="{color:'#333',fontWeight:'bold',fontSize:'32rpx'}">
			</u-navbar>
		</view>
		<view style="height: 50rpx;"></view>
		<view class="wrap">
			<view class="shop">
				<image src="@/static/shop_logo.webp" style="width: 62rpx;height: 54rpx;" />
				<text class="shop-name" v-if="mer_name">{{mer_name||''}}</text>
			</view>

			<!-- 付款金额 -->
			<view class="v-con">
				<view class="v-con-text">订单金额</view>
				<view class="v-con-input" @click="handleOpenKeyboard">
					<text style="color: #303133;font-size:32rpx;">￥</text>
					<u--input type="text" fontSize="23" height="112rpx" placeholder="请输入金额" border="none" readonly
						v-model="cartForm.total_amount" placeholderStyle="color:#999;font-size:32rpx">
					</u--input>
					<view class="placeholder"></view>
				</view>

				<view class="v-con-group">
					<view class="v-con-group-title">
						<view class="v-con-group-title-left">套餐详情</view>
						<view class="v-con-group-title-right" @click.stop="handleOpen">
							<text>{{isOpen?'折叠':'展开'}}</text>
							<u-icon :name="isOpen?'arrow-down' : 'arrow-right'" size="15"></u-icon>
						</view>
					</view>
					<scroll-view scroll-y>
						<view class="v-con-group-list" :style="{'max-height':isOpen?'400rpx':'0'}">
							<block v-for="(item,indx) in merchantInfo" :key="indx">
								<view class="v-con-group-list-item">
									<image :src="item.image" :showLoading="true" style="width:86rpx;height:86rpx;" />
									<text class="line1">{{item.store_name}}</text>
								</view>
							</block>
						</view>
					</scroll-view>
				</view>
			</view>

			<view class="v-btn-wrap" @click="cartForm.total_amount?submitOrder():null">
				<view class="v-btn">{{Number(cartForm.total_amount||0).toFixed(2)}}元 确认支付</view>
			</view>

			<!-- 登陆 -->
			<authorize :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun" />
		</view>

		<!-- 无商户信息提示 -->
		<!-- <view class="empty">
			<authorize v-show="!isWeixin" ref="authRef" :isAuto="isAuto" :isGoIndex="false" :isShowAuth="isShowAuth"
				@authColse="authColse" @onLoadFun="onLoadFun">
			</authorize>
		</view> -->

		<!-- 键盘 -->
		<popups ref="popups" @confirm="handleConfirm" @clear="handleClear" @change="handleChange"></popups>
	</view>
</template>
<script>
	var that;

	import {
		getProductInfo1,
		addCart,
		orderCheck
	} from "@/api/payment.js";
	import Cache from '@/utils/cache';
	import {
		mapGetters
	} from "vuex";
	import authorize from '@/components/Authorize';
	import {
		Toast
	} from "../../libs/uniApi";
	import popups from "@/components/popups/index.vue";
	export default {
		components: {
			authorize,
			popups
		},
		computed: {
			...mapGetters(['isLogin']),
		},
		data() {
			return {
				isEmpty: true,
				// isWeixin: this.$wechat.isWeixin(),
				isWeixin: false,
				cartForm: {
					product_id: '',
					product_attr_unique: '',
					cart_num: 1,
					is_new: 1,
					product_type: 0,
					source: 999,
					total_amount: ''
				},
				merchantInfo: '',
				checkForm: {
					address_id: '',
					cart_id: [],
					consumption_id: '',
					product_type: 0,
					source: 999,
					takes: [],
					use_coupon: {},
					use_integral: false
				},
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				mer_id: '',
				changeTxt: '展开',
				isOpen: false,
				keyBoardShow: false,
				mer_name: ''
			}
		},

		onLoad(opt) {
			that = this;
			this.mer_id = opt.mer_id;
		},

		onShow() {
			if (!this.isLogin) {
				Cache.set("login_back_url_weixin", "/" + getCurrentPages()[0].route + "?mer_id=" + this.mer_id);
				this.isAuto = true;
				this.isShowAuth = true;
				if (this.isWeixin) {
					this.$nextTick(() => {
						this.$refs.authRef.toWecahtAuth();
					})
				}
			} else {
				this.checkForm.cart_id = [];
				this.getProductInfoByMerid();
			}
		},
		methods: {
			// 打开键盘
			handleOpenKeyboard() {
				if (!this.isLogin) {
					Cache.set("login_back_url_weixin", "/" + getCurrentPages()[0].route + "?mer_id=" + this.mer_id);
					this.isAuto = true;
					this.isShowAuth = true;
					if (this.isWeixin) {
						this.$nextTick(() => {
							this.$refs.authRef.toWecahtAuth();
						})
					}
				} else {
					this.$refs.popups.handleOpen();
				}
			},

			// 键盘提交
			handleConfirm(e) {
				if (!e) return;
				this.cartForm.total_amount = e;
				this.submitOrder();
			},

			// 清空
			handleClear() {
				this.cartForm.total_amount = '';
				this.merchantInfo = [];
			},

			// 输入数字
			handleChange(e) {
				this.cartForm.total_amount = e;
				uni.$u.debounce(that.getProductInfoByMerid, 200)
			},

			leftClick(e) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},

			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e;
			},

			onLoadFun() {
				this.getProductInfoByMerid(this.mer_id);
				this.isShowAuth = false;
			},

			// 提交订单
			async submitOrder() {
				if (!this.cartForm.total_amount) {
					return this.$util.Tips({
						title: "请输入付款金额！"
					})
				}

				// 循环加入购物车
				for (var i = 0; i < that.merchantInfo.length; i++) {
					let info = {
						product_id: that.merchantInfo[i].product_id,
						product_attr_unique: that.merchantInfo[i].unique,
						cart_num: that.merchantInfo[i].num,
						is_new: 1,
						product_type: 0,
						source: 999,
						total_amount: that.cartForm.total_amount
					};

					try {
						let res = await addCart(info);
						that.checkForm.cart_id.push(res.data.cart_id);
					} catch (e) {
						return that.$util.Tips({
							title: err.message || err.msg || err
						})
					}
				}

				if (that.checkForm.cart_id && that.checkForm.cart_id.length > 0) {
					orderCheck(that.checkForm).then(res1 => {
						uni.navigateTo({
							url: "/pages/payment/settlement",
							success: (res) => {
								uni.setStorageSync('datas', {
									platformConsumption: res1.data.platformConsumption ||
									[],
									productData: that.merchantInfo,
									checkForm: that.checkForm,
									money: that.cartForm.total_amount,
									merName: that.mer_name,
									money: that.cartForm.total_amount,
									key: res1.data.key
								})
							},
							fail(err) {
								console.log(err)
							}
						})
					}).catch(err => {
						Toast(err.message || err)
					});
				}
			},

			// 折叠商品
			handleOpen() {
				this.isOpen = !this.isOpen;
			},

			// 根据店铺获取商品
			getProductInfoByMerid(merid, money) {
				getProductInfo1({
					mer_id: that.mer_id,
					money: that.cartForm.total_amount
				}).then(res => {
					if (!that.cartForm.total_amount) {
						this.mer_name = res.data.merchant;
					} else {
						that.merchantInfo = res.data.list;
					}
				}).catch((err) => {
					that.$util.Tips({
						title: err.message || err.msg || err
					}, () => {

					})
					// #ifdef APP
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
					// #endif

					// #ifndef APP
					that.isEmpty = true;
					// #endif
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F9F9F9;
	}

	.empty {
		margin: 0;
		text-align: center;

		image,
		uni-image {
			display: inline-block;
			width: 414rpx;
			height: 305rpx;
		}

		text {
			display: block;
			color: #666;
			font-size: 26rpx;
		}
	}

	.container {
		position: relative;
		height: 100vh;
		// background-image: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/def/c582c202402291601584806.webp");
		background-size: 100% auto;
		background-repeat: no-repeat;
		padding-top: var(--status-bar-height);

		.v-desc {
			position: absolute;
			top: 196rpx;
			z-index: 10;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding: 0 20rpx;
			background: transparent;

			.v-desc-main {
				margin-bottom: 30rpx;
				font-weight: 600;
				font-size: 42rpx;
				color: #FFFFFF;
			}

			.v-desc-sub {
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}

		.wrap {
			margin: 0 52rpx 0 54rpx;
		}

		.shop {
			display: flex;
			align-items: center;
			margin-bottom: 54rpx;

			text {
				margin-left: 32rpx;
			}
		}

		.v-con {
			margin: 0 auto 150rpx;

			.v-con-text {
				font-weight: 400;
				font-size: 30rpx;
				color: #000000;
			}

			.v-con-input {
				position: relative;
				display: flex;
				align-items: center;
				height: 112rpx;
				margin-bottom: 32rpx;
				border-bottom: 1rpx solid #D6D6D6;

				/deep/.uni-input-input {
					height: 112rpx;
					font-weight: bold;
					font-size: 72rpx;
				}

				text {
					font-weight: 400;
					font-size: 32rpx;
					color: #000000;
				}

				.placeholder {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}
			}

			.v-wrap {
				display: flex;
				align-items: center;
				padding-left: 20rpx;
				width: 666rpx;
				height: 210rpx;

				.v-wrap-money {
					display: flex;
					align-items: center;
					color: #FF5E0C;
					margin-right: 30rpx;

					.icon {
						font-size: 34rpx;
					}

					.num {
						font-size: 46rpx;
						display: inline-block;
						overflow: auto;
						width: 180rpx;
					}
				}

				.v-wrap-desc {
					.v-wrap-desc-main {
						margin-bottom: 16rpx;
						font-weight: 600;
						font-size: 32rpx;
						color: #2E2E2E;
					}

					.v-wrap-desc-sub {
						font-weight: 400;
						font-size: 24rpx;
						color: #2E2E2E;
					}
				}
			}


			.v-con-group {
				.v-con-group-title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 32rpx;

					.v-con-group-title-left {
						font-weight: 400;
						font-size: 30rpx;
						color: #000000;
					}

					.v-con-group-title-right {
						display: flex;
						align-items: center;

						text {
							margin-right: 18rpx;
							font-weight: 400;
							font-size: 30rpx;
							color: #000000;
						}
					}
				}

				.v-con-group-list {
					transition: max-height linear .1s;

					.v-con-group-list-item {
						display: flex;
						align-items: center;
						margin-bottom: 14rpx;

						text {
							margin-left: 30rpx;
							font-size: 26rpx;
							color: #333333;
						}
					}
				}
			}
		}

		.v-btn-wrap {

			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			background: #40AE36;
			border-radius: 10rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;

			// position: fixed;
			// z-index: 11;
			// bottom: 0;
			// left: 0;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			// width: 100%;
			// height: 240rpx;
			// background-color: #FDD6A6;

			// .v-btn {
			// 	width: 650rpx;
			// 	height: 100rpx;
			// 	line-height: 100rpx;
			// 	background: #FF8056;
			// 	box-shadow: 0rpx 3rpx 3rpx 1rpx rgba(255, 94, 12, 0.4);
			// 	border-radius: 55rpx 55rpx 55rpx 55rpx;
			// 	border: 1rpx solid #FF8056;
			// 	font-weight: 600;
			// 	font-size: 32rpx;
			// 	color: #FFFFFF;
			// 	text-align: center;

			// 	&:active {
			// 		opacity: .8;
			// 	}
			// }
		}
	}
</style>