xinyouhe/hs-usedcar-miniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
507bff6d653aad1a220a1935f030035b81a5e31c
hs-usedcar-miniapp/pages/carinfo/info.vue
T
浅念 507bff6d65 二手车小程序
2025-09-19 09:54:43 +08:00

701 lines
22 KiB
Vue
Raw Blame History

<template>
<view>
<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000" backgroundColor="#fff" :statusBar="true" :title="$t('navbar.newcar')"></uni-nav-bar>
<view class="cont">
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.front45Degree')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select" @delete="delfn('front_45_degree')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.leftFront45Degree')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select1" @delete="delfn('front_left_45_degree')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.leftFrontHeadlight')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select2" @delete="delfn('front_left_headlight')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.front')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select3" @delete="delfn('front_view')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.frontLowerPart')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select4" @delete="delfn('lower_front')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.wheelHub')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select5" @delete="delfn('wheel_hub')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.rightFrontSeat')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select6" @delete="delfn('front_right_seat')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.rightBottomEdge')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select7" @delete="delfn('right_lower_side')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.rightRearTaillight')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select8" @delete="delfn('rear_right_taillight')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.rightRear45Degree')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select9" @delete="delfn('rear_right_45_degree')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.rearLowerPart')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select10" @delete="delfn('lower_rear')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.trunk')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select11" @delete="delfn('trunk')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.leftBottomEdge')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select12" @delete="delfn('left_lower_side')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.rearSeat')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select13" @delete="delfn('rear_seats')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.console')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select14" @delete="delfn('center_console')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.controlPanel')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select15" @delete="delfn('control_panel')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.gearLever')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select16" @delete="delfn('gear_shift')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.key')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select17" @delete="delfn('car_key')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.steeringWheel')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select18" @delete="delfn('steering_wheel')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.dashboard')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select19" @delete="delfn('dashboard')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.displayedMileage')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select20" @delete="delfn('odometer_reading')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.leftFrontDoorPanel')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select21" @delete="delfn('front_left_door_panel')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.leftFrontDoorFunctionArea')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select22" @delete="delfn('front_left_door_function_area')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.leftFrontSeat')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select23" @delete="delfn('front_left_seat')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="content">
<uni-collapse>
<uni-collapse-item title-border="none" :border="false">
<template v-slot:title>
<view class="con-title">
<text>{{$t('carinfo.ceiling')}}</text>
</view>
</template>
<view class="contents">
<uni-file-picker fileMediatype="image" limit="1" :del-icon="false" disable-preview @select="select24" @delete="delfn('interior_ceiling')">
<image src="/static/image/img.png" mode="" class="addimg"></image>
</uni-file-picker>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
</view>
<view class="">
<movable-area class="movable-area">
<movable-view class="movable-view" :x="x" :y="y" direction="all">
<view class="index" @tap="draftadd" >
<image v-if="i18locale=='zh'" src="/static/image/cg.png" mode="widthFix">
<image v-if="i18locale=='en'" src="/static/image/cge.png" mode="widthFix">
<image v-if="i18locale=='ru'" src="/static/image/cgr.png" mode="widthFix">
</view>
</movable-view>
</movable-area>
</view>
<view class="foot">
<view>
<button class="btn1" plain="true" @click="leftClick">{{$t('button.previous')}}</button>
<button class="btn" @click="nextFn">{{$t('button.next')}}</button>
</view>
</view>
</view>
</template>
<script>
import { request,showToast } from '@/api/apiT.js'
export default {
data() {
return {
x: 300, //x坐标
y: 550, //y坐标
carinfo:{},
i18locale:uni.getStorageSync('i18locale')?uni.getStorageSync('i18locale'):'zh',
}
},
onLoad() {
const carinfo = uni.getStorageSync('carinfo');
this.carinfo = JSON.parse(carinfo);
console.log(this.carinfo)
const { windowWidth, windowHeight } = uni.getSystemInfoSync();
this.x = windowWidth-70
this.y = windowHeight-185
},
methods: {
uploadfn(imgUrl,name){
var that = this;
uni.uploadFile({
url: 'https://usedcar.server.hnxinyouhe.com/applet/upload/image',
filePath: imgUrl,
name: 'image',
header:{'content-type': 'application/x-www-form-urlencoded','Authorization': 'Bearer ' + uni.getStorageSync('token')},
success: (uploadFileRes) => {
const path=JSON.parse(uploadFileRes.data)
that.carinfo[name] = path.data.image_name
console.log(that.carinfo)
}
});
},
delfn(name){
console.log(name)
that.carinfo[name] =''
},
draftadd(){
if(uni.getStorageSync('draftid')){
request({
url:'draft/update/'+uni.getStorageSync('draftid'),
method:'post',
data:this.carinfo
}).then(res => {
uni.showToast({
title: res.data.message,
icon: 'none'
});
})
}else{
request({
url:'draft/add',
method:'post',
data:this.carinfo
}).then(res => {
uni.showToast({
title: res.data.message,
icon: 'none'
});
if(res.data.code ==0){
uni.setStorageSync('draftid', res.data.data.id);
}
console.log(res.data)
})
}
},
select(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'front_45_degree')
},
select1(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'front_left_45_degree')
},
select2(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'front_left_headlight')
},
select3(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'front_view')
},
select4(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'lower_front')
},
select5(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'wheel_hub')
},
select6(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'front_right_seat')
},
select7(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'right_lower_side')
},
select8(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'rear_right_taillight')
},
select9(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'rear_right_45_degree')
},
select10(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'lower_rear')
},
select11(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'trunk')
},
select12(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'left_lower_side')
},
select13(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'rear_seats')
},
select14(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'center_console')
},
select15(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'control_panel')
},
select16(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'gear_shift')
},
select17(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'car_key')
},
select18(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'steering_wheel')
},
select19(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'dashboard')
},
select20(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'odometer_reading')
},
select21(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'front_left_door_panel')
},
select22(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'front_left_door_function_area')
},
select23(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'front_left_seat')
},
select24(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
this.uploadfn(imgUrl,'interior_ceiling')
},
leftClick(){
uni.navigateBack({})
},
nextFn(){
const carinfo = JSON.stringify(this.carinfo);
uni.setStorageSync('carinfo', carinfo);
uni.navigateTo({
url: '/pages/carinfo/infomsg'
});
}
}
}
</script>
<style>
.uni-file-picker {
margin-left: 33.3%;
}
.cont{
padding: 10px 0px 130px;
}
.content{
margin: 10px 12px;
background: #FFFFFF;
border-radius: 10px;
overflow: hidden;
}
.con-title{
padding: 18px 10px;
font-weight: 500;
}
.red{
color: red;
}
.contents{
padding:10px;
text-align: center;
}
.addimg{
width: 110px;
height:110px;
}
.caogao{
position: fixed;
right: 0px;
bottom: 280rpx;
}
.caogao image{
width: 64px;
height: 64px;
}
.foot{
position: fixed;
bottom: 0px;
width: 100%;
height: 120px;
background: #FFFFFF;
}
.foot view{
display: flex;
width: 94%;
margin: 15px 3%;
}
.btn{
background-color: #3F435B;
color: white;
border-radius: 50px;
margin-bottom: 40px;
margin-left: 2%;
flex-grow:1
}
.btn1{
border-color:#9E9E9E !important;
border-radius: 20px;
color: #414141;
margin-bottom: 40px;
width: 110px;
background-color: #fff;
}
</style>
Reference in New Issue View Git Blame Copy Permalink