popularize-front/components/cart/signInQrcodePopup.vue

<template>
	<uv-popup ref="popup"
	bgColor="#1B1713"
	:safeAreaInsetBottom="false"
	:round="30">
		<view class="signInContent">
			<view class="qrcode">
				<uv-qrcode
				ref="qrcode" 
				size="400rpx" 
				:hide="show"
				:value="order.id"></uv-qrcode>
			</view>
			
			<!-- <view class="info">
				<image src="/static/logo.png" mode="aspectFill"></image>
				<view class="right">
					<view class="text-title">
						领队
					</view>
					<view class="">
						
					</view>
				</view>
			</view> -->
			
			<view class="lingdui-box"
			v-if="adminUserInfo.id">
				<image class="use-img" :src="adminUserInfo.headImage" mode="aspectFill"></image>
				<view class="lingdui-msg">
					<view class="lingdui-msg-name">
						<view>{{adminUserInfo.nickName}}</view>
						<view class="name-tip">主理人</view>
					</view>
					<view>
						<uv-rate 
						:count="5" 
						disabled
						v-model="adminUserInfo.num" size="23" activeColor="#FFA200"></uv-rate>
					</view>
				</view>
			</view>
		</view>
	</uv-popup>
</template>

<script>
	export default {
		data() {
			return {
				show : true,
				adminUserInfo : {},
				order : {},
			}
		},
		methods: {
			open(orderId){
				this.$api('orderInfo',{orderId},res=>{
					if(res.code == 200) {
						this.show = true
						setTimeout(() => {
							this.show = false
						}, 500)
						this.adminUserInfo = res.result.adminUserInfo || {}
						this.order = res.result.orderDetails
						this.$refs.popup.open()
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.signInContent{
	overflow: hidden;
	width: 500rpx;
	border-radius: 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	.qrcode{
		padding: 40rpx 0;
		width: 400rpx;
		height: 400rpx;
	}
	.info{
		margin-top: 20rpx;
		width: calc(500rpx - 40rpx);
		padding: 10rpx;
		background-color: #2A2A2A;
		border-radius: 60rpx;
		image{
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
		}
	}
	.lingdui-box {
		width: calc(500rpx - 80rpx);
		// margin-top: 43rpx;
		height: 160rpx;
		background: #26201A;
		border-radius: 60rpx;
		display: flex;
		align-items: center;
		padding: 0 40rpx;
		.use-img {
			width: 86rpx;
			height: 86rpx;
			border-radius: 50%;
		}
		.lingdui-msg {
			flex: 1;
			margin-left: 24rpx;
			.lingdui-msg-name {
				font-weight: 500;
				font-size: 29rpx;
				color: #E6E6E6;
				display: flex;
				align-items: center;
				margin-bottom: 11rpx;
				.name-tip {
					padding: 0 20rpx;
					height: 27rpx;
					background: #3C2D17;
					border-radius: 0rpx 12rpx 12rpx 12rpx;
					font-weight: 500;
					font-size: 19rpx;
					color: #FFA200;
					line-height: 27rpx;
					margin-left: 14rpx;
				}
			}
		}
	}
}
</style>