fengchuanyu 2 months ago
parent
commit
cbd8a6eb95

+ 1 - 0
12_vuecli/mediaapp/package.json

@@ -15,6 +15,7 @@
     "mavon-editor": "^2.10.4",
     "vant": "^2.13.6",
     "vue": "^2.6.14",
+    "vue-baidu-map": "^0.21.22",
     "vue-markdown": "^2.2.4",
     "vue-markdown-render": "^2.2.1",
     "vue-router": "^3.5.1"

+ 4 - 0
12_vuecli/mediaapp/src/router/index.js

@@ -26,6 +26,10 @@ const routes = [
     path:'/score',
     name:'score',
     component:() => import("../views/mine/MineScore.vue")
+  },{
+    path:"/address",
+    name:"address",
+    component:() => import("../views/mine/MineAddress.vue")
   }
 ]
 

+ 24 - 0
12_vuecli/mediaapp/src/views/mine/MineAddress.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="mine-address">
+        <baidu-map class="bm-view" center="北京">
+            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
+        </baidu-map>
+    </div>
+</template>
+<style scoped>
+    .bm-view{
+        width: 100vw;
+        height: 100vw;
+    }
+</style>
+<script>
+import Vue from 'vue'
+import BaiduMap from 'vue-baidu-map'
+
+Vue.use(BaiduMap, {
+  ak: 'kMxu1YB2Og3q1S2UgcDbONFArPPbgd9I'
+})
+export default {
+    
+}
+</script>

+ 1 - 1
12_vuecli/mediaapp/src/views/mine/MinePage.vue

@@ -18,7 +18,7 @@
     <div class="nav">
       <van-cell-group inset>
         <van-cell title="我的成绩" size="large" is-link to="/score" icon="edit"/>
-        <van-cell title="我的地址" size="large" is-link icon="location-o"/>
+        <van-cell title="我的地址" size="large" is-link to="/address" icon="location-o"/>
       </van-cell-group>
     </div>
   </div>

+ 53 - 2
12_vuecli/mediaapp/src/views/mine/MineScore.vue

@@ -9,6 +9,35 @@
       />
     </div>
     <div class="echarts-content" ref="echarts"></div>
+    <div class="form-content">
+      <van-field
+        readonly
+        clickable
+        name="picker"
+        :value="subjectVal"
+        label="选择科目"
+        placeholder="请选取科目"
+        @click="showPicker = true"
+      />
+      <van-popup v-model="showPicker" position="bottom">
+        <van-picker
+          show-toolbar
+          :columns="subjectList"
+          @confirm="onConfirm"
+          @cancel="showPicker = false"
+        />
+      </van-popup>
+      <van-field
+        v-model="scoreNum"
+        name="score"
+        label="输入分数"
+        placeholder="请输入分数"
+        :rules="[{ required: true, message: '请填写用户名' }]"
+      />
+      <div style="margin: 16px">
+        <van-button @click="updateHandle" round block type="info">修改</van-button>
+      </div>
+    </div>
   </div>
 </template>
 <style scoped>
@@ -25,8 +54,30 @@
 </style>
 <script>
 import * as echarts from "echarts";
+import { Notify } from 'vant';
 export default {
+  data() {
+    return {
+      scoreNum: "",
+      showPicker: false,
+      subjectVal: "",
+      scoreList:[80, 90, 96, 100, 70, 80],
+      subjectList: ["高数", "英语", "大物", "C语言", "网络", "操作系统"],
+    };
+  },
   methods: {
+    updateHandle() {
+      let index = this.subjectList.indexOf(this.subjectVal);
+      this.scoreList[index] = this.scoreNum;
+      this.creatEcharts();
+      this.scoreNum = "";
+      this.subjectVal = "";
+      Notify({ type: 'success',background:"#5871c0",duration: 1000, message: '修改成功' });
+    },
+    onConfirm(value) {
+      this.subjectVal = value;
+      this.showPicker = false;
+    },
     creatEcharts() {
       // 获取dom
       let oEcharts = this.$refs.echarts;
@@ -39,7 +90,7 @@ export default {
         },
         tooltip: {},
         xAxis: {
-          data: ["高数", "英语", "大物", "C语言", "网络", "操作系统"],
+          data: this.subjectList,
           axisLabel: {
             interval: 0,
             rotate: 30,
@@ -50,7 +101,7 @@ export default {
           {
             name: "成绩",
             type: "bar",
-            data: [80, 90, 96, 100, 70, 80],
+            data: this.scoreList,
             label: {
               show: true,
               position: "inside",