From 3c646d0032a1b38e10de964615ada6a0ee6ce19d Mon Sep 17 00:00:00 2001
From: EddieMa <machaoxue@yeah.net>
Date: Thu, 21 May 2020 14:13:35 +0800
Subject: [PATCH] =?UTF-8?q?Note=20=E7=BB=84=E4=BB=B6=EF=BC=8Cv-model?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Account/Choice.vue | 13 ++++++----
 src/components/Account/Note.vue   |  6 +++--
 src/components/Account/Show.vue   | 13 +++++++---
 src/components/Account/Write.vue  | 42 ++++++++++++++++++++-----------
 src/components/Type.vue           | 17 +++++++++----
 src/main.ts                       |  2 ++
 src/store/index.ts                | 28 +++++++++++++--------
 src/store/personStore.ts          | 30 ++++++++++++++++++++++
 src/views/Account.vue             | 12 ++++++---
 9 files changed, 120 insertions(+), 43 deletions(-)
 create mode 100644 src/store/personStore.ts

diff --git a/src/components/Account/Choice.vue b/src/components/Account/Choice.vue
index 333aa55..c429273 100644
--- a/src/components/Account/Choice.vue
+++ b/src/components/Account/Choice.vue
@@ -3,10 +3,6 @@
     <div>类别</div>
     <ul>
       <li class="selected">默认</li>
-      <li>衣</li>
-      <li>食</li>
-      <li>住</li>
-      <li>行</li>
     </ul>
   </div>
 
@@ -15,8 +11,15 @@
 <script lang="ts">
   import Vue from 'vue';
   import {Component} from 'vue-property-decorator';
+  import store from '@/store';
   
-  @Component
+  @Component({
+    computed:{
+      labelList(){
+        return store.state.labelList
+      }
+    }
+  })
   export default class Choice extends Vue {
     
   }
diff --git a/src/components/Account/Note.vue b/src/components/Account/Note.vue
index a646aaa..6552935 100644
--- a/src/components/Account/Note.vue
+++ b/src/components/Account/Note.vue
@@ -1,7 +1,9 @@
 <template>
     <label>
+      {{value}}
       <span>备注</span>
-      <input type="text" placeholder="在这里添加备注">
+      <input type="text" v-model="value"
+             placeholder="在这里添加备注">
     </label>
 </template>
 
@@ -11,7 +13,7 @@
   
   @Component
   export default class Note extends Vue {
-    
+    value = '';
   }
 </script>
 
diff --git a/src/components/Account/Show.vue b/src/components/Account/Show.vue
index bdc27ab..ab0256b 100644
--- a/src/components/Account/Show.vue
+++ b/src/components/Account/Show.vue
@@ -1,17 +1,24 @@
 <template>
   <div class="show">
     <div class="text">金额</div>
-    <div class="number">100.12</div>
+    <div class="number">{{output}}</div>
   </div>
 </template>
 
 <script lang="ts">
   import Vue from 'vue';
   import {Component} from 'vue-property-decorator';
+  import personStore from '@/store/personStore'
   
-  @Component
+  @Component({
+    // todo
+    computed:{
+      output(){
+        return personStore.output;
+      }
+    }
+  })
   export default class Show extends Vue {
-    
   }
 </script>
 
diff --git a/src/components/Account/Write.vue b/src/components/Account/Write.vue
index 6590111..d1c4a07 100644
--- a/src/components/Account/Write.vue
+++ b/src/components/Account/Write.vue
@@ -1,29 +1,43 @@
 <template>
   <div class="buttons">
-    <button>1</button>
-    <button>2</button>
-    <button>3</button>
-    <button>删除</button>
-    <button>4</button>
-    <button>5</button>
-    <button>6</button>
-    <button class="clear">清空</button>
-    <button>7</button>
-    <button>8</button>
-    <button>9</button>
+    <button @click="inputContent">1</button>
+    <button @click="inputContent">2</button>
+    <button @click="inputContent">3</button>
+    <button @click="remove">删除</button>
+    <button @click="inputContent">4</button>
+    <button @click="inputContent">5</button>
+    <button @click="inputContent">6</button>
+    <button @click="empty">清空</button>
+    <button @click="inputContent">7</button>
+    <button @click="inputContent">8</button>
+    <button @click="inputContent">9</button>
     <button class="ok">确认</button>
-    <button class="zero">0</button>
-    <button>.</button>
+    <button @click="inputContent" class="zero">0</button>
+    <button @click="inputContent">.</button>
   </div>
 </template>
 
 <script lang="ts">
   import Vue from 'vue';
   import {Component} from 'vue-property-decorator';
-  
+  import personStore from '@/store/personStore';
+
   @Component
   export default class Write extends Vue {
+    remove(){
+      // todo
+      personStore.remove();
+      console.log(personStore.output)
+    }
+    empty(){
+      personStore.empty();
+      console.log(personStore.output)
 
+    }
+    inputContent(event: MouseEvent){
+      personStore.inputContent(event);
+      console.log(personStore.output)
+    }
   }
 </script>
 
diff --git a/src/components/Type.vue b/src/components/Type.vue
index 5b98242..ba25877 100644
--- a/src/components/Type.vue
+++ b/src/components/Type.vue
@@ -1,17 +1,24 @@
 <template>
   <ul>
-    <li class="selected">支出</li>
-    <li>收入</li>
+    <li :class="{selected: type==='+'}" @click="selectA">支出</li>
+    <li :class="{selected: type==='-'}" @click="selectB">收入</li>
   </ul>
 </template>
 
 <script lang="ts">
   import Vue from 'vue';
   import {Component} from 'vue-property-decorator';
-  
+
   @Component
-  export default class Top2 extends Vue {
-    
+  export default class Type extends Vue {
+    typeList=['+','-'];
+    type='+';
+    selectA(){
+      this.type=this.typeList[0]
+    }
+    selectB(){
+      this.type=this.typeList[1]
+    }
   }
 </script>
 
diff --git a/src/main.ts b/src/main.ts
index c35b171..90fcc4e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -6,6 +6,8 @@ import store from './store';
 import Nav from '@/components/Nav.vue';
 import Top from '@/components/Top.vue';
 import Layout from '@/components/Layout.vue';
+import personStore from '@/store/personStore';
+
 
 Vue.config.productionTip = false;
 Vue.component('Top',Top);
diff --git a/src/store/index.ts b/src/store/index.ts
index 332b916..ced2de4 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,15 +1,23 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+import Vue from 'vue';
+import Vuex from 'vuex';
 
-Vue.use(Vuex)
+type LabelList = {
+  labelList: string[];
+}
 
-export default new Vuex.Store({
-  state: {
+Vue.use(Vuex);
+const store =  new Vuex.Store({
+  state:{
+    labelList:['默认','衣','食','住','行']
   },
   mutations: {
-  },
-  actions: {
-  },
-  modules: {
+    addLabel(state){
+      state.labelList.push('彩票')
+    }
   }
-})
+});
+
+store.commit('addLabel');
+
+export default store
+
diff --git a/src/store/personStore.ts b/src/store/personStore.ts
new file mode 100644
index 0000000..93cb32c
--- /dev/null
+++ b/src/store/personStore.ts
@@ -0,0 +1,30 @@
+const store =  {
+  output: '124',
+  fetchOutput() {
+    return this.output;
+  },
+  remove(){
+    if(this.output.length<=1){
+      this.output = '0';
+    }else{
+      this.output = this.output.slice(0,-1)
+    }
+  },
+  empty(){
+    this.output = '0';
+  },
+  inputContent(event: MouseEvent){
+    const input = (event.target as HTMLButtonElement).textContent as string;
+    if(this.output.length<=16){
+      if(this.output ==='0' && input !=='.'){
+        this.output = input;
+      }else{
+        if(this.output.indexOf('.')>=0 && input ==='.'){
+          return
+        }
+        this.output += input;
+      }
+    }
+  }
+};
+export default store
\ No newline at end of file
diff --git a/src/views/Account.vue b/src/views/Account.vue
index a27650b..d99503a 100644
--- a/src/views/Account.vue
+++ b/src/views/Account.vue
@@ -3,7 +3,7 @@
       <Type/>
       <Choice/>
       <Note/>
-      <Show/>
+      <Show @ok="onOutputChange"/>
       <Write/>
     </Layout>
 </template>
@@ -17,11 +17,15 @@
   import Write from '@/components/Account/Write.vue';
   import Show from '@/components/Account/Show.vue';
 
+
   @Component({
-    components: {Show, Write, Note, Choice, Type}
-  })
+    components: {Show, Write, Note, Choice, Type},
+  },)
   export default class Account extends Vue {
-    
+    output='0';
+    onOutputChange(){
+      console.log("检测到 output 变化啦")
+    }
   }
 </script>