<template>
|
<view class="container">
|
<!-- 标题栏 -->
|
<Nav :title="formData.name" :customBack="formData.router"></Nav>
|
|
<!-- 基础信息区域 -->
|
<view class="info-section">
|
<view class="info-item" v-for="(item, index) in infoList" :key="index">
|
<view class="item-label">{{ item.label }}</view>
|
<view class="item-value" :class="{ status: item.status }">{{ item.value }}</view>
|
</view>
|
</view>
|
|
|
|
<!-- 上传行程表单 -->
|
<view class="form-section" v-if="newForm.statusStr == '待甩挂'">
|
<!-- 单选操作按钮组（遍历优化） -->
|
<!-- <view class="action-buttons-container">
|
<view class="action-buttons-row" v-for="(row, rowIndex) in actionButtonRows" :key="rowIndex">
|
<button class="action-btn" v-for="(btn, btnIndex) in row" :key="btnIndex"
|
:class="{ selected: selectedAction === btn.dictValue }" @tap="selectAction(btn.dictValue)">
|
{{ btn.dictLabel }}
|
</button>
|
</view>
|
</view> -->
|
|
|
|
<u--form ref="uForm" :rules="rules" :model="form" labelPosition="left">
|
<u-form-item ref="item1" borderBottom label=" " labelWidth="0" prop="address">
|
<!-- <view style="display: flex; align-items: center; width: 100%;">
|
<view style="display: flex; align-items: center; flex-shrink: 0; margin-right: 10px;">
|
<u--image :showLoading="true" src="/static/bt.png" width="20px" height="20px"></u--image>
|
<text>甩挂地址:</text>
|
</view>
|
<u--input placeholder="请获取甩挂地址" v-model="form.address" suffixIcon="map-fill"
|
@click="getLocation" suffixIconStyle="color: #909399"></u--input>
|
|
|
|
</view> -->
|
<view style="display: flex; align-items: flex-start; width: 100%;">
|
<!-- 左侧标签（带必填星号） -->
|
<view
|
style="display: flex; align-items: center; flex-shrink: 0; margin-right: 10px; padding-top: 12rpx;">
|
<u--image :showLoading="true" src="/static/bt.png" width="20px" height="20px"></u--image>
|
<text style="display: flex; align-items: center;">
|
<span style="color: #ff4d4f; margin-right: 4rpx;">*</span> <!-- 红色必填星号 -->
|
甩挂地址:
|
</text>
|
</view>
|
|
<!-- 右侧文本框+图标（带边框，图标在框内） -->
|
<view style="position: relative; width: 100%; margin-top: 6rpx;" @click="getLocation">
|
<view class="custom-textarea" style="border: 1px solid #e5e5e5;">
|
<u--text :lines="2" :text="form.address"></u--text>
|
<view style="position: absolute; top: 50%; right: 10rpx; transform: translateY(-50%);">
|
<u-icon name="map-fill" color="#909399" size="24" @click="getLocation"></u-icon>
|
</view>
|
</view>
|
|
</view>
|
</view>
|
</u-form-item>
|
|
<u-form-item ref="item1" borderBottom label=" " labelWidth="0" prop="tripTime">
|
<view style="display: flex; align-items: center; width: 100%;">
|
<view style="display: flex; align-items: center; flex-shrink: 0; margin-right: 10px;">
|
<u--image :showLoading="true" src="/static/bt.png" width="20px" height="20px"></u--image>
|
<text>甩挂时间</text>
|
</view>
|
<uni-datetime-picker type="datetime" v-model="form.tripTime" style="flex: 1;"
|
@change="onDateTimeChange">
|
</uni-datetime-picker>
|
</view>
|
</u-form-item>
|
|
<!-- <u-form-item ref="item1" borderBottom label=" " labelWidth="0" prop="odometer">
|
<view style="display: flex; align-items: center; width: 100%;">
|
<view style="display: flex; align-items: center; flex-shrink: 0; margin-right: 10px;">
|
<u--image :showLoading="true" src="/static/bt.png" width="20px" height="20px"></u--image>
|
<text>仪表里程（km）:</text>
|
</view>
|
|
<uni-number-box v-model="form.odometer" @change="changeValue" />
|
</view>
|
</u-form-item> -->
|
|
|
<u-form-item ref="item1" borderBottom label=" " labelWidth="0" prop="" :borderBottom="false">
|
<view style="display: flex;align-items: center;"><u--image :showLoading="true" src="/static/bt.png"
|
width="20px" height="20px"></u--image>凭证<span
|
style="color: #c6c0ba;margin-left: 10px;display: inline-block;"></span></view>
|
</u-form-item>
|
<u-form-item ref="item1" borderBottom label=" " labelWidth="0" prop="fileList" :borderBottom="false">
|
<view style="margin-right: 10px;"></view>
|
<u-upload :fileList="fileList" name="file" multiple :maxCount="6" :maxSize="2 * 1024 * 1024"
|
@afterRead="afterRead" :previewFullImage="true" @delete="deletePic" @oversize="overSize">
|
</u-upload>
|
|
</u-form-item>
|
|
|
|
|
|
|
</u--form>
|
<view class="bottom-btn-group">
|
<u-button class="btn-list" @click="goToAdvanceList" text="垫付列表"></u-button>
|
<!-- <u-button class="btn-budget" @click="goToAdvanceBudget" type="success" text="垫付预算"></u-button> -->
|
<u-button class="btn-submit" @click="submitForm" type="primary" text="提交"></u-button>
|
</view>
|
|
</view>
|
|
|
|
|
|
|
<!-- 上报垫付表单 -->
|
<view class="form-section" v-if="newForm.statusStr == '待接挂'">
|
|
<u--form ref="uForm" :rules="rules" :model="form" labelPosition="left">
|
<u-form-item ref="item1" borderBottom label=" " labelWidth="0" prop="address">
|
<!-- <view style="display: flex; align-items: center; width: 100%;">
|
<view style="display: flex; align-items: center; flex-shrink: 0; margin-right: 10px;">
|
<u--image :showLoading="true" src="/static/bt.png" width="20px" height="20px"></u--image>
|
<text>接挂地址:</text>
|
</view>
|
<view @click="getLocation" style="width: 100%;">
|
<u--input placeholder="请获取甩挂地址" readonly v-model="form.address" suffixIcon="map-fill"
|
suffixIconStyle="color: #909399"></u--input>
|
</view>
|
</view> -->
|
<view style="display: flex; align-items: flex-start; width: 100%;">
|
<!-- 左侧标签（带必填星号） -->
|
<view
|
style="display: flex; align-items: center; flex-shrink: 0; margin-right: 10px; padding-top: 12rpx;">
|
<u--image :showLoading="true" src="/static/bt.png" width="20px" height="20px"></u--image>
|
<text style="display: flex; align-items: center;">
|
<span style="color: #ff4d4f; margin-right: 4rpx;">*</span> <!-- 红色必填星号 -->
|
接挂地址:
|
</text>
|
</view>
|
|
<!-- 右侧文本框+图标（带边框，图标在框内） -->
|
<view style="position: relative; width: 100%; margin-top: 6rpx;" @click="getLocation">
|
<view class="custom-textarea" style="border: 1px solid #e5e5e5;">
|
<u--text :lines="2" :text="form.address"></u--text>
|
<view style="position: absolute; top: 50%; right: 10rpx; transform: translateY(-50%);">
|
<u-icon name="map-fill" color="#909399" size="24" @click="getLocation"></u-icon>
|
</view>
|
</view>
|
|
</view>
|
</view>
|
</u-form-item>
|
|
<u-form-item ref="item1" borderBottom label=" " labelWidth="0" prop="tripTime">
|
<view style="display: flex; align-items: center; width: 100%;">
|
<view style="display: flex; align-items: center; flex-shrink: 0; margin-right: 10px;">
|
<u--image :showLoading="true" src="/static/bt.png" width="20px" height="20px"></u--image>
|
<text>接挂时间</text>
|
</view>
|
<uni-datetime-picker type="datetime" v-model="form.tripTime" style="flex: 1;"
|
@change="onDateTimeChange">
|
</uni-datetime-picker>
|
</view>
|
</u-form-item>
|
|
<!-- <u-form-item ref="item1" borderBottom label=" " labelWidth="0" prop="odometer">
|
<view style="display: flex; align-items: center; width: 100%;">
|
<view style="display: flex; align-items: center; flex-shrink: 0; margin-right: 10px;">
|
<u--image :showLoading="true" src="/static/bt.png" width="20px" height="20px"></u--image>
|
<text>仪表里程（km）:</text>
|
</view>
|
|
<uni-number-box v-model="form.odometer" @change="changeValue" />
|
</view>
|
</u-form-item> -->
|
|
|
<u-form-item ref="item1" borderBottom label=" " labelWidth="0" prop="" :borderBottom="false">
|
<view style="display: flex;align-items: center;"><u--image :showLoading="true" src="/static/bt.png"
|
width="20px" height="20px"></u--image>凭证<span
|
style="color: #c6c0ba;margin-left: 10px;display: inline-block;"></span></view>
|
</u-form-item>
|
<u-form-item ref="item1" borderBottom label=" " labelWidth="0" prop="fileList" :borderBottom="false">
|
<view style="margin-right: 10px;"></view>
|
<u-upload :fileList="fileList" name="file" multiple :maxCount="6" :maxSize="2 * 1024 * 1024"
|
@afterRead="afterRead" :previewFullImage="true" @delete="deletePic" @oversize="overSize">
|
</u-upload>
|
|
</u-form-item>
|
|
|
|
|
|
|
</u--form>
|
<view class="bottom-btn-group">
|
<u-button class="btn-list" @click="goTravelItinerary" text="行程历史"></u-button>
|
|
<!-- <u-button class="btn-budget" @click="goToAdvanceBudget" type="success" text="垫付预算"></u-button> -->
|
<u-button :loading="loading" class="btn-submit" @click="submitForm" type="primary" text="提交"></u-button>
|
</view>
|
|
|
</view>
|
</view>
|
</template>
|
|
<script>
|
|
import { getcarDispatch, getcarType, carUploadTrip, carUploadFinance, carSubmitDropHoo, carSubmitPickHook } from "@/common/examine";
|
import config from '@/config'
|
import amap from '@/common/amap-wx.130.js'
|
|
import store from '@/store'
|
import {uploadImage} from "@/common/upload";
|
export default {
|
data() {
|
return {
|
mapApiKey: 'fdb2d2e64ffc9254045935d3227d5cd9', // <-- 替换成你的 API Key
|
amapPlugin: null,
|
formData: {
|
name: '',
|
router: '',
|
id: ''
|
},
|
fileList: [],
|
range: [
|
|
],
|
feeTypeList: [],
|
cleanedForm: {},
|
newForm: {},
|
selectedAction: '',
|
activeTab: 'upload',
|
infoList: [
|
{ label: '调度单号', value: '' },
|
{ label: '运输工具号码', value: '' },
|
{ label: '路线', value: '' },
|
{ label: '客户', value: '' },
|
{ label: '当前状态', value: '待发车', status: true },
|
{ label: '要求最晚发车时间', value: '' }
|
],
|
actionButtonRows: [
|
|
],
|
form: {
|
address: '',
|
tripTime: '',
|
odometer: 0,
|
tripType: ''
|
},
|
rules: {
|
|
address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
|
tripTime: [{ required: true, message: '请选择时间', trigger: 'change' }], // 修改这里
|
// odometer: [{ required: true, message: '请输入仪表里程', trigger: 'change' }],
|
voucher: [{ required: true, message: '请上传凭证', trigger: 'blur' }]
|
},
|
isHk: false,
|
loading: false
|
};
|
},
|
onLoad(options) {
|
this.formData = options;
|
this.amapPlugin = new amap.AMapWX({
|
key: this.mapApiKey
|
});
|
this.getLocation();
|
// 获取 URL 参数
|
if (options.id) {
|
this.getList();
|
}
|
},
|
created() {
|
// this.getList();
|
this.form.tripTime = this.getCurrentDateTime();
|
|
},
|
methods: {
|
getCurrentDateTime() {
|
var now = new Date();
|
var year = now.getFullYear();
|
var month = (now.getMonth() + 1).toString().padStart(2, '0');
|
var day = now.getDate().toString().padStart(2, '0');
|
var hour = now.getHours().toString().padStart(2, '0');
|
var minute = now.getMinutes().toString().padStart(2, '0');
|
var second = now.getSeconds().toString().padStart(2, '0');
|
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
|
},
|
goTravelItinerary() {
|
setTimeout(() => {
|
uni.$u.route('/pages/travelItinerary/index?id=' + this.formData.id + '&name=' + '上传行程' + '&router=' + '/pages/travelItinerary/index' + '&statusStr=' + this.formData.statusStr);
|
}, 1000);
|
|
},
|
feeTypeChange(e) {
|
},
|
getList() {
|
getcarDispatch(this.formData.id).then((res) => {
|
res.statusStr = '待接挂'
|
this.newForm = res;
|
// 定义字段映射关系
|
const fieldMap = {
|
dispatchNo: '调度单号',
|
licensePlate: '运输工具号码',
|
transportLine: '路线',
|
customerName: '客户',
|
statusStr: '当前状态',
|
latestDeparture: '要求最晚发车时间'
|
};
|
|
// 遍历 infoList，自动更新 value
|
this.infoList = this.infoList.map(item => {
|
const key = Object.keys(fieldMap).find(k => fieldMap[k] === item.label);
|
if (key && res[key] !== undefined) {
|
return { ...item, value: res[key] };
|
}
|
return item;
|
});
|
}).catch(err => {
|
console.error('获取调度信息失败:', err);
|
});
|
|
getcarType('trip_type').then((res) => {
|
this.actionButtonRows = [res]
|
|
}).catch(err => {
|
});
|
getcarType('fee_type').then((res) => {
|
this.feeTypeList = res
|
this.range = res.map(item => ({
|
value: item.dictValue,
|
text: item.dictLabel
|
}));
|
|
}).catch(err => {
|
});
|
},
|
|
|
switchTab(tab) {
|
this.activeTab = tab;
|
this.form = {
|
address: '',
|
tripTime: '',
|
odometer: 0,
|
tripType: ''
|
}
|
this.fileList = []
|
this.selectedAction = ''
|
|
},
|
selectAction(type) {
|
// 设置选中的操作类型
|
this.selectedAction = type;
|
// 同时更新表单中的 tripType 字段
|
this.form.tripType = type;
|
// wx.showToast({
|
// title: `已选择${type}`,
|
// icon: 'none'
|
// });
|
},
|
maskClick() {
|
|
},
|
// 新增图片
|
async afterRead(event) {
|
console.log(event)
|
uploadImage(event.file[0].url,this.isHk).then(res=>{
|
console.log(res)
|
this.fileList.push(res);
|
})
|
// console.log(event)
|
// // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
// let lists = [].concat(event.file)
|
// let fileListLen = this.fileList.length
|
// lists.map((item) => {
|
// this.fileList.push({
|
// ...item,
|
// status: 'success',
|
// message: '上传中'
|
// })
|
// })
|
// for (let i = 0; i < lists.length; i++) {
|
//
|
// const result = await this.uploadFilePromise(lists[i].url)
|
// let item = this.fileList[fileListLen]
|
// this.fileList.splice(fileListLen, 1, Object.assign(item, {
|
// status: result.status,
|
// message: result.status == 'success' ? '上传成功' : '上传失败',
|
// urls: result.url
|
// }))
|
// fileListLen++
|
// }
|
},
|
|
uploadFilePromise(url) {
|
const param = {
|
filePath: url,
|
type: 'images'
|
}
|
return new Promise((resolve, reject) => {
|
// console.log(store.state);
|
uni.uploadFile({
|
url: config.host + `app/car/uploadImg`, // 仅为示例，非真实的接口地址
|
filePath: url,
|
name: 'file',
|
header: {
|
"Authorization": store.state.sso_user_token
|
},
|
success: (res) => {
|
if (res.statusCode == 200) {
|
const dataObject = JSON.parse(res.data);
|
resolve({
|
url: config['wms'] + dataObject.fileName,
|
status: 'success'
|
})
|
} else {
|
resolve({
|
url: dataObject.fileName,
|
status: 'failed'
|
})
|
}
|
},
|
fail: (err) => {
|
reject({ status: 'failed' });
|
}
|
});
|
})
|
},
|
// 图片大小超出最大允许大小
|
overSize(e) {
|
uni.$u.toast('上传图片大小不能超过2MB!')
|
},
|
// 删除图片
|
deletePic(event) {
|
this.fileList.splice(event.index, 1)
|
},
|
onDateTimeChange(event) {
|
// this.form.workTime = event.detail.value;
|
},
|
|
submitForm() {
|
if(this.loading){
|
return;
|
}
|
if (this.fileList.length == 0) {
|
uni.$u.toast('图片上传不能为空')
|
return
|
}
|
console.log(this.loading);
|
this.loading = true;
|
this.$refs.uForm.validate().then(res => {
|
if (res) {
|
|
if (this.newForm.statusStr == '待甩挂') {
|
|
var urls = this.fileList.map(item => item.url).join(',');
|
this.form.voucherUrl = urls
|
this.form.dispatchOrderId = this.newForm.dispatchId
|
this.form.driverId = this.newForm.driverId
|
|
|
carSubmitDropHoo(this.form).then((res) => {
|
|
|
this.form = {
|
address: '',
|
tripTime: '',
|
}
|
this.fileList = []
|
this.selectedAction = ''
|
if (res == 1) {
|
uni.$u.toast('操作成功')
|
}
|
}).catch(()=>{
|
setTimeout(()=>{
|
this.loading = false
|
},2000)
|
})
|
|
|
} else if (this.newForm.statusStr == '待接挂') {
|
|
var urls = this.fileList.map(item => item.url).join(',');
|
this.form.voucherUrl = urls
|
this.form.dispatchOrderId = this.newForm.dispatchId
|
this.form.driverId = this.newForm.driverId
|
|
|
this.cleanedForm = this.cleanFormData({ ...this.form })
|
carSubmitPickHook(this.cleanedForm).then((res) => {
|
setTimeout(()=>{
|
this.loading = false
|
},2000)
|
this.form = {
|
address: '',
|
tripTime: '',
|
}
|
this.cleanedForm = {}
|
this.fileList = []
|
this.selectedAction = ''
|
if (res == 1) {
|
uni.$u.toast('操作成功')
|
}
|
}).catch(()=>{
|
setTimeout(()=>{
|
this.loading = false
|
},2000)
|
})
|
|
}
|
|
|
}
|
|
}).catch(errors => {
|
uni.$u.toast('校验失败')
|
setTimeout(()=>{
|
this.loading = false
|
},2000)
|
})
|
this.$forceUpdate();
|
},
|
changeValue(e) {
|
|
},
|
cleanFormData(formData) {
|
const cleanedData = {};
|
for (const key in formData) {
|
if (formData[key] !== '' && formData[key] !== null && formData[key] !== undefined) {
|
cleanedData[key] = formData[key];
|
}
|
}
|
return cleanedData;
|
},
|
goToAdvanceList() {
|
// 使用箭头函数保持 this 上下文
|
setTimeout(() => {
|
uni.$u.route('/pages/paymentList/index?name=' + '垫付列表' + '&router=' + 'pages/examine/index' + '&id=' + this.formData.id);
|
}, 1000);
|
},
|
// 获取经纬度
|
getLocation() {
|
wx.getLocation({
|
type: 'gcj02',
|
success: (res) => {
|
const latitude = res.latitude;
|
const longitude = res.longitude;
|
this.getAddress(latitude, longitude);
|
},
|
fail: (err) => {
|
console.error('获取位置失败:', err);
|
wx.showToast({ title: '获取位置失败', icon: 'none' });
|
}
|
});
|
},
|
|
getAddress(latitude, longitude) {
|
this.amapPlugin.getRegeo({
|
location:`${longitude},${latitude}`,
|
success: (data) => {
|
let datum = data[0];
|
if (datum.regeocodeData){
|
if (datum.regeocodeData.addressComponent){
|
let province = datum.regeocodeData.addressComponent.province;
|
this.isHk = province.indexOf("香港") != -1;
|
}
|
}
|
|
|
this.form.address = datum.name;
|
},
|
fail: (err) => {
|
console.error("SDK调用失败:", err);
|
wx.showToast({ title: '地址解析失败'+JSON.stringify(err) + latitude+ longitude, icon: 'none' });
|
}
|
});
|
|
},
|
}
|
};
|
</script>
|
|
<style scoped>
|
.container {
|
display: flex;
|
flex-direction: column;
|
height: 100vh;
|
background-color: #f7f7f7;
|
align-items: stretch;
|
}
|
|
.info-section {
|
background-color: #fff;
|
margin: 20rpx;
|
border-radius: 12rpx;
|
overflow: hidden;
|
flex-shrink: 0;
|
}
|
|
.info-item {
|
display: flex;
|
padding: 20rpx;
|
border-bottom: 1rpx solid #eee;
|
}
|
|
.info-item:last-child {
|
border-bottom: none;
|
}
|
|
.item-label {
|
width: 180rpx;
|
color: #666;
|
font-size: 28rpx;
|
}
|
|
.item-value {
|
flex: 1;
|
color: #333;
|
font-size: 28rpx;
|
}
|
|
.item-value.status {
|
color: #ff6b6b;
|
font-weight: 500;
|
}
|
|
.tab-bar {
|
display: flex;
|
height: 80rpx;
|
background-color: #fff;
|
border-bottom: 1rpx solid #eee;
|
}
|
|
.tab-item {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 28rpx;
|
color: #666;
|
position: relative;
|
height: 80rpx;
|
/* 确保高度 */
|
z-index: 1;
|
/* 确保层级 */
|
}
|
|
.tab-item.active {
|
color: #4285f4;
|
font-weight: 500;
|
}
|
|
.tab-item.active::after {
|
content: '';
|
position: absolute;
|
bottom: 0;
|
left: 50%;
|
transform: translateX(-50%);
|
width: 60rpx;
|
height: 6rpx;
|
background-color: #4285f4;
|
border-radius: 3rpx;
|
}
|
|
.form-section {
|
flex: 1;
|
padding: 20rpx;
|
background-color: #fff;
|
margin: 0 20rpx 20rpx;
|
border-radius: 12rpx;
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
/* overflow-y: auto; */
|
}
|
|
/* 上传行程-单选操作按钮组（自适应换行样式） */
|
.action-buttons-container {
|
margin-bottom: 30rpx;
|
overflow-y: auto;
|
}
|
|
.action-buttons-row {
|
gap: 20rpx;
|
/* margin-bottom: 20rpx; */
|
display: grid;
|
grid-template-columns: repeat(auto-fill, 150rpx);
|
grid-gap: 20rpx;
|
min-width: 100%;
|
}
|
|
.action-btn {
|
width: 150rpx;
|
height: 80rpx;
|
line-height: 80rpx;
|
text-align: center;
|
font-size: 25rpx;
|
border-radius: 8rpx;
|
background-color: #fff;
|
border: 1rpx solid #eee;
|
color: #333;
|
transition: all 0.2s ease;
|
/* 使用 flex 布局确保一致性 */
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
/* 关键：设置文本溢出处理 */
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
|
/* 选中状态样式 */
|
.action-btn.selected {
|
background-color: #e8f4f8;
|
border-color: #4285f4;
|
color: #4285f4;
|
font-weight: 500;
|
}
|
|
.action-btn::after {
|
border: none;
|
}
|
|
/* 选中按钮按压反馈 */
|
.action-btn.selected:active {
|
background-color: #d1e7fd;
|
}
|
|
/* 未选中按钮按压反馈 */
|
.action-btn:not(.selected):active {
|
background-color: #f5f5f5;
|
}
|
|
.form-item {
|
margin-bottom: 30rpx;
|
}
|
|
.form-label {
|
font-size: 28rpx;
|
color: #333;
|
margin-bottom: 16rpx;
|
display: flex;
|
align-items: center;
|
}
|
|
.required-tag {
|
display: inline-block;
|
width: 24rpx;
|
height: 24rpx;
|
line-height: 24rpx;
|
text-align: center;
|
background-color: #e53e3e;
|
color: #fff;
|
font-size: 20rpx;
|
border-radius: 50%;
|
margin-left: 8rpx;
|
}
|
|
.form-control {
|
display: flex;
|
align-items: center;
|
border: 1rpx solid #eee;
|
border-radius: 8rpx;
|
padding: 16rpx;
|
background-color: #f9f9f9;
|
}
|
|
.form-control input {
|
flex: 1;
|
font-size: 28rpx;
|
}
|
|
.icon {
|
width: 32rpx;
|
height: 32rpx;
|
margin-left: 16rpx;
|
}
|
|
.form-control input[disabled] {
|
background-color: #f9f9f9;
|
color: #999;
|
}
|
|
.picker-value {
|
flex: 1;
|
font-size: 28rpx;
|
color: #333;
|
}
|
|
.bottom-buttons {
|
display: flex;
|
gap: 20rpx;
|
margin-top: 40rpx;
|
}
|
|
.bottom-btn {
|
flex: 1;
|
height: 80rpx;
|
line-height: 80rpx;
|
text-align: center;
|
font-size: 28rpx;
|
border-radius: 8rpx;
|
background-color: #fff;
|
border: 1rpx solid #eee;
|
color: #333;
|
}
|
|
.bottom-btn.primary {
|
background-color: #4285f4;
|
color: #fff;
|
border: none;
|
}
|
|
.bottom-btn::after {
|
border: none;
|
}
|
|
/* 按钮 */
|
.bottom-btn-group {
|
display: flex;
|
gap: 20rpx;
|
padding: 30rpx;
|
}
|
|
/* 文本框样式优化：内边距+占位符 */
|
::v-deep .custom-textarea {
|
padding: 16rpx 50rpx 16rpx 16rpx !important;
|
/* 上下内边距稍大，右侧留图标位置 */
|
min-height: 80rpx;
|
}
|
|
/* 占位符样式：灰色，和图片一致 */
|
::v-deep .custom-textarea textarea::placeholder {
|
color: #c6c0ba !important;
|
/* 浅灰色占位符 */
|
font-size: 28rpx;
|
}
|
|
/* 确保文本框边框不被覆盖 */
|
::v-deep .custom-textarea .uni-textarea {
|
border: none !important;
|
/* 去掉组件自带边框，用外层自定义边框 */
|
}
|
</style>
|
