<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>