Commit 11a92117 authored by Damon's avatar Damon

完工配置表单

This diff is collapsed.
...@@ -51,16 +51,22 @@ ...@@ -51,16 +51,22 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.list { .list {
display: flex; display: flex;
flex-wrap: wrap;
.txt { .txt{
color: #666; color:#666;
padding: 10rpx; padding:10rpx 30rpx;
margin: 5rpx;
&.active { background: #F4F5F7;
background-color: red; border-radius: 10rpx;
color: #fff; display: flex;
} flex-wrap: wrap;
line-height: 50rpx;
max-width: 48%;
&.active{
background-color: #2272FF;
color:#fff;
}
} }
} }
</style> </style>
<!-- ******************* 文件上传 ******************* --> <!-- ******************* 文件上传 ******************* -->
<template> <template>
<view class="file-box"> <view class="file-box">
<view class="u-flex" @click="selectUpload"> <!-- <view class="u-flex">
<view class="txt u-flex-1">{{item.fieldsTitle}}</view> <view class="txt u-flex-1">{{item.fieldsTitle}}</view>
<u-icon name="arrow-right" color="#666" size="28"></u-icon> <u-icon name="arrow-right" color="#666" size="28"></u-icon>
</view> </view> -->
<view class="pics u-flex u-flex-wrap"> <view class="pics u-flex u-flex-wrap">
<u-image class="pic" v-for="(item,index) in imgList" width="170rpx" height="170" :src="item.path" :key="index"></u-image> <view class="img-list" v-for="(item,index) in imgList" :key="index">
<!-- <u-image class="pic" v-for="item in 6" width="170rpx" height="170" src="'https://cdn.uviewui.com/uview/example/fade.jpg"></u-image> --> <u-image class="pic" width="170" height="170" :src="item.path" @click.stop="prviewImage(item.path,index)"></u-image>
</view> <view class="icon-del-box" @click.stop="delFile(index)">
<u-popup v-model="maskShow" mode="center" width="500"> <view class="icon-del"></view>
<view class="upload-box u-p-30"> <view class="icon-del rotate"></view>
<view class="title">请选择图片</view> </view>
<view class="u-flex u-row-between"> </view>
<view class="upload-item u-text-center" @click="uploadFile('photo')"> <view class="img-list" @click="choose">
<u-image class="pic" width="170rpx" height="170" src="'https://cdn.uviewui.com/uview/example/fade.jpg"></u-image> <u-image class="pic" width="170rpx" height="170" @click="selectUpload" src="https://gitee.com/xuqu/uView/blob/master/static/uview/example/min_button.png"></u-image>
相册
</view>
<view class="upload-item u-text-center" @click="uploadFile">
<u-image class="pic" width="170rpx" height="170" src="'https://cdn.uviewui.com/uview/example/fade.jpg"></u-image>
拍摄
</view>
</view>
</view> </view>
</u-popup> <!-- <u-image class="pic" v-for="item in 6" width="170rpx" height="170" src="'https://cdn.uviewui.com/uview/example/fade.jpg"></u-image> -->
</view>
<u-action-sheet :list="list" v-model="maskShow" :cancel-btn="true" @click="uploadSelect"></u-action-sheet>
</view> </view>
</template> </template>
...@@ -38,7 +33,15 @@ ...@@ -38,7 +33,15 @@
filters:{}, filters:{},
data() { data() {
return { return {
maskShow:false maskShow:false,
list: [
{
text: '相册'
},
{
text: '拍照'
}
]
} }
}, },
computed: { computed: {
...@@ -52,6 +55,13 @@ ...@@ -52,6 +55,13 @@
selectUpload(){ selectUpload(){
// 弹窗展示 // 弹窗展示
this.maskShow = true this.maskShow = true
},
uploadSelect(index) {
if (index === 0) {
this.uploadFile('photo')
} else {
this.uploadFile()
}
}, },
async uploadFile(type){ async uploadFile(type){
const self = this const self = this
...@@ -59,7 +69,9 @@ ...@@ -59,7 +69,9 @@
// 直接打开相册 // 直接打开相册
let config = { let config = {
options:{ options:{
sourceType:['album'],//['album', 'camera'] sourceType:['album'],//['album', 'camera']
count: 5,
sizeType: ['compressed']
} }
} }
await this.chooseImage('qiniu',config) await this.chooseImage('qiniu',config)
...@@ -73,8 +85,18 @@ ...@@ -73,8 +85,18 @@
const dataValue = [] const dataValue = []
this.imgList.map(item=>{ this.imgList.map(item=>{
dataValue.push(item.key) dataValue.push(item.key)
}) })
console.log(this.imgList)
this.valueChange(dataValue) this.valueChange(dataValue)
},
prviewImage(url, index) {
uni.previewImage({
urls: [url],
current: index
});
},
delFile(index) {
this.imgList.splice(index, 1)
} }
} }
} }
...@@ -86,7 +108,43 @@ ...@@ -86,7 +108,43 @@
&:nth-child(3n){ &:nth-child(3n){
margin-right: 0; margin-right: 0;
} }
} }
.img-list {
position: relative;
margin: 8rpx;
border: 1px solid #eee;
width: 170rpx;
height: 170rpx;
.icon-del-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
align-items: center;
justify-content: center;
position: absolute;
top: 10rpx;
right: 10rpx;
height: 40rpx;
width: 40rpx;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
transform: rotate(-45deg);
}
.icon-del {
width: 30rpx;
height: 4rpx;
background-color: #fff;
border-radius: 2px;
}
.rotate {
position: absolute;
transform: rotate(90deg);
}
}
// .list { // .list {
// display: flex; // display: flex;
......
<!-- ******************* 输入框 ******************* --> <!-- ******************* 输入框 ******************* -->
<template> <template>
<view> <view>
<u-input v-model="dataValue" @input="valueChange" :type="type" /> <u-input :type="type" class="input-item" v-model="dataValue" @input="valueChange" :border="true" placeholder="请输入" />
</view> </view>
</template> </template>
...@@ -16,8 +16,9 @@ ...@@ -16,8 +16,9 @@
return {} return {}
}, },
computed: { computed: {
type() { type() {
if (this.item && this.item.fieldsType == 'password') { console.log(this.item)
if (this.item && this.item.fieldsType == 'password' || this.item.fieldsType == 'textarea') {
return this.item.fieldsType return this.item.fieldsType
} else { } else {
return 'text' return 'text'
...@@ -30,5 +31,8 @@ ...@@ -30,5 +31,8 @@
} }
</script> </script>
<style> <style scoped>
.input-item{
background: #F4F5F7;
}
</style> </style>
<!-- ******************* 定位 ******************* --> <!-- ******************* 定位 ******************* -->
<template> <template>
<view class="list u-flex u-row-between"> <view>
<text class="required" v-if="item.required">*</text> <view class="list u-flex u-row-between">
<view class="u-m-r-20">{{item.fieldsTitle}}</view> <image class="item-image" :src="mixingImage" v-if="item.required"></image>
<view class="u-flex-1">{{valueTxt || ''}}</view> <view class="u-m-r-20">{{item.fieldsTitle}}</view>
<u-button type="primary" size="mini" @click="$u.debounce(getLocation,1000)">默认按钮</u-button> <!-- <u-button type="primary" size="mini" @click="$u.debounce(getLocation,1000)">自动定位</u-button> -->
<view class="u-flex-1 location-name">
<u-icon name="map" color="#2979ff" size="30"></u-icon>自动定位
</view>
</view>
<view class="u-flex-1 location">{{valueTxt || '正在获取中...'}}</view>
</view> </view>
</template> </template>
...@@ -23,14 +28,19 @@ ...@@ -23,14 +28,19 @@
valueTxt() { valueTxt() {
let str = '' let str = ''
const dataValue = this.dataValue const dataValue = this.dataValue
if(dataValue && dataValue.length>1){ if(dataValue && dataValue.length>1){
str = '经度:'+dataValue[0]+','+'维度:'+dataValue[1] str = '经度:'+dataValue[0]+','+'维度:'+dataValue[1]
} }
return str return str
},
mixingImage() {
return process.uniEnv.qn_base_url + 'mixing.png'
} }
}, },
watch: {}, watch: {},
mounted() {}, created() {
this.getLocation()
},
methods: { methods: {
getLocation() { getLocation() {
let self = this let self = this
...@@ -59,5 +69,18 @@ ...@@ -59,5 +69,18 @@
font-size: 28rpx; font-size: 28rpx;
line-height: 40rpx; line-height: 40rpx;
color: #fa3534; color: #fa3534;
}
.item-image {
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
}
.location-name {
color: #2272FF;
text-align: right;
}
.location {
background: #F4F5F7;
padding: 10rpx;
} }
</style> </style>
<!-- ******************* 多个输入框 ******************* --> <!-- ******************* 多个输入框 ******************* -->
<template> <template>
<view class="u-flex u-flex-wrap"> <view class="u-flex u-flex-wrap">
<u-input class="input-item" v-for="(item,index) in inputOptions" v-model="item.value" @input="val=>{getValue(item)}" type="text" :key="index"/> <u-input class="input-item" v-for="(item,index) in inputOptions" v-model="item.value" @input="val=>{getValue(item)}" type="text" :key="index" :border="true" :placeholder="item.placeholder" />
</view> </view>
</template> </template>
...@@ -40,8 +40,10 @@ ...@@ -40,8 +40,10 @@
} }
</script> </script>
<style> <style scoped>
.input-item{ .input-item{
width:33.3%; width: 31%;
margin: 5rpx;
background: #F4F5F7;
} }
</style> </style>
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
return {} return {}
}, },
computed: { computed: {
settings(){ settings(){
return this.item.settings || [] return this.item.settings || []
} }
}, },
...@@ -33,14 +33,23 @@ ...@@ -33,14 +33,23 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.list{ .list{
display: flex; display: flex;
.txt{ flex-wrap: wrap;
color:#666; .txt{
padding:10rpx; color:#666;
&.active{ padding:10rpx 30rpx;
background-color: red; margin: 5rpx;
color:#fff; background: #F4F5F7;
} border-radius: 10rpx;
display: flex;
flex-wrap: wrap;
line-height: 50rpx;
text-align: center;
max-width: 48%;
&.active{
background-color: #2272FF;
color:#fff;
}
} }
} }
</style> </style>
<!-- ******************* 扫码 ******************* --> <!-- ******************* 扫码 ******************* -->
<template> <template>
<view class=""> <view class="">
<view class="u-flex"> <view class="u-flex" @click="scanCode">
请输入:<u-input class="u-flex-1" v-model="dataValue" @input="valueChange" type="text" /> <view class="txt u-flex-1">扫描二维码(仅挚达充电桩可扫描)</view>
<u-icon name="arrow-right" color="#666" size="28"></u-icon>
</view> </view>
<view class="u-flex" @click="scanCode"> <view class="u-flex">
<view class="txt u-flex-1">扫描二维码(仅挚达充电桩可扫描)</view> <u-input class="u-flex-1 input-item" v-model="dataValue" @input="valueChange" type="text" />
<u-icon name="arrow-right" color="#666" size="28"></u-icon>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
...@@ -62,5 +61,8 @@ ...@@ -62,5 +61,8 @@
font-size: 28rpx; font-size: 28rpx;
line-height: 40rpx; line-height: 40rpx;
color: #fa3534; color: #fa3534;
}
.input-item{
background: #F4F5F7;
} }
</style> </style>
...@@ -20,7 +20,9 @@ ...@@ -20,7 +20,9 @@
{ {
"path": "pages/order/complete", "path": "pages/order/complete",
"style": { "style": {
"navigationBarTitleText": "订单-完工配置" "navigationBarTitleText": "订单-完工配置",
"navigationBarBackgroundColor": "#2272FF",
"navigationBarTextStyle": "white"
} }
},{ },{
"path": "pages/order/feedback", "path": "pages/order/feedback",
......
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
</u-cell-group> </u-cell-group>
</view> </view>
</view> </view>
<take-photo type="test" v-if="takeStatus" @close="closeTake"></take-photo> <take-photo type="test" v-if="takeStatus" :currentItem="testData" @close="closeTake"></take-photo>
</view> </view>
</template> </template>
...@@ -45,7 +45,19 @@ ...@@ -45,7 +45,19 @@
return { return {
pic:'https://uviewui.com/common/logo.png', pic:'https://uviewui.com/common/logo.png',
show:true, show:true,
takeStatus: false takeStatus: false,
testData: {
_id: '1', // 规格ID
system_id: '2', // 系统ID
brand_id: '3', // 品牌ID
classify_id: '4', // 分类ID
images: [ // 拍照要求示意图
'https://qn-static.banshouhui.com/live_mark.png',
'https://qn-static.banshouhui.com/live_mark.png',
'https://qn-static.banshouhui.com/live_mark.png'
],
main_point: [] // 要点
}
} }
}, },
computed: { computed: {
...@@ -68,7 +80,8 @@ ...@@ -68,7 +80,8 @@
uni.hideTabBar() uni.hideTabBar()
this.takeStatus = true this.takeStatus = true
}, },
closeTake() { closeTake(img) {
console.log(img)
this.takeStatus = false this.takeStatus = false
} }
} }
......
<template> <template>
<view class="u-wrap"> <view class="u-wrap">
<view class="u-search-box"> <u-tabs-swiper ref="tabs" :current="tabIndex" :list="list" :is-scroll="false" bg-color="#2272FF" inactive-color="#a6c6ff" active-color="#fff" height="120"></u-tabs-swiper>
<view class="u-search-inner">
<u-icon name="search" color="#909399" :size="28"></u-icon>
<text class="u-search-text">搜索</text>
</view>
</view>
<view class="u-menu-wrap"> <view class="u-menu-wrap">
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop" <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
:scroll-into-view="itemId"> :scroll-into-view="itemId">
...@@ -23,9 +18,10 @@ ...@@ -23,9 +18,10 @@
<view class="title">{{groupItem.groupName}}</view> <view class="title">{{groupItem.groupName}}</view>
<view class="class-bd"> <view class="class-bd">
<u-form-item v-for="(item,itemIndex) in groupItem.item" :key="itemIndex" <u-form-item v-for="(item,itemIndex) in groupItem.item" :key="itemIndex"
label-position="top" :prop="item.fieldsName"> label-position="top" :prop="item.fieldsName" :border-bottom="false">
<view class="label" v-if="item.fieldsType!=='location'"> <view class="label" v-if="item.fieldsType!=='location'">
<text class="required" v-if="item.required">*</text> <!-- <text class="required" v-if="item.required">*</text> -->
<image class="item-image" :src="mixingImage" v-if="item.required"></image>
{{item.fieldsTitle}} {{item.fieldsTitle}}
</view> </view>
<template v-if="item.fieldsType"> <template v-if="item.fieldsType">
...@@ -95,7 +91,19 @@ ...@@ -95,7 +91,19 @@
// import XhRadio from '@/components/createCom/XhRadio.vue' // import XhRadio from '@/components/createCom/XhRadio.vue'
export default { export default {
data() { data() {
return { return {
list: [
{
name: '基础信息'
},
{
name: '勘察信息'
},
{
name: '安装信息'
}
],
tabIndex: 0,
scrollTop: 0, //tab标题的滚动条位置 scrollTop: 0, //tab标题的滚动条位置
oldScrollTop: 0, oldScrollTop: 0,
current: 0, // 预设当前项的值 current: 0, // 预设当前项的值
...@@ -163,7 +171,12 @@ ...@@ -163,7 +171,12 @@
this.getMenuItemTop() this.getMenuItemTop()
}, },
updated() { updated() {
console.log(this.form.name, 'form.name') //console.log(this.form.name, 'form.name')
},
computed: {
mixingImage() {
return process.uniEnv.qn_base_url + 'mixing.png'
}
}, },
methods: { methods: {
// 字段的值更新 // 字段的值更新
...@@ -193,7 +206,7 @@ ...@@ -193,7 +206,7 @@
// 将fieldType类型统一转换为公共组件判定类型 // 将fieldType类型统一转换为公共组件判定类型
let formType = '' let formType = ''
type = type.toLocaleLowerCase() type = type.toLocaleLowerCase()
console.log(type,'type') //console.log(type,'type')
switch (type) { switch (type) {
case 'text': case 'text':
case 'password': case 'password':
...@@ -206,6 +219,9 @@ ...@@ -206,6 +219,9 @@
break; break;
case 'select': case 'select':
formType = 'select' formType = 'select'
break
case 'radio':
formType = 'radio'
break break
case 'checkbox': case 'checkbox':
formType = 'checkbox' formType = 'checkbox'
...@@ -226,11 +242,11 @@ ...@@ -226,11 +242,11 @@
case 'time': case 'time':
formType = 'time' formType = 'time'
break break
// case 'file': case 'file':
// formType = 'XhFiles' formType = 'XhFiles'
// break break
} }
console.log(formType,'formType') //console.log(formType,'formType')
return formType return formType
}, },
// ------------------------- 以下方法为展示滚动切换 ------------------------- // ------------------------- 以下方法为展示滚动切换 -------------------------
...@@ -355,7 +371,14 @@ ...@@ -355,7 +371,14 @@
} }
} }
.class-item { .class-item {
padding: 50rpx;
.title {
font-weight: bold;
font-size: 32rpx;
line-height: 32rpx;
color: #333;
}
.label { .label {
color: #333; color: #333;
font-size: 28rpx; font-size: 28rpx;
...@@ -367,6 +390,12 @@ ...@@ -367,6 +390,12 @@
font-size: 28rpx; font-size: 28rpx;
line-height: 40rpx; line-height: 40rpx;
color: #fa3534; color: #fa3534;
}
.item-image {
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
} }
} }
...@@ -426,20 +455,20 @@ ...@@ -426,20 +455,20 @@
.u-tab-item-active { .u-tab-item-active {
position: relative; position: relative;
color: #000; color: #2272FF;
font-size: 30rpx; font-size: 30rpx;
font-weight: 600; font-weight: 600;
background: #fff; background: #fff;
} }
.u-tab-item-active::before { // .u-tab-item-active::before {
content: ""; // content: "";
position: absolute; // position: absolute;
border-left: 4px solid $u-type-primary; // border-left: 4px solid $u-type-primary;
height: 32rpx; // height: 32rpx;
left: 0; // left: 0;
top: 39rpx; // top: 39rpx;
} // }
.u-tab-view { .u-tab-view {
height: 100%; height: 100%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment