OpenDoorManageMini/pages/activeDevice/bindAliAcc.vue

<template>
	<view class="container">
		<u-navbar leftIconColor="#fff" titleStyle="color:#fff;fontSize:36rpx;" :autoBack="true" bgColor="#2C6FF3"
			:placeholder="true" title="账号绑定">
		</u-navbar>

		<view class="content flex flex-direction justify-between" :style="{height:fullHeight}">
			<view class="top flex flex-direction align-center">
				<view class="img">
					<u-image width="400rpx" height="400rpx"
						src="https://cdn.ossfile.mxrvending.com/assets/xy_merc_mini/images/alipayUid.png"
						mode="widthFix" :lazy-load="true">
					</u-image>
				</view>
				<view class="btn flex justify-between">
					<view @click="save">保存二维码到手机相册</view>
					<view>帮助</view>
				</view>

				<view class="input flex">
					<input type="text" placeholder="请输入" placeholder-class="place-class" v-model="aliAcc" />
					<view class="bind" @click="bind">
						绑定
					</view>
				</view>
			</view>

			<view class="tips">
				支付宝刷脸AI柜，需要绑定操作员的支付宝账号，操作员刷脸操作货柜时，系统将对操作员的支付宝账号进行授权。
			</view>
		</view>
	</view>
</template>

<script>
	import {
		updateByAli
	} from "@/api/device/device.js"
	import {
		update
	} from "@/api/system/employee.js"

	import {
		imgDownLoad
	} from '@/utils/download.js'

	export default {
		data() {
			return {
				fullHeight: 0,
				aliAcc: null,
				userId: null,
			}
		},
		onLoad(o) {
			let _this = this;
			const query = uni.createSelectorQuery().in(this);
			query.select(".content").boundingClientRect((data) => {
				uni.getSystemInfo({
					success(res) {
						// 针对iPhone X等机型底部安全距离做适配
						const model = res.model;
						const modelInclude = [
							"iPhone X",
							'iPhone XR',
							"iPhone XS",
							"iPhone XS MAX",
							"iPhone 12/13 mini",
							"iPhone 12/13 (Pro)",
							"iPhone 12/13 Pro Max",
							"iPhone 14 Pro Max"
						];
						let safeDistance = modelInclude.includes(model)
						//动态设置商品区域高度
						console.log(res.windowHeight, data.top)
						if (safeDistance) {
							_this.fullHeight = res.windowHeight - data.top - 54 + 'px';
						} else {
							_this.fullHeight = res.windowHeight - data.top - 20 + 'px';
						}
					},
				});
			}).exec();

			if (o.userId) {
				this.userId = o.userId
			}
		},
		methods: {
			async bind() {
				if (!this.aliAcc) {
					this.$modal.msg('请输入支付宝用户id')
					return
				}
				if (!this.userId) {
					//商户绑定
					await this.mercUpdate()
				} else {
					//员工绑定
					await this.partnerUpdate()
				}
				console.log('成功')
				this.$modal.msg('绑定成功~')
				setTimeout(() => {
					this.$tab.navigateBack()
				}, 1000)
			},

			mercUpdate() {
				return new Promise((resolve, reject) => {
					updateByAli({
						aliUserId: this.aliAcc,
					}).then(res => {
						resolve(res)
					}).catch(err => {
						reject(res)
					})
				})
			},

			partnerUpdate() {
				return new Promise((resolve, reject) => {
					update({
						aliUserId: this.aliAcc,
						userId: this.userId
					}).then(res => {
						resolve(res)
					}).catch(err => {
						reject(res)
					})
				})
			},

			save() {
				let imgUrl = 'https://ossfile.mxrvending.com/assets/xy_merc_mini/images/alipayUid.png'
				imgDownLoad(imgUrl).then(res=>{
					uni.showToast({
						title: '保存成功~',
					})
				}).catch(err=>{
					uni.showToast({
						title: '保存失败，请重试！',
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;

		.content {
			background-color: #fff;
			width: 724rpx;
			margin: 20rpx 13rpx 0;
			overflow: hidden;
			border-radius: 12rpx;

			.top {
				.btn {
					width: 400rpx;
					color: #3876f3;
					text-decoration: underline;
					margin-top: 50rpx;

				}

				.input {
					width: 460rpx;
					line-height: 80rpx;
					height: 80rpx;
					margin-top: 70rpx;

					>input {
						line-height: 80rpx;
						height: 80rpx;
						width: 76%;
						background-color: #f6f8fb;
						padding: 0 30rpx;
						border-top-left-radius: 18rpx;
						border-bottom-left-radius: 18rpx;
					}

					>view {
						width: 24%;
						text-align: center;
						border-top-right-radius: 18rpx;
						border-bottom-right-radius: 18rpx;
						background-color: #3876f3;
						color: #fff;
					}
				}

				.place-class {
					color: #dcdcdc;
				}
			}

			.tips {
				background-color: #ebf2ff;
				padding: 16rpx 20rpx;
				color: #3876f3;
				font-size: 26rpx;
				line-height: 40rpx;
			}
		}

		.img {
			width: 400rpx;
			height: 400rpx;
			margin-top: 70rpx;
		}

		.canvas-box {
			position: absolute;
			left: -1000rpx;
		}
	}
</style>