<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>
|
|
<template v-if="!(info.type !== 2 && info.status === 2)">
|
<view class="list-item-row" @click="show = true">
|
<view class="list-item-row-label">车辆类型<b>*</b></view>
|
<view class="list-item-row-val">
|
<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" @click="show3 = true">
|
<view class="list-item-row-label">货车型号<b>*</b></view>
|
<view class="list-item-row-val">
|
<text :style="{ color: form.carUnit ? '#111111' : '' }">{{form.carUnit ? form.carUnit : '请选择'}}</text>
|
<u-icon name="arrow-right" color="#111111" size="16"></u-icon>
|
</view>
|
</view>
|
</template>
|
|
<view class="list-item-row" @click="show2 = true">
|
<view class="list-item-row-label">用车时间<b>*</b></view>
|
<view class="list-item-row-val">
|
<text :style="{ color: form.startDate ? '#111111' : '' }">{{form.startDate ? form.startDate + ' 至 ' + form.endDate + ' (' + form.totalDays + '天) ' : '请选择'}}</text>
|
<u-icon name="arrow-right" color="#111111" size="16"></u-icon>
|
</view>
|
</view>
|
|
<template v-if="!(info.type !== 2 && info.status === 2)">
|
<view class="list-item-row">
|
<view class="list-item-row-label">
|
运货地址<b>*</b>
|
<view class="list-item-row-label-add" @click="addAddr">+增加途经点</view>
|
</view>
|
<view class="address">
|
<view class="address-item" @click="selectAddress(2)">
|
<view class="address-item-img">
|
<image src="/static/icon/ic_qidian@2x.png" mode="widthFix"></image>
|
<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" 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 :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>
|
<view class="address-item" @click="selectAddress(3)">
|
<view class="address-item-img">
|
<image src="/static/icon/ic_zhongdian@2x.png" mode="widthFix"></image>
|
<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>
|
</view>
|
</template>
|
|
</view>
|
<template v-if="!(info.type !== 2 && info.status === 2)">
|
<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 :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">
|
<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="digit" style="flex: 3;" v-model="form.transportNum" placeholder="请输入" />
|
<!-- <view @click="show4 = true" style="width: 100rpx; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end;">
|
<text>{{form.transportUnit}}</text>
|
<u-icon name="arrow-down" color="#111111" size="16"></u-icon>
|
</view> -->
|
<view style="flex: 1;" :class="form.transportUnit ==='个' ? 'val-cate-item val-active' : 'val-cate-item'" @click="form.transportUnit = '个'">个</view>
|
<view style="flex: 1;" :class="form.transportUnit ==='斤' ? 'val-cate-item val-active' : 'val-cate-item'" @click="form.transportUnit = '斤'">斤</view>
|
</view>
|
|
</view>
|
<view class="list-item-row" >
|
<view class="list-item-row-label">需求补充</view>
|
<view class="list-item-row-val">
|
<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-label">图片</view>
|
<view class="list-item-row-upload">
|
<view class="upload-item" v-for="(item, index) in form.multifileList" :key="index" @click="preview(index, form.multifileList)">
|
<image :src="item.url || item.fileurlFull" mode="widthFix"></image>
|
<image class="upload-item-dele" @click.stop="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 style="width: 215rpx; height: 0;"></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-cate">
|
<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">{{item.name}}</view>
|
</view>
|
<view class="list-item-row" v-if="form.carType==0">
|
<view class="list-item-row-label">用车天数</view>
|
<view class="list-item-row-val">
|
<input type="digit" v-model="form.totalDays" disabled placeholder="" />
|
<text>天</text>
|
</view>
|
</view>
|
<view class="list-item-row" v-if="form.carType==1">
|
<view class="list-item-row-label">用车次数<b>*</b></view>
|
<view class="list-item-row-val">
|
<input type="digit" v-model="form.priceNum1" @input="getPrice" 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="digit" @input="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>
|
</template>
|
</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 || 0}}</text>
|
<text>元</text>
|
</view>
|
</view>
|
<view class="footer-bottom">
|
<div class="footer-bottom-btn" @click="submit" >
|
<text>{{form.id?'确认修改':'立即下单'}}</text>
|
<text v-if="!form.id">（服务完成后付款）</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"
|
:allowSameDay="true"
|
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 {
|
info: {},
|
show: false,
|
show1: false,
|
show2: false,
|
show3: false,
|
show4: false,
|
form: {
|
id: null,
|
startDate: '',
|
endDate: '',
|
lat: '',
|
lgt: '',
|
location: '',
|
latEnd: '',
|
lgtEnd: '',
|
locationEnd: '',
|
carUnit: '',
|
categoryId: '',
|
categoryName: '',
|
wayInfoDTOList: [],
|
priceNum1: '',
|
totalDays:null,
|
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: true
|
};
|
},
|
watch: {
|
'form.carType': {
|
handler(news, olds) {
|
if (news === 0) {
|
this.form.priceUnit = '元/天'
|
} else if (news === 1) {
|
this.form.priceUnit = '元/次'
|
}
|
this.getPrice()
|
}
|
}
|
},
|
onLoad(option) {
|
if (option.id) {
|
this.form.id = option.id
|
this.$u.api.getDetail({
|
orderId: option.id
|
}).then(res => {
|
if (res.code === 200) {
|
this.info = res.data
|
console.log(res.data.totalDays)
|
for (const key in this.form) {
|
this.form[key] = res.data[key]
|
}
|
this.form.price = Number(this.form.price) / 100
|
if (!this.form.multifileList) {
|
this.form.multifileList = []
|
}
|
if (!this.form.wayInfoDTOList) {
|
this.form.wayInfoDTOList = []
|
}
|
}
|
})
|
} else {
|
const res = uni.getStorageSync('carData');
|
console.log(res)
|
this.form.linkPhone = this.userInfo.telephone
|
this.form.linkName = this.userInfo.name
|
this.form.startDate = res.startDate
|
this.form.endDate = res.endDate
|
this.form.lat = res.lat
|
this.form.lgt = res.lgt
|
this.form.totalDays = res.days
|
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: {
|
preview(current, arr) {
|
let urls = arr.map(item => item.url || item.fileurlFull)
|
uni.previewImage({ current, urls })
|
},
|
handleInputPrice(e) {
|
try{
|
this.form.price = Number(this.form.price).toFixed(3)
|
}catch(e){
|
this.form.price =null
|
}
|
},
|
confirmDw(e) {
|
this.form.transportUnit = e.value[0]
|
this.show4 = false
|
},
|
// 提交订单
|
submit() {
|
var that = this;
|
if (!this.form.carUnit) {
|
return uni.showToast({ title: '请选择货车型号', icon: 'none' })
|
}
|
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' })
|
}
|
if (!that.form.id) {
|
uni.requestSubscribeMessage({
|
tmplIds: ['oVjOBLcHxIlGzOMJsdInmgI5CHGXh-UTvMzQqfFOnIg','AA97cHjvlPiNO4viMkVe4JifCf9TD5b5Eb7s6El3VS8'],
|
success(res) {
|
if(that.form.carType == 0){
|
that.form.priceNum1 = that.form.totalDays
|
}
|
that.$u.api.release({
|
...that.form,
|
price: Number(that.form.price) * 100,
|
wayInfoDTOList: [
|
{
|
lat: that.form.lat,
|
lgt: that.form.lgt,
|
location: that.form.location
|
},
|
...that.form.wayInfoDTOList,
|
{
|
lat: that.form.latEnd,
|
lgt: that.form.lgtEnd,
|
location: that.form.locationEnd
|
}
|
]
|
}).then(res => {
|
if (res.code == 200) {
|
uni.navigateTo({
|
url: `/pages/success/success?orderId=${res.data.id}`
|
})
|
}
|
})
|
}
|
})
|
} else {
|
// uni.requestSubscribeMessage({
|
// tmplIds: ['3YSC7gouRlSjHXz4CrWOGFzPmGwEBtFj4snwdfMvKHk','AA97cHjvlPiNO4viMkVe4JifCf9TD5b5Eb7s6El3VS8'],
|
// success(res) {
|
that.$u.api.updateOrder({
|
...that.form,
|
price: Number(that.form.price) * 100,
|
wayInfoDTOList: [
|
{
|
lat: that.form.lat,
|
lgt: that.form.lgt,
|
location: that.form.location
|
},
|
...that.form.wayInfoDTOList,
|
{
|
lat: that.form.latEnd,
|
lgt: that.form.lgtEnd,
|
location: that.form.locationEnd
|
}
|
]
|
}).then(res => {
|
if (res.code == 200) {
|
uni.showToast({
|
title: '修改成功',
|
icon: 'success',
|
mask: true,
|
duration: 2000
|
})
|
setTimeout(() => {
|
uni.navigateBack({ delta: 1 });
|
// uni.$emit('refresh')
|
}, 1500)
|
}
|
})
|
// }
|
// })
|
}
|
},
|
uploadImg() {
|
var that = this;
|
uni.chooseImage({
|
success: (chooseImageRes) => {
|
for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
|
uni.uploadFile({
|
url: this.$baseUrl + '/web/public/upload',
|
filePath: chooseImageRes.tempFilePaths[i],
|
name: 'file',
|
formData: {
|
'folder': 'orders'
|
},
|
success: (uploadFileRes) => {
|
const res = JSON.parse(uploadFileRes.data)
|
that.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).toFixed(2) * 100,
|
priceUnit: this.form.priceUnit,
|
priceNum1: this.form.carType!=1?this.form.totalDays:this.form.priceNum1,
|
priceNum2: this.form.priceNum2,
|
carType:this.form.carType ,
|
type: 1
|
}).then(res => {
|
if (res.code === 200) {
|
this.form.estimatedAccount = res.data
|
}
|
|
})
|
}
|
},
|
getCategoryLists() {
|
this.$u.api.getCategoryList({ type: 1 })
|
.then(res => {
|
if (res.code === 200) {
|
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 => {
|
if (res.code === 200) {
|
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]
|
let time = this.form.startDate == this.form.endDate ? 1 : 0
|
this.form.totalDays = e.length - time;
|
this.show2 = false
|
this.getPrice()
|
},
|
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.location = res.name || res.address
|
this.form.address = res.name || res.address
|
} else if (type === 3) {
|
this.form.locationEnd = res.name || res.address
|
this.form.latEnd = res.latitude
|
this.form.lgtEnd = res.longitude
|
} else if (type === 4) {
|
this.form.wayInfoDTOList[index].lat = res.latitude
|
this.form.wayInfoDTOList[index].lgt = res.longitude
|
this.form.wayInfoDTOList[index].location = res.name || res.address
|
}
|
}
|
});
|
},
|
}
|
}
|
</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;
|
}
|
textarea {
|
width: 100%;
|
height: 120rpx;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #111111;
|
}
|
.list-item-cate {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-top: 20rpx;
|
margin-bottom: 40rpx;
|
.active {
|
background: #00BC12 !important;
|
color: #ffffff !important;
|
}
|
.list-item-cate-item {
|
width: 208rpx;
|
height: 72rpx;
|
line-height: 72rpx;
|
text-align: center;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
background: #EEEEEE;
|
border-radius: 36rpx;
|
margin-right: 24rpx;
|
&: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-x {
|
width: 6rpx;
|
height: 30rpx;
|
background: #00BC12;
|
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%;
|
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;
|
}
|
.address {
|
width: 100%;
|
background: #F7F7F7;
|
border-radius: 16rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
margin-top: 20rpx;
|
.address-item {
|
width: 100%;
|
// height: 100rpx;
|
padding: 30rpx 0;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.address-item-img {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
image {
|
flex-shrink: 0;
|
width: 36rpx;
|
height: 36rpx;
|
margin-right: 24rpx;
|
}
|
text {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #999999;
|
border-bottom: 1rpx solid #E5E5E5;
|
}
|
}
|
}
|
}
|
.list-item-row-label {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #666666;
|
display: flex;
|
align-items: center;
|
position: relative;
|
.list-item-row-label-add {
|
position: absolute;
|
right: 0;
|
top: 0;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #00BC12;
|
}
|
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;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
padding: 30rpx 0;
|
box-sizing: border-box;
|
.upload-item {
|
width: 215rpx;
|
height: 215rpx;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
justify-content: center;
|
background: #F8F9FB;
|
border-radius: 8rpx;
|
border: 2rpx solid #EEEEEE;
|
position: relative;
|
margin-bottom: 15rpx;
|
&: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 {
|
// width: 80%;
|
flex-shrink: 0;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #999999;
|
}
|
input {
|
width: 100%;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
textarea {
|
width: 100%;
|
height: 90rpx;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #111111;
|
}
|
.val-active {
|
background: #00BC12 !important;
|
color: #ffffff !important;
|
}
|
.val-cate-item {
|
width: 208rpx;
|
height: 72rpx;
|
line-height: 72rpx;
|
text-align: center;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
background: #EEEEEE;
|
border-radius: 36rpx;
|
margin-right: 24rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
