<template>
|
<view class="index">
|
<view class="list">
|
<view class="list-item">
|
<view class="list-item-label">
|
<view class="list-item-label-x"></view>
|
<text>时间地点</text>
|
</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.priceNum1 + '天) ' : '请选择'}}</text>
|
<u-icon name="arrow-right" color="#111111" size="16"></u-icon>
|
</view>
|
</view>
|
<view class="list-item-row" @click="selectAddress()">
|
<view class="list-item-row-label">用工地点<b>*</b></view>
|
<view class="list-item-row-val">
|
<text>{{form.location ? form.location : '请选择'}}</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>
|
<view class="list-item">
|
<view class="list-item-label">
|
<view class="list-item-label-x"></view>
|
<text>需求</text>
|
</view>
|
<view class="list-item-row" @click="show1 = true">
|
<view class="list-item-row-label">分拣品种<b>*</b></view>
|
<view class="list-item-row-val">
|
<text>{{form.categoryName ? form.categoryName : '请选择'}}</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-val">
|
<input type="number" v-model="form.priceNum2" @blur="getPrice" placeholder="请输入" />
|
<text>人</text>
|
</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 class="list-item-label-x"></view>
|
<text>费用</text>
|
</view>
|
<view class="list-item-row">
|
<view class="list-item-row-label">天数</view>
|
<view class="list-item-row-val">
|
<input v-model="form.priceNum1" disabled @blur="getPrice" type="number" placeholder="请输入" />
|
<text>天</text>
|
</view>
|
</view>
|
<view class="list-item-row">
|
<view class="list-item-row-label">费用标准<b>*</b></view>
|
<view class="list-item-row-val">
|
<input v-model="form.price" type="number" @blur="getPrice" placeholder="请输入" />
|
<text>元/人/天</text>
|
</view>
|
</view>
|
</view>
|
<view class="list-item">
|
<view class="list-item-label">
|
<view class="list-item-label-x"></view>
|
<text>联系人信息</text>
|
<text class="list-item-label-info">默认发单方联系方式，可修改联系人</text>
|
</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="text" v-model="form.linkPhone" maxlength="11" placeholder="请补充" />
|
</view>
|
</view>
|
</view>
|
</view>
|
<view style="width: 100%; height: calc(214rpx + env(safe-area-inset-bottom));"></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="footer-bottom">
|
<div class="footer-bottom-btn" @click="submit">
|
<text>立即下单</text>
|
<text>（服务完成后付款）</text>
|
</div>
|
</view>
|
<view style="width: 100%; height: env(safe-area-inset-bottom);"></view>
|
</view>
|
|
<!-- 选择日期范围 -->
|
<u-calendar
|
:show="show"
|
color="#00BC12"
|
mode="range"
|
@close="show = false"
|
@confirm="confirmDate" />
|
|
<!-- 选择品种 -->
|
<u-picker
|
:show="show1"
|
:immediateChange="true"
|
:columns="cateList"
|
confirmColor="#00BC12"
|
@confirm="confirmCategary"
|
@cancel="show1 = false"
|
keyName="name" />
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
export default {
|
computed: {
|
...mapState(['userInfo']),
|
totalPrice() {
|
return this.form.estimatedAccount / 100
|
}
|
},
|
data() {
|
return {
|
show: false,
|
show1: false,
|
form: {
|
days: '',
|
startDate: '',
|
endDate: '',
|
lat: '',
|
lgt: '',
|
location: '',
|
workType: 0,
|
locationRemark: '',
|
categoryId: '',
|
categoryName: '',
|
priceNum1: '',
|
priceNum2: '',
|
price: '',
|
supplement: '',
|
multifileList: [],
|
linkName: '',
|
linkPhone: '',
|
priceUnit: '元/人/天',
|
estimatedAccount: '',
|
type: 0
|
},
|
cateList: [],
|
viewStatus: false
|
};
|
},
|
onLoad(option) {
|
this.form.linkPhone = this.userInfo.telephone
|
this.form.priceNum1 = option.days
|
this.form.startDate = option.startDate
|
this.form.endDate = option.endDate
|
this.form.lat = option.latitude
|
this.form.lgt = option.longitude
|
this.form.location = option.address
|
this.form.workType = option.workType
|
this.getCateList()
|
},
|
methods: {
|
// 提交订单
|
submit() {
|
if (!this.form.categoryId) {
|
return uni.showToast({ title: '请选择分拣品种', icon: 'none' })
|
}
|
if (!this.form.priceNum2) {
|
return uni.showToast({ title: '请输入用工数量', icon: 'none' })
|
}
|
if (!this.form.price) {
|
return uni.showToast({ title: '请输入费用标准', icon: 'none' })
|
}
|
if (!this.form.linkPhone) {
|
return uni.showToast({ title: '请输入联系电话', icon: 'none' })
|
}
|
this.$u.api.release({ ...this.form, price: Number(this.form.price) * 100 })
|
.then(res => {
|
if (res.code == 200) {
|
uni.navigateTo({
|
url: `/pages/success/success?orderId=${res.data}`
|
})
|
}
|
})
|
},
|
// 计算金额
|
getPrice() {
|
if (this.form.price && this.form.priceNum1 && this.form.priceNum2) {
|
this.$u.api.getTotal({
|
price: Number(this.form.price) * 100,
|
priceUnit: this.form.priceUnit,
|
priceNum1: this.form.priceNum1,
|
priceNum2: this.form.priceNum2,
|
type: this.form.type,
|
workType: this.form.workType
|
}).then(res => {
|
this.form.estimatedAccount = res.data
|
})
|
}
|
},
|
confirmDate(e) {
|
this.form.startDate = e[0]
|
this.form.endDate = e[e.length - 1]
|
this.form.days = e.length;
|
this.show = false
|
},
|
selectAddress() {
|
uni.chooseLocation({
|
success: (res) => {
|
this.form.lat = res.latitude
|
this.form.lgt = res.longitude
|
this.form.address = res.address
|
}
|
});
|
},
|
confirmCategary(e) {
|
this.form.categoryId = e.value[0].id
|
this.form.categoryName = e.value[0].name
|
this.show1 = false
|
},
|
getCateList() {
|
this.$u.api.getCategoryList({
|
type: 0
|
}).then(res => {
|
this.cateList = [res.data]
|
})
|
},
|
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
|
})
|
}
|
});
|
}
|
});
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background-color: #F7F7F7 !important;
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.index {
|
width: 100%;
|
.footer {
|
width: 100%;
|
height: calc(214rpx + env(safe-area-inset-bottom));
|
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;
|
}
|
}
|
}
|
}
|
.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;
|
}
|
}
|
}
|
}
|
}
|
.list {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.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 {
|
display: flex;
|
align-items: center;
|
margin-bottom: 28rpx;
|
text {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
}
|
.list-item-label-info {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #999999;
|
margin-left: 26rpx;
|
}
|
.list-item-label-x {
|
width: 6rpx;
|
height: 30rpx;
|
background: #00BC12;
|
border-radius: 4rpx;
|
margin-right: 20rpx;
|
}
|
}
|
.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: center;
|
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;
|
.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-right: 30rpx;
|
&:last-child {
|
margin: 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;
|
}
|
}
|
}
|
}
|
}
|
.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 {
|
flex-shrink: 0;
|
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;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
