Commit d56a157b authored by Damon's avatar Damon

refactor: 去除首页封装组件

parent 3b4ddfda
<template>
<view class="u-flex u-row-around details" @tap.stop="click">
<view>
<u-icon :name="icons" size="50"></u-icon>
</view>
<view class="u-flex details-center">
<view class="name">{{ getName }}</view>
<view class="more" v-if="status === 0">题数:/</view>
<view class="more" v-else>{{ location }} 题数:{{ quantity }} 通过率: {{ pass }}</view>
</view>
<view v-if="status !== 0">
<u-icon name="arrow-right" size="30"></u-icon>
</view>
</view>
</template>
<script>
export default {
name: 'subjectDetails',
props: {
status: {
type: Number,
default: 0,
},
name: {
type: String,
default: '',
},
location: {
type: String,
default: '',
},
quantity: {
type: Number,
default: 0,
},
pass: {
type: String,
default: '',
},
},
data() {
return {}
},
computed: {
icons() {
return this.status === 0 ? 'info-circle' : 'info-circle-fill'
},
getName() {
return this.status === 0 ? '点击选择您将要参加的考试' : this.name
},
},
methods: {
click() {
this.$emit('click')
}
}
}
</script>
<style lang="scss" scoped>
.details {
width: 100%;
background: #fbfbfb;
padding: 20rpx 40rpx;
.details-center {
flex: 1;
flex-flow: column;
padding-left: 40rpx;
.name {
font-size: 32rpx;
color: #101010;
margin-right: auto;
}
.more {
font-size: 24rpx;
color: #797979;
margin-right: auto;
padding-top: 20rpx;
}
}
}
</style>
## 科目基础信息
```
科目基础信息组件,用于首页展示科目基础信息
```
## API
### Props
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
| :------: | :----: | :----: | :----: | :------------------------------------------------------: |
| status | Number | 0 | 1,2 | 当前状态(0.未选题库 1.已选科目未绑卡 2.已选科目已绑卡) |
| name | String | - | - | 科目名称 |
| location | String | - | - | 题库归属地 |
| quantity | Number | 0 | - | 题数 |
| pass | String | - | - | 通过率 |
### Events
| 事件称名 | 说明 | 返回值 |
| :------: | :--------------: | :----: |
| @click | 点击任意位置触发 | 无 |
## 组件用法
### 基础用法
```html
<subject-base
:status="1"
name="高处安装、维护、拆除作业人员"
location="广东省题"
:quantity="667"
pass="96%"
@click="subjectClick"
></subject-base>
```
```javascript
import subjectBase from '@/components/subject-base/index.vue'
export default {
components: {
subjectBase,
},
data() {
return {}
},
methods: {
subjectClick() {
console.log('1', 1)
},
},
}
```
<template>
<view class="u-flex statis">
<view class="u-flex top">
<view class="u-flex days">
<view>
<u-count-to :start-val="0" :end-val="days"></u-count-to>
</view>
<view>累计坚持天数</view>
</view>
<view class="u-flex topics">
<view class="topics-lists">
今日做题:
<u-count-to :start-val="0" :end-val="today" :font-size="30" color="#000"></u-count-to>
</view>
<view class="topics-lists">
累计做题:
<u-count-to :start-val="0" :end-val="total" :font-size="30" color="#000"></u-count-to>
</view>
</view>
</view>
<view class="center">
<u-button type="primary" @click="answer">每日一练</u-button>
</view>
<view class="bottom">
<u-notice-bar mode="vertical" type="none" :list="dynamic"></u-notice-bar>
</view>
</view>
</template>
<script>
export default {
name: 'subjectStatistics',
props: {
days: {
type: Number,
default: 0,
},
today: {
type: Number,
default: 0,
},
total: {
type: Number,
default: 0,
},
dynamic: {
type: Array,
default: [],
},
},
data() {
return {
lists: [],
}
},
created() {},
methods: {
answer() {
this.$emit('answer')
},
},
}
</script>
<style lang="scss" scoped>
.statis {
flex-flow: column;
width: 100%;
background: #fbfbfb;
padding: 10rpx;
.top {
width: 100%;
justify-content: space-around;
padding-top: 20rpx;
.days {
flex-flow: column;
flex: 1;
border-right: 2rpx solid #ccc;
}
.topics {
flex-flow: column;
flex: 1;
padding-left: 50rpx;
.topics-lists {
width: 100%;
padding: 10rpx 0rpx;
}
}
}
.center {
width: 100%;
padding: 30rpx 30rpx 0 30rpx;
}
.bottom {
width: 100%;
padding: 10rpx;
}
}
</style>
## 科目统计
```
科目统计组件,用于首页统计模块。
```
## API
### Props
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
| :-----: | :----: | :----: | :----: | :-------------------------: |
| days | Number | 0 | - | 累计坚持天数 |
| today | Number | 0 | - | 今日做题 |
| total | Number | 0 | - | 累计做题 |
| dynamic | Array | [] | [] | 滚动动态列表 **格式见下文** |
### dynamic 格式
```json
["寒雨连江夜入吴", "平明送客楚山孤", "洛阳亲友如相问", "一片冰心在玉壶"]
```
### Events
| 事件称名 | 说明 | 返回值 |
| :------: | :------------------: | :----: |
| @answer | 点击每日一练按钮触发 | 无 |
## 组件用法
### 基础用法
```html
<subject-statistics
:days="40"
:today="97"
:total="668"
:dynamic="list"
@answer="answer"
></subject-statistics>
```
```javascript
import subjectStatistics from '@/components/subject-statistics/index.vue'
export default {
components: {
subjectStatistics,
},
data() {
return {
list: [
'寒雨连江夜入吴',
'平明送客楚山孤',
'洛阳亲友如相问',
'一片冰心在玉壶',
],
}
},
methods: {
answer() {
console.log('每日一练')
},
},
}
```
<template>
<view class="u-flex u-row-around tips">
<view class="title">
{{ title }}
</view>
<view class="validity" v-if="validity && status === 2">
有效期至:{{ validity }}
</view>
</view>
</template>
<script>
const title = ['请选择题库...', '绑卡或购买该题库后,即可开始刷题...', '刷题备考中...']
export default {
name: 'subjectTips',
props: {
status: {
type: Number,
default: 0,
},
validity: {
type: String,
default: '',
}
},
data() {
return {
}
},
computed: {
title() {
return title[this.status]
}
}
}
</script>
<style lang="scss" scoped>
.tips {
width: 100%;
background: #fbfbfb;
padding: 20rpx 40rpx;
font-size: 26rpx;
.title {
flex: 1
}
}
</style>
## 科目状态提示
```
科目状态提示组件,用于首页展示科目状态提示
```
## API
### Props
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
| :------: | :----: | :----: | :----: | :------------------------------------------------------: |
| status | Number | 0 | 1,2 | 当前状态(0.未选题库 1.已选科目未绑卡 2.已选科目已绑卡) |
| validity | String | - | - | 有效期, 状态等于 2 的时候需传 |
## 组件用法
### 基础用法
```html
<subject-tips :status="2" validity="2012.09.02"></subject-tips>
```
```javascript
import subjectTips from '@/components/subject-tips/index.vue'
export default {
components: {
subjectTips,
},
}
```
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment