jikeH5/pages/addjk/ckmusic.vue

<template>
	<view class="content">
	 <view class="content2">
		 <view class="shopBox">
			<view class="shopLine" v-for="(item,index) in list" @click="ckshop(item,index)">
				<img src="../../static/img/ckn.png" alt="" class="ckImg" v-if="ckIndex!=index">
				<img src="../../static/img/cky.png" alt="" class="ckImg" v-if="ckIndex==index">
				<view class="shopName">{{item.name}}</view>
			</view>
		 </view>
		 
	 </view>
	 <view class="bottom"  @click="determine">
		确定添加
	 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:'',
				allck:false,
				ckIndex:0,
				
			}
		},
		onLoad() {
          this.getShopList()
		},
		methods: {
		   determine(){
			   var ckmusic=this.list[this.ckIndex];
			   console.log(ckmusic)
			   uni.setStorage({
			   		key: 'ckmusic',
			   		data: ckmusic,
			   		 success: function () {	
						 uni.navigateBack(-1)
			   		 }
			   });
		   },
		   ckshop(item,index){
			   this.ckIndex=index
		   },
		 
           getShopList(){
			   uni.showLoading({
			   	title: '加载中'
			   })
			   this.$http('openH5SetTheGuest/selectMusic', {
			     
			    },'GET').then(res => {
			   		uni.hideLoading();
					
			   		this.list=res.data;
					//console.log(this.list)
			    })
		   }
		}
	}
</script>

<style scoped>
	.content{
		min-height: 100vh;
		background:#F4F5F7;
	}
	.shopBox{
		background: #ffffff;
		border-radius: 10rpx;
	}
	.content2{
		padding: 20rpx 24rpx;
	}
	.shopLine{
		display: flex;
		padding: 30rpx 20rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	.ckImg{
		width: 44rpx;
		height: 44rpx;
	}
	.shopName{
		color: #3C3C3C;
		line-height: 44rpx;
		font-size: 28rpx;
		padding-left: 26rpx;
	}
	.bottom{
		width: 750rpx;
		height: 98rpx;
		background: #3F90F7;
		line-height: 98rpx;
		text-align: center;
		color: #ffffff;
		font-size: 30rpx;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	.bottomLeft{
		display: flex;
		padding-top: 38rpx;
		padding-left: 24rpx;
	}
	.allTxt{
		line-height: 44rpx;padding-left: 12rpx;color: #3C3C3C;
	}
	.determine{
		width: 310rpx;
		height: 98rpx;
		background: #3F90F7;
		border-radius: 10rpx;
		font-weight: 500;
		color: #FFFFFF;
		font-size: 31rpx;
		line-height: 98rpx;
		text-align: center;
		margin-top: 11rpx;
		margin-right: 24rpx;
	}
</style>