101 lines
2.3 KiB
Vue
101 lines
2.3 KiB
Vue
<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>
|