<template>
	<!-- 客服 -->
	<view class="whole">
		<view class="serviceBox">
			<view class="block">
				<image v-if="qrCodeBg" :src="qrCodeBg + '?x-oss-process=image/format,webp'" :webp="true" mode="widthFix" class="img" />
				<image v-else src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2022/11/07/tqVXV68gUSoUl5iOfRI72IvrdRHtcmZLb0ztnCa4.png?x-oss-process=image/format,webp" mode="widthFix" class="img" :webp="true" />
				<view class="openbox">
					<image :src="qrCodeImg" :webp="true" mode="widthFix" show-menu-by-longpress class="image"/>
					<view class="btn">
						<view class="icon" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>
						<text>长按识别二维码</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import { ref, reactive, toRefs, watch } from 'vue'
	import { get } from '@/Api/request.js'
	import { sp2 } from '@/components/img.js'
	export default {
		setup(props, context) {
			const data = reactive({
				sp2: sp2,
				qrCodeBg: '',
				qrCodeImg: '',
				Color: uni.getStorageSync('theme_color')
			})
			
			async function getQrCodeImg(type, orderId) {
				await get('/api/v1/user/qrCode').then((res) => {
					data.qrCodeImg = res.data.qr_code
					data.qrCodeBg = res.data.service_background_img
				})
			}
			
			return {
				...toRefs(data),
				getQrCodeImg
			}
		},
		async onLoad(options) {
			await this.$onLaunched
			this.getQrCodeImg()
		}
	}
</script>

<style lang="scss" scoped>
	.serviceBox{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		padding-top: 80rpx;
		box-sizing: border-box;
		.block{
			width: 85%;
			padding: 0 0 100rpx;
			background: #fff;
			border-radius: 24rpx;
			.img{
				width: 100%;
				border-radius: 24rpx 24rpx 0 0;
			}
			.openbox{
				margin: 60rpx auto;
				width: 400rpx;
				.image{
					width: 100%;
					float: left;
				}
				.btn{
					color: #fff;
					font-size: 30rpx;
					width: 100%;
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					background: v-bind('Color');
					border-radius: 0 0 16rpx 16rpx;
					.icon{
						width: 22.5px;
						height: 22.5px;
						background-repeat: no-repeat;
						background-size: 678px 612px;
						background-position: -357px -286.5px;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
</style>
