uu
This commit is contained in:
aihe
parent
4bcf155200
commit
109dc41604
@ -12,6 +12,17 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.com-chk-icon{
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.com-section{
|
||||
position: relative;
|
||||
font-size: 32rpx;
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
<u-col span="10">
|
||||
<u-text size="28" :text="dlCurrent.item.title"></u-text>
|
||||
</u-col>
|
||||
<view span="2" class="chk-icon">
|
||||
<view span="2" class="com-chk-icon">
|
||||
<u-checkbox-group>
|
||||
<u-checkbox :checked="dlCurrent.checked" shape="circle" size="32" activeColor="#B12D29"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
@ -99,15 +99,5 @@
|
||||
.shet-cont{
|
||||
padding: 10rpx 0 30rpx 0;
|
||||
}
|
||||
.chk-icon{
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -14,7 +14,7 @@
|
||||
<u-col span="10">
|
||||
<u-text size="30" :text="dlCurrent.item.title"></u-text>
|
||||
</u-col>
|
||||
<view v-if="dlCurrent.item.val != payTypeEnum.postMonth" span="2" class="chk-icon">
|
||||
<view v-if="dlCurrent.item.val != payTypeEnum.postMonth" span="2" class="com-chk-icon">
|
||||
<u-checkbox-group>
|
||||
<u-checkbox :checked="dlCurrent.checked" shape="circle" size="32" activeColor="#B12D29"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
@ -36,7 +36,7 @@
|
||||
<u-col span="10">
|
||||
{{caCurrent.item.title}}
|
||||
</u-col>
|
||||
<view span="2" class="chk-icon">
|
||||
<view span="2" class="com-chk-icon">
|
||||
<u-checkbox-group>
|
||||
<u-checkbox :checked="caCurrent.checked" shape="circle" size="32" activeColor="#B12D29"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
@ -156,17 +156,6 @@
|
||||
.shet-cont{
|
||||
padding: 10rpx 0 30rpx 0;
|
||||
}
|
||||
.chk-icon{
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.pay-item {
|
||||
margin-bottom: 30rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
|
||||
@ -167,17 +167,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.chk-icon{
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.day-item{
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<u-col span="10">
|
||||
<u-text size="28" :text="dlCurrent.item.title"></u-text>
|
||||
</u-col>
|
||||
<view span="2" class="chk-icon">
|
||||
<view span="2" class="com-chk-icon">
|
||||
<u-checkbox-group>
|
||||
<u-checkbox :checked="dlCurrent.checked" shape="circle" size="32" activeColor="#B12D29"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
@ -137,17 +137,6 @@
|
||||
.shet-cont{
|
||||
padding: 10rpx 0 30rpx 0;
|
||||
}
|
||||
.chk-icon{
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.w-tem {
|
||||
margin-top: 20rpx;
|
||||
position: relative;
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
<u-col span="10">
|
||||
<u-text size="28" :text="dlCurrent.item.title"></u-text>
|
||||
</u-col>
|
||||
<view span="2" class="chk-icon">
|
||||
<view span="2" class="com-chk-icon">
|
||||
<u-checkbox-group>
|
||||
<u-checkbox :checked="dlCurrent.checked" shape="circle" size="32" activeColor="#B12D29"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
@ -100,15 +100,4 @@
|
||||
min-height: 500rpx;
|
||||
padding: 10rpx 0 30rpx 0;
|
||||
}
|
||||
.chk-icon{
|
||||
position: relative;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
90
components/tpx-select/content-items.vue
Normal file
90
components/tpx-select/content-items.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
|
||||
<view class="">
|
||||
<view class="">
|
||||
<tpx-checkitems :list="list" :value="value" v-slot="dlCurrent" :min-checked="minChecked" :type="type"
|
||||
@onChange="handleDataItemChange"
|
||||
>
|
||||
<view slot :class="`slt-item ${dlCurrent.checked?'active':''}`">
|
||||
<u-row justify="between">
|
||||
<view>
|
||||
{{ dlCurrent.item.title }}
|
||||
</view>
|
||||
<view v-if="dlCurrent.checked">
|
||||
<u-icon name="checkbox-mark" size="32" :bold="true"
|
||||
:custom-style="`${dlCurrent.checked?'color:#B12D29;':''}`"
|
||||
></u-icon>
|
||||
</view>
|
||||
</u-row>
|
||||
</view>
|
||||
</tpx-checkitems>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
// computed: {
|
||||
// filDataList() {
|
||||
// return []
|
||||
// },
|
||||
// },
|
||||
props: {
|
||||
minChecked: {
|
||||
default () {
|
||||
return 1
|
||||
}
|
||||
},
|
||||
type: {
|
||||
default () {
|
||||
return "single"
|
||||
}
|
||||
},
|
||||
show: {
|
||||
default () {
|
||||
return false
|
||||
}
|
||||
},
|
||||
value: {
|
||||
default () {
|
||||
return ''
|
||||
}
|
||||
},
|
||||
list: {
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
onHide() {
|
||||
|
||||
},
|
||||
destroyed() {},
|
||||
|
||||
methods: {
|
||||
handleDataItemChange(val) {
|
||||
this.$emit('onChange', val)
|
||||
this.$emit('update:value', val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.slt-item{
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
font-size: 28rpx;
|
||||
&.active{
|
||||
font-weight: 600;
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
75
components/tpx-select/default-select-input.vue
Normal file
75
components/tpx-select/default-select-input.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<view :class="contClass" style="margin-top: 0;">
|
||||
<u-row>
|
||||
<view style="flex: 1;">
|
||||
<u-text :text="leftText" size="28" :bold="true"></u-text>
|
||||
</view>
|
||||
<u-row>
|
||||
<u-icon size="22" :name="`${show?'arrow-up':'arrow-down'}`" color="#333"></u-icon>
|
||||
</u-row>
|
||||
</u-row>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
leftText() {
|
||||
let str = ''
|
||||
if(this.value) {
|
||||
const curItem = this.list.filter(item=> item.val == this.value)[0] || {}
|
||||
curItem.title && (str = curItem.title)
|
||||
} else {
|
||||
str = this.placeholder
|
||||
}
|
||||
return str
|
||||
},
|
||||
},
|
||||
props: {
|
||||
contClass: {
|
||||
default(){
|
||||
return 'blcok-grey radius-20 '
|
||||
}
|
||||
},
|
||||
placeholder: {
|
||||
default(){
|
||||
return ''
|
||||
}
|
||||
},
|
||||
show: {
|
||||
default(){
|
||||
return false
|
||||
}
|
||||
},
|
||||
value: {
|
||||
default(){
|
||||
return ''
|
||||
}
|
||||
},
|
||||
list: {
|
||||
default(){
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onHide() {
|
||||
|
||||
},
|
||||
destroyed() {},
|
||||
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
131
components/tpx-select/tpx-select.vue
Normal file
131
components/tpx-select/tpx-select.vue
Normal file
@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<view class="" style="position: relative;">
|
||||
<view @click="handleSelectSwitch">
|
||||
<slot v-if="customInput"></slot>
|
||||
<default-select-input v-if="!customInput" :placeholder="placeholder" :show="show" :list="list" :value="value"></default-select-input>
|
||||
</view>
|
||||
|
||||
<view v-if="mode == modeEnum.sheet">
|
||||
<tpx-dialog :show="show" :title="title || placeholder" @onClose="handleSelectSwitch">
|
||||
<content-items :value="value" :list="list" :minChecked="minChecked" :type="type"
|
||||
@onChange="handleDataItemChange"
|
||||
></content-items>
|
||||
</tpx-dialog>
|
||||
|
||||
</view>
|
||||
|
||||
<view v-if="mode == modeEnum.drop && show" class="md-drop-cont">
|
||||
<content-items :value="value" :list="list" :minChecked="minChecked" :type="type"
|
||||
@onChange="handleDataItemChange"
|
||||
></content-items>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentItems from "./content-items"
|
||||
import DefaultSelectInput from "./default-select-input"
|
||||
const modeEnum = {
|
||||
sheet: 'sheet',
|
||||
drop: 'drop'
|
||||
}
|
||||
|
||||
export default {
|
||||
// computed: {
|
||||
// filDataList() {
|
||||
// return []
|
||||
// },
|
||||
// },
|
||||
components: {
|
||||
ContentItems, DefaultSelectInput
|
||||
},
|
||||
props: {
|
||||
customInput: {
|
||||
default () {
|
||||
return false
|
||||
}
|
||||
},
|
||||
minChecked: {
|
||||
default () {
|
||||
return 1
|
||||
}
|
||||
},
|
||||
type: {
|
||||
default () {
|
||||
return "single"
|
||||
}
|
||||
},
|
||||
placeholder: {
|
||||
default () {
|
||||
return ""
|
||||
}
|
||||
},
|
||||
title: {
|
||||
default () {
|
||||
return ""
|
||||
}
|
||||
},
|
||||
mode: {
|
||||
default () {
|
||||
return modeEnum.sheet
|
||||
}
|
||||
},
|
||||
|
||||
value: {
|
||||
default () {
|
||||
return ""
|
||||
}
|
||||
},
|
||||
list: {
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
modeEnum: Object.assign({}, modeEnum)
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
onHide() {
|
||||
|
||||
},
|
||||
destroyed() {},
|
||||
|
||||
methods: {
|
||||
handleSelectSwitch() {
|
||||
// this.$emit('update:show', !this.show)
|
||||
this.show = !this.show
|
||||
},
|
||||
handleDataItemChange(val) {
|
||||
this.$emit('onChange', val)
|
||||
this.$emit('update:value', val)
|
||||
if(this.type == "single") {
|
||||
this.handleSelectSwitch()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.md-drop-cont{
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
border: 2rpx solid #ebeef5;;
|
||||
top: calc(100% + 8px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
}
|
||||
</style>
|
||||
@ -9,7 +9,9 @@
|
||||
<tpx-input v-model:value="baseFormData.name" placeholder="真实姓名"></tpx-input>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item :required="false">
|
||||
|
||||
<tpx-select placeholder="证件类型" v-model:value="baseFormData.type" :list="typeList"
|
||||
mode="drop"
|
||||
></tpx-select>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item :required="false">
|
||||
<tpx-input v-model:value="baseFormData.number" placeholder="证件号"></tpx-input>
|
||||
@ -47,6 +49,11 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
typeList: [
|
||||
{ title: '身份证', val: 1 },
|
||||
{ title: '护照', val: 2 },
|
||||
{ title: '港台证', val: 3 }
|
||||
],
|
||||
// 基础表单数据
|
||||
baseFormData: {
|
||||
name: '',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user