Commit 988fcd248fc05b3472a1f63992e6e616f031fc70
1 parent
adf82b69
调取接口
Showing
5 changed files
with
245 additions
and
0 deletions
src/api/variables.js
0 → 100644
src/assets/img/index.vue
0 → 100644
| 1 | +<template> | |
| 2 | + <div class="app-orderMessageBox" ref="app_orderMessageBox"> | |
| 3 | + <div class="theme-card"> | |
| 4 | + <div class="title"><span>订单消息</span></div> | |
| 5 | + <div class="content"> | |
| 6 | + | |
| 7 | + <ul class="news-wrap"> | |
| 8 | + <li class="orderNum">订单编号</li> | |
| 9 | + <li class="orderPark">停车场</li> | |
| 10 | + <li class="orderMoney">收费金额</li> | |
| 11 | + </ul> | |
| 12 | + <div class="nwwest-roll news-wrap" id="nwwest-roll"> | |
| 13 | + <ul id="roll-ul" class="roll-ul" :style="{ top }"> | |
| 14 | + <li v-for="(item,index) in list" ref="rollul" :key="index"> | |
| 15 | + <div :title="item.orderId">{{item.orderId}}</div> | |
| 16 | + <div :title="item.plName">{{item.plName}}</div> | |
| 17 | + <div :title="item.orderActFee">{{item.orderActFee|formatMoney}}</div> | |
| 18 | + </li> | |
| 19 | + </ul> | |
| 20 | + </div> | |
| 21 | + </div> | |
| 22 | + </div> | |
| 23 | + </div> | |
| 24 | +</template> | |
| 25 | + | |
| 26 | +<script> | |
| 27 | + import { msgAddress } from '../../api/api' | |
| 28 | + export default { | |
| 29 | + name: "orderMessage", | |
| 30 | + data() { | |
| 31 | + return { | |
| 32 | + orderList:"",//公告列表 | |
| 33 | + //marqueeHeight: '100%', | |
| 34 | + name: '订单公告', | |
| 35 | + activeIndex: 0, | |
| 36 | + intnum: undefined, | |
| 37 | + list: [] | |
| 38 | + } | |
| 39 | + }, | |
| 40 | + computed: { | |
| 41 | + top() { | |
| 42 | + return - this.activeIndex * 26 + 'px'; | |
| 43 | + } | |
| 44 | + }, | |
| 45 | + created() { | |
| 46 | + this.onLoad() | |
| 47 | + }, | |
| 48 | + methods: { | |
| 49 | + onLoad() { | |
| 50 | + msgAddress({ | |
| 51 | + orgIds: this.GLOBAL.paramsvariables | |
| 52 | + }).then((response)=>{ | |
| 53 | + let data = response.data.data | |
| 54 | + this.list = data; | |
| 55 | + var that = this | |
| 56 | + this.intnum = setInterval(_ => { | |
| 57 | + if (this.activeIndex < this.list.length) { | |
| 58 | + this.activeIndex += 1; | |
| 59 | + that.list.push(that.list[0]); | |
| 60 | + } else { | |
| 61 | + this.activeIndex = 0; | |
| 62 | + } | |
| 63 | + }, 1000); | |
| 64 | + }).catch((response)=>{ | |
| 65 | + console.log(response); | |
| 66 | + }) | |
| 67 | + }, | |
| 68 | + scroll() { | |
| 69 | + this.animate = !this.animate; | |
| 70 | + var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向 | |
| 71 | + setTimeout(function () { | |
| 72 | + that.list.push(that.list[0]); | |
| 73 | + that.list.shift(); | |
| 74 | + that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了 | |
| 75 | + }, 0) | |
| 76 | + } | |
| 77 | + }, | |
| 78 | + filters:{ | |
| 79 | + formatMoney: function (value) { | |
| 80 | + return (value/100).toFixed(2)+' 元' | |
| 81 | + } | |
| 82 | + } | |
| 83 | + } | |
| 84 | +</script> | |
| 85 | + | |
| 86 | +<style scoped lang="scss"> | |
| 87 | + .app-orderMessageBox { | |
| 88 | + width: 100%; | |
| 89 | + .content{ | |
| 90 | + padding: 0; | |
| 91 | + } | |
| 92 | + .theme-card{ | |
| 93 | + height: 100%; | |
| 94 | + } | |
| 95 | + .news-wrap{ | |
| 96 | + height: 40px; | |
| 97 | + line-height: 40px; | |
| 98 | + font-size: 14px; | |
| 99 | + .roll-ul{ | |
| 100 | + height: 100%; | |
| 101 | + position: relative; | |
| 102 | + transition: top 0.5s; | |
| 103 | + } | |
| 104 | + li{ | |
| 105 | + height: 40px; | |
| 106 | + float: left; | |
| 107 | + padding-left: 0; | |
| 108 | + padding-left: 30px; | |
| 109 | + background-size: 14px 14px; | |
| 110 | + background-position: 10px center; | |
| 111 | + background-repeat: no-repeat; | |
| 112 | + list-style: none; | |
| 113 | + overflow: hidden; | |
| 114 | + } | |
| 115 | + .orderNum{ | |
| 116 | + width: 80px; | |
| 117 | + background-image: url(../../images/com/orderNum.svg) ; | |
| 118 | + } | |
| 119 | + .orderMoney{ | |
| 120 | + width: 80px; | |
| 121 | + background-image: url(../../images/com/orderMoney.svg) ; | |
| 122 | + } | |
| 123 | + .orderPark{ | |
| 124 | + width: calc(100% - 250px); | |
| 125 | + background-image: url(../../images/com/orderPark.svg) ; | |
| 126 | + } | |
| 127 | + | |
| 128 | + } | |
| 129 | + | |
| 130 | + .nwwest-roll { | |
| 131 | + width: 100%; | |
| 132 | + height: calc(100% - 60px); | |
| 133 | + overflow: hidden; | |
| 134 | + transition: all 0.5s; | |
| 135 | + li{ | |
| 136 | + width: 100%; | |
| 137 | + height: 26px; | |
| 138 | + line-height: 26px; | |
| 139 | + font-size: 12px; | |
| 140 | + padding-left: 10px; | |
| 141 | + color: #fff; | |
| 142 | + background:rgba(255,255,255,.1); | |
| 143 | + margin-bottom: 10px; | |
| 144 | + div{ | |
| 145 | + float: left; | |
| 146 | + overflow: hidden; | |
| 147 | + white-space: nowrap; | |
| 148 | + text-overflow: ellipsis; | |
| 149 | + &:nth-of-type(1){ | |
| 150 | + width: 110px; | |
| 151 | + } | |
| 152 | + &:nth-of-type(2){ | |
| 153 | + width: calc(100% - 220px); | |
| 154 | + } | |
| 155 | + &:nth-of-type(3){ | |
| 156 | + width: 80px; | |
| 157 | + } | |
| 158 | + | |
| 159 | + } | |
| 160 | + } | |
| 161 | + } | |
| 162 | + } | |
| 163 | + .anim { | |
| 164 | + transition: all 0.5s; | |
| 165 | + | |
| 166 | + } | |
| 167 | +</style> | ... | ... |
src/assets/img/orderMoney.svg
0 → 100644
| 1 | +<?xml version="1.0" encoding="utf-8"?> | |
| 2 | +<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> | |
| 3 | +<svg version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | |
| 4 | + viewBox="0 2 14 14" style="enable-background:new 0 2 14 14;" xml:space="preserve"> | |
| 5 | +<style type="text/css"> | |
| 6 | + .st0{fill:url(#XMLID_3_);} | |
| 7 | + .st1{fill:#94C4F1;} | |
| 8 | + .st2{fill:#FFFFFF;} | |
| 9 | +</style> | |
| 10 | +<g id="XMLID_1_"> | |
| 11 | + | |
| 12 | + <linearGradient id="XMLID_3_" gradientUnits="userSpaceOnUse" x1="7.1131" y1="11.1822" x2="6.8702" y2="-2.3156" gradientTransform="matrix(1 0 0 1 0 4)"> | |
| 13 | + <stop offset="0" style="stop-color:#00D5FE"/> | |
| 14 | + <stop offset="1" style="stop-color:#00B9FE"/> | |
| 15 | + </linearGradient> | |
| 16 | + <path id="XMLID_34_" class="st0" d="M7,15.7c-3.7,0-6.8-3-6.8-6.8c0-3.7,3-6.8,6.8-6.8c3.7,0,6.8,3,6.8,6.8S10.7,15.7,7,15.7z"/> | |
| 17 | + <path id="XMLID_27_" class="st1" d="M7,2.5c3.6,0,6.5,2.9,6.5,6.5s-2.9,6.5-6.5,6.5S0.5,12.6,0.5,9S3.4,2.5,7,2.5 M7,2 | |
| 18 | + C3.1,2,0,5.1,0,9s3.1,7,7,7s7-3.1,7-7S10.9,2,7,2L7,2z"/> | |
| 19 | +</g> | |
| 20 | +<path class="st2" d="M10.1,9.2l-2.3,0c0,0,0,0,0,0.1v0.8h1.4c0.2,0,0.4,0.2,0.4,0.4l0,0c0,0.2-0.2,0.5-0.4,0.5H7.7v1.4 | |
| 21 | + c0,0.2-0.2,0.4-0.4,0.4H7.1c-0.2,0-0.4-0.2-0.4-0.4V11H5c-0.2,0-0.4-0.3-0.4-0.5l0,0c0-0.2,0.2-0.4,0.4-0.4h1.7V9.3 | |
| 22 | + c0-0.1,0-0.1,0-0.1l0,0H3.9c-0.2,0-0.4-0.3-0.4-0.5V8.7c0-0.2,0.2-0.5,0.4-0.5h1.7L3.9,6.7C3.7,6.5,3.7,6.2,3.9,6 | |
| 23 | + c0.2-0.2,0.5-0.2,0.7,0L7,8.1L9.4,6c0.2-0.2,0.5-0.2,0.7,0s0.2,0.5,0,0.7L8.4,8.2h1.7c0.2,0,0.4,0.3,0.4,0.5v0 | |
| 24 | + C10.5,8.9,10.4,9.2,10.1,9.2z"/> | |
| 25 | +</svg> | ... | ... |
src/assets/img/orderNum.svg
0 → 100644
| 1 | +<?xml version="1.0" encoding="utf-8"?> | |
| 2 | +<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> | |
| 3 | +<svg version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | |
| 4 | + viewBox="0 2 14 14" style="enable-background:new 0 2 14 14;" xml:space="preserve"> | |
| 5 | +<style type="text/css"> | |
| 6 | + .st0{fill:url(#XMLID_3_);} | |
| 7 | + .st1{fill:#94C4F1;} | |
| 8 | + .st2{fill:#FFFFFF;} | |
| 9 | +</style> | |
| 10 | +<g id="XMLID_1_"> | |
| 11 | + | |
| 12 | + <linearGradient id="XMLID_3_" gradientUnits="userSpaceOnUse" x1="7.1131" y1="4.9272" x2="6.8702" y2="18.425" gradientTransform="matrix(1 0 0 -1 0 20)"> | |
| 13 | + <stop offset="0" style="stop-color:#00D5FE"/> | |
| 14 | + <stop offset="1" style="stop-color:#00B9FE"/> | |
| 15 | + </linearGradient> | |
| 16 | + <path id="XMLID_34_" class="st0" d="M7,15.6c-3.7,0-6.8-3-6.8-6.8C0.2,5.1,3.2,2,7,2c3.7,0,6.8,3,6.8,6.8S10.7,15.6,7,15.6z"/> | |
| 17 | + <path id="XMLID_27_" class="st1" d="M7,2.5c3.6,0,6.5,2.9,6.5,6.5s-2.9,6.5-6.5,6.5S0.5,12.6,0.5,9S3.4,2.5,7,2.5 M7,2 | |
| 18 | + C3.1,2,0,5.1,0,9s3.1,7,7,7s7-3.1,7-7S10.9,2,7,2L7,2z"/> | |
| 19 | +</g> | |
| 20 | +<g id="XMLID_4_"> | |
| 21 | + <g id="XMLID_49_"> | |
| 22 | + <path id="XMLID_50_" class="st2" d="M9.3,6.4H4.7C4.3,6.4,4.1,6.7,4.1,7v0.2c0,0.3,0.2,0.5,0.5,0.5h4.6c0.2,0,0.5-0.2,0.5-0.5V7 | |
| 23 | + C9.8,6.5,9.3,6.4,9.3,6.4z M4.7,9.6h2.7C7.7,9.6,8,9.4,8,9.1V8.9c0-0.3-0.2-0.5-0.5-0.5H4.7c-0.3,0-0.5,0.2-0.5,0.5V9 | |
| 24 | + C4.2,9.4,4.4,9.6,4.7,9.6z M8.7,10.3h-4c-0.3,0-0.5,0.2-0.5,0.5V11c0,0.3,0.2,0.5,0.5,0.5h4c0.3,0,0.5-0.2,0.5-0.5v-0.2 | |
| 25 | + C9.2,10.5,9,10.3,8.7,10.3z"/> | |
| 26 | + </g> | |
| 27 | +</g> | |
| 28 | +</svg> | ... | ... |
src/assets/img/orderPark.svg
0 → 100644
| 1 | +<?xml version="1.0" encoding="utf-8"?> | |
| 2 | +<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> | |
| 3 | +<svg version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | |
| 4 | + viewBox="0 2 14 14" style="enable-background:new 0 2 14 14;" xml:space="preserve"> | |
| 5 | +<style type="text/css"> | |
| 6 | + .st0{fill:url(#XMLID_3_);} | |
| 7 | + .st1{fill:#94C4F1;} | |
| 8 | + .st2{fill:#FFFFFF;} | |
| 9 | +</style> | |
| 10 | +<g id="XMLID_1_"> | |
| 11 | + | |
| 12 | + <linearGradient id="XMLID_3_" gradientUnits="userSpaceOnUse" x1="7.1131" y1="11.1822" x2="6.8702" y2="-2.3156" gradientTransform="matrix(1 0 0 1 0 4)"> | |
| 13 | + <stop offset="0" style="stop-color:#00D5FE"/> | |
| 14 | + <stop offset="1" style="stop-color:#00B9FE"/> | |
| 15 | + </linearGradient> | |
| 16 | + <path id="XMLID_34_" class="st0" d="M7,15.7c-3.7,0-6.8-3-6.8-6.8c0-3.7,3-6.8,6.8-6.8c3.7,0,6.8,3,6.8,6.8S10.7,15.7,7,15.7z"/> | |
| 17 | + <path id="XMLID_27_" class="st1" d="M7,2.5c3.6,0,6.5,2.9,6.5,6.5s-2.9,6.5-6.5,6.5S0.5,12.6,0.5,9S3.4,2.5,7,2.5 M7,2 | |
| 18 | + C3.1,2,0,5.1,0,9s3.1,7,7,7s7-3.1,7-7S10.9,2,7,2L7,2z"/> | |
| 19 | +</g> | |
| 20 | +<path class="st2" d="M5,5.8c0.3,0,0.5,0.2,0.5,0.5v5c0,0.3-0.2,0.5-0.5,0.5s-0.5-0.2-0.5-0.5v-5C4.5,6,4.7,5.8,5,5.8z"/> | |
| 21 | +<path class="st2" d="M7.5,6.8c0.6,0,1,0.4,1,1s-0.4,1-1,1h-2v-2H7.5 M7.5,5.8h-3v4h3c1.1,0,2-0.9,2-2S8.6,5.8,7.5,5.8L7.5,5.8z"/> | |
| 22 | +</svg> | ... | ... |