refactor(stats.vue): refactor stats components

94c79731 · nenyah · 91947b23 · 94c79731 · 94c79731 · 94c79731
4 changed file
--- a/src/components/stats/stats.vue
+++ b/src/components/stats/stats.vue
@@ -3,28 +3,24 @@
 * @Author: Steven
 * @Date: 2020-09-08 09:22:09
 * @LastEditors: Steven
- * @LastEditTime: 2020-09-09 16:52:17
+ * @LastEditTime: 2020-09-10 11:29:31
 -->
 <template>
  <view class="px-4 pt-2">
-    <title></title>
    <view
      class="w-4-5 border-2 border-gray-100 mt-2 p-2 border border-b-0 border-gray-200 border-solid"
    >
-      <view class="text-gray-100 flex">
-        <view class="flex-1 text-center text-xl">100</view>
-        <view class="flex-1 text-center text-xl">1678395</view>
-        <view class="flex-1 text-center text-xl">45597802</view>
+      <view class="flex">
+        <view class="flex-1" v-for="(item, index) in content" :key="index">
+          <view class="text-gray-100 text-center text-xl">
+            {{ item.value }}
+          </view>
+          <view class="text-yellow-900 text-center">
+            {{ item.name }}
+          </view>
+        </view>
      </view>
-      <view class="text-yellow-900 flex">
-        <view class="flex-1 text-center">参赛选手</view>
-        <view class="flex-1 text-center">累计票数</view>
-        <view class="flex-1 text-center">累计访问</view>
-      </view>
-      <view
-        class="mt-2 p-2 text-gray-100 text-center border border-r-0  border-l-0 border-gray-100 border-solid"
-        >活动结束时间还有{{ lastdate }}</view
-      >
+      <slot></slot>
    </view>
  </view>
 </template>
@@ -34,9 +30,10 @@ import Vue from "vue"
 import title from "@/components/title/title.vue"
 export default Vue.extend({
  data() {
-    return {
-      lastdate: "2天",
-    }
+    return {}
+  },
+  props: {
+    content: Array,
  },
  onLoad() {},
  methods: {},

--- a/src/mock/store.ts
+++ b/src/mock/store.ts
 /*
- * @Description: 
+ * @Description:
 * @Author: Steven
 * @Date: 2020-09-07 17:00:45
 * @LastEditors: Steven
- * @LastEditTime: 2020-09-08 15:19:01
+ * @LastEditTime: 2020-09-10 11:00:59
 */
 export interface Iitem {
-	id:Number,
-	name:String,
-	img:String,
-	company:String,
-	group:String,
-	vote:Number
+  id: Number
+  name: String
+  img: String
+  company: String
+  group: String
+  vote: Number
+  rank: Number
+  diffLast: Number
 }
-export const items:Array<Iitem>=[
-		{
-			id:1,
-			name:'漂亮1号',
-			img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599552329628&di=6fb1ca2fcfdc93412997fb8c45a1fd76&imgtype=0&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3070838336%2C607285885%26fm%3D214%26gp%3D0.jpg',
-			company:'公司',
-			group:'漂亮组',
-			vote:250
-		},
-		{
-			id:2,
-			name:'漂亮2号',
-			img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599552329628&di=6fb1ca2fcfdc93412997fb8c45a1fd76&imgtype=0&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3070838336%2C607285885%26fm%3D214%26gp%3D0.jpg',
-			company:'公司',
-			group:'漂亮组',
-			vote:250*2
-		},
-		{
-			id:3,
-			name:'漂亮3号',
-			img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599552329628&di=6fb1ca2fcfdc93412997fb8c45a1fd76&imgtype=0&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3070838336%2C607285885%26fm%3D214%26gp%3D0.jpg',
-			company:'公司',
-			group:'漂亮组',
-			vote:250*3
-		},
-		{
-			id:4,
-			name:'漂亮4号',
-			img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599552329628&di=6fb1ca2fcfdc93412997fb8c45a1fd76&imgtype=0&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3070838336%2C607285885%26fm%3D214%26gp%3D0.jpg',
-			company:'公司',
-			group:'漂亮组',
-			vote:250*4
-		},
-		{
-			id:5,
-			name:'漂亮5号',
-			img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599552329628&di=6fb1ca2fcfdc93412997fb8c45a1fd76&imgtype=0&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3070838336%2C607285885%26fm%3D214%26gp%3D0.jpg',
-			company:'公司',
-			group:'漂亮组',
-			vote:250*5
-		},
-		{
-			id:6,
-			name:'漂亮6号',
-			img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599552329628&di=6fb1ca2fcfdc93412997fb8c45a1fd76&imgtype=0&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3070838336%2C607285885%26fm%3D214%26gp%3D0.jpg',
-			company:'公司',
-			group:'漂亮组',
-			vote:250*6
-		},
-	]
+export interface Iinfo {
+  name: string
+  value: number
+}
+export const items: Array<Iitem> = [
+  {
+    id: 1,
+    name: "漂亮1号",
+    img:
+      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599552329628&di=6fb1ca2fcfdc93412997fb8c45a1fd76&imgtype=0&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3070838336%2C607285885%26fm%3D214%26gp%3D0.jpg",
+    company: "公司",
+    group: "漂亮组",
+    vote: 250,
+    rank: 6,
+    diffLast: 100,
+  },
+  {
+    id: 2,
+    name: "漂亮2号",
+    img:
+      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599552329628&di=6fb1ca2fcfdc93412997fb8c45a1fd76&imgtype=0&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3070838336%2C607285885%26fm%3D214%26gp%3D0.jpg",
+    company: "公司",
+    group: "漂亮组",
+    vote: 250 * 2,
+    rank: 5,
+    diffLast: 200,
+  },
+  {
+    id: 3,
+    name: "漂亮3号",
+    img:
+      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599552329628&di=6fb1ca2fcfdc93412997fb8c45a1fd76&imgtype=0&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3070838336%2C607285885%26fm%3D214%26gp%3D0.jpg",
+    company: "公司",
+    group: "漂亮组",
+    vote: 250 * 3,
+    rank: 4,
+    diffLast: 1000,
+  },
+  {
+    id: 4,
+    name: "漂亮4号",
+    img:
+      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599552329628&di=6fb1ca2fcfdc93412997fb8c45a1fd76&imgtype=0&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3070838336%2C607285885%26fm%3D214%26gp%3D0.jpg",
+    company: "公司",
+    group: "漂亮组",
+    vote: 250 * 4,
+    rank: 3,
+    diffLast: 10000,
+  },
+  {
+    id: 5,
+    name: "漂亮5号",
+    img:
+      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599552329628&di=6fb1ca2fcfdc93412997fb8c45a1fd76&imgtype=0&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3070838336%2C607285885%26fm%3D214%26gp%3D0.jpg",
+    company: "公司",
+    group: "漂亮组",
+    vote: 250 * 5,
+    rank: 2,
+    diffLast: 100,
+  },
+  {
+    id: 6,
+    name: "漂亮6号",
+    img:
+      "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599552329628&di=6fb1ca2fcfdc93412997fb8c45a1fd76&imgtype=0&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D3070838336%2C607285885%26fm%3D214%26gp%3D0.jpg",
+    company: "公司",
+    group: "漂亮组",
+    vote: 250 * 6,
+    rank: 1,
+    diffLast: 0,
+  },
+]
+export const indexstats: Array<Iinfo> = [
+  {
+    name: "参赛选手",
+    value: 100,
+  },
+  {
+    name: "累计票数",
+    value: 1678395,
+  },
+  {
+    name: "累计访问",
+    value: 45597802,
+  },
+]
+export const detailstats: Array<Iinfo> = [
+  {
+    name: "当前票数",
+    value: 23460,
+  },
+  {
+    name: "排名",
+    value: 24,
+  },
+  {
+    name: "距上一名",
+    value: 494,
+  },
+]
--- a/src/pages/detail/detail.vue
+++ b/src/pages/detail/detail.vue
+<!--
+ * @Description: 
+ * @Author: Steven
+ * @Date: 2020-09-08 08:48:06
+ * @LastEditors: Steven
+ * @LastEditTime: 2020-09-10 10:46:49
+-->
 <template>
-	<view>
-		详情页
-	</view>
+  <view class="bg-purple">
+    <title></title>
+	<stats></stats>
+  </view>
 </template>

 <script lang="ts">
-	export default {
-		data() {
-			return {
-				
-			};
-		}
-	}
+import Vue from "vue"
+import title from "@/components/title/title.vue"
+import stats from "@/components/stats/stats.vue"
+export default Vue.extend({
+  data() {
+    return {}
+  },
+  components: {
+	title,
+	stats,
+  },
+})
 </script>

-<style>
-
-</style>
+<style></style>
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -3,12 +3,19 @@
 * @Author: Steven
 * @Date: 2020-08-26 16:08:15
 * @LastEditors: Steven
- * @LastEditTime: 2020-09-10 10:25:37
+ * @LastEditTime: 2020-09-10 11:26:21
 -->
 <template>
  <view class="bg-purple">
    <banner></banner>
-    <stats></stats>
+    <title></title>
+    <stats :content="indexstats">
+      <view
+        class="mt-2 p-2 text-gray-100 text-center border border-r-0  border-l-0 border-gray-100 border-solid"
+      >
+        活动结束时间还有{{ lastdate }}
+      </view>
+    </stats>
    <brief-desc></brief-desc>
    <search-bar></search-bar>
    <vote-list :items="items" :pageType="pageType"></vote-list>
@@ -19,16 +26,19 @@
 <script lang="ts">
 import Vue from "vue"
 import banner from "@/components/banner/banner.vue"
+import title from "@/components/title/title.vue"
 import stats from "@/components/stats/stats.vue"
 import briefDesc from "@/components/brief-desc/brief-desc.vue"
 import searchBar from "@/components/search-bar/search-bar.vue"
 import voteList from "@/components/vote-list/vote-list.vue"
 import voteFooter from "@/components/footer/footer.vue"
-import { items } from "@/mock/store"
+import { items, indexstats } from "@/mock/store"
 export default Vue.extend({
  data() {
    return {
      items,
+      indexstats,
+      lastdate: "2天",
      pageType: "index",
    }
  },
@@ -36,6 +46,7 @@ export default Vue.extend({
  methods: {},
  components: {
    banner,
+    title,
    stats,
    briefDesc,
    searchBar,