第一次提交
This commit is contained in:
caolc
257
Financial/components/assessCard.vue
Normal file
257
Financial/components/assessCard.vue
Normal file
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<view class="assess_card_container">
|
||||
<view @click="isShowDetailsFn(item,index)" v-for="(item,index) in interiorCardData" :key='index' class="'assess_card">
|
||||
<view class="flex assess_card_content" :class="item.isShowDetails? 'assess_card_content_select' : ''">
|
||||
<image v-if="item.isShowDetails" class="assess_card_content_select_img" :src="hotImg"></image>
|
||||
<view class="assess_card_content_left flex">
|
||||
<view class="assess_card_content_left_icon">
|
||||
<image style="width: 70rpx;height: 70rpx;" :src="imgURL+item.icon" ></image>
|
||||
</view>
|
||||
<view class="assess_card_content_left_content">
|
||||
<view class="assess_card_content_left_content_label">{{item.label}}</view>
|
||||
<view class="assess_card_content_left_content_tip">{{item.tip}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="assess_card_content_right">
|
||||
<view class="assess_card_content_right_price">
|
||||
￥{{Number(item.price).toFixed(2)}}
|
||||
</view>
|
||||
<view class="assess_card_content_right_oldPrice">
|
||||
￥{{Number(item.oldPrice).toFixed(2)}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{maxHeight:item.isShowDetails?'100vh':'0px'}" class="assess_card_details">
|
||||
<view class="assess_card_details_item" v-for="(detailsItem,detailsIndex) in item.details" :key='detailsIndex'>
|
||||
{{detailsItem}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
assessCardData:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
setTimeouts:null,
|
||||
imgURL:this.global.newImgURL,
|
||||
hotImg:require('../static/img/hot.png'),
|
||||
interiorCardData: [
|
||||
// {
|
||||
// label: '评分 + 改善建议',
|
||||
// tip: '组合评估',
|
||||
// icon: '',
|
||||
// price: '8.88',
|
||||
// oldPrice: '12.88',
|
||||
// details: ['驾驶员车主随时随地查询', '驾驶员车主提前获得改善时间', '知晓详细的评分影响因素及针对性改善建议'],
|
||||
// isShowDetails: true
|
||||
// },
|
||||
// {
|
||||
// label: '评分',
|
||||
// tip: '单独评估',
|
||||
// icon: '',
|
||||
// price: '8.88',
|
||||
// oldPrice: '12.88',
|
||||
// details: ['驾驶员车主随时随地查询', '驾驶员车主提前获得改善时间', '知晓详细的评分影响因素及针对性改善建议'],
|
||||
// isShowDetails: false
|
||||
// },
|
||||
// {
|
||||
// label: '改善建议',
|
||||
// tip: '单独评估',
|
||||
// icon: '',
|
||||
// price: '8.88',
|
||||
// oldPrice: '12.88',
|
||||
// details: ['驾驶员车主随时随地查询', '驾驶员车主提前获得改善时间', '知晓详细的评分影响因素及针对性改善建议'],
|
||||
// isShowDetails: false
|
||||
// }
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
this.$emit('productSelect',this.interiorCardData[0]);
|
||||
console.log(this.interiorCardData,'this.interiorCardData')
|
||||
},
|
||||
methods: {
|
||||
initData(){
|
||||
if(this.assessCardData){
|
||||
const productTypefilter = function(e){
|
||||
switch(e){
|
||||
case 'SA':
|
||||
return {
|
||||
label:'评分+改善建议',
|
||||
tip:'组合评估',
|
||||
icon:'zjplay1.png'
|
||||
}
|
||||
case 'S':
|
||||
return {
|
||||
label:'综合分数',
|
||||
tip:'单独评估',
|
||||
icon:'zjplay2.png'
|
||||
}
|
||||
case 'A':
|
||||
return {
|
||||
label:'改善建议',
|
||||
tip:'单独评估',
|
||||
icon:'zjplay3.png'
|
||||
}
|
||||
default :
|
||||
return '----'
|
||||
}
|
||||
}
|
||||
this.assessCardData.forEach((item,index)=>{
|
||||
const productType = productTypefilter(item.productType)
|
||||
this.interiorCardData.push({
|
||||
isShowDetails: index==0?true:false,
|
||||
...productType,
|
||||
price:item.productRealPrice||'--',
|
||||
oldPrice:item.productOldPrice||'--',
|
||||
details:item.productIntroduces||[],
|
||||
...item
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
isShowDetailsFn(item,index){
|
||||
console.log(this.setTimeouts)
|
||||
if(!this.setTimeouts){
|
||||
this.interiorCardData.forEach((assessCardDataItem,assessCardDataIndex)=>{
|
||||
if(index!==assessCardDataIndex){
|
||||
assessCardDataItem.isShowDetails = false;
|
||||
}else{
|
||||
this.setTimeouts = setTimeout(()=>{
|
||||
this.$emit('productSelect',this.interiorCardData[index]);
|
||||
this.interiorCardData[index].isShowDetails = true;
|
||||
this.setTimeouts = null
|
||||
},500)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.assess_card_content_left_icon{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.assess_card_details_item:last-child{
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.assess_card_details_item:first-child{
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.assess_card_details_item{
|
||||
font-size: 32rpx;
|
||||
line-height: 50rpx;
|
||||
|
||||
}
|
||||
.assess_card_content_right_price{
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5rpx;
|
||||
color: #EC4545;
|
||||
}
|
||||
.assess_card_content_right_oldPrice{
|
||||
color: #BBBBBB;
|
||||
font-size: 32rpx;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.assess_card_content_left_content_tip{
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.assess_card_content_left_content_label{
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5rpx;
|
||||
}
|
||||
.assess_card_content_select_img{
|
||||
position: absolute;
|
||||
width: 68rpx;
|
||||
height: 76rpx;
|
||||
left: -34rpx;
|
||||
top: -38rpx;
|
||||
}
|
||||
.assess_card_content_left{
|
||||
/* background-color: #007AFF; */
|
||||
}
|
||||
.flexShrink{
|
||||
flex-shrink: 1;
|
||||
}
|
||||
/* .flexGrow{
|
||||
flex: 1;
|
||||
} */
|
||||
.assess_card_details{
|
||||
/* box-sizing: border-box; */
|
||||
margin: 0 68rpx;
|
||||
max-height: 0px;
|
||||
transition: max-height .5s;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.assess_card_content_right{
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
.assess_card_content_left{
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
}
|
||||
.assess_card_content_select{
|
||||
border: 10rpx solid rgba(255, 103, 0, 0.5);
|
||||
padding: 30rpx 30rpx !important;
|
||||
}
|
||||
.assess_card_content{
|
||||
width: 100%;
|
||||
height: 190rpx;
|
||||
border-radius: 20px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 40rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFFFFF;
|
||||
position: relative;
|
||||
}
|
||||
.assess_card_container{
|
||||
width: 100%;
|
||||
}
|
||||
.assess_card:last-child{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.select_assess_card{
|
||||
max-height: 100vh;
|
||||
min-height: 190rpx;
|
||||
border-radius: 20px;
|
||||
background: #FFFFFF;
|
||||
margin-bottom: 40rpx;
|
||||
position: relative;
|
||||
color: #FF6700;
|
||||
/* transition: max-height 2s; */
|
||||
/* overflow: hidden; */
|
||||
}
|
||||
.assess_card {
|
||||
min-height: 190rpx;
|
||||
/* max-height: 190rpx; */
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
background: #FFFFFF;
|
||||
margin-bottom: 40rpx;
|
||||
position: relative;
|
||||
transition: min-height .5s;
|
||||
color: #FF6700;
|
||||
}
|
||||
</style>
|
||||
558
Financial/components/cmd-progress/cmd-progress.vue
Normal file
558
Financial/components/cmd-progress/cmd-progress.vue
Normal file
@@ -0,0 +1,558 @@
|
||||
<template>
|
||||
<view class="cmd-progress cmd-progress-default" :class="setStatusClass">
|
||||
<block v-if="type == 'circle' || type == 'dashboard'">
|
||||
<view class="cmd-progress cmd-progress-default" :class="setStatusClass">
|
||||
<view class="cmd-progress-inner" :style="setCircleStyle">
|
||||
<!-- 绘制圈 start -->
|
||||
<!-- #ifdef H5 -->
|
||||
<svg viewBox="0 0 100 100" class="cmd-progress-circle">
|
||||
<path :d="setCirclePath" stroke="#f3f3f3" :stroke-linecap="strokeShape" :stroke-width="strokeWidth"
|
||||
fill-opacity="0" class="cmd-progress-circle-trail" :style="setCircleTrailStyle"></path>
|
||||
<path :d="setCirclePath" :stroke-linecap="strokeShape" :stroke-width="strokeWidth" fill-opacity="0" class="cmd-progress-circle-path"
|
||||
:style="setCirclePathStyle"></path>
|
||||
</svg>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef H5 -->
|
||||
<text :style="setCircle"></text>
|
||||
<!-- #endif -->
|
||||
<!-- 绘制圈 end -->
|
||||
<!-- 状态文本 start -->
|
||||
<block v-if="showInfo">
|
||||
<text class="cmd-progress-text" :title="setFormat">
|
||||
<block v-if="status != 'success' && status != 'exception' && setProgress < 100">{{setFormat}}</block>
|
||||
<!-- #ifdef H5 -->
|
||||
<svg v-if="status == 'exception'" viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor"
|
||||
aria-hidden="true">
|
||||
<path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
|
||||
</svg>
|
||||
<svg v-if="status == 'success' || setProgress == 100" viewBox="64 64 896 896" data-icon="check" width="1em"
|
||||
height="1em" fill="currentColor" aria-hidden="true" :style="{'color': strokeColor ? strokeColor : ''}">
|
||||
<path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path>
|
||||
</svg>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef H5 -->
|
||||
<text v-if="status == 'exception' || status == 'success' || setProgress == 100" :style="setCircleIcon"></text>
|
||||
<!-- #endif -->
|
||||
</text>
|
||||
</block>
|
||||
<!-- 状态文本 end -->
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block v-if="type == 'line'">
|
||||
<!-- 进度条 start -->
|
||||
<view class="cmd-progress-outer">
|
||||
<view class="cmd-progress-inner" :style="{'border-radius': strokeShape == 'square' ? 0 : '100px'}">
|
||||
<view class="cmd-progress-bg" :style="setLineStyle"></view>
|
||||
<view v-if="successPercent" class="cmd-progress-success-bg" :style="setLineSuccessStyle"></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 进度条 end -->
|
||||
<!-- 进度条是否显示信息 start -->
|
||||
<block v-if="showInfo">
|
||||
<text class="cmd-progress-text" :title="setFormat">
|
||||
<block v-if="status != 'success' && status != 'exception' && setProgress < 100">{{setFormat}}</block>
|
||||
<!-- #ifdef H5 -->
|
||||
<svg v-if="status == 'exception'" viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em"
|
||||
fill="currentColor" aria-hidden="true">
|
||||
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path>
|
||||
</svg>
|
||||
<svg v-if="status == 'success' || setProgress == 100" viewBox="64 64 896 896" data-icon="check-circle" width="1em"
|
||||
height="1em" fill="currentColor" aria-hidden="true" :style="{'color': strokeColor ? strokeColor : ''}">
|
||||
<path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path>
|
||||
</svg>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef H5 -->
|
||||
<text v-if="status == 'exception' || status == 'success' || setProgress == 100" :style="setLineStatusIcon"></text>
|
||||
<!-- #endif -->
|
||||
</text>
|
||||
</block>
|
||||
<!-- 进度条是否显示信息 end -->
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 进度条组件
|
||||
* @description 显示一个操作完成的百分比时，为用户显示该操作的当前进度和状态。
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=259
|
||||
* @property {String} type 进度类型 - 线型：line、圆圈形：circle、仪表盘：dashboard，默认线型：line
|
||||
* @property {Number} percent 进度百分比值 - 显示范围0-100 ，可能数比较大就需要自己转成百分比的值
|
||||
* @property {Number} success-percent 进度已完成的百分几 - 仅支持进度线型：line
|
||||
* @property {String} status 进度状态 - 涌动：active（仅支持线型：line）、正常：normal、完成：success、失败：exception，默认正常：normal
|
||||
* @property {Boolean} show-info 进度状态信息 - 是否显示进度数值或状态图标，默认true
|
||||
* @property {Number} stroke-width 进度线条的宽度 - 建议在条线的宽度范围：1-50，与进度条显示宽度有关，默认8
|
||||
* @property {String} stroke-color 进度线条的颜色 - 渐变色仅支持线型：line
|
||||
* @property {String} stroke-shape 进度线条两端的形状 - 圆：round、方块直角：square，默认圆：round
|
||||
* @property {Number} width 进度画布宽度 - 仅支持圆圈形：circle、仪表盘：dashboard，默认80
|
||||
* @property {String} gap-degree 进度圆形缺口角度 - 可取值 0 ~ 360,仅支持圆圈形：circle、仪表盘：dashboard
|
||||
* @property {String} gap-position 进度圆形缺口位置 - 可取值'top', 'bottom', 'left', 'right',仅支持圆圈形：circle、仪表盘：dashboard
|
||||
* @example <cmd-progress :percent="30"></cmd-progress>
|
||||
*/
|
||||
export default {
|
||||
name: 'cmd-progress',
|
||||
|
||||
props: {
|
||||
/**
|
||||
* 类型默认：line，可选 line circle dashboard
|
||||
*/
|
||||
type: {
|
||||
validator: val => {
|
||||
return ['line', 'circle', 'dashboard'].includes(val);
|
||||
},
|
||||
default: 'line'
|
||||
},
|
||||
/**
|
||||
* 百分比
|
||||
*/
|
||||
percent: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
/**
|
||||
* 已完成的分段百分，仅支持类型line
|
||||
*/
|
||||
successPercent: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
/**
|
||||
* 是否显示进度数值或状态图标
|
||||
*/
|
||||
showInfo: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/**
|
||||
* 进度状态，可选：normal success exception （active仅支持类型line
|
||||
*/
|
||||
status: {
|
||||
validator: val => {
|
||||
return ['normal', 'success', 'exception', 'active'].includes(val);
|
||||
},
|
||||
default: 'normal'
|
||||
},
|
||||
/**
|
||||
* 条线的宽度1-50，与width有关
|
||||
*/
|
||||
strokeWidth: {
|
||||
type: Number,
|
||||
default: 6
|
||||
},
|
||||
/**
|
||||
* 条线的颜色，渐变色仅支持类型line
|
||||
*/
|
||||
strokeColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
/**
|
||||
* 条线两端的形状 可选：'round', 'square'
|
||||
*/
|
||||
strokeShape: {
|
||||
validator: val => {
|
||||
return ['round', 'square'].includes(val);
|
||||
},
|
||||
default: 'round'
|
||||
},
|
||||
/**
|
||||
* 圆形进度条画布宽度,支持类型circle dashboard
|
||||
*/
|
||||
width: {
|
||||
type: Number,
|
||||
default: 80
|
||||
},
|
||||
/**
|
||||
* 圆形进度条缺口角度，可取值 0 ~ 360,支持类型circle dashboard
|
||||
*/
|
||||
gapDegree: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
/**
|
||||
* 圆形进度条缺口位置,可取值'top', 'bottom', 'left', 'right' ,支持类型circle dashboard
|
||||
*/
|
||||
gapPosition: {
|
||||
validator: val => {
|
||||
return ['top', 'bottom', 'left', 'right'].includes(val);
|
||||
},
|
||||
default: 'top'
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
/**
|
||||
* 如果需要自定义格式就在这改
|
||||
*/
|
||||
setFormat() {
|
||||
return `${this.setProgress}%`;
|
||||
},
|
||||
/**
|
||||
* 设置显示进度值，禁止小于0和超过100
|
||||
*/
|
||||
setProgress() {
|
||||
let percent = this.percent;
|
||||
if (!this.percent || this.percent < 0) {
|
||||
percent = 0;
|
||||
} else if (this.percent >= 100) {
|
||||
percent = 100;
|
||||
}
|
||||
return percent;
|
||||
},
|
||||
/**
|
||||
* 进度圈svg大小
|
||||
*/
|
||||
setCircleStyle() {
|
||||
return `width: ${this.width}px;
|
||||
height: ${this.width}px;
|
||||
fontSize: ${this.width * 0.15 + 6}px;`
|
||||
},
|
||||
/**
|
||||
* 圈底色
|
||||
*/
|
||||
setCircleTrailStyle() {
|
||||
const radius = 50 - this.strokeWidth / 2;
|
||||
const len = Math.PI * 2 * radius;
|
||||
const gapDeg = this.gapDegree || (this.type === 'dashboard' && 75);
|
||||
return `stroke-dasharray: ${len - (gapDeg||0)}px, ${len}px;
|
||||
stroke-dashoffset: -${(gapDeg||0) / 2}px;
|
||||
transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s;`
|
||||
},
|
||||
/**
|
||||
* 圈进度
|
||||
*/
|
||||
setCirclePathStyle() {
|
||||
const radius = 50 - this.strokeWidth / 2;
|
||||
const len = Math.PI * 2 * radius;
|
||||
const gapDeg = this.gapDegree || (this.type === 'dashboard' && 75);
|
||||
return `stroke: ${this.strokeColor};
|
||||
stroke-dasharray: ${(this.setProgress / 100) * (len - (gapDeg||0))}px, ${len}px;
|
||||
stroke-dashoffset: -${(gapDeg||0) / 2}px;
|
||||
transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s, stroke-width 0.06s ease 0.3s;`
|
||||
},
|
||||
/**
|
||||
* 绘制圈
|
||||
*/
|
||||
setCirclePath() {
|
||||
const radius = 50 - this.strokeWidth / 2;
|
||||
let beginPositionX = 0;
|
||||
let beginPositionY = -radius;
|
||||
let endPositionX = 0;
|
||||
let endPositionY = -2 * radius;
|
||||
const gapPos = (this.type === 'dashboard' && 'bottom') || this.gapPosition || 'top';
|
||||
switch (gapPos) {
|
||||
case 'left':
|
||||
beginPositionX = -radius;
|
||||
beginPositionY = 0;
|
||||
endPositionX = 2 * radius;
|
||||
endPositionY = 0;
|
||||
break;
|
||||
case 'right':
|
||||
beginPositionX = radius;
|
||||
beginPositionY = 0;
|
||||
endPositionX = -2 * radius;
|
||||
endPositionY = 0;
|
||||
break;
|
||||
case 'bottom':
|
||||
beginPositionY = radius;
|
||||
endPositionY = 2 * radius;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return `M 50,50 m ${beginPositionX},${beginPositionY} a ${radius},${radius} 0 1 1 ${endPositionX},${-endPositionY} a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`;
|
||||
},
|
||||
// #ifndef H5
|
||||
/**
|
||||
* 非H5端，绘制进度圈svg转base URL
|
||||
*/
|
||||
setCircle() {
|
||||
const radius = 50 - this.strokeWidth / 2;
|
||||
const len = Math.PI * 2 * radius;
|
||||
const gapDeg = this.gapDegree || (this.type === 'dashboard' && 75);
|
||||
let currentColor = '#108ee9'
|
||||
// 异常进度
|
||||
if (this.status == 'exception') {
|
||||
currentColor = '#f5222d'
|
||||
}
|
||||
// 完成进度
|
||||
if (this.status == 'success' || this.setProgress >= 100 || this.strokeColor) {
|
||||
currentColor = this.strokeColor || '#52c41a'
|
||||
}
|
||||
let svgToBase =
|
||||
`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' class='cmd-progress-circle'%3E%3Cpath d='${this.setCirclePath}' stroke='%23f3f3f3' stroke-linecap='${this.strokeShape}' stroke-width='${this.strokeWidth}' fill-opacity='0' class='cmd-progress-circle-trail' style='stroke-dasharray: ${len - (gapDeg||0)}px, ${len}px;stroke-dashoffset: -${(gapDeg||0) / 2}px;transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s;'%3E%3C/path%3E%3Cpath d='${this.setCirclePath}' stroke-linecap='${this.strokeShape}' stroke-width='${this.strokeWidth}' fill-opacity='0' class='cmd-progress-circle-path' style='stroke: ${escape(currentColor)};stroke-dasharray: ${(this.setProgress / 100) * (len - (gapDeg||0))}px, ${len}px;stroke-dashoffset: -${(gapDeg||0) / 2}px;transition: stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s, stroke-width 0.06s ease 0.3s;'%3E%3C/path%3E%3C/svg%3E`
|
||||
return `background-image: url("${svgToBase}");
|
||||
background-size: cover;
|
||||
display: inline-block;
|
||||
${this.setCircleStyle}`;
|
||||
},
|
||||
/**
|
||||
* 设置进度圈状态图标
|
||||
*/
|
||||
setCircleIcon() {
|
||||
let currentColor = '#108ee9'
|
||||
let svgToBase = ''
|
||||
// 异常进度
|
||||
if (this.status == 'exception') {
|
||||
currentColor = '#f5222d'
|
||||
svgToBase =
|
||||
`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' data-icon='close' width='1em' height='1em' fill='${escape(currentColor)}' aria-hidden='true'%3E %3Cpath d='M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z'%3E%3C/path%3E %3C/svg%3E`;
|
||||
}
|
||||
// 完成进度
|
||||
if (this.status == 'success' || this.setProgress >= 100) {
|
||||
currentColor = this.strokeColor || '#52c41a'
|
||||
svgToBase =
|
||||
`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' data-icon='check' width='1em' height='1em' fill='${escape(currentColor)}' aria-hidden='true'%3E %3Cpath d='M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z'%3E%3C/path%3E %3C/svg%3E`;
|
||||
}
|
||||
return `background-image: url("${svgToBase}");
|
||||
background-size: cover;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;`;
|
||||
},
|
||||
// #endif
|
||||
/**
|
||||
* 设置进度条样式
|
||||
*/
|
||||
setLineStyle() {
|
||||
return `width: ${this.setProgress}%;
|
||||
height: ${this.strokeWidth}px;
|
||||
background: ${this.strokeColor};
|
||||
border-radius: ${this.strokeShape === 'square' ? 0 : '100px'};`;
|
||||
},
|
||||
/**
|
||||
* 设置已完成分段进度
|
||||
*/
|
||||
setLineSuccessStyle() {
|
||||
let successPercent = this.successPercent;
|
||||
if (!this.successPercent || this.successPercent < 0 || this.setProgress < this.successPercent) {
|
||||
successPercent = 0;
|
||||
} else if (this.successPercent >= 100) {
|
||||
successPercent = 100;
|
||||
}
|
||||
return `width: ${successPercent}%;
|
||||
height: ${this.strokeWidth}px;
|
||||
border-radius: ${this.strokeShape === 'square' ? 0 : '100px'};`;
|
||||
},
|
||||
// #ifndef H5
|
||||
/**
|
||||
* 设置进度条状态图标
|
||||
*/
|
||||
setLineStatusIcon() {
|
||||
let currentColor = '#108ee9'
|
||||
let svgToBase = ''
|
||||
// 异常进度
|
||||
if (this.status == 'exception') {
|
||||
currentColor = '#f5222d'
|
||||
svgToBase =
|
||||
`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' data-icon='close-circle' width='1em' height='1em' fill='${escape(currentColor)}' aria-hidden='true'%3E %3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z'%3E%3C/path%3E %3C/svg%3E`;
|
||||
}
|
||||
// 完成进度
|
||||
if (this.status == 'success' || this.setProgress >= 100) {
|
||||
currentColor = this.strokeColor || '#52c41a'
|
||||
svgToBase =
|
||||
`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' data-icon='check-circle' width='1em' height='1em' fill='${escape(currentColor)}' aria-hidden='true'%3E %3Cpath d='M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z'%3E%3C/path%3E %3C/svg%3E`;
|
||||
}
|
||||
return `background-image: url("${svgToBase}");
|
||||
background-size: cover;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;`;
|
||||
},
|
||||
// #endif
|
||||
/**
|
||||
* 状态样式
|
||||
*/
|
||||
setStatusClass() {
|
||||
let statusClass = [];
|
||||
// 异常进度
|
||||
if (this.status == 'exception') {
|
||||
statusClass.push('cmd-progress-status-exception')
|
||||
}
|
||||
// 完成进度
|
||||
if (this.status == 'success' || this.setProgress >= 100) {
|
||||
statusClass.push('cmd-progress-status-success')
|
||||
}
|
||||
// 活动进度条
|
||||
if (this.status == 'active') {
|
||||
statusClass.push('cmd-progress-status-active')
|
||||
}
|
||||
// 是否显示信息
|
||||
if (this.showInfo) {
|
||||
statusClass.push('cmd-progress-show-info')
|
||||
}
|
||||
// 进度条类型
|
||||
if (this.type === 'line') {
|
||||
statusClass.push('cmd-progress-line')
|
||||
}
|
||||
// 进度圈、仪表盘类型
|
||||
if (this.type === 'circle' || this.type === 'dashboard') {
|
||||
statusClass.push('cmd-progress-circle')
|
||||
}
|
||||
statusClass.push('cmd-progress-status-normal')
|
||||
return statusClass;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.cmd-progress {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cmd-progress-line {
|
||||
width: 100%;
|
||||
font-size: 28upx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cmd-progress-outer {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.cmd-progress-show-info .cmd-progress-outer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.cmd-progress-inner {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 200upx;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cmd-progress-circle-trail {
|
||||
stroke: #f5f5f5;
|
||||
}
|
||||
|
||||
.cmd-progress-circle-path {
|
||||
stroke: #1890ff;
|
||||
animation: appear 0.3s;
|
||||
}
|
||||
|
||||
.cmd-progress-success-bg,
|
||||
.cmd-progress-bg {
|
||||
background-color: #1890ff;
|
||||
transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.cmd-progress-success-bg {
|
||||
background-color: #52c41a;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.cmd-progress-text {
|
||||
word-break: normal;
|
||||
width: 60upx;
|
||||
text-align: left;
|
||||
margin-left: 16upx;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.cmd-progress-status-active .cmd-progress-bg:before {
|
||||
content: "";
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: #fff;
|
||||
border-radius: 20upx;
|
||||
-webkit-animation: cmd-progress-active 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
|
||||
animation: cmd-progress-active 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
|
||||
}
|
||||
|
||||
.cmd-progress-status-exception .cmd-progress-bg {
|
||||
background-color: #f5222d;
|
||||
}
|
||||
|
||||
.cmd-progress-status-exception .cmd-progress-text {
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
.cmd-progress-status-exception .cmd-progress-circle-path {
|
||||
stroke: #f5222d;
|
||||
}
|
||||
|
||||
.cmd-progress-status-success .cmd-progress-bg {
|
||||
background-color: #52c41a;
|
||||
}
|
||||
|
||||
.cmd-progress-status-success .cmd-progress-text {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.cmd-progress-status-success .cmd-progress-circle-path {
|
||||
stroke: #52c41a;
|
||||
}
|
||||
|
||||
.cmd-progress-circle .cmd-progress-inner {
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.cmd-progress-circle .cmd-progress-text {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
margin: 0;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.cmd-progress-circle .cmd-progress-status-exception .cmd-progress-text {
|
||||
color: #f5222d;
|
||||
}
|
||||
|
||||
.cmd-progress-circle .cmd-progress-status-success .cmd-progress-text {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
@keyframes cmd-progress-active {
|
||||
0% {
|
||||
opacity: 0.1;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
20% {
|
||||
opacity: 0.5;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
300
Financial/components/plateNumber.vue
Normal file
300
Financial/components/plateNumber.vue
Normal file
@@ -0,0 +1,300 @@
|
||||
<template>
|
||||
<view class="plateNumber_body">
|
||||
<view @click="open" :style="{color:administrative?'#000000':''}" class="plateNumber_select">
|
||||
<!-- <uni-data-select placeholder='行政' class="uni_data_select" :clear="false" v-model="value" :localdata="range"
|
||||
@change="change"></uni-data-select> -->
|
||||
<text > {{administrative?administrative:'行政'}} </text>
|
||||
</view>
|
||||
<view class="cutApart"></view>
|
||||
<view class="plateNumber_input">
|
||||
<input placeholder="请输入车牌号码" v-model="plateNumber" />
|
||||
</view>
|
||||
<uni-popup :isTouchmove='false' ref="popup" type="bottom" background-color="#fff">
|
||||
<view style="height:35vh; display: flex;flex-direction: column; padding-bottom: env(safe-area-inset-bottom); border-radius: 20px;">
|
||||
<!-- <picker-view :value="seleIndex" @change="pickerChange"
|
||||
@pickstart='pickstart' @pickend='pickendFn' style="flex: 1;">
|
||||
<picker-view-column>
|
||||
<view style="display: flex;align-items: center;justify-content: center;"
|
||||
v-for="(item,index) in range" :key="index">{{ item.text}}</view>
|
||||
</picker-view-column>
|
||||
</picker-view> -->
|
||||
<view class="administrative_container" >
|
||||
<view :style="{color:divIndex === index?'#ffffff':'',backgroundColor:divIndex === index?'#FF6700':''}" @click="divIndex = index" class="administrative_item" v-for="(item,index) in range" :key="index">{{ item.text}}</view>
|
||||
</view>
|
||||
<button :disabled="pickerOpen" :loading='pickerOpen' @click="buttenFn" class="butten" >
|
||||
<text>{{pickerOpen?'':'确定'}}</text>
|
||||
</button>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
styleIsolation: 'shared', // 解除样式隔离
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
divIndex:'',
|
||||
administrative :'',
|
||||
seleIndex: [0],
|
||||
pickerOpen:false,
|
||||
value: '',
|
||||
plateNumber: '',
|
||||
range: [{
|
||||
value: 0,
|
||||
text: "京"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "津"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: "沪"
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
text: "渝"
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
text: "冀"
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
text: "豫"
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
text: "云"
|
||||
},
|
||||
{
|
||||
value: 7,
|
||||
text: "辽"
|
||||
},
|
||||
{
|
||||
value: 8,
|
||||
text: "黑"
|
||||
},
|
||||
{
|
||||
value: 9,
|
||||
text: "湘"
|
||||
},
|
||||
{
|
||||
value: 10,
|
||||
text: "皖"
|
||||
},
|
||||
{
|
||||
value: 11,
|
||||
text: "鲁"
|
||||
},
|
||||
{
|
||||
value: 12,
|
||||
text: "新"
|
||||
},
|
||||
{
|
||||
value: 13,
|
||||
text: "苏"
|
||||
},
|
||||
{
|
||||
value: 14,
|
||||
text: "浙"
|
||||
},
|
||||
{
|
||||
value: 15,
|
||||
text: "赣"
|
||||
},
|
||||
{
|
||||
value: 16,
|
||||
text: "鄂"
|
||||
},
|
||||
{
|
||||
value: 17,
|
||||
text: "桂"
|
||||
},
|
||||
{
|
||||
value: 18,
|
||||
text: "甘"
|
||||
},
|
||||
{
|
||||
value: 19,
|
||||
text: "晋"
|
||||
},
|
||||
{
|
||||
value: 20,
|
||||
text: "蒙"
|
||||
},
|
||||
{
|
||||
value: 21,
|
||||
text: "陕"
|
||||
},
|
||||
{
|
||||
value: 22,
|
||||
text: "吉"
|
||||
},
|
||||
{
|
||||
value: 23,
|
||||
text: "闽"
|
||||
},
|
||||
{
|
||||
value: 24,
|
||||
text: "贵"
|
||||
},
|
||||
{
|
||||
value: 25,
|
||||
text: "粤"
|
||||
},
|
||||
{
|
||||
value: 26,
|
||||
text: "青"
|
||||
},
|
||||
{
|
||||
value: 27,
|
||||
text: "藏"
|
||||
},
|
||||
{
|
||||
value: 28,
|
||||
text: "川"
|
||||
},
|
||||
{
|
||||
value: 29,
|
||||
text: "宁"
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
text: "琼"
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
buttenFn(){
|
||||
console.log()
|
||||
this.value = this.divIndex;
|
||||
this.administrative = `${ this.range[this.value].text }`;
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
open(){
|
||||
this.$refs.popup.open('bottom')
|
||||
},
|
||||
pickerChange(e) {
|
||||
this.seleIndex = e.detail.value;
|
||||
console.log(e)
|
||||
},
|
||||
pickstart(){
|
||||
this.pickerOpen = true
|
||||
},
|
||||
pickendFn(){
|
||||
this.pickerOpen = false
|
||||
},
|
||||
checkFn(e, value) {
|
||||
switch (e) {
|
||||
case 'name':
|
||||
return /(^[\u4e00-\u9fa5]{1}[\u4e00-\u9fa5\.·。]{0,18}[\u4e00-\u9fa5]{1}$)|(^[a-zA-Z]{1}[a-zA-Z\s]{0,18}[a-zA-Z]{1}$)/
|
||||
.test(value);
|
||||
|
||||
case 'plateNumber':
|
||||
return /(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/
|
||||
.test(value)
|
||||
case 'phone':
|
||||
return /^1[3456789]\d{9}$/.test(value);
|
||||
case 'replacePhone':
|
||||
return /^1[3456789]\d{9}$/.test(value);
|
||||
}
|
||||
},
|
||||
plateNumberCallBack() {
|
||||
if(this.value!==''){
|
||||
const plateNumber = `${ this.range[this.value].text }${this.plateNumber}`
|
||||
console.log(plateNumber,'plateNumber')
|
||||
if (this.checkFn('plateNumber', plateNumber)) {
|
||||
return plateNumber
|
||||
} else {
|
||||
throw Error('输入车牌号');
|
||||
}
|
||||
}else{
|
||||
throw Error('选择车牌归属地');
|
||||
}
|
||||
|
||||
},
|
||||
change(e) {
|
||||
console.log("e:", e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.administrative_item{
|
||||
background-color: #F0F0F0;
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
color: #000000;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 20rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.administrative_container{
|
||||
width: calc((160rpx * 4) );
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: calc(100% - 60rpx);
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
padding: 20rpx 0;
|
||||
overflow-y: scroll !important;
|
||||
|
||||
}
|
||||
.butten{
|
||||
background-color: #FF6700;
|
||||
color: #FFFFFF;
|
||||
font-size: 24rpx;
|
||||
width: 235rpx;
|
||||
margin-top: 20rpx;
|
||||
height: 60rpx !important;
|
||||
}
|
||||
.plateNumber_input {
|
||||
flex: 1;
|
||||
padding: 0 10rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.uni-select__input-box {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cutApart {
|
||||
height: 70%;
|
||||
width: 1px;
|
||||
background-color: #BBBBBB;
|
||||
}
|
||||
|
||||
.uni-select {
|
||||
border: 0px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.plateNumber_select {
|
||||
width: 100rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #6a6a6a;
|
||||
}
|
||||
|
||||
.plateNumber_body {
|
||||
height: 80rpx;
|
||||
width: 360rpx;
|
||||
border-radius: 10px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
73
Financial/components/plateNumberColor.vue
Normal file
73
Financial/components/plateNumberColor.vue
Normal file
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<view class="plateNumber_color_body">
|
||||
<view class="plateNumber_color_select">
|
||||
<uni-data-select placeholder='牌照底色' class="uni_data_select" :clear="false" v-model="value"
|
||||
:localdata="range" @change="change"></uni-data-select>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
styleIsolation: 'shared', // 解除样式隔离
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
range: [{
|
||||
value: 0,
|
||||
text: "黄"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "绿"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: "蓝"
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
backgroundCallBack(){
|
||||
if(this.value!==''){
|
||||
return `${this.range[Number(this.value)].text}色`
|
||||
}else{
|
||||
throw Error('牌照底色不能为空')
|
||||
return false
|
||||
}
|
||||
},
|
||||
change(e) {
|
||||
console.log("e:", e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.uni-select__input-box {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.uni-select {
|
||||
border: 0px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.plateNumber_color_select {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.plateNumber_color_body {
|
||||
height: 80rpx;
|
||||
width: 200rpx;
|
||||
border-radius: 10px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
88
Financial/components/seleBar.vue
Normal file
88
Financial/components/seleBar.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<view>
|
||||
<view :style="{backgroundColor:background?background:''}" class="sele_Bar mar">
|
||||
<view :style="{transform:`translateX(calc(${barIndex}*100%))`,width:`calc((100% - 20rpx) / ${seleBarData.length})`,backgroundColor:moveBackground?moveBackground:''}" class="move_item"></view>
|
||||
<view v-for="(item,index) in seleBarData" @tap="seleBarFn(item,index)" :style="{color:barIndex==index? 'white' : ''}"
|
||||
class="sele_Bar_item">
|
||||
{{item.lable}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "seleBar",
|
||||
props: {
|
||||
moveBackground:{
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
seleBarData: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
console.log('%c 组件参数↓', 'color:red;font-size:50px')
|
||||
console.log(this.seleBarData)
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
barIndex:0
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
seleBarFn(item,index) {
|
||||
this.barIndex = index
|
||||
this.$emit('seleBarFn',item,index)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.move_item {
|
||||
position: absolute;
|
||||
left: 10rpx;
|
||||
/* width: calc((100% - 20rpx) / 3); */
|
||||
height: 60rpx;
|
||||
background: #2866FF;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999999;
|
||||
z-index: 0;
|
||||
transition: all .3s;
|
||||
}
|
||||
.sele_Bar_item {
|
||||
flex: 1;
|
||||
height: 60rpx;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #999999;
|
||||
z-index: 1;
|
||||
transition: color .4s;
|
||||
}
|
||||
|
||||
.sele_Bar {
|
||||
/* background-color: #18B566; */
|
||||
/* margin: 31rpx 40rpx; */
|
||||
padding: 10rpx;
|
||||
display: flex;
|
||||
position: relative;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 10px;
|
||||
margin: auto;
|
||||
margin-top: 20rpx;
|
||||
width: calc(100% - 54rpx );
|
||||
}
|
||||
</style>
|
||||
184
Financial/components/seniorPagePopup.vue
Normal file
184
Financial/components/seniorPagePopup.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-popup ref="popup" background-color="#fff" @change="change">
|
||||
<view class="seniorPagePopup_body">
|
||||
<view class="seniorPagePopup_header">
|
||||
<view @click="reset">重置</view>
|
||||
<view @click="close">确认</view>
|
||||
</view>
|
||||
<view class="seniorPagePopup_container" >
|
||||
<view class="seniorPagePopup_title">统计年月</view>
|
||||
<view class="seniorPagePopup_datetime">
|
||||
<uni-datetime-picker placeholder='请选择统计年月' type="date" v-model="single" @maskClick="maskClick" />
|
||||
<view class="seniorPagePopup_datetime_tip">
|
||||
注意：报告日为每月4日。<br/>
|
||||
4日及4日后，可查上个月报告数据，<br/>
|
||||
4日前，最多只能查询前个月数据。
|
||||
</view>
|
||||
</view>
|
||||
<view class="seniorPagePopup_footer">
|
||||
<view class="seniorPagePopup_title">向前统计滚动周期</view>
|
||||
<view class="seniorPagePopup_footer_select_container flex">
|
||||
<view @click="selectIndex=index" v-for="(item,index) in statypeList" :key='index' :class="selectIndex==index? 'seniorPagePopup_footer_select_item_slecct':'seniorPagePopup_footer_select_item '" class="flex jc ac">
|
||||
{{item.value}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
options: {
|
||||
styleIsolation: 'shared', // 解除样式隔离
|
||||
},
|
||||
props:{
|
||||
isShow:{
|
||||
type:Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statypeList:[
|
||||
{
|
||||
value:12
|
||||
},
|
||||
{
|
||||
value:6
|
||||
},
|
||||
{
|
||||
value:3
|
||||
}
|
||||
],
|
||||
show: true,
|
||||
single:'',
|
||||
selectIndex:0,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.single = this.getNowFormatDate()
|
||||
},
|
||||
watch:{
|
||||
isShow(n,o){
|
||||
console.log(n);
|
||||
if(n){
|
||||
this.$refs.popup.open('bottom')
|
||||
}else{
|
||||
this.$refs.popup.close()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getNowFormatDate() {
|
||||
var date = new Date();
|
||||
var seperator1 = "-";
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1;
|
||||
var strDate = date.getDate();
|
||||
if (month >= 1 && month <= 9) {
|
||||
month = "0" + month;
|
||||
}
|
||||
if (strDate >= 0 && strDate <= 9) {
|
||||
strDate = "0" + strDate;
|
||||
}
|
||||
var currentdate = year + seperator1 + month + seperator1 + strDate;
|
||||
return currentdate;
|
||||
},
|
||||
reset(){
|
||||
this.selectIndex = 0;
|
||||
this.single = this.getNowFormatDate();
|
||||
// this.$refs.popup.close()
|
||||
},
|
||||
close(){
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
seniorPageCallBack(){
|
||||
return {
|
||||
statype:this.statypeList[this.selectIndex].value||'',
|
||||
queryDate:this.single||''
|
||||
}
|
||||
},
|
||||
maskClick(){},
|
||||
change(e) {
|
||||
if(!e.show){
|
||||
this.$emit('update:isShow', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.seniorPagePopup_footer_select_item_slecct{
|
||||
background-color: #FF6700;
|
||||
height: 80rpx;
|
||||
width: 140rpx;
|
||||
border-radius: 10px;
|
||||
margin-right: 20rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.jc{
|
||||
justify-content: center;
|
||||
}
|
||||
.ac{
|
||||
align-items: center;
|
||||
}
|
||||
.seniorPagePopup_footer_select_container{
|
||||
|
||||
}
|
||||
.seniorPagePopup_footer_select_item:last-child{
|
||||
margin-right: 0rpx;
|
||||
}
|
||||
.seniorPagePopup_footer_select_item{
|
||||
height: 80rpx;
|
||||
width: 140rpx;
|
||||
background: #F0F0F0;
|
||||
border-radius: 10px;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.seniorPagePopup_container_footer{
|
||||
|
||||
}
|
||||
.seniorPagePopup_datetime_tip{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
line-height: 32rpx;
|
||||
color: #BBBBBB;
|
||||
margin-top: 10rpx;
|
||||
margin: 26rpx 0 ;
|
||||
}
|
||||
.seniorPagePopup_title{
|
||||
margin-bottom: 20rpx;
|
||||
color: #FF6700;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.seniorPagePopup_container .uni-date-x{
|
||||
background: #F0F0F0 !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
.seniorPagePopup_container .uni-date-x--border{
|
||||
border: 0px !important;
|
||||
}
|
||||
.seniorPagePopup_container{
|
||||
padding: 34rpx 70rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.seniorPagePopup_header{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 32rpx;
|
||||
color: #FF6700;
|
||||
}
|
||||
.seniorPagePopup_header view:first-child{
|
||||
color: #BBBBBB;
|
||||
}
|
||||
.seniorPagePopup_body{
|
||||
width: 100vw;
|
||||
height: 580rpx;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
padding: 30rpx 62rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user