init

src/components/TestOne.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="movepoint">
+    <div class="fr con">
+      <div class="box1">
+        <div class="point fl" v-for="e in dataList" :key="e.point_code" @click="toRadio(e)">{{e.code_name}}</div>
+      </div>
+      <div class="box2">
+        <span class="span1">目标站点：</span>
+        <span class="span2">{{selectObj.code_name}}</span>
+        <button class="btn btn1" @click="toSure">确定</button>
+        <button class="btn btn2" @click="toClear">清除</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {queryPoint, confirmPoint} from '@/config/getData.js'
+export default {
+  name: 'MovePoint',
+  data () {
+    return {
+      selectObj: {},
+      dataList: []
+    }
+  },
+  created () {
+    this.initData()
+  },
+  methods: {
+    async initData () {
+      let res = await queryPoint()
+      if (res.code === '1') {
+        this.dataList = res.result
+      } else {
+        this.toast(res.desc)
+      }
+    },
+    async confirmPoint () {
+      let res = await confirmPoint(this.selectObj.point_code)
+      if (res.code === '1') {
+        this.toast(res.desc)
+        this.selectObj = {}
+      } else {
+        this.toast(res.desc)
+      }
+    },
+    toRadio (e) {
+      this.selectObj = e
+    },
+    toSure () {
+      if (this.selectObj.point_code) {
+        this.confirmPoint()
+      }
+    },
+    toClear () {
+      this.selectObj = {}
+    }
+  }
+}
+</script>
+<style lang="stylus" scoped>
+.con
+  float left
+  margin-left .4rem
+  margin-top .39rem
+.box1
+  width 10.4rem
+  // height 6.1rem
+  height 3.2rem
+  .point
+    width 2rem
+    line-height .9rem
+    color #FA6400
+    font-size .36rem
+    text-align center
+    border .16rem solid #DFE1E6
+    border-radius .2rem
+    background #ffffff
+    margin-right .4rem
+    margin-bottom .35rem
+.box2
+  position relative
+  width 9.81rem
+  height 1.5rem
+  border .16rem solid #DFE1E6
+  border-radius .2rem
+  background #ffffff
+  .span1
+    position absolute
+    left .3rem
+    top .34rem
+    display inline-block
+    line-height .5rem
+    font-size .28rem
+    border-right 3px solid #FA6400
+    width 1.6rem
+    color #464646
+  .span2
+    position absolute
+    left 2.5rem
+    top .4rem
+    display inline-block
+    font-size .34rem
+    color #fa6400
+  .btn
+    width 1.8rem
+    line-height .88rem
+    font-size .32rem
+    border-radius .28rem
+    color #ffffff
+  .btn1
+    position absolute
+    left 5.5rem
+    top .15rem
+    background #FD6A35
+  .btn2
+    position absolute
+    left 7.5rem
+    top .15rem
+    background #989EBB
+</style>