9 changed files with 41 additions and 689 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
-
10canteen/pages/delivery/detail.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