vue 项目里的基本操作

67 篇文章 2 订阅
22 篇文章 0 订阅

一 样式class,style

  1. tab切换样式
   <div class="buy-ways cursor marginRight" :class="{ activeSty: activeWay === 1 }" @click="getWay(1)">
         <img src="../../assets/image/zhifubao-3.png" alt="" />
         <span>支付宝</span>
   </div>
   <div class="buy-ways cursor" :class="{ activeSty: activeWay === 2 }" @click="getWay(2)">
        <img src="../../assets/image/weixinzhifu-2.png" alt="" />
        <span>微信</span>
    </div>
  getWay(key) {
      this.activeWay = key
    },
    也可也直接  @click="activeWay = 1"
  1. vuex的使用
state:{
count: 0
}
mutions:{
getCount (state, count) {
state.count = count
}
}

调用

this.$store.commit('getCount', 1)

使用

this.$store.state.count

辅助性函数的使用

mapState  mapAction
import { mapState, mapMutations } from 'vuex'
computed: mapState(['count'])
相当于: 
computed: {
count () {
return this.$store.state.count
}
}

methods:{
 ...mapMutations({
      getCountFunc: 'getCount' 
    }),
    // 或者
    ...mapMutations(['getCount'])
    this.getCountFunc(1)
    }
    相当于
    this.$store.commit('getCount', 1)
  1. this.$router.resolve新窗口打开
 let routerJump = this.$router.resolve({ path: '/pay', query: { order: payment.TradeNo, number: payNumber, url: url } })
     window.open(routerJump.href, '_blank')
     由于最后是要用href,所以可以解构为
 const { href } = this.$router.resolve({ path: '/pay', query: { order: payment.TradeNo, number: payNumber, url: url } })
     window.open(href, '_blank')
     --- '_blank' 打开新窗口
     --- '_self'  关闭当前窗口打开新窗口   
  1. this.$set() 添加新属性
$set(traget, propertyName, value)

-----

          this.$set(this.nowData, index, { name: val.name, id: val.id })
          this.$set(this.orderData[index], 'tt', tt)
  1. 路由跳转
this.$router.push('/login')


this.$router.push({
        path: '/administration/admindetail',
        query: {
          rowData: rowDataNow,
          proId: proId,
          batchId: batchId,
        },
      })
获取
this.$route.query
  1. vue 计算总价: 单价 * 数量 = 总价

无论是单价,还是数量的变化,都会引起总价的变化,所以关键就是对单价和数量进行监听

  computed: {
    address() {
      const { phoneCount, singlePrice } = this
      return {
        phoneCount,
        singlePrice,
      }
    },
  },
  watch: {
    address(val) {
      console.log('val', val)
      this.allPrice = (val.phoneCount * val.singlePrice).toFixed(2)
    },
  },
  1. pc 端的支付流程,以及实现

支付流程:

  • 第一步:先下单,拿到订单号
  • 第二步:根据订单号和选择的支付方式进行支付
  • 第三步:支付的结果,微信和支付宝不一样。支付宝是通过returnUrl来回跳(你需要告诉后端回跳的地址),微信没有returnUrl的回跳,所以通过定时器来监听支付结果

实现

  • 调用下单接口,获取订单号,并且把订单号和支付方式传给支付接口
 // 支付,先下单
    orderFunc(phoneCount, id) {
      const way = this.activeWay === 1 ? 'Alipay' : 'Wechat'
      getOrder(
        {
          goods_list: [
            {
              count: phoneCount,
              goods_id: id,
            },
          ],
        },
        (res) => {
          console.log('下单', res.data)
          const order = res.data.data.TradeNo
          this.getPayOrderWay(way, order) // 传递订单号和支付方式
        },
        (err) => {
          console.log(err)
        }
      )
    },
  • 支付:
    支付宝有returnUrl所以直接跳转
    window.open(url, ‘_blank’)
    微信没有 returnUrl 所以跳转指定路劲
    this.$router.resolve…
    window.open(routerJump.href, ‘_blank’)
    getPayOrderWay(way, order) {
      getPayOrder(
        {
          payment_way: way,
          trade_no: order,
        },
        (res) => {
          const payment = res.data.data
          this.getTradeNoFunc(payment.TradeNo)
          console.log('222', this.$store.state.tradeNo)
          const payNumber = (res.data.data.TotalPrice / 100).toFixed(2)
          const url = res.data.data.Url
          this.handleClose()
          if (way === 'Wechat') {
            let routerJump = this.$router.resolve({ path: '/pay', query: { order: payment.TradeNo, number: payNumber, url: url } })
            window.open(routerJump.href, '_blank')
            this.getStateFunc(true)
          } else if (way === 'Alipay') {
            window.open(url, '_blank')
            this.getStateFunc(true)
          }
        },
        (err) => {
          console.log(err)
        }
      )
    },

微信定时监听

 startLoop() {
      this.timer = setInterval(() => {
        this.myPaySuccess()
      }, 3000)
  1. 时间戳,格式化
1. 下载安装

  npm install moment --save

2. main.js全局引入

  import Moment from 'moment'

  Vue.prototype.moment = Moment
3. 使用
filters: {
    dateFilter(res) {
      // return this.moment(+res * 1000).format('YYYY-MM-DD HH:mm') 两者都可
      return this.moment.unix(+res).format('YYYY-MM-DD HH:mm')
    },
  },
  1. 计算过期时间
 getTime(
        '',
        (res) => {
          console.log('系统时间', res.data.data.time_now)
          this.nowTime = res.data.data.time_now
          this.orderData.forEach((val, index) => {
            let newTime = (val.expire_time - this.nowTime) * 1000
            let days = Math.floor(newTime / (24 * 3600 * 1000)) // 计算出天数
            let leavel = newTime % (24 * 3600 * 1000) // 计算天数后剩余的时间
            let hours = Math.floor(leavel / (3600 * 1000)) // 计算剩余的小时数
            let leavel2 = leavel % (3600 * 1000) // 计算剩余小时后剩余的毫秒数
            let minutes = Math.floor(leavel2 / (60 * 1000)) // 计算剩余的分钟数
            let tt = `${days}天${hours}时${minutes}分`
            this.$set(this.orderData[index], 'tt', tt)
          })
        },
1.this.$route.query的使用

A、传参数:

this.$router.push({
         path: '/monitor',
         query:{
               id:id,
          }
}B、获取参数:
this.$route.query.id
C、在url中形式(url中带参数)
http://172.19.186.224:8080/#/monitor?id=1
D、页面之间用路由跳转传参时,刷新跳转后传参的页面,数据还会显示存在(项目中遇到此问题)
 
2.this.$route.params的使用
A、传参数:

this.$router.push({
         name: 'monitor',
         params:{
               id:id,
          }
}B、获取参数:
this.$route.params.id
C、在url中形式(url中不带参数)
http://172.19.186.224:8080/#/monitor
D、页面之间用路由跳转传参时,刷新跳转后传参的页面,数据不存在(项目中遇到此问题)
 
  1. formdate 数据的传递 和upload组件使用和进度条的使用
    上传 两步 : 上传 确认

 actionPath: api.defaults.baseURL + "/Common/Upload",
      headers: { token: window.localStorage.getItem("tokenPhone") },
      loadProgress: 0, // 动态显示进度条



<el-upload
            ref="upload"
            :action="actionPath"
            :headers="headers"
            multiple
            :limit="1"
            accept=".apk"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeUpload"
            :on-progress="uploadProcess"
          >

   handleAvatarSuccess(response, file, fileList) {
      console.log("mzid数据传递", this.mzyList);
      console.log("response.data", response.data);

      const { file_ext, file_name, temporary } = response.data;
      this.appUploadData.file_ext = file_ext;
      this.appUploadData.file_name = file_name;
      this.appUploadData.temporary = temporary;
      this.appUploadData.mzy_ids = this.mzyList;
    },

   uploadProcess(event, file, fileList) {
      this.isUploading = false; // 显示进度条
      this.loadProgress = parseInt(event.percent); // 动态获取文件上传进度
      if (this.loadProgress >= 100) {
        this.loadProgress = 100;
        setTimeout(() => {
          this.loadProgress = 0;
          this.isUploading = true;
        }, 1000); // 一秒后关闭进度条
      }
    },

  1. 三元表达式事件
@submitbtn="searchText ? searchFuncId(searchText) : ''"

13: scope的解构赋值

<template slot-scope="{row:{r_id,r_title,r_answer}}">
   <div @click="edit(r_id,r_title,r_answer)">
   </div>
</template>

  1. 路由权限校验
// 利用导航守卫控制访问权限和动态标题
router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title // 页面标题的展示
  }
  const tokenStr = window.localStorage.getItem('Mail')
  if ((to.path === '/login' || to.path === '/registered') && tokenStr) {
    // console.log('啥也不缺,直接调到主角面')
    return next('/create')
  }
  if (to.path === '/login' || to.path === '/registered') return next()
  if (!tokenStr) return next('/login') 
  // 如果输入主界面地址,但是无token,则返回登录页
  next() // 最后一定要next一些
})

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值