itsm-wx-handle/pages/setPolling/setPolling.vue

<template>
	<view class="handler">
		<view class="body">
			<view class="scan-box">
				<view class="scan" @click="scanCodes">
					<text class="newicon newicon-saoma icon"></text>
				</view>
			</view>
			<view class="container">
				<view class="weight-class">可以通过扫一扫功能设置“巡检点”，扫描二维码后设置或选择巡检点。</view>
				<view class="weight-tip">查询巡检点结果：{{dataInfo.pollingData}}</view>
				<view class="weight-tip" v-if="dataInfo.newPollingData">选择巡检点为：<text class="red">{{dataInfo.newPollingData.name}}</text></view>
			</view>
		</view>
		<view class="foot_common_btns">
			<button v-if="dataInfo.type" @click="replace" type="default" class="primaryButton btn">选择巡检点</button>
			<button v-if="dataInfo.newPollingData" @click="save" type="default" class="primaryButton btn">保存</button>
		</view>
		<uni-popup ref="alertDialog" type="dialog" :mask-click="false">
			<view class="popup-content">
				<view class="tip">提示</view>
				<view class="content">{{dataInfo.content}}</view>
			</view>
			<view class="btn-box">
				<view @click="close" class="btn-item-50 color-close">取消</view>
				<view @click="dialogConfirm" class="btn-item-50 color">确认</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { SM } from "@/http/http.js"
  import { ref, reactive, computed } from 'vue'
  import { onLoad, onUnload, onShow, onPullDownRefresh } from '@dcloudio/uni-app'
  import { api_inspectionNode, api_inspectionNodeEdit } from "@/http/api.js"
  import { defaultColor } from '@/static/js/theme.js'
  import { useSetTitle } from '@/share/useSetTitle.js'
  import { useGoBack } from '@/share/useGoBack.js'
  import { useLoginUserStore } from '@/stores/loginUser'
	import { post } from "@/http/http.js"
	import { join } from "lodash-es"
  useSetTitle();
  const loginUserStore = useLoginUserStore();
  const { goBack }  = useGoBack();
	
  // 主题颜色
  const primaryColor = ref(defaultColor)
	
	const alertDialog = ref(null)
	
  // 数据
  const dataInfo = reactive({
		pollingData:'无',
		pollingId:null,
		newPollingData:null,
		content:'',
		type:false,
		bindingPolling:false
  })
	
	// 清空数据
	function setInfoData(){
		dataInfo.pollingData = '无'
		dataInfo.pollingId = null
		dataInfo.newPollingData = null
		dataInfo.content = ''
		dataInfo.type = false
		dataInfo.bindingPolling = false
		uni.removeStorageSync('pollingCode')
	}
	
	// 选择巡检点
	function replace(){
		// let data = {
		// 	code: 'inspection|$|703f3569-b80e-48df-aafd-5fcef36c96f0',
		// 	pollingData: '1东',
		// 	pollingId: 1,
		// }
		// uni.setStorageSync('pollingCode',JSON.stringify(data))
		uni.navigateTo({
		  url: `/pages/setPolling/selectPolling`
		})
	}
	
	// 保存
	function save(){
		setTimeout(_=>{
			alertDialog.value.open()
		},100)
	}
	
	// 提交
	function dialogConfirm(){
		let data = JSON.parse(uni.getStorageSync('pollingCode'))
		let query = {
			inspectionNode:{
				updateInspectionNodeCode: 1,
				id: data.pollingId,
				updateId: dataInfo.newPollingData.id,
				code: data.code
			}
		}
		uni.showLoading({
		  title: "加载中",
		  mask: true,
		});
		api_inspectionNodeEdit(query).then((result) => {
		    if (result.status == 200) {
					uni.hideLoading();
		      uni.showToast({
		        icon: 'none',
		        title: result.msg
		      });
					alertDialog.value.close()
					setTimeout(_=>{
						setInfoData()
					},1000)
		    } else {
					uni.showToast({
					  icon: 'none',
					  title: result.msg
					});
		    }
		  });
	}
	
	// 关闭
	function close(){
		alertDialog.value.close()
	}
	
	// 扫码
	function scanCodes(){
		uni.showLoading({
		  title: "加载中",
		  mask: true,
		});

		SM().then((res) => {
			let query = {
				idx: 0,
				sum: 1,
				inspectionNode:{
					code:res
				}
			}
			api_inspectionNode(query).then((res2) => {
			  uni.hideLoading();
			  if (res2.status == 200) {
					if(res2.list.length>0){
						dataInfo.pollingData = res2.list[0].name
						dataInfo.pollingId = res2.list[0].id
					}else{
						dataInfo.pollingData = '无'
						dataInfo.pollingId = null
					}
					let data = {
						code: res,
						pollingData: dataInfo.pollingData,
						pollingId: dataInfo.pollingId,
					}
					uni.setStorageSync('pollingCode',JSON.stringify(data))
					if(dataInfo.newPollingData){
						dataInfo.content = `二维码绑定为“${dataInfo.newPollingData.name}”，原“${dataInfo.pollingData}”二维码被清空，您确认绑定吗？`
					}
					dataInfo.type = true
			  } else {
			    uni.showToast({
			      icon: 'none',
			      title: res2.msg || '请求数据失败！'
			    });
			  }
			});
		})
	}
	
  onLoad((option) => {
		uni.hideLoading();
		if(option && option.data){
			let data = JSON.parse(option.data)
			dataInfo.newPollingData = data
			dataInfo.type = true
			console.log(998,data)
		}
		if(uni.getStorageSync('pollingCode')){
			let data = JSON.parse(uni.getStorageSync('pollingCode'))
			dataInfo.pollingData = data.pollingData
			dataInfo.pollingId = data.pollingId
			dataInfo.content = `二维码绑定为“${dataInfo.newPollingData.name}”，原“${dataInfo.pollingData}”二维码被清空，您确认绑定吗？`
		}
  })
	
	onShow(()=>{
		uni.hideLoading();
	})
	
	onUnload(()=>{
		setInfoData()
	})
	
	onPullDownRefresh(()=>{
		uni.stopPullDownRefresh()
	})
</script>

<style>
	>>> .uni-popup .uni-popup__wrapper{
		background-color: #fff !important;
		width: 90%;
		border-radius: 10rpx;
	}
	>>> .uni-popup__info{
		color: #333 !important;
	}
	>>>.uni-button-color{
		color: #49B856 !important;
	}
</style>
<style lang="scss" scoped>
.handler{
  height: 89vh;
	.body{
		height: 100%;
		padding: 0 30rpx;
		.scan-box{
			padding: 40rpx 0 ;
			display: flex;
			justify-content: center;
			.scan{
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 150rpx;
				background: linear-gradient( 300deg, #6BBF76 0%, #46B491 100%);
				.icon{
					color: #fff;
				}
			}
		}
		.container{
			text-align: center;
			.weight-class{
				font-size: 38rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
			}
			.weight-tip{
				font-size: 32rpx;
				margin-bottom: 20rpx;
			}
		}
	}
	.popup-content{
		padding: 20rpx;
		text-align: center;
		.tip{
			font-size: 32rpx;
			color: #333;
			margin-bottom: 20rpx;
		}
		.content{
			color: #6C6C6C;
			padding: 20rpx;
		}
	}
	.btn-box{
		display: flex;
		border-top: 1px solid #E3E3E3;
		.btn-item-50{
			flex: 1;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
		}
		.color-close{
			color: #606266;
		}
		.color{
			color: #49B856;
			border-left: 1px solid #E3E3E3;
		}
	}
}
</style>