uni-zhihuikuangshan-2/components/t-i-notice/t-i-notice.vue

<template>
	<view class="content">
		<view class="box" v-if="notice != ''">
			<!-- 文字滚动 -->
			<uni-notice-bar :scrollable="scrollable" :speed="30" background-color="#ffffff00" color="#fff" single="true"
				:text="text_time">
			</uni-notice-bar>

			<!-- 文字滚动 -->
			<uni-notice-bar scrollable="true" :speed="20" background-color="#ffffff00" color="#fff" single="true"
				:text="notice"></uni-notice-bar>
				
			<view class="more" @click="go_duty_information()">
				<uni-icons type="more-filled" size="20" color="#fff"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		sloarToLunar,
		getYearMonthDay
	} from "../../components/Toling-DateSelect/computedLunarDate.js";

	// 返回指定日期距今多少天
	const daysComputed = time => {
		let oldTimeFormat = new Date(time)
		let nowDate = new Date()
		if (nowDate.getTime() - oldTimeFormat.getTime() > 0) {
			let times = nowDate.getTime() - oldTimeFormat.getTime()
			let days = parseInt(times / (60 * 60 * 24 * 1000))
			return days
		} else {
			throw ('传入时间不能大于当前日期')
		}
	}
	// console.log(daysComputed('2006-04-28'))

	// 返回指定日期前/后多少天的日期
	function getNextDate(date, day) {
		var dd = new Date(date);
		dd.setDate(dd.getDate() + day);
		var y = dd.getFullYear();
		var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
		var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
		return y + "-" + m + "-" + d;
	};

	// getNextDate("2018-09-27",10)
	export default {
		name: "t-i-notice",
		props: [
			"text",
			"mine_code"
		],
		watch:{
			text(newVal,oldVal){
				this.notice = newVal
			}
		},
		data() {
			return {
				text_time: "",
				notice:"",

				year: 0,
				month: 0,
				today: 0,

				lunarStr2: "",
				days: 0,
				
				scrollable:true
			};
		},
		mounted() {
			this.notice = this.text
			this.year = new Date().getFullYear();
			this.month = new Date().getMonth() + 1;
			this.today = new Date().getDate();

			this.lunarStr2 = "  农历： " + sloarToLunar(this.year, this.month.toString().padStart(2, '0'), this.today)
				.lunarStr2
			// console.log(sloarToLunar(this.year, this.month.toString().padStart(2, '0'), this.today))

			// console.log(getNextDate("2022-01-04",-5730))

			this.days = daysComputed('2006-04-28')
			// console.log(daysComputed('2006-04-28'))
			this.getCurrentDate()
		},
		methods: {
			getCurrentDate() {
				var myDate = new Date();
				var year = myDate.getFullYear(); //年
				var month = myDate.getMonth() + 1; //月
				var day = myDate.getDate(); //日
				var days = myDate.getDay();
				switch (days) {
					case 1:
						days = '星期一';
						break;
					case 2:
						days = '星期二';
						break;
					case 3:
						days = '星期三';
						break;
					case 4:
						days = '星期四';
						break;
					case 5:
						days = '星期五';
						break;
					case 6:
						days = '星期六';
						break;
					case 0:
						days = '星期日';
						break;
				}

				var str = "今日 " + " " + year + "年" + month + "月" + day + "日  " + days;
				
				if (uni.getStorageSync('mine_code') == 'zaoquan') {
					// this.text_time = str + " " + this.lunarStr2 + " 累计安全生产 " + this.days + " 天"
					this.text_time = str
					this.scrollable = false
				} else {
					this.text_time = str + " " + this.lunarStr2
				}

			},

		
			go_duty_information(){
				uni.navigateTo({
					url:"../../workbench/duty_information/duty_information"
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		height: 244rpx;

		// background-image: url(./icon/bg_img.jpg);
		background-size: 750rpx 334rpx;
		background-repeat: no-repeat;
		background-position: bottom;

		box-sizing: border-box;
		padding-top: 20rpx;
	}

	.box {
		margin: 0 auto;
		width: 700rpx;
		// height: 200rpx;
		background-color: rgba(255, 255, 255, .4);
		border-radius: 20rpx;

		box-sizing: border-box;
		padding: 0 20rpx;
		
		position: relative;

		/deep/.uni-noticebar {
			margin-bottom: 0;
		}

		/deep/.uni-noticebar:nth-child(2) {
			padding-top: 0;
		}
		
		
		.more{
			transform: rotate(90deg);
			
			position: absolute;
			top: 42rpx;
			right: 5rpx;
		}
	}
</style>