邓平艺
5 years ago
8 changed files with 32 additions and 688 deletions
-
46canteen/components/lf-price/lf-price.vue
-
44canteen/components/lf-stepbar/lf-stepbar.vue
-
67canteen/components/lf-title-line/lf-title-line.vue
-
203canteen/components/lf-ysteps/lf-ysteps.vue
-
46supplier/components/lf-price/lf-price.vue
-
44supplier/components/lf-stepbar/lf-stepbar.vue
-
67supplier/components/lf-title-line/lf-title-line.vue
-
203supplier/components/lf-ysteps/lf-ysteps.vue
@ -1,46 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<block v-if="isPoint"> |
|||
<text class="text-price lf-font-48 lf-font-bold lf-color-price">{{ showPrice(1) }}</text> |
|||
<text class="lf-font-28 lf-font-bold lf-color-price">.{{ showPrice(2) }}</text> |
|||
</block> |
|||
<block v-else> |
|||
<text class="text-price lf-font-48 lf-font-bold lf-color-price">{{ showPrice() }}</text> |
|||
</block> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
price: { |
|||
type: [Number, String], |
|||
default: '' |
|||
} |
|||
}, |
|||
computed: { |
|||
// 是否存在小数点 |
|||
isPoint(){ |
|||
let price = parseFloat(this.$props.price).toString(); |
|||
return price.indexOf('.') >= 0; |
|||
}, |
|||
showPrice(){ |
|||
let price = parseFloat(this.$props.price).toString(); // 过滤价格出现.00的情况 |
|||
return function(type){ |
|||
let price_arr = price.split('.'); |
|||
if(type == 1){ |
|||
return price_arr[0]; |
|||
}else if(type == 2){ |
|||
return price_arr[1]; |
|||
}else{ |
|||
return price_arr[0]; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
|
|||
</style> |
|||
@ -1,67 +0,0 @@ |
|||
<template> |
|||
<view class="decorative-box" :class="{'padding-tb': isPadding}" @click="onClick"> |
|||
<view class="decorative-liner"></view> |
|||
<view class="lf-flex decorative-content"> |
|||
<view class="rhombus lf-m-r-23" v-if="isRhombus"></view> |
|||
<view class="lf-font-32 lf-font-bold title">{{ title }}</view> |
|||
<view class="rhombus lf-m-l-23" v-if="isRhombus"></view> |
|||
</view> |
|||
<view class="decorative-liner"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
title: { |
|||
type: [String, Number], // 标题 |
|||
default: '猜你喜欢' |
|||
}, |
|||
isRhombus: { |
|||
type: Boolean, // 是否显示菱形，默认显示 |
|||
default: true |
|||
}, |
|||
isPadding: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
methods: { |
|||
onClick(event){ |
|||
this.$emit('click', event); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
.decorative-box { |
|||
width: 100%; |
|||
height: max-content; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-content: center; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
.decorative-liner{ |
|||
width: 110rpx; |
|||
height: 1rpx; |
|||
border: 1rpx solid #DCDCDC; |
|||
} |
|||
.decorative-content{ |
|||
padding: 0 30rpx; |
|||
.rhombus{ |
|||
width: 16rpx; |
|||
height: 16rpx; |
|||
transform: rotateZ(45deg); |
|||
background: #222; |
|||
} |
|||
.title{ |
|||
max-width: 340rpx; |
|||
} |
|||
} |
|||
} |
|||
.padding-tb{ |
|||
padding: 25rpx 0; |
|||
} |
|||
</style> |
|||
@ -1,203 +0,0 @@ |
|||
<template> |
|||
<!-- |
|||
stepList: [ |
|||
{ |
|||
date: '08-28', // 左侧日期 -- 必选 |
|||
time: '11:22', // 左侧时间 -- 必选 |
|||
info: '开卡', // 右侧内容 -- 可选 |
|||
index: '1', // 中间 Index -- 可选 |
|||
isFinished: true, // 是否已完成（完成 index 为 √）-- 可选 |
|||
isActive: false, // 是否为当前节点 Active（当前节点 即使完成 index 也不会显示 √）-- 可选 |
|||
isShowSlot: false // 右侧是否有 Slot（显示在 右侧内容下方）-- 可选 |
|||
}, |
|||
{ |
|||
date: '08-30', |
|||
time: '15:33', |
|||
info: '激活', |
|||
index: '2', |
|||
isFinished: false, |
|||
isActive: true, |
|||
isShowSlot: true |
|||
} |
|||
] |
|||
|
|||
slot 示例： |
|||
<y-steps :stepList="stepList"> |
|||
<mx-button type="danger" value="激活网点查看" /> |
|||
</y-steps> |
|||
|
|||
可按自己需求修改 css 中颜色变量 |
|||
--> |
|||
<view class="steps"> |
|||
<view |
|||
v-for="(step, index) in stepList" |
|||
:key="'stepsItem' + index" |
|||
:class="['steps-item', step.isActive ? 'steps-item-active' : '', step.isFinished ? 'steps-item-finished' : '']"> |
|||
|
|||
<view class="steps-item-index"> |
|||
<view :class="['line', index != 0 ? '' : 'line-transparent']" :style="{'background-color': color}"></view> |
|||
<!-- 完成的 --> |
|||
<view v-if="!step.isActive && step.isFinished" class="index index-success" :style="{'background-color': color, 'color': '#fff'}"> |
|||
<u-icon name="checkmark" size="16"></u-icon> |
|||
</view> |
|||
<!-- 过程 --> |
|||
<view v-else class="index" :style="{'border-color': color, 'color': color}"> |
|||
<u-icon name="arrow-down" size="16"></u-icon> |
|||
<view class="process-line" :style="{'background-color': color}" v-if="index == stepList.length - 1"></view> |
|||
</view> |
|||
<view :class="['line', index != stepList.length - 1 ? '' : 'line-transparent']" :style="{'background-color': color}"></view> |
|||
</view> |
|||
|
|||
<view class="steps-item-right"> |
|||
<view class="right-info-item"> |
|||
<view>{{ step.info }}</view> |
|||
<view v-if="step.isShowSlot"> |
|||
<slot></slot> |
|||
</view> |
|||
<view class="lf-font-24 lf-color-999">{{ step.time }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'YSteps', |
|||
props: { |
|||
stepList: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
color: { |
|||
type: String, |
|||
default: '#1A35F2' |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
$normolColor: #009688; |
|||
$activeColor: #ff3838; |
|||
$finishedColor: #4DB6AC; |
|||
$normolBgColor: #80CBC4; |
|||
$activeBgColor: #F8BBD0; |
|||
$finishedBgColor: #B2DFDB; |
|||
.steps { |
|||
display: flex; |
|||
flex-direction: column; |
|||
.steps-item { |
|||
display: flex; |
|||
.steps-item-left { |
|||
display: flex; |
|||
align-items: center; |
|||
color: $normolColor; |
|||
.steps-item-left-date { |
|||
font-size: 30rpx; |
|||
padding-top: 32rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
.steps-item-left-time { |
|||
font-size: 26rpx; |
|||
} |
|||
} |
|||
.steps-item-index { |
|||
padding: 0 20rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
position: relative; |
|||
.line { |
|||
flex: 1; |
|||
width: 5rpx; |
|||
background-color: #1833F2; |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
.process-line{ |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 44rpx; |
|||
width: 4rpx; |
|||
height: 40rpx; |
|||
z-index: 0; |
|||
} |
|||
.line-transparent { |
|||
background-color: transparent !important; |
|||
} |
|||
.index { |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
font-size: 25rpx; |
|||
font-weight: 900; |
|||
text-align: center; |
|||
line-height: 50rpx; |
|||
border-radius: 50rpx; |
|||
// color: $normolColor; |
|||
// background-color: $normolBgColor; |
|||
} |
|||
// /deep/ .index-success { |
|||
// display: flex; |
|||
// justify-content: center; |
|||
// align-items: center; |
|||
// .uni-icon-success_no_circle { |
|||
// color: #1833F2; |
|||
// } |
|||
// } |
|||
} |
|||
.steps-item-right { |
|||
display: flex; |
|||
flex-direction: column; |
|||
// padding: 20rpx 0; |
|||
font-size: 28rpx; |
|||
// color: $normolColor; |
|||
.right-info-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
padding: 30rpx; |
|||
padding-left: 0rpx; |
|||
text { |
|||
font-size: 30rpx; |
|||
font-weight: 600; |
|||
line-height: 30rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.steps-item-finished { |
|||
.steps-item-left { |
|||
color: $finishedColor; |
|||
} |
|||
.steps-item-index { |
|||
.index { |
|||
// color: $finishedColor; |
|||
// background-color: $finishedBgColor; |
|||
// border: 2rpx solid #1833F2; |
|||
color: #1833F2; |
|||
} |
|||
} |
|||
// .steps-item-right { |
|||
// color: $finishedColor; |
|||
// } |
|||
} |
|||
.steps-item-active { |
|||
.steps-item-left { |
|||
color: $activeColor; |
|||
} |
|||
.steps-item-index { |
|||
.index { |
|||
// color: $activeColor; |
|||
// background-color: $activeBgColor; |
|||
// background-color: #1833F2; |
|||
border: 3rpx solid; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
// .steps-item-right { |
|||
// color: $activeColor; |
|||
// } |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,46 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<block v-if="isPoint"> |
|||
<text class="text-price lf-font-48 lf-font-bold lf-color-price">{{ showPrice(1) }}</text> |
|||
<text class="lf-font-28 lf-font-bold lf-color-price">.{{ showPrice(2) }}</text> |
|||
</block> |
|||
<block v-else> |
|||
<text class="text-price lf-font-48 lf-font-bold lf-color-price">{{ showPrice() }}</text> |
|||
</block> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
price: { |
|||
type: [Number, String], |
|||
default: '' |
|||
} |
|||
}, |
|||
computed: { |
|||
// 是否存在小数点 |
|||
isPoint(){ |
|||
let price = parseFloat(this.$props.price).toString(); |
|||
return price.indexOf('.') >= 0; |
|||
}, |
|||
showPrice(){ |
|||
let price = parseFloat(this.$props.price).toString(); // 过滤价格出现.00的情况 |
|||
return function(type){ |
|||
let price_arr = price.split('.'); |
|||
if(type == 1){ |
|||
return price_arr[0]; |
|||
}else if(type == 2){ |
|||
return price_arr[1]; |
|||
}else{ |
|||
return price_arr[0]; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
|
|||
</style> |
|||
@ -1,67 +0,0 @@ |
|||
<template> |
|||
<view class="decorative-box" :class="{'padding-tb': isPadding}" @click="onClick"> |
|||
<view class="decorative-liner"></view> |
|||
<view class="lf-flex decorative-content"> |
|||
<view class="rhombus lf-m-r-23" v-if="isRhombus"></view> |
|||
<view class="lf-font-32 lf-font-bold title">{{ title }}</view> |
|||
<view class="rhombus lf-m-l-23" v-if="isRhombus"></view> |
|||
</view> |
|||
<view class="decorative-liner"></view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
title: { |
|||
type: [String, Number], // 标题 |
|||
default: '猜你喜欢' |
|||
}, |
|||
isRhombus: { |
|||
type: Boolean, // 是否显示菱形，默认显示 |
|||
default: true |
|||
}, |
|||
isPadding: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
methods: { |
|||
onClick(event){ |
|||
this.$emit('click', event); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped="scoped"> |
|||
.decorative-box { |
|||
width: 100%; |
|||
height: max-content; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-content: center; |
|||
align-items: center; |
|||
box-sizing: border-box; |
|||
.decorative-liner{ |
|||
width: 110rpx; |
|||
height: 1rpx; |
|||
border: 1rpx solid #DCDCDC; |
|||
} |
|||
.decorative-content{ |
|||
padding: 0 30rpx; |
|||
.rhombus{ |
|||
width: 16rpx; |
|||
height: 16rpx; |
|||
transform: rotateZ(45deg); |
|||
background: #222; |
|||
} |
|||
.title{ |
|||
max-width: 340rpx; |
|||
} |
|||
} |
|||
} |
|||
.padding-tb{ |
|||
padding: 25rpx 0; |
|||
} |
|||
</style> |
|||
@ -1,203 +0,0 @@ |
|||
<template> |
|||
<!-- |
|||
stepList: [ |
|||
{ |
|||
date: '08-28', // 左侧日期 -- 必选 |
|||
time: '11:22', // 左侧时间 -- 必选 |
|||
info: '开卡', // 右侧内容 -- 可选 |
|||
index: '1', // 中间 Index -- 可选 |
|||
isFinished: true, // 是否已完成（完成 index 为 √）-- 可选 |
|||
isActive: false, // 是否为当前节点 Active（当前节点 即使完成 index 也不会显示 √）-- 可选 |
|||
isShowSlot: false // 右侧是否有 Slot（显示在 右侧内容下方）-- 可选 |
|||
}, |
|||
{ |
|||
date: '08-30', |
|||
time: '15:33', |
|||
info: '激活', |
|||
index: '2', |
|||
isFinished: false, |
|||
isActive: true, |
|||
isShowSlot: true |
|||
} |
|||
] |
|||
|
|||
slot 示例： |
|||
<y-steps :stepList="stepList"> |
|||
<mx-button type="danger" value="激活网点查看" /> |
|||
</y-steps> |
|||
|
|||
可按自己需求修改 css 中颜色变量 |
|||
--> |
|||
<view class="steps"> |
|||
<view |
|||
v-for="(step, index) in stepList" |
|||
:key="'stepsItem' + index" |
|||
:class="['steps-item', step.isActive ? 'steps-item-active' : '', step.isFinished ? 'steps-item-finished' : '']"> |
|||
|
|||
<view class="steps-item-index"> |
|||
<view :class="['line', index != 0 ? '' : 'line-transparent']" :style="{'background-color': color}"></view> |
|||
<!-- 完成的 --> |
|||
<view v-if="!step.isActive && step.isFinished" class="index index-success" :style="{'background-color': color, 'color': '#fff'}"> |
|||
<u-icon name="checkmark" size="16"></u-icon> |
|||
</view> |
|||
<!-- 过程 --> |
|||
<view v-else class="index" :style="{'border-color': color, 'color': color}"> |
|||
<u-icon name="arrow-down" size="16"></u-icon> |
|||
<view class="process-line" :style="{'background-color': color}" v-if="index == stepList.length - 1"></view> |
|||
</view> |
|||
<view :class="['line', index != stepList.length - 1 ? '' : 'line-transparent']" :style="{'background-color': color}"></view> |
|||
</view> |
|||
|
|||
<view class="steps-item-right"> |
|||
<view class="right-info-item"> |
|||
<view>{{ step.info }}</view> |
|||
<view v-if="step.isShowSlot"> |
|||
<slot></slot> |
|||
</view> |
|||
<view class="lf-font-24 lf-color-999">{{ step.time }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'YSteps', |
|||
props: { |
|||
stepList: { |
|||
type: Array, |
|||
default: () => [] |
|||
}, |
|||
color: { |
|||
type: String, |
|||
default: '#1A35F2' |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
$normolColor: #009688; |
|||
$activeColor: #ff3838; |
|||
$finishedColor: #4DB6AC; |
|||
$normolBgColor: #80CBC4; |
|||
$activeBgColor: #F8BBD0; |
|||
$finishedBgColor: #B2DFDB; |
|||
.steps { |
|||
display: flex; |
|||
flex-direction: column; |
|||
.steps-item { |
|||
display: flex; |
|||
.steps-item-left { |
|||
display: flex; |
|||
align-items: center; |
|||
color: $normolColor; |
|||
.steps-item-left-date { |
|||
font-size: 30rpx; |
|||
padding-top: 32rpx; |
|||
line-height: 40rpx; |
|||
} |
|||
.steps-item-left-time { |
|||
font-size: 26rpx; |
|||
} |
|||
} |
|||
.steps-item-index { |
|||
padding: 0 20rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
position: relative; |
|||
.line { |
|||
flex: 1; |
|||
width: 5rpx; |
|||
background-color: #1833F2; |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
.process-line{ |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 44rpx; |
|||
width: 4rpx; |
|||
height: 40rpx; |
|||
z-index: 0; |
|||
} |
|||
.line-transparent { |
|||
background-color: transparent !important; |
|||
} |
|||
.index { |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
font-size: 25rpx; |
|||
font-weight: 900; |
|||
text-align: center; |
|||
line-height: 50rpx; |
|||
border-radius: 50rpx; |
|||
// color: $normolColor; |
|||
// background-color: $normolBgColor; |
|||
} |
|||
// /deep/ .index-success { |
|||
// display: flex; |
|||
// justify-content: center; |
|||
// align-items: center; |
|||
// .uni-icon-success_no_circle { |
|||
// color: #1833F2; |
|||
// } |
|||
// } |
|||
} |
|||
.steps-item-right { |
|||
display: flex; |
|||
flex-direction: column; |
|||
// padding: 20rpx 0; |
|||
font-size: 28rpx; |
|||
// color: $normolColor; |
|||
.right-info-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
padding: 30rpx; |
|||
padding-left: 0rpx; |
|||
text { |
|||
font-size: 30rpx; |
|||
font-weight: 600; |
|||
line-height: 30rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.steps-item-finished { |
|||
.steps-item-left { |
|||
color: $finishedColor; |
|||
} |
|||
.steps-item-index { |
|||
.index { |
|||
// color: $finishedColor; |
|||
// background-color: $finishedBgColor; |
|||
// border: 2rpx solid #1833F2; |
|||
color: #1833F2; |
|||
} |
|||
} |
|||
// .steps-item-right { |
|||
// color: $finishedColor; |
|||
// } |
|||
} |
|||
.steps-item-active { |
|||
.steps-item-left { |
|||
color: $activeColor; |
|||
} |
|||
.steps-item-index { |
|||
.index { |
|||
// color: $activeColor; |
|||
// background-color: $activeBgColor; |
|||
// background-color: #1833F2; |
|||
border: 3rpx solid; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
// .steps-item-right { |
|||
// color: $activeColor; |
|||
// } |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue