qiubinghui
/
zhywpt-sp
Следить 1
В избранное 0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Просмотр исходного кода

m

yxb
zengyuehua 2 лет назад
Родитель
5ac89e9d8e
Сommit
c9af91fd28
9 измененных файлов: 480 добавлений и 66 удалений
Разделённый вид Показать статистику Diff
  1. 74
    0
      login/agreement.vue
  2. 7
    1
      login/login.vue
  3. 7
    1
      pages.json
  4. 80
    38
      pages/index/index.vue
  5. 10
    10
      personal-center/setting/car-information/car-change.vue
  6. 22
    12
      personal-center/setting/car-information/car-create.vue
  7. 1
    1
      personal-center/setting/car-information/corrections.vue
  8. 6
    3
      personal-center/setting/information-deletion.vue
  9. 273
    0
      uni_modules/vk-uview-ui/components/u-notice-bar/u-notice-bar.vue

+ 74
- 0
login/agreement.vue Просмотреть файл

@@ -0,0 +1,74 @@
<template>
<view class="content">
{{content}}
</view>
</template>

<script setup lang="ts">
import {
reactive,
ref
} from "vue";
import {
navTo
} from "@/utils/utils"
import {
onLoad,
onShow
} from "@dcloudio/uni-app";
import {
stringToJson
} from "@/utils/network/encryption.js";
import {
request
} from "@/utils/network/request.js";
import {
infoQuery
} from "@/utils/network/api.js"
const content=ref('')

// 获取文本信息----用户协议
const getInfo = (type) => {
//参数说明
let options = {
type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
data: {
businessType: 'PRIVACY_AGREEMENT'
}, //请求参数
method: "POST", //提交方式(默认POST)
showLoading: true, //是否显示加载中(默认显示)
};

//调用方式
request(infoQuery, options)
.then((res) => {
let data=stringToJson(res.bizContent)
console.log(data);
content.value=data.text
})
.catch((err) => {
console.log(err);
});
}





onLoad(() => {
getInfo()
})
</script>



<style lang="scss" scoped>
.content {
padding: 98rpx 50rpx 0rpx 50rpx;
font-size: 28rpx;
font-weight: 400;
color: #333333;
line-height: 40px;
}
</style>

+ 7
- 1
login/login.vue Просмотреть файл

@@ -66,7 +66,7 @@
</checkbox>
</checkbox-group>
<!-- <view class="txt-grey">我已阅读并同意</view> -->
<view class="txt-green" @click="msg('阅读协议')"
<view class="txt-green" @click="toRead"
>《平台用户服务隐私协议》</view
>
</view>
@@ -148,6 +148,12 @@ const checkboxChange = (e) => {
state.checked = !state.checked;
};

// 去协议页面
const toRead=()=>{
navTo("/login/agreement")
}


/* 登录 */
const doLogin = () => {
if (!state.username) {

+ 7
- 1
pages.json Просмотреть файл

@@ -1171,7 +1171,13 @@
"style": {
"navigationBarTitleText": "忘记密码第三步"
}
}
},
{
"path": "agreement",
"style": {
"navigationBarTitleText": "平台用户服务隐私协议"
}
}
]
},
{

+ 80
- 38
pages/index/index.vue Просмотреть файл

@@ -12,8 +12,10 @@
<view class="notice">
<image class="icon" :src="fileURL + 'image/index/icon-notice.png'" lazy-load="false">
</image>
<text class="notice-text">贵州高速最新施工，请注意昆明西...</text>
<text class="notice-text">{{state.notice}}</text>
<!-- <u-notice-bar mode="horizontal" :is-circular="false" :list="list"></u-notice-bar> -->
</view>

</view>

<!-- 按钮导航 -->
@@ -30,7 +32,7 @@
</view>
<view class="text">账单查询</view>
</view>
<view class="item-box" @click="$util.msg('该功能正在开发中，敬请期待！')">
<view class="item-box" @click="$util.msg('该功能正在开发中，敬请期待！')">
<view class="item item-3">
<image :src="fileURL + 'image/index/item-3.png'" />
</view>
@@ -43,7 +45,7 @@
<view class="text">设备激活</view>
</view>

<view class="item-box" @click="$util.msg('该功能正在开发中，敬请期待！')">
<view class="item-box" @click="$util.msg('该功能正在开发中，敬请期待！')">
<view class="item item-5">
<image :src="fileURL + 'image/index/item-5.png'" />
</view>
@@ -56,7 +58,8 @@
</view>
<view class="text">解除车牌占用</view>
</view>
<view class="item-box" @click="$util.navTo(`/personal-center/setting/personal-information/corrections`,true)">
<view class="item-box"
@click="$util.navTo(`/personal-center/setting/personal-information/corrections`,true)">
<view class="item item-7">
<image :src="fileURL + 'image/index/item-7.png'" />
</view>
@@ -125,7 +128,7 @@
<view class="news">
<view class="title">高速快讯</view>
<view class="news-box">
<view class="news-item" @click="$util.msg('该功能正在开发中，敬请期待！')">
<view class="news-item" @click="$util.msg('该功能正在开发中，敬请期待！')">
<view class="left-text">
<view class="tit">贵州高速最新施工通告，请注意贵州高速最新通告，请注意...</view>
<view class="span">施工通告</view>
@@ -134,7 +137,7 @@
<image :src="fileURL + 'image/index/news-1.png'"></image>
</view>
</view>
<view class="news-item" @click="$util.msg('该功能正在开发中，敬请期待！')">
<view class="news-item" @click="$util.msg('该功能正在开发中，敬请期待！')">
<view class="left-text">
<view class="tit">贵州新建服务区，请注意贵州高速最新通告，请留意...</view>
<view class="span">新建</view>
@@ -151,14 +154,14 @@
<view class="service">
<view class="title">专区服务</view>
<view class="service-box">
<view class="service-item border" @click="$util.msg('该功能正在开发中，敬请期待！')">
<view class="service-item border" @click="$util.msg('该功能正在开发中，敬请期待！')">
<image :src="fileURL + 'image/index/truck-point.png'"></image>
<view class="text">
<view class="tit">货车积分返利</view>
<view class="sub">海量商品任你选择</view>
</view>
</view>
<view class="service-item" @click="$util.msg('该功能正在开发中，敬请期待！')">
<view class="service-item" @click="$util.msg('该功能正在开发中，敬请期待！')">
<image :src="fileURL + 'image/index/parking-bill.png'"></image>
<view class="text">
<view class="tit">停车场账单查询</view>
@@ -196,7 +199,10 @@
onMounted,
ref
} from "vue";
import { onPageScroll } from "@dcloudio/uni-app";
import {
onPageScroll,
onLoad
} from "@dcloudio/uni-app";
import flowPathList from "./components/flow-path-list.vue";
import {
request
@@ -217,14 +223,21 @@
import {
fileURL
} from "@/datas/fileURL.js";
import { navTo,confirm } from "../../utils/utils";
import {
infoQuery
} from "@/utils/network/api.js"
import {
navTo,
confirm
} from "../../utils/utils";

const bgOrange = `url(${fileURL}image/index/bg-orange.png) center center no-repeat`;
const bgBlue = `url(${fileURL}image/index/bg-blue.png) center center no-repeat`;

const list=reactive(["您有一条待办事项，还未办理完成"])
const state = reactive({
type: 0,
userType: 0,
notice: "",
noticeList: [
//公告栏列表
{
@@ -275,17 +288,17 @@ import { navTo,confirm } from "../../utils/utils";
],
});
const isShowMask = ref(false);
const isShowBar =ref(false)
const isShowBar = ref(false)
const userStore = useUserStore();
const type = 0;
const title = ref("我是测试");
const statusBarHeight = ref(0)
//监听页面滚动
onPageScroll((e)=>{
if(e.scrollTop > statusBarHeight.value){
onPageScroll((e) => {
if (e.scrollTop > statusBarHeight.value) {
isShowBar.value = true;
}else{
} else {
isShowBar.value = false;
}
});
@@ -313,7 +326,7 @@ import { navTo,confirm } from "../../utils/utils";
const toCreatOrder = (val: any) => {
state.userType = val;
if (val === "1") {
navTo(`/applyCard/essential-information?type=${state.type}&&userType=${state.userType}`,true)
navTo(`/applyCard/essential-information?type=${state.type}&&userType=${state.userType}`, true)
// uni.navigateTo({
// url: `/applyCard/essential-information?type=${state.type}&&userType=${state.userType}`,
// });
@@ -321,7 +334,7 @@ import { navTo,confirm } from "../../utils/utils";
// uni.navigateTo({
// url: `/applyCard/essential-information?type=${state.type}&&userType=${state.userType}`,
// });
navTo(`/applyCard/essential-information?type=${state.type}&&userType=${state.userType}`,true)
navTo(`/applyCard/essential-information?type=${state.type}&&userType=${state.userType}`, true)
}
closeMask();
};
@@ -329,16 +342,16 @@ import { navTo,confirm } from "../../utils/utils";
const showMask = (val: any) => {
console.log(88888888888888);
console.log(getItem("token"));
if(getItem("token")!=''|| getItem("openId")!=''){
if (getItem("token") != '' || getItem("openId") != '') {
state.type = val;
isShowMask.value = true;
}else{
confirm('您需要登录过后才能使用此功能',()=>{
} else {
confirm('您需要登录过后才能使用此功能', () => {
uni.navigateTo({
url:'/login/login',
url: '/login/login',
});
},'温馨提示',true,'去登录');
}
}, '温馨提示', true, '去登录');
}
};

const closeMask = () => {
@@ -347,10 +360,10 @@ import { navTo,confirm } from "../../utils/utils";

onMounted(() => {
uni.getSystemInfo({
success: (e: any) => {
console.log(e.statusBarHeight);
statusBarHeight.value = e.statusBarHeight;
}
success: (e: any) => {
console.log(e.statusBarHeight);
statusBarHeight.value = e.statusBarHeight;
}
})
// console.log(credentialType);

@@ -377,10 +390,38 @@ import { navTo,confirm } from "../../utils/utils";
// console.log(err);
// });
});

// 获取文本信息----用户协议
const getInfo = (type) => {
//参数说明
let options = {
type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
data: {
businessType: 'BROADCAST' //广播栏信息
}, //请求参数
method: "POST", //提交方式(默认POST)
showLoading: true, //是否显示加载中(默认显示)
};

//调用方式
request(infoQuery, options)
.then((res) => {
let data = stringToJson(res.bizContent)
console.log(data);
state.notice = data.text
})
.catch((err) => {
console.log(err);
});
}

onLoad(() => {
getInfo()
})
</script>

<style>
page{
page {
background: #eef7f7;
}
</style>
@@ -388,14 +429,15 @@ import { navTo,confirm } from "../../utils/utils";
// .wrapper {
// background: #eef7f7;
// }
.statusBar{
width: 100%;
position: sticky;
background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
top: 0;
left: 0;
z-index: 999;
}
.statusBar {
width: 100%;
position: sticky;
background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
top: 0;
left: 0;
z-index: 999;
}

.banner {
position: relative;
}
@@ -565,7 +607,7 @@ import { navTo,confirm } from "../../utils/utils";
}

.news {
padding:30rpx 30rpx 0 30rpx;
padding: 30rpx 30rpx 0 30rpx;
}

.news .title {

+ 10
- 10
personal-center/setting/car-information/car-change.vue Просмотреть файл

@@ -14,9 +14,9 @@
</view>
</view>

<image v-if="!state.form.drivingPermitPos" class="icon" :src="`${$imgUrl}applyCard/car-zhu.png`">
<image v-if="!state.form.vehPosImgUrl" class="icon" :src="`${$imgUrl}applyCard/car-zhu.png`">
</image>
<image v-else class="icon" :src="state.form.drivingPermitPos"></image>
<image v-else class="icon" :src="state.form.vehPosImgUrl"></image>
</view>
</view>
<view class="picture-wrapper" @click="cardImageOcr('2')">
@@ -28,9 +28,9 @@
<view class="tip-value"> 拍摄规范 </view>
</view>
</view>
<image v-if="!state.form.drivingPermitNeg" class="icon" :src="`${$imgUrl}applyCard/car-fu.png`">
<image v-if="!state.form.vehNegImgUrl" class="icon" :src="`${$imgUrl}applyCard/car-fu.png`">
</image>
<image v-else class="icon" :src="state.form.drivingPermitNeg"></image>
<image v-else class="icon" :src="state.form.vehNegImgUrl"></image>
</view>
</view>
<view class="picture-wrapper" @click="cardFileImageUpdate()">
@@ -265,8 +265,8 @@ let cacachCarid=''
customerId: "", //用户编号 .
vehicleId: "", //车牌编号 .
issueDate: "", //发证日期 .
drivingPermitPos: "", //行驶证正面 .
drivingPermitNeg: "", //行驶证证反面 .
vehPosImgUrl: "", //行驶证正面 .
vehNegImgUrl: "", //行驶证证反面 .
type: "0", //0，客车 1.货车 .
useUserType: 0, //车辆用户类型 .
// useUserTypeName: "普通车",
@@ -314,8 +314,8 @@ let cacachCarid=''
console.log(JSON.parse(option.data),"RRRRRRRRRRRRRRRRRRR");
let data=JSON.parse(option.data)
cacachCarid=data.vehicleId
state.form.drivingPermitPos=data.drivingPermitPos
state.form.drivingPermitNeg=data.drivingPermitNeg
state.form.vehPosImgUrl=data.vehPosImgUrl
state.form.vehNegImgUrl=data.vehNegImgUrl
state.form.vehBodyUrl=data.vehBodyUrl
state.form.vehicleId=data.vehiclePlate
state.form.vehicleType=data.vehicleType
@@ -374,14 +374,14 @@ let cacachCarid=''
state.form.engineNum = data.engine;
state.form.registerDate = data.register;
state.form.issueDate = data.issue;
state.form.drivingPermitPos = data.imageUrl;
state.form.vehPosImgUrl = data.imageUrl;
state.form.vehicleModel = data.model;
} else {
state.form.approvedCount = parseFloat(data.apc);
state.form.maintenaceMass = parseFloat(data.unladen);
state.form.vehicleDimensions = data.overall;
state.form.totalMass = parseFloat(data.gross);
state.form.drivingPermitNeg = data.imageUrl;
state.form.vehNegImgUrl = data.imageUrl;
}
});
})

+ 22
- 12
personal-center/setting/car-information/car-create.vue Просмотреть файл

@@ -14,9 +14,9 @@
</view>
</view>

<image v-if="!state.form.drivingPermitPos" class="icon" :src="`${$imgUrl}applyCard/car-zhu.png`">
<image v-if="!state.form.vehPosImgUrl" class="icon" :src="`${$imgUrl}applyCard/car-zhu.png`">
</image>
<image v-else class="icon" :src="state.form.drivingPermitPos"></image>
<image v-else class="icon" :src="state.form.vehPosImgUrl"></image>
</view>
</view>
<view class="picture-wrapper" @click="cardImageOcr('2')">
@@ -28,9 +28,9 @@
<view class="tip-value"> 拍摄规范 </view>
</view>
</view>
<image v-if="!state.form.drivingPermitNeg" class="icon" :src="`${$imgUrl}applyCard/car-fu.png`">
<image v-if="!state.form.vehNegImgUrl" class="icon" :src="`${$imgUrl}applyCard/car-fu.png`">
</image>
<image v-else class="icon" :src="state.form.drivingPermitNeg"></image>
<image v-else class="icon" :src="state.form.vehNegImgUrl"></image>
</view>
</view>
<view class="picture-wrapper" @click="cardFileImageUpdate()">
@@ -140,6 +140,7 @@
} from "@dcloudio/uni-app";

const savaHandle = () => {
if(state.showCaridCorlor){
state.form.vehicleId=state.form.vehicleId+'_'+state.carIdcorlorCode
var data = state.form;
console.log(data, "##########");
@@ -157,8 +158,18 @@
url: "/personal-center/setting/car-information/car-manage"
})
}

});
}).catch(err=>{
console.log(err,"在这里");
console.log(state.form.vehicleId.split('_'));
state.form.vehicleId=state.form.vehicleId.split('_')[0]
})
}else{
uni.showToast({
title:"请选择车牌颜色",
icon:"none"
})
}
};

const selectConfirm = (item: any) => {
@@ -167,7 +178,6 @@
// state.form.useUserTypeName = val.label;
// });
console.log(item);

if (state.form.vehicleId) {
state.showCaridCorlor=item[0].label
state.carIdcorlorCode= item[0].value
@@ -261,9 +271,9 @@
customerId: "", //用户编号 .
vehicleId: "", //车牌编号 .
issueDate: "", //发证日期 .
drivingPermitPos: "", //行驶证正面 .
drivingPermitNeg: "", //行驶证证反面 .
type: "0", //0，客车 1.货车 .
vehPosImgUrl: "", //行驶证正面 .
vehNegImgUrl: "", //行驶证证反面 .
type: 0, //0，客车 1.货车 .
useUserType: 0, //车辆用户类型 .
// useUserTypeName: "普通车",
vehicleSign: 2, //前/后装标识 .
@@ -343,14 +353,14 @@
state.form.engineNum = data.engine;
state.form.registerDate = data.register;
state.form.issueDate = data.issue;
state.form.drivingPermitPos = data.imageUrl;
state.form.vehPosImgUrl = data.imageUrl;
state.form.vehicleModel = data.model;
} else {
state.form.approvedCount = parseFloat(data.apc);
state.form.maintenaceMass = parseFloat(data.unladen);
state.form.vehicleDimensions = data.overall;
state.form.totalMass = parseFloat(data.gross);
state.form.drivingPermitNeg = data.imageUrl;
state.form.vehNegImgUrl = data.imageUrl;
}
});
})

+ 1
- 1
personal-center/setting/car-information/corrections.vue Просмотреть файл

@@ -19,7 +19,7 @@
title:'车辆信息管理',
columns:[
{title:'车辆信息变更',path:'car-information/car-manage',login:true},
{title:'补传车辆证件',path:'car-information/car-card',login:true},
// {title:'补传车辆证件',path:'car-information/car-card',login:true},
]
},
]

+ 6
- 3
personal-center/setting/information-deletion.vue Просмотреть файл

@@ -1,6 +1,7 @@
<template>
<view class="content">
如果您是我们的ETC用户，需要删除个人的用户信息、车辆信息、银行卡信息和邮寄信息等，请通过联系在线客服 4008 0087 87 进行处理
<!-- 如果您是我们的ETC用户，需要删除个人的用户信息、车辆信息、银行卡信息和邮寄信息等，请通过联系在线客服 4008 0087 87 进行处理 -->
{{content}}
</view>
</template>

@@ -25,7 +26,8 @@
import {
infoQuery
} from "@/utils/network/api.js"

const content=ref('')

// 获取文本信息----用户协议
const getInfo = (type) => {
@@ -33,7 +35,7 @@
let options = {
type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
data: {
businessType: 'USER_AGREEMENT'
businessType: 'USER_DELETE'
}, //请求参数
method: "POST", //提交方式(默认POST)
showLoading: true, //是否显示加载中(默认显示)
@@ -44,6 +46,7 @@
.then((res) => {
let data=stringToJson(res.bizContent)
console.log(data);
content.value=data.text
})
.catch((err) => {
console.log(err);

+ 273
- 0
uni_modules/vk-uview-ui/components/u-notice-bar/u-notice-bar.vue Просмотреть файл

@@ -0,0 +1,273 @@
<template>
<view class="u-notice-bar-wrap" v-if="isShow" :style="{
borderRadius: borderRadius + 'rpx',
}">
<block v-if="mode == 'horizontal' && isCircular">
<u-row-notice
:type="type"
:color="color"
:bgColor="bgColor"
:list="list"
:volumeIcon="volumeIcon"
:moreIcon="moreIcon"
:volumeSize="volumeSize"
:closeIcon="closeIcon"
:mode="mode"
:fontSize="fontSize"
:speed="speed"
:playState="playState"
:padding="padding"
@getMore="getMore"
@close="close"
@click="click"
></u-row-notice>
</block>
<block v-if="mode == 'vertical' || (mode == 'horizontal' && !isCircular)">
<u-column-notice
:type="type"
:color="color"
:bgColor="bgColor"
:list="list"
:volumeIcon="volumeIcon"
:moreIcon="moreIcon"
:closeIcon="closeIcon"
:mode="mode"
:volumeSize="volumeSize"
:disable-touch="disableTouch"
:fontSize="fontSize"
:duration="duration"
:playState="playState"
:padding="padding"
@getMore="getMore"
@close="close"
@click="click"
@end="end"
></u-column-notice>
</block>
</view>
</template>
<script>
/**
* noticeBar 滚动通知
* @description 该组件用于滚动通告场景，有多种模式可供选择
* @tutorial https://www.uviewui.com/components/noticeBar.html
* @property {Array} list 滚动内容，数组形式，见上方说明
* @property {String} type 显示的主题（默认warning）
* @property {Boolean} volume-icon 是否显示小喇叭图标（默认true）
* @property {Boolean} more-icon 是否显示右边的向右箭头（默认false）
* @property {Boolean} close-icon 是否显示关闭图标（默认false）
* @property {Boolean} autoplay 是否自动播放（默认true）
* @property {String} color 文字颜色
* @property {String Number} bg-color 背景颜色
* @property {String} mode 滚动模式（默认horizontal）
* @property {Boolean} show 是否显示（默认true）
* @property {String Number} font-size 字体大小，单位rpx（默认28）
* @property {String Number} volume-size 左边喇叭的大小（默认34）
* @property {String Number} duration 滚动周期时长，只对步进模式有效，横向衔接模式无效，单位ms（默认2000）
* @property {String Number} speed 水平滚动时的滚动速度，即每秒移动多少距离，只对水平衔接方式有效，单位rpx（默认160）
* @property {String Number} font-size 字体大小，单位rpx（默认28）
* @property {Boolean} is-circular mode为horizontal时，指明是否水平衔接滚动（默认true）
* @property {String} play-state 播放状态，play - 播放，paused - 暂停（默认play）
* @property {String Number} border-radius 通知栏圆角（默认为0）
* @property {String Number} padding 内边距，字符串，与普通的内边距css写法一直（默认"18rpx 24rpx"）
* @property {Boolean} no-list-hidden 列表为空时，是否显示组件（默认false）
* @property {Boolean} disable-touch 是否禁止通过手动滑动切换通知，只有mode = vertical，或者mode = horizontal且is-circular = false时有效（默认true）
* @event {Function} click 点击通告文字触发，只有mode = vertical，或者mode = horizontal且is-circular = false时有效
* @event {Function} close 点击右侧关闭图标触发
* @event {Function} getMore 点击右侧向右图标触发
* @event {Function} end 列表的消息每次被播放一个周期时触发，只有mode = vertical，或者mode = horizontal且is-circular = false时有效
* @example <u-notice-bar :more-icon="true" :list="list"></u-notice-bar>
*/
export default {
name: "u-notice-bar",
emits: ["click", "close", "getMore", "end"],
props: {
// 显示的内容，数组
list: {
type: Array,
default() {
return [];
}
},
// 显示的主题，success|error|primary|info|warning
type: {
type: String,
default: 'warning'
},
// 是否显示左侧的音量图标
volumeIcon: {
type: Boolean,
default: true
},
// 音量喇叭的大小
volumeSize: {
type: [Number, String],
default: 34
},
// 是否显示右侧的右箭头图标
moreIcon: {
type: Boolean,
default: false
},
// 是否显示右侧的关闭图标
closeIcon: {
type: Boolean,
default: false
},
// 是否自动播放
autoplay: {
type: Boolean,
default: true
},
// 文字颜色，各图标也会使用文字颜色
color: {
type: String,
default: ''
},
// 背景颜色
bgColor: {
type: String,
default: ''
},
// 滚动方向，horizontal-水平滚动，vertical-垂直滚动
mode: {
type: String,
default: 'horizontal'
},
// 是否显示
show: {
type: Boolean,
default: true
},
// 字体大小，单位rpx
fontSize: {
type: [Number, String],
default: 28
},
// 滚动一个周期的时间长，单位ms
duration: {
type: [Number, String],
default: 2000
},
// 水平滚动时的滚动速度，即每秒滚动多少rpx，这有利于控制文字无论多少时，都能有一个恒定的速度
speed: {
type: [Number, String],
default: 160
},
// 水平滚动时，是否采用衔接形式滚动
// 水平衔接模式，采用的是swiper组件，水平滚动
isCircular: {
type: Boolean,
default: true
},
// 播放状态，play-播放，paused-暂停
playState: {
type: String,
default: 'play'
},
// 是否禁止用手滑动切换
// 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序
disableTouch: {
type: Boolean,
default: true
},
// 滚动通知设置圆角
borderRadius: {
type: [Number, String],
default: 0
},
// 通知的边距
padding: {
type: [Number, String],
default: '18rpx 24rpx'
},
// list列表为空时，是否显示组件
noListHidden: {
type: Boolean,
default: true
}
},
computed: {
// 如果设置show为false，或者设置了noListHidden为true，且list长度又为零的话，隐藏组件
isShow() {
if(this.show == false || (this.noListHidden == true && this.list.length == 0)) return false;
else return true;
}
},
methods: {
// 点击通告栏
click(index) {
this.$emit('click', index);
},
// 点击关闭按钮
close() {
this.$emit('close');
},
// 点击更多箭头按钮
getMore() {
this.$emit('getMore');
},
// 滚动一个周期结束，只对垂直，或者水平步进形式有效
end() {
this.$emit('end');
}
}
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";

.u-notice-bar-wrap {
overflow: hidden;
}

.u-notice-bar {
padding: 18rpx 24rpx;
overflow: hidden;
}

.u-direction-row {
@include vue-flex;
align-items: center;
justify-content: space-between;
}

.u-left-icon {
@include vue-flex;
align-items: center;
}

.u-notice-box {
flex: 1;
@include vue-flex;
overflow: hidden;
margin-left: 12rpx;
}

.u-right-icon {
margin-left: 12rpx;
@include vue-flex;
align-items: center;
}

.u-notice-content {
line-height: 1;
white-space: nowrap;
font-size: 26rpx;
animation: u-loop-animation 10s linear infinite both;
text-align: right;
// 这一句很重要，为了能让滚动左右连接起来
padding-left: 100%;
}

@keyframes u-loop-animation {
0% {
transform: translate3d(0, 0, 0);
}

100% {
transform: translate3d(-100%, 0, 0);
}
}
</style>

Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить