hptwxMiniProgram/pages/index/index.vue

<template>
	<view class="container">
		<uni-forms :label-width="80">
			<uni-forms-item label="问题反馈" name="issue" required>
				<uni-easyinput  v-model="formData.issue" 
					type="textarea"
					placeholder="请输入问题反馈"
					:maxlength='-1' autoHeight />
			</uni-forms-item>
		</uni-forms>
		<div class="action-container">
			<div class="app-item" v-for="(item,index) in actionList" :key="index" @click="handle(item)">
				<image class="logo" :src="item.appLogo" ></image>
				<view class="name">{{item.appTitle}}</view>
			</div>
		</div>
	</view>
</template>

<script>
	import {getByQr} from '@/api/openApi.js'
	import applist from './app_router.js'
	export default {
		data() {
			return {
				formData:{
					issue:""
				},
				actionList:[]
			}
		},
		onLoad(options){
			this.init(options)
		},
		methods: {
			init(options){
				this.getData(options)
			},
			getData({ocId, code}){
				if(!ocId)return
				getByQr(ocId, code).then((res)=>{
					this.actionList=res.data.appList
					uni.setStorageSync('qrcode',{
						...res.data.target,
						targetId:res.data.targetId,
						targetType:res.data.targetType,
						ocId,
						code
					})
				})	
			},
			handle(item){
				if(item.checklistId){
					uni.navigateTo({
						url:'/pages/app_views/checkList/index/index?type=app&id='+item.checklistId
					})	
					return
				}
				let url=applist[item.appCode]
				if(url===undefined){
					uni.showToast({
						icon:"none",
						title:"功能正在维护"
					})
					return
				}
				uni.navigateTo({
					url
				})	
			},
			isLogin(){
				let isLogin=uni.getStorageSync('isLogin')
				if(!isLogin){
					 // #ifdef H5
						uni.navigateTo({
							url:'/pages/login/index'
						})
					 // #endif
					 // #ifndef H5
					uni.navigateTo({
						url:'/pages/authorizedLogin/index'
					})
					// #endif
				}				
			},
			submit(form) {
			}
		},
		onShareAppMessage() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
		.button{
			background-color:#3384FF;
			color: #fff;
		}
		.action-container{
			display: flex;
			flex-wrap: wrap;
			.app-item{
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				width: 25%;
				padding: 20rpx 10rpx;
				box-sizing: border-box;
				// border: 1px solid #efe3e3;
				border-left: 0;
				&:nth-child(1){
					// border-left: 1rpx solid #efe3e3;
					border-radius: 20rpx;
				}
				.logo{
					display: block;
					width: 80rpx;
					height: 80rpx;
					border: 1px solid #efe3e3;
					border-radius: 10rpx;
				}
				.name{
					width: 100%;
					color: #666;
					font-size: 24rpx;
					line-height: 1;
					margin-top: 20rpx;
					text-overflow: ellipsis;
					word-break: break-all;
					overflow: hidden;
					white-space: nowrap;
				}
			}
		}
	}
</style>