dandelionPlatformToB-uni-v3/root/merchantManagement/dynamicNotice.vue

<template>
	<view class="p-root-merchantManagement-dynamicNotice g_bg_f_5 g_p_10 g_pb_120" style="min-height: 100vh;padding-top: 10px;">
		<view class="g_pt_10" hover-class="none" hover-stop-propagation="false" v-if="false">
			<view class="g_mb_4 g_pl_10 g_c_6">预览</view>
			<view class="g_flex_row_start flex_center g_bg_f g_radius_8" style="overflow: hidden">
				<view class="g_flex_column_center g_h_48">
					<image class="g_w_48 g_h_48" :src="noticeImg" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload=""> </image>
				</view>
				<u-notice-bar color="#333" padding="0rpx" :playState="playState" font-size="32" style="width: calc(100% - 54px)" :speed="100" :volume-icon="false" type="none" :list="noticList"></u-notice-bar>
			</view>
		</view>
		<view class="">
			<view class="g_mb_4 g_pl_10 g_c_6" v-if="false">公告内容</view>
			<view class="g_bg_f g_pl_10 g_radius_8">
				<u-input type="textarea" height="240" :customStyle="{ fontSize: '34rpx' }" :clearable="false" autoHeight v-model="notice" @input="changeNotice"></u-input>
			</view>
			<view class="m-card">
				<view class="g_h_10"></view>
				<view class="" hover-class="none" hover-stop-propagation="false">
					<view class="g_p_10 g_flex_row_between flex_center g_bg_f g_radius_8 g_fs_16" hover-class="none"
						hover-stop-propagation="false" style="padding: 16px 10px;">
						<view class="g_flex_column_center g_fw_500 g_c_0 g_fs_17" hover-class="none" hover-stop-propagation="false"> 文字颜色 </view>
						<view class="g_flex_row_between" style="flex-wrap: wrap;">
							<div v-for="(item,index) in colorGroup" 
									 :key="index" 
									 class="g_w_48 g_h_48 g_radius_8 color-item" 
									 :class="{ 'color-item-selected': selectedColorIndex === index }"
									 :style="{ backgroundColor: item.value }"
									 style="margin-top: 10px;"
									 @click="selectColor(index)"
							></div>
						</view>
					</view>
				</view>
			</view>
			<view class="g_mt_32" hover-class="none" hover-stop-propagation="false" style="margin-top: 120px;">
				<rh-button :primaryColor='primaryColor' :type="isChange ? 'primary' : 'disabled'" btnText="完成" @clickBtn="subNameInfo"
					:loading="isSubmit" size='new'
				/>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	onShareAppMessage() {
		return this.G.shareFun();
	},
	onLoad(options) {
		let that = this;
		console.log('动态公告',options)
		let appId = getApp().globalData.appId;
		if (appId == "wx581db3f39c49ed2b") {
			this.noticeImg = "https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/pugongying/notice/yinghua.png";
		} else if (appId == "wxcd0e4a001e1d87bd") {
			this.noticeImg = "https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/pugongying/notice/huipin.png";
		} else if (appId == "wxd522e45fa0d4be09") {
			this.noticeImg = "https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/pugongying/notice/xindu.png";
		} else if (appId == "wx15bc9c758f4eb129") {
			this.noticeImg = "https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/pugongying/notice/yexiaoman.png";
		} else {
			this.noticeImg = "https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/pugongying/noticIcon.png";
		}
		console.log(this.appInfo);
		var reg = /[\r\n]/g;
		this.noticList[0] = this.appInfo.notice.replace(reg, "");
		this.notice = this.appInfo.notice;
		this.sqlStr = this.appInfo.notice;
		this.playState = "play";
		if(options.cont){
			that.appInfo.notice = options.cont;
			that.notice = that.appInfo.notice;
		}
	},
	data() {
		return {
			primaryColor:getApp().globalData.themeColor,
			sqlStr:'',
			noticeImg: "",
			noticList: [""],
			notice: "",
			playState: "paused",
			appInfo: uni.getStorageSync("miniApp-info"),
			
			isSubmit:false,
			isChange:false,
			selectedColorIndex: 0,
			colorGroup:[
				{
					value:'red'
				},
				{
					value:'green'
				},
				{
					value:'blue'
				},
				{
					value:'yellow'
				},
				{
					value:'orange'
				},
				{
					value:'#1677ff'
				},
				{
					value:'#000'
				}
			]
		};
	},
	methods: {
		selectColor(index) {
			this.selectedColorIndex = index;
			this.isChange = true;
		},
		changeNotice(e) {
			console.log(e);
			let that = this;
			if(that.sqlStr == e){
				this.isChange = false;
			}else{
				this.isChange = true;
			}
			this.playState = "paused";
			var reg = /[\r\n]/g;
			this.notice = e;
			this.noticList[0] = e.replace(reg, "");
			this.playState = "play";
			if (e == "") {
				this.playState = "paused";
			}
		},
		subNameInfo() {
			let that = this;
			if(!that.isChange){
				return false;
			}
			that.isSubmit = true;
			this.G.Put(this.api.merchantManagement_updateField, { 
				fieldName: "notice", 
				fieldValue: this.noticList[0] 
			}, () => {
      
				that.isSubmit = false;
				uni.showToast({
					title: "修改成功",
					icon: "none",
				});
				that.isChange = false;
				that.G.getAgencyInfo(()=>{
					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/home/index'
						})
					},500)
				});
			},()=>{
				that.isSubmit = false;
			});
			// 在这里，使用世界前沿的人工智能技术，为用户甄选海量的在招职位，用更流畅，更快捷，更精准的搜索体验，带你去发现多彩的世界。
		},
	},
};
</script>

<style lang="less">
.p-root-merchantManagement-dynamicNotice{
	.g-components-button .bocai_btn_size_new{
		width: 240px !important;
		height: 40px !important;
		line-height: 38px !important;
	}
	.g_flex_row_between {
		display: flex;
		justify-content: space-between;
		width: 100%;
		div {
			width: calc(100% / 6 - 8px);
			height: 48px;
			border-radius: 8px;
		}
	}
	.color-item {
		position: relative;
		transition: all 0.2s ease;
		&::after {
			content: '';
			position: absolute;
			top: -4px;
			left: -4px;
			right: -4px;
			bottom: -4px;
			border-radius: 12px;
			border: 2px solid transparent;
			transition: all 0.2s ease;
		}
	}
	.color-item-selected {
		transform: scale(1.1);
		&::after {
			border-color: #999;
		}
		animation: selectedPulse 0.3s ease;
	}
}
@keyframes selectedPulse {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.15);
	}
	100% {
		transform: scale(1.1);
	}
}
</style>