You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
2.3 KiB
114 lines
2.3 KiB
<template> |
|
<view class="max_box"> |
|
<view style="border: none;color: #ffffff;width: 100%;" v-if='list.length==0'>暂无可选材料,请前往购买</view> |
|
<view @click="xuanzhong(item)" v-if="list[0]!=1" v-for="item in list"> |
|
<view> |
|
<image :src="item.imagePath"></image> |
|
<view>{{item.collectorNumber}}</view> |
|
</view> |
|
<view> |
|
{{item.collectionName}} |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import {ref} from 'vue' |
|
import {compoundelect} from '@/api/user.js' |
|
export default { |
|
props:['id','pid'], |
|
setup(props) { |
|
let list=ref([1]) |
|
let xzmhleix=uni.getStorageSync(props.pid) |
|
console.log(xzmhleix.length); |
|
uni.showLoading({ |
|
title:'加载中' |
|
}) |
|
compoundelect({id:props.id}).then(res=>{ |
|
console.log(res); |
|
if(xzmhleix.length>0){ |
|
let arr=res.data |
|
xzmhleix.map(ite=>{ |
|
arr.map((item,index)=>{ |
|
if(item.collectorNumber==ite.collectorNumber){ |
|
arr.splice(index,1) |
|
} |
|
}) |
|
}) |
|
list.value=arr |
|
}else{ |
|
list.value=res.data |
|
} |
|
uni.hideLoading() |
|
}) |
|
function xuanzhong(item){ |
|
if(xzmhleix.length>0){ |
|
xzmhleix.push(item) |
|
console.log(xzmhleix); |
|
uni.setStorageSync(props.pid,xzmhleix) |
|
}else{ |
|
uni.setStorageSync(props.pid,[item]) |
|
} |
|
uni.navigateBack() |
|
} |
|
return { |
|
list, |
|
xuanzhong |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.max_box{ |
|
display: flex; |
|
flex-wrap: wrap; |
|
align-items: center; |
|
justify-content: space-between; |
|
padding: 26upx 34upx; |
|
box-sizing: border-box; |
|
>view{ |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
// justify-content: center; |
|
width: 318upx; |
|
height: 404upx; |
|
border-radius: 26upx; |
|
border: 1upx solid #373737; |
|
>view:nth-of-type(1){ |
|
position: relative; |
|
margin-top: 16upx; |
|
width: 286upx; |
|
height: 308upx; |
|
border-radius: 16upx; |
|
>image{ |
|
width: 286upx; |
|
height: 308upx; |
|
} |
|
>view{ |
|
position: absolute; |
|
left: 14upx; |
|
top: 18upx; |
|
width: 142upx; |
|
height: 40upx; |
|
background: rgba(0,0,0,0.4); |
|
border-radius: 26upx; |
|
font-size: 22upx; |
|
font-weight: 500; |
|
color: #FFFFFF; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
} |
|
>view:nth-of-type(2){ |
|
font-size: 28upx; |
|
font-weight: 500; |
|
color: #FFFFFF; |
|
margin-top: 24upx; |
|
} |
|
} |
|
} |
|
</style>
|
|
|