shop_app/components/callCenter/index.vue

<template>
	<!-- 客服 -->
	<view>
		<up-overlay :show="showService" :zIndex="999">
			<view class="serviceBox">
				<view class="block"  @click.stop="preventD()">
					<!-- <image v-if="qrCodeBg" :src="qrCodeBg + '?x-oss-process=image/format,webp'" :webp="true" mode="widthFix" class="img" /> -->
					<image 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" @longpress="toShare(qrCodeImg)" class="image"/>
						<view class="btn">
							<view class="icon" :style="{backgroundImage: 'url(' + sp2 + ')'}"></view>
							<text>长按图片分享到微信</text>
						</view>
					</view>
					<view class="btnBox">
						<view class="btn on" @click="close()">关闭</view>
						<view class="btn" @click="toPage">我要投诉</view>
					</view>
				</view>
			</view>
		</up-overlay>
		
		<!-- <up-modal
			:show="showService"
			:showCancelButton="true"
			@confirm="toMiniProgram"
			@cancel="showService = false"
			:confirmColor="Color">
			<text>将跳转到小程序</text>
		</up-modal> -->
	</view>
	
</template>

<script>
	import { ref, reactive, toRefs, watch } from 'vue'
	import { get } from '@/api/request.js'
	import { sp2 } from '@/components/img.js'
import { func } from '../../uni_modules/uview-plus/libs/function/test'
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			type: {
				type: Number,
				default: 1
			},
			orderId: {
				type: Number
			}
		},
		setup(props, context) {
			const data = reactive({
				sp2: sp2,
				qrCodeBg: '',
				qrCodeImg: '',
				showService: false,
				Color: uni.getStorageSync('theme_color'),
				orderId: 0,
				sweixin: null
			})
			
			function getPlus() {
				var pages = getCurrentPages()
				var page = pages[pages.length - 1]
				var shares = null
				var pusher = plus.share.getServices(function(s){
					shares = {}
					for(var i in s){
						var t = s[i]
						shares[t.id] = t
					}
					data.sweixin = shares['weixin']
				}, function(e) {
					console.log("获取分享服务列表失败：" + e.message)
				})
			}
			
			const toMiniProgram = () => {
				data.sweixin.launchMiniProgram({
					id: 'gh_a2bdca31e535',
					path: 'pages/user/index?type=kefu'
				})
				data.showService = false
			}
			
			async function getQrCodeImg(type, orderId) {
				let url = `/api/v1/orderRefund/qrCode/${orderId}`
				if(type == 1) {
					url = '/api/v1/user/qrCode'
				}
				await get(url).then((res) => {
					data.qrCodeImg = res.data.qr_code
					data.qrCodeBg = res.data.service_background_img
				})
			}
			
			const preventD = () => {
				return
			}
			
			function close() {
				context.emit('close')
			}
			
			function toPage() {
				close()
				uni.navigateTo({url: '/pages/mine/msg/select?order_id=' + data.orderId})
			}
			
			function toShare(img) {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					imageUrl: img,
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				})
			}
			
			watch(props, async (newProps) => {
				if (newProps.show) {
					await getQrCodeImg(newProps.type, newProps.orderId)
					data.showService = true
					data.orderId = newProps.orderId || 0
					// getPlus()
				} else {
					data.showService = false
				}
			})
			
			return {
				...toRefs(data),
				getQrCodeImg,
				preventD,
				close,
				toPage,
				getPlus,
				toMiniProgram,
				toShare
			}
		}
	}
</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: 90%;
			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;
					}
				}
			}
			.btnBox{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 70%;
				margin: 0 auto;
				.btn{
					color: v-bind('Color');
					font-size: 28rpx;
					width: 44%;
					height: 64rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px solid v-bind('Color');
					border-radius: 10rpx;
					box-sizing: border-box;
					&.on{
						background: v-bind('Color');
						color: #fff;
					}
				}
			}
		}
	}
</style>