<template>
<view class="content-cardatail">
<!-- <image class="car-pic" src="/static/images/tabbar/showroom.png" mode=""></image> -->
<swiper class="car-pic" :autoplay="true" :interval="3000" :duration="500">
<swiper-item v-for="(item, index) in carImages" :key="index">
<image :src="'https://qicheoss.oss-cn-shanghai.aliyuncs.com'+item" mode="aspectFill" class="swiper-image"></image>
</swiper-item>
</swiper>
<view class="cardatailbox">
<view class="title">{{detailData.carName||''}}</view>
<view class="moner">
<text>
￥
<text>{{detailData.estimateSalesPrice||''}}</text>
元
</text>
<view class="bg-yugu">
<text class="yugu">预估可赚</text>
<text class="money-yugu">{{detailData.estimatedRevenue||''}} 元</text>
</view>
</view>
<view class="title" style="margin-top: 50rpx;">车辆档案</view>
<view class="car-message">
<view class="top">
<view class="w-33">
<text>{{detailData.carAge||''}}年内</text>
<text class="gray">车辆年限</text>
</view>
<view class="w-33">
<text>{{detailData.using==1?'营运':'非营运'}}</text>
<text class="gray">使用性质</text>
</view>
<view class="w-33">
<text>{{detailData.mileage||''}}万公里</text>
<text class="gray">公里里程</text>
</view>
</view>
<view class="bottom">
<text>车漆颜色：
<text class="gray">{{detailData.carProduct.skinColor||''}}</text>
</text>
<text>内饰颜色：
<text class="gray">{{detailData.carProduct.interiorColor||''}}</text>
</text>
</view>
</view>
<!-- 车辆信息 -->
<view class="content-money">
<view class="flex" style="margin-top: 0px;">
<text>维修费</text>
<text class="gray">{{detailData.repairFee||''}}元</text>
</view>
<view class="flex">
<text>关税</text>
<text class="gray">{{detailData.tariff||''}}元</text>
</view>
<view class="flex">
<text>报关费用</text>
<text class="gray">{{detailData.customsFee||''}}元</text>
</view>
<view class="flex">
<text>清关费用</text>
<text class="gray">{{detailData.clearanceFee||''}}元</text>
</view>
<view class="flex">
<text>运输费用</text>
<text class="gray">{{detailData.transportFee||''}}元</text>
</view>
<view class="flex">
<text>合计采购价</text>
<text class="gray">{{detailData.allMoney||''}}元</text>
</view>
</view>
<view class="title" style="margin-top: 30rpx;">采购基本信息</view>
<u--form
labelPosition="left"
:model="formData"
:rules="rules"
ref="uForm">
<view class="bg_color">
<u-form-item label="采购日期" :labelWidth="100" prop="purchaseTime" borderBottom ref="item1"
>
<!-- <view v-if="showDatePicker"> -->
<dataTimeVue
@confirm="confirmDate"
@cancel="showDatePicker = false"
title="选择采购时间"
mode="date"
v-model="formData.purchaseTime"
></dataTimeVue>
<!-- </view> -->
<view class="pickerbox" @click="showDatePicker=true">
</view>
</u-form-item>
<u-form-item label="采购人" :labelWidth="100" prop="purchase" borderBottom ref="item1"
>
<u--input
v-model="formData.purchase"
placeholder='请输入'
:error-message="errorMessage.purchase"
border="none">
</u--input>
</u-form-item>
<u-form-item label="采购价格" :labelWidth="100" prop="purchasePrice" borderBottom ref="item1"
>
<u--input
v-model="formData.purchasePrice"
placeholder='请输入'
type="number"
:error-message="errorMessage.purchasePrice"
border="none">
</u--input>
</u-form-item>
<u-form-item label="车架号" :labelWidth="100" prop="carVin" borderBottom ref="item1"
>
<u--input
v-model="formData.carVin"
placeholder='请输入'
:error-message="errorMessage.carVin"
border="none">
</u--input>
</u-form-item>
</view>
<view class="content_foot">
<label>支付截图</label>
<view class="upload-box">
<view class="content flex-wrap align-center">
<view class="image-box rel" v-for="(item,index) in imageList" :key="index">
<!-- #ifdef MP-WEIXIN -->
<image :src="item" mode=""></image>
<image @click="DelPic(index)" class="reduce abs"
:src="aliyunOssUrl+'/static/images/ygcmp/home/car1.png'" mode=""></image>
<!-- #endif -->
<!-- #ifdef APP -->
<image :src="item" mode=""></image>
<image @click="DelPic(index)" class="reduce abs"
:src="aliyunOssUrl+'/static/images/ygcmp/home/car2.png'" mode=""></image>
<!-- #endif -->
</view>
<!-- #ifdef MP-WEIXIN -->
<image :src="aliyunOssUrl+'/static/images/ygcmp/home/changchuan.png'" mode=""
@click="getImage"></image>
<!-- #endif -->
<!-- #ifdef APP -->
<image :src="aliyunOssUrl+'/static/images/ygcmp/home/changchuan.png'" mode="" @click="getImage"></image>
<!-- #endif -->
</view>
</view>
</view>
<view class="content_foot">
<label>车辆证件</label>
<view class="upload-box">
<view class="content flex-wrap align-center">
<view class="image-box rel" v-for="(item,index) in imageList" :key="index">
<!-- #ifdef MP-WEIXIN -->
<image :src="item" mode=""></image>
<image @click="DelPic(index)" class="reduce abs"
:src="aliyunOssUrl+'/static/images/ygcmp/home/car1.png'" mode=""></image>
<!-- #endif -->
<!-- #ifdef APP -->
<image :src="item" mode=""></image>
<image @click="DelPic(index)" class="reduce abs"
:src="aliyunOssUrl+'/static/images/ygcmp/home/car2.png'" mode=""></image>
<!-- #endif -->
</view>
<!-- #ifdef MP-WEIXIN -->
<image :src="aliyunOssUrl+'/static/images/ygcmp/home/changchuan.png'" mode=""
@click="getImage"></image>
<!-- #endif -->
<!-- #ifdef APP -->
<image :src="aliyunOssUrl+'/static/images/ygcmp/home/changchuan.png'" mode="" @click="getImage"></image>
<!-- #endif -->
</view>
</view>
</view>
</u--form>
<!-- 提交按钮 -->
<view class="fixed-submit-btn">
<button
class="submit-btn"
@click="handleSubmit"
:style="{background: 'linear-gradient(97deg, #4088F7 0%, #3759EF 100%)'}"
>
提交采购信息
</button>
</view>
</view>
</view>
</template>
<script>
import { split } from 'lodash';
import dataTimeVue from './uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
import {
getDetailCar
} from '@/api/activity/activity.js'
export default {
data() {
return {
orderid:'',
detailData:{
},
showDatePicker:false,
imageList: [],
errorMessage: {
purchaseTime: '',//采购时间
purchase:'',//采购人
purchasePrice:'',//采购价格
},
rules: {
purchaseTime: [{
required: true,
message: '请选择采购时间',
trigger: ['blur', 'change']
}],
purchase: [{
required: true,
message: '请输入采购人',
trigger: ['blur', 'change']
}],
purchasePrice: [{
required: true,
message: '请输入采购价格',
trigger: ['blur', 'change']
}],
carVin: [{
required: true,
message: '请输入车架号',
trigger: ['blur', 'change']
}]
},
aliyunOssUrl:'https://cbl.diyouzhijia.com',
carImages:[],
formData:{
purchaseTime: '',//采购时间
purchase:'',//采购人
purchasePrice:'',//采购价格
carVin:'',//车架号
},
};
},
components: {
dataTimeVue
},
onReady(){
this.$refs.uForm.setRules(this.rules)
},
onLoad(options) {
this.orderid=options.id
this.getDeatail()
},
methods: {
// 调用详情页接口数据
getDeatail(){
getDetailCar({
orderId:this.orderid
}).then(res=>{
console.log("详情页接口数据",res);
this.detailData=res.data
this.carImages=res.data.banner.split(",")
this.detailData.allMoney=Number(this.detailData.purchasePrice)+Number(this.detailData.repairFee)+Number(this.detailData.tariff)+Number(this.detailData.customsFee)+Number(this.detailData.clearanceFee)+Number(this.detailData.transportFee)
})
},
confirmDate(){
console.log(111,"111");
},
handleSubmit() {
console.log(this.formData,"handleSubmit");
return
this.$refs.uForm.validate().then(valid => {
if (valid) {
uni.showLoading({ title: '提交中...' });
setTimeout(() => {
uni.hideLoading();
uni.showToast({ title: '提交成功', icon: 'success' });
// 提交成功后可以跳转或其他操作
// uni.navigateBack();
}, 1500);
} else {
uni.showToast({ title: '请填写完整信息', icon: 'none' });
}
});
},
// 删除图片
DelPic(index) {
this.imageList.splice(index, 1)
},
//传图片
getImage() {
// uni.showLoading({
// title: '上传中'
// })
this.$util.uploadImageOne({
count: 9,
sizeType: ['original'],
sourceType: ['album', 'camera'],
dir: 'lxkimage/public/product/'
}, null, res => {
this.imageList.push(res.data)
// uni.hideLoading();
},err=>{
// uni.hideLoading();
});
},
// 预览图片单张
previewImage(num) {
let imgsArray = this.itemlist;
uni.previewImage({
current: num,
urls: imgsArray,
});
},
}
};
</script>
<style lang="scss" scoped>
.content-cardatail{
padding-bottom: 200rpx;
.car-pic{
width: 100%;
height: 520rpx;
}
.cardatailbox{
width: 100%;
padding: 30rpx;
position: relative;
top: -42rpx;
border-radius: 20px 20px 0px 0px;
background:white url('https://cbl.diyouzhijia.com/static/images/ygctzmp/home/xigua.png') no-repeat;
background-size: 100% 204rpx;
.title{
color: #333333;
font-size: 32rpx;
font-weight: 500;
}
.moner{
display: flex;
align-items: center;
margin-top: 22rpx;
text{
color: #FF6400;
font-size: 24rpx;
text{
font-size: 42rpx;
font-weight: bold;
padding-right: 3rpx;
}
}
.bg-yugu{
margin-left: 50rpx;
width: 325rpx;
height: 48rpx;
font-size: 24rpx;
font-weight: 500;
color: white;
line-height: 44rpx;
// border: 1px solid #3E80F5;
background: url('https://cbl.diyouzhijia.com/static/images/ygcmp/home/yugu.png') no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8rpx 8rpx 9rpx 14rpx;
.yugu{
font-size: 24rpx;
color: white;
font-weight: bold;
}
.money-yugu{
color: #2F74FA;
font-size: 32rpx;
font-weight: bold;
}
}
}
.car-message{
height: 220rpx;
padding: 30rpx;
font-size: 28rpx;
background: #F9FBFF;
border-radius: 20rpx;
color: #333333;
margin-top: 20rpx;
padding-left: 0px;
padding-right: 0px;
.gray{
color: #666666;
padding-top: 20rpx;
}
.top{
width: 100%;
height: 71%;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px dashed #B3B3B3;
.w-33{
width: 33%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
// justify-content: center;
}
}
.bottom{
display: flex;
width: 100%;
height: 40%;
justify-content: space-between;
align-items: center;
padding: 0 30rpx;
}
}
.content-money{
width: 100%;
height: 472rpx;
margin-top: 30rpx;
background: #F9FBFF;
border-radius: 20px;
padding: 40rpx 30rpx;
.flex{
display: flex;
margin-top: 32rpx;
align-items: center;
color: #333333;
font-size: 28rpx;
justify-content: space-between;
}
}
// 信息截止
}
}
</style>
<style lang="scss" scoped>
// 表单样式以及穿透可复制
/deep/ .u-form-item__body{
display: flex;
input{
text-align: right !important;
}
}
/deep/.u-form-item__body__right__message{
text-align: right !important;
}
.bg_color{
padding: 30rpx;
border-radius: 20rpx;
margin-top: 20rpx;
background: rgba(200, 225, 255, 0.1);
}
/deep/.uni-date{
.uni-date-editor--x{
border: 0px solid red !important;
.uni-date-x{
background: none !important;
padding: 0px !important;
input{
padding: 0px;
}
uni-icons{
display: none !important;
}
}
}
}
.content_foot {
margin-top: 30rpx;
font-size: 30rpx;
padding: 0 24rpx;
font-weight: bold;
color: #111111;
margin-bottom: 50rpx;
.upload-box {
margin-top: 16rpx;
}
.content {
padding: 32rpx 0 64rpx 0;
.image-box {
position: relative;
margin-right: 24rpx;
margin-bottom: 24rpx;
width: 100rpx;
height: 100rpx;
.reduce {
position: absolute;
top: -16rpx;
right: -16rpx;
width: 32rpx;
height: 32rpx;
}
}
image {
width: 100rpx;
height: 100rpx;
border-radius: 8rpx;
}
}
}
// 在最后一个 <style> 块中添加
.fixed-submit-btn {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index:1;
padding: 20rpx 30rpx;
background: white;
box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
.submit-btn {
width: 100%;
height: 88rpx;
line-height: 88rpx;
border-radius: 44rpx;
color: white;
font-size: 32rpx;
font-weight: bold;
border: none;
&::after {
border: none; // 去除按钮默认边框
}
&:active {
opacity: 0.9;
}
}
}
// 确保表单内容不会被按钮遮挡
.cardatailbox {
padding-bottom: 120rpx; // 给底部按钮留出空间
}
</style>
<style lang="scss">
.pickerbox{
.u-input{
background-color: rgba(200, 225, 255,0) !important;
}
}
</style>
车架号只能输入大小写字母加数字
最新发布
本文介绍了一种使用MXML中TextInput组件的方法来限定用户只能输入特定字符集内的内容，这对于需要控制输入格式的应用场景非常有用。
扫一扫
250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
