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.
449 lines
9.2 KiB
449 lines
9.2 KiB
<template> |
|
<view class="head_top"> |
|
<image @click="fanhui" src="../../static/fanhui.png"></image> |
|
<view></view> |
|
<view></view> |
|
</view> |
|
<view class="details_top"> |
|
<view class="max_box"> |
|
<img :class="ykwz?'img1':'img2'" :src="jiesao.thumbnail" /> |
|
</view> |
|
</view> |
|
<view class="cailiaobox"> |
|
<view>所需材料</view> |
|
<view> |
|
<view v-for="item in cailiao"> |
|
<view> |
|
<image :src="item.thumbnail"></image> |
|
<view>x{{item.amount}}</view> |
|
</view> |
|
<view> |
|
{{item.collectionName}} |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="xuanzhecl"> |
|
<view>选择材料</view> |
|
<view class="max_box"> |
|
<view @click="gocailiao(item)" v-for="item in xzsuju"> |
|
<image :class="item.xztp?'xuanzhon':''" :src="item.xztp?item.xztp:'../../static/jiahao.png'"></image> |
|
<view>{{item.collectionName}}</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view @click="kshechen" class="hechen"> |
|
立即合成 |
|
</view> |
|
<view v-if="hechenjieguo" @click="guanbi" class="zhezhao"> |
|
<view class="box" v-if="hechenjieguo"> |
|
<text>恭喜您!成功合成</text> |
|
<img v-if="hechenjieguo" :class="ykwz1?'img11':'img12'" :src="hechenjieguo.thumbnail" /> |
|
<text style="margin-top:320rpx;" v-if="hechenjieguo">{{hechenjieguo.collName}} X 1</text> |
|
<text class="qr" v-if="hechenjieguo" @click="guanbi">确认</text> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import deepCopy from '@/utils/function.js' |
|
import { |
|
compoundlistid,compoundcomposition |
|
} from '@/api/user.js' |
|
import { |
|
reactive, |
|
toRefs, |
|
ref |
|
} from 'vue' |
|
export default { |
|
props:['id'], |
|
onShow() { |
|
this.init() |
|
}, |
|
setup(props) { |
|
let ykwz=ref(true) |
|
let ykwz1=ref(true) |
|
let details=reactive({ |
|
jiesao:{}, |
|
cailiao:[], |
|
xzsuju:[], |
|
hechenjieguo:'' |
|
}) |
|
compoundlistid({id:props.id}).then(res=>{ |
|
console.log(res,'res'); |
|
let arr=res.data |
|
|
|
arr.map((item,index)=>{ |
|
if(!item.pid){ |
|
details.jiesao=item |
|
uni.getImageInfo({ |
|
src: details.jiesao.thumbnail, |
|
success: function (image) { |
|
if(image.width>image.height){ |
|
ykwz.value=true |
|
}else if(image.width<image.height){ |
|
ykwz.value=false |
|
} |
|
} |
|
}); |
|
arr.splice(index,1) |
|
} |
|
}) |
|
details.cailiao=arr |
|
|
|
console.log(details); |
|
init() |
|
}) |
|
function init(){ |
|
details.xzsuju=[] |
|
let it={} |
|
details.cailiao.map(item=>{ |
|
delete item.xztp |
|
it=item |
|
for(let a=0;a<item.amount;a++){ |
|
details.xzsuju.push(JSON.parse(JSON.stringify(it))) |
|
} |
|
}) |
|
let uarr=uni.getStorageSync(props.id) |
|
console.log(uarr,'uarr',details.xzsuju,details.cailiao); |
|
if(uarr.length>0){ |
|
details.xzsuju.map((item,index)=>{ |
|
uarr.some((it,ind)=>{ |
|
if(item.collectionName==it.collectionName){ |
|
details.xzsuju[index].xztp=it.imagePath |
|
details.xzsuju[index].cpids=it.id |
|
uarr.splice(ind,1) |
|
return true |
|
} |
|
}) |
|
}) |
|
} |
|
// console.log(details.xzsuju); |
|
} |
|
function gocailiao(ite){ |
|
console.log(ite); |
|
if(ite.xztp){ |
|
let arr=uni.getStorageSync(props.id) |
|
arr.some((item,index)=>{ |
|
if(item.collectionName==ite.collectionName){ |
|
arr.splice(index,1) |
|
return true |
|
} |
|
}) |
|
uni.setStorageSync(props.id,arr) |
|
init() |
|
}else{ |
|
uni.navigateTo({ |
|
url:'/pages/composecailiao/composecailiao?id='+ite.collectionId+'&pid='+props.id |
|
}) |
|
} |
|
|
|
} |
|
function fanhui(){ |
|
uni.navigateBack() |
|
} |
|
function guanbi(){ |
|
details.hechenjieguo='' |
|
} |
|
function kshechen(){ |
|
let sfqx=true |
|
let idarr=[] |
|
details.xzsuju.map(item=>{ |
|
idarr.push(item.cpids) |
|
if(!item.xztp){ |
|
sfqx=false |
|
} |
|
}) |
|
if(sfqx&&idarr.length==details.xzsuju.length){ |
|
compoundcomposition({id:props.id,myColl:idarr}).then(res=>{ |
|
console.log(res); |
|
if(res.code==200){ |
|
uni.setStorageSync(props.id,[]) |
|
init() |
|
details.hechenjieguo=res.data |
|
uni.getImageInfo({ |
|
src: details.hechenjieguo.thumbnail, |
|
success: function (image) { |
|
if(image.width>image.height){ |
|
ykwz1.value=true |
|
}else if(image.width<image.height){ |
|
ykwz1.value=false |
|
} |
|
} |
|
}); |
|
}else{ |
|
uni.showToast({ |
|
title:res.msg, |
|
icon:'none' |
|
}) |
|
} |
|
}) |
|
}else{ |
|
uni.showToast({ |
|
title:'合成材料不足,请继续添加', |
|
icon:'none' |
|
}) |
|
} |
|
} |
|
return { |
|
init, |
|
guanbi, |
|
ykwz, |
|
ykwz1, |
|
gocailiao, |
|
kshechen, |
|
fanhui, |
|
...toRefs(details) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.img11 { |
|
position: absolute; |
|
left: 50%; |
|
top: 40%; |
|
transform: translateX(-50%) translateY(-50%); |
|
max-width: 196upx; |
|
} |
|
.img12 { |
|
position: absolute; |
|
left: 50%; |
|
top:40%; |
|
transform: translateX(-50%) translateY(-50%); |
|
max-height:210upx; |
|
} |
|
.zhezhao{ |
|
width: 100%; |
|
height: 100vh; |
|
position: fixed; |
|
left: 0; |
|
top: 0; |
|
background-color: #00000050; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
>.box{ |
|
width:660upx; |
|
height: 614upx; |
|
padding: 30upx 20upx; |
|
background-image: url('@/static/bgtp.png'); |
|
background-repeat: no-repeat; |
|
background-size: 100% 100%; |
|
border-radius: 30upx; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
// justify-content: center; |
|
color: #ffffff; |
|
box-sizing: border-box; |
|
position: relative; |
|
>image{ |
|
// height: 450upx; |
|
width: 200upx; |
|
border-radius: 20upx; |
|
margin-top: 10upx; |
|
} |
|
>text:nth-of-type(1){ |
|
font-size: 36upx; |
|
font-weight: bold; |
|
color: #FFFFFF; |
|
} |
|
>text:nth-of-type(2){ |
|
font-size: 28upx; |
|
font-weight: bold; |
|
color: #9735DC; |
|
} |
|
.qr{ |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
margin-top: 72upx; |
|
font-size: 28upx; |
|
font-weight: 500; |
|
color: #FFFFFF; |
|
width: 328upx; |
|
height: 72upx; |
|
background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%); |
|
border-radius: 48upx; |
|
} |
|
} |
|
} |
|
.xuanzhon{ |
|
width: 136upx !important; |
|
height: 136upx !important; |
|
border-radius: 36upx; |
|
margin-bottom: 26upx !important; |
|
margin-top: 34upx !important; |
|
} |
|
.hechen{ |
|
position: fixed; |
|
bottom: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 116upx; |
|
background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%); |
|
font-size: 32upx; |
|
font-weight: bold; |
|
color: #FFFFFF; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
.xuanzhecl{ |
|
width: 686upx; |
|
padding: 60upx 32upx; |
|
padding-bottom: 130upx; |
|
box-sizing: border-box; |
|
margin: auto; |
|
display: flex; |
|
flex-direction: column; |
|
>view:nth-of-type(1){ |
|
font-size: 32upx; |
|
font-weight: bold; |
|
color: #FFFFFF; |
|
margin-bottom: 40upx; |
|
} |
|
.max_box{ |
|
display: flex; |
|
align-items: center; |
|
flex-wrap: wrap; |
|
justify-content: space-between; |
|
>view{ |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
width: 270upx; |
|
height: 270upx; |
|
border-radius: 36upx; |
|
opacity: 1; |
|
border: 1upx solid #373737; |
|
margin-bottom: 40upx; |
|
>image{ |
|
width: 62upx; |
|
height: 62upx; |
|
margin-top: 68upx; |
|
margin-bottom: 60upx; |
|
} |
|
>view{ |
|
font-size: 28upx; |
|
font-weight: 500; |
|
color: #8D8C9F; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.cailiaobox{ |
|
width: 686upx; |
|
// height: 340upx; |
|
background: #23262F; |
|
border-radius: 12upx; |
|
display: flex; |
|
flex-direction: column; |
|
padding: 40upx 32upx; |
|
box-sizing: border-box; |
|
margin: auto; |
|
>view:nth-of-type(1){ |
|
font-size: 32upx; |
|
font-weight: bold; |
|
color: #FFFFFF; |
|
} |
|
>view:nth-of-type(2){ |
|
display: flex; |
|
align-items: center; |
|
flex-wrap: wrap; |
|
margin-top: 20upx; |
|
>view{ |
|
width:162upx; |
|
display: flex; |
|
flex-direction: column; |
|
margin-right: 65upx; |
|
margin-bottom: 20upx; |
|
&:nth-of-type(3n){ |
|
margin-right: 0; |
|
} |
|
>view:nth-of-type(1){ |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
>image{ |
|
width: 96upx; |
|
height: 96upx; |
|
border-radius: 12upx; |
|
} |
|
>view{ |
|
font-size: 28upx; |
|
font-weight: bold; |
|
color: #FFFFFF; |
|
} |
|
} |
|
>view:nth-of-type(2){ |
|
font-size: 28upx; |
|
margin-top: 20upx; |
|
font-weight: 400; |
|
color: #FFFFFF; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.details_top { |
|
width: 750upx; |
|
height: 812upx; |
|
background-image: url('@/static/detailstop.png'); |
|
background-repeat: no-repeat; |
|
background-size: 100% 100%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
margin-bottom: 66upx; |
|
.max_box{ |
|
width: 520upx; |
|
height: 520upx; |
|
position: relative; |
|
// display: flex; |
|
// align-content: center; |
|
// justify-content: center; |
|
} |
|
.img1 { |
|
position: absolute; |
|
left: 50%; |
|
top: 50%; |
|
transform: translateX(-50%) translateY(-50%); |
|
max-width: 100%; |
|
} |
|
.img2 { |
|
position: absolute; |
|
left: 50%; |
|
top: 50%; |
|
transform: translateX(-50%) translateY(-50%); |
|
max-height: 100%; |
|
} |
|
} |
|
|
|
.head_top { |
|
width: 100%; |
|
height: 50upx; |
|
position: absolute; |
|
top: 50upx; |
|
left: 0; |
|
display: flex; |
|
z-index: 10; |
|
font-size: 43upx; |
|
font-weight: 500; |
|
color: #FFFFFF; |
|
justify-content: space-between; |
|
|
|
>image { |
|
width: 50upx; |
|
height: 50upx; |
|
|
|
} |
|
} |
|
|
|
</style>
|
|
|