|
@@ -1,10 +1,30 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="farm-page">
|
|
<div class="farm-page">
|
|
|
- <custom-header name="我的主页"></custom-header>
|
|
|
|
|
|
|
+ <custom-header :name="query.isStore ? '查看详情' : '我的主页'"></custom-header>
|
|
|
<div class="farm-list">
|
|
<div class="farm-list">
|
|
|
<div class="box-wrap expert-info">
|
|
<div class="box-wrap expert-info">
|
|
|
<div class="expert-top">
|
|
<div class="expert-top">
|
|
|
- <div class="top-l">
|
|
|
|
|
|
|
+ <div class="top-l" v-if="query.isStore">
|
|
|
|
|
+ <img class="expert-icon store-icon" src="@/assets/img/home/nz.png" alt="">
|
|
|
|
|
+ <div class="l-info store-info">
|
|
|
|
|
+ <div class="info-name">
|
|
|
|
|
+ <div class="expert-name">{{ storeDetail?.storeName }}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="info-bottom">
|
|
|
|
|
+ <el-rate
|
|
|
|
|
+ v-model="storeDetail.score"
|
|
|
|
|
+ disabled
|
|
|
|
|
+ :colors="['#FF953D', '#FF953D', '#FF953D']"
|
|
|
|
|
+ disabled-void-color="#DDDDDD"
|
|
|
|
|
+ size="small"
|
|
|
|
|
+ show-score
|
|
|
|
|
+ text-color="#FF953D"
|
|
|
|
|
+ score-template="{value} 分"
|
|
|
|
|
+ />
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="top-l" v-else>
|
|
|
<img class="expert-icon" src="https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png" alt="">
|
|
<img class="expert-icon" src="https://birdseye-img.sysuimars.com/birdseye-look-vue/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411150343.png" alt="">
|
|
|
<div class="l-info">
|
|
<div class="l-info">
|
|
|
<div class="info-name">
|
|
<div class="info-name">
|
|
@@ -30,9 +50,35 @@
|
|
|
<div class="expert-list">
|
|
<div class="expert-list">
|
|
|
<div class="page-title">
|
|
<div class="page-title">
|
|
|
<img class="title-icon" src="@/assets/img/home/man.png" alt="">
|
|
<img class="title-icon" src="@/assets/img/home/man.png" alt="">
|
|
|
- 专家简介
|
|
|
|
|
|
|
+ {{ query.isStore ? '基本简介' : '专家简介' }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="list-one" v-if="query.isStore">
|
|
|
|
|
+ <div class="one-info">
|
|
|
|
|
+ <span class="one-name">服务类型:</span>
|
|
|
|
|
+ <span v-for="(item, index) in storeDetail?.serviceTypeJson" :key="index">
|
|
|
|
|
+ {{ item }}
|
|
|
|
|
+ <span v-if="index !== storeDetail?.serviceTypeJson.length - 1">、</span>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="one-info">
|
|
|
|
|
+ <span class="one-name">服务作物:</span>
|
|
|
|
|
+ <span v-for="(item, index) in storeDetail?.serviceCropsJson" :key="index">
|
|
|
|
|
+ {{ item }}
|
|
|
|
|
+ <span v-if="index !== storeDetail?.serviceCropsJson.length - 1">、</span>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="one-info">
|
|
|
|
|
+ <span class="one-name">服务区域:</span>{{ storeDetail?.address || "--" }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="one-info">
|
|
|
|
|
+ <span class="one-name">农机设备:</span>
|
|
|
|
|
+ <span v-for="(item, index) in storeDetail?.agriculturalEquipmentJson" :key="index">
|
|
|
|
|
+ {{ item }}
|
|
|
|
|
+ <span v-if="index !== storeDetail?.agriculturalEquipmentJson.length - 1">、</span>
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="list-one">
|
|
|
|
|
|
|
+ <div class="list-one" v-else>
|
|
|
<div class="one-info">
|
|
<div class="one-info">
|
|
|
<span class="one-name">职称:</span>广州荔博园种业有限公司董事长
|
|
<span class="one-name">职称:</span>广州荔博园种业有限公司董事长
|
|
|
</div>
|
|
</div>
|
|
@@ -57,13 +103,13 @@
|
|
|
<div class="box-wrap list-wrap">
|
|
<div class="box-wrap list-wrap">
|
|
|
<div class="list-title">
|
|
<div class="list-title">
|
|
|
<div class="page-title">
|
|
<div class="page-title">
|
|
|
- <img class="title-icon" src="@/assets/img/home/man.png" alt="">
|
|
|
|
|
- 定点基地
|
|
|
|
|
|
|
+ <img class="garden-icon" src="@/assets/img/home/garden-title.png" alt="">
|
|
|
|
|
+ {{ query.isStore ? '服务农场' : '定点基地' }}
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="more">更多<el-icon class="more-icon"><ArrowRightBold /></el-icon></div>
|
|
|
|
|
|
|
+ <div class="more" v-if="farmList && farmList.length > 9">更多<el-icon class="more-icon"><ArrowRightBold /></el-icon></div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="list-content">
|
|
<div class="list-content">
|
|
|
- <div class="list-item" v-for="item in 3" :key="item">
|
|
|
|
|
|
|
+ <div class="list-item" v-for="item in farmList" :key="item">
|
|
|
<div class="item-info">
|
|
<div class="item-info">
|
|
|
<div class="item-top">
|
|
<div class="item-top">
|
|
|
<div class="left-img">
|
|
<div class="left-img">
|
|
@@ -71,29 +117,71 @@
|
|
|
</div>
|
|
</div>
|
|
|
<div class="left-content">
|
|
<div class="left-content">
|
|
|
<div class="content-title">
|
|
<div class="content-title">
|
|
|
- <span>荔枝博览园</span>
|
|
|
|
|
|
|
+ <span>{{ item.farmName }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="content-desc">
|
|
<div class="content-desc">
|
|
|
- <div>果园面积:1500亩</div>
|
|
|
|
|
- <div>服务作物:荔枝-妃子笑、桂味</div>
|
|
|
|
|
|
|
+ <div>果园面积:{{ item.mianji || "--" }}亩</div>
|
|
|
|
|
+ <div>服务作物:{{ item.typeName }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="item-btn">查看详情</div>
|
|
|
|
|
|
|
+ <div class="item-btn" v-if="!query.isStore">查看详情</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="bottom-btn"><div class="share-btn">分享</div></div>
|
|
|
|
|
|
|
+ <div class="bottom-btn" v-if="query.isStore">
|
|
|
|
|
+ <div class="share-btn" @click="handleFreeConsult">免费咨询</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="bottom-btn" v-else>
|
|
|
|
|
+ <div class="share-btn">分享</div>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
|
|
+import { useRouter } from "vue-router";
|
|
|
import customHeader from "@/components/customHeader.vue";
|
|
import customHeader from "@/components/customHeader.vue";
|
|
|
-import { ref } from "vue";
|
|
|
|
|
|
|
+import { onActivated, ref } from "vue";
|
|
|
|
|
+import { useRoute } from "vue-router";
|
|
|
|
|
|
|
|
|
|
+const router = useRouter();
|
|
|
|
|
+let query = ref(useRoute().query);
|
|
|
|
|
+
|
|
|
|
|
+onActivated(() => {
|
|
|
|
|
+ if (query.value.id && query.value.isStore) {
|
|
|
|
|
+ getStoreDetail();
|
|
|
|
|
+ getFarmList();
|
|
|
|
|
+ }
|
|
|
|
|
+});
|
|
|
|
|
+
|
|
|
|
|
+const getStoreDetail = () => {
|
|
|
|
|
+ const params = {
|
|
|
|
|
+ // id: query.id,
|
|
|
|
|
+ id: 90,
|
|
|
|
|
+ };
|
|
|
|
|
+ VE_API.z_agricultural_store.getStoreDetail(params).then((res) => {
|
|
|
|
|
+ storeDetail.value = res.data || {};
|
|
|
|
|
+ storeDetail.value.score = res.data.score || 5;
|
|
|
|
|
+ });
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const farmList = ref([]);
|
|
|
|
|
+const getFarmList = () => {
|
|
|
|
|
+ const params = {
|
|
|
|
|
+ // agriculturalStoreId: query.value.id,
|
|
|
|
|
+ agriculturalStoreId: 90,
|
|
|
|
|
+ };
|
|
|
|
|
+ VE_API.z_agricultural_store.getStoreList(params).then((res) => {
|
|
|
|
|
+ farmList.value = res.data || [];
|
|
|
|
|
+ });
|
|
|
|
|
+};
|
|
|
|
|
+const storeDetail = ref({});
|
|
|
const tagList = [{name: "荔枝"}, {name: "龙眼"}]
|
|
const tagList = [{name: "荔枝"}, {name: "龙眼"}]
|
|
|
|
|
+const handleFreeConsult = () => {
|
|
|
|
|
+ router.push(`/chat_frame?userId=${storeDetail.value.managers[0].miniUserId}`);
|
|
|
|
|
+};
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
@@ -118,6 +206,10 @@ const tagList = [{name: "荔枝"}, {name: "龙眼"}]
|
|
|
height: 16px;
|
|
height: 16px;
|
|
|
padding-right: 8px;
|
|
padding-right: 8px;
|
|
|
}
|
|
}
|
|
|
|
|
+ .garden-icon {
|
|
|
|
|
+ width: 16px;
|
|
|
|
|
+ padding-right: 8px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.more {
|
|
.more {
|
|
@@ -148,6 +240,23 @@ const tagList = [{name: "荔枝"}, {name: "龙眼"}]
|
|
|
}
|
|
}
|
|
|
.l-info {
|
|
.l-info {
|
|
|
padding-left: 7px;
|
|
padding-left: 7px;
|
|
|
|
|
+ &.store-info {
|
|
|
|
|
+ padding-left: 10px;
|
|
|
|
|
+ .info-bottom {
|
|
|
|
|
+ background: rgba(255, 149, 61, 0.1);
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ margin-top: 2px;
|
|
|
|
|
+ padding: 0px 4px 2px 4px;
|
|
|
|
|
+ ::v-deep{
|
|
|
|
|
+ .el-rate .el-rate__icon {
|
|
|
|
|
+ margin-right: 2px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .el-rate--small {
|
|
|
|
|
+ height: 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
.info-name {
|
|
.info-name {
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -181,6 +290,10 @@ const tagList = [{name: "荔枝"}, {name: "龙眼"}]
|
|
|
height: 68px;
|
|
height: 68px;
|
|
|
border-radius: 8px;
|
|
border-radius: 8px;
|
|
|
object-fit: cover;
|
|
object-fit: cover;
|
|
|
|
|
+ &.store-icon {
|
|
|
|
|
+ width: 50px;
|
|
|
|
|
+ height: 50px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
.info-flex{
|
|
.info-flex{
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -223,7 +336,7 @@ const tagList = [{name: "荔枝"}, {name: "龙眼"}]
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.expert-list {
|
|
.expert-list {
|
|
|
- padding: 16px 0;
|
|
|
|
|
|
|
+ padding-top: 16px;
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
.list-one {
|
|
.list-one {
|
|
|
padding-top: 8px;
|
|
padding-top: 8px;
|
|
@@ -231,7 +344,7 @@ const tagList = [{name: "荔枝"}, {name: "龙眼"}]
|
|
|
// display: flex;
|
|
// display: flex;
|
|
|
color: #666666;
|
|
color: #666666;
|
|
|
line-height: 18px;
|
|
line-height: 18px;
|
|
|
- padding-bottom: 2px;
|
|
|
|
|
|
|
+ padding-bottom: 4px;
|
|
|
.one-name {
|
|
.one-name {
|
|
|
flex: none;
|
|
flex: none;
|
|
|
color: rgba(102, 102, 102, 0.5);
|
|
color: rgba(102, 102, 102, 0.5);
|
|
@@ -377,6 +490,20 @@ const tagList = [{name: "荔枝"}, {name: "龙眼"}]
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
padding: 6px 32px;
|
|
padding: 6px 32px;
|
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
|
|
|
+ &.flex-between {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ .forward-btn {
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ border: 1px solid rgba(153, 153, 153, 0.5);
|
|
|
|
|
+ color: #666666;
|
|
|
|
|
+ padding: 8px 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .free-btn {
|
|
|
|
|
+ padding: 8px 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
.share-btn {
|
|
.share-btn {
|
|
|
color: #fff;
|
|
color: #fff;
|
|
|
text-align: center;
|
|
text-align: center;
|