im/pages/find/friend-circle/builtinBgImg.vue

<template>
	<view class="content">
		<uni-nav-bar 
			left-icon="back" 
			@clickLeft="uni.$u.route({type:'back'})"
			statusBar
			backgroundColor="#ffffff"
			:border="false"
			title="选择背景图">
			<template v-slot:footer>
				<u-button :custom-style="customBtnStyle" size="mini" :disabled="submitFlag"
							:type="submitFlag?'info ':'success'" @click="handleLink()">设置</u-button>
			</template>
		</uni-nav-bar>
		<u-grid @click="clickGrid">
			<u-grid-item v-for="(item, index) in bgList" :key="index"  :index="index" :custom-style="item.isCheck?girdItemCustomStyle:{}">
				<u-image :src="item.src" width="200rpx" height="200rpx" mode="aspectFill"></u-image>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bgList:[],
			customBtnStyle: {
				fontSize: '30rpx',
				padding: '28rpx',
				width:'100rpx'
			},
			submitFlag:true,
			girdItemCustomStyle:{
				backgroundColor:'#71d5a1',
				// maring:'0rpx',
				 padding:'20rpx'
			}
		};
	},
	methods: {
		clickGrid(index){
			this.bgList.forEach((item,i)=>{
				if(index == i) item.isCheck = !item.isCheck;
				else item.isCheck = false;
			})
			this.submitFlag=false;
		},
	
		//处理跳转逻辑
		handleLink(){
			const item = this.bgList.find(it=>it.isCheck);
			if(item){
				this.$store.commit('circle/SET_SETTINGS',{
					...this.$store.storeCircleSettings,
					bg:item.src
				});
				uni.navigateBack({
					delta:2
				})
			}
		},
		
	},
	onShow() {
		this.bgList = JSON.parse(JSON.stringify(this.circleBgList))
	}
};
</script>

<style lang="scss" scoped>
.content {
	.slot-wrap {
		display: flex;
		align-items: center;
		padding: 0 30rpx; 
	}
}
</style>