zhdt-miniapp/pages/home/index.vue

<template name="basics">
  <view>
    <cu-custom class="home-custom" bgColor=".bg-sancolor"
               bgImage="https://ahwgh.oss-cn-hangzhou.aliyuncs.com/enterprise/64bdccea7bd72.png">
      <block slot="content">精准大田专家填报系统</block>
    </cu-custom>
    <scroll-view scroll-y class="page">

		<view>
			<view class=" cu-bar bg-white solid-bottom margin-top" >
			    <view class="action">
			        <text class="cuIcon-title text-blue"></text> 信息填报
			    </view>
			</view>
			<view class="cu-list menu margin-top">
				<view class="cu-form-group">
					<view class="title must">专家名称</view>
					<input type="text" :value="userInfo.author">
				</view>
			    <view class="cu-form-group">
			        <view class="title must">位置选择</view>
					<picker :value="userInfo.site" :range="pickerRange"  @change="caseTypeChange">
						<view class="picker">
							{{ userInfo.site ?userInfo.site :'请选择'}}
						</view>
					</picker>
			    </view>
				
			    <view class="cu-form-group">
			        <view class="title must">指导时间</view>
			        <input type="text" :value="userInfo.pzdt" disabled>
			    </view>
			    <view class="cu-bar bg-white ">
			    	<view class="action must">
			    		现场图片
			    	</view>
			    	<view class="action">
			    		{{ imgList.length }}/1
			    	</view>
			    </view>
			    <view class="cu-form-group">
			    	<view class="grid col-4 grid-square flex-sub">
			    		<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
			    			<image :src="imgList[index]" mode="aspectFill"></image>
			    			<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
			    				<text class='cuIcon-close'></text>
			    			</view>
			    		</view>
			    		<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
			    			<text class='cuIcon-cameraadd'></text>
			    		</view>
			    	</view>
			    </view>
			</view>
			
			<view class="padding  flex flex-direction">
			    <button class="cu-btn bg-blue lg  margin-tb-sm shadow-blur text-lg"
			            @click="submit" type="" >提交
			    </button>
			</view>
			
			
		</view>
		
		
		
		
		<view class="footer">
			<view>主办单位：安徽省农业农村厅质监处</view>
			<view>技术支持：安徽省北斗精准农业信息工程实验室</view>
		</view>
      <view class="cu-tabbar-height"></view>
    </scroll-view>
  </view>
</template>

<script>
  import { Messages } from "prettier/parser-postcss";
  import { _home } from "./home.js";
  

  export default {
    name: "basics",
    data() {
      return {
        cardCur: 0,
        dotStyle: false,
        towerStart: 0,
        direction: "",
		userInfo:{},
		imgList: [],//图片list
		caseTypeList:[],//'黑塔镇蒋杨村','韦集镇陈圩村','灵城镇界沟村','支河镇鸭湖村'
      };
    },
	computed: {
		pickerRange() {
		  return this.caseTypeList.map(item => item.site);
		}
	},
	created() {
		const now = new Date();
		const year = now.getFullYear();
		const month = now.getMonth() + 1;
		const day = now.getDate();
		const today = year + "-" + (month >= 10 ? month : ("0" + month)) + "-" + (day >= 10 ? day : ("0" + day));
		this.$set(this.userInfo, "pzdt", today);
		
		
		this.getLo();
		
		this.$set(this.userInfo,"author",wx.getStorageSync('username'));
		console.log("缓存"+wx.getStorageSync('username'))
		
		this.toNextPage();
		
		
		
		
		
		
		
		
	},
    methods: {
		getLocation() {
			return new Promise((resolve, reject) => {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						const {latitude: lat, longitude: lng} = res;
						resolve(res);
					},
					fail: err => {
						this.$msg("位置获取失败");
						reject("位置获取失败");
					}
				});
			})
		},
		getLo(){
			console.log("1111111")
			uni.showLoading({
			    title:'获取位置中...'
			});
			this.getLocation().then(res => {
				console.log(res)
				_home.location({
					volatitude:res.latitude,
					volongitude:res.longitude
				},res=>{
					uni.hideLoading();
					console.log(res)
					console.log(res.data.data[1].site)
					var a=[];
					a=res.data.data;
					this.caseTypeList=[];
					for (let i = 0; i < a.length; i++) {
						
						this.caseTypeList.push({
							id:i,
							site:a[i].site,
						})
						
					}
				})
				
				
				
			   /* const {latitude: lat, longitude: lng} = res;
			    if(!lat || !lng){
			        this.$msg("位置信息获取失败");
			        this.disableFirstBtn = false;
			    }
			    this.$set(this.checkInfo, "check_lng", lng)
			    this.$set(this.checkInfo, "check_lat", lat) */
			})
		},
		
		/**
		 * 类型选择事件
		 * **/
		caseTypeChange(e){
			console.log(e.detail.value);
			//this.userInfo.case_type=e.detail.value;
			this.$set(this.userInfo,"site",this.caseTypeList[e.detail.value].site)
		},
		submit(){
			var that=this;
			this.$set(this.userInfo,"imgurl",this.imgList.join(','))
			console.log(this.userInfo);
			
			  wx.showModal({
			    title: '提示', //提示的标题
			    content: '确定提交吗？', //提示的内容
			    success: function(res) {
					if(res.confirm) {
						_home.getLandImg(that.userInfo,res=>{
							console.log(res)
							if(res.data.code===1){
								that.$msg("上报成功！");
								
								delete that.userInfo.imgurl;
								delete that.userInfo.site;
								that.imgList=[]
							}else{
								that.$msg("上报失败！");
							}
						})
					}
			    }
			  })
			
			
			
			
			
		},
		//照片
		ChooseImage() {
			uni.chooseImage({
				count:3, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: (res) => {
					console.log(res)
					uni.showLoading({
						title: '图片上传中'
					})
					_home.ChooseImage(res.tempFilePaths[0], res => {
						console.log('返回的结果',res)
						let data = res.data
						data = JSON.parse(data)
						console.log(data)
						var url=data.data;
						console.log(url);
						
						if (this.imgList.length !== 0) {
							this.imgList = this.imgList.concat(data.data)
						} else {
							this.imgList = [data.data]
						}
						//this.userInfo.report_image.push(url)
						this.$set(this.userInfo,"imgurl",url)
						uni.hideLoading()
					})
				}
			});
		},
		DelImg(e) {
			uni.showModal({
				title: '图片删除',
				content: '确定要删除图片吗？',
				cancelText: '取消',
				confirmText: '确认',
				success: res => {
					console.log(res)
					if (res.confirm) {
						/* this.infoList.product_images.splice(e.currentTarget.dataset.index, 1);
						this.imgList.splice(e.currentTarget.dataset.index, 1); */
						this.imgList.splice(e.currentTarget.dataset.index, 1)
					}
				}
			})
		},
		ViewImage(index) {
		    uni.previewImage({
		    	urls: this.imgList,
		    	current: e.currentTarget.dataset.url
		    });
		},
		toNextPage() {
        console.log("判断登录");
        //判断有没有登录，没有登录直接跳到登录，登录了 跳到任务详情
        let username = wx.getStorageSync("username");
        if (username == "") {
          //没有登录
          console.log("没有登录");
          //跳入登录
          uni.navigateTo({
            url: "/pages/login/index"
          });
        } else {
			console.log("已登录")
          /* let role = uni.getStorageSync("role");
           console.log(index)
          if (index == 2 ) { //抽样人员的角色id
            //表示点了抽样单位且角色是抽样单位
              if(role === '85f63893de834bb898edc01cfd2cc46c'){
                  //检测机构人员
                  uni.navigateTo({
                      url: "/pages/sample-check-list/home"
                  });
              } else if(role === "f35551e4a06647dea5c2c43aaba22c2a"){
                  uni.navigateTo({
                      url: "/pages/task-list/index"
                  });
              }else{
                  uni.showToast({
                      icon: 'error',
                      title: "当前角色不可查看",
                      duration: 1500
                  })
              }

          }


          if (index == 0 && role == "a1cbf841b0514b47bbdd3f50c80b729f") { //快检站的角色
            //表示点了检测单位且角色是检测单位
            uni.navigateTo({
              url: "/pages/quick-task/list"
            });
          } 
		  
		  if (index == 1) {
              // && role == "a1cbf841b0514b47bbdd3f50c80b729f"
			uni.navigateTo({
			  url: "/pages/quick-task/quick-list"
			});
		  } */

        }

      }
    }
  };
</script>

<style>
    .page {
        height: 100vh;
    }

    .footer {
        position: fixed;
        text-align: center;
        line-height: 40px;
        margin-bottom: 2px;
        bottom: 10vh;
        width: 100%;
        font-size: 12px;
    }

    .footer view {
        line-height: 22px;
    }
</style>