adjust page layout,split options

x2rr · May 14, 2020 · 964179c · 964179c
1 parent 7d47c9b
commit 964179c
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "choose-funds",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "A Vue.js web extension",
   "author": "Liu Rabt",
   "license": "GPL",

diff --git a/src/options/App.vue b/src/options/App.vue
@@ -23,16 +23,21 @@
         </li>
         <li>
           <div class="list-title">
-            显示份额与收益信息&nbsp;&nbsp;&nbsp;&nbsp;
-            <input
-              type="radio"
-              id="numFalse"
-              :value="false"
-              v-model="showNum"
-            />
-            <label for="numFalse">否</label>
-            <input type="radio" id="numTrue" :value="true" v-model="showNum" />
-            <label for="numTrue">是</label>
+            显示份额与收益信息
+            <div class="select-row">
+              显示持有金额
+              <input type="radio" id="numFalse" :value="false" v-model="showAmount" />
+              <label for="numFalse">否</label>
+              <input type="radio" id="numTrue" :value="true" v-model="showAmount" />
+              <label for="numTrue">是</label>
+            </div>
+            <div class="select-row">
+              显示估值收益
+              <input type="radio" id="numFalse" :value="false" v-model="showGains" />
+              <label for="numFalse">否</label>
+              <input type="radio" id="numTrue" :value="true" v-model="showGains" />
+              <label for="numTrue">是</label>
+            </div>
           </div>
 
           <p>tips：在编辑设置里，输入基金的持有份额，即可计算出收益估值情况。</p>
@@ -48,27 +53,65 @@ export default {
     return {
       holiday: null,
       disabled: false,
-      showNum: false
+      showAmount: false,
+      showGains: false
     };
   },
   mounted() {
-    chrome.storage.sync.get(["holiday", "showNum"], res => {
-      this.showNum = res.showNum ? res.showNum : false;
-      if (res.holiday) {
-        this.holiday = res.holiday;
-      } else {
-        this.getHoliday();
+    chrome.storage.sync.get(
+      ["holiday", "showNum", "showAmount", "showGains"],
+      res => {
+        if (res.showNum) { //解决版本遗留问题，拆分属性
+          chrome.storage.sync.set({
+            showNum: false
+          });
+          chrome.storage.sync.set(
+            {
+              showAmount: true
+            },
+            () => {
+              this.showAmount = true;
+            }
+          );
+          chrome.storage.sync.set(
+            {
+              showGains: true
+            },
+            () => {
+              this.showGains = true;
+            }
+          );
+        } else {
+          this.showAmount = res.showAmount ? res.showAmount : false;
+          this.showGains = res.showGains ? res.showGains : false;
+        }
+
+        if (res.holiday) {
+          this.holiday = res.holiday;
+        } else {
+          this.getHoliday();
+        }
       }
-    });
+    );
   },
   watch: {
-    showNum(val) {
+    showAmount(val) {
       chrome.storage.sync.set(
         {
-          showNum: val
+          showAmount: val
         },
         () => {
-          this.showNum = val;
+          this.showAmount = val;
+        }
+      );
+    },
+    showGains(val) {
+      chrome.storage.sync.set(
+        {
+          showGains: val
+        },
+        () => {
+          this.showGains = val;
         }
       );
     }
@@ -121,10 +164,15 @@ export default {
 }
 
 .list-title {
-  height: 34px;
+  min-height: 34px;
   line-height: 34px;
 }
 
+.list-title .select-row {
+  line-height: 30px;
+  padding-left: 20px;
+}
+
 .btn {
   display: inline-block;
   line-height: 1;

diff --git a/src/popup/App.vue b/src/popup/App.vue
@@ -16,10 +16,10 @@
             <th v-if="isEdit">基金代码</th>
             <th v-if="!isEdit">估算净值</th>
             <th>涨跌幅</th>
-            <th v-if="showNum">持有额</th>
-            <th v-if="showNum">收益额</th>
+            <th v-if="showAmount">持有额</th>
+            <th v-if="showGains">估算收益</th>
             <th v-if="!isEdit">更新时间</th>
-            <th v-if="isEdit&&showNum">持有份额</th>
+            <th v-if="isEdit&&(showAmount||showGains)">持有份额</th>
             <th v-if="isEdit">排序</th>
             <th v-if="isEdit">特别关注</th>
             <th v-if="isEdit">删除</th>
@@ -31,10 +31,10 @@
             <td v-if="isEdit">{{ el.fundcode }}</td>
             <td v-if="!isEdit">{{ el.gsz }}</td>
             <td :class="el.gszzl > 0 ? 'up' : 'down'">{{ el.gszzl }}%</td>
-            <td v-if="showNum">{{calculateMoney(el)}}</td>
-            <td v-if="showNum" :class="el.gszzl > 0 ? 'up' : 'down'">{{calculate(el)}}</td>
+            <td v-if="showAmount">{{calculateMoney(el)}}</td>
+            <td v-if="showGains" :class="el.gszzl > 0 ? 'up' : 'down'">{{calculate(el)}}</td>
             <td v-if="!isEdit">{{ el.gztime.substr(5) }}</td>
-            <th v-if="isEdit&&showNum">
+            <th v-if="isEdit&&isEdit&&(showAmount||showGains)">
               <input
                 class="btn num"
                 placeholder="输入持有份额"
@@ -121,7 +121,8 @@ export default {
       myVar1: null,
       rewardShadow: false,
       checked: "wepay",
-      showNum: false,
+      showGains: false,
+      showAmount: false,
       fundList: ["001618"],
       fundListM: []
     };
@@ -130,7 +131,7 @@ export default {
     this.isLiveUpdate = true;
     this.getSeciData();
     chrome.storage.sync.get(
-      ["RealtimeFundcode", "fundListM", "showNum", "fundList"],
+      ["RealtimeFundcode", "fundListM", "showAmount", "showGains", "fundList"],
       res => {
         this.fundList = res.fundList ? res.fundList : this.fundList;
         if (res.fundListM) {
@@ -144,7 +145,8 @@ export default {
             this.fundListM.push(val);
           }
         }
-        this.showNum = res.showNum ? res.showNum : false;
+        this.showAmount = res.showAmount ? res.showAmount : false;
+        this.showGains = res.showGains ? res.showGains : false;
         this.RealtimeFundcode = res.RealtimeFundcode;
         this.getData();
       }
@@ -156,8 +158,10 @@ export default {
         return "more-height";
       } else if (this.isEdit) {
         return "more-width";
-      } else if (this.showNum) {
-        return "num-width";
+      } else if (this.showAmount && this.showGains) {
+        return "num-all-width";
+      } else if (this.showAmount || this.showGains) {
+        return "num-one-width";
       }
     }
   },
@@ -219,7 +223,7 @@ export default {
             responses.forEach(res => {
               let val = res.data.match(/\{(.+?)\}/);
               let data = JSON.parse(val[0]);
-              if (this.showNum) {
+              if (this.showAmount || this.showGains) {
                 let slt = this.fundListM.filter(
                   item => item.code == data.fundcode
                 );
@@ -251,7 +255,7 @@ export default {
       });
     },
     calculateMoney(val) {
-      let sum = ((val.gsz) * val.num).toFixed(1);
+      let sum = (val.gsz * val.num).toFixed(1);
       return sum;
     },
     calculate(val) {
@@ -373,7 +377,11 @@ export default {
   width: 600px;
 }
 
-.num-width {
+.num-all-width {
+  min-width: 500px;
+}
+
+.num-one-width {
   min-width: 420px;
 }