bigdata_WX/pages/identifyPest/identifyPest.vue

<template>
  <view>
    <!-- 拍照识别 -->
    <view class="photograph_box">
      <!-- 标题 -->
      <view class="photograph_div">
        <view class="photograph_tit"></view>
        <text class="photograph_txt">田间随识</text>
      </view>

      <!-- 列表 -->
      <view class="photograph_ul">
        <view
          @click="selectPlant(item)"
          class="photograph_list"
          v-for="(item, index) in photArr"
          :key="index"
        >
          <image
            :src="$imageHost+'/bigservers/' + item.url"
            mode=""
            class="photograph_list_img"
          ></image>
        </view>
      </view>
    </view>

    <!-- 拍照指南 -->
    <image :src="$imageHost+'/bigservers/' + 'images/home_5.png'" @click="photoGuide('/pages/identifyPest/guidance/guidance')"
		 class="photo_img" mode=""></image>

    <!-- 更多操作 -->
    <!-- <view class="operation_box">
			<view class="operation_div">
				<view class="operation_tit"></view>
				<text class="operation_txt">更多操作</text>
			</view>
			<view class="operation_ul">
				<image @click="photoGuide('/pages/repository/repository')" :src="$imageHost+'/bigservers/' + 'images/home_6.png'"
				 class="operation_left" mode=""></image>
				<view class="operation_list">
					<image @click="photoGuide('/pages/discernRecord/discernRecord')" :src="$imageHost+'/bigservers/' + 'images/home_7.png'"
					 class="operation_rightTop" mode=""></image>
					<image @click="photoGuide('/pages/collect/collect')" :src="$imageHost+'/bigservers/' + 'images/home_8.png'"
					 class="operation_rightBottom" mode=""></image>
				</view>
			</view>
		</view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchVal: '', //测试
      photArr: [
        {
          url: 'images/home_1.png',
          // dat: '/pages/identifyPest/economicsPlant/economicsPlant',
          name: '经济作物',
		  type: 'economicsPlant'
        },
        // {
        // 	'url': 'images/home_2.png',
        // 	'dat': '/pages/identifyPest/fruitsPlant/fruitsPlant',
        // 	'name': '水果作物'
        // },
        // {
        // 	'url': 'images/home_3.png',
        // 	'dat': '/pages/identifyPest/vegetablesPlant/vegetablesPlant',
        // 	'name': '蔬菜作物'
        // },
        {
          url: 'images/home_4.png',
          // dat: '/pages/identifyPest/cerealPlant/cerealPlant',
          name: '粮食作物',
		  type: 'cerealPlant'
        },
      ], //拍照识别图片列表
    };
  },
  methods: {
    // 拍照识别跳转
    selectPlant(item) {
      // console.log(url)
      uni.navigateTo({
        url: `/pages/identifyPest/identifyPestIndex/identifyPestIndex?type=${item.type}`,
      });
    },

    // 拍照指南、知识库、识别记录、我的收藏跳转
    photoGuide(url) {
      uni.navigateTo({
        url,
      });
    },

    //左侧边弹框点击事件
    defails(url) {
      uni.navigateTo({
        url,
      });
    },

    // 点击右上角进入城市列表
    // cityList() {
    // 	uni.navigateTo({
    // 		url: '/pages/cityList/cityList'
    // 	})
    // },
    onShow: function () {
      // var that = this
      // uni.getStorage({
      // 	key: 'location',
      // 	success: function(res) {
      // 		console.log('有')
      // 	},
      // 	fail: function(err) {
      // 		console.log('没有,去请求')
      // 		if (that.searchVal == '') {
      // 			that.getLocation() //位置信息
      // 		}
      // 	}
      // })
      // this.weatherData() //天气
      // this.userAxios() //个人信息数据
      // console.log(mphone)
      // that.phoneNum = mphone
    },

    onLoad() {
      // if (this.searchVal == '') {
      // 	this.getLocation() //位置信息
      // }
      // var that = this
      // uni.getStorage({
      // 	key: 'location',
      // 	success: function(res) {
      // 		console.log('有')
      // 	},
      // 	fail: function(err) {
      // 		console.log('没有,去请求')
      // 		if (that.searchVal == '') {
      // 			that.getLocation() //位置信息
      // 		}
      // 	}
      // })
    },
  },
};
</script>

<style lang="scss">
// 顶部导航左图标
.navTopLeftIcon {
  width: 38rpx;
  height: 35rpx;
  margin: 0 0 0 25rpx;
}

// 顶部导航右
.navRight {
  position: absolute;
  top: 28rpx;
  right: 18rpx;

  .navTopRigthIcon {
    width: 23rpx;
    height: 30rpx;
    vertical-align: top;
  }

  text {
    width: 95rpx;
    height: 50rpx;
    font-size: 13px;
    color: #fff;
    text-align: center;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

// 个人资料
.userBox {
  // border: 1px solid #000;
  display: flex;
  padding: 50rpx 50rpx 50rpx 30rpx;

  .userBox_image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 55px;
  }

  .userDiv {
    // border: 1px solid #000;
    padding-top: 10rpx;
    margin-left: 30rpx;

    .userDiv_name {
      font-weight: 550;
      font-size: 23px;
      text-align: left;
    }

    .userDiv_phone {
      color: #9a9a9a;
      text-align: left;
    }
  }
}

// 操作列表
.operation_ulA {
  // border: 1px solid #000;
  .operation_list {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 65rpx auto;

    .operation_listDiv {
      .operation_listDivIcon {
        width: 40rpx;
        height: 40rpx;
        vertical-align: bottom;
      }

      text {
        color: #5a5a5a;
        margin: 10rpx 0 0 20rpx;
        text-align: left;
        font-size: 17px;
      }
    }

    .operation_listRight {
      width: 40rpx;
      height: 40rpx;
      vertical-align: bottom;
    }
  }
}

// 拍照识别
.photograph_box {
  // 标题
  .photograph_div {
    width: 700rpx;
    margin: 15rpx auto;
    display: flex;

    .photograph_tit {
      border: 1px solid #45c785;
      width: 10rpx;
      height: 40rpx;
      background: #45c785;
    }

    .photograph_txt {
      color: #333333;
      margin-left: 20rpx;
      font-weight: 550;
      font-size: 17px;
      line-height: 35rpx;
    }
  }

  // 图片列表
  .photograph_ul {
    display: flex;
    flex-wrap: wrap;

    .photograph_list {
      width: 370rpx;
      margin: 10rpx auto;

      .photograph_list_img {
        width: 370rpx;
        height: 200rpx;
      }
    }
  }
}

// 拍照指南
.photo_img {
  width: 720rpx;
  height: 190rpx;
  margin: 0 auto;
}

// 更多操作
.operation_box {
  // 标题
  .operation_div {
    width: 700rpx;
    margin: 15rpx auto;
    display: flex;

    .operation_tit {
      border: 1px solid #45c785;
      width: 10rpx;
      height: 40rpx;
      background: #45c785;
    }

    .operation_txt {
      color: #333333;
      margin-left: 20rpx;
      font-weight: 550;
      font-size: 17px;
      line-height: 35rpx;
    }
  }

  // 列表
  .operation_ul {
    display: flex;
    justify-content: center;
    margin-left: -50rpx;

    .operation_left {
      width: 420rpx;
      height: 260rpx;
      // margin-top: 8rpx;
      // border: 1px solid #000;
    }

    .operation_list {
      width: 250rpx;

      .operation_rightTop {
        width: 250rpx;
        height: 128rpx;
        display: block;
        // border: 1px solid #000;
      }

      .operation_rightBottom {
        width: 250rpx;
        height: 128rpx;
        display: block;
        // border: 1px solid #000;
      }
    }
  }
}

// 天气
.weather_box {
  // 标题
  .weather_div {
    width: 700rpx;
    margin: 15rpx auto;
    display: flex;

    .weather_tit {
      border: 1px solid #45c785;
      width: 10rpx;
      height: 40rpx;
      background: #45c785;
    }

    .weather_txt {
      color: #333333;
      margin-left: 20rpx;
      font-weight: 550;
      font-size: 17px;
      line-height: 35rpx;
    }
  }

  // 内容
  .weather_ul {
    width: 93%;
    margin: 0 auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); // 地址
    border-radius: 2px;

    .weather_site {
      margin: 0 auto;
      padding: 10rpx 10rpx 10rpx 0;

      .weather_siteImg {
        width: 40rpx;
        height: 45rpx;
        vertical-align: middle;
      }

      text {
        line-height: 28rpx;
        color: #777777;
        font-size: 12px;
      }
    }

    // 天气数据
    .weather_dataBox {
      display: flex;

      .weather_dataList {
        background: #fbfbfb;
        width: 250rpx;
        padding: 18rpx 0 18rpx 0;

        image {
          width: 84rpx;
          height: 84rpx;
          margin: 0 auto;
          display: block;
        }

        .weather_temperature {
          text-align: center;
          font-size: 15px;
          color: #4a4a4a;
        }

        .weather_time {
          text-align: center;
          font-size: 11px;
          color: #838383;
        }
      }
    }
  }
}
</style>