| | |
| | | <view class="list-item-label-x"></view> |
| | | <text>车辆及路线</text> |
| | | </view> |
| | | <view class="list-item-row"> |
| | | <view class="list-item-row" @click="show = true"> |
| | | <view class="list-item-row-label">车辆类型<b>*</b></view> |
| | | <view class="list-item-row-val"> |
| | | <text>请选择</text> |
| | | <text :style="{ color: form.categoryName ? '#111111' : '' }">{{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" @click="show3 = true"> |
| | | <view class="list-item-row-label">货车型号<b>*</b></view> |
| | | <view class="list-item-row-val"> |
| | | <text>请选择</text> |
| | | <text :style="{ color: form.carUnit ? '#111111' : '' }">{{form.carUnit ? form.carUnit : '请选择'}}</text> |
| | | <u-icon name="arrow-right" color="#111111" size="16"></u-icon> |
| | | </view> |
| | | </view> |
| | | <view class="list-item-row"> |
| | | <view class="list-item-row" @click="show2 = true"> |
| | | <view class="list-item-row-label">用车时间<b>*</b></view> |
| | | <view class="list-item-row-val"> |
| | | <text>请选择</text> |
| | | <text :style="{ color: form.startDate ? '#111111' : '' }">{{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"> |
| | | <view class="list-item-row-label"> |
| | | 运货地址<b>*</b> |
| | | <view class="list-item-row-label-add">+增加途经点</view> |
| | | <view class="list-item-row-label-add" @click="addAddr">+增加途经点</view> |
| | | </view> |
| | | <view class="address"> |
| | | <view class="address-item"> |
| | | <view class="address-item" @click="selectAddress(2)"> |
| | | <view class="address-item-img"> |
| | | <image src="/static/icon/ic_qidian@2x.png" mode="widthFix"></image> |
| | | <text>请选择起点</text> |
| | | <text :style="{color: form.location ? '#111111' : ''}">{{form.location ? form.location : '请选择起点'}}</text> |
| | | </view> |
| | | <u-icon name="arrow-right" color="#111111" size="16"></u-icon> |
| | | </view> |
| | | <view class="address-item"> |
| | | <view class="address-item" v-for="(item, index) in form.wayInfoDTOList" :key="index" @click="selectAddress(4, index)"> |
| | | <view class="address-item-img"> |
| | | <image src="/static/icon/ic_jingguo@2x.png" mode="widthFix"></image> |
| | | <text>请选择途经地点</text> |
| | | <text :style="{color: item.location ? '#111111' : ''}">{{item.location ? item.location : '请选择途经地点'}}</text> |
| | | </view> |
| | | <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 class="address-item"> |
| | | </view> |
| | | <view class="address-item" @click="selectAddress(3)"> |
| | | <view class="address-item-img"> |
| | | <image src="/static/icon/ic_zhongdian@2x.png" mode="widthFix"></image> |
| | | <text>请选择终点</text> |
| | | <text :style="{color: form.locationEnd ? '#111111' : ''}">{{form.locationEnd ? form.locationEnd : '请选择终点'}}</text> |
| | | </view> |
| | | <u-icon name="arrow-right" color="#111111" size="16"></u-icon> |
| | | </view> |
| | |
| | | <view class="list-item-label-x"></view> |
| | | <text>需求</text> |
| | | </view> |
| | | <view class="list-item-row"> |
| | | <view class="list-item-row" @click="show1 = true"> |
| | | <view class="list-item-row-label">运输品种<b>*</b></view> |
| | | <view class="list-item-row-val"> |
| | | <text>请选择</text> |
| | | <text :style="{ color: form.transportTypeName ? '#111111' : '' }">{{form.transportTypeName ? form.transportTypeName : '请选择'}}</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"> |
| | | <text>请选择</text> |
| | | <u-icon name="arrow-right" color="#111111" size="16"></u-icon> |
| | | <input type="number" v-model="form.priceNum2" disabled placeholder="1" /> |
| | | <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 type="text" placeholder="请输入" /> |
| | | <text>个</text> |
| | | <input type="text" v-model="form.transportNum" placeholder="请输入" /> |
| | | <text @click="show4 = true">{{form.transportUnit}}</text> |
| | | <u-icon name="arrow-down" color="#111111" size="16"></u-icon> |
| | | </view> |
| | | </view> |
| | | <view class="list-item-row"> |
| | | <view class="list-item-row" v-if="viewStatus"> |
| | | <view class="list-item-row-label">需求补充</view> |
| | | <view class="list-item-row-val"> |
| | | <textarea cols="30" rows="10" placeholder="请输入" maxlength="200"></textarea> |
| | | <textarea cols="30" v-model="form.supplement" rows="10" placeholder="请输入" maxlength="200"></textarea> |
| | | </view> |
| | | </view> |
| | | <view class="list-item-row"> |
| | | <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"> |
| | | <image src="/static/logo.png" mode="widthFix"></image> |
| | | <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"> |
| | | <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"> |
| | | <text>补充需求</text> |
| | | <u-icon name="arrow-down" color="#00BC12" size="16"></u-icon> |
| | | <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"> |
| | |
| | | <text>费用</text> |
| | | </view> |
| | | <view class="list-item-cate"> |
| | | <view class="list-item-cate-item active">按天付费</view> |
| | | <view class="list-item-cate-item">按次付费</view> |
| | | <view :class="item.id === form.carType ? 'list-item-cate-item active' : 'list-item-cate-item'" v-for="(item, index) in ff" :key="index" @click="form.carType = item.id">按天付费</view> |
| | | </view> |
| | | <view class="list-item-row"> |
| | | <view class="list-item-row-label">天数</view> |
| | | <view class="list-item-row-val"> |
| | | <input type="text" placeholder="请输入" /> |
| | | <input type="number" v-model="form.priceNum1" disabled 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 type="text" placeholder="请输入" /> |
| | | <text>元/辆*天</text> |
| | | <input type="number" @blur="getPrice" v-model="form.price" placeholder="请输入" /> |
| | | <text>{{form.priceUnit}}</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 class="footer-price"> |
| | | <view class="footer-price-info">预估总费用</view> |
| | | <view class="footer-price-num"> |
| | | <text>0</text> |
| | | <text>{{totalPrice || 0}}</text> |
| | | <text>元</text> |
| | | </view> |
| | | </view> |
| | | <view class="footer-bottom"> |
| | | <div class="footer-bottom-btn"> |
| | | <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-picker |
| | | :show="show" |
| | | :columns="car" |
| | | confirmColor="#00BC12" |
| | | keyName="name" |
| | | @confirm="confirmCategary" |
| | | @cancel="show = false"/> |
| | | |
| | | <!-- 选择品种 --> |
| | | <u-picker |
| | | :show="show1" |
| | | :columns="variety" |
| | | confirmColor="#00BC12" |
| | | keyName="name" |
| | | @confirm="confirmVariety" |
| | | @cancel="show1 = false"/> |
| | | |
| | | <!-- 货车型号 --> |
| | | <u-picker |
| | | :show="show3" |
| | | :columns="carArr" |
| | | confirmColor="#00BC12" |
| | | @confirm="confirmCarArr" |
| | | @cancel="show3 = false"/> |
| | | |
| | | <!-- 单位 --> |
| | | <u-picker |
| | | :show="show4" |
| | | :columns="dw" |
| | | confirmColor="#00BC12" |
| | | @confirm="confirmDw" |
| | | @cancel="show4 = false"/> |
| | | |
| | | <!-- 选择日期范围 --> |
| | | <u-calendar |
| | | :show="show2" |
| | | color="#00BC12" |
| | | mode="range" |
| | | @close="show2 = false" |
| | | @confirm="confirmDate" /> |
| | | |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import { mapState } from 'vuex' |
| | | export default { |
| | | computed: { |
| | | ...mapState(['userInfo']), |
| | | totalPrice() { |
| | | return this.form.estimatedAccount / 100 |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | |
| | | show: false, |
| | | show1: false, |
| | | show2: false, |
| | | show3: false, |
| | | show4: false, |
| | | form: { |
| | | startDate: '', |
| | | endDate: '', |
| | | lat: '', |
| | | lgt: '', |
| | | location: '', |
| | | latEnd: '', |
| | | lgtEnd: '', |
| | | locationEnd: '', |
| | | carUnit: '', |
| | | categoryId: '', |
| | | categoryName: '', |
| | | wayInfoDTOList: [], |
| | | priceNum1: '', |
| | | priceNum2: 1, |
| | | transportNum: '', |
| | | transportTypeId: '', |
| | | transportTypeName: '', |
| | | carType: 0, |
| | | supplement: '', |
| | | multifileList: [], |
| | | priceUnit: '元/天', |
| | | linkName: '', |
| | | linkPhone: '', |
| | | price: '', |
| | | type: 1, |
| | | transportUnit: '个', |
| | | estimatedAccount: '' |
| | | }, |
| | | car: [], |
| | | variety: [], |
| | | ff: [ |
| | | { name: '按天付费', id: 0 }, |
| | | { name: '按次付费', id: 1 } |
| | | ], |
| | | dw: [['个', '斤']], |
| | | carArr: [], |
| | | viewStatus: false |
| | | }; |
| | | }, |
| | | watch: { |
| | | 'form.carType': { |
| | | handler(news, olds) { |
| | | if (news === 0) { |
| | | this.form.priceUnit = '元/天' |
| | | } else if (news === 1) { |
| | | this.form.priceUnit = '元/次' |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | onLoad() { |
| | | const res = uni.getStorageSync('carData'); |
| | | this.form.linkPhone = this.userInfo.telephone |
| | | this.form.startDate = res.startDate |
| | | this.form.endDate = res.endDate |
| | | this.form.lat = res.lat |
| | | this.form.lgt = res.lgt |
| | | this.form.priceNum1 = res.days |
| | | this.form.categoryId = res.categoryId |
| | | this.form.categoryName = res.categoryName |
| | | this.form.location = res.location |
| | | this.form.latEnd = res.latEnd |
| | | this.form.lgtEnd = res.lgtEnd |
| | | this.form.locationEnd = res.locationEnd |
| | | this.form.wayInfoDTOList = res.wayInfoDTOList |
| | | uni.removeStorageSync('carData'); |
| | | this.getCategoryLists() |
| | | }, |
| | | methods: { |
| | | confirmDw(e) { |
| | | this.form.transportUnit = e.value[0] |
| | | this.show4 = false |
| | | }, |
| | | // 提交订单 |
| | | submit() { |
| | | if (!this.form.transportTypeName) { |
| | | return uni.showToast({ title: '请选择运输品种', icon: 'none' }) |
| | | } |
| | | if (!this.form.priceNum2) { |
| | | return uni.showToast({ title: '请输入用车数量', icon: 'none' }) |
| | | } |
| | | if (!this.form.transportNum) { |
| | | 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, |
| | | wayInfoDTOList: [ |
| | | { |
| | | lat: this.form.lat, |
| | | lgt: this.form.lgt, |
| | | location: this.form.location |
| | | }, |
| | | ...this.form.wayInfoDTOList, |
| | | { |
| | | lat: this.form.latEnd, |
| | | lgt: this.form.lgtEnd, |
| | | location: this.form.locationEnd |
| | | } |
| | | ] |
| | | }).then(res => { |
| | | if (res.code == 200) { |
| | | uni.navigateTo({ |
| | | url: `/pages/success/success?orderId=${res.data.id}` |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | | 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() { |
| | | 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: 1 |
| | | }).then(res => { |
| | | this.form.estimatedAccount = res.data |
| | | }) |
| | | } |
| | | }, |
| | | getCategoryLists() { |
| | | this.$u.api.getCategoryList({ type: 1 }) |
| | | .then(res => { |
| | | this.car = [res.data] |
| | | res.data.forEach(item => { |
| | | if (item.id === this.form.categoryId) { |
| | | this.carArr = [item.detailList] |
| | | } |
| | | }) |
| | | }) |
| | | this.$u.api.getCategoryList({ type: 0 }) |
| | | .then(res => { |
| | | this.variety = [res.data] |
| | | }) |
| | | }, |
| | | confirmCategary(e) { |
| | | this.form.categoryId = e.value[0].id |
| | | this.form.categoryName = e.value[0].name |
| | | this.carArr = [e.value[0].detailList] |
| | | this.form.carUnit = '' |
| | | this.show = false |
| | | }, |
| | | confirmVariety(e) { |
| | | this.form.transportTypeId = e.value[0].id |
| | | this.form.transportTypeName = e.value[0].name |
| | | this.show1 = false |
| | | }, |
| | | confirmCarArr(e) { |
| | | this.form.carUnit = e.value[0] |
| | | this.show3 = false |
| | | }, |
| | | confirmDate(e) { |
| | | this.form.startDate = e[0] |
| | | this.form.endDate = e[e.length - 1] |
| | | this.form.priceNum1 = e.length; |
| | | this.show2 = false |
| | | }, |
| | | addAddr() { |
| | | this.form.wayInfoDTOList.push({ |
| | | lat: '', |
| | | lgt: '', |
| | | location: '' |
| | | }) |
| | | }, |
| | | selectAddress(type, index) { |
| | | uni.chooseLocation({ |
| | | success: (res) => { |
| | | if ([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 |
| | | } |
| | | } |
| | | }); |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | |
| | | border-radius: 4rpx; |
| | | margin-right: 20rpx; |
| | | } |
| | | .list-item-label-info { |
| | | font-weight: 400; |
| | | font-size: 26rpx; |
| | | color: #999999; |
| | | margin-left: 26rpx; |
| | | } |
| | | } |
| | | .list-item-zk { |
| | | width: 100%; |
| | |
| | | margin-top: 20rpx; |
| | | .address-item { |
| | | width: 100%; |
| | | height: 100rpx; |
| | | // height: 100rpx; |
| | | padding: 30rpx 0; |
| | | box-sizing: border-box; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | |
| | | border-radius: 8rpx; |
| | | margin-right: 20rpx; |
| | | border: 2rpx solid #EEEEEE; |
| | | position: relative; |
| | | &:last-child { |
| | | margin: 0 !important; |
| | | } |
| | |
| | | font-size: 26rpx; |
| | | color: #666666; |
| | | margin-top: 16rpx; |
| | | } |
| | | .upload-item-dele { |
| | | position: absolute; |
| | | top: -20rpx; |
| | | right: -20rpx; |
| | | width: 40rpx; |
| | | height: 40rpx; |
| | | z-index: 9; |
| | | } |
| | | } |
| | | } |
| | |
| | | flex-shrink: 0; |
| | | font-weight: 400; |
| | | font-size: 30rpx; |
| | | color: #111111; |
| | | color: #999999; |
| | | } |
| | | input { |
| | | width: 100%; |