<template>
<view class="content">
<view v-if="showBody">
<view class="item">
<image :src="productVo.priceStockList[0].imgList[0].url"></image>
<view class="title" style="padding-top: 35rpx;">
<text>规格: <text
v-if="productVo.priceStockList[0].standardName">{{productVo.priceStockList[0].standardName}}张</text></text>
<view style="margin-top: 30rpx;">
<text class="noprice">¥{{productVo.priceStockList[0].originalPrice || ""}}</text>
<text class="price">¥{{productVo.priceStockList[0].sellingPrice || ""}}</text>
</view>
</view>
</view>
<view class="" style="display: flex;">
<view style="color: #303133;font-weight: bold;font-size: 32rpx;">
模板选择
</view>
<text style="font-size: 24rpx;color: #ccc;margin-left: 30rpx;">Template Selection</text>
</view>
<image src="../static/vlog/icon/fengexian.png" style="width: 100%;height: 5rpx;"></image>
<view style="display: flex;justify-content: space-around;margin-bottom: 20upx;width: 75%;margin: 20upx auto;">
<button type="default" class="btnn" :class="current===0?'active':'noactive'"
@click="current=0">封面</button>
<button type="default" class="btnn" :class="current===1?'active':'noactive'"
@click="current=1">内页</button>
</view>
<view v-if="current===0">
<view class="cover">
<view class="coverItem1" v-for="(item,index) in imgList2" :key="index">
<image class="img" :src="item.url" @click="changeCover(item.url)"></image>
<image v-if="cover===item.url" src="../static/vlog/icon/check.png" class="icon"></image>
</view>
</view>
</view>
<view v-else>
<view class="cover">
<view class="coverItem" v-for="(item,index) in imgList3" :key="index">
<image class="img" :src="item.url" @click="changeinsidePages(item.url)"></image>
<image v-if="insidePages===item.url" src="../static/vlog/icon/check.png" class="icon"></image>
</view>
</view>
</view>
<view style="display: flex;margin-top: 30rpx;">
<view style="color: #303133;font-weight: bold;font-size: 32rpx;">
详细参数
</view>
<text style="font-size: 24rpx;color: #ccc;margin-left: 30rpx;">Parameters</text>
</view>
<image src="../static/vlog/icon/fengexian.png" mode="" style="width: 100%;height: 5rpx;"></image>
<image :src="item.url" mode="widthFix" v-for="(item,index) in imgList1" :key="index" style="width: 100%;border-radius: 10rpx;"></image>
<view class="bottom" @click="beginMaking">上传照片制作</view>
</view>
<view v-else>
</view>
</view>
</template>
<script>
export default {
data() {
return {
showBody: false,
productVo: {}, //产品详情
imgList1: [], //详情列表
imgList2: [], //封面列表
imgList3: [], //内页列表
current: 0, //封面内页切换
cover: '', //封面
insidePages: '', //内页
}
},
onLoad(option) { //代替 vue 里面的 created
uni.setNavigationBarTitle({
title: option.name
})
this.getDetails(option.id)
},
onReady() { //代替 vue 里面的 mounted
},
methods: {
getDetails(id) { //获取商品详情
this.$request('scenic/user/product/findChoseProductInfo', {
productId: id,
openid: uni.getStorageSync('openid')
}).then(res => {
if (res.code === '00') {
this.showBody = true
this.productVo = res.data.productVo
uni.setStorageSync('productVo', this.productVo) //保存选择的商品信息
res.data.productVo.imgList.forEach(item => {
if (item.location === 5) {
this.imgList1.push(item)
}
if (item.location === 6) {
this.imgList2.push(item)
}
if (item.location === 8) {
this.imgList3.push(item)
}
})
} else {
uni.showModal({
title: '提示',
content: res.message,
showCancel: false,
})
}
})
},
changeCover(url) { //选择封面
this.cover = url
},
changeinsidePages(url) { //选择内页
this.insidePages = url
},
beginMaking() {
if (this.cover === '') {
return uni.showModal({
showCancel: false,
title: '提示',
content: '请选择封面',
})
}
if (this.insidePages === '') {
return uni.showModal({
showCancel: false,
title: '提示',
content: '请选择内页',
})
}
let coverInside = {
cover: {
imgName: '封面',
imgUrl: this.cover
},
inside: {
imgName: '内页',
imgUrl: this.insidePages
}
}
uni.setStorageSync('coverInside', coverInside)
let yeshu = this.productVo.priceStockList[0].standardName
this.$u.route({
url: 'pages/vlog/uploadPictures/uploadPictures?yeshu=' + yeshu
})
}
}
}
</script>
<style lang="scss" scoped>
.content {
padding: 0 20rpx;
box-sizing: border-box;
margin-bottom: 100rpx;
text-align: center;
.item {
display: flex;
justify-content: space-between;
padding: 15rpx 56rpx 52rpx 15rpx;
image {
width: 412rpx;
height: 288rpx;
border-radius: 10rpx;
box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
}
.title {
color: #999999;
font-size: 28upx;
width: 48%;
height: 220rpx;
padding-top: 10rpx;
margin-top: 60rpx;
}
}
.noprice {
font-size: 24rpx;
text-decoration: line-through;
color: #ccc;
font-weight: bold;
}
.price {
font-size: 32rpx;
color: #DE6F26;
margin-left: 10rpx;
font-weight: bold;
}
.cover {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding-bottom: 40upx;
.coverItem {
width: 328upx;
height: 231upx;
position: relative;
margin-top: 20rpx;
box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
.img {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.icon {
width: 40rpx;
height: 40rpx;
position: absolute;
top: 10rpx;
right: 10rpx;
}
}
.coverItem1 {
width: 556upx;
height: 396upx;
margin: 0 auto;
position: relative;
margin-top: 20rpx;
box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
.img {
width: 100%;
height: 100%;
border-radius: 10rpx;
}
.icon {
width: 40rpx;
height: 40rpx;
position: absolute;
top: 10rpx;
right: 10rpx;
}
}
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
height: 98rpx;
background-color: #FFE600;
right: 0;
line-height: 98rpx;
font-size: 36rpx;
font-weight: bold;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
}
}
.btnn {
background-color: #ECF4FF;
width: 180upx;
height: 64rpx;
line-height: 64rpx;
font-size: 28rpx;
}
.active {
background-color: #2979FF;
color: #fff;
}
.noactive {
color: #2979FF;
}
</style>