vuejs2.0 银行列表 公用弹框slot table列表通用js方法处理

原创 2018年04月15日 17:17:50

这里写图片描述

银行列表

<template>
  <div class="chooser-component">
    <ul class="chooser-list">
      <li
      v-for="(item, index) in banks"
      @click="chooseSelection(index)"
      :title="item.label"
      :class="[item.name, {active: index === nowIndex}]"
      ></li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      nowIndex: 0,
      banks: [
          {
              id: 201,
              label: '招商银行',
              name: 'zhaoshang'
          },
          {
              id: 301,
              label: '中国建设银行',
              name: 'jianshe'
          },
          {
              id: 601,
              label: '浦发银行',
              name: 'pufa'
          },
          {
              id: 1101,
              label: '交通银行',
              name: 'jiaotong'
          },
          {
              id: 101,
              label: '中国工商银行',
              name: 'gongshang'
          },
          {
              id: 401,
              label: '中国农业银行',
              name: 'nongye'
          },
          {
              id: 1201,
              label: '中国银行',
              name: 'zhongguo'
          },
          {
              id: 501,
              label: '中信银行',
              name: 'zhongxin'
          }
      ]
    }
  },
  methods: {
    chooseSelection (index) {
      this.nowIndex = index
      this.$emit('on-change', this.banks[index])
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chooser-component {
  position: relative;
  display: inline-block;
}
.chooser-list li.active {
  border: 1px solid #4fc08d;
}
.chooser-list li { 
    display: inline-block;
    width: 117px;
    height: 32px;
    background-image: url(../assets/banks/banks.png);
    background-repeat: no-repeat;
    margin: 5px;
    border: 1px solid #e3e3e3;
    cursor: pointer;
}
.zhaoshang {
    background-position: -2160px 0;
}
.jianshe {
    background-position: -720px 0;
}
.pufa {
    background-position: -1800px 0;
}
.jiaotong {
    background-position: -3120px 0;
}
.minsheng {
    background-position: -2760px 0;
}
.pingan {
    background-position: -2400px 0;
}
.beijing {
    background-position: -960px 0;
}
.xingye {
    background-position: 0 0;
}
.shanghai {
    background-position: -1560px 0;
}
.guangfa {
    background-position: -840px 0;
}
.gongshang {
    background-position: -2640px 0;
}
.nongye {
    background-position: -1680px 0;
}
.guangda {
    background-position: -2280px 0;
}
.zhongguo {
    background-position: -2520px 0;
}
.zhongxin {
    background-position: -480px 0;
}
.chuxu {
    background-position: -120px 0;
}
.bnongshang {
    background-position: -1440px 0;
}
.huaxia {
    background-position: -2040px 0;
}
.snongshang {
    background-position: -2880px 0;
}

.baifubao {
    background-position: -1320px 0;
}
</style>

定义 nowIndex 与当前index 来控制样式交互
this.$emit(‘on-change’, this.banks[index]) 把当前选择的银行列表数据 传到父级组件


银行列表 父级组件

<h3 class="buy-dialog-title">请选择银行</h3>
        <bank-chooser @on-change="onChangeBanks"></bank-chooser>

关键js

<script>
import BankChooser from '../../components/bankChooser'
import _ from 'lodash'
export default {
  components: {
    BankChooser,
  },
  data () {
    return {
      bankId: null,
      orderId: null,
      isShowCheckOrder: false,
      isShowErrDialog: false
    }
  },
  methods: {

    onChangeBanks (bankObj) {
      this.bankId = bankObj.id
    },
    confirmBuy () {
      let buyVersionsArray = _.map(this.versions, (item) => {
        return item.value
      })
      let reqParams = {
        buyNumber: this.buyNum,
        buyType: this.buyType.value,
        period: this.period.value,
        version: buyVersionsArray.join(','),
        bankId: this.bankId
      }
      this.$http.post('/api/createOrder', reqParams)
      .then((res) => {
        this.orderId = res.data.orderId
        this.isShowCheckOrder = true
        this.isShowPayDialog = false
      }, (err) => {
        this.isShowBuyDialog = false
        this.isShowErrDialog = true
      })
    }
  },
  mounted () {
    this.buyNum = 1
    this.buyType = this.buyTypes[0]
    this.versions = [this.versionList[0]]
    this.period = this.periodList[0]
    this.getPrice()
  }
}
</script>

这里写图片描述

公共弹框slot

<template>
  <div>
    <div class="dialog-wrap">
      <div class="dialog-cover"  v-if="isShow" @click="closeMyself"></div>
      <transition name="drop">
        <div class="dialog-content"  v-if="isShow">
          <p class="dialog-close" @click="closeMyself">x</p>
          <slot>empty</slot>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {

    }
  },
  methods: {
    closeMyself () {
      this.$emit('on-close')
    }
  }
}
</script>

<style scoped>
.drop-enter-active {
  transition: all .5s ease;
}
.drop-leave-active {
  transition: all .3s ease;
}
.drop-enter {
  transform: translateY(-500px);
}
.drop-leave-active {
  transform: translateY(-500px);
}

.dialog-wrap {
  position: fixed;
  width: 100%;
  height: 100%;
}
.dialog-cover {
  background: #000;
  opacity: .3;
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.dialog-content {
  width: 50%;
  position: fixed;
  max-height: 50%;
  overflow: auto;
  background: #fff;
  top: 20%;
  left: 50%;
  margin-left: -25%;
  z-index: 10;
  border: 2px solid #464068;
  padding: 2%;
  line-height: 1.6;
}
.dialog-close {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 20px;
  height: 20px;
  text-align: center;
  cursor: pointer;
}
.dialog-close:hover {
  color: #4fc08d;
}
</style>

父级组件调用

<div class="head-nav">
          <ul class="nav-list">
            <li> {{ username }}</li>
            <li v-if="username!== ''" class="nav-pile">|</li>
            <li v-if="username!== ''" @click="quit">退出</li>
            <li v-if="username=== ''" @click="logClick">登录</li>
            <li class="nav-pile">|</li>
            <li v-if="username=== ''" @click="regClick">注册</li>
            <li v-if="username=== ''" class="nav-pile">|</li>
            <li @click="aboutClick">关于</li>
          </ul>
        </div>  
<my-dialog :is-show="isShowAboutDialog" @on-close="closeDialog('isShowAboutDialog')">
      <p>本报告在调研数据的基础上,采用定性与定量相结合的方式深入分析了专车市场发展的驱动因素与阻碍因素、专车市场背后的产业格局、专车企业的竞争格局、用户对专车市场的依赖程度、专车对其他交通工具运力的补充效应等,通过这五个章节的研究反映专车市场的发展态势和面临的问题。报告力求客观、深入、准确地反映中国专车市场发展情况,为政府、企事业单位和社会各界提供决策依据。 </p>
    </my-dialog>
<script>
import Dialog from './base/dialog'
import LogForm from './logForm'
import RegForm from './regForm'
export default {
  components: {
    MyDialog: Dialog,
    LogForm,
    RegForm
  },
  data () {
    return {
      isShowAboutDialog: false,
      isShowLogDialog: false,
      isShowRegDialog: false,
      username: ''
    }
  },
  methods: {
    aboutClick () {
      this.isShowAboutDialog = true
    },
    logClick () {
      this.isShowLogDialog = true
    },
    regClick () {
      this.isShowRegDialog = true
    },
    closeDialog (attr) {
      this[attr] = false
    },
    onSuccessLog (data) {
      console.log(data)
      this.closeDialog ('isShowLogDialog')
      this.username = data.username
    }
  }
}
</script>

这里写图片描述

<div class="order-list-option">
        关键词:
        <input type="text" v-model.lazy="query" class="order-query">
      </div>
<div class="order-list-table">
      <table>
        <tr>
          <th v-for="head in tableHeads" @click="changeOrderType(head)" :class="{active:head.active}">{{ head.label }}</th>
        </tr>
        <tr v-for="item in tableData" :key="item.period">
          <td v-for="head in tableHeads">{{ item[head.key] }}</td>
        </tr>
      </table>
    </div>
  </div>
<script>

import _ from 'lodash'
export default {

  data () {
    return {
      query: '',
      productId: 0,
      startDate: '',
      endDate: '',
      products: [
        {
          label: '数据统计',
          value: 0
        },
        {
          label: '数据预测',
          value: 1
        },
        {
          label: '流量分析',
          value: 2
        },
        {
          label: '广告发布',
          value: 3
        }
      ],
      tableHeads: [
        {
          label: '订单号',
          key: 'orderId'
        },
        {
          label: '购买产品',
          key: 'product'
        },
        {
          label: '版本类型',
          key: 'version'
        },
        {
          label: '有效时间',
          key: 'period'
        },
        {
          label: '购买日期',
          key: 'date'
        },
        {
          label: '数量',
          key: 'buyNum'
        },
        {
          label: '总价',
          key: 'amount'
        }
      ],
      currentOrder: 'asc',
      tableData: []
    }
  },
  watch: {
    query () {
      this.getList()   //通过监听query 变化
    }
  },
  methods: {
    productChange (obj) {
      this.productId = obj.value
      this.getList()
    },
    getStartDate (date) {
      this.startDate = date
      this.getList()
    },
    getEndDate (date) {
      this.endDate = date
      this.getList()
    },
    getList () {
      let reqParams = {
        query: this.query,
        productId: this.productId,
        startDate: this.startDate,
        endDate: this.endDate
      }
      this.$http.post('/api/getOrderList', reqParams)
      .then((res) => {
        this.tableData = res.data.list
      }, (err) => {

      })
    },
    changeOrderType (headItem) {
      this.tableHeads.map((item) => {
        item.active = false
        return item
      })   // 控制样式通用方法
      headItem.active = true
      if (this.currentOrder === 'asc') {
        this.currentOrder = 'desc'
      }
      else if (this.currentOrder === 'desc') {
        this.currentOrder = 'asc'
      }
      this.tableData = _.orderBy(this.tableData, headItem.key, this.currentOrder)
    }
  },
  mounted () {
    this.getList()
  }
}
</script>

vuex

state 存放数据
getters 页面必须通过它来拿数据
action 异步请求数据
mutaions 同步方法

数据中心 顾名思义 把数据请求分离出来 做一个抽取

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/kingrome2017/article/details/79950971

easyui 弹框显示列表

jsp: .tongji_table{width:100%;text-align:left;border-collapse:collapse;border-spacing:0;border-spac...
  • wenweining
  • wenweining
  • 2017年05月23日 15:12
  • 1329

bootstrap 点击table中某一列,弹出模态框

(一)bootstrap-table中测量值太长了,显示不美观,为了显示美观,把测量值大于20个字,让其显示详情,鼠标悬浮到这个值 时候,出现悬浮框。 原页面效果: 代码实现: (1)后台返...
  • songmaolin_csdn
  • songmaolin_csdn
  • 2016年10月11日 16:55
  • 11565

IOS自定义弹出框和自定义单选列表

【1】自定义弹出框iOS自定义提示弹出框(类似UIAlertView)https://www.jianshu.com/p/e15d21c87b82【2】自定义单选列表Radio Button——iOS...
  • mashang123456789
  • mashang123456789
  • 2018年03月02日 15:54
  • 155

原生js开发的弹框组件

Document *{ margin:0; padding:0;} input { width:60px; height: 30px;} .log
  • u012260672
  • u012260672
  • 2016年01月27日 15:57
  • 325

练习:LOL 英雄列表(加入弹框修改英雄名称)

此图是代表ios8前后创建弹框的方法对比: 设置弹框内容:列表的实现代码就不详细列出了,此处仅对弹框部分实现代码做展示。调用了 UITableViewDelegate 和 UIAlertViewDel...
  • CG_Lueng
  • CG_Lueng
  • 2016年03月21日 17:38
  • 246

js弹框插件

前段时间闲来没事就自己造了个轮子,写了个弹框插件。虽然还有很多待完善的,但是感觉够用很多场景了,所以就拿出来分享分享我自己给它取名叫Lee_popup(前段时间误删了,现在重新发布下)这是HTML部分...
  • sheng_li
  • sheng_li
  • 2018年02月26日 18:26
  • 412

asp.net通用列表查询控件

[此控件已有新版本,见:http://blog.csdn.net/luoyeyu1989/article/details/7909334]   原理:根据之前写的动态增删行插件,再结合查询字段来拼...
  • luoyeyu1989
  • luoyeyu1989
  • 2012年04月14日 18:23
  • 3698

QCPopView : 一个可滑动列表式的Ios弹出选择框(git下载)

您的支持是对我最大的鼓励,请点stargit地址:https://github.com/canwhite/QCPopView请看源码实例,导入QCPopView 按照举例中使用即可...
  • dangbai01_
  • dangbai01_
  • 2017年10月09日 14:58
  • 911

指引列表弹框

@interface LCPopView : UIViewUITableViewDataSource, UITableViewDelegate> @property (nonatomic, s...
  • liuchang_flu
  • liuchang_flu
  • 2016年02月24日 17:50
  • 226

IOS开发中的弹框综述

题记—— 人生在世,淡定看世界。 感受生活,从不说疲惫,因为卡里的存款还不够。 体验生活,不说难受,因为肩上的责任不能丢。 感悟生活,不说退后,因为脚下的道路还得走。 1、弹框效果预览: 2、...
  • zl18603543572
  • zl18603543572
  • 2016年09月14日 00:42
  • 796
收藏助手
不良信息举报
您举报文章:vuejs2.0 银行列表 公用弹框slot table列表通用js方法处理
举报原因:
原因补充:

(最多只允许输入30个字)