<template>
|
<view class="index">
|
<!-- 接单方 -->
|
<view class="index-j" v-if="typeViewId === 1">
|
<view class="index-j-head">
|
<view :style="{ width: '100%', height: statusbarHeight + 'px' }"></view>
|
<view class="index-c-title" :style="{ height: navHeight + 'px' }">
|
<text>接单大厅</text>
|
</view>
|
</view>
|
<view class="search" :style="{ top: statusbarHeight + navHeight + 'px' }">
|
<view class="index-j-cate">
|
<view class="index-j-cate-item" v-for="(item, index) in searchType" :key="index" @click="clickCate(item.id)">
|
<text :style="{ color: typeVal === item.id ? '##222222' : '' }">{{item.name}}</text>
|
<view class="index-j-cate-item-x" v-if="typeVal === item.id"></view>
|
</view>
|
</view>
|
<view class="index-j-search">
|
<view class="index-j-search-item active">最新发布</view>
|
<view class="index-j-search-item">距离优先</view>
|
<view class="index-j-search-item">价格从高到低</view>
|
</view>
|
</view>
|
<view class="index-j-list">
|
<view class="index-list-item" v-for="(item, index) in orderList" :key="index">
|
<view class="index-list-item-head">
|
<view class="index-list-item-head-l">
|
<view class="xoam"></view>
|
<text v-if="item.type === 0 && item.workType === 0">用工单 - 采摘工</text>
|
<text v-else-if="item.type === 0 && item.workType === 1">用工单 - 分拣工</text>
|
<text v-else-if="item.type === 0 && item.workType === 2">用工单 - 包装工</text>
|
|
<text v-else-if="item.type === 1">运货单-{{item.categoryName}}-{{item.carUnit}}</text>
|
|
<text v-else-if="item.type === 2">订餐单</text>
|
</view>
|
<view class="index-list-item-head-r">距离 {{item.distance}}km</view>
|
</view>
|
<view class="index-list-item-info" v-if="item.type === 0 && item.workType === 0">
|
{{item.categoryName}}｜{{item.priceNum1}}斤
|
</view>
|
<view class="index-list-item-info" v-if="item.type === 0 && item.workType === 1">
|
{{item.categoryName}}｜{{item.priceNum1}}斤
|
</view>
|
<view class="index-list-item-info" v-if="item.type === 0 && item.workType === 2">
|
{{item.categoryName}}｜{{item.priceNum1}}斤
|
</view>
|
<view class="index-list-item-info" v-if="item.type === 1">
|
{{item.categoryName}}｜{{item.priceNum1}}斤
|
</view>
|
<view class="index-list-item-info" v-if="item.type === 2">
|
{{item.wayInfoCopy}}
|
</view>
|
<view class="index-list-item-dz">
|
<image src="/static/icon/order_ic_location@2x.png" mode="widthFix"></image>
|
<text>{{item.location}}</text>
|
</view>
|
<view class="index-list-item-dz">
|
<image src="/static/icon/order_ic_time@2x.png" mode="widthFix"></image>
|
<text>{{item.startDate}} 至 {{item.endDate}}（{{item.priceNum1}}天）</text>
|
</view>
|
<view class="index-list-item-price">
|
<text>预估：</text>
|
<text>¥{{item.estimatedAccount / 100}}</text>
|
</view>
|
<view class="eidt">
|
<sunui-mverify @change="mverify($event, item.id)"></sunui-mverify>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 发单方 -->
|
<view class="index-c" v-if="typeViewId === 0">
|
<view :style="{ width: '100%', height: statusbarHeight + 'px' }"></view>
|
<view class="index-c-title" :style="{ height: navHeight + 'px' }" @click="selectAddress">
|
<text class="index-c-title-logo">近快</text>
|
<image class="dingwei" src="/static/icon/home_ic_location@2x.png" mode="widthFix"></image>
|
<text>西湖国际广场</text>
|
<image class="qu" src="/static/icon/home_ar_next@2x.png" mode="widthFix"></image>
|
</view>
|
|
<view class="index-c-cate">
|
<view
|
:class="typeId === item.id ? 'index-c-cate-item active' : 'index-c-cate-item'"
|
v-for="(item, index) in type"
|
:key="index"
|
@click="clickType(item.id)">
|
{{item.name}}
|
</view>
|
</view>
|
|
<!-- 订餐 -->
|
<template v-if="typeId === 2">
|
<view class="list">
|
<view class="list-item">
|
<view class="list-item-label">时间地点</view>
|
<view class="list-item-row" @click="show = true">
|
<view class="list-item-row-label">用餐日期<b>*</b></view>
|
<view class="list-item-row-val">
|
<text>{{ form.startDate ? form.startDate + ' 至 ' + form.endDate + '（' + form.days + '天）' : '请选择'}}</text>
|
<u-icon name="arrow-right" color="#111111" size="16"></u-icon>
|
</view>
|
</view>
|
<view class="list-item-row">
|
<view class="list-item-row-label">用餐时间<b>*</b></view>
|
<view class="list-item-row-radio">
|
<view class="radio-item" v-for="(item, index) in orderFood" :key="index">
|
<view class="radio-item-label">{{item.name}}</view>
|
<view class="radio-item-list">
|
<view class="radio-item-list-l">
|
<view :class="child.active ? 'radio-item-list-item active' : 'radio-item-list-item'" v-for="(child, childIndex) in item.list" :key="childIndex" @click="selectMenu(index, childIndex)">{{child.price}}元</view>
|
</view>
|
<view class="radio-item-list-data">
|
<text>份数：</text>
|
<input type="number" v-model="item.num" placeholder="请输入">
|
<text style="color: #999999;">份</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="list-item-row" @click="selectAddress(1)">
|
<view class="list-item-row-label">用餐地点<b>*</b></view>
|
<view class="list-item-row-val">
|
<text>{{form.address ? form.address : '请选择'}}</text>
|
<u-icon name="arrow-right" color="#111111" size="16"></u-icon>
|
</view>
|
</view>
|
<view class="list-item-row">
|
<view class="list-item-row-label">地点描述</view>
|
<view class="list-item-row-val">
|
<input type="text" v-model="form.locationRemark" placeholder="请输入" />
|
</view>
|
</view>
|
<view class="list-item-row" v-if="viewStatus">
|
<view class="list-item-row-label">需求补充</view>
|
<view class="list-item-row-val">
|
<textarea v-model="form.supplement" cols="30" rows="10" placeholder="请输入" maxlength="200"></textarea>
|
</view>
|
</view>
|
<view class="list-item-row" v-if="viewStatus">
|
<view class="list-item-row-label">图片</view>
|
<view class="list-item-row-upload">
|
<view class="upload-item" v-for="(item, index) in form.multifileList" :key="index">
|
<image :src="item.url" mode="widthFix"></image>
|
<image class="upload-item-dele" @click="form.multifileList.splice(index, 1)" src="/static/icon/ic_delete1@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="upload-item" @click="uploadImg">
|
<u-icon name="plus" color="#999999" size="24"></u-icon>
|
<text>点击上传</text>
|
</view>
|
</view>
|
</view>
|
<view class="list-item-zk" @click="viewStatus = !viewStatus">
|
<text>{{viewStatus ? '收起' : '补充需求'}}</text>
|
<u-icon :name="viewStatus ? 'arrow-up' : 'arrow-down'" color="#00BC12" size="16"></u-icon>
|
</view>
|
</view>
|
<view class="list-item">
|
<view class="list-item-label">联系人信息</view>
|
<view class="list-item-row">
|
<view class="list-item-row-label">联系人</view>
|
<view class="list-item-row-val">
|
<input type="text" v-model="form.linkName" placeholder="请输入" />
|
</view>
|
</view>
|
<view class="list-item-row">
|
<view class="list-item-row-label">联系电话<b>*</b></view>
|
<view class="list-item-row-val">
|
<input type="number" v-model="form.linkPhone" placeholder="请输入" maxlength="11" />
|
</view>
|
</view>
|
</view>
|
</view>
|
<view style="width: 100%; height: 214rpx;"></view>
|
<view class="footer">
|
<view class="footer-price">
|
<view class="footer-price-info">预估总费用</view>
|
<view class="footer-price-num">
|
<text>{{totalPrice}}</text>
|
<text>元</text>
|
</view>
|
</view>
|
<view class="box-hz-btn" :style="{ backgroundImage: 'url(' + btn + ')' }">
|
<view class="box-hz-btn-kf">客服</view>
|
<view class="box-hz-btn-next" @click="submit">下一步</view>
|
</view>
|
</view>
|
</template>
|
|
<view class="box" v-if="typeId !== 2">
|
<view class="box-hz" :style="{ minHeight: 'calc(100vh - env(safe-area-inset-bottom) - 94rpx - ' + ((navHeight + statusbarHeight) + 'px') + ')' }">
|
|
<!-- 用工 -->
|
<template v-if="typeId === 0">
|
<view class="box-hz-cate">
|
<view :class="form.workType === item.id ? 'box-hz-cate-item active' : 'box-hz-cate-item'" v-for="(item, index) in typeWork" :key="index" @click="clickTypeWork(item.id)">
|
<text>{{item.name}}</text>
|
<view class="box-hz-cate-item-x" v-if="form.workType === item.id"></view>
|
</view>
|
</view>
|
<view class="box-hz-list">
|
<view class="box-hz-list-item" @click="show = true">
|
<view class="box-hz-list-item-label"><text>用工时间：</text></view>
|
<view :class="form.startDate ? 'box-hz-list-item-val active' : 'box-hz-list-item-val'">
|
<view class="box-hz-list-item-val-left">
|
<image class="icon" src="/static/icon/ic_time@2x.png" mode="widthFix"></image>
|
<text>{{ form.startDate ? form.startDate + ' 至 ' + form.endDate : '请选择用工时间'}}</text>
|
</view>
|
<u-icon name="arrow-right" color="#111111" size="16"></u-icon>
|
</view>
|
</view>
|
<view class="box-hz-list-item" @click="selectAddress(1)">
|
<view class="box-hz-list-item-label"><text>用工地点：</text></view>
|
<view :class="form.location ? 'box-hz-list-item-val active' :'box-hz-list-item-val'">
|
<view class="box-hz-list-item-val-left">
|
<image class="icon" src="/static/icon/ic_location@2x.png" mode="widthFix"></image>
|
<text>{{form.location ? form.location : '请选择用工地点'}}</text>
|
</view>
|
<u-icon name="arrow-right" color="#111111" size="16"></u-icon>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<!-- 运货 -->
|
<template v-if="typeId === 1">
|
<view class="box-hz-cate">
|
<view :class="form.categoryId === item.id ? 'box-hz-cate-item active' : 'box-hz-cate-item'" v-for="(item, index) in car" :key="index" @click="clickCar(item)">
|
<text>{{item.name}}</text>
|
<view class="box-hz-cate-item-x" v-if="form.categoryId === item.id"></view>
|
</view>
|
</view>
|
<view class="box-hz-car">
|
<view class="box-hz-car-image">
|
<image :src="carImage" mode="widthFix"></image>
|
</view>
|
<view class="box-hz-car-info" v-if="carRemark">
|
{{carRemark || ''}}
|
</view>
|
</view>
|
<view class="box-hz-list">
|
<view class="box-hz-list-item" @click="show = true">
|
<view class="box-hz-list-item-label"><text>用车时间：</text></view>
|
<view :class="form.startDate ? 'box-hz-list-item-val active' : 'box-hz-list-item-val'">
|
<view class="box-hz-list-item-val-left">
|
<image class="icon" src="/static/icon/ic_time@2x.png" mode="widthFix"></image>
|
<text>{{ form.startDate ? form.startDate + ' 至 ' + form.endDate : '请选择用工时间'}}</text>
|
</view>
|
<u-icon name="arrow-right" color="#111111" size="16"></u-icon>
|
</view>
|
</view>
|
<view class="box-hz-list-item">
|
<view class="box-hz-list-item-label">
|
<text>用车时间：</text>
|
<text @click="addAddr">+增加途经点</text>
|
</view>
|
<view class="item-d">
|
<view class="item-d-row" @click="selectAddress(2)">
|
<view class="item-d-row-icon">
|
<image src="/static/icon/ic_qidian@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="item-d-row-val">
|
<text>{{form.address ? form.address : '请选择用车起点'}}</text>
|
<u-icon name="arrow-right" color="#111111" size="16"></u-icon>
|
</view>
|
</view>
|
<view class="item-d-row" v-for="(item, index) in form.wayInfoDTOList" :key="index" @click="selectAddress(4, index)">
|
<view class="item-d-row-icon">
|
<image src="/static/icon/ic_jingguo@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="item-d-row-val">
|
<text>{{item.location ? item.location : '请选择途经地点'}}</text>
|
<view style="display: flex; align-items: center; flex-shrink: 0;">
|
<image src="/static/icon/ic_delete@2x.png" style="margin-right: 22rpx; width: 32rpx; height: 32rpx;" @click.stop="form.wayInfoDTOList.splice(index, 1)" mode="widthFix"></image>
|
<u-icon name="arrow-right" color="#111111" size="16"></u-icon>
|
</view>
|
</view>
|
</view>
|
<view class="item-d-row" @click="selectAddress(3)">
|
<view class="item-d-row-icon">
|
<image src="/static/icon/ic_zhongdian@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="item-d-row-val">
|
<text>{{form.locationEnd ? form.locationEnd : '请选择用车终点'}}</text>
|
<u-icon name="arrow-right" color="#111111" size="16"></u-icon>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<view class="box-hz-btn" :style="{ backgroundImage: 'url(' + btn + ')' }">
|
<view class="box-hz-btn-kf">客服</view>
|
<view class="box-hz-btn-next" @click="jump()">下一步</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 选择日期范围 -->
|
<u-calendar :show="show" color="#00BC12" mode="range" @close="show = false" @confirm="confirmDate"></u-calendar>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
import sunuiMverify from '@/components/sunui-mverify/sunui-mverify.vue';
|
export default {
|
components: { sunuiMverify },
|
computed: {
|
...mapState(['navHeight', 'statusbarHeight','userInfo','token','openid']),
|
totalPrice() {
|
return this.form.estimatedAccount / 100
|
}
|
},
|
onShow(options) {
|
this.typeViewId = 0
|
if(this.token && this.token != '' && this.userInfo && JSON.stringify(this.userInfo) != '{}'){
|
this.isLogin = true
|
}
|
if (this.userInfo && this.userInfo.useIdentity == 1) {
|
this.typeViewId = 1
|
}
|
},
|
data() {
|
return {
|
show: false,
|
isLogin: false,
|
typeId: 0,
|
type: [
|
{ name: '用工', id: 0 },
|
{ name: '运货', id: 1 },
|
{ name: '订餐', id: 2 }
|
],
|
searchType: [
|
{ name: '全部', id: '' },
|
{ name: '用工', id: 0 },
|
{ name: '运货', id: 1 },
|
{ name: '订餐', id: 2 }
|
],
|
typeWork: [
|
{ name: '采摘工', id: 0 },
|
{ name: '分拣工', id: 1 },
|
{ name: '包装工', id: 2 }
|
],
|
car: [],
|
btn: require('@/static/image/btn.png'),
|
typeViewId: 0,
|
carImage: '',
|
carRemark: '',
|
|
orderFood: [],
|
viewStatus: false,
|
|
form: {
|
startDate: '',
|
endDate: '',
|
latitude: '',
|
longitude: '',
|
location: '',
|
locationEnd: '',
|
wayInfoDTOList: [],
|
workType: 0,
|
categoryId: '',
|
categoryName: '',
|
days: '',
|
locationRemark: '',
|
supplement: '',
|
multifileList: [],
|
linkName: '',
|
linkPhone: '',
|
estimatedAccount: '',
|
price: ''
|
},
|
|
orderList: [],
|
typeVal: '',
|
page: 1
|
}
|
},
|
onLoad() {
|
this.getCategoryLists()
|
this.getOrderList()
|
this.form.linkPhone = this.userInfo.telephone
|
},
|
watch: {
|
typeId: {
|
handler(news, old) {
|
this.form = {
|
startDate: '',
|
endDate: '',
|
latitude: '',
|
longitude: '',
|
location: '',
|
locationEnd: '',
|
wayInfoDTOList: [],
|
workType: 0,
|
categoryId: '',
|
categoryName: '',
|
days: '',
|
locationRemark: '',
|
supplement: '',
|
multifileList: [],
|
linkName: '',
|
linkPhone: '',
|
estimatedAccount: '',
|
price: ''
|
}
|
this.viewStatus = false
|
this.carImage = ''
|
this.carRemark = ''
|
}
|
},
|
orderFood: {
|
deep: true,
|
handler(news, old) {
|
let price = 0
|
news.forEach(item => {
|
let num = 0
|
item.list.forEach(child => {
|
if (child.active) {
|
num = Number(child.price)
|
}
|
})
|
if (item.num && num > 0) {
|
price += num * item.num
|
}
|
})
|
this.form.price = price
|
}
|
},
|
'form.price': {
|
handler(news, old) {
|
if (news > 0) {
|
this.getPrice()
|
}
|
}
|
}
|
},
|
methods: {
|
clickCate(id) {
|
this.typeVal = id
|
this.page = 1
|
this.list = []
|
this.getOrderList()
|
},
|
// 订单分页
|
getOrderList() {
|
this.$u.api.orderPage({
|
capacity: 10,
|
page: this.page,
|
model: {
|
queryMyOrderType: 2,
|
type: this.typeVal
|
}
|
}).then(res => {
|
res.data.records.forEach(item => {
|
// 订餐单
|
if (item.type === 2) {
|
item.wayInfoCopy = JSON.parse(item.wayInfo).map(item => {
|
return `${item.name}${item.price / 100}元(${item.num}份)`
|
}).join(' | ')
|
}
|
})
|
console.log(res.data.records)
|
this.orderList = [...this.orderList, ...res.data.records]
|
})
|
},
|
// 提交订单
|
submit() {
|
if (!this.form.startDate) {
|
return uni.showToast({ title: '请选择用餐时间', icon: 'none' })
|
}
|
if (this.form.price === 0) {
|
return uni.showToast({ title: '请选择用餐时间', icon: 'none' })
|
}
|
if (!this.form.address) {
|
return uni.showToast({ title: '请选择用餐地点', icon: 'none' })
|
}
|
if (!this.form.linkPhone) {
|
return uni.showToast({ title: '请输入联系电话', icon: 'none' })
|
}
|
let cateringDTOList = []
|
this.orderFood.forEach(item => {
|
item.list.forEach(child => {
|
if (child.active) {
|
cateringDTOList.push({
|
name: item.name,
|
num: item.num,
|
price: (Number(child.price) * Number(item.num)) * 100
|
})
|
}
|
})
|
})
|
this.$u.api.release({
|
...this.form,
|
type: 2,
|
price: Number(this.form.price) * 100,
|
priceNum1: this.form.days,
|
location: this.form.address,
|
lat: this.form.latitude,
|
lgt: this.form.longitude,
|
cateringDTOList
|
}).then(res => {
|
if (res.code == 200) {
|
wx.requestPayment({
|
timeStamp: res.data.object.timeStamp,
|
nonceStr: res.data.object.nonceStr,
|
package: res.data.object.packageVal,
|
signType: res.data.object.signType,
|
paySign: res.data.object.paySign,
|
success (res1) {
|
if (res1.errMsg = 'requestPayment:ok') {
|
uni.showToast({ title: '支付成功', icon: 'success', duration: 2000 });
|
setTimeout(() => {
|
uni.navigateTo({
|
url: `/pages/success/success?orderId=${res.data.id}`
|
})
|
}, 1500)
|
}
|
},
|
fail(err) {
|
console.log(err)
|
}
|
})
|
}
|
})
|
console.log(cateringDTOList)
|
},
|
uploadImg() {
|
uni.chooseImage({
|
success: (chooseImageRes) => {
|
const tempFilePaths = chooseImageRes.tempFilePaths;
|
uni.uploadFile({
|
url: this.$baseUrl + '/web/public/upload',
|
filePath: tempFilePaths[0],
|
name: 'file',
|
formData: {
|
'folder': 'orders'
|
},
|
success: (uploadFileRes) => {
|
const res = JSON.parse(uploadFileRes.data)
|
this.form.multifileList.push({
|
fileurl: res.data.imgaddr,
|
name: res.data.originname,
|
url: res.data.url,
|
type: 0
|
})
|
}
|
});
|
}
|
});
|
},
|
// 计算金额
|
getPrice() {
|
var that = this
|
if (that.form.price && that.form.days) {
|
that.$u.api.getTotal({
|
price: Number(that.form.price) * 100,
|
priceNum1: that.form.days,
|
type: 2
|
}).then(res => {
|
that.form.estimatedAccount = res.data
|
})
|
}
|
},
|
addAddr() {
|
this.form.wayInfoDTOList.push({
|
lat: '',
|
lgt: '',
|
location: ''
|
})
|
},
|
confirmDate(e) {
|
this.form.startDate = e[0]
|
this.form.endDate = e[e.length - 1]
|
this.form.days = e.length;
|
this.show = false
|
if (this.typeId === 2) {
|
this.getPrice()
|
}
|
},
|
selectAddress(type, index) {
|
uni.chooseLocation({
|
success: (res) => {
|
if ([1,2].includes(type)) {
|
this.form.latitude = res.latitude
|
this.form.longitude = res.longitude
|
this.form.address = res.address
|
} else if (type === 3) {
|
this.form.locationEnd = res.address
|
this.form.latEnd = res.latitude
|
this.form.lgtEnd = res.longitude
|
} else if (type === 4) {
|
this.form.wayInfoDTOList[0].lat = res.latitude
|
this.form.wayInfoDTOList[0].lgt = res.longitude
|
this.form.wayInfoDTOList[0].location = res.address
|
}
|
}
|
});
|
},
|
clickType(e) {
|
this.typeId = e
|
},
|
clickTypeWork(e) {
|
this.form.workType = e
|
},
|
clickCar(item) {
|
this.form.categoryId = item.id
|
this.form.categoryName = item.name
|
this.carImage = item.iconFull
|
this.carRemark = item.remark
|
},
|
jump() {
|
if(!this.userInfo || !this.token){
|
uni.navigateTo({
|
url: '/pages/login/login'
|
})
|
return
|
}
|
|
const { form } = this;
|
|
// 用工
|
if (this.typeId === 0) {
|
|
if (!form.startDate || !form.endDate) {
|
return uni.showToast({ title: '请选择用工时间', icon: 'none' })
|
} else if (!form.latitude || !form.longitude) {
|
return uni.showToast({ title: '请选择用工地点', icon: 'none' })
|
}
|
|
// 采摘工
|
if (this.form.workType === 0) {
|
uni.navigateTo({
|
url: `/pages/using-workers/using-workers?days=${form.days}&startDate=${form.startDate}&endDate=${form.endDate}&latitude=${form.latitude}&longitude=${form.longitude}&address=${form.location}&workType=${form.workType}`
|
})
|
// 分拣工
|
} else if (this.form.workType === 1) {
|
uni.navigateTo({
|
url: `/pages/sorting/sorting?days=${form.days}&startDate=${form.startDate}&endDate=${form.endDate}&latitude=${form.latitude}&longitude=${form.longitude}&address=${form.location}&workType=${form.workType}`
|
})
|
// 包装工
|
} else if (this.form.workType === 2) {
|
uni.navigateTo({
|
url: `/pages/packaging-worker/packaging-worker?days=${form.days}&startDate=${form.startDate}&endDate=${form.endDate}&latitude=${form.latitude}&longitude=${form.longitude}&address=${form.location}&workType=${form.workType}`
|
})
|
}
|
// 运货
|
} else if (this.typeId === 1) {
|
|
if (!form.startDate || !form.endDate) {
|
return uni.showToast({ title: '请选择用车时间', icon: 'none' })
|
} else if (!form.latitude || !form.longitude) {
|
return uni.showToast({ title: '请选择用车起点', icon: 'none' })
|
} else if (!form.latEnd || !form.lgtEnd) {
|
return uni.showToast({ title: '请选择用车终点', icon: 'none' })
|
}
|
|
let carData = {
|
startDate: form.startDate,
|
endDate: form.endDate,
|
lat: form.latitude,
|
lgt: form.longitude,
|
location: form.address,
|
latEnd: form.latEnd,
|
lgtEnd: form.lgtEnd,
|
locationEnd: form.locationEnd,
|
wayInfoDTOList: form.wayInfoDTOList,
|
categoryId: form.categoryId,
|
categoryName: form.categoryName,
|
days: form.days
|
}
|
|
uni.setStorageSync('carData', carData);
|
|
uni.navigateTo({
|
url: `/pages/freight/freight`
|
})
|
}
|
},
|
mverify(e, id){
|
console.log('验证结果:', e, id);
|
},
|
// 选择套餐
|
selectMenu(a, b) {
|
this.orderFood.forEach((item, index) => {
|
if (index === a) {
|
item.list.forEach((child, childIndex) => {
|
child.active = b === childIndex
|
})
|
}
|
})
|
},
|
getCategoryLists() {
|
this.$u.api.getCategoryList({ type: 1 })
|
.then(res => {
|
this.car = res.data
|
this.form.categoryId = res.data[0].id
|
this.form.categoryName = res.data[0].name
|
this.carRemark = res.data[0].remark
|
this.carImage = res.data[0].iconFull
|
})
|
this.$u.api.getCategoryList({ type: 2 })
|
.then(res => {
|
res.data.forEach(item => {
|
item.num = ''
|
item.list = item.detailList.map(child => {
|
return {
|
active: false,
|
price: child
|
}
|
})
|
})
|
this.orderFood = res.data
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background: #F7F7F7;
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.index {
|
width: 100%;
|
.index-j {
|
width: 100%;
|
.index-j-head {
|
width: 100%;
|
background-color: #ffffff;
|
position: sticky;
|
top: 0;
|
left: 0;
|
z-index: 999;
|
.index-c-title {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
text {
|
font-weight: bold;
|
font-size: 36rpx;
|
color: #111111;
|
}
|
}
|
}
|
.search {
|
width: 100%;
|
position: sticky;
|
left: 0;
|
z-index: 999;
|
.index-j-cate {
|
width: 100%;
|
height: 110rpx;
|
display: flex;
|
background-color: #ffffff;
|
align-items: center;
|
border-bottom: 1rpx solid #E5E5E5;
|
.index-j-cate-item {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
text {
|
font-weight: 400;
|
font-size: 32rpx;
|
color: #666666;
|
}
|
.index-j-cate-item-x {
|
position: absolute;
|
bottom: 0;
|
left: 50%;
|
transform: translate(-50%, 0);
|
width: 40rpx;
|
height: 6rpx;
|
background: #00BC12;
|
border-radius: 3rpx;
|
}
|
}
|
}
|
.index-j-search {
|
width: 100%;
|
height: 96rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
display: flex;
|
align-items: center;
|
.active {
|
background: rgba(91,190,56,0.08) !important;
|
font-weight: 400 !important;
|
font-size: 26rpx !important;
|
color: #4DB02B !important;
|
}
|
.index-j-search-item {
|
padding: 10rpx 20rpx;
|
box-sizing: border-box;
|
background: #F7F7F7;
|
border-radius: 28rpx;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #666666;
|
margin-right: 24rpx;
|
}
|
}
|
}
|
.index-j-list {
|
width: 100%;
|
padding: 24rpx 30rpx;
|
box-sizing: border-box;
|
.index-list-item {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
border-radius: 20rpx;
|
margin-bottom: 20rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.eidt {
|
width: 100%;
|
height: 100rpx;
|
padding: 6rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
// background: #00BC12;
|
// border-radius: 50rpx;
|
// text {
|
// font-weight: 500;
|
// font-size: 36rpx;
|
// color: #FFFFFF;
|
// }
|
}
|
.index-list-item-price {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20rpx;
|
text {
|
&:nth-child(1) {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #333333;
|
}
|
&:nth-child(2) {
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #FF0000;
|
}
|
}
|
}
|
.index-list-item-dz {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20rpx;
|
image {
|
width: 32rpx;
|
height: 32rpx;
|
flex-shrink: 0;
|
margin-right: 16rpx;
|
}
|
text {
|
flex: 1;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
}
|
}
|
.index-list-item-info {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #888888;
|
margin-bottom: 20rpx;
|
}
|
.address {
|
width: 100%;
|
background: #F7F7F7;
|
border-radius: 16rpx;
|
padding: 30rpx;
|
box-sizing: border-box;
|
margin-bottom: 24rpx;
|
position: relative;
|
.address-xian {
|
position: absolute;
|
top: 17px;
|
left: 24px;
|
width: 1rpx;
|
height: calc(100% - 60rpx);
|
border-right: 2rpx dashed #B2B2B2;
|
}
|
.address-row {
|
position: relative;
|
z-index: 2;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 30rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
image {
|
width: 36rpx;
|
height: 36rpx;
|
flex-shrink: 0;
|
margin-right: 24rpx;
|
}
|
text {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
}
|
}
|
}
|
.index-list-item-date {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20rpx;
|
image {
|
flex-shrink: 0;
|
width: 28rpx;
|
height: 28rpx;
|
margin-right: 18rpx;
|
}
|
text {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
}
|
}
|
.index-list-item-head {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 20rpx;
|
.index-list-item-head-l {
|
display: flex;
|
align-items: center;
|
.xoam {
|
width: 6rpx;
|
height: 30rpx;
|
background: #00BC12;
|
border-radius: 4rpx;
|
margin-right: 20rpx;
|
}
|
text {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
}
|
}
|
.index-list-item-head-r {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #888888;
|
}
|
}
|
}
|
}
|
}
|
.index-c {
|
width: 100%;
|
height: 520rpx;
|
background: linear-gradient(#00BC12 0%, #00BC12 83%, #ffffff 100%);
|
.index-c-title {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
.index-c-title-logo {
|
font-weight: bold;
|
font-size: 40rpx;
|
color: #FFFFFF;
|
margin-right: 30rpx;
|
}
|
.dingwei {
|
width: 36rpx;
|
height: 36rpx;
|
margin-right: 8rpx;
|
}
|
text {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #ffffff;
|
margin-right: 12rpx;
|
}
|
.qu {
|
width: 22rpx;
|
height: 22rpx;
|
}
|
}
|
.list {
|
width: 100%;
|
display: flex;
|
padding: 0 30rpx 30rpx 30rpx;
|
box-sizing: border-box;
|
flex-direction: column;
|
margin-top: 26rpx;
|
.list-item {
|
width: 100%;
|
padding: 40rpx 30rpx;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
border-radius: 20rpx;
|
margin-bottom: 20rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.list-item-label {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
margin-bottom: 28rpx;
|
}
|
.list-item-zk {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
text {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #00BC12;
|
margin-right: 8rpx;
|
}
|
}
|
.list-item-row {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
border-bottom: 1rpx solid #E5E5E5;
|
margin-bottom: 30rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.list-item-row-label {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #666666;
|
display: flex;
|
align-items: center;
|
b {
|
color: red;
|
}
|
}
|
.list-item-row-user {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.user-item {
|
width: 100%;
|
padding: 30rpx 0;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
margin-bottom: 30rpx;
|
justify-content: space-between;
|
border-bottom: 1rpx solid #E5E5E5;
|
&:last-child {
|
margin: 0 !important;
|
}
|
text {
|
flex-shrink: 0;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #333333;
|
}
|
input {
|
flex: 1;
|
text-align: center;
|
margin: 0 30rpx;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
}
|
}
|
.list-item-row-radio {
|
width: 100%;
|
display: flex;
|
padding: 30rpx 0;
|
box-sizing: border-box;
|
flex-direction: column;
|
border-bottom: 1rpx solid #E5E5E5;
|
.radio-item {
|
width: 100%;
|
display: flex;
|
align-items: self-end;
|
margin-bottom: 30rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.radio-item-label {
|
width: 200rpx;
|
flex-shrink: 0;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #111111;
|
}
|
.radio-item-list {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
.radio-item-list-l {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
.active {
|
background: #00BC12 !important;
|
color: #ffffff !important;
|
}
|
.radio-item-list-item {
|
width: 124rpx;
|
height: 72rpx;
|
line-height: 72rpx;
|
text-align: center;
|
background: #EEEEEE;
|
border-radius: 36rpx;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #111111;
|
margin-top: 30rpx;
|
&:nth-child(1) {
|
margin-top: 0 !important;
|
}
|
&:nth-child(2) {
|
margin-top: 0 !important;
|
}
|
&:nth-child(3) {
|
margin-top: 0 !important;
|
}
|
}
|
}
|
.radio-item-list-data {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
margin-top: 42rpx;
|
text {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #333333;
|
}
|
input {
|
width: 100rpx;
|
font-weight: bold;
|
font-size: 30rpx;
|
color: #222222;
|
text-align: right;
|
margin: 0 30rpx;
|
&::-webkit-input-placeholder {
|
color: #999999;
|
font-weight: 400;
|
}
|
}
|
}
|
}
|
}
|
}
|
.list-item-row-upload {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
padding: 30rpx 0;
|
box-sizing: border-box;
|
.upload-item {
|
width: 156rpx;
|
height: 156rpx;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
justify-content: center;
|
background: #F8F9FB;
|
border-radius: 8rpx;
|
margin-right: 20rpx;
|
border: 2rpx solid #EEEEEE;
|
position: relative;
|
&:last-child {
|
margin: 0 !important;
|
}
|
image {
|
width: 100%;
|
}
|
text {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #666666;
|
margin-top: 16rpx;
|
}
|
.upload-item-dele {
|
position: absolute;
|
top: -20rpx;
|
right: -20rpx;
|
width: 40rpx;
|
height: 40rpx;
|
z-index: 9;
|
}
|
}
|
}
|
.list-item-row-val {
|
width: 100%;
|
padding: 30rpx 0;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
text {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #111111;
|
}
|
input {
|
width: 100%;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
textarea {
|
width: 100%;
|
height: 90rpx;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #111111;
|
}
|
}
|
}
|
}
|
}
|
.index-c-cate {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-top: 28rpx;
|
.active {
|
background: #FFFFFF !important;
|
color: #5BBE38 !important;
|
}
|
.index-c-cate-item {
|
width: 128rpx;
|
height: 64rpx;
|
line-height: 64rpx;
|
text-align: center;
|
border-radius: 32rpx;
|
font-weight: 400;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
}
|
}
|
.footer {
|
width: 100%;
|
height: 214rpx;
|
padding: 20rpx 30rpx;
|
box-sizing: border-box;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
z-index: 9;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
background: #FFFFFF;
|
box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(0,0,0,0.06);
|
.footer-price {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.footer-price-info {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
.footer-price-num {
|
display: flex;
|
align-items: center;
|
text {
|
&:nth-child(1) {
|
font-weight: 500;
|
font-size: 40rpx;
|
color: #FF0000;
|
margin-right: 20rpx;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
}
|
}
|
}
|
.box-hz-btn {
|
width: 100%;
|
height: 88rpx;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.box-hz-btn-kf {
|
flex-shrink: 0;
|
width: 188rpx;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #8B2300;
|
}
|
.box-hz-btn-next {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
}
|
}
|
// .footer-bottom {
|
// width: 100%;
|
// display: flex;
|
// align-items: center;
|
// justify-content: space-between;
|
// .footer-bottom-kf {
|
// flex-shrink: 0;
|
// margin-right: 40rpx;
|
// display: flex;
|
// flex-direction: column;
|
// align-items: center;
|
// justify-content: center;
|
// image {
|
// width: 36rpx;
|
// height: 36rpx;
|
// }
|
// text {
|
// font-weight: 400;
|
// font-size: 24rpx;
|
// color: #222222;
|
// margin-top: 8rpx;
|
// }
|
// }
|
// .footer-bottom-btn {
|
// flex: 1;
|
// height: 88rpx;
|
// display: flex;
|
// align-items: center;
|
// justify-content: center;
|
// background: #00BC12;
|
// box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(91,190,56,0.16);
|
// border-radius: 44rpx;
|
// text {
|
// &:nth-child(1) {
|
// font-weight: 500;
|
// font-size: 32rpx;
|
// color: #FFFFFF;
|
// }
|
// &:nth-child(2) {
|
// font-weight: 500;
|
// font-size: 26rpx;
|
// color: #FFFFFF;
|
// }
|
// }
|
// }
|
// }
|
}
|
.box {
|
width: 100%;
|
padding: 0 30rpx 30rpx 30rpx;
|
box-sizing: border-box;
|
margin-top: 30rpx;
|
.box-hz {
|
width: 100%;
|
padding: 40rpx 30rpx;
|
border-radius: 20rpx;
|
box-sizing: border-box;
|
background-color: #FFFFFF;
|
.box-hz-car {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
margin-top: 24rpx;
|
margin-bottom: 40rpx;
|
.box-hz-car-image {
|
width: 432rpx;
|
height: 200rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
image {
|
width: 100%;
|
}
|
}
|
.box-hz-car-info {
|
width: 100%;
|
padding: 24rpx;
|
box-sizing: border-box;
|
background: #F7F7F7;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #666666;
|
border-radius: 16rpx;
|
margin-top: 30rpx;
|
}
|
}
|
.box-hz-cate {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 50rpx;
|
.active {
|
text {
|
font-weight: 600 !important;
|
font-size: 32rpx !important;
|
color: #222222 !important;
|
}
|
}
|
.box-hz-cate-item {
|
position: relative;
|
margin-right: 60rpx;
|
text {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #666666;
|
}
|
.box-hz-cate-item-x {
|
width: 40rpx;
|
height: 6rpx;
|
position: absolute;
|
bottom: -10rpx;
|
left: 50%;
|
transform: translate(-50%, 0);
|
background: #FF5A40;
|
border-radius: 3rpx;
|
}
|
}
|
}
|
.box-hz-list {
|
width: 100%;
|
.box-hz-list-item {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
margin-bottom: 40rpx;
|
.item-d {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
background: #FFFCF9;
|
border-radius: 16rpx;
|
border: 2rpx solid #FD9E24;
|
.item-d-row {
|
width: 100%;
|
// height: 100rpx;
|
height: auto;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.item-d-row-icon {
|
width: 36rpx;
|
height: 36rpx;
|
flex-shrink: 0;
|
margin-right: 24rpx;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.item-d-row-val {
|
flex: 1;
|
// height: 100%;
|
padding: 30rpx 0;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1rpx solid #E5E5E5;
|
text {
|
flex: 1;
|
font-weight: 400;
|
font-size: 32rpx;
|
color: #111111;
|
}
|
image {
|
flex-shrink: 0;
|
width: 30rpx;
|
height: 30rpx;
|
}
|
}
|
}
|
}
|
.box-hz-list-item-label {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 30rpx;
|
text {
|
&:nth-child(1) {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #666666;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #5BBE38;
|
}
|
}
|
}
|
.active {
|
background: rgba(91,190,56,0.06) !important;
|
border: 2rpx solid #5BBE38 !important;
|
}
|
.box-hz-list-item-val {
|
width: 100%;
|
height: 104rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
background: #FFFCF9;
|
border-radius: 16rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
border: 2rpx solid #FD9E24;
|
.box-hz-list-item-val-left {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
.icon {
|
width: 36rpx;
|
height: 36rpx;
|
margin-right: 24rpx;
|
flex-shrink: 0;
|
}
|
text {
|
flex: 1;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
font-weight: 400;
|
font-size: 32rpx;
|
color: #111111;
|
}
|
}
|
}
|
}
|
}
|
.list {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.list-label {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
}
|
}
|
.box-hz-btn {
|
width: 100%;
|
height: 88rpx;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.box-hz-btn-kf {
|
flex-shrink: 0;
|
width: 188rpx;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #8B2300;
|
}
|
.box-hz-btn-next {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
