new-88live/pages/user/help/help.vue

<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="help-service bg-white padding-lr">
			<view @tap="goService">
				<view class="cu-avatar lg round bg-white solid">
					<text class="wlIcon-unie737 text-cyan"></text>
				</view>
				<view class="margin-top-xs text-df">
					{{ $t('help.onlineService') }}
				</view>
			</view>
			<view @tap="callPhone">
				<view class="cu-avatar lg round bg-white solid">
					<text class="wlIcon-31guanzhuxuanzhong text-blue"></text>
				</view>
				<view class="margin-top-xs text-df">
					{{ $t('help.salesHotline') }}
				</view>
			</view>
			<view @tap="callPhone">
				<view class="cu-avatar lg round bg-white solid">
					<text class="wlIcon-dianhua text-purple"></text>
				</view>
				<view class="margin-top-xs text-df">
					{{ $t('help.serviceHotline') }}
				</view>
			</view>
		</view>
		<view class="bg-white text-center padding-bottom-sm">
			<text class="text-gray text-sm">{{ $t('help.workingHours') }}: {{ workingHours }}</text>
		</view>
		<view class="cu-bar bg-white solid-bottom margin-top" v-if="dataList.length !== 0">
			<view class="action">
				{{ $t('help.commonQuestions') }}
			</view>
		</view>
		<empty v-else-if="!loading" :text="$t('help.empty')" />
		<view class="cu-list menu">
			<view class="cu-item arrow" v-for="item in dataList" :key="item.id" @tap="onDetails(item)">
				<view class="content text-cut">
					<text class="text-gray-2">{{ item.title }}</text>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>
import { mapState } from 'vuex'
import Empty from '@/components/empty/empty.vue'
import { fetchArticleListPage } from '@/features/article/article-gateway'

export default {
	components: { Empty },
	data() {
		return {
			dataList: [],
			reload: false,
			current_page: 1,
			last_page: 1,
			status: 'more',
			loading: false,
			contentText: {
				contentdown: ' ',
				contentrefresh: this.$t('help.loading'),
				contentnomore: this.$t('help.noMore')
			}
		}
	},
	computed: {
		...mapState({
			appConfig: state => state.shell.appConfig || {}
		}),
		workingHours() {
			return this.appConfig.working_hours || '09:00-18:00'
		},
		phoneNumber() {
			return this.appConfig.tel_phone || ''
		}
	},
	onLoad() {
		this.loadData()
	},
	onPullDownRefresh() {
		this.current_page = 1
		this.reload = true
		this.loadData()
	},
	onReachBottom() {
		if (this.current_page >= this.last_page) {
			this.status = 'noMore'
		} else {
			this.reload = false
			this.current_page++
			this.status = 'loading'
			this.loadData()
		}
	},
	methods: {
		async loadData() {
			this.loading = true
			try {
				const res = await fetchArticleListPage(this.current_page, 'help')
				uni.stopPullDownRefresh()
				this.dataList = this.reload ? res.rows : this.dataList.concat(res.rows)
				this.current_page = res.currentPage
				this.last_page = res.lastPage
				this.status = res.total === 0 ? 'noMore' : 'more'
			} catch (e) {
				uni.stopPullDownRefresh()
				this.status = 'noMore'
			}
			this.loading = false
		},
		goService() {
			uni.navigateTo({ url: '/pages/user/service' })
		},
		callPhone() {
			if (this.phoneNumber) {
				uni.makePhoneCall({ phoneNumber: this.phoneNumber })
			} else {
				uni.showToast({ title: this.$t('help.noPhone'), icon: 'none' })
			}
		},
		onDetails(item) {
			const title = encodeURIComponent(item.title || '')
			uni.navigateTo({ url: `/pages/article/details?id=${item.id}&title=${title}` })
		}
	}
}
</script>

<style>
.help-service {
	display: flex;
	justify-content: space-around;
	padding-top: 40rpx;
	padding-bottom: 30rpx;
	text-align: center;
}
.help-service > view {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.solid::after {
	border: 1px solid rgba(0, 0, 0, 0.12);
}
</style>