no message

root/merchantManagement/dynamicNotice.vue

@@ -14,7 +14,7 @@
 			<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="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"
@@ -22,16 +22,17 @@
 						<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" 
+									 :key="index" 
-									 :style="{
+									 class="g_w_48 g_h_48 g_radius_8 color-item" 
-										backgroundColor:item.value
+									 :class="{ 'color-item-selected': selectedColorIndex === index }"
-									}"
+									 :style="{ backgroundColor: item.value }"
-									style="margin-top: 10px;"
+									 style="margin-top: 10px;"
+									 @click="selectColor(index)"
 							></div>
 						</view>
 					</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'
@@ -84,6 +85,7 @@ export default {
 			
 			isSubmit:false,
 			isChange:false,
+			selectedColorIndex: 0,
 			colorGroup:[
 				{
 					value:'red'
@@ -110,6 +112,10 @@ export default {
 		};
 	},
 	methods: {
+		selectColor(index) {
+			this.selectedColorIndex = index;
+			this.isChange = true;
+		},
 		changeNotice(e) {
 			console.log(e);
 			let that = this;
@@ -133,7 +139,10 @@ export default {
 				return false;
 			}
 			that.isSubmit = true;
-			this.G.Put(this.api.merchantManagement_updateField, { fieldName: "notice", fieldValue: this.noticList[0] }, () => {
+			this.G.Put(this.api.merchantManagement_updateField, { 
+				fieldName: "notice", 
+				fieldValue: this.noticList[0] 
+			}, () => {
       
 				that.isSubmit = false;
 				uni.showToast({
@@ -174,5 +183,38 @@ export default {
 			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>