792 lines
20 KiB
Vue
792 lines
20 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="idcard">
|
||
<view class="idcardInfo-name">
|
||
{{userData.nickname}}
|
||
</view>
|
||
<view class="idcardInfo-label">
|
||
{{userData.username}}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="idcardBorder">
|
||
<view class="idcardTitle">
|
||
添加基本信息
|
||
</view>
|
||
<!-- 信用卡信息 -->
|
||
<block v-if="serviceArr.length > 0">
|
||
<view class="idcardAdd" v-for="(item, index) in serviceArr" :key="index">
|
||
<view class="idcardBottom" :class="{active : item.openState}">
|
||
<!-- 机构 -->
|
||
<view class="idcardAdd-block">
|
||
<view class="idcardAdd-block-name">
|
||
<view class="idcardAdd-block-see">
|
||
<text>*</text>咨询类型
|
||
</view>
|
||
<view class="locationActive" v-if="!item.openState">
|
||
<text>{{item.institution[item.institutionIndex].title}}</text>
|
||
<text>{{item.fromType[item.fromIndex].title}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="idcardAdd-block-write">
|
||
<picker :value="item.institutionIndex" @change="institutionChange($event, item, index)" :range="item.institution" range-key="title">
|
||
<view class="uni-input">{{item.institution[item.institutionIndex].title}}</view>
|
||
</picker>
|
||
<image src="@/static/imgs/basic_down.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="idcardAdd-block-remove" @click="onRemove(index)" v-if="serviceArr.length > 1">
|
||
<image src="@/static/imgs/removeIcon.png" mode="widthFix"></image>移出
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 业务类型 -->
|
||
<view class="idcardAdd-block">
|
||
<view class="idcardAdd-block-name">
|
||
<view class="idcardAdd-block-see">
|
||
<text>*</text>业务类型
|
||
</view>
|
||
</view>
|
||
<view class="idcardAdd-block-write">
|
||
<picker class="idcardAdd-picker" :range="item.fromType" range-key="title" :value="item.fromIndex" @change="businessChange($event, item, index)">
|
||
<view class="institution-picker-text nowrap">{{item.fromType[item.fromIndex].title}}</view>
|
||
</picker>
|
||
<!-- <mouldPicker class="idcardAdd-picker" ref="child" :bank-list="item.fromType" :bank-value="item.fromIndex" @bankPicker="businessChange($event, item, index)"></mouldPicker> -->
|
||
<image src="@/static/imgs/basic_down.png" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 表单部分 -->
|
||
<block v-for="(keyItem, keyIndex) in item.froms" :key="keyIndex" v-if="item.subVal[keyIndex.pre_key] == keyIndex.pre_value">
|
||
<view class="idcardAdd-block" v-if="keyItem.pre_key == null || keyItem.pre_value == item.subVal[keyItem.pre_key]">
|
||
<view class="idcardAdd-block-name">
|
||
<view class="idcardAdd-block-see">
|
||
<text>*</text>{{keyItem.title}}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 单输入框 -->
|
||
<view class="idcardAdd-block-write" v-if="keyItem.type === 'price' || keyItem.type === 'number' || keyItem.type === 'day' || keyItem.type === 'text'">
|
||
<mouldInput :blur-value="item.subVal[keyItem.key]" class="idcardAdd-input" :input-type="keyItem.type" @onValue="($event) => {item.subVal[keyItem.key] = $event}"></mouldInput>
|
||
</view>
|
||
|
||
<!-- 单选 -->
|
||
<view class="idcardAdd-aline" v-if="keyItem.type === 'radio'">
|
||
<radio-group @change="item.subVal[keyItem.key] = $event.detail.value">
|
||
<label class="idcardAdd-aline-write" v-for="(radioItem, radioIndex) in keyItem.options" :key="radioIndex">
|
||
<radio class="radio-input" color="#446EFE" style="transform:scale(.65)" :checked="radioIndex === item.subVal[keyItem.key]" :value="radioIndex"/>{{radioItem}}
|
||
</label>
|
||
</radio-group>
|
||
<!-- <mouldRadio :radio-list="keyItem.options" @onRadio="($event) => {item.subVal[keyItem.key] = $event}"></mouldRadio> -->
|
||
</view>
|
||
|
||
<!-- 多选 -->
|
||
<block v-if="keyItem.type === 'checkbox'">
|
||
<!-- <checkbox-group @change="item.subVal[keyItem.key] = $event.detail.value">
|
||
<view class="idcardAdd-multi-write" v-for="(letterItem, letterIndex) in keyItem.options" :key="letterIndex">
|
||
<checkbox :value="letterIndex.toString()" color="#4e7bfe" style="transform:scale(.6); margin-top: -3rpx;"/>
|
||
<text>{{letterItem}}</text>
|
||
</view>
|
||
</checkbox-group> -->
|
||
<mouldCheckbox :checkbox-list="keyItem.options" :checkbox-vlaue="item.subVal[keyItem.key] || []" @onCheckbox="($event) => {item.subVal[keyItem.key] = $event}"></mouldCheckbox>
|
||
</block>
|
||
|
||
<!-- 下拉框 -->
|
||
<view class="idcardAdd-block-write" v-if="keyItem.type === 'select'">
|
||
<picker class="idcardAdd-picker" :value="item.subVal[keyItem.key] ? item.subVal[keyItem.key] : '0'" :range="keyItem.options" @change="item.subVal[keyItem.key] = $event.detail.value">
|
||
<view class="uni-input" v-if="item.subVal[keyItem.key]">{{keyItem.options[item.subVal[keyItem.key]]}}</view>
|
||
<view class="uni-input" v-else>{{keyItem.options[0]}}</view>
|
||
</picker>
|
||
<image src="@/static/imgs/basic_down.png" mode="aspectFill"></image>
|
||
</view>
|
||
|
||
<!-- 描述 -->
|
||
<view class="idcardAdd-block-write idcardAdd-depict" v-if="keyItem.type === 'textarea'">
|
||
<mouldText class="idcardAdd-depict-textarea" :blur-value="item.subVal[keyItem.key]" @onTextarea="($event) => {item.subVal[keyItem.key] = $event}"></mouldText>
|
||
</view>
|
||
|
||
</view>
|
||
</block>
|
||
</view>
|
||
|
||
<view class="open">
|
||
<view class="open-text" @click="recordTap(index)">
|
||
<image src="@/static/imgs/openArrow.png" mode="widthFix" :class="{active : item.openState}"></image>{{item.openState ? '收起' : '展开'}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="noContent">
|
||
<image class="noContent-img" src="@/static/imgs/basic_tips.png" mode="widthFix"></image>
|
||
<view class="noContent-name">
|
||
什么都没有，好无聊......
|
||
</view>
|
||
<view class="noContent-btn" @click="addTypePop = true">
|
||
添加新信息
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<view class="reminder">
|
||
<image class="reminder-img" src="@/static/imgs/reminderIcon.png"></image>
|
||
<view class="reminder-text">温馨提示：为了匹配最准确方案，请如实填写信息</view>
|
||
</view>
|
||
<view class="idcardBtn">
|
||
<view class="idcardBtn-go active" @click="addTypePop = true">
|
||
添加新信息
|
||
</view>
|
||
<view class="idcardBtn-go" @click="onSubmit">
|
||
确认提交
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 选择添加类型 -->
|
||
<view class="addType-back" v-if="addTypePop"></view>
|
||
<view class="addType-cont" v-if="addTypePop">
|
||
<view class="addType-title">
|
||
请选择业务类型
|
||
</view>
|
||
<block v-for="(item, index) in businessArr" :key="index">
|
||
<view class="create-type-item" :class="{'active': item.business_id == businessId}" @click="onAdd(item.business_id, item.title)">
|
||
<image class="create-type-icon" :src="item.cover_url" mode="aspectFill"></image>
|
||
<view class="create-type-text">
|
||
<view class="title nowrap">{{item.title || '-'}}</view>
|
||
<view class="submit nowrap">{{item.subtitle || '-'}}</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<image class="addType-close" src="/static/imgs/payClose.png" mode="aspectFill" @click="addTypePop = false"></image>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { workIndex, workOne, workLevel, workStore } from '@/apis/interfaces/index'
|
||
import { userBasic } from '@/apis/interfaces/user'
|
||
|
||
import mouldCheckbox from '@/components/mould-checkbox.vue'
|
||
import mouldInput from '@/components/mould-input.vue'
|
||
import mouldRadio from '@/components/mould-radio.vue'
|
||
import mouldText from '@/components/mould-text.vue'
|
||
import mouldPicker from '@/components/mould-picker.vue'
|
||
export default {
|
||
components: {
|
||
mouldCheckbox,
|
||
mouldInput,
|
||
mouldRadio,
|
||
mouldText,
|
||
mouldPicker
|
||
},
|
||
data() {
|
||
return {
|
||
businessArr: [],
|
||
businessId : '',
|
||
serviceArr : [],
|
||
addTypePop : false,
|
||
userData : '',
|
||
reminder : '', // 温馨提示
|
||
}
|
||
},
|
||
created() {
|
||
let { businessId, businessTitle } = this.$Route.query
|
||
this.getInstitution(businessId, businessTitle)
|
||
this.getBusiness()
|
||
},
|
||
|
||
onShow() {
|
||
// 获取用户姓名手机号性别
|
||
userBasic().then(res => {
|
||
this.userData = res
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
|
||
methods: {
|
||
// 获取主业务
|
||
getBusiness(){
|
||
workIndex().then(res => {
|
||
this.businessArr = res
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
|
||
// 获取主业务机构
|
||
getInstitution(businessId, businessTitle){
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
})
|
||
workOne(businessId).then(institutionArr => {
|
||
let forms = this.getForms(institutionArr[0].institution_id)
|
||
forms.then(val => {
|
||
this.servicePush( val, institutionArr, businessTitle, businessId )
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
// 获取业务类型
|
||
async getForms(businessId){
|
||
return await workLevel(businessId)
|
||
},
|
||
|
||
// 组织业务表单数据
|
||
servicePush( vals, institutionArr, businessTitle, businessId ){
|
||
let fromType = [],
|
||
fromsVal = {},
|
||
froms = vals[0].params
|
||
|
||
fromType = vals.map((val) => {
|
||
return {
|
||
type_id: val.type_id,
|
||
title : val.title
|
||
}
|
||
})
|
||
froms.map(val => {
|
||
fromsVal[val.key] = ''
|
||
})
|
||
|
||
// 新增卡片
|
||
this.serviceArr.push({
|
||
title : businessTitle,
|
||
institution : institutionArr,
|
||
allInstitution : vals,
|
||
institutionIndex: 0,
|
||
fromType : fromType,
|
||
openState : false,
|
||
fromIndex : 0,
|
||
froms : froms,
|
||
subVal : {
|
||
business_id : Number(businessId),
|
||
institution_id : institutionArr[0].institution_id,
|
||
type_id : fromType[0].type_id,
|
||
...fromsVal
|
||
}
|
||
})
|
||
this.serviceArr.forEach((item, index) => {
|
||
return index == (this.serviceArr.length - 1) ? item.openState = true : item.openState = false
|
||
})
|
||
},
|
||
|
||
// 机构变更更新业务
|
||
institutionChange(e, old, index){
|
||
let { value } = e.detail;
|
||
let businessId = old.subVal.business_id
|
||
|
||
// 获取机构的子业务类型
|
||
let forms = this.getForms(old.institution[value].institution_id)
|
||
forms.then(institutionVal => {
|
||
let newObj = old
|
||
let fromType = []
|
||
let params = institutionVal[0].params
|
||
let paramsVal = []
|
||
|
||
// 业务类型
|
||
fromType = institutionVal.map(val => {
|
||
return {
|
||
type_id: val.type_id,
|
||
title : val.title
|
||
}
|
||
})
|
||
// 提交字段
|
||
params.map(val => {
|
||
paramsVal[val.key] = ''
|
||
})
|
||
// 更新数据
|
||
newObj.allInstitution = institutionVal;
|
||
newObj.institutionIndex = value;
|
||
newObj.fromType = fromType;
|
||
newObj.fromIndex = 0;
|
||
newObj.froms = params;
|
||
newObj.subVal = {
|
||
business_id : old.subVal.business_id,
|
||
institution_id : old.institution[value].institution_id,
|
||
type_id : fromType[0].type_id,
|
||
...paramsVal
|
||
}
|
||
this.$set(this.serviceArr, index, newObj)
|
||
})
|
||
},
|
||
|
||
// 业务变更
|
||
businessChange(e, old, index){
|
||
let { value } = e.detail;
|
||
let businessId = old.subVal.business_id;
|
||
let allInstitution = old.allInstitution
|
||
let newObj = old
|
||
let params = allInstitution[value].params
|
||
let paramsVal = {}
|
||
|
||
params.map(val => {
|
||
paramsVal[val.key] = ''
|
||
})
|
||
|
||
newObj.fromIndex = value;
|
||
newObj.froms = params;
|
||
newObj.subVal = {
|
||
business_id : old.subVal.business_id,
|
||
institution_id : old.subVal.institution_id,
|
||
type_id : allInstitution[value].type_id,
|
||
...paramsVal
|
||
}
|
||
this.$set(this.serviceArr, index, newObj)
|
||
},
|
||
|
||
// 添加主业务
|
||
onAdd(id, title){
|
||
this.addTypePop = false
|
||
this.getInstitution(id, title)
|
||
},
|
||
|
||
// 列表展开
|
||
recordTap(index) {
|
||
var listData = this.serviceArr
|
||
var helpFlag = this.serviceArr[index].openState
|
||
listData.forEach((item) => {
|
||
item.openState = false
|
||
})
|
||
listData[index].openState = !helpFlag
|
||
this.serviceArr = listData
|
||
},
|
||
|
||
// 移出选项
|
||
onRemove(index){
|
||
this.serviceArr.splice(index, 1)
|
||
},
|
||
|
||
// 提交订单数据
|
||
onSubmit(){
|
||
let dataVal = this.serviceArr.map(val => {
|
||
return val.subVal
|
||
})
|
||
workStore({
|
||
type : 'self',
|
||
data : dataVal,
|
||
channel: 'h5'
|
||
}).then(res => {
|
||
this.$Router.push({name: 'sheetPay', params: {id: res.business_order_id}})
|
||
}).catch( err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
|
||
// 多选
|
||
checkboxChange() {
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.idcardBorder {
|
||
border-bottom: 200rpx solid transparent;
|
||
background-color: #ffffff;
|
||
border-radius: $radius * 2 $radius * 2 0 0;
|
||
position: relative;
|
||
padding: $padding;
|
||
box-sizing: border-box;
|
||
top: -100rpx;
|
||
}
|
||
.idcard {
|
||
margin-bottom: $margin * 2;
|
||
background-color: $mian-color;
|
||
color: #ffffff;
|
||
display: flex;
|
||
padding: $padding * 2 $padding $padding * 3;
|
||
.idcardInfo-name {
|
||
flex: 1;
|
||
}
|
||
}
|
||
.idcardTitle {
|
||
color: $mian-color;
|
||
font-size: $title-size + 4;
|
||
font-weight: 600;
|
||
margin-bottom: $margin;
|
||
}
|
||
.idcardAdd {
|
||
background-color: #ffffff;
|
||
box-shadow: 0 0 20rpx rgba(0, 0, 0, .1);
|
||
border-radius: $radius;
|
||
padding: $padding;
|
||
box-sizing: border-box;
|
||
margin-bottom: $margin;
|
||
overflow: hidden;
|
||
position: relative;
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.idcardAdd-title {
|
||
display: flex;
|
||
.idcardAdd-name {
|
||
flex: 1;
|
||
color: #446EFE;
|
||
font-weight: 600;
|
||
}
|
||
.idcardAdd-tel {
|
||
display: flex;
|
||
font-size: $title-size-sm;
|
||
background-color: #ffeded;
|
||
color: #FF0000;
|
||
border-radius: $radius;
|
||
padding: 0 15rpx 0 10rpx;
|
||
line-height: 44rpx;
|
||
.idcardAdd-btn {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin: 7rpx 6rpx 0 0;
|
||
}
|
||
}
|
||
}
|
||
.idcardBottom {
|
||
height: 45rpx;
|
||
transition: .5s;
|
||
border-bottom: 100rpx solid transparent;
|
||
&.active {
|
||
height: auto;
|
||
}
|
||
}
|
||
.idcardAdd-block {
|
||
margin-bottom: $margin + 10;
|
||
position: relative;
|
||
.idcardAdd-block-name {
|
||
margin-bottom: $margin;
|
||
display: flex;
|
||
.idcardAdd-block-see {
|
||
color: $text-color;
|
||
font-weight: 600;
|
||
margin-right: $margin;
|
||
text {
|
||
color: $mian-color;
|
||
padding-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
.idcardAdd-block-write {
|
||
background-color: #F6F6F6;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
border-radius: $radius-sm;
|
||
padding: 0 $padding;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
display: flex;
|
||
width: 100%;
|
||
picker {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0 $padding;
|
||
box-sizing: border-box;
|
||
}
|
||
.idcardAdd-input {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
}
|
||
.placeholderClass {
|
||
color: #999999;
|
||
}
|
||
image {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
position: absolute;
|
||
top: $margin;
|
||
right: $margin;
|
||
}
|
||
}
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.idcardAdd-block-remove {
|
||
background-color: #FBE7EE;
|
||
display: inline-block;
|
||
color: $mian-color;
|
||
position: absolute;
|
||
font-size: $title-size-sm;
|
||
padding: 0 $padding - 10;
|
||
line-height: 44rpx;
|
||
border-radius: 50rpx;
|
||
top: 0;
|
||
right: 0;
|
||
image {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 10rpx;
|
||
vertical-align: -2rpx;
|
||
}
|
||
}
|
||
}
|
||
.open {
|
||
text-align: center;
|
||
position: absolute;
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
z-index: 2;
|
||
left: 0;
|
||
bottom: 0;
|
||
padding: $padding 0;
|
||
.open-text {
|
||
background-color: #FBE7EE;
|
||
display: inline-block;
|
||
color: $mian-color;
|
||
padding: 0 $padding - 10;
|
||
line-height: 58rpx;
|
||
font-size: $title-size-m;
|
||
border-radius: $radius-sm;
|
||
image {
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
margin-right: 10rpx;
|
||
transition: .2s;
|
||
&.active {
|
||
transform:rotate(180deg)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.idcardAdd-aline {
|
||
display: flex;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
.idcardAdd-picker {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
image {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
position: absolute;
|
||
top: $margin;
|
||
right: $margin;
|
||
}
|
||
}
|
||
.idcardAdd-aline-name {
|
||
flex: 1;
|
||
text {
|
||
color: $mian-color;
|
||
padding-right: 10rpx;
|
||
}
|
||
}
|
||
.idcardAdd-depict {
|
||
line-height: 28rpx !important;
|
||
height: auto !important;
|
||
position: relative;
|
||
.idcardAdd-depict-number {
|
||
position: absolute;
|
||
text-align: right;
|
||
bottom: $padding;
|
||
right: $padding;
|
||
color: #999999;
|
||
font-size: $title-size-sm;
|
||
}
|
||
.idcardAdd-depict-textarea {
|
||
padding: $padding 0;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
.noContent {
|
||
text-align: center;
|
||
padding-top: $padding * 5;
|
||
.noContent-img {
|
||
width: 43%;
|
||
margin: 0 auto;
|
||
}
|
||
.noContent-name {
|
||
line-height: 60rpx;
|
||
color: #999999;
|
||
font-size: $title-size-lg;
|
||
}
|
||
.noContent-btn {
|
||
display: inline-block;
|
||
background-color: #ff7331;
|
||
color: #ffffff;
|
||
border-radius: $radius * 5;
|
||
text-align: center;
|
||
font-size: $title-size-lg;
|
||
padding: 0 $padding + 10;
|
||
line-height: 78rpx;
|
||
margin-top: $margin + 10;
|
||
}
|
||
}
|
||
|
||
.reminder {
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 150rpx;
|
||
background-color: #ffffff;
|
||
z-index: 10;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 25rpx $padding;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
color: #FEA044;
|
||
font-size: $title-size-lg;
|
||
border-bottom: 2rpx solid #f5f5f5;
|
||
.reminder-img {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-top: 8rpx;
|
||
}
|
||
.reminder-text {
|
||
width: calc(100% - 52rpx);
|
||
font-size: $title-size-m;
|
||
margin-left: 20rpx;
|
||
line-height: 42rpx;
|
||
}
|
||
}
|
||
|
||
.idcardBtn {
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
background-color: #ffffff;
|
||
z-index: 9;
|
||
width: 100%;
|
||
height: 150rpx;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
.idcardBtn-go {
|
||
width: calc(50% - 20rpx);
|
||
margin: $margin 10rpx;
|
||
background-color: $mian-color;
|
||
color: #ffffff;
|
||
border-radius: $radius-lg;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
font-size: $title-size;
|
||
text-align: center;
|
||
border: 2rpx solid #ffffff;
|
||
&.active {
|
||
background-color: #ffffff;
|
||
border-color: $mian-color;
|
||
color: $mian-color;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 业务类型
|
||
.addType-back {
|
||
background-color: rgba(0, 0, 0, .6);
|
||
position: fixed;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 99;
|
||
}
|
||
.addType-cont {
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
z-index: 100;
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
padding: $padding $padding + 10;
|
||
box-sizing: border-box;
|
||
transition: .2s;
|
||
.addType-close {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 40rpx;
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
}
|
||
.addType-title {
|
||
line-height: 60rpx;
|
||
margin-bottom: $margin + 10;
|
||
font-size: $title-size + 2;
|
||
}
|
||
.addType-type {
|
||
padding: $padding;
|
||
box-sizing: border-box;
|
||
}
|
||
.create-type-item {
|
||
border-radius: $radius-m;
|
||
padding: $padding;
|
||
box-sizing: border-box;
|
||
margin-bottom: 30rpx;
|
||
border:solid 1rpx #f8f8f8;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
box-shadow: 0 0 5rpx rgba(0, 0, 0, .05);
|
||
position: relative;
|
||
.create-type-icon{
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
margin-right: $margin;
|
||
background-color: white;
|
||
border-radius: $radius;
|
||
}
|
||
.create-type-text{
|
||
line-height: 50rpx;
|
||
.title{
|
||
font-size: 30rpx;
|
||
}
|
||
.submit{
|
||
color: gray;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
}
|
||
.addType-btn {
|
||
display: flex;
|
||
padding: $padding + 10 $padding - 10 10rpx;
|
||
box-sizing: border-box;
|
||
.addType-labor {
|
||
flex: 2;
|
||
margin: 0 $margin - 10;
|
||
text-align: center;
|
||
background-color: #FEA044;
|
||
color: #ffffff;
|
||
border-radius: $radius-m;
|
||
line-height: 74rpx;
|
||
font-size: $title-size-lg;
|
||
border: 2rpx solid #FEA044;
|
||
&:first-child {
|
||
background-color: #ffffff;
|
||
color: #FEA044;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 收起定位样式
|
||
.locationActive {
|
||
display: inline-block;
|
||
text {
|
||
display: inline-block;
|
||
background-color: #FFF7EB;
|
||
color: #FBAF3B !important;
|
||
font-weight: normal;
|
||
font-size: $title-size-sm;
|
||
margin-left: $margin - 10;
|
||
border-radius: $radius*3;
|
||
padding: 0 $padding - 10 !important;
|
||
height: 48rpx;
|
||
line-height: 48rpx;
|
||
}
|
||
}
|
||
</style> |