|
|
@@ -1,23 +1,23 @@
|
|
|
<template>
|
|
|
<view class='uni-page'>
|
|
|
<u-popup :show="modelshow" @close="close" :closeable="closeable" round="20rpx" :bgColor="bgColor" :mode="mode"
|
|
|
- :closeOnClickOverlay="closeOnClickOverlay" :customStyle="{width:width}">
|
|
|
+ :closeOnClickOverlay="closeOnClickOverlay" :customStyle="{ width: width }">
|
|
|
<view class="">
|
|
|
- <view class="header header-padding dis a-c j-c" v-if="!headerSlot" :class="{borderBottom:border}"
|
|
|
+ <view class="header header-padding dis a-c j-c" v-if="!headerSlot" :class="{ borderBottom: border }"
|
|
|
:style="headerStyle">
|
|
|
- <text>{{headerTitle}}</text>
|
|
|
+ <text>{{ headerTitle }}</text>
|
|
|
</view>
|
|
|
- <view v-else class="header-padding " :class="{borderBottom:border}">
|
|
|
+ <view v-else class="header-padding " :class="{ borderBottom: border }">
|
|
|
<slot name="header"></slot>
|
|
|
</view>
|
|
|
- <view class="content" :style="{overflow:overflow,maxHeight:maxHeight}">
|
|
|
- <slot name="content" v-if="contentType!='status'">
|
|
|
+ <view class="content" :style="{ overflow: overflow, maxHeight: maxHeight }">
|
|
|
+ <slot name="content" v-if="contentType != 'status'">
|
|
|
</slot>
|
|
|
<view class="quickOptions dis f-c" v-else>
|
|
|
<view class=" dis a-c j-s f-wrap">
|
|
|
- <view class="tab dis a-c j-c " :class="{tabactive:OptionsTabIndex==item.value}"
|
|
|
- v-for="(item,index) in statusList" :key="index" @click="OptionsTabSelect(item,index)">
|
|
|
- <text>{{item.label }}</text>
|
|
|
+ <view class="tab dis a-c j-c " :class="{ tabactive: OptionsTabIndex == item.value }"
|
|
|
+ v-for="(item, index) in statusList" :key="index" @click="OptionsTabSelect(item, index)">
|
|
|
+ <text>{{ item.label }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="custom-footer dis j-s a-c ">
|
|
|
@@ -31,170 +31,183 @@
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
- export default {
|
|
|
- props: {
|
|
|
- // 状态数据
|
|
|
- statusList: {
|
|
|
- type: Array,
|
|
|
- default: () => []
|
|
|
- },
|
|
|
- // 当前激活标签
|
|
|
- show: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- //头部插槽
|
|
|
- headerSlot: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
- headerTitle: {
|
|
|
- //头部标题
|
|
|
- type: String,
|
|
|
- default: '请选择',
|
|
|
- },
|
|
|
- bgColor: {
|
|
|
- type: String,
|
|
|
- default: '#FFF'
|
|
|
- },
|
|
|
- overflow: {
|
|
|
- //是否局部滚动
|
|
|
- type: String,
|
|
|
- default: '',
|
|
|
- },
|
|
|
- //最大高度
|
|
|
- maxHeight: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- },
|
|
|
- border: {
|
|
|
- //是否边框
|
|
|
- type: Boolean,
|
|
|
- default: true,
|
|
|
- },
|
|
|
- headerStyle: Object,
|
|
|
- closeable: {
|
|
|
- //是否显示右上角叉号
|
|
|
- type: Boolean,
|
|
|
- default: true,
|
|
|
- },
|
|
|
- //弹出方向
|
|
|
- mode: {
|
|
|
- type: String,
|
|
|
- default: 'bottom' //top / right / bottom / center
|
|
|
- },
|
|
|
- //弹窗宽度
|
|
|
- width: {
|
|
|
- type: String,
|
|
|
- default: '100%'
|
|
|
- },
|
|
|
- //插槽内容类型
|
|
|
- contentType: {
|
|
|
- type: String,
|
|
|
- default: 'list' //list :列表选择 / custom :自定义 / status :状态筛选 /
|
|
|
- },
|
|
|
- //点击遮罩是否关闭弹窗
|
|
|
- closeOnClickOverlay: {
|
|
|
- type: Boolean,
|
|
|
- default: true,
|
|
|
- }
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ // 状态数据
|
|
|
+ statusList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- modelshow: this.show,
|
|
|
- OptionsTabIndex: null, //切换下标
|
|
|
- }
|
|
|
+ // 当前激活标签
|
|
|
+ show: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
},
|
|
|
- onShow() {
|
|
|
-
|
|
|
+ //头部插槽
|
|
|
+ headerSlot: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ headerTitle: {
|
|
|
+ //头部标题
|
|
|
+ type: String,
|
|
|
+ default: '请选择',
|
|
|
+ },
|
|
|
+ bgColor: {
|
|
|
+ type: String,
|
|
|
+ default: '#FFF'
|
|
|
+ },
|
|
|
+ overflow: {
|
|
|
+ //是否局部滚动
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ //最大高度
|
|
|
+ maxHeight: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ border: {
|
|
|
+ //是否边框
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ headerStyle: Object,
|
|
|
+ closeable: {
|
|
|
+ //是否显示右上角叉号
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ //弹出方向
|
|
|
+ mode: {
|
|
|
+ type: String,
|
|
|
+ default: 'bottom' //top / right / bottom / center
|
|
|
},
|
|
|
- onLoad() {
|
|
|
+ //弹窗宽度
|
|
|
+ width: {
|
|
|
+ type: String,
|
|
|
+ default: '100%'
|
|
|
+ },
|
|
|
+ //插槽内容类型
|
|
|
+ contentType: {
|
|
|
+ type: String,
|
|
|
+ default: 'list' //list :列表选择 / custom :自定义 / status :状态筛选 /
|
|
|
+ },
|
|
|
+ //点击遮罩是否关闭弹窗
|
|
|
+ closeOnClickOverlay: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ modelshow: this.show,
|
|
|
+ OptionsTabIndex: null, //切换下标
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ show(newVal) {
|
|
|
+ this.modelshow = newVal
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //状态切换回调
|
|
|
+ statusConfirm() {
|
|
|
+ this.$emit('statusConfirm', this.OptionsTabIndex)
|
|
|
},
|
|
|
- watch: {
|
|
|
- show(newVal) {
|
|
|
- this.modelshow = newVal
|
|
|
- }
|
|
|
+ //状态切换
|
|
|
+ OptionsTabSelect(item, index) {
|
|
|
+ console.log(item);
|
|
|
+ this.OptionsTabIndex = item.value;
|
|
|
},
|
|
|
- methods: {
|
|
|
- //状态切换回调
|
|
|
- statusConfirm() {
|
|
|
- this.$emit('statusConfirm', this.OptionsTabIndex)
|
|
|
- },
|
|
|
- //状态切换
|
|
|
- OptionsTabSelect(item, index) {
|
|
|
- console.log(item);
|
|
|
- this.OptionsTabIndex = item.value;
|
|
|
- },
|
|
|
- //关闭事件
|
|
|
- close() {
|
|
|
- this.$emit('close')
|
|
|
- }
|
|
|
+ //关闭事件
|
|
|
+ close() {
|
|
|
+ this.$emit('close')
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang='scss' scoped>
|
|
|
- .header {
|
|
|
- color: #333;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
+.header {
|
|
|
+ color: #333;
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
|
|
|
- .header-padding {
|
|
|
- padding: 27rpx 30rpx;
|
|
|
- }
|
|
|
+.header-padding {
|
|
|
+ padding: 27rpx 30rpx;
|
|
|
+}
|
|
|
|
|
|
- .borderBottom {
|
|
|
- border-bottom: 1px solid #EEEEEE;
|
|
|
- }
|
|
|
+.borderBottom {
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+}
|
|
|
|
|
|
- .quickOptions {
|
|
|
- padding: 42rpx 42rpx 0;
|
|
|
- box-sizing: border-box;
|
|
|
- margin-bottom: 20rpx;
|
|
|
+.quickOptions {
|
|
|
+ padding: 42rpx 42rpx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
|
|
|
|
|
- .tab {
|
|
|
- width: 180rpx;
|
|
|
- padding: 9rpx 24rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #666;
|
|
|
- border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
|
- border: 1rpx solid #EEEEEE;
|
|
|
- margin-right: 30rpx;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- }
|
|
|
+ .tab {
|
|
|
+ width: 180rpx;
|
|
|
+ padding: 9rpx 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #666;
|
|
|
+ border-radius: 4rpx 4rpx 4rpx 4rpx;
|
|
|
+ border: 1rpx solid #EEEEEE;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ }
|
|
|
|
|
|
- .tabactive {
|
|
|
- background: #FDE935;
|
|
|
- color: #333;
|
|
|
- border: 1rpx solid #FDE935;
|
|
|
- }
|
|
|
+ .tabactive {
|
|
|
+ background: #FDE935;
|
|
|
+ color: #333;
|
|
|
+ border: 1rpx solid #FDE935;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .custom-footer {
|
|
|
- padding: 40rpx 0 0;
|
|
|
- box-sizing: border-box;
|
|
|
+.custom-footer {
|
|
|
+ padding: 40rpx 0 0;
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
|
- view {
|
|
|
- font-size: 30rpx;
|
|
|
- padding: 20rpx;
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
+ view {
|
|
|
+ font-size: 30rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
|
|
|
- view:first-child {
|
|
|
- color: #333;
|
|
|
- background: transparent;
|
|
|
- border-radius: 50rpx;
|
|
|
- border: 1rpx solid #FDE935;
|
|
|
- margin-right: 28rpx;
|
|
|
- }
|
|
|
+ view:first-child {
|
|
|
+ color: #333;
|
|
|
+ background: transparent;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ border: 1rpx solid #FDE935;
|
|
|
+ margin-right: 28rpx;
|
|
|
+ }
|
|
|
|
|
|
- view:last-child {
|
|
|
- background: #FDE935;
|
|
|
- border-radius: 50rpx;
|
|
|
- color: #1F1F1F;
|
|
|
- }
|
|
|
+ view:last-child {
|
|
|
+ background: #FDE935;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ color: #1F1F1F;
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .u-transition.u-fade-enter-to,
|
|
|
+::v-deep .u-transition.u-fade-enter-active,
|
|
|
+::v-deep .u-transition.u-fade-leave-to,
|
|
|
+::v-deep .u-transition.u-fade-leave-active {
|
|
|
+ z-index: 99999 !important;
|
|
|
+}
|
|
|
+::v-deep .u-transition {
|
|
|
+ z-index: 99999 !important;
|
|
|
+}
|
|
|
+::v-deep .u-popup {
|
|
|
+ z-index: 100000 !important;
|
|
|
+}
|
|
|
</style>
|