367 lines
9.4 KiB
Vue
367 lines
9.4 KiB
Vue
<template>
|
||
<view class="uni-steps">
|
||
<view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']">
|
||
<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
|
||
<view v-for="(item,index) in options" :key="index"
|
||
:class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
|
||
<text v-if="doingActive==index" :style="{color:doingColor}"
|
||
:class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
|
||
<text v-else :style="{color:index <= active?activeColor:deactiveColor}"
|
||
:class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
|
||
<text v-if="item.desc" :style="{color: deactiveColor}"
|
||
:class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
|
||
<template >
|
||
<view class="projImg" v-if="item.recordsItemList.length>0">
|
||
<image v-for="(img, imgIndex) in item.recordsItemList" @click="prviewImage(item.recordsItemList,imgIndex)" :key="imgIndex" :src="imgUrlPrex + img.image"
|
||
class="projImgItem"></image>
|
||
</view>
|
||
<view class="projSend" v-if="item.recordsItemList.length>0 && canOpenCus">
|
||
<template >
|
||
<uni-icons v-if="doingActive==index" type="cloud-upload" size="18" :style="{color:doingColor}"></uni-icons>
|
||
<uni-icons v-else type="cloud-upload" size="18" :style="{color:index <= active?activeColor:deactiveColor}"></uni-icons>
|
||
<!-- <image mode="aspectFit" src="@/static/icons/send.png" class="projIcon" :style="{color:index <= active?activeColor:deactiveColor}"></image>-->
|
||
<text v-if="doingActive==index" :style="{color: doingColor}" @click="sendCusImgManage(item.recordsItemList)">发送给客户</text>
|
||
<text v-else :style="{color:index <= active?activeColor:deactiveColor}" @click="sendCusImgManage(item.recordsItemList)">发送给客户</text>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
|
||
<view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']"
|
||
v-for="(item,index) in options" :key="index" :style="{height: direction === 'column'?heightArr[index]+'px':'14px'}">
|
||
<view
|
||
:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']"
|
||
>
|
||
</view>
|
||
<!-- <view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']"-->
|
||
<!-- v-if="index === active">-->
|
||
<!-- <uni-icons :color="activeColor" :type="activeIcon" size="20" />-->
|
||
<!-- </view>-->
|
||
<view v-if="doingActive==index" :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']"
|
||
:style="{backgroundColor:doingColor}" >
|
||
<text style="font-size: 16px;color: white">{{index+1}}</text>
|
||
</view>
|
||
<view v-else :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']"
|
||
:style="{backgroundColor:index<=active?activeColor:deactiveColor}" >
|
||
<text style="font-size: 16px;color: white">{{index+1}}</text>
|
||
</view>
|
||
<view
|
||
:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
|
||
:style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* Steps 步骤条
|
||
* @description 评分组件
|
||
* @tutorial https://ext.dcloud.net.cn/plugin?id=34
|
||
* @property {Number} active 当前步骤
|
||
* @property {String} direction = [row|column] 当前步骤
|
||
* @value row 横向
|
||
* @value column 纵向
|
||
* @property {String} activeColor 选中状态的颜色
|
||
* @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
|
||
*/
|
||
import config from '@/config'
|
||
export default {
|
||
name: 'UniSteps',
|
||
props: {
|
||
direction: {
|
||
// 排列方向 row column
|
||
type: String,
|
||
default: 'row'
|
||
},
|
||
canOpenCus: {
|
||
// 是否可以操作发送给客户
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
activeColor: {
|
||
// 激活状态颜色
|
||
type: String,
|
||
default: '#2979FF'
|
||
},
|
||
deactiveColor: {
|
||
// 未激活状态颜色
|
||
type: String,
|
||
default: '#B7BDC6'
|
||
},
|
||
doingColor: {
|
||
// 进行中颜色
|
||
type: String,
|
||
default: '#E8A321'
|
||
},
|
||
active: {
|
||
// 当前已经处理完的步骤
|
||
type: Number,
|
||
default: -1
|
||
},
|
||
doingActive: {
|
||
// 当前正在处理的步骤
|
||
type: Number,
|
||
default: -1
|
||
},
|
||
activeIcon: {
|
||
// 当前步骤
|
||
type: String,
|
||
default: 'checkbox-filled'
|
||
},
|
||
options: {
|
||
type: Array,
|
||
default () {
|
||
return []
|
||
}
|
||
} // 数据
|
||
},
|
||
data() {
|
||
return {
|
||
heightArr: [],
|
||
imgUrlPrex:config.baseImageUrl,
|
||
}
|
||
},
|
||
mounted() {
|
||
//根据内容设置步骤条的长度
|
||
if (this.direction === 'column') {
|
||
let that = this;
|
||
//只能用类选择器，用id选择器所获取的元素信息不准确
|
||
uni.createSelectorQuery().in(this).selectAll('.uni-steps__column-text').boundingClientRect(data => {
|
||
that.heightArr = data.map(item => item.height + 1);
|
||
}).exec()
|
||
}
|
||
},
|
||
methods:{
|
||
prviewImage(itemList,index){
|
||
this.$emit("prviewImage",itemList,index)
|
||
},
|
||
sendCusImgManage(itemList){
|
||
this.$emit("sendCusImgManage",itemList)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
$uni-primary: #2979ff !default;
|
||
$uni-border-color: #EDEDED;
|
||
|
||
.uni-steps {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
width: 100%;
|
||
/* #endif */
|
||
/* #ifdef APP-NVUE */
|
||
flex: 1;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
}
|
||
|
||
.uni-steps__row {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
}
|
||
|
||
.uni-steps__column {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row-reverse;
|
||
}
|
||
|
||
.uni-steps__row-text-container {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: flex-end;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.uni-steps__column-text-container {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
flex: 1;
|
||
}
|
||
|
||
.uni-steps__row-text {
|
||
/* #ifndef APP-NVUE */
|
||
display: inline-flex;
|
||
/* #endif */
|
||
flex: 1;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.uni-steps__column-text {
|
||
padding: 10px 0 2px 0;
|
||
border-bottom-style: solid;
|
||
border-bottom-width: 1px;
|
||
border-bottom-color: $uni-border-color;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
}
|
||
|
||
.uni-steps__row-title {
|
||
font-size: 28rpx;
|
||
line-height: 32rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.uni-steps__column-title {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.uni-steps__row-desc {
|
||
font-size: 12px;
|
||
line-height: 14px;
|
||
text-align: center;
|
||
}
|
||
|
||
.uni-steps__column-desc {
|
||
font-size: 30rpx;
|
||
text-align: left;
|
||
line-height: 32rpx;
|
||
padding: 10rpx 0;
|
||
|
||
}
|
||
|
||
.uni-steps__row-container {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
}
|
||
|
||
.uni-steps__column-container {
|
||
/* #ifndef APP-NVUE */
|
||
display: inline-flex;
|
||
/* #endif */
|
||
width: 30px;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.uni-steps__row-line-item {
|
||
/* #ifndef APP-NVUE */
|
||
display: inline-flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
flex: 1;
|
||
height: 14px;
|
||
line-height: 14px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.uni-steps__column-line-item {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.uni-steps__row-line {
|
||
flex: 1;
|
||
height: 1px;
|
||
background-color: #B7BDC6;
|
||
}
|
||
|
||
.uni-steps__column-line {
|
||
width: 1px;
|
||
//background-color: #B7BDC6;
|
||
}
|
||
|
||
.uni-steps__row-line--after {
|
||
transform: translateX(1px);
|
||
}
|
||
|
||
.uni-steps__column-line--after {
|
||
flex: 1;
|
||
transform: translate(0px, 1px);
|
||
}
|
||
|
||
.uni-steps__row-line--before {
|
||
transform: translateX(-1px);
|
||
}
|
||
|
||
.uni-steps__column-line--before {
|
||
height: 6px;
|
||
transform: translate(0px, -13px);
|
||
}
|
||
|
||
.uni-steps__row-circle {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
background-color: #B7BDC6;
|
||
margin: 0px 3px;
|
||
display: inline-block;
|
||
line-height: 40rpx;
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.uni-steps__column-circle {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
background-color: #B7BDC6;
|
||
margin: 4px 0px 5px 0px;
|
||
display: inline-block;
|
||
line-height: 40rpx;
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.uni-steps__row-check {
|
||
margin: 0px 6px;
|
||
}
|
||
|
||
.uni-steps__column-check {
|
||
height: 14px;
|
||
line-height: 14px;
|
||
margin: 2px 0px;
|
||
}
|
||
.projImg {
|
||
width: 100%;
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, 120rpx);
|
||
justify-content: space-between;
|
||
gap: 20rpx;
|
||
padding: 20rpx 0;
|
||
|
||
.projImgItem {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
background-color: #efefef;
|
||
}
|
||
}
|
||
|
||
.projSend {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
column-gap: 8rpx;
|
||
}
|
||
.projIcon{
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
|
||
</style>
|