Skip to content

S
self-support
Commit 11a92117 authored by Damon's avatar Damon
Browse files
Options

完工配置表单

parent 4a5a743a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 277 additions and 1108 deletions
src/common/classify.data.js
View file @ 11a92117
This diff is collapsed.
src/components/createCom/XhCheckbox.vue
View file @ 11a92117
......@@ -51,16 +51,22 @@
</script>
<style lang="scss" scoped>
.list {
display: flex;
.txt {
color: #666;
padding: 10rpx;
&.active {
background-color: red;
color: #fff;
}
display: flex;
flex-wrap: wrap;
.txt{
color:#666;
padding:10rpx 30rpx;
margin: 5rpx;
background: #F4F5F7;
border-radius: 10rpx;
display: flex;
flex-wrap: wrap;
line-height: 50rpx;
max-width: 48%;
&.active{
background-color: #2272FF;
color:#fff;
}
}
}
</style>
src/components/createCom/XhFiles.vue
View file @ 11a92117
<!-- ******************* 文件上传 ******************* -->
<template>
<view class="file-box">
<view class="u-flex" @click="selectUpload">
<!-- <view class="u-flex">
<view class="txt u-flex-1">{{item.fieldsTitle}}</view>
<u-icon name="arrow-right" color="#666" size="28"></u-icon>
</view>
<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>
<!-- <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-popup v-model="maskShow" mode="center" width="500">
<view class="upload-box u-p-30">
<view class="title">请选择图片</view>
<view class="u-flex u-row-between">
<view class="upload-item u-text-center" @click="uploadFile('photo')">
<u-image class="pic" width="170rpx" height="170" src="'https://cdn.uviewui.com/uview/example/fade.jpg"></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 class="pics u-flex u-flex-wrap">
<view class="img-list" v-for="(item,index) in imgList" :key="index">
<u-image class="pic" width="170" height="170" :src="item.path" @click.stop="prviewImage(item.path,index)"></u-image>
<view class="icon-del-box" @click.stop="delFile(index)">
<view class="icon-del"></view>
<view class="icon-del rotate"></view>
</view>
</view>
<view class="img-list" @click="choose">
<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>
</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>
</template>
......@@ -38,7 +33,15 @@
filters:{},
data() {
return {
maskShow:false
maskShow:false,
list: [
{
text: '相册'
},
{
text: '拍照'
}
]
}
},
computed: {
......@@ -52,6 +55,13 @@
selectUpload(){
// 弹窗展示
this.maskShow = true
},
uploadSelect(index) {
if (index === 0) {
this.uploadFile('photo')
} else {
this.uploadFile()
}
},
async uploadFile(type){
const self = this
......@@ -59,7 +69,9 @@
// 直接打开相册
let config = {
options:{
sourceType:['album'],//['album', 'camera']
sourceType:['album'],//['album', 'camera']
count: 5,
sizeType: ['compressed']
}
}
await this.chooseImage('qiniu',config)
......@@ -73,8 +85,18 @@
const dataValue = []
this.imgList.map(item=>{
dataValue.push(item.key)
})
})
console.log(this.imgList)
this.valueChange(dataValue)
},
prviewImage(url, index) {
uni.previewImage({
urls: [url],
current: index
});
},
delFile(index) {
this.imgList.splice(index, 1)
}
}
}
......@@ -86,7 +108,43 @@
&:nth-child(3n){
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 {
// display: flex;
......
src/components/createCom/XhInput.vue
View file @ 11a92117
<!-- ******************* 输入框 ******************* -->
<template>
<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>
</template>
......@@ -16,8 +16,9 @@
return {}
},
computed: {
type() {
if (this.item && this.item.fieldsType == 'password') {
type() {
console.log(this.item)
if (this.item && this.item.fieldsType == 'password' || this.item.fieldsType == 'textarea') {
return this.item.fieldsType
} else {
return 'text'
......@@ -30,5 +31,8 @@
}
</script>
<style>
<style scoped>
.input-item{
background: #F4F5F7;
}
</style>
src/components/createCom/XhLocation.vue
View file @ 11a92117
<!-- ******************* 定位 ******************* -->
<template>
<view class="list u-flex u-row-between">
<text class="required" v-if="item.required">*</text>
<view class="u-m-r-20">{{item.fieldsTitle}}</view>
<view class="u-flex-1">{{valueTxt || ''}}</view>
<u-button type="primary" size="mini" @click="$u.debounce(getLocation,1000)">默认按钮</u-button>
<template>
<view>
<view class="list u-flex u-row-between">
<image class="item-image" :src="mixingImage" v-if="item.required"></image>
<view class="u-m-r-20">{{item.fieldsTitle}}</view>
<!-- <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>
</template>
......@@ -23,14 +28,19 @@
valueTxt() {
let str = ''
const dataValue = this.dataValue
if(dataValue && dataValue.length>1){
if(dataValue && dataValue.length>1){
str = '经度：'+dataValue[0]+','+'维度：'+dataValue[1]
}
return str
},
mixingImage() {
return process.uniEnv.qn_base_url + 'mixing.png'
}
},
watch: {},
mounted() {},
created() {
this.getLocation()
},
methods: {
getLocation() {
let self = this
......@@ -59,5 +69,18 @@
font-size: 28rpx;
line-height: 40rpx;
color: #fa3534;
}
.item-image {
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
}
.location-name {
color: #2272FF;
text-align: right;
}
.location {
background: #F4F5F7;
padding: 10rpx;
}
</style>
src/components/createCom/XhMultiInput.vue
View file @ 11a92117
<!-- ******************* 多个输入框 ******************* -->
<template>
<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>
</template>
......@@ -40,8 +40,10 @@
}
</script>
<style>
<style scoped>
.input-item{
width:33.3%;
width: 31%;
margin: 5rpx;
background: #F4F5F7;
}
</style>
src/components/createCom/XhRadio.vue
View file @ 11a92117
......@@ -17,7 +17,7 @@
return {}
},
computed: {
settings(){
settings(){
return this.item.settings || []
}
},
......@@ -33,14 +33,23 @@
</script>
<style lang="scss" scoped>
.list{
display: flex;
.txt{
color:#666;
padding:10rpx;
&.active{
background-color: red;
color:#fff;
}
display: flex;
flex-wrap: wrap;
.txt{
color:#666;
padding:10rpx 30rpx;
margin: 5rpx;
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>
src/components/createCom/XhScan.vue
View file @ 11a92117
<!-- ******************* 扫码 ******************* -->
<template>
<view class="">
<view class="u-flex">
请输入：<u-input class="u-flex-1" v-model="dataValue" @input="valueChange" type="text" />
<view class="">
<view class="u-flex" @click="scanCode">
<view class="txt u-flex-1">扫描二维码（仅挚达充电桩可扫描）</view>
<u-icon name="arrow-right" color="#666" size="28"></u-icon>
</view>
<view class="u-flex" @click="scanCode">
<view class="txt u-flex-1">扫描二维码（仅挚达充电桩可扫描）</view>
<u-icon name="arrow-right" color="#666" size="28"></u-icon>
<view class="u-flex">
<u-input class="u-flex-1 input-item" v-model="dataValue" @input="valueChange" type="text" />
</view>
</view>
</template>
<script>
......@@ -62,5 +61,8 @@
font-size: 28rpx;
line-height: 40rpx;
color: #fa3534;
}
.input-item{
background: #F4F5F7;
}
</style>
src/pages.json
View file @ 11a92117
......@@ -20,7 +20,9 @@
{
"path": "pages/order/complete",
"style": {
"navigationBarTitleText": "订单-完工配置"
"navigationBarTitleText": "订单-完工配置",
"navigationBarBackgroundColor": "#2272FF",
"navigationBarTextStyle": "white"
}
},{
"path": "pages/order/feedback",
......
src/pages/mine/index.vue
View file @ 11a92117
......@@ -31,7 +31,7 @@
</u-cell-group>
</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>
</template>
......@@ -45,7 +45,19 @@
return {
pic:'https://uviewui.com/common/logo.png',
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: {
......@@ -68,7 +80,8 @@
uni.hideTabBar()
this.takeStatus = true
},
closeTake() {
closeTake(img) {
console.log(img)
this.takeStatus = false
}
}
......
src/pages/order/complete.vue
View file @ 11a92117
<template>
<view class="u-wrap">
<view class="u-search-box">
<view class="u-search-inner">
<u-icon name="search" color="#909399" :size="28"></u-icon>
<text class="u-search-text">搜索</text>
</view>
</view>
<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-menu-wrap">
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
:scroll-into-view="itemId">
......@@ -23,9 +18,10 @@
<view class="title">{{groupItem.groupName}}</view>
<view class="class-bd">
<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'">
<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}}
</view>
<template v-if="item.fieldsType">
......@@ -95,7 +91,19 @@
// import XhRadio from '@/components/createCom/XhRadio.vue'
export default {
data() {
return {
return {
list: [
{
name: '基础信息'
},
{
name: '勘察信息'
},
{
name: '安装信息'
}
],
tabIndex: 0,
scrollTop: 0, //tab标题的滚动条位置
oldScrollTop: 0,
current: 0, // 预设当前项的值
......@@ -163,7 +171,12 @@
this.getMenuItemTop()
},
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: {
// 字段的值更新
......@@ -193,7 +206,7 @@
// 将fieldType类型统一转换为公共组件判定类型
let formType = ''
type = type.toLocaleLowerCase()
console.log(type,'type')
//console.log(type,'type')
switch (type) {
case 'text':
case 'password':
......@@ -206,6 +219,9 @@
break;
case 'select':
formType = 'select'
break
case 'radio':
formType = 'radio'
break
case 'checkbox':
formType = 'checkbox'
......@@ -226,11 +242,11 @@
case 'time':
formType = 'time'
break
// case 'file':
// formType = 'XhFiles'
// break
case 'file':
formType = 'XhFiles'
break
}
console.log(formType,'formType')
//console.log(formType,'formType')
return formType
},
// ------------------------- 以下方法为展示滚动切换 -------------------------
......@@ -355,7 +371,14 @@
}
}
.class-item {
.class-item {
padding: 50rpx;
.title {
font-weight: bold;
font-size: 32rpx;
line-height: 32rpx;
color: #333;
}
.label {
color: #333;
font-size: 28rpx;
......@@ -367,6 +390,12 @@
font-size: 28rpx;
line-height: 40rpx;
color: #fa3534;
}
.item-image {
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
}
}
......@@ -426,20 +455,20 @@
.u-tab-item-active {
position: relative;
color: #000;
color: #2272FF;
font-size: 30rpx;
font-weight: 600;
background: #fff;
}
.u-tab-item-active::before {
content: "";
position: absolute;
border-left: 4px solid $u-type-primary;
height: 32rpx;
left: 0;
top: 39rpx;
}
// .u-tab-item-active::before {
// content: "";
// position: absolute;
// border-left: 4px solid $u-type-primary;
// height: 32rpx;
// left: 0;
// top: 39rpx;
// }
.u-tab-view {
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