partnerApp/components/uni-permission-view/uni-permission-view.vue

<template>
	<view class="permissionView dis  a-c j-c " :class="[
  direction === 'column' ? 'f-c padding1' : 'padding',  
  position === 'fixed' ? 'fixed' : 'absolute',
  backimage===true?'backimage':''
]" :style="{borderRadius:cornerRadius,background:backimage?'':background,padding:padding}">
		<image class="lockedimg" src="/static/image/index/img/locked.png" mode="" :style="imageStyle"></image>
		<view class="content dis f-c a-c" :class="[direction === 'column' ? 'mt-3 mb-3' : 'row-content-margin']"
			:style="contentStyle">
			<!-- 锁定金额 -->
			<text class="lockedAmount" v-if="sum" :style="lockedAmountStyle">有 <text class="sum">{{sum}}</text>
				元佣金处于锁定状态( <text class="days">{{days}}</text> 天后清0)</text>
			<!-- 默认内容 -->
			<text class="genericText" :style="genericTextStyle" v-html="genericText"></text>
		</view>
		<view class="locked-btn" @click.stop="requestUnlock">
			{{btnText}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//定位方式
			position: {
				type: String,
				default: "absolute"
			},
			// 组件排列方式 row-横向，column-竖向
			direction: {
				type: String,
				default: 'column',
			},
			cornerRadius: {
				type: String,
				default: '',
			},
			sum: {
				//锁定金额
				type: String,
				default: null,
			},
			//天数
			days: {
				type: String | Number,
				default: null,
			},
			contentStyle: Object,
			genericText: String,
			//内容自定义样式
			genericTextStyle: Object,
			//标题自定义样式 
			lockedAmountStyle: Object,
			//logo自定义样式
			imageStyle: Object,
			background: {
				type: String,
				default: 'linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%)'
			},
			//自定义padding
			padding: {
				type: String,
				default: ''
			},
			backimage: {
				type: Boolean,
				default: false,
			},
			btnText: {
				type: String,
				default: "立即解锁",
			}

		},
		data() {
			return {

			}
		},
		onShow() {

		},
		onLoad() {

		},
		methods: {
			requestUnlock() {
				this.$emit('requestUnlock')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.backimage {
		background-image: url('/static/image/index/img/lockedback.png');
		background-size: 100% 100%;
	}

	.permissionView {
		z-index: 999;
		width: 100%;
		backdrop-filter: blur(8rpx);

		.lockedimg {
			width: 92rpx;
			height: 90rpx;
		}

		.content {
			.lockedAmount {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
				line-height: 1.4;

				.sum {
					color: #F74141;
				}

				.days {
					color: #2D6DFF;
				}
			}

			.genericText {
				font-size: 28rpx;
				color: #666;
				line-height: 1.4;
			}
		}

		//横排内容撑开，附带左右margin
		.row-content-margin {
			flex: 1;
			margin-left: 15rpx;
			margin-right: 23rpx;
		}

		//解锁按钮样式
		.locked-btn {
			background: linear-gradient(132deg, #2DD9FF 0%, #2D6DFF 100%);
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			padding: 6rpx 16rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			color: #fff;
		}
	}

	.absolute {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
	}

	.fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.padding {
		padding: 52rpx 30rpx;
	}

	.padding1 {
		padding: 30rpx;
	}
</style>