update the logs

package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "mpvue": "^2.0.0",
+    "mpvue-weui": "^1.0.6",
     "pinyin": "^2.8.3",
     "swiper": "^4.5.0",
     "vuex": "^3.1.0"

src/components/logs/missionList.vue

@@ -4,24 +4,34 @@
       <image class="mission-list-item-image" :src="item.image" ></image>
       <div class="mission-list-item-word">
         <ul>
-          <li class="mission-list-item-title">{{item.title}}</li>
+          <li> 
+            <span class="mission-list-item-title">{{item.title}} </span>
+            <span class="mission-list-item-location">{{item.location}}</span>
+          </li>
+          <li><span><mp-rate rateValue=3 rateClass="mission-list-item-star"></mp-rate></span></li>
           <li>
             <span class="mission-list-item-time">{{item.time}}</span>
-            <span class="mission-list-item-location">{{item.location}}</span>
           </li>
           <li class="mission-list-item-intro">{{item.intro}}</li>
           <li class="mission-list-item-price">
+            <span>CNY￥</span>
             <span>{{item.price}}</span>
-            <span>闲钱币</span>
           </li>
         </ul>
       </div>
+      <div class="divideline"></div>
     </div>
   </div>
 </template>
 
 <script>
+
+import mpRate from 'mpvue-weui/src/rate';
+
 export default {
+  components: {
+    mpRate,
+  },
   props: {
     list: {
       type: Array,
@@ -69,9 +79,38 @@ export default {
 
 .mission-list-item-time {
   margin-right: 30rpx;
+  color: red;
 }
 
 .mission-list-item-price {
   float: right;
+  color: brown;
+}
+
+.mission-list-item-location{
+  color: white;
+  float: right;
+  border: 2rpx solid green;
+  background-color: green;
+  border-radius: 5rpx;
+  text-align: center;
+  margin-top:10rpx;
+  width: 100rpx;
+  height: 50rpx;
+  font-size: 25rpx;
+  line-height: 50rpx;
+}
+
+.mission-list-item-star{
+  width: 40rpx !important;
+  height: 40rpx !important;
+}
+
+.divideline{
+  height: 3rpx;
+  width: 100%;
+  float:left;
+  background-color: rgba(155, 146, 146, 0.548);
+  margin: 10rpx;
 }
 </style>

src/components/logs/searchBar.vue

@@ -7,7 +7,7 @@
           <input
             type="text"
             class="weui-search-bar__input"
-            placeholder="搜索"
+            placeholder="搜索订单"
             v-model="inputVal"
             :focus="inputShowed"
             @input="inputTyping"

src/pages/logs/index.vue

@@ -3,8 +3,11 @@
     <div class="mission-toolbar">
       <searchBar></searchBar>
     </div>
-    <div class="mission-list">
-      <missionList :list="missionlist"></missionList>
+    <div>
+      <mp-navbar :tabs="tabs" activeIndex=0 @tabClick="tabClick"></mp-navbar>
+    </div>
+    <div>
+      <missionList v-bind:list="missionlist"></missionList>
     </div>
   </div>
 </template>
@@ -14,11 +17,17 @@
 
 import searchBar from '@/components/logs/searchBar'
 import missionList from '@/components/logs/missionList'
+import mpNavbar from 'mpvue-weui/src/navbar';
+
+import { api } from "../../utils/api.js"
+
+import { mydb } from '../../utils/mydb.js'
 
 export default {
   components: {
     searchBar,
-    missionList
+    missionList,
+    mpNavbar
   },
 
   data () {
@@ -40,8 +49,43 @@ export default {
           intro: '从王者一星打到百星王者',
           price: '10000'
         }
-      ]
+      ],
+      tabs:['待完成','待确认','已确认','已完成']
     }
+  },
+  methods: {
+    queryAllTasks (){
+        return new Promise((resolve, reject) => {
+          mydb.queryAllTasks(function (result) {
+            console.log(result)
+            if (result.data.length != 0) {
+              let msg = {
+                'result': result.data,
+                'errMsg': 'query tasks:ok'
+              }
+              resolve(msg)
+            } else {
+              let msg = {
+                'result': null,
+                'errMsg': 'query tasks:error'
+              }
+              reject(msg)
+            }
+          })
+
+        })
+      }
+  },
+
+  created () {
+    console.log('abc');
+    this.queryAllTasks().then(res => {
+          console.log(res);
+          this.missionlist=res.result
+        })
+        .catch(rej => {
+          console.warn(rej);
+        });
   }
 }
 </script>