vue 项目里的基本操作

港控/mmm° 2021-09-07 06:13 338阅读 0赞

### 一 样式class，style ###

1.  tab切换样式

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的解构赋值

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一些
    })