Files
2025-12-22 17:13:05 +08:00

663 lines
18 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view class="land-detail" v-if="detail.id">
<view class='banner-info'>
<swiper class='banner-swiper' @change='handerSwiperChange' :autoplay="true">
<swiper-item v-for="(item,index) in bannerList" :key="index" @tap='handerBannerClick(index)'>
<image mode="aspectFill" class='banner-img' :src='item.img'></image>
<view class="banner-swiper img-bg c-base iconfont icon-zhibo abs flex-center"
v-if="bannerList[bannerCurrent].link_type == 'monitor'"></view>
</swiper-item>
</swiper>
<view class='banner-tagitem banner-tagitem_count'>{{bannerCurrent+1}}/{{bannerList.length}}</view>
<view class='banner-taglist'>
<view class='banner-tagitem'
:class="[{'banner-tagitem_active':item.type==bannerList[bannerCurrent].link_type},{'radius-10':typeList.length == 1},{'radius-left':typeList.length > 1 && index == 0},{'radius-right':typeList.length > 1 && index === typeList.length -1}]"
v-for="(item,index) in typeList" :key="index">
{{item.title}}
</view>
</view>
</view>
<view class="pd-lg fill-base">
<view class="flex-between">
<!-- #ifdef MP-WEIXIN -->
<view class="max-566">
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<view class="flex-1">
<!-- #endif -->
<view class="f-title c-title">{{detail.title}}</view>
<view class="flex-y-baseline">
<view class="price c-warning">¥{{detail.min_price}}</view>
<view class="f-caption c-caption ml-sm"></view>
</view>
</view>
<!-- #ifdef MP-WEIXIN -->
<button open-type="share" class="clear-btn flex-center flex-column">
<i class="iconfont icon-share c-title"></i>
<view class="f-caption c-title">分享</view>
</button>
<!-- #endif -->
</view>
<view class="f-caption c-caption mb-sm">
<text decode="emsp" style="word-break:break-all;">{{detail.desc}}</text>
</view>
<view @tap.stop="toMap" class="flex-warp fill-base f-caption c-desc">
<i class="iconfont icon-dingwei mr-sm" style="margin-top: 6rpx;font-size: 24rpx;"></i>
<view style="max-width: 656rpx;">{{detail.address}}</view>
</view>
</view>
<view class="mt-md pt-sm pl-lg pr-lg pb-lg fill-base f-paragraph c-title">
<view class="common-nav-title flex-between c-title">
<view class="flex-center">
<view class="common-line" :style="{background:primaryColor}"></view>
<view class="f-title text-bold flex-1">选择地块</view>
</view>
<view class="f-paragraph c-caption">剩余
{{`${detail.spe_info.all_num - detail.spe_info.app_num}/${detail.spe_info.all_num}`}}
</view>
</view>
<view class="dot-item flex-warp pt-md pb-md f-caption c-title">
<view class="flex-y-center">
<view class="dot radius" style="background: #B3D465;"></view>可选
</view>
<view class="flex-y-center ml-lg mr-lg">
<view class="dot cur_app radius"></view>选中
</view>
<view class="flex-y-center">
<view class="dot fill-space radius"></view>已租
</view>
</view>
<scroll-view scroll-x class='spe-list' :scroll-with-animation="true"
v-if="detail.spe && detail.spe.length > 0">
<view @tap.stop="toChangeItem('speInd',index)"
class="spe-item flex-center text-center f-title c-title radius-16" :class="[{'ml-md':index!= 0}]"
v-for="(item,index) in detail.spe" :key="index">
<view class="title flex-center f-little c-base" :style="{background:primaryColor}">
<view class="pl-sm pr-sm ellipsis">{{item.spe_name}}</view>
</view>
<view class="area flex-center flex-column f-desc"
:class="[{'can_app': !item.is_app},{'cur_app': speInd == index}]">
<view>{{item.area}}</view>
<view></view>
</view>
</view>
</scroll-view>
</view>
<view class="mt-md pt-sm pl-lg pr-lg pb-lg fill-base f-paragraph c-title">
<view class="common-nav-title flex-center c-title">
<view class="common-line" :style="{background:primaryColor}"></view>
<view class="f-title text-bold flex-1">租赁周期</view>
</view>
<scroll-view scroll-x class='cycle-list' :scroll-with-animation="true"
v-if="detail.cycle && detail.cycle.length > 0">
<view @tap.stop="toChangeItem('cycleInd',index)"
class="cycle-item flex-center text-center pt-lg pb-lg f-title c-title radius-16"
:class="[{'ml-md':index!= 0}]" style="height: 40rpx;"
:style="{background: cycleInd == index ? primaryColor: '#f5f5f5',color:cycleInd == index ?'#fff':''}"
v-for="(item,index) in detail.cycle" :key="index">
{{`${item}/`}}
</view>
</scroll-view>
</view>
<view class="mt-md pt-sm pl-lg pr-lg pb-lg fill-base f-paragraph c-title">
<view @tap.stop="$util.goUrl({url:`/land/pages/massif`})" class="common-nav-title flex-between c-title">
<view class="flex-center">
<view class="common-line" :style="{background:primaryColor}"></view>
<view class="f-title text-bold flex-1">地块服务</view>
</view>
<view class="flex-y-baseline f-paragraph c-caption">
<view>了解特权</view>
<i class="iconfont icon-right"></i>
</view>
</view>
<!-- class="cycle-item flex-center flex-column text-center pt-lg pb-lg pl-md pr-md radius-16" -->
<scroll-view scroll-x class='cycle-list' :scroll-with-animation="true"
v-if="detail.massif && detail.massif.length > 0">
<view @tap.stop="toChangeItem('massifInd',index)"
class="cycle-item flex-center flex-column text-center pt-lg pb-lg pl-md pr-md radius-16"
:class="[{'ml-md':index!= 0},{'cur':massifInd == index}]"
:style="{background: massifInd == index ? primaryColor: ''}" v-for="(item,index) in detail.massif"
:key="index">
<view class="f-title c-title ellipsis">{{item.title}}</view>
<view class="flex-center f-caption c-caption mt-sm mb-sm">
<view class="flex-center c-warning">¥<view class="f-title">{{item.price}}</view>
</view>/
</view>
<view class="f-caption c-caption ellipsis-2">
{{item.desc}}
</view>
</view>
</scroll-view>
</view>
<view class="order-count-info fill-base mt-md" v-if="detail.machine_info.data && detail.machine_info.data.length > 0">
<view class="flex-between pt-lg pl-lg pr-lg">
<view class="flex-y-baseline f-paragraph c-caption">
<view class="c-title text-bold mr-sm">实时数据</view>
<!-- <view>更新于2021.09.10 16:24</view> -->
</view>
<!-- <i class="iconfont icon-shuaxin"></i> -->
</view>
<!-- <view class="pd-lg flex-center b-1px-b">
<view class="count-item flex-center flex-column">
<view class="f-paragraph c-title">28.7</view>
<view class="f-caption c-caption">热敏温度</view>
</view>
<view class="count-item flex-center flex-column b-1px-l b-1px-r">
<view class="f-paragraph c-title">28.7</view>
<view class="f-caption c-caption">噪声监测</view>
</view>
<view class="count-item flex-center flex-column">
<view class="f-paragraph c-title">28.7</view>
<view class="f-caption c-caption">移动监测</view>
</view>
</view> -->
<view class="pt-lg pl-lg pr-lg pb-md f-paragraph c-desc">
<view class="flex-y-baseline">
<view class="mr-md">无线温湿度</view>
<view>土壤电导率三合一</view>
</view>
<veiw class="flex-warp pb-md">
<view class="machine-item flex-warp f-desc c-caption mt-md"
v-for="(item,index) in detail.machine_info.data" :key="index">
<view class="num">{{`(${index*1+1})`}}</view>
<view class="text">{{item.text}}</view>
<view>{{item.value.length == 0 ? '无' : item.value}}</view>
</view>
</veiw>
<!-- <view class="flex-center pt-md"><i class="iconfont icon-down-bold" style="font-size: 28rpx;"></i></view> -->
</view>
</view>
<view class="mt-md pt-sm pl-lg pr-lg pb-lg fill-base f-paragraph c-title" v-if="detail.seed && detail.seed.length > 0">
<view @tap.stop="$util.goUrl({url:`/land/pages/seed/list?id=${options.id}`})"
class="common-nav-title flex-between c-title">
<view class="flex-center">
<view class="common-line" :style="{background:primaryColor}"></view>
<view class="f-title text-bold flex-1">种子列表</view>
</view>
<view class="flex-y-baseline f-paragraph c-caption">
<view>查看全部</view>
<i class="iconfont icon-right"></i>
</view>
</view>
<view class="flex-warp">
<block v-for="(item,index) in detail.seed" :key="index">
<view class="flex-center mt-md" :class="[{'mr-md': index%2 === 0}]" style="width: 330rpx;"
v-if="index< 8">
<image mode="aspectFill" lazy-load class="avatar lg box-shadow-mini radius-10"
:src="item.imgs[0]">
</image>
<view class="flex-1 ml-md">
<view class="f-paragraph c-title ellipsis" style="max-width: 210rpx;">{{item.title}}</view>
<view class="f-caption c-caption ellipsis" style="max-width: 210rpx;">
预估产值:{{item.output_value}}kg/</view>
</view>
</view>
</block>
</view>
</view>
<block v-if="list.all_count>0">
<view class="mt-md pt-sm pl-lg pr-lg fill-base f-paragraph c-title">
<view class="common-nav-title flex-center c-title">
<view class="common-line" :style="{background:primaryColor}"></view>
<view class="flex-1 flex-between">
<view class="f-title text-bold">评价{{list.all_count}}</view>
<view @tap.stop="$util.goUrl({url:`/mine/pages/evaluate/more?id=${options.id}&type=2`})"
class="flex-y-center f-paragraph c-caption">
<view>查看全部</view>
<i class="iconfont icon-right" style="font-size: 28rpx;"></i>
</view>
</view>
</view>
</view>
<block v-for="(item,index) in list.data" :key="index">
<view class="flex-warp fill-base pd-lg" :class="[{'b-1px-t':index!=0}]" v-if="index<2">
<image mode="aspectFill" lazy-load class="avatar sm radius" :src="item.user_info.avatarUrl"></image>
<view class="flex-1 ml-lg">
<view class="flex-between">
<view class="f-paragraph c-title max-350 ellipsis">{{item.user_info.nickName}}</view>
<view class="f-icontext c-caption">{{item.create_time}}</view>
</view>
<view class="flex-warp">
<i class="iconfont icon-star-fill icon-font-color mr-sm"
:style="{backgroundImage: aindex < item.star ? '-webkit-linear-gradient(90deg, #FDCD47, #FFC000)' : '-webkit-linear-gradient(90deg, #eee, #eee)'}"
v-for="(aitem,aindex) in 5" :key="aindex"></i>
</view>
<view class="f-caption c-desc mt-md">
<text decode="emsp" style="word-break:break-all;">{{item.text || '该用户没有填写评价哦'}}</text>
</view>
<view class="flex-warp mt-md" v-if="item.imgs && item.imgs.length > 0">
<block v-for="(aitem,aindex) in item.imgs" :key="aindex">
<view class="eva-img sm radius-10 rel" v-if="aindex < 3">
<image @tap.stop="toPreviewImage(index,aindex)" mode="aspectFill"
class="eva-img sm radius-10" :src="aitem">
</image>
<view class="more f-caption c-base abs" v-if="aindex == 2 && item.imgs.length > 3">
+{{item.imgs.length - 3}}</view>
</view>
</block>
</view>
</view>
</view>
</block>
</block>
<view class="mt-md pt-sm pl-lg pr-lg pb-lg fill-base f-paragraph c-title">
<view class="common-nav-title flex-center c-title">
<view class="common-line" :style="{background:primaryColor}"></view>
<view class="f-title text-bold flex-1">土地详情</view>
</view>
<view class="pt-sm" v-if="detail.text">
<parser :html="detail.text" @linkpress="linkpress" show-with-animation lazy-load>加载中...</parser>
</view>
</view>
<view class="space-max-footer"></view>
<view class="footer-btn fill-base fix">
<view class="footer-item flex-between pr-lg">
<view class="flex-warp f-caption c-title">
<view @tap.stop="$util.goUrl({url:`/pages/home`,openType:`switchTab`})"
class="flex-center flex-column pl-lg pr-lg">
<i class="iconfont icon-home"></i>
<view>首页</view>
</view>
<view @tap.stop="$util.goUrl({url:detail.farmer_info.mobile,openType:'call'})"
class="flex-center flex-column pl-md">
<i class="iconfont icon-dianhua text-bold"></i>
<view>客服</view>
</view>
</view>
<view @tap.stop="toOrder" class="order-btn flex-center f-title c-base text-bold radius"
:style="{background:primaryColor}">立即租赁
</view>
</view>
<view class="space-safe"></view>
</view>
</view>
</template>
<script>
import {
mapState,
} from "vuex"
export default {
components: {},
data() {
return {
options: {},
detail: {},
bannerCurrent: 0,
bannerList: [],
typeList: [],
current: 0,
speInd: '-1',
cycleInd: 0,
massifInd: 0,
param: {
page: 1,
limit: 10
},
list: {
data: []
},
loading: true,
lockTap: false
}
},
computed: mapState({
primaryColor: state => state.config.configInfo.primaryColor,
subColor: state => state.config.configInfo.subColor,
configInfo: state => state.config.configInfo,
userInfo: state => state.user.userInfo,
}),
onLoad(options) {
this.$util.showLoading()
this.options = options
this.initIndex()
},
onPullDownRefresh() {
// #ifndef APP-PLUS
uni.showNavigationBarLoading()
// #endif
this.initRefresh()
uni.stopPullDownRefresh()
},
onShareAppMessage(e) {
let {
id: pid
} = this.userInfo
let {
id,
title,
cover: imageUrl
} = this.detail
let path = `/land/pages/detail?id=${id}&pid=${pid}`
this.$util.log(path)
return {
title,
imageUrl,
path,
}
},
methods: {
async initIndex() {
let {
id
} = this.options
let data = await this.$api.land.landInfo({
id
})
let bannerList = []
let typeList = []
if (data.imgs && data.imgs.length > 0) {
data.imgs.forEach((item) => {
bannerList.push({
img: item,
link: '',
link_type: "img"
})
})
typeList.push({
title: "图片",
type: "img"
})
}
if (data.monitor && data.monitor.length > 0) {
data.monitor.forEach((item) => {
bannerList.push({
img: item.cover,
link: item.id,
link_type: "monitor"
})
})
typeList.push({
title: "监控",
type: "monitor"
})
}
this.typeList = typeList
this.bannerList = bannerList
this.detail = data
this.getList()
this.$util.hideAll()
this.speInd = -1
for (let key in data.spe) {
if (data.spe[key].is_app == 0) {
this.speInd = key
return
}
}
},
initRefresh() {
this.initIndex()
},
linkpress(res) {
console.log("linkpress", res);
// #ifdef APP-PLUS
this.$util.goUrl({
url: res.href,
openType: 'web'
})
// #endif
},
async getList() {
let {
list: oldList,
} = this
let {
id: goods_id,
} = this.options
let param = Object.assign({}, this.param, {
goods_id,
type: 2,
is_goods: 0
});
let newList = await this.$api.mine.goodsEvaluateList(param);
if (this.param.page == 1) {
this.list = newList
} else {
newList.data = oldList.data.concat(newList.data)
this.list = newList
}
this.loading = false
this.$util.hideAll()
},
handerSwiperChange(e) {
let {
current,
} = e.detail
this.bannerCurrent = current;
},
handerBannerClick(index) {
let item = this.bannerList[index];
let {
link_type: openType,
link: id,
img
} = item;
if (openType == 'monitor') {
let url = `/home/pages/monitor/detail?id=${id}`
this.$util.goUrl({
url
})
return
}
uni.previewImage({
current: img,
urls: [img]
})
},
toChangeItem(key, index) {
if (key === 'speInd') {
let {
is_app
} = this.detail.spe[index]
if (is_app) return
}
this[key] = index
},
async toMap() {
let {
lat,
lng,
address
} = this.detail
await this.$util.checkAuth({
type: 'userLocation'
})
await uni.getLocation({
type: 'gcj02',
})
await uni.openLocation({
latitude: lat * 1,
longitude: lng * 1,
name: address,
scale: 28
})
},
toPreviewImage(index, aindex) {
let {
imgs: urls
} = this.list.data[index]
this.$util.previewImage({
current: urls[aindex],
urls
})
},
toOrder() {
let {
speInd,
cycleInd,
massifInd
} = this
if (speInd == -1 || cycleInd == -1 || massifInd == -1) {
this.$util.showToast({
title: speInd == -1 ? `请选择地块` : cycleInd == -1 ? `请选择租赁周期` : `请选择地块服务`
})
return
}
let {
id
} = this.options
let {
id: spe_id
} = this.detail.spe[speInd]
let cycle = this.detail.cycle[cycleInd]
let {
id: massif_id
} = this.detail.massif[massifInd]
let url = `/land/pages/order?id=${id}&spe_id=${spe_id}&cycle=${cycle}&massif_id=${massif_id}`
this.$util.goUrl({
url
})
}
}
}
</script>
<style lang="scss">
.land-detail {
.price,
.icon-share {
font-size: 42rpx;
}
.count-list {
.count-item {
width: 249rpx;
.ellipsis {
max-width: 220rpx;
}
}
.line {
width: 1rpx;
height: 58rpx;
background: #CCCCCC;
opacity: 0.4;
}
}
.dot-item {
.dot {
width: 10rpx;
height: 10rpx;
margin-right: 10rpx;
}
}
.can_app {
background: #F0F6E0;
}
.cur_app {
background: #FFC929;
}
.spe-list {
white-space: nowrap;
width: 100%;
.spe-item {
display: inline-block;
width: 100rpx;
height: 200rpx;
background: #f5f5f5;
overflow: hidden;
.title {
height: 42rpx;
}
.area {
height: 158rpx;
}
}
}
.cycle-list {
white-space: nowrap;
width: 100%;
.cycle-item {
display: inline-block;
vertical-align: top;
width: 240rpx;
min-height: 100rpx;
background: #f5f5f5;
box-sizing: border-box;
.ellipsis-2 {
white-space: normal;
height: 72rpx;
line-height: 36rpx;
}
}
.cycle-item.cur {
.c-title,
.c-caption,
.c-warning {
color: #fff;
}
}
}
.order-count-info {
.count-item {
width: 33.33%;
}
.machine-item {
width: 50%;
.num {
width: 50rpx;
}
.text {
width: 150rpx;
padding-right: 10rpx;
}
}
}
.land-img {
width: 100%;
}
.land-video {
width: 100%;
height: 450rpx;
}
.footer-btn {
bottom: 0;
.footer-item {
height: 114rpx;
.iconfont {
font-size: 36rpx;
}
}
.order-btn {
width: 444rpx;
height: 78rpx;
}
}
}
</style>