初始化代码
This commit is contained in:
662
uniapp/uni-app/land/pages/detail.vue
Normal file
662
uniapp/uni-app/land/pages/detail.vue
Normal file
@@ -0,0 +1,662 @@
|
||||
<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>m²</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>
|
||||
172
uniapp/uni-app/land/pages/massif.vue
Normal file
172
uniapp/uni-app/land/pages/massif.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<view class="land-massif" v-if="isLoad">
|
||||
<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff"
|
||||
:backgroundColor="scrollTop < 20 ?``:primaryColor" leftIcon="icon-left" title="服务特权">
|
||||
</uni-nav-bar>
|
||||
|
||||
<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
|
||||
<image mode="aspectFill" lazy-load class="common-bg abs" :style="{height: `${configInfo.navBarHeight + 104}px`}"
|
||||
src="https://lbqny.migugu.com/admin/farm/bg-cash.png"></image>
|
||||
<view class="common-top-img"></view>
|
||||
<view class="common-top-info rel">
|
||||
<view class="top-box abs">
|
||||
<view @tap.stop="goDetail(index)"
|
||||
class="flex-warp fill-base ml-md mr-md pd-lg fill-base box-shadow radius-24">
|
||||
<image mode="aspectFill" lazy-load class="avatar big box-shadow-mini radius-34"
|
||||
:src="detail.farmer_info.cover">
|
||||
</image>
|
||||
<view class="flex-1 ml-lg">
|
||||
<view class="f-title c-title text-bold ellipsis" style="max-width: 470rpx;">
|
||||
{{detail.farmer_info.title}}
|
||||
</view>
|
||||
<view class="flex-between mt-md max-446">
|
||||
<view class="check-btn flex-center fill-body pl-sm pr-sm radius-10"
|
||||
:style="{color:primaryColor}">
|
||||
<view class="max-446 ellipsis">{{detail.massif[massifInd].title}}</view>
|
||||
</view>
|
||||
<view></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="mt-md ml-md mr-md pt-sm pl-lg pr-lg pb-lg fill-base c-title box-shadow radius-24">
|
||||
<view @tap.stop="$util.goUrl({url:`/land/pages/massif`})" class="common-nav-title flex-center c-title">
|
||||
<view class="f-title text-bold flex-1">服务特点</view>
|
||||
</view>
|
||||
<scroll-view scroll-x class='cycle-list' :scroll-with-animation="true">
|
||||
<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: '#f5f5f5'}"
|
||||
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="mt-md ml-md mr-md pt-sm pb-lg fill-base c-title box-shadow radius-24">
|
||||
<view @tap.stop="$util.goUrl({url:`/land/pages/massif`})"
|
||||
class="common-nav-title flex-center pl-lg c-title">
|
||||
<view class="f-title text-bold flex-1">服务类型</view>
|
||||
</view>
|
||||
<view class="flex-warp mt-md">
|
||||
<view @tap.stop="toMenu(index)" class="menu-item flex-center flex-column"
|
||||
v-for="(item,index) in detail.massif[massifInd].service" :key="index">
|
||||
<image mode="aspectFill" lazy-load class="menu-img" :src="item.cover">
|
||||
</image>
|
||||
<view class="f-paragraph c-title mt-sm max-200 ellipsis">{{item.title}}</view>
|
||||
<view class="f-caption c-caption max-200 ellipsis">{{item.sub_title}}</view>
|
||||
</view>
|
||||
<view class="status-line abs"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="space-footer"></view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
isLoad: false,
|
||||
scrollTop: 0,
|
||||
detail: {},
|
||||
massifInd: 0
|
||||
}
|
||||
},
|
||||
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() {
|
||||
let {
|
||||
detail,
|
||||
massifInd
|
||||
} = this.$util.getPage(-1)
|
||||
this.detail = detail
|
||||
this.massifInd = massifInd
|
||||
this.isLoad = true
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getConfigInfo']),
|
||||
async initIndex() {},
|
||||
initRefresh() {
|
||||
this.initIndex()
|
||||
},
|
||||
toChangeItem(key, index) {
|
||||
this[key] = index
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.land-massif {
|
||||
.check-btn {
|
||||
min-width: 88rpx;
|
||||
height: 36rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.cycle-list {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
|
||||
.cycle-item {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 240rpx;
|
||||
min-height: 100rpx;
|
||||
background: #f5f5f5;
|
||||
|
||||
.ellipsis-2 {
|
||||
white-space: normal;
|
||||
height: 72rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.cycle-item.cur {
|
||||
|
||||
.c-title,
|
||||
.c-caption,
|
||||
.c-warning {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
width: 33.33%;
|
||||
|
||||
.menu-img {
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
876
uniapp/uni-app/land/pages/order.vue
Normal file
876
uniapp/uni-app/land/pages/order.vue
Normal file
@@ -0,0 +1,876 @@
|
||||
<template>
|
||||
<view class="land-order" v-if="orderInfo.land.id">
|
||||
<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff"
|
||||
:backgroundColor="scrollTop < 20 ?``:primaryColor" leftIcon="icon-left" title="确认订单">
|
||||
</uni-nav-bar>
|
||||
<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
|
||||
<image mode="aspectFill" lazy-load class="common-bg abs" :style="{height: `${configInfo.navBarHeight +104}px`}"
|
||||
src="https://lbqny.migugu.com/admin/farm/bg-cash.png"></image>
|
||||
<view class="common-top-img"></view>
|
||||
<view class="common-top-info rel" style="height: 19px;">
|
||||
<view class="top-box abs">
|
||||
<view class="fill-base ml-md mr-md pd-lg box-shadow radius-24">
|
||||
<view class="f-title c-title mt-sm mb-md ellipsis">{{orderInfo.land.title}}</view>
|
||||
<view class="f-caption c-caption">{{`${orderInfo.spe.spe_name} (${orderInfo.spe.area}㎡)`}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fill-base mt-md ml-md mr-md f-paragraph box-shadow radius-24">
|
||||
<view class="flex-center ml-md mr-md pl-sm pt-lg pb-lg b-1px-b">
|
||||
<view class="item-text c-black">土地面积</view>
|
||||
<view @tap.stop="toChooseItem('spe')" class="flex-1 flex-between f-paragraph">
|
||||
<view class="c-title max-400">{{`${orderInfo.spe.area}㎡`}}</view>
|
||||
<i class="iconfont icon-right"></i>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-center ml-md mr-md pl-sm pt-lg pb-lg b-1px-b">
|
||||
<view class="item-text c-black">服务类型</view>
|
||||
<view @tap.stop="toChooseItem('massif')" class="flex-1 flex-between f-paragraph">
|
||||
<view class="c-title max-400">{{orderInfo.massif.title}}</view>
|
||||
<i class="iconfont icon-right"></i>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-center ml-md mr-md pl-sm pt-lg pb-lg">
|
||||
<view class="item-text c-black">租赁周期</view>
|
||||
<view @tap.stop="toChooseItem('cycle')" class="flex-1 flex-between f-paragraph">
|
||||
<view class="c-title max-400">{{`${orderInfo.cycle}天`}}</view>
|
||||
<i class="iconfont icon-right"></i>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fill-base mt-md ml-md mr-md f-paragraph box-shadow radius-24" v-if="detail.seed.length > 0">
|
||||
<view class="flex-between pd-lg f-sm-title c-title b-1px-b">
|
||||
<view class="text-bold">种子管理</view>
|
||||
<view @tap.stop="toChooseItem('seed')" class="flex-y-center f-paragraph c-caption"
|
||||
v-if="orderInfo.seed.length > 0">选择种子
|
||||
<i class="iconfont icon-right"></i>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pd-lg" v-if="orderInfo.seed.length>0">
|
||||
<view class="flex-center" :class="[{'mt-md':index!=0}]" v-for="(item,index) in orderInfo.seed"
|
||||
:key="index">
|
||||
<image mode="aspectFill" lazy-load class="avatar sm box-shadow radius-10" :src="item.imgs[0]">
|
||||
</image>
|
||||
<view class="flex-1 ml-lg">
|
||||
<view class="f-title c-title max-400 ellipsis">{{item.title}}</view>
|
||||
<view class="flex-between f-caption c-caption">
|
||||
<view>{{item.area}}㎡</view>
|
||||
<view>x{{item.num}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view @tap.stop="toChooseItem('seed')" v-if="!orderInfo.seed || orderInfo.seed.length == 0">
|
||||
<view class="space-lg"></view>
|
||||
<view class="space-lg"></view>
|
||||
<view class="add-btn flex-center f-paragraph c-desc">
|
||||
<i class="iconfont icon-add-circle-fill mr-sm"></i>选择种子
|
||||
</view>
|
||||
<view class="space-lg"></view>
|
||||
<view class="space-lg"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fill-base mt-md ml-md mr-md f-paragraph box-shadow radius-24">
|
||||
<view class="flex-center pd-lg f-sm-title c-title b-1px-b">
|
||||
<view class="flex-y-baseline flex-1">
|
||||
<view class="text-bold">配送信息</view>
|
||||
<view class="f-paragraph c-warning ml-sm">需额外配送费</view>
|
||||
</view>
|
||||
<view @tap.stop="$util.goUrl({url:`/mine/pages/address/list?check=1`})"
|
||||
class="flex-y-center f-paragraph c-caption" v-if="orderInfo.address.id">更换地址
|
||||
<i class="iconfont icon-right"></i>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pd-lg" v-if="orderInfo.address.id">
|
||||
<view class="flex-warp">
|
||||
<i class="iconfont icon-dingwei mr-sm" style="font-size: 28rpx;margin-top: 6rpx;"></i>
|
||||
<view class="f-paragraph c-title flex-1">
|
||||
{{`${orderInfo.address.address}${orderInfo.address.address_info}`}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-y-baseline f-paragraph c-caption" style="margin:5rpx 0 0 38rpx;">
|
||||
{{orderInfo.address.user_name}}
|
||||
<view class="ml-lg">
|
||||
{{orderInfo.address.mobile}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<block v-if="!orderInfo.address.id">
|
||||
<view class="space-lg"></view>
|
||||
<view class="space-lg"></view>
|
||||
<view @tap.stop="$util.goUrl({url:`/mine/pages/address/list?check=1`})"
|
||||
class="add-btn flex-center f-paragraph c-desc"><i
|
||||
class="iconfont icon-add-circle-fill mr-sm"></i>选择地址
|
||||
</view>
|
||||
<view class="space-lg"></view>
|
||||
<view class="space-lg"></view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<view class="fill-base mt-md ml-md mr-md f-paragraph box-shadow radius-24">
|
||||
<view class="pd-lg f-sm-title c-title text-bold b-1px-b">租赁人信息</view>
|
||||
<view class="flex-between ml-md mr-md pl-sm pt-lg pb-lg b-1px-b">
|
||||
<view class="flex-y-center">
|
||||
<i class="iconfont icon-required c-warning"></i>
|
||||
<view class="item-text">姓名</view>
|
||||
</view>
|
||||
<input v-model="subForm.rent_user_name" type="text" class="flex-1 f-paragraph"
|
||||
placeholder-class="c-placeholder" :placeholder="rule[0].errorMsg" />
|
||||
</view>
|
||||
<view class="flex-between ml-md mr-md pl-sm pt-lg pb-lg b-1px-b">
|
||||
<view class="flex-y-center">
|
||||
<i class="iconfont icon-required c-warning"></i>
|
||||
<view class="item-text">手机号</view>
|
||||
</view>
|
||||
<input v-model="subForm.rent_mobile" type="text" class="flex-1 f-paragraph"
|
||||
placeholder-class="c-placeholder" :placeholder="rule[1].errorMsg" />
|
||||
<button open-type="getPhoneNumber" @getphonenumber="toAuthPhone"
|
||||
class="clear-btn auth-phone-btn flex-center" :style="{color:primaryColor}">立即授权</button>
|
||||
</view>
|
||||
<view class="flex-between ml-md mr-md pl-sm pt-lg pb-lg">
|
||||
<view class="flex-y-baseline">
|
||||
<i class="iconfont icon-required c-base"></i>
|
||||
<view class="item-text">备注</view>
|
||||
</view>
|
||||
<input v-model="subForm.text" type="text" class="flex-1 f-paragraph" maxlength="100"
|
||||
placeholder-class="c-placeholder" placeholder="请输入订单备注" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="fill-base mt-md ml-md mr-md f-paragraph box-shadow radius-24">
|
||||
<view class="flex-between ml-md mr-md pl-sm pt-lg pb-lg">
|
||||
<view class="item-text">土地价格</view>
|
||||
<view>¥{{orderInfo.land_price}}</view>
|
||||
</view>
|
||||
<view class="flex-between ml-md mr-md pl-sm pt-lg pb-lg b-1px-t">
|
||||
<view class="item-text">服务价格</view>
|
||||
<view>¥{{orderInfo.total_massif_price}}</view>
|
||||
</view>
|
||||
<view class="flex-between ml-md mr-md pl-sm pt-lg pb-lg b-1px-t" v-if="orderInfo.seed_price*1>0">
|
||||
<view class="item-text">种子价格</view>
|
||||
<view>¥{{orderInfo.seed_price}}</view>
|
||||
</view>
|
||||
<view class="flex-between ml-md mr-md pl-sm pt-lg pb-lg b-1px-t">
|
||||
<view class="item-text">卡券优惠</view>
|
||||
<view @tap.stop="toUseCoupon" class="flex-y-center">
|
||||
<view class="flex-1 text-right">
|
||||
{{ orderInfo.coupon_id ? `-¥${orderInfo.coupon_discount}` : `${orderInfo.canUseCoupon}张可用` }}
|
||||
</view>
|
||||
<i class="iconfont icon-right"></i>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-between ml-md mr-md pl-sm pt-lg pb-lg b-1px-t">
|
||||
<view class="item-text">合计</view>
|
||||
<view class="c-warning">¥{{orderInfo.pay_price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="fill-base mt-md ml-md mr-md f-sm-title box-shadow radius-24">
|
||||
<view @tap.stop="toChangeItem('payInd',index)"
|
||||
class="flex-between ml-md mr-md pl-sm pr-sm pt-lg pb-lg b-1px-b" v-for="(item,index) in payList"
|
||||
:key="index">
|
||||
<view class="pay-item flex-y-center"><i class="iconfont mr-md" :class="[item.icon]"
|
||||
:style="{color:item.id==1?primaryColor:item.id==2?subColor:'#01AAF2'}"></i>
|
||||
<view class="flex-y-baseline">{{item.title}}
|
||||
<view class="f-paragraph c-caption ml-sm" v-if="item.id==2">余额{{userInfo.balance || 0}}元
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<i class="pay-icon iconfont c-caption"
|
||||
:class="[{'icon-xuanze':payInd != index},{'icon-radio-fill':item.is_disabled || payInd == index}]"
|
||||
:style="{color:payInd==index?primaryColor:''}"></i>
|
||||
</view>
|
||||
</view>
|
||||
<view @tap.stop="toAgree" class="flex-warp f-paragraph mt-md pd-md"><i
|
||||
class="agree-icon iconfont c-caption mr-sm"
|
||||
:class="[{'icon-xuanze': !agree},{'icon-xuanze-fill': agree}]" style="margin-top: 3rpx;"
|
||||
:style="{color:agree?primaryColor:''}"></i>
|
||||
<view class="flex-y-center">购买代表您已同意<view @tap.stop="$util.goUrl({url:`/mine/pages/agreement?type=2`})"
|
||||
:style="{color:primaryColor}">
|
||||
《{{agreement}}》</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="space-max-footer"></view>
|
||||
<view class="footer-btn fill-base fix">
|
||||
<view class="footer-item flex-between pl-lg pr-lg">
|
||||
<view class="flex-y-baseline f-paragraph c-title">
|
||||
合计：<view class="f-sm-title c-warning text-bold">¥{{orderInfo.pay_price}}</view>
|
||||
</view>
|
||||
<auth :needAuth="userInfo && !userInfo.nickName" :must="true" type="userInfo" @go="toOrder">
|
||||
<view class="order-btn flex-center f-sm-title c-base text-bold radius-20"
|
||||
:style="{background:primaryColor}">立即支付
|
||||
</view>
|
||||
</auth>
|
||||
</view>
|
||||
<view class="space-safe"></view>
|
||||
</view>
|
||||
|
||||
<uni-popup ref="choose_item" type="bottom" :custom="true">
|
||||
<view @touchmove.stop.prevent class="popup-choose-item flex-center flex-column fill-base radius-top-34"
|
||||
:class="[{'pt-lg pb-lg':chooseType=='seed'},{'pd-lg':chooseType!='seed'}]">
|
||||
<view @tap.stop="chooseType=='seed'?$refs.choose_item.close():''" class="pl-lg pr-lg pb-lg"
|
||||
:class="[{'flex-between':chooseType=='seed'}]" style="width: 100%;">
|
||||
<view class="flex-center f-title c-title text-bold">{{`选择${chooseArr[chooseType]}`}}</view>
|
||||
<i class="iconfont icon-add-circle rotate-45" :style="{color:subColor}"
|
||||
v-if="chooseType=='seed'"></i>
|
||||
</view>
|
||||
<block v-if="chooseType == 'seed'">
|
||||
<scroll-view scroll-y class="seed-list">
|
||||
<block v-for="(item,index) in detail.seed" :key="index">
|
||||
<view class="item-child rel mt-md ml-md mr-md pd-lg fill-base radius-24 box-shadow">
|
||||
<view class="flex-center">
|
||||
<image mode="aspectFill" lazy-load class="goods-img box-shadow-mini radius-24"
|
||||
:src="item.imgs[0]">
|
||||
</image>
|
||||
<view class="flex-1 ml-md">
|
||||
<view class="goods-title f-title c-title text-bold ellipsis">{{item.title}}
|
||||
</view>
|
||||
<view class="goods-title f-caption c-caption ellipsis">
|
||||
预估产量:{{item.output_value}}kg/㎡
|
||||
<text class="ml-md">播种面积:{{item.area}}㎡</text>
|
||||
</view>
|
||||
<view class="flex-between">
|
||||
<view class="f-title c-warning mt-sm"> ¥{{item.seed_price}} </view>
|
||||
<view class="add-remove-item flex-center">
|
||||
<block v-if="item.cur_num">
|
||||
<i @tap.stop="changeNum(-1,index)"
|
||||
class="iconfont icon-remove-square c-caption"></i>
|
||||
<view class="number flex-center f-desc pl-sm pr-sm">{{item.cur_num}}
|
||||
</view>
|
||||
</block>
|
||||
<i @tap.stop="changeNum(1,index)" class="iconfont icon-add-square"
|
||||
:style="{color:primaryColor}"></i>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="space-lg" v-if="index == detail.seed.length -1"></view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
<view class="order-btn-info fill-base">
|
||||
<view class="footer-item flex-between pt-md pb-md pl-md pr-lg">
|
||||
<view class="flex-warp f-desc c-title">
|
||||
<view>已选：{{`${total_area}/${orderInfo.spe.area}㎡`}}</view>
|
||||
<view class="flex-y-center ml-md">总计：<view class="c-warning text-bold">
|
||||
¥{{total_seed_price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view @tap.stop="toConfirm" class="order-btn flex-center f-title c-base radius-20"
|
||||
:style="{background:primaryColor}">确定
|
||||
</view>
|
||||
</view>
|
||||
<view class="space-safe"></view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<scroll-view scroll-y style="width: 100%;max-height: 60vh;">
|
||||
<view @tap.stop="toCheckItem(index)" class="flex-warp pt-sm pb-sm"
|
||||
:style="{color:chooseInd == index ? primaryColor: ''}"
|
||||
v-for="(item,index) in detail[chooseType]" :key="index">
|
||||
<view class="f-title flex-1">
|
||||
{{chooseType == 'spe' ? item.spe_name : item.title}}
|
||||
</view>
|
||||
<i class="iconfont c-caption"
|
||||
:class="[{'icon-xuanze':chooseInd != index},{'icon-radio-fill':chooseInd == index || chooseType=='spe' && item.is_app}]"
|
||||
style="font-size: 40rpx;" :style="{color:chooseInd == index ? primaryColor: ''}"></i>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="flex-between mt-lg">
|
||||
<view @tap.stop="$refs.choose_item.close()"
|
||||
class="popup-btn flex-center f-title c-desc radius mr-md">取消</view>
|
||||
<view @tap.stop="toConfirm" class="popup-btn flex-center f-title c-base radius ml-md"
|
||||
:style="{background:primaryColor}">
|
||||
确定
|
||||
</view>
|
||||
</view>
|
||||
<view class="space-safe"></view>
|
||||
</block>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
mapMutations
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
detail: {},
|
||||
scrollTop: 0,
|
||||
// 1微信支付；2余额支付；3支付宝支付
|
||||
payList: [{
|
||||
id: 1,
|
||||
title: '微信支付',
|
||||
icon: 'icon-wechat-pay',
|
||||
is_disabled: false
|
||||
}
|
||||
// #ifdef APP-PLUS
|
||||
, {
|
||||
id: 3,
|
||||
title: '支付宝支付',
|
||||
icon: 'icon-alipay',
|
||||
is_disabled: false
|
||||
}
|
||||
// #endif
|
||||
, {
|
||||
id: 2,
|
||||
title: '余额支付',
|
||||
icon: 'icon-qianbao',
|
||||
is_disabled: false
|
||||
}
|
||||
],
|
||||
payInd: 0,
|
||||
// #ifdef APP-PLUS
|
||||
balanceInd: 2,
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
balanceInd: 1,
|
||||
// #endif
|
||||
sendList: [{
|
||||
id: 1,
|
||||
title: '自提',
|
||||
}, {
|
||||
id: 2,
|
||||
title: '快递',
|
||||
}],
|
||||
sendInd: 1,
|
||||
agreement: '',
|
||||
agree: false,
|
||||
orderInfo: {
|
||||
address: {},
|
||||
farmer_info: {},
|
||||
land: {},
|
||||
seed: []
|
||||
},
|
||||
chooseArr: {
|
||||
'spe': '土地面积',
|
||||
'massif': '服务类型',
|
||||
'cycle': '租赁周期',
|
||||
'seed': '种子',
|
||||
},
|
||||
chooseType: '',
|
||||
chooseInd: -1,
|
||||
total_area: 0,
|
||||
total_seed_price: 0,
|
||||
subForm: {
|
||||
address_id: '',
|
||||
rent_user_name: '',
|
||||
rent_mobile: '',
|
||||
text: ''
|
||||
},
|
||||
rule: [{
|
||||
name: "rent_user_name",
|
||||
checkType: "isNotNull",
|
||||
errorMsg: "请输入姓名",
|
||||
regType: 2
|
||||
}, {
|
||||
name: "rent_mobile",
|
||||
checkType: "isMobile",
|
||||
errorMsg: "请输入手机号"
|
||||
}, {
|
||||
name: "claim_name",
|
||||
checkType: "isNotNull",
|
||||
errorMsg: "快给你认养的小动物取个名吧"
|
||||
}],
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
}),
|
||||
async onLoad(options) {
|
||||
this.options = options
|
||||
let {
|
||||
id
|
||||
} = options
|
||||
let data = await this.$api.land.landInfo({
|
||||
id
|
||||
})
|
||||
data.seed.map(item => {
|
||||
item.num = 0
|
||||
item.cur_num = 0
|
||||
})
|
||||
let arr = data.cycle.map(item => {
|
||||
return {
|
||||
id: item,
|
||||
title: `${item}天`,
|
||||
}
|
||||
})
|
||||
data.cycle = arr
|
||||
this.detail = data
|
||||
this.initIndex()
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['getUserInfo', 'getAuthPhone']),
|
||||
...mapMutations(['updateOrderItem']),
|
||||
async initIndex(flag = false) {
|
||||
if (!flag) {
|
||||
await this.getUserInfo()
|
||||
let {
|
||||
title
|
||||
} = await this.$api.home.aboutUsInfoType({
|
||||
type: 2
|
||||
})
|
||||
this.agreement = title
|
||||
}
|
||||
let {
|
||||
id: land_id,
|
||||
spe_id,
|
||||
cycle,
|
||||
massif_id
|
||||
} = this.options
|
||||
let seed = this.$util.deepCopy(this.detail.seed).filter(item => {
|
||||
return item.num * 1 > 0
|
||||
})
|
||||
let seed_data = seed.map(item => {
|
||||
return {
|
||||
id: item.id,
|
||||
num: item.num
|
||||
}
|
||||
})
|
||||
let {
|
||||
address = {}, coupon_id = 0
|
||||
} = this.orderInfo
|
||||
let {
|
||||
id: address_id = 0
|
||||
} = address
|
||||
let param = {
|
||||
land_id,
|
||||
spe_id,
|
||||
cycle,
|
||||
massif_id,
|
||||
address_id,
|
||||
coupon_id,
|
||||
seed_data
|
||||
}
|
||||
let orderInfo = await this.$api.land.landPayOrderInfo(param)
|
||||
if (flag) {
|
||||
orderInfo.address = address
|
||||
}
|
||||
this.orderInfo = orderInfo
|
||||
let {
|
||||
balance,
|
||||
phone
|
||||
} = this.userInfo
|
||||
let {
|
||||
pay_price,
|
||||
} = this.orderInfo
|
||||
let is_disabled = balance * 1 < pay_price * 1
|
||||
let {
|
||||
balanceInd
|
||||
} = this
|
||||
this.payList[balanceInd].is_disabled = is_disabled
|
||||
if (pay_price * 1 == 0) {
|
||||
this.payList[0].is_disabled = true
|
||||
// #ifdef APP-PLUS
|
||||
this.payList[1].is_disabled = true
|
||||
// #endif
|
||||
this.payInd = balanceInd
|
||||
}
|
||||
let {
|
||||
rent_mobile = ''
|
||||
} = this.subForm
|
||||
this.subForm.rent_mobile = rent_mobile || phone
|
||||
},
|
||||
initRefresh() {
|
||||
this.initIndex(true)
|
||||
},
|
||||
toChangeItem(key, index) {
|
||||
if (key == 'payInd' && index === 2 && this.payList[index].is_disabled) return
|
||||
this[key] = index
|
||||
},
|
||||
// 授权手机号
|
||||
async toAuthPhone(e) {
|
||||
let phone = await this.getAuthPhone({
|
||||
e,
|
||||
})
|
||||
if (!phone) return
|
||||
this.$nextTick(() => {
|
||||
this.subForm.rent_mobile = phone
|
||||
})
|
||||
},
|
||||
toAgree() {
|
||||
this.agree = !this.agree
|
||||
},
|
||||
toChooseItem(type) {
|
||||
this.chooseType = type
|
||||
if (type == 'seed') {
|
||||
this.detail.seed.map(item => {
|
||||
item.cur_num = item.num
|
||||
})
|
||||
this.toCountPrice()
|
||||
} else {
|
||||
let id = type == 'cycle' ? this.orderInfo[type] : this.orderInfo[type].id
|
||||
let chooseInd = this.detail[type].findIndex(item => {
|
||||
return item.id == id
|
||||
})
|
||||
this.chooseInd = chooseInd
|
||||
}
|
||||
this.$refs.choose_item.open()
|
||||
},
|
||||
toCheckItem(index) {
|
||||
if (this.chooseType == 'spe') {
|
||||
let {
|
||||
is_app = 0,
|
||||
area
|
||||
} = this.detail.spe[index]
|
||||
if (is_app) return
|
||||
if (this.total_area * 1 > area) {
|
||||
this.$util.showToast({
|
||||
title: `所选种子播种面积大于当前所选面积`
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
this.chooseInd = index
|
||||
},
|
||||
async changeNum(mod, index) {
|
||||
let {
|
||||
cur_num: goods_num,
|
||||
area
|
||||
} = this.detail.seed[index]
|
||||
let num = goods_num + mod;
|
||||
let {
|
||||
area: cur_area = 0
|
||||
} = this.orderInfo.spe
|
||||
let cur_total_area = this.total_area * 1 + (area * 1 * mod)
|
||||
if (cur_total_area > cur_area * 1) {
|
||||
this.$util.showToast({
|
||||
title: `最多可选择种植${cur_area}㎡`
|
||||
})
|
||||
return
|
||||
}
|
||||
this.detail.seed[index].cur_num = num
|
||||
this.toCountPrice()
|
||||
},
|
||||
toCountPrice() {
|
||||
let area = 0
|
||||
let seed_price = 0
|
||||
this.detail.seed.map(item => {
|
||||
area += item.area * 1 * item.cur_num
|
||||
seed_price += item.seed_price * 1 * item.cur_num
|
||||
})
|
||||
this.total_area = (area * 1).toFixed(2)
|
||||
this.total_seed_price = seed_price.toFixed(2)
|
||||
},
|
||||
toConfirm() {
|
||||
let {
|
||||
chooseType,
|
||||
chooseInd
|
||||
} = this
|
||||
if (chooseType == 'seed') {
|
||||
this.detail.seed.map(item => {
|
||||
item.num = item.cur_num
|
||||
})
|
||||
} else {
|
||||
let {
|
||||
id
|
||||
} = this.detail[chooseType][chooseInd]
|
||||
let key = chooseType == 'cycle' ? chooseType : `${chooseType}_id`
|
||||
this.options[key] = id
|
||||
}
|
||||
this.initRefresh()
|
||||
this.$refs.choose_item.close()
|
||||
},
|
||||
async toUseCoupon() {
|
||||
await this.toOrder(true)
|
||||
this.$util.goUrl({
|
||||
url: `/mine/pages/coupon/use?type=1`
|
||||
})
|
||||
},
|
||||
//表单验证
|
||||
validate(param) {
|
||||
let validate = new this.$util.Validate();
|
||||
let arr = ['rent_user_name', 'rent_mobile']
|
||||
this.rule.map(item => {
|
||||
let {
|
||||
name,
|
||||
} = item
|
||||
if (!arr.includes(name)) return
|
||||
validate.add(param[name], item);
|
||||
})
|
||||
let message = validate.start();
|
||||
return message;
|
||||
},
|
||||
toOrder(use_coupon = false) {
|
||||
let {
|
||||
payList,
|
||||
payInd,
|
||||
sendList,
|
||||
sendInd,
|
||||
subForm,
|
||||
agreement
|
||||
} = this
|
||||
let {
|
||||
id: land_id,
|
||||
spe_id,
|
||||
cycle,
|
||||
massif_id,
|
||||
} = this.options
|
||||
let {
|
||||
id: pay_model
|
||||
} = payList[payInd]
|
||||
let {
|
||||
id: send_type
|
||||
} = sendList[sendInd]
|
||||
let {
|
||||
address = {}, coupon_id = 0
|
||||
} = this.orderInfo
|
||||
let {
|
||||
id: address_id = 0
|
||||
} = address
|
||||
if (!use_coupon && !address_id && send_type == 2) {
|
||||
this.$util.showToast({
|
||||
title: `请选择配送地址`
|
||||
})
|
||||
return
|
||||
}
|
||||
let seed = this.$util.deepCopy(this.detail.seed).filter(item => {
|
||||
return item.num * 1 > 0
|
||||
})
|
||||
let seed_data = seed.map(item => {
|
||||
return {
|
||||
id: item.id,
|
||||
num: item.num
|
||||
}
|
||||
})
|
||||
let param = Object.assign({}, subForm, {
|
||||
land_id,
|
||||
spe_id,
|
||||
cycle,
|
||||
massif_id,
|
||||
pay_model,
|
||||
send_type,
|
||||
address_id,
|
||||
coupon_id,
|
||||
seed_data
|
||||
});
|
||||
if (use_coupon) {
|
||||
this.updateOrderItem({
|
||||
key: 'orderInfo',
|
||||
val: param
|
||||
})
|
||||
}
|
||||
let msg = this.validate(param);
|
||||
if (msg) {
|
||||
this.$util.showToast({
|
||||
title: msg
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!this.agree) {
|
||||
this.$util.showToast({
|
||||
title: `请勾选${agreement}`
|
||||
})
|
||||
return
|
||||
}
|
||||
this.toPay(param)
|
||||
},
|
||||
async toPay(param) {
|
||||
// #ifdef MP-WEIXIN
|
||||
let that = this
|
||||
let {
|
||||
tmp_list = []
|
||||
} = that.orderInfo
|
||||
let tmplIds = []
|
||||
tmp_list.map(item => {
|
||||
tmplIds.push(item.tmpl_id)
|
||||
})
|
||||
if (tmplIds && tmplIds.length > 0) {
|
||||
uni.requestSubscribeMessage({
|
||||
tmplIds,
|
||||
complete(res) {
|
||||
that.toConfirmPay(param)
|
||||
console.log(res, "complete requestSubscribeMessage");
|
||||
}
|
||||
})
|
||||
} else {
|
||||
that.toConfirmPay(param)
|
||||
}
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
this.toConfirmPay(param)
|
||||
// #endif
|
||||
},
|
||||
async toConfirmPay(param) {
|
||||
if (this.lockTap) return
|
||||
this.lockTap = true
|
||||
this.$util.showLoading()
|
||||
try {
|
||||
let {
|
||||
pay_list
|
||||
} = await this.$api.land.landPayOrder(param)
|
||||
this.$util.hideAll()
|
||||
if (pay_list) {
|
||||
if (param.pay_model == 3) {
|
||||
pay_list = {
|
||||
orderInfo: pay_list,
|
||||
provider: 'alipay'
|
||||
}
|
||||
}
|
||||
try {
|
||||
await this.$util.pay(pay_list)
|
||||
this.$util.showToast({
|
||||
title: `支付成功`
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.$util.back()
|
||||
this.$util.goUrl({
|
||||
url: '/mine/pages/pay-result?type=land',
|
||||
openType: 'redirectTo'
|
||||
})
|
||||
}, 1000)
|
||||
this.lockTap = false
|
||||
return
|
||||
} catch (e) {
|
||||
this.$util.showToast({
|
||||
title: `支付失败`
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.$util.back()
|
||||
this.$util.goUrl({
|
||||
url: `/land/pages/order/list`,
|
||||
openType: 'redirectTo'
|
||||
})
|
||||
}, 1000)
|
||||
this.lockTap = false
|
||||
return
|
||||
}
|
||||
}
|
||||
this.$util.showToast({
|
||||
title: `支付成功`
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.$util.back()
|
||||
this.$util.goUrl({
|
||||
url: '/mine/pages/pay-result?type=land',
|
||||
openType: 'redirectTo'
|
||||
})
|
||||
}, 1000)
|
||||
} catch (e) {
|
||||
setTimeout(() => {
|
||||
this.lockTap = false
|
||||
this.$util.hideAll()
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.land-order {
|
||||
|
||||
.add-btn {
|
||||
width: 296rpx;
|
||||
height: 72rpx;
|
||||
background: #F6F6F6;
|
||||
border-radius: 36rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pay-item {
|
||||
.iconfont {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-icon {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.icon-right {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.icon-xuanze,
|
||||
.icon-xuanze-fill {
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
width: 150rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.auth-phone-btn {
|
||||
width: 106rpx;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
margin-left: 15rpx;
|
||||
font-size: 20rpx;
|
||||
background: #F0F4EC;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
bottom: 0;
|
||||
|
||||
.footer-item {
|
||||
height: 114rpx;
|
||||
|
||||
.order-btn {
|
||||
width: 332rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.popup-choose-item {
|
||||
.icon-add-circle {
|
||||
font-size: 50rpx;
|
||||
}
|
||||
|
||||
.seed-list {
|
||||
width: 100%;
|
||||
max-height: 70vh;
|
||||
background: #EEEEEE;
|
||||
|
||||
.item-child {
|
||||
.goods-img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.goods-title {
|
||||
max-width: 470rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-btn-info {
|
||||
width: 100%;
|
||||
|
||||
.footer-item {
|
||||
height: 114rpx;
|
||||
}
|
||||
|
||||
.order-btn {
|
||||
width: 226rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
996
uniapp/uni-app/land/pages/order/detail.vue
Normal file
996
uniapp/uni-app/land/pages/order/detail.vue
Normal file
@@ -0,0 +1,996 @@
|
||||
<template>
|
||||
<view class="land-order-detail" v-if="detail.id">
|
||||
<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" color="#fff"
|
||||
:backgroundColor="scrollTop < 20 ?``:primaryColor" :leftIcon="options.notice?'iconshouye':'icon-left'"
|
||||
title="土地详情">
|
||||
</uni-nav-bar>
|
||||
<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
|
||||
<image mode="aspectFill" lazy-load class="common-bg abs" src="https://lbqny.migugu.com/admin/farm/bg-cash.png">
|
||||
</image>
|
||||
<view class="pl-lg pr-lg c-base" style="height: 120rpx;">
|
||||
<view class="pt-md f-sm-title text-bold ellipsis">
|
||||
{{detail.pay_type<2 ?statusType[detail.pay_type] : detail.goods_name}}
|
||||
</view>
|
||||
<view class="f-caption" v-if="detail.pay_type == 1">请在<min-countdown :targetTime="over_time_text"
|
||||
color="#fff" @callback="countEnd">
|
||||
</min-countdown>内完成支付，逾期未支付将自动取消</view>
|
||||
<view class="f-caption" v-if="detail.pay_type > 1">订单编号：{{detail.order_code}}</view>
|
||||
</view>
|
||||
<view class="order-status-info flex-warp ml-lg mr-lg pt-lg pb-lg fill-base rel radius-24">
|
||||
<view class="status-item flex-center flex-column" v-for="(item,index) in statusList" :key="index">
|
||||
<image mode="aspectFill" lazy-load class="status-img radius"
|
||||
:src="`/static/image/farm/${item.img_name}-fill.png`">
|
||||
</image>
|
||||
<view class="f-icontext c-caption mt-sm" :style="{color:primaryColor}">{{item.title}}</view>
|
||||
</view>
|
||||
<view class="status-line abs"></view>
|
||||
</view>
|
||||
<!-- <view class="order-video-info rel">
|
||||
<image mode="aspectFill" lazy-load class="video-img" src=""></image>
|
||||
<view class="video-bg flex-center abs"><i class="iconfont icon-shipin c-base"></i></view>
|
||||
</view>
|
||||
-->
|
||||
<view class="order-count-info fill-base mt-md" v-if="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="space-md"></view>
|
||||
<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex" :activeColor="primaryColor"
|
||||
:width="100/tabList.length + '%'" height="100rpx"></tab>
|
||||
<view class="b-1px-t"></view>
|
||||
|
||||
<block v-if="activeIndex == 0">
|
||||
<view
|
||||
class="order-text-info mt-md ml-md mr-md pl-lg pr-lg fill-base f-paragraph c-title box-shadow radius-24">
|
||||
<view class="flex-warp pt-lg pb-lg b-1px-b">
|
||||
<view class="text c-desc">农场名称</view>
|
||||
<view class="flex-1 text-right">{{detail.farmer_info.title}}</view>
|
||||
</view>
|
||||
<view class="flex-warp pt-lg pb-lg b-1px-b">
|
||||
<view class="text c-desc">土地名称</view>
|
||||
<view class="flex-1 text-right">{{detail.goods_name}}</view>
|
||||
</view>
|
||||
<view class="flex-between pt-lg pb-lg b-1px-b">
|
||||
<view class="text c-desc">服务类型</view>
|
||||
<view>{{detail.massif_title}}</view>
|
||||
</view>
|
||||
<view class="flex-between pt-lg pb-lg b-1px-b">
|
||||
<view class="text c-desc">租赁周期</view>
|
||||
<view>{{`${detail.cycle}天`}}</view>
|
||||
</view>
|
||||
<view class="flex-between pt-lg pb-lg b-1px-b">
|
||||
<view class="text c-desc">起止时间</view>
|
||||
<view>{{detail.time_text}}</view>
|
||||
</view>
|
||||
<view class="flex-between pt-lg pb-lg b-1px-t">
|
||||
<view class="text c-desc">订单编号</view>
|
||||
<view class="flex-warp">
|
||||
<view class="max-350 ellipsis">{{detail.order_code}}</view>
|
||||
<view @tap="$util.goUrl( {url:`${detail.order_code}`,openType:'copy'})"
|
||||
class="copy-btn flex-center fill-body" :style="{color:primaryColor}">复制</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-between pt-lg pb-lg b-1px-t" v-if="detail.transaction_id">
|
||||
<view class="text c-desc">付款单号</view>
|
||||
<view class="flex-warp">
|
||||
<view class="max-350 ellipsis">{{detail.transaction_id}}</view>
|
||||
<view @tap="$util.goUrl( {url:`${detail.transaction_id}`,openType:'copy'})"
|
||||
class="copy-btn flex-center fill-body" :style="{color:primaryColor}">复制</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-between pt-lg pb-lg b-1px-t">
|
||||
<view class="text c-desc">下单时间</view>
|
||||
<view>{{detail.create_time}}</view>
|
||||
</view>
|
||||
<view class="flex-between pt-lg pb-lg b-1px-t" v-if="detail.pay_time">
|
||||
<view class="text c-desc">支付时间</view>
|
||||
<view>{{detail.pay_time}}</view>
|
||||
</view>
|
||||
<view class="flex-between pt-lg pb-lg b-1px-t">
|
||||
<view class="text c-desc">土地价格</view>
|
||||
<view class="c-warning">¥{{detail.land_price}}</view>
|
||||
</view>
|
||||
<view class="flex-between pt-lg pb-lg b-1px-t">
|
||||
<view class="text c-desc">服务价格</view>
|
||||
<view class="c-warning">¥{{detail.total_massif_price}}</view>
|
||||
</view>
|
||||
<view class="flex-between pt-lg pb-lg b-1px-t" v-if="detail.seed.length > 0">
|
||||
<view class="text c-desc">种子价格</view>
|
||||
<view class="c-warning">¥{{detail.seed_price}}</view>
|
||||
</view>
|
||||
<view class="flex-between pt-lg pb-lg b-1px-t">
|
||||
<view class="text c-desc">实付金额</view>
|
||||
<view class="c-warning">¥{{detail.pay_price}}</view>
|
||||
</view>
|
||||
<view class="flex-between pt-lg pb-lg b-1px-t">
|
||||
<view class="text c-desc">支付方式</view>
|
||||
<view>{{payType[detail.pay_model]}}</view>
|
||||
</view>
|
||||
<!-- <view class="flex-between pt-lg pb-lg">
|
||||
<view class="text c-desc">合同</view>
|
||||
<view :style="{color:primaryColor}">下载合同</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="mt-md ml-md mr-md pl-lg pr-lg fill-base f-paragraph c-title box-shadow radius-24"
|
||||
v-if="detail.seed.length > 0">
|
||||
<view class="pt-lg pb-lg f-title text-bold b-1px-b">种子管理</view>
|
||||
<view class="pt-lg pb-lg">
|
||||
<view class="order-seed-item flex-center" :class="[{'mt-md':index!=0}]"
|
||||
v-for="(item,index) in detail.seed" :key="index">
|
||||
<image mode="aspectFill" lazy-load class="seed-img radius-10" :src="item.imgs"></image>
|
||||
<view class="flex-1 ml-lg c-title">
|
||||
<view class="flex-between">
|
||||
<view class="f-paragraph max-380 ellipsis">{{item.title}}</view>
|
||||
<view class="f-caption">{{item.area}}㎡</view>
|
||||
</view>
|
||||
<view class="flex-between f-caption c-caption">
|
||||
<view class="c-warning">¥{{item.seed_price}}</view>
|
||||
<view>x{{item.num}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="order-text-info mt-md ml-md mr-md pl-lg pr-lg fill-base f-paragraph c-title box-shadow radius-24">
|
||||
<view class="pt-lg pb-lg f-title text-bold b-1px-b">租赁人信息</view>
|
||||
<view class="flex-center pt-lg">
|
||||
<view class="text c-desc">姓名</view>
|
||||
<view class="flex-1">{{detail.rent_user_name}}</view>
|
||||
</view>
|
||||
<view @tap.stop="$util.goUrl({url:detail.rent_mobile,openType:'call'})" class="flex-center pt-lg pb-lg">
|
||||
<view class="text c-desc">电话</view>
|
||||
<view class="flex-1" :style="{color:primaryColor}">{{detail.rent_mobile}}</view>
|
||||
</view>
|
||||
<view class="pb-lg" v-if="detail.text">
|
||||
<view class="text c-desc">备注</view>
|
||||
<view class="f-paragraph c-title">
|
||||
<view class="mt-sm">
|
||||
<text decode="emsp" style="word-break:break-all;">{{detail.text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="activeIndex == 1">
|
||||
<view
|
||||
class="order-text-info fill-base mt-md ml-md mr-md pl-lg pr-lg f-paragraph c-title box-shadow radius-24"
|
||||
v-for="(item,index) in list.data" :key="index">
|
||||
<view class="flex-between pt-lg pb-lg b-1px-b">
|
||||
<view class="f-title text-bold">第{{item.times}}次{{item.send_type == 1 ?'自提':'配送'}}</view>
|
||||
<view class="f-paragraph"
|
||||
:style="{color:item.pay_type == 2? subColor: item.pay_type == 3? primaryColor: ''}">
|
||||
{{sendPayType[item.send_type][item.pay_type]}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-warp pt-lg">
|
||||
<view class="text c-desc">{{item.send_type == 1 ?'自提时间':'送货时间'}}</view>
|
||||
<view class="flex-1">{{item.time_text}}</view>
|
||||
</view>
|
||||
<view class="flex-warp pt-lg">
|
||||
<view class="text c-desc">配送方式</view>
|
||||
<view class="flex-1">{{sendType[item.send_type]}}</view>
|
||||
</view>
|
||||
<view @tap.stop="toMap(index)" class="flex-warp pt-lg">
|
||||
<view class="text c-desc">{{item.send_type==1?'自提地址':'收货地址'}}</view>
|
||||
<view class="flex-1">{{item.send_type ==1 ? detail.farmer_info.address : item.address}}</view>
|
||||
</view>
|
||||
<view @tap.stop="toTel(index)" class="flex-warp pt-lg">
|
||||
<view class="text c-desc">{{item.send_type==1?'自提人':'收货人'}}</view>
|
||||
<view class="flex-1">
|
||||
{{`${item.user_name} ${item.mobile}`}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-warp pt-lg">
|
||||
<view class="text c-desc">订单编号</view>
|
||||
<view class="flex-1">{{item.order_code}}</view>
|
||||
</view>
|
||||
<view class="flex-warp pt-lg" v-if="item.send_type == 2 && item.transaction_id">
|
||||
<view class="text c-desc">付款单号</view>
|
||||
<view class="flex-1">{{item.transaction_id}}</view>
|
||||
</view>
|
||||
<view class="flex-warp pt-lg" v-if="item.pay_type > 2 && item.send_type == 2">
|
||||
<view class="text c-desc">发货时间</view>
|
||||
<view class="flex-1">{{item.send_time}}</view>
|
||||
</view>
|
||||
<view class="flex-warp pt-lg" v-if="item.pay_type == 7">
|
||||
<view class="text c-desc">{{item.send_type == 1 ? '取货时间':'收货时间'}}</view>
|
||||
<view class="flex-1">{{item.receiving_time}}</view>
|
||||
</view>
|
||||
<view class="flex-warp pt-lg" v-if="item.send_type == 2">
|
||||
<view class="text c-desc">配送费</view>
|
||||
<view class="flex-1 c-warning">¥{{item.pay_price}}</view>
|
||||
</view>
|
||||
<view class="flex-warp pt-lg" v-if="item.text">
|
||||
<view class="text c-desc">备注</view>
|
||||
<view class="flex-1">
|
||||
<text decode="emsp" style="word-break:break-all;">{{item.text}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="space-lg"></view>
|
||||
<!-- 用户端 -->
|
||||
<view class="flex-between pt-lg pb-lg b-1px-t"
|
||||
v-if="!options.farmer && (item.pay_type == 2 || (item.send_type==2&&item.pay_type == 3))">
|
||||
<view></view>
|
||||
<view @tap.stop="toChangeOrder(index, item.send_type == 1 ? 'cancel_send_item':'refund_send_item')"
|
||||
class="send-btn flex-center f-caption radius-4"
|
||||
:style="{color:primaryColor,border:`1rpx solid ${primaryColor}`}" v-if="item.pay_type == 2">
|
||||
{{item.send_type ==1 ? '取消自提':'取消配送'}}
|
||||
</view>
|
||||
<view @tap.stop="toChangeOrder(index, 'end_item')" class="send-btn flex-center f-caption radius-4"
|
||||
:style="{color:primaryColor,border:`1rpx solid ${primaryColor}`}"
|
||||
v-if="item.send_type ==2 && item.pay_type ==3">
|
||||
确认收货
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading"
|
||||
v-if="loading">
|
||||
</load-more>
|
||||
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
|
||||
</block>
|
||||
|
||||
<block v-if="!options.farmer">
|
||||
<view class="space-max-footer"
|
||||
v-if="(activeIndex == 0 && (detail.pay_type == 1 || (detail.pay_type > 1 && !detail.have_eva))) || activeIndex == 1 ">
|
||||
</view>
|
||||
<view class="space-footer" v-else></view>
|
||||
<fix-bottom-button @cancel="toChangeOrder(-1,'cancel_item')" @confirm="toPay"
|
||||
:text="[{type:'cancel',text:'取消订单'},{type:'confirm',text:'去支付'}]"
|
||||
v-if="activeIndex == 0 && detail.pay_type == 1">
|
||||
</fix-bottom-button>
|
||||
|
||||
<fix-bottom-button @confirm="toEvaluate" :text="[{type:'confirm',text:'去评价'}]"
|
||||
v-if="activeIndex == 0 && detail.pay_type > 1 && !detail.have_eva">
|
||||
</fix-bottom-button>
|
||||
|
||||
<fix-bottom-button @cancel="toSend(1)" @confirm="toSend(2)"
|
||||
:text="[{type:'cancel',text:'去农场自提'},{type:'confirm',text:'我要配送'}]"
|
||||
v-if="activeIndex == 1 && detail.pay_type > 1">
|
||||
</fix-bottom-button>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="space-max-footer"></view>
|
||||
<fix-bottom-button @confirm="$util.goUrl({url:detail.address_info.mobile,openType:'call'})"
|
||||
:text="[{type:'confirm',text:'联系买家'}]">
|
||||
</fix-bottom-button>
|
||||
</block>
|
||||
|
||||
<!-- 用户端 取消订单/取消自提/取消配送/确认收货 -->
|
||||
<common-popup @confirm="confirmChangeOrder" ref="cancel_item" type="CANCEL_ORDER" :info="popupInfo">
|
||||
</common-popup>
|
||||
|
||||
<common-popup @confirm="confirmChangeOrder" ref="cancel_send_item" title="取消自提" desc="请确认是否取消自提，取消后将无法恢复"
|
||||
text="确认取消" :info="popupInfo">
|
||||
</common-popup>
|
||||
<common-popup @confirm="confirmChangeOrder" ref="refund_send_item" title="取消配送" desc="请确认是否取消配送，取消后将返还配送费"
|
||||
text="确认取消" :info="popupInfo">
|
||||
</common-popup>
|
||||
<common-popup @confirm="confirmChangeOrder" ref="end_item" type="END_ORDER" :info="popupInfo">
|
||||
</common-popup>
|
||||
|
||||
|
||||
<uni-popup ref="send_item" type="center" :custom="true">
|
||||
<view class="popup-send flex-center flex-column pd-lg fill-base radius-34">
|
||||
<view class="flex-center f-lg-title c-title text-bold">{{send_type === 1 ? '去农场自提' :'我要配送'}}
|
||||
</view>
|
||||
<view class="order-text-info f-paragraph c-title pd-lg">
|
||||
<view class="flex-between pt-lg pb-lg b-1px-b">
|
||||
<view class="flex-y-center">
|
||||
<i class="iconfont icon-required c-warning"></i>
|
||||
<view class="mini-text">{{send_type==1?'自提地址':'收货地址'}}</view>
|
||||
</view>
|
||||
<view @tap.stop="toChooseAddr" class="flex-1 flex-between">
|
||||
<view :class="[{'c-placeholder':send_type == 2 && !address_info.id}]">
|
||||
{{send_type == 1 ? address_info.address : address_info.id ? `${address_info.address}${address_info.address_info}` : '请选择地址'}}
|
||||
</view>
|
||||
<i class="iconfont" :class="[{'icon-dingwei':send_type==1},{'icon-right':send_type==2}]"
|
||||
style="font-size: 28rpx;"></i>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-between pt-lg pb-lg b-1px-b">
|
||||
<view class="flex-y-center">
|
||||
<i class="iconfont icon-required c-warning"></i>
|
||||
<view class="mini-text">{{timeTitle[detail.send_type]}}</view>
|
||||
</view>
|
||||
<view @tap.stop="$util.goUrl({url:`/mine/pages/choose-time`})" class="flex-1 flex-between">
|
||||
<view :class="[{'c-placeholder':!send_info.time.id},{'c-title':send_info.time.id}]">
|
||||
{{send_info.time.id ? `${send_info.time.date} ${send_info.time.time_text}` : `请选择${timeTitle[detail.send_type]}`}}
|
||||
</view>
|
||||
<i class="iconfont icon-right" style="font-size: 28rpx;"></i>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-between pt-lg pb-lg" :class="[{'b-1px-b': detail.send_type == 1}]">
|
||||
<view class="flex-y-center">
|
||||
<i class="iconfont icon-required c-warning"></i>
|
||||
<view class="mini-text">{{sendTitle[detail.send_tmpl_type]}}</view>
|
||||
</view>
|
||||
<view class="flex-1 flex-between">
|
||||
<input v-model="send_num" type="text" class="flex-1 f-paragraph" maxlength="20"
|
||||
placeholder-class="c-placeholder"
|
||||
:placeholder="`请输入${sendTitle[detail.send_tmpl_type]}`" />
|
||||
<view class="f-caption c-title ml-sm">{{detail.send_tmpl_type==1?detail.unit:'kg'}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<block v-if="send_type == 1">
|
||||
<view class="flex-between pt-lg pb-lg b-1px-b">
|
||||
<view class="flex-y-center">
|
||||
<i class="iconfont icon-required c-warning"></i>
|
||||
<view class="mini-text">姓名</view>
|
||||
</view>
|
||||
<input v-model="user_name" type="text" class="flex-1 f-paragraph" maxlength="20"
|
||||
placeholder-class="c-placeholder" placeholder="请输入姓名" />
|
||||
</view>
|
||||
<view class="flex-between pt-lg pb-lg">
|
||||
<view class="flex-y-center">
|
||||
<i class="iconfont icon-required c-warning"></i>
|
||||
<view class="mini-text">手机号</view>
|
||||
</view>
|
||||
<input v-model="mobile" type="text" class="flex-1 f-paragraph"
|
||||
placeholder-class="c-placeholder" placeholder="请输入手机号" />
|
||||
<button open-type="getPhoneNumber" @getphonenumber="toAuthPhone"
|
||||
class="clear-btn auth-phone-btn flex-center" :style="{color:primaryColor}">立即授权</button>
|
||||
</view>
|
||||
</block>
|
||||
<textarea v-model="text" class="textarea-item pd-lg mt-md f-paragraph c-title radius-16"
|
||||
maxlength="200" placeholder-class="c-placeholder" placeholder="请输入备注信息"></textarea>
|
||||
</view>
|
||||
<view class="flex-center">
|
||||
<view @tap="$refs.send_item.close()" class="popup-btn flex-center f-paragraph c-desc radius mr-lg">
|
||||
取消
|
||||
</view>
|
||||
<view @tap="toSendOrder" class="popup-btn flex-center f-paragraph c-base radius"
|
||||
:style="{background:primaryColor}">
|
||||
{{send_type==1?'确认自提':'立即支付'}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapActions,
|
||||
mapMutations
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
options: {},
|
||||
detail: {},
|
||||
sourceInd: 0,
|
||||
statusType: {
|
||||
'-1': '已取消',
|
||||
1: '待支付',
|
||||
2: '租赁中',
|
||||
7: '已完成',
|
||||
},
|
||||
payType: {
|
||||
1: '微信支付',
|
||||
2: '余额支付',
|
||||
3: '支付宝支付'
|
||||
},
|
||||
sendType: {
|
||||
1: '自提',
|
||||
2: '快递'
|
||||
},
|
||||
sendPayType: {
|
||||
1: {
|
||||
'-1': '已取消',
|
||||
2: '待提货',
|
||||
3: '已提货',
|
||||
7: '已完成'
|
||||
},
|
||||
2: {
|
||||
'-1': '已取消',
|
||||
2: '待配送',
|
||||
3: '配送中',
|
||||
7: '已完成'
|
||||
}
|
||||
},
|
||||
sendTitle: {
|
||||
1: '配送数量',
|
||||
2: '配送重量'
|
||||
},
|
||||
timeTitle: {
|
||||
1: '自提时间',
|
||||
2: '送货时间'
|
||||
},
|
||||
statusList: [{
|
||||
id: 1,
|
||||
title: '下单',
|
||||
img_name: 'order'
|
||||
}, {
|
||||
id: 2,
|
||||
title: '已播种',
|
||||
img_name: 'sow'
|
||||
}, {
|
||||
id: 3,
|
||||
title: '生长中',
|
||||
img_name: 'grow'
|
||||
}, {
|
||||
id: 4,
|
||||
title: '已完成',
|
||||
img_name: 'done'
|
||||
}],
|
||||
activeIndex: 0,
|
||||
tabList: [{
|
||||
id: 0,
|
||||
title: '土地信息'
|
||||
}, {
|
||||
id: 1,
|
||||
title: '配送信息',
|
||||
number: 0
|
||||
}],
|
||||
param: {
|
||||
page: 1,
|
||||
},
|
||||
list: {
|
||||
data: []
|
||||
},
|
||||
loading: true,
|
||||
popupInfo: {},
|
||||
lockTap: false,
|
||||
send_type: 1,
|
||||
address_info: {
|
||||
id: 0,
|
||||
address: ''
|
||||
},
|
||||
send_info: {
|
||||
time_index: '',
|
||||
time: {
|
||||
date: '',
|
||||
start_time: '',
|
||||
end_time: ''
|
||||
}
|
||||
},
|
||||
send_num: '',
|
||||
user_name: '',
|
||||
mobile: '',
|
||||
text: ''
|
||||
}
|
||||
},
|
||||
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()
|
||||
let {
|
||||
tab = 0,
|
||||
farmer = 0,
|
||||
notice = 0
|
||||
} = options
|
||||
options.farmer = farmer
|
||||
options.notice = notice
|
||||
this.options = options
|
||||
this.activeIndex = tab
|
||||
this.updateOrderItem({
|
||||
key: 'haveOperItem',
|
||||
val: false
|
||||
})
|
||||
this.initIndex()
|
||||
},
|
||||
onUnload() {
|
||||
if (!this.haveOperItem) return
|
||||
this.$util.back()
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.activeIndex < 2) return
|
||||
if (this.list.current_page >= this.list.last_page || this.loading) return
|
||||
this.param.page = this.param.page + 1
|
||||
this.loading = true
|
||||
this.getList()
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
configInfo: state => state.config.configInfo,
|
||||
userInfo: state => state.user.userInfo,
|
||||
haveOperItem: state => state.order.haveOperItem,
|
||||
over_time_text() {
|
||||
return new Date().getTime() + this.detail.over_time * 1000
|
||||
}
|
||||
}),
|
||||
methods: {
|
||||
...mapActions(['getConfigInfo', 'getAuthPhone']),
|
||||
...mapMutations(['updateOrderItem']),
|
||||
async initIndex() {
|
||||
let {
|
||||
id
|
||||
} = this.options
|
||||
let data = await this.$api.land.orderInfo({
|
||||
id
|
||||
})
|
||||
let {
|
||||
type: send_tmpl_type
|
||||
} = data.send_tmpl
|
||||
data.send_tmpl_type = send_tmpl_type
|
||||
this.detail = data
|
||||
let {
|
||||
activeIndex
|
||||
} = this
|
||||
this.handerTabChange(activeIndex)
|
||||
this.$util.hideAll()
|
||||
},
|
||||
initRefresh() {
|
||||
this.initIndex()
|
||||
},
|
||||
countEnd() {
|
||||
this.$util.log("倒计时完了")
|
||||
setTimeout(() => {
|
||||
this.initRefresh()
|
||||
this.$util.back()
|
||||
}, 1000)
|
||||
},
|
||||
handerTabChange(index) {
|
||||
this.activeIndex = index
|
||||
if (index < 1) return
|
||||
this.$util.showLoading()
|
||||
this.param.page = 1
|
||||
this.list.data = []
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
let {
|
||||
list: oldList,
|
||||
param,
|
||||
activeIndex
|
||||
} = this
|
||||
let {
|
||||
id
|
||||
} = this.options
|
||||
param.land_order_id = id
|
||||
let newList = await this.$api.land.userSendOrderList(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()
|
||||
},
|
||||
// 取消订单/取消自提/取消配送/确认取货/确认收货/立即发货
|
||||
async toChangeOrder(index, key) {
|
||||
let {
|
||||
id,
|
||||
order_code,
|
||||
goods_cover = '',
|
||||
} = index == -1 ? this.detail : this.list.data[index]
|
||||
this.popupInfo = {
|
||||
id,
|
||||
name: `订单编号：${order_code}`,
|
||||
image: goods_cover,
|
||||
index,
|
||||
refs_key: key,
|
||||
}
|
||||
this.$refs[key].open()
|
||||
},
|
||||
async confirmChangeOrder() {
|
||||
let {
|
||||
id,
|
||||
index,
|
||||
refs_key
|
||||
} = this.popupInfo
|
||||
if (this.lockTap) return;
|
||||
this.lockTap = true;
|
||||
this.$util.showLoading()
|
||||
let methodModel = {
|
||||
'cancel_item': {
|
||||
method: 'cancelOrder',
|
||||
msg: '取消成功',
|
||||
pay_type: -1
|
||||
},
|
||||
'cancel_send_item': {
|
||||
method: 'sendOrderRefund',
|
||||
msg: '取消成功',
|
||||
pay_type: -1
|
||||
},
|
||||
'refund_send_item': {
|
||||
method: 'sendOrderRefund',
|
||||
msg: '取消成功',
|
||||
pay_type: -1
|
||||
},
|
||||
'end_item': {
|
||||
method: 'sendOrderReceiving',
|
||||
msg: '收货成功',
|
||||
pay_type: 7
|
||||
}
|
||||
}
|
||||
let {
|
||||
method,
|
||||
msg,
|
||||
pay_type
|
||||
} = methodModel[refs_key]
|
||||
try {
|
||||
await this.$api.land[method]({
|
||||
id
|
||||
})
|
||||
this.$util.hideAll()
|
||||
if (refs_key == 'cancel_item') {
|
||||
this.detail.pay_type = pay_type
|
||||
} else {
|
||||
this.list.data[index].pay_type = pay_type
|
||||
}
|
||||
this.$util.showToast({
|
||||
title: msg
|
||||
})
|
||||
if (['end_item', 'cancel_send_item', 'refund_send_item'].includes(refs_key)) {
|
||||
this.initRefresh()
|
||||
}
|
||||
this.lockTap = false
|
||||
this.$refs[refs_key].close()
|
||||
setTimeout(() => {
|
||||
this.$util.back()
|
||||
}, 1000)
|
||||
} catch (e) {
|
||||
setTimeout(() => {
|
||||
this.lockTap = false
|
||||
this.$util.hideAll()
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
// 去支付
|
||||
async toPay(index) {
|
||||
if (this.lockTap) return;
|
||||
this.lockTap = true;
|
||||
this.$util.showLoading()
|
||||
let {
|
||||
id,
|
||||
pay_model
|
||||
} = this.detail
|
||||
try {
|
||||
let {
|
||||
pay_list
|
||||
} = await this.$api.land.landRePayOrder({
|
||||
id
|
||||
})
|
||||
this.$util.hideAll()
|
||||
if (pay_list) {
|
||||
if (pay_model == 3) {
|
||||
pay_list = {
|
||||
orderInfo: pay_list,
|
||||
provider: 'alipay'
|
||||
}
|
||||
}
|
||||
try {
|
||||
await this.$util.pay(pay_list)
|
||||
this.lockTap = false;
|
||||
this.list.data[index].pay_type = 2
|
||||
this.$util.back()
|
||||
} catch (e) {
|
||||
this.lockTap = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
setTimeout(() => {
|
||||
this.lockTap = false
|
||||
this.$util.hideAll()
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
async toTel(index) {
|
||||
if (!this.options.farmer) return
|
||||
let {
|
||||
mobile: url
|
||||
} = this.list.data[index]
|
||||
this.$util.goUrl({
|
||||
url,
|
||||
openType: 'call'
|
||||
})
|
||||
},
|
||||
async toMap(index) {
|
||||
let {
|
||||
farmer_info
|
||||
} = this.detail
|
||||
let send_type = index == -1 ? 1 : this.list.data[index].send_type
|
||||
let {
|
||||
lat,
|
||||
lng,
|
||||
address
|
||||
} = send_type == 1 ? farmer_info : this.list.data[index]
|
||||
await this.$util.checkAuth({
|
||||
type: 'userLocation'
|
||||
})
|
||||
await uni.getLocation({
|
||||
type: 'gcj02',
|
||||
})
|
||||
await uni.openLocation({
|
||||
latitude: lat * 1,
|
||||
longitude: lng * 1,
|
||||
name: address,
|
||||
scale: 28
|
||||
})
|
||||
},
|
||||
toSend(send_type) {
|
||||
let address_info = this.$util.deepCopy(this.detail.address_info)
|
||||
let farmer_addr = this.$util.deepCopy(this.detail.farmer_info.address)
|
||||
this.address_info = send_type == 1 ? {
|
||||
id: 0,
|
||||
address: farmer_addr
|
||||
} : address_info
|
||||
this.send_info = {
|
||||
time_index: '',
|
||||
time: {
|
||||
date: '',
|
||||
start_time: '',
|
||||
end_time: ''
|
||||
}
|
||||
}
|
||||
if (send_type == 1) {
|
||||
let {
|
||||
user_name,
|
||||
mobile
|
||||
} = address_info
|
||||
this.user_name = user_name
|
||||
this.mobile = mobile
|
||||
}
|
||||
this.text = ''
|
||||
this.send_type = send_type
|
||||
this.$refs.send_item.open()
|
||||
},
|
||||
toChooseAddr() {
|
||||
let {
|
||||
send_type,
|
||||
} = this
|
||||
if (send_type == 1) {
|
||||
this.toMap(-1)
|
||||
return
|
||||
}
|
||||
this.$util.goUrl({
|
||||
url: `/mine/pages/address/list?check=3`
|
||||
})
|
||||
},
|
||||
// 授权手机号
|
||||
async toAuthPhone(e) {
|
||||
let phone = await this.getAuthPhone({
|
||||
e,
|
||||
})
|
||||
if (!phone) return
|
||||
this.$nextTick(() => {
|
||||
this.mobile = phone
|
||||
})
|
||||
},
|
||||
// 自提/配送
|
||||
async toSendOrder() {
|
||||
let {
|
||||
send_type,
|
||||
sendTitle,
|
||||
timeTitle,
|
||||
send_num,
|
||||
user_name,
|
||||
mobile,
|
||||
text
|
||||
} = this
|
||||
let {
|
||||
id: order_id,
|
||||
send_tmpl_type
|
||||
} = this.detail
|
||||
let {
|
||||
id: address_id
|
||||
} = this.address_info
|
||||
if (!address_id && send_type == 2) {
|
||||
this.$util.showToast({
|
||||
title: `请选择收货地址`
|
||||
})
|
||||
return
|
||||
}
|
||||
let {
|
||||
date = '',
|
||||
start_time = '',
|
||||
end_time = ''
|
||||
} = this.send_info.time
|
||||
if (!date) {
|
||||
this.$util.showToast({
|
||||
title: `请选择${timeTitle[send_type]}`
|
||||
})
|
||||
return
|
||||
}
|
||||
start_time = this.$util.DateToUnix(`${date} ${start_time}`)
|
||||
end_time = this.$util.DateToUnix(`${date} ${end_time}`)
|
||||
|
||||
let reg = send_tmpl_type == 1 ? /^[1-9]+[0-9]*]*$/ :
|
||||
/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
|
||||
if (send_type == 2 && (!send_num || !reg.test(send_num))) {
|
||||
this.$util.showToast({
|
||||
title: !send_num ? `请输入${sendTitle[send_tmpl_type]}` : send_tmpl_type == 1 ?
|
||||
`请输入正确的配送数量` : `请输入正确的配送重量，最多2位小数`
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
let param = {
|
||||
order_id,
|
||||
send_type,
|
||||
send_num,
|
||||
address_id,
|
||||
start_time,
|
||||
end_time,
|
||||
text
|
||||
}
|
||||
if (send_type == 1) {
|
||||
user_name = user_name ? user_name.replace(/(^\s*)|(\s*$)/g, "") : ''
|
||||
if (!user_name || !mobile || !/^(1[0-9]{10})$/.test(mobile)) {
|
||||
this.$util.showToast({
|
||||
title: !user_name ? `请输入姓名` : !mobile ? `请输入手机号` : `${mobile} 手机号无效`
|
||||
})
|
||||
return
|
||||
}
|
||||
param.user_name = user_name
|
||||
param.mobile = mobile
|
||||
}
|
||||
this.$util.showLoading()
|
||||
if (send_type == 1) {
|
||||
param.pay_model = 2
|
||||
await this.$api.land.sendOrderApply(param)
|
||||
this.$util.hideAll()
|
||||
this.$util.showToast({
|
||||
title: `提交成功`
|
||||
})
|
||||
this.$refs.send_item.close()
|
||||
setTimeout(() => {
|
||||
this.initIndex()
|
||||
}, 1000)
|
||||
return
|
||||
}
|
||||
|
||||
let {
|
||||
send_price: pay_price
|
||||
} = await this.$api.land.sendOrderPayInfo(param)
|
||||
this.$util.hideAll()
|
||||
let orderInfo = Object.assign({}, param, {
|
||||
pay_price,
|
||||
page_type: 'land_send'
|
||||
});
|
||||
this.updateOrderItem({
|
||||
key: 'orderInfo',
|
||||
val: orderInfo
|
||||
})
|
||||
this.$refs.send_item.close()
|
||||
let url = `/mine/pages/pay`
|
||||
this.$util.goUrl({
|
||||
url
|
||||
})
|
||||
},
|
||||
// 去评价
|
||||
toEvaluate() {
|
||||
let {
|
||||
id
|
||||
} = this.detail
|
||||
let url = `/mine/pages/evaluate/edit?id=${id}&type=land`
|
||||
this.$util.goUrl({
|
||||
url
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.land-order-detail {
|
||||
|
||||
.order-video-info {
|
||||
width: 750rpx;
|
||||
height: 380rpx;
|
||||
margin-top: 26rpx;
|
||||
|
||||
.video-img {
|
||||
width: 750rpx;
|
||||
height: 380rpx;
|
||||
}
|
||||
|
||||
.video-bg {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 750rpx;
|
||||
height: 380rpx;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
|
||||
.iconfont {
|
||||
font-size: 70rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-count-info {
|
||||
.count-item {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
.machine-item {
|
||||
width: 50%;
|
||||
|
||||
.num {
|
||||
width: 50rpx;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 150rpx;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.order-seed-item {
|
||||
.seed-img {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
width: 180rpx;
|
||||
height: 56rpx;
|
||||
transform: rotateZ(360deg)
|
||||
}
|
||||
|
||||
.popup-send {
|
||||
width: 686rpx;
|
||||
|
||||
.textarea-item {
|
||||
width: 506rpx;
|
||||
height: 200rpx;
|
||||
border: 1rpx solid #eee;
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
280
uniapp/uni-app/land/pages/order/list.vue
Normal file
280
uniapp/uni-app/land/pages/order/list.vue
Normal file
@@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<view class="farmer-order-land-list">
|
||||
<fixed>
|
||||
<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex" :activeColor="primaryColor"
|
||||
:width="100/tabList.length + '%'" height="100rpx" msgRight="40rpx"></tab>
|
||||
<view class="b-1px-b"></view>
|
||||
</fixed>
|
||||
<view @tap.stop="goDetail(index)" class="order-item fill-base mg-big pd-lg radius-16 box-shadow"
|
||||
v-for="(item,index) in list.data" :key="index">
|
||||
<view class="flex-between pb-lg c-title">
|
||||
<view class="f-title flex-y-baseline"><i class="iconfont icon-dianpu mr-sm"></i>
|
||||
<view class="text-bold max-400 ellipsis">{{item.farmer_info.title}}</view>
|
||||
</view>
|
||||
<view class="f-paragraph"
|
||||
:style="{color:item.pay_type == 1? subColor: item.pay_type == 2? primaryColor: ''}">
|
||||
{{statusType[item.pay_type]}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-center" :class="[{'mt-lg':index!=0}]">
|
||||
<image mode="aspectFill" lazy-load class="avatar radius-24" :src="item.goods_cover"></image>
|
||||
<view class="flex-1 ml-lg">
|
||||
<view class="f-title c-title text-bold ellipsis" style="max-width: 498rpx;"> {{item.goods_name}}
|
||||
</view>
|
||||
<view class="f-caption c-caption mt-sm"> 租赁期限：{{item.end_time}} 到期 </view>
|
||||
<view class="f-caption c-caption"> 租赁面积：{{item.area}}㎡ </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-between mt-md">
|
||||
<view></view>
|
||||
<view class="flex-warp" v-if="item.pay_type == 1">
|
||||
<view @tap.stop="toChangeOrder(index,'cancel_item')"
|
||||
class="common-btn disabled flex-center f-caption c-title radius-4">取消订单
|
||||
</view>
|
||||
<view @tap.stop="toPay(index)" class="common-btn flex-center f-caption c-base radius-4 ml-lg"
|
||||
:style="{background:primaryColor}">去支付
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-warp" v-if="(item.pay_type > 1 && !item.have_eva) || item.pay_type == 2">
|
||||
<view @tap.stop="goDetail(index,1)" class="common-btn flex-center f-caption c-base radius-4 ml-lg"
|
||||
:style="{background:primaryColor}" v-if="item.pay_type == 2">我要配送
|
||||
</view>
|
||||
<view @tap.stop="toEvaluate(index)" class="common-btn flex-center f-caption c-base radius-4 ml-lg"
|
||||
:style="{background:subColor}" v-if="!item.have_eva">去评价
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
|
||||
</load-more>
|
||||
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
|
||||
|
||||
<view class="space-footer"></view>
|
||||
<common-popup @confirm="confirmCancel" ref="cancel_item" type="CANCEL_ORDER" :info="popupInfo"></common-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
activeIndex: 0,
|
||||
tabList: [{
|
||||
id: 0,
|
||||
title: '全部'
|
||||
}, {
|
||||
id: 2,
|
||||
title: '租赁中',
|
||||
number: 0
|
||||
}, {
|
||||
id: 7,
|
||||
title: '已完成'
|
||||
}],
|
||||
statusType: {
|
||||
'-1': '已取消',
|
||||
1: '待支付',
|
||||
2: '租赁中',
|
||||
7: '已完成',
|
||||
},
|
||||
param: {
|
||||
page: 1,
|
||||
},
|
||||
list: {
|
||||
data: []
|
||||
},
|
||||
loading: true,
|
||||
popupInfo: {},
|
||||
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
|
||||
let {
|
||||
tab = 0
|
||||
} = options
|
||||
this.activeIndex = tab
|
||||
this.initIndex()
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
// #ifndef APP-PLUS
|
||||
uni.showNavigationBarLoading()
|
||||
// #endif
|
||||
this.initRefresh()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.list.current_page >= this.list.last_page || this.loading) return
|
||||
this.param.page = this.param.page + 1
|
||||
this.loading = true
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
initIndex() {
|
||||
this.getList()
|
||||
},
|
||||
initRefresh() {
|
||||
this.param.page = 1
|
||||
this.initIndex()
|
||||
},
|
||||
handerTabChange(index) {
|
||||
this.activeIndex = index
|
||||
this.$util.showLoading()
|
||||
this.param.page = 1
|
||||
this.list.data = []
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
let {
|
||||
list: oldList,
|
||||
param,
|
||||
tabList,
|
||||
activeIndex
|
||||
} = this
|
||||
param.pay_type = tabList[activeIndex].id
|
||||
let newList = await this.$api.land.orderList(param);
|
||||
|
||||
if (this.param.page == 1) {
|
||||
this.list = newList
|
||||
} else {
|
||||
newList.data = oldList.data.concat(newList.data)
|
||||
this.list = newList
|
||||
}
|
||||
this.loading = false
|
||||
let {
|
||||
rent_count,
|
||||
} = newList.count
|
||||
this.tabList[1].number = rent_count
|
||||
this.$util.hideAll()
|
||||
},
|
||||
// 取消订单
|
||||
async toChangeOrder(index, key) {
|
||||
let {
|
||||
id,
|
||||
order_code,
|
||||
goods_cover: image,
|
||||
} = this.list.data[index]
|
||||
this.popupInfo = {
|
||||
id,
|
||||
name: `订单编号：${order_code}`,
|
||||
image,
|
||||
index,
|
||||
}
|
||||
this.$refs[key].open()
|
||||
},
|
||||
async confirmCancel() {
|
||||
let {
|
||||
id,
|
||||
index,
|
||||
} = this.popupInfo
|
||||
if (this.lockTap) return;
|
||||
this.lockTap = true;
|
||||
this.$util.showLoading()
|
||||
try {
|
||||
await this.$api.land.cancelOrder({
|
||||
id
|
||||
})
|
||||
this.$util.hideAll()
|
||||
if (this.activeIndex == 0) {
|
||||
this.list.data[index].pay_type = -1
|
||||
} else {
|
||||
this.list.data.splice(index, 1)
|
||||
}
|
||||
this.$util.showToast({
|
||||
title: `取消成功`
|
||||
})
|
||||
this.lockTap = false
|
||||
this.$refs.cancel_item.close()
|
||||
} catch (e) {
|
||||
setTimeout(() => {
|
||||
this.lockTap = false
|
||||
this.$util.hideAll()
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
// 去支付
|
||||
async toPay(index) {
|
||||
if (this.lockTap) return;
|
||||
this.lockTap = true;
|
||||
this.$util.showLoading()
|
||||
let {
|
||||
id,
|
||||
pay_model
|
||||
} = this.list.data[index]
|
||||
try {
|
||||
let {
|
||||
pay_list
|
||||
} = await this.$api.land.landRePayOrder({
|
||||
id
|
||||
})
|
||||
this.$util.hideAll()
|
||||
if (pay_list) {
|
||||
if (pay_model == 3) {
|
||||
pay_list = {
|
||||
orderInfo: pay_list,
|
||||
provider: 'alipay'
|
||||
}
|
||||
}
|
||||
try {
|
||||
await this.$util.pay(pay_list)
|
||||
this.lockTap = false;
|
||||
if (this.activeIndex == 0) {
|
||||
this.list.data[index].pay_type = 2
|
||||
} else {
|
||||
this.list.data.splice(index, 1)
|
||||
}
|
||||
let {
|
||||
number
|
||||
} = this.tabList[1]
|
||||
this.tabList[1].number = number + 1
|
||||
} catch (e) {
|
||||
this.lockTap = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
setTimeout(() => {
|
||||
this.lockTap = false
|
||||
this.$util.hideAll()
|
||||
}, 2000)
|
||||
}
|
||||
},
|
||||
// 去评价
|
||||
toEvaluate(index) {
|
||||
let {
|
||||
id
|
||||
} = this.list.data[index]
|
||||
let url = `/mine/pages/evaluate/edit?id=${id}&type=land`
|
||||
this.$util.goUrl({
|
||||
url
|
||||
})
|
||||
},
|
||||
// 订单详情
|
||||
goDetail(index, tab = 0) {
|
||||
let {
|
||||
id
|
||||
} = this.list.data[index]
|
||||
let url = `/land/pages/order/detail?id=${id}&tab=${tab}`
|
||||
this.$util.goUrl({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
</style>
|
||||
119
uniapp/uni-app/land/pages/seed/detail.vue
Normal file
119
uniapp/uni-app/land/pages/seed/detail.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<view class="land-seed-detail rel" v-if="detail.id">
|
||||
<banner @change="goBanner(1,$event)" :list="detail.imgs" :margin="0" :autoplay="true" :borderRadius="0"
|
||||
:height="750" :indicatorActiveColor="primaryColor" indicatorType="number"
|
||||
indicatorStyle="text-align:right;bottom:0"></banner>
|
||||
<view class="seed-info fill-base abs pd-lg f-paragraph c-desc">
|
||||
<i class="iconfont icon-seed" :style="{color:primaryColor}"></i>
|
||||
<view class="f-title c-title text-bold mt-md">种子简介</view>
|
||||
<view class="flex-warp mt-md">
|
||||
<view>种子名称</view>
|
||||
<view class="max">{{detail.title}}</view>
|
||||
</view>
|
||||
<view class="flex-warp mt-md">
|
||||
<view>预估产量</view>
|
||||
<view class="max">{{detail.output_value}}kg/m²</view>
|
||||
</view>
|
||||
<view class="flex-warp mt-md">
|
||||
<view>播种季节</view>
|
||||
<view class="max">
|
||||
<block v-for="(item,index) in detail.month" :key="index">
|
||||
{{index!=0?'、':''}}{{`${item}月`}}
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-warp mt-md">
|
||||
<view>播种面积</view>
|
||||
<view class="max">{{detail.area}}/m²</view>
|
||||
</view>
|
||||
<view class="flex-warp mt-md">
|
||||
<view>生长周期</view>
|
||||
<view class="max">{{detail.grow_cycle}}天</view>
|
||||
</view>
|
||||
<view class="flex-warp mt-md">
|
||||
<view>采摘周期</view>
|
||||
<view class="max">{{detail.picking_cycle}}天</view>
|
||||
</view>
|
||||
<view class="flex-warp mt-md">
|
||||
<view>种植周期</view>
|
||||
<view class="max">{{detail.seed_cycle}}天</view>
|
||||
</view>
|
||||
<view class="flex-warp mt-md">
|
||||
<view>种子价格</view>
|
||||
<view class="max">¥{{detail.seed_price}}</view>
|
||||
</view>
|
||||
<!--
|
||||
<view class="f-title c-title text-bold mt-lg pb-lg">溯源信息</view>
|
||||
<timeline :list="detail.source.stage" :info="detail" type="stage"></timeline> -->
|
||||
</view>
|
||||
|
||||
<view class="space-footer"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
} from "vuex"
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
detail: {},
|
||||
}
|
||||
},
|
||||
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()
|
||||
},
|
||||
methods: {
|
||||
async initIndex() {
|
||||
let {
|
||||
id,
|
||||
land_id
|
||||
} = this.options
|
||||
this.detail = await this.$api.land.seedInfo({
|
||||
id,
|
||||
land_id
|
||||
})
|
||||
this.$util.hideAll()
|
||||
},
|
||||
initRefresh() {
|
||||
this.initIndex()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.land-seed-detail {
|
||||
|
||||
.seed-info {
|
||||
width: 100%;
|
||||
top: 690rpx;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
|
||||
.icon-seed {
|
||||
font-size: 95rpx;
|
||||
}
|
||||
|
||||
.max {
|
||||
max-width: 528rpx;
|
||||
margin-left: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
202
uniapp/uni-app/land/pages/seed/list.vue
Normal file
202
uniapp/uni-app/land/pages/seed/list.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<view class="land-seed-list">
|
||||
|
||||
<fixed>
|
||||
<view class="flex-between fill-base pd-lg">
|
||||
<view style="width: 440rpx">
|
||||
<uni-segmented-control :current="activeIndex" :values="tabList"
|
||||
@clickItem="handerTabChange($event,'activeIndex')" style-type="button"
|
||||
:active-color="primaryColor">
|
||||
</uni-segmented-control>
|
||||
</view>
|
||||
|
||||
<view @tap.stop="handerTabChange($event,'season')" class="season-item flex-center f-desc c-base radius"
|
||||
:class="[{'c-title':!param.season}]" :style="{background:param.season?primaryColor:'#eddbba'}">
|
||||
当前季节
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</fixed>
|
||||
|
||||
<view @tap.stop="goDetail(index)" class="item-child rel mt-md ml-md mr-md pd-lg fill-base radius-24 box-shadow"
|
||||
v-for="(item,index) in list.data" :key="index">
|
||||
<view class="flex-center">
|
||||
<image mode="aspectFill" lazy-load class="goods-img radius-24" :src="item.imgs[0]"></image>
|
||||
<view class="flex-1 ml-md">
|
||||
<view class="goods-title f-title c-title text-bold ellipsis">{{item.title}}</view>
|
||||
<view class="f-title c-warning mt-sm"> ¥{{item.seed_price}} </view>
|
||||
<view class="goods-title f-caption c-caption ellipsis">
|
||||
预估产量:{{item.output_value}}kg/㎡
|
||||
<text class="ml-md">播种面积:{{item.area}}㎡</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="more-btn abs flex-center c-warning">
|
||||
<view class="flex-y-baseline">
|
||||
<view>查看更多</view>
|
||||
<i class="iconfont icon-right"></i>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
|
||||
</load-more>
|
||||
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
|
||||
|
||||
<view class="space-footer"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from "vuex"
|
||||
import uniSegmentedControl from "@/components/uni-segmented-control.vue"
|
||||
export default {
|
||||
components: {
|
||||
uniSegmentedControl
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
tabList: [{
|
||||
id: 1,
|
||||
title: '综合排序'
|
||||
}, {
|
||||
id: 2,
|
||||
title: '种植最多'
|
||||
}],
|
||||
activeIndex: 0,
|
||||
param: {
|
||||
page: 1,
|
||||
season: 0
|
||||
},
|
||||
list: {
|
||||
data: []
|
||||
},
|
||||
loading: true,
|
||||
lockTap: false,
|
||||
popupInfo: {}
|
||||
}
|
||||
},
|
||||
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()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.list.current_page >= this.list.last_page || this.loading) return
|
||||
this.param.page = this.param.page + 1
|
||||
this.loading = true
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['updateUserItem']),
|
||||
initIndex() {
|
||||
this.getList()
|
||||
},
|
||||
initRefresh() {
|
||||
this.param.page = 1
|
||||
this.initIndex()
|
||||
},
|
||||
handerTabChange(index, key) {
|
||||
if (key == 'season') {
|
||||
this.param[key] = this.param[key] == 1 ? 0 : 1
|
||||
} else {
|
||||
this[key] = index
|
||||
}
|
||||
this.$util.showLoading()
|
||||
this.param.page = 1
|
||||
this.list.data = []
|
||||
this.getList()
|
||||
},
|
||||
async getList() {
|
||||
let {
|
||||
list: oldList,
|
||||
activeIndex,
|
||||
tabList,
|
||||
} = this
|
||||
let {
|
||||
id: land_id
|
||||
} = this.options
|
||||
let {
|
||||
id: sort
|
||||
} = tabList[activeIndex]
|
||||
let param = Object.assign({}, this.param, {
|
||||
land_id,
|
||||
sort
|
||||
});
|
||||
let newList = await this.$api.land.seedList(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()
|
||||
},
|
||||
goDetail(index) {
|
||||
let {
|
||||
id
|
||||
} = this.list.data[index]
|
||||
let {
|
||||
id: land_id
|
||||
} = this.options
|
||||
let url = `/land/pages/seed/detail?id=${id}&land_id=${land_id}`
|
||||
this.$util.goUrl({
|
||||
url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.land-seed-list {
|
||||
.season-item {
|
||||
width: 220rpx;
|
||||
height: 54rpx;
|
||||
}
|
||||
|
||||
.item-child {
|
||||
.goods-img {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.goods-title {
|
||||
max-width: 470rpx;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 122rpx;
|
||||
height: 46rpx;
|
||||
font-size: 20rpx;
|
||||
background: #FDEDE0;
|
||||
border-radius: 0 25rpx 0 15rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user