m

login/agreement.vue

+<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>

login/login.vue

         </checkbox>
       </checkbox-group>
       <!-- <view class="txt-grey">我已阅读并同意</view> -->
-      <view class="txt-green" @click="msg('阅读协议')"
+      <view class="txt-green" @click="toRead"
         >《平台用户服务隐私协议》</view
       >
     </view>
   state.checked = !state.checked;
 };
 
+// 去协议页面 
+const toRead=()=>{
+	navTo("/login/agreement")
+}
+
+
 /* 登录 */
 const doLogin = () => {
   if (!state.username) {

pages.json

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

pages/index/index.vue

 			<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>
 
 		<!-- 按钮导航 -->
 				</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>
 				<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>
 				</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>
 	<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>
 					<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>
 	<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>
 		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
 	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: [
 			//公告栏列表
 			{
 		],
 	});
 	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;
 		}
 	});
 	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}`,
 			// });
 			// 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();
 	};
 	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 = () => {
 
 	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);
 
 		//     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>
 	// .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;
 	}
 	}
 
 	.news {
-		padding:30rpx 30rpx 0 30rpx;
+		padding: 30rpx 30rpx 0 30rpx;
 	}
 
 	.news .title {

personal-center/setting/car-information/car-change.vue

 					</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')"> 
 						<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()">
 			customerId: "", //用户编号  .
 			vehicleId: "", //车牌编号 .
 			issueDate: "", //发证日期  .
-			drivingPermitPos: "", //行驶证正面 .
-			drivingPermitNeg: "", //行驶证证反面 .
+			vehPosImgUrl: "", //行驶证正面 .
+			vehNegImgUrl: "", //行驶证证反面 .
 			type: "0", //0，客车 1.货车 .
 			useUserType: 0, //车辆用户类型 .
 			// useUserTypeName: "普通车",
 		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
 								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;
 							}
 						});
 					})

personal-center/setting/car-information/car-create.vue

 					</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')">
 						<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()">
 	} from "@dcloudio/uni-app";
 
 	const savaHandle = () => {
+		if(state.showCaridCorlor){
 		state.form.vehicleId=state.form.vehicleId+'_'+state.carIdcorlorCode
 		var data = state.form;
 		console.log(data, "##########");
 					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) => {
 		// 	state.form.useUserTypeName = val.label;
 		// });
 		console.log(item);
-
 		if (state.form.vehicleId) {
 			state.showCaridCorlor=item[0].label
 			state.carIdcorlorCode= item[0].value
 			customerId: "", //用户编号  .
 			vehicleId: "", //车牌编号 .
 			issueDate: "", //发证日期  .
-			drivingPermitPos: "", //行驶证正面 .
-			drivingPermitNeg: "", //行驶证证反面 .
-			type: "0", //0，客车 1.货车 .
+			vehPosImgUrl: "", //行驶证正面 .
+			vehNegImgUrl: "", //行驶证证反面 .
+			type: 0, //0，客车 1.货车 .
 			useUserType: 0, //车辆用户类型 .
 			// useUserTypeName: "普通车",
 			vehicleSign: 2, //前/后装标识 .
 								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;
 							}
 						});
 					})

personal-center/setting/car-information/corrections.vue

 			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},
 			]
 		},
 	]

personal-center/setting/information-deletion.vue

 <template>
 	<view class="content">
-		如果您是我们的ETC用户，需要删除个人的用户信息、车辆信息、银行卡信息和邮寄信息等，请通过联系在线客服 4008 0087 87 进行处理
+		<!-- 如果您是我们的ETC用户，需要删除个人的用户信息、车辆信息、银行卡信息和邮寄信息等，请通过联系在线客服 4008 0087 87 进行处理 -->
+		{{content}}
 	</view>
 </template>
 
 	import {
 		infoQuery
 	} from "@/utils/network/api.js"
-
+	
+	const content=ref('')
 
 	// 获取文本信息----用户协议
 	const getInfo = (type) => {
 		let options = {
 			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
 			data: {
-				businessType: 'USER_AGREEMENT'
+				businessType: 'USER_DELETE'
 			}, //请求参数
 			method: "POST", //提交方式(默认POST)
 			showLoading: true, //是否显示加载中(默认显示)
 			.then((res) => {
 				let data=stringToJson(res.bizContent)
 				console.log(data);
+				content.value=data.text
 			})
 			.catch((err) => {
 				console.log(err);

uni_modules/vk-uview-ui/components/u-notice-bar/u-notice-bar.vue

+<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>