uniapp 电商app进度条组件的使用（砍价进度条处理）

最近公司的电商app需要做一个砍价的功能，具体UI如下：

下面是我开发的版本，样式基本保持一致。

可以看出，砍价最主要的部分就是砍价进度条的部分。

为了能够实现进度条的功能，我从uniapp插件市场查找到一款进度条的组件，详细介绍一下。

uniapp插件市场 cmd-progress进度条组件 https://ext.dcloud.net.cn/plugin?id=259

从组件介绍来看，基本可以满足我的需求。

下面介绍组件的具体使用方法：

cmd-progress组件的引入

import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
export default {
    components: {cmdProgress}
}

属性名	类型	默认值	说明
type	String	line	进度类型 - 线型：line、圆圈形：circle、仪表盘：dashboard
percent	Number	0	进度百分比值 - 显示范围0-100 ，可能数比较大就需要自己转成百分比的值
success-percent	Number	0	进度已完成的百分几 - 仅支持进度线型：line
status	String	normal	进度状态 - 涌动：active（仅支持线型：line）、正常：normal、完成：success、失败：exception
show-info	Boolean	true	进度状态信息 - 是否显示进度数值或状态图标
stroke-width	Number	6	进度线条的宽度 - 建议在条线的宽度范围：1-50，与进度条显示宽度有关
stroke-color	String	-	进度线条的颜色 - 渐变色仅支持线型：line
stroke-shape	String	round	进度线条两端的形状 - 圆：round、方块直角：square
width	Number	80	进度画布宽度 - 仅支持圆圈形：circle、仪表盘：dashboard
gap-degree	Number	0	进度圆形缺口角度 - 可取值 0 ~ 360,仅支持圆圈形：circle、仪表盘：dashboard
gap-position	String	top	进度圆形缺口位置 - 可取值’top’, ‘bottom’, ‘left’, ‘right’,仅支持圆圈形：circle、仪表盘：dashboard

<cmd-progress class="progress" :percent="100" 
:strokeWidth="13" isAnimate="true" 
stroke-color="#FF4B4B"></cmd-progress>

<cmd-progress class="progress" :percent="80" 
:strokeWidth="13" isAnimate="true" 
stroke-color="#FF4B4B"></cmd-progress>