1068 lines
32 KiB
Vue
1068 lines
32 KiB
Vue
<template>
|
||
<view class="claim-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.claim_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/${detail.pay_type*1+1 > item.pay_type ? item.img_name + '-fill' : item.img_name}.png`">
|
||
</image>
|
||
<view class="f-icontext c-caption mt-sm"
|
||
:style="{color:detail.pay_type*1+1>item.pay_type ? primaryColor : ''}">{{item.title}}</view>
|
||
</view>
|
||
<view class="status-line abs"></view>
|
||
</view>
|
||
<!-- <view class="order-video-info rel">
|
||
<image mode="aspectFill" lazy-load classload 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&&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 fill-base mt-md ml-md mr-md pl-lg pr-lg f-paragraph c-title box-shadow radius-24">
|
||
<view class="flex-warp pt-lg pb-lg">
|
||
<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-t">
|
||
<view class="text c-desc">认养项目</view>
|
||
<view class="flex-1 text-right">{{detail.goods_name}}</view>
|
||
</view>
|
||
<view class="flex-warp pt-lg pb-lg b-1px-t">
|
||
<view class="text c-desc">认养数量</view>
|
||
<view class="flex-1 text-right">x{{detail.num}}</view>
|
||
</view>
|
||
<view class="flex-between pt-lg pb-lg b-1px-t">
|
||
<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>{{`${detail.cycle}天`}}</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>
|
||
<block v-if="detail.discount_price*1>0 || detail.collage_discount_price*1>0">
|
||
<view class="flex-between pt-lg pb-lg b-1px-t">
|
||
<view class="text c-desc">应付金额</view>
|
||
<view>¥{{detail.init_price}}</view>
|
||
</view>
|
||
<view class="flex-between pt-lg pb-lg b-1px-t" v-if="detail.discount_price*1>0">
|
||
<view class="text c-desc">卡券优惠</view>
|
||
<view class="c-warning">-¥{{detail.discount_price}}</view>
|
||
</view>
|
||
<view class="flex-between pt-lg pb-lg b-1px-t" v-if="detail.collage_discount_price*1>0">
|
||
<view class="text c-desc">众筹优惠</view>
|
||
<view class="c-warning">-¥{{detail.collage_discount_price}}</view>
|
||
</view>
|
||
</block>
|
||
<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="fill-base mg-md pd-lg radius-24" v-if="detail.text">
|
||
<view class="f-paragraph c-title">
|
||
<view class="c-desc">订单备注</view>
|
||
<view class="mt-sm">
|
||
<text decode="emsp" style="word-break:break-all;">{{detail.text}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="fill-base mt-md ml-md mr-md pl-lg pr-lg f-paragraph c-title box-shadow radius-24">
|
||
<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">
|
||
<image mode="aspectFill" lazy-load class="seed-img radius-10" :src="detail.harvest_cover">
|
||
</image>
|
||
<view class="flex-1 ml-lg f-paragraph c-title ellipsis">{{detail.harvest_text}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fill-base mt-md ml-md mr-md pl-lg pr-lg f-paragraph c-title box-shadow radius-24">
|
||
<view class="pt-lg pb-lg f-title text-bold b-1px-b">认养取名</view>
|
||
<view class="pt-lg pb-lg">{{detail.name}}</view>
|
||
</view>
|
||
</block>
|
||
<block v-if="activeIndex == 1">
|
||
<view class="order-text-info fill-base pl-lg pr-lg f-paragraph c-title">
|
||
<view class="flex-warp pt-lg pb-lg">
|
||
<view class="text c-desc">配送周期</view>
|
||
<view class="flex-1 ml-md">{{detail.send_cycle}}，共{{detail.send_times}}次</view>
|
||
</view>
|
||
</view>
|
||
<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="activeIndex == 2">
|
||
<view @tap.stop="toBreedDetail(index)" class="order-item fill-base mg-big pd-lg radius-16 box-shadow"
|
||
:class="[{'mt-md':index!=0}]" v-for="(item,index) in list.data" :key="index">
|
||
<view class="flex-center" :class="[{'mt-md':aindex!=0}]" v-for="(aitem,aindex) in item.order_goods"
|
||
:key="aindex">
|
||
<image mode="aspectFill" lazy-load class="avatar radius-16" :src="aitem.goods_cover"></image>
|
||
<view class="flex-1 ml-lg">
|
||
<view class="f-paragraph c-title text-bold ellipsis" style="max-width: 498rpx;">
|
||
{{aitem.goods_name}}
|
||
</view>
|
||
<view class="flex-between f-desc c-caption mt-md">
|
||
<view class="f-paragraph c-warning"> ¥{{aitem.goods_price}} </view>
|
||
<view>x{{aitem.goods_num}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex-between f-paragraph mt-md pt-md b-1px-t">
|
||
<view class="c-desc max-380 ellipsis">订单编号 {{item.order_code}}</view>
|
||
<view class="flex-y-baseline c-title">总计：<view class="f-title c-warning">¥{{item.pay_price}}</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>
|
||
</block>
|
||
|
||
<block v-if="!options.farmer">
|
||
<view class="space-max-footer"
|
||
v-if="(activeIndex == 0 && detail.pay_type == 1) || (activeIndex == 1 && detail.can_send == 1 && list.send_count < detail.send_times) || (activeIndex == 2 && detail.pay_type > 1 && detail.can_send !=1) || (detail.pay_type == 7 && !detail.have_eva)">
|
||
</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="toSend" :text="[{type:'confirm',text:detail.send_type==1?'去农场自提':'我要配送'}]"
|
||
v-if="activeIndex == 1 && detail.can_send == 1 && list.send_count < detail.send_times && (!detail.is_collage || (detail.is_collage && detail.collage_status == 2))">
|
||
</fix-bottom-button>
|
||
|
||
<fix-bottom-button @confirm="toBreed" :text="[{type:'confirm',text:'养殖管理'}]"
|
||
v-if="activeIndex == 2 && detail.pay_type > 1 && detail.can_send !=1 && (!detail.is_collage || (detail.is_collage && detail.collage_status == 2))">
|
||
</fix-bottom-button>
|
||
|
||
<fix-bottom-button @confirm="toEvaluate" :text="[{type:'confirm',text:'去评价'}]"
|
||
v-if="detail.pay_type == 7 && !detail.have_eva">
|
||
</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">{{detail.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">{{detail.send_type==1?'自提地址':'收货地址'}}</view>
|
||
</view>
|
||
<view @tap.stop="toChooseAddr" class="flex-1 flex-between">
|
||
<view :class="[{'c-placeholder':detail.send_type == 2 && !address_info.id}]">
|
||
{{detail.send_type == 1 ? address_info.address : address_info.id ? `${address_info.address}${address_info.address_info}` : '请选择地址'}}
|
||
</view>
|
||
<i class="iconfont"
|
||
:class="[{'icon-dingwei':detail.send_type==1},{'icon-right':detail.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="detail.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}">
|
||
{{detail.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: {},
|
||
statusType: {
|
||
'-1': '已取消',
|
||
1: '待支付',
|
||
2: '认养中',
|
||
3: '配送中',
|
||
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',
|
||
pay_type: 1
|
||
}, {
|
||
id: 2,
|
||
title: '开始养殖',
|
||
img_name: 'breed',
|
||
pay_type: 2
|
||
}, {
|
||
id: 3,
|
||
title: '配送中',
|
||
img_name: 'distribution',
|
||
pay_type: 3
|
||
}, {
|
||
id: 4,
|
||
title: '已完成',
|
||
img_name: 'done',
|
||
pay_type: 4
|
||
}],
|
||
activeIndex: 0,
|
||
tabList: [{
|
||
id: 0,
|
||
title: '认养信息'
|
||
}, {
|
||
id: 1,
|
||
title: '配送信息',
|
||
number: 0
|
||
}, {
|
||
id: 2,
|
||
title: '养殖管理',
|
||
number: 0
|
||
}],
|
||
param: {
|
||
page: 1,
|
||
},
|
||
list: {
|
||
data: []
|
||
},
|
||
loading: true,
|
||
popupInfo: {},
|
||
lockTap: false,
|
||
address_info: {
|
||
id: 0,
|
||
address: ''
|
||
},
|
||
send_info: {
|
||
time_index: '',
|
||
time: {
|
||
date: '',
|
||
start_time: '',
|
||
end_time: ''
|
||
}
|
||
},
|
||
send_num: '',
|
||
user_name: '',
|
||
mobile: '',
|
||
text: ''
|
||
}
|
||
},
|
||
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*1
|
||
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.claim.orderInfo({
|
||
id
|
||
})
|
||
let {
|
||
send_type,
|
||
address_info,
|
||
farmer_info
|
||
} = data
|
||
let {
|
||
address
|
||
} = farmer_info
|
||
if (send_type == 1) {
|
||
data.address_info.id = 0
|
||
data.address_info.address = farmer_info.address
|
||
}
|
||
let {
|
||
type: send_tmpl_type
|
||
} = data.send_tmpl
|
||
data.send_tmpl_type = send_tmpl_type
|
||
this.detail = data
|
||
this.tabList[1].title = send_type == 1 ? '自提信息' : '配送信息'
|
||
this.address_info = this.address_info.id ? this.address_info : data.address_info
|
||
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.claim_order_id = id
|
||
let methodModel = activeIndex == 1 ? 'userSendOrderList' : 'breedOrderList'
|
||
let newList = await this.$api.claim[methodModel](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.claim[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.claim.claimRePayOrder({
|
||
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
|
||
} = this.list.data[index]
|
||
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
|
||
})
|
||
},
|
||
toChooseAddr() {
|
||
let {
|
||
send_type,
|
||
} = this.detail
|
||
if (send_type == 1) {
|
||
this.toMap()
|
||
return
|
||
}
|
||
this.$util.goUrl({
|
||
url: `/mine/pages/address/list?check=2`
|
||
})
|
||
},
|
||
toSend() {
|
||
let {
|
||
send_type,
|
||
address_info
|
||
} = this.$util.deepCopy(this.detail)
|
||
this.address_info = 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.send_num = ''
|
||
this.text = ''
|
||
this.$refs.send_item.open()
|
||
},
|
||
// 授权手机号
|
||
async toAuthPhone(e) {
|
||
let phone = await this.getAuthPhone({
|
||
e,
|
||
})
|
||
if (!phone) return
|
||
this.$nextTick(() => {
|
||
this.mobile = phone
|
||
})
|
||
},
|
||
// 自提/配送
|
||
async toSendOrder() {
|
||
let {
|
||
id: order_id,
|
||
send_type,
|
||
send_tmpl_type,
|
||
num
|
||
} = 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
|
||
|
||
let {
|
||
sendTitle,
|
||
timeTitle,
|
||
send_num,
|
||
user_name,
|
||
mobile,
|
||
text
|
||
} = this
|
||
|
||
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})))$/
|
||
this.$util.showToast({
|
||
title:`${send_num}`
|
||
})
|
||
if ((!send_num || !reg.test(send_num) || send_tmpl_type == 1 && send_num >
|
||
num)) {
|
||
this.$util.showToast({
|
||
title: !send_num ? `请输入${sendTitle[send_tmpl_type]}` : !reg.test(send_num) ?
|
||
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.claim.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.claim.sendOrderPayInfo(param)
|
||
this.$util.hideAll()
|
||
let orderInfo = Object.assign({}, param, {
|
||
pay_price,
|
||
page_type: 'claim_send'
|
||
});
|
||
this.updateOrderItem({
|
||
key: 'orderInfo',
|
||
val: orderInfo
|
||
})
|
||
this.$refs.send_item.close()
|
||
let url = `/mine/pages/pay`
|
||
this.$util.goUrl({
|
||
url
|
||
})
|
||
},
|
||
// 养殖管理
|
||
toBreed() {
|
||
let {
|
||
id
|
||
} = this.options
|
||
let {
|
||
farmer_id
|
||
} = this.detail
|
||
let url = `/claim/pages/order/breed/list?id=${id}&farmer_id=${farmer_id}`
|
||
this.$util.goUrl({
|
||
url
|
||
})
|
||
},
|
||
// 养殖详情
|
||
toBreedDetail(index) {
|
||
let {
|
||
id
|
||
} = this.list.data[index]
|
||
let url = `/claim/pages/order/breed/detail?id=${id}`
|
||
this.$util.goUrl({
|
||
url
|
||
})
|
||
},
|
||
// 去评价
|
||
toEvaluate() {
|
||
let {
|
||
id
|
||
} = this.detail
|
||
let url = `/mine/pages/evaluate/edit?id=${id}&type=claim`
|
||
this.$util.goUrl({
|
||
url
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
.claim-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>
|