cashier_app/pages/help/help.vue

<template>
	<view class="bg-f7 min-page color-333 u-font-28">
		<view class="default-box-padding bg-fff default-box-radius">
			<view class="u-font-32 font-bold color-333">官方公众号</view>
			<view class="color-666 u-font-24">关注后即可查看所有操作教程视频</view>
			<view class="u-m-t-26 u-flex u-row-center">
				<image :src="state.help_ac_qrcode" mode="" class="img" show-menu-by-longpress></image>
			</view>

			<view class="u-m-t-16 color-666 u-font-24 u-text-center">长按识别二维码关注公众号</view>

			<view class="u-m-t-30 desc">
				<view class="line" v-for="(item,index) in desc" :key="index">
					<view class="num"><text>{{index+1}}</text></view>
					<view>{{item}}</view>
				</view>
				<!-- <view class="line">
					<view class="num"><text>1</text></view>
					<view>关注官方公众号-“超掌柜”</view>
				</view>
				<view class="line">
					<view class="num"><text>2</text></view>
					<view>方法1：点击底部菜单栏「功能演示」，选择对应功能即可</view>
				</view>
				<view class="line">
					<view class="num"><text>3</text></view>
					<view>方法2：直接在公众号中，发送想查询教程的功能名字即可</view>
				</view> -->
			</view>
		</view>
		<view class="default-box-padding bg-fff default-box-radius u-m-t-48 color-666">
			<view class="u-font-32 font-bold color-333">联系方式</view>
			<view class="u-flex u-row-between u-m-t-30">
				<view class="u-flex">
					<view class="blue-block"><up-icon name="phone" size="14" color="#fff"></up-icon></view>
					<text>客服电话</text>
				</view>

				<view class="u-flex" style="gap: 8rpx;">
					<view class="color-main">{{state.service_phone}}</view>
					<image :src="copy" class="copy" @click="copyText(state.service_phone)"></image>
					<up-icon name="phone-fill" color="#318AFE" size="14"
						@click="callphone(state.service_phone)"></up-icon>

				</view>

			</view>

			<view class="u-flex  u-m-t-20">
				<view class="blue-block"><up-icon name="email" size="14" color="#fff"></up-icon></view>
				<view class="u-flex-1">
					<view class="u-flex u-row-between w-full">
						<text>QQ告前咨询</text>
						<view class="u-flex" style="gap: 8rpx;">
							<text class="color-main">{{state.qq_consult}}</text>
							<image :src="copy" class="copy" @click="copyText(state.qq_consult)"></image>
						</view>

					</view>
					<view class="u-m-t-12 u-flex u-row-between w-full">
						<text>QQ投诉通道</text>
						<view class="u-flex" style="gap: 8rpx;">
							<text class="color-main">{{state.qq_complaint}}</text>
							<image :src="copy" class="copy" @click="copyText(state.qq_complaint)"></image>
						</view>
					</view>
				</view>

			</view>



			<view class="u-flex u-row-between u-m-t-20">
				<view class="u-flex">
					<view class="blue-block"><up-icon name="phone" size="14" color="#fff"></up-icon></view>
					<text>上班时间</text>
				</view>

				<view class="u-flex" style="gap: 8rpx;">
					<view class="color-main">{{state.work_time}}</view>

				</view>

			</view>


		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getHelp
	} from '@/http/api/system/help.js'
	import {
		reactive,
		ref
	} from 'vue'
	const img = 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/8b257f73f985494a8e5f95caef6b3925.jpg'
	const copy = 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/178604ce6c3548c0950319fc89f86d93.png'

	function copyText(text) {
		uni.setClipboardData({
			data: text
		})
	}

	function callphone(phone) {
		uni.makePhoneCall({
			phoneNumber: phone
		})
	}
	const state = reactive({
		help_ac_qrcode: '',
		work_time: '',
		qq_complaint: '',
		qq_consult: '',
		service_phone: '',
		official_account: '',

	})

	const desc = ref([])

	function init() {
		getHelp().then(res => {
			Object.assign(state, res)
			desc.value=res.official_account.split('\r\n')
		})
	}
	onLoad(init)
</script>

<style lang="scss" scoped>
	.min-page {
		padding: 56rpx 30rpx;
	}

	.img {
		width: 290rpx;
		height: 290rpx;
	}

	.desc {
		.line {
			display: flex;
			background-color: #fff;
			margin-top: 30rpx;
			height: auto;

			.num {
				margin-right: 22rpx;
				display: flex;
				width: 40rpx;
				height: 40rpx;
				padding: 10rpx;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 20rpx;
				color: #fff;
				border-radius: 30rpx;
				background: #318AFE;
			}
		}
	}

	.copy {
		width: 24rpx;
		height: 24rpx;
	}

	.blue-block {
		margin-right: 22rpx;
		display: flex;
		width: 40rpx;
		height: 40rpx;
		padding: 10rpx;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 20rpx;
		color: #fff;
		border-radius: 30rpx;
		background: #318AFE;
	}
</style>