|
@@ -4,14 +4,8 @@
|
|
|
<!-- 天气遮罩 -->
|
|
<!-- 天气遮罩 -->
|
|
|
<div class="weather-mask" v-show="isExpanded" @click="handleMaskClick"></div>
|
|
<div class="weather-mask" v-show="isExpanded" @click="handleMaskClick"></div>
|
|
|
<!-- 天气 -->
|
|
<!-- 天气 -->
|
|
|
- <weather-info
|
|
|
|
|
- ref="weatherInfoRef"
|
|
|
|
|
- class="weather-info"
|
|
|
|
|
- @weatherExpanded="weatherExpanded"
|
|
|
|
|
- @changeGarden="changeGarden"
|
|
|
|
|
- :isGarden="true"
|
|
|
|
|
- :gardenId="defaultGardenId"
|
|
|
|
|
- ></weather-info>
|
|
|
|
|
|
|
+ <weather-info ref="weatherInfoRef" class="weather-info" @weatherExpanded="weatherExpanded"
|
|
|
|
|
+ @changeGarden="changeGarden" :isGarden="true" :gardenId="defaultGardenId"></weather-info>
|
|
|
<!-- 作物档案 -->
|
|
<!-- 作物档案 -->
|
|
|
<div class="archives-time-line">
|
|
<div class="archives-time-line">
|
|
|
<div class="archives-time-line-header">
|
|
<div class="archives-time-line-header">
|
|
@@ -20,37 +14,32 @@
|
|
|
</div>
|
|
</div>
|
|
|
<!-- 品种选择 -->
|
|
<!-- 品种选择 -->
|
|
|
<div class="variety-tabs" v-if="varietyTabs.length > 0">
|
|
<div class="variety-tabs" v-if="varietyTabs.length > 0">
|
|
|
- <div
|
|
|
|
|
- v-for="(v, index) in varietyTabs"
|
|
|
|
|
- :key="index"
|
|
|
|
|
- class="variety-tab"
|
|
|
|
|
- :class="{ 'variety-tab--active': activeVariety === index }"
|
|
|
|
|
- @click="handleVarietyClick(v,index)"
|
|
|
|
|
- >
|
|
|
|
|
|
|
+ <div v-for="(v, index) in varietyTabs" :key="index" class="variety-tab"
|
|
|
|
|
+ :class="{ 'variety-tab--active': activeVariety === index }" @click="handleVarietyClick(v, index)">
|
|
|
{{ v.regionName }}
|
|
{{ v.regionName }}
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <!-- <template v-if="true">
|
|
|
|
|
|
|
+ <template v-if="!varietyTabs.length">
|
|
|
<div class="lock-img" @click="handleLockClick">
|
|
<div class="lock-img" @click="handleLockClick">
|
|
|
<img src="@/assets/img/home/lock-blue.png" alt="" class="lock-img-item" />
|
|
<img src="@/assets/img/home/lock-blue.png" alt="" class="lock-img-item" />
|
|
|
- <div class="lock-text">解锁某某某某某,解锁某某某某某</div>
|
|
|
|
|
|
|
+ <div class="lock-text">
|
|
|
|
|
+ 专属数字农场,种好卖好
|
|
|
|
|
+ <div>点击解锁一键溯源增产</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="lock-btn">点击解锁</div>
|
|
|
</div>
|
|
</div>
|
|
|
<img class="example-img" src="@/assets/img/monitor/example.png" alt="">
|
|
<img class="example-img" src="@/assets/img/monitor/example.png" alt="">
|
|
|
- </template> -->
|
|
|
|
|
|
|
+ </template>
|
|
|
<div class="archives-time-line-content">
|
|
<div class="archives-time-line-content">
|
|
|
- <archives-farm-time-line :farmId="farmIdData" :containerId="containerData" pageType="agri_record"></archives-farm-time-line>
|
|
|
|
|
|
|
+ <archives-farm-time-line :farmId="farmIdData" :containerId="containerData"
|
|
|
|
|
+ pageType="agri_record"></archives-farm-time-line>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <tip-popup
|
|
|
|
|
- v-model:show="showFarmPopup"
|
|
|
|
|
- type="success"
|
|
|
|
|
- text="农场领取成功"
|
|
|
|
|
- :overlay-style="{ 'backdrop-filter': 'blur(4px)' }"
|
|
|
|
|
- :closeOnClickOverlay="false"
|
|
|
|
|
- :zIndex="9999"
|
|
|
|
|
- />
|
|
|
|
|
|
|
+ <tip-popup v-model:show="showFarmPopup" type="success" text="农场领取成功"
|
|
|
|
|
+ :overlay-style="{ 'backdrop-filter': 'blur(4px)' }" :closeOnClickOverlay="false" :zIndex="9999" />
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
@@ -65,17 +54,17 @@ import tipPopup from "@/components/popup/tipPopup.vue";
|
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
import { ElMessage, ElMessageBox } from "element-plus";
|
|
|
import ArchivesFarmTimeLine from "@/components/pageComponents/ArchivesFarmTimeLine.vue";
|
|
import ArchivesFarmTimeLine from "@/components/pageComponents/ArchivesFarmTimeLine.vue";
|
|
|
|
|
|
|
|
-const handleFarmInfoClick = () =>{
|
|
|
|
|
- const query = {
|
|
|
|
|
- askInfo: { title: "农场认领", content: "是否分享该链接给好友" },
|
|
|
|
|
- shareText: "邀您参与农情互动,获取专家精准指导",
|
|
|
|
|
- targetUrl: `home`,
|
|
|
|
|
- paramsPage: JSON.stringify({isFarmer:true}),
|
|
|
|
|
- imageUrl: 'https://birdseye-img.sysuimars.com/birdseye-look-mini/share-lz-bg.png',
|
|
|
|
|
- };
|
|
|
|
|
- wx.miniProgram.navigateTo({
|
|
|
|
|
- url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=sharePage`,
|
|
|
|
|
- });
|
|
|
|
|
|
|
+const handleFarmInfoClick = () => {
|
|
|
|
|
+ // const query = {
|
|
|
|
|
+ // askInfo: { title: "农场认领", content: "是否分享该链接给好友" },
|
|
|
|
|
+ // shareText: "邀您参与农情互动,获取专家精准指导",
|
|
|
|
|
+ // targetUrl: `home`,
|
|
|
|
|
+ // paramsPage: JSON.stringify({isFarmer:true}),
|
|
|
|
|
+ // imageUrl: 'https://birdseye-img.sysuimars.com/birdseye-look-mini/share-lz-bg.png',
|
|
|
|
|
+ // };
|
|
|
|
|
+ // wx.miniProgram.navigateTo({
|
|
|
|
|
+ // url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=sharePage`,
|
|
|
|
|
+ // });
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 品种选择(作物档案内)- 根据主体ID动态获取分区列表
|
|
// 品种选择(作物档案内)- 根据主体ID动态获取分区列表
|
|
@@ -91,17 +80,17 @@ const getVarietyTabs = async () => {
|
|
|
subjectId: gardenId.value,
|
|
subjectId: gardenId.value,
|
|
|
});
|
|
});
|
|
|
varietyTabs.value = res.data || []
|
|
varietyTabs.value = res.data || []
|
|
|
- if(varietyTabs.value.length > 0) {
|
|
|
|
|
- handleVarietyClick(varietyTabs.value[0],0)
|
|
|
|
|
|
|
+ if (varietyTabs.value.length > 0) {
|
|
|
|
|
+ handleVarietyClick(varietyTabs.value[0], 0)
|
|
|
}
|
|
}
|
|
|
} catch (error) {
|
|
} catch (error) {
|
|
|
console.error("获取主体分区列表失败:", error);
|
|
console.error("获取主体分区列表失败:", error);
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-const farmIdData= ref(null);
|
|
|
|
|
|
|
+const farmIdData = ref(null);
|
|
|
const containerData = ref(null);
|
|
const containerData = ref(null);
|
|
|
-const handleVarietyClick = (tab,index) => {
|
|
|
|
|
|
|
+const handleVarietyClick = (tab, index) => {
|
|
|
activeVariety.value = index;
|
|
activeVariety.value = index;
|
|
|
farmIdData.value = tab.farmId;
|
|
farmIdData.value = tab.farmId;
|
|
|
containerData.value = tab.containerId;
|
|
containerData.value = tab.containerId;
|
|
@@ -343,6 +332,7 @@ const changeGarden = ({ id }) => {
|
|
|
padding: 13px 10px;
|
|
padding: 13px 10px;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
background: linear-gradient(180deg, #f9f9f9 0%, #f0f8ff 31.47%, #f9f9f9 46.81%, #f9f9f9 69.38%, #f9f9f9 100%);
|
|
background: linear-gradient(180deg, #f9f9f9 0%, #f0f8ff 31.47%, #f9f9f9 46.81%, #f9f9f9 69.38%, #f9f9f9 100%);
|
|
|
|
|
+
|
|
|
.weather-mask {
|
|
.weather-mask {
|
|
|
position: fixed;
|
|
position: fixed;
|
|
|
top: 0;
|
|
top: 0;
|
|
@@ -352,8 +342,10 @@ const changeGarden = ({ id }) => {
|
|
|
background-color: rgba(0, 0, 0, 0.52);
|
|
background-color: rgba(0, 0, 0, 0.52);
|
|
|
z-index: 11;
|
|
z-index: 11;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
.lock-img {
|
|
.lock-img {
|
|
|
position: fixed;
|
|
position: fixed;
|
|
|
|
|
+ z-index: 10;
|
|
|
top: 50%;
|
|
top: 50%;
|
|
|
left: 50%;
|
|
left: 50%;
|
|
|
transform: translate(-50%, -20%);
|
|
transform: translate(-50%, -20%);
|
|
@@ -369,37 +361,52 @@ const changeGarden = ({ id }) => {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.lock-text {
|
|
.lock-text {
|
|
|
- font-size: 16px;
|
|
|
|
|
|
|
+ font-size: 14px;
|
|
|
color: #000;
|
|
color: #000;
|
|
|
- padding: 0 24px;
|
|
|
|
|
- height: 34px;
|
|
|
|
|
- line-height: 34px;
|
|
|
|
|
|
|
+ padding: 5px 64px;
|
|
|
|
|
+ line-height: 21px;
|
|
|
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
|
|
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ .lock-btn {
|
|
|
|
|
+ width: 140px;
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ line-height: 40px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ background: linear-gradient(180deg, #76C3FF 0%, #2199F8 100%);
|
|
|
|
|
+ border-radius: 25px;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .example-img{
|
|
|
|
|
|
|
+ .example-img {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
object-fit: contain;
|
|
object-fit: contain;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
.weather-info {
|
|
.weather-info {
|
|
|
width: calc(100% - 20px);
|
|
width: calc(100% - 20px);
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
z-index: 12;
|
|
z-index: 12;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
.archives-time-line {
|
|
.archives-time-line {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
margin-top: 96px;
|
|
margin-top: 96px;
|
|
|
height: calc(100% - 90px);
|
|
height: calc(100% - 90px);
|
|
|
|
|
+
|
|
|
.archives-time-line-header {
|
|
.archives-time-line-header {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
|
|
+
|
|
|
.line-title {
|
|
.line-title {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
padding-left: 14px;
|
|
padding-left: 14px;
|
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
|
|
|
+
|
|
|
&::before {
|
|
&::before {
|
|
|
content: "";
|
|
content: "";
|
|
|
position: absolute;
|
|
position: absolute;
|
|
@@ -413,6 +420,7 @@ const changeGarden = ({ id }) => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
.variety-tabs {
|
|
.variety-tabs {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|