499 lines
14 KiB
Vue
499 lines
14 KiB
Vue
<template>
|
||
<view class="content">
|
||
<page-head text="详情" navState="true"></page-head>
|
||
<swiper class="swiper" indicator-color="rgba(255,255,255,0.3)" indicator-active-color="rgba(255,255,255,1)"
|
||
:indicator-dots="indicatorDots">
|
||
<swiper-item v-for="(item,index) in commodityData.detail.images" :key="index">
|
||
<view class="swiper-item uni-bg-red">
|
||
<image class="img" :src="item" mode="aspectFill"></image>
|
||
</view>
|
||
</swiper-item>
|
||
|
||
</swiper>
|
||
<view class="commodityTitle">
|
||
<view class="title">
|
||
{{ commodityData.detail.name}}
|
||
</view>
|
||
|
||
<view class="dz" v-if="item.customized==1">
|
||
可定制
|
||
</view>
|
||
<view class="money" style="display: flex;">
|
||
<text >￥</text>{{ commodityData.detail.price}}
|
||
<view v-if="ifMember && ifMemberPrice && commodityData.detail.vip_price" style="margin-left: 40rpx;">会员价：<text >￥</text> {{ commodityData.detail.vip_price}}</view>
|
||
</view>
|
||
<view class="specification" @click="specificationFun()">
|
||
<view class="text">
|
||
<image src="../../static/guig.png" class="img" mode=""></image>
|
||
<view class="p">
|
||
规格：查看详细规格
|
||
</view>
|
||
</view>
|
||
<image class="jt" src="../../static/jta.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="commodityCon">
|
||
<view class="title">
|
||
商品信息
|
||
</view>
|
||
|
||
<view class="">
|
||
<view class="p" v-html="commodityData.detail.content"></view>
|
||
<!-- <view class="p">类别：布艺沙发 </view>
|
||
<view class="p">型号：1502 </view>
|
||
<view class="p">家具材质：布艺 </view>
|
||
<view class="p">国产/进口：国产 </view>
|
||
<view class="p">家装风格：简约现代 </view>
|
||
<view class="p">是否可定制：不可定制 </view>
|
||
<view class="p">是否可拆洗：不可拆洗 </view>
|
||
<view class="p">面料材质：其它 </view>
|
||
<view class="p">沙发骨架材质：实木 是否带储物空间：不带储物空间 沙发
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="similarity">
|
||
<view class="title">
|
||
为您找到以下相似商品
|
||
</view>
|
||
</view>
|
||
<view class="classifyConList">
|
||
<view class="list" v-for="(item,index) in commodityData.similarGoods" :key="index" @click="details(item.id)">
|
||
<image class="img" :src="item.cover" mode="aspectFill"></image>
|
||
<view class="text">{{item.name}}</view>
|
||
<view class="textA">
|
||
<view class="money"><text >￥</text>{{item.price}}</view>
|
||
<view class="btn" v-if="item.customized==1">可定制</view>
|
||
</view>
|
||
<view class="memberPrice" v-if="ifMember && ifMemberPrice && item.vip_price">会员价：￥{{item.vip_price}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="subscriptionButton" @click="makePhoneCallFun()">立即订购</view>
|
||
<view class="make" :class="popupState?'makedis':''"></view>
|
||
<view class="popup" :class="popupState?'popupB':''">
|
||
<image class="imgGb" @click="specificationFunState()" src="../../static/47.png" mode=""></image>
|
||
<view class="popupTitle">
|
||
<image class="img" @click="previewImg(commodityData.sku[current].picture || commodityData.detail.cover)" :src="commodityData.sku[current].picture || commodityData.detail.cover" mode="aspectFill"></image>
|
||
<view class="money" v-if="money">
|
||
<text >￥</text> {{money}}
|
||
<view v-if="ifMember && ifMemberPrice && vip_price" style="margin-left: 40rpx;margin-bottom: 10rpx;">会员价：<text >￥</text> {{vip_price}}</view>
|
||
</view>
|
||
<view class="money textmoney" v-else>暂无报价</view>
|
||
<view class="text">（点击上方封面可查看大图）</view>
|
||
</view>
|
||
<view class="popupList">
|
||
<view class="tit">规格</view>
|
||
<view class="" style="height: 460rpx;overflow: hidden;overflow-y: scroll;margin-top: 20rpx;">
|
||
<view class="list" @click="popupListFun(index)" :class="item.state?'on':''" v-for="(item,index) in commodityData.sku" :key="index">{{item.title}}</view>
|
||
</view>
|
||
<view class="button" @click="makePhoneCallFun()">立即订购</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
indicatorDots: true,
|
||
commodityData:{},
|
||
money:"",
|
||
vip_price:"",
|
||
popupState:false,
|
||
ifMember:false,
|
||
ifMemberPrice:false,
|
||
current:0,
|
||
}
|
||
},
|
||
onShow() {
|
||
this.ifMember = uni.getStorageSync('ifMember');
|
||
this.ifMemberPrice = uni.getStorageSync('ifMemberPrice');
|
||
},
|
||
onLoad(option) {
|
||
this.id=option.id
|
||
this.getData()
|
||
if(!uni.getStorageSync('userData')) {
|
||
uni.login({
|
||
success:(res)=> {
|
||
this.request({
|
||
url: this.host + "/api/user/login",
|
||
type:"POST",
|
||
data: {
|
||
code: res.code,
|
||
},
|
||
success:(data)=>{
|
||
if(data.data.code!=4003) {
|
||
uni.setStorageSync('userData',data.data.data);
|
||
this.request({
|
||
url: this.host + "/api/user/info",
|
||
type: "post",
|
||
success: (res) => {
|
||
res.data.data.is_vip ? this.ifMember = true : this.ifMember = false;
|
||
uni.setStorageSync('ifMember',this.ifMember);
|
||
res.data.data.vip_switch ? this.ifMemberPrice = true : this.ifMemberPrice = false;
|
||
uni.setStorageSync('ifMemberPrice',this.ifMemberPrice);
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
onShareAppMessage() {
|
||
return {
|
||
title: this.commodityData.detail.name,
|
||
page: `/pages/commodity/commodity?id=${this.commodityData.detail.id}`,
|
||
image:''
|
||
}
|
||
},
|
||
methods: {
|
||
makePhoneCallFun(){
|
||
uni.makePhoneCall({
|
||
phoneNumber: this.commodityData.purchase_phone //仅为示例
|
||
});
|
||
},
|
||
specificationFun(){
|
||
this.popupState=true
|
||
this.money=this.commodityData.sku[0].price
|
||
this.vip_price=this.commodityData.sku[0].vip_price
|
||
for (var i = 0; i < this.commodityData.sku.length; i++) {
|
||
this.commodityData.sku[i].state=false
|
||
}
|
||
this.commodityData.sku[0].state =true
|
||
},
|
||
specificationFunState(){
|
||
this.popupState=false
|
||
},
|
||
|
||
previewImg(logourl) {
|
||
let _this = this;
|
||
let imgsArray = [];
|
||
imgsArray[0] = logourl
|
||
uni.previewImage({
|
||
current: 0,
|
||
urls: imgsArray
|
||
});
|
||
},
|
||
popupListFun(index){
|
||
for (var i = 0; i < this.commodityData.sku.length; i++) {
|
||
this.commodityData.sku[i].state=false
|
||
}
|
||
this.commodityData.sku[index].state =true
|
||
this.money=this.commodityData.sku[index].price;
|
||
this.vip_price = this.commodityData.sku[index].vip_price;
|
||
this.current = index;
|
||
this.commodityData.sku=[...this.commodityData.sku]
|
||
},
|
||
details(id) {
|
||
uni.navigateTo({
|
||
url: '/pages/commodity/commodity?id=' + id
|
||
});
|
||
},
|
||
getData() {
|
||
this.request({
|
||
url: this.host + "/api/spu/detail",
|
||
type: "post",
|
||
data: {
|
||
id: this.id,
|
||
},
|
||
success: (res) => {
|
||
this.commodityData=res.data.data
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.swiper {
|
||
width: 100%;
|
||
height: 480rpx;
|
||
}
|
||
|
||
.swiper .img {
|
||
width: 100%;
|
||
height: 480rpx;
|
||
}
|
||
|
||
.title {
|
||
font-size: 40rpx;
|
||
color: #000000;
|
||
font-weight: bold;
|
||
line-height: 70rpx;
|
||
}
|
||
|
||
.commodityTitle {
|
||
background-color: #FFFFFF;
|
||
padding: 40rpx 40rpx 40rpx;
|
||
}
|
||
|
||
.commodityCon {
|
||
padding: 40rpx 40rpx 40rpx;
|
||
}
|
||
|
||
.commodityTitle .dz {
|
||
width: 100rpx;
|
||
height: 32rpx;
|
||
color: #FFFFFF;
|
||
margin-top: 20rpx;
|
||
font-size: 20rpx;
|
||
border-radius: 25rpx;
|
||
background-color: #D33333;
|
||
text-align: center;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.commodityTitle .money {
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
color: #D33333;
|
||
margin-top: 15rpx;
|
||
}
|
||
|
||
.specification {
|
||
width: 100%;
|
||
height: 86rpx;
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
justify-content: space-between;
|
||
padding: 0 20rpx;
|
||
align-items: center;
|
||
border: 4rpx solid #000000;
|
||
margin-top: 25rpx;
|
||
}
|
||
|
||
.specification .text {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.specification .img {
|
||
width: 37rpx;
|
||
height: 37rpx;
|
||
margin-right: 25rpx;
|
||
}
|
||
|
||
.specification .p {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.specification .jt {
|
||
width: 14rpx;
|
||
height: 26rpx;
|
||
}
|
||
|
||
.content {
|
||
background-color: #F5F5F5;
|
||
}
|
||
|
||
.commodityCon .title {
|
||
font-size: 36rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.commodityCon .p {
|
||
margin-top: 20rpx;
|
||
color: #8c8c9b;
|
||
line-height: 46rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.similarity .title {
|
||
font-size: 36rpx;
|
||
text-align: center;
|
||
color: #d33333;
|
||
font-weight: bold;
|
||
margin-bottom: 32rpx;
|
||
|
||
}
|
||
.subscriptionButton{
|
||
width: 668rpx;
|
||
height: 98rpx;
|
||
background-color: #D33333;color: #FFFFFF;
|
||
text-align: center;
|
||
line-height: 98rpx;
|
||
font-size: 36rpx;
|
||
position: fixed;
|
||
bottom: 10rpx;
|
||
left: 50%;
|
||
border-radius: 25rpx;
|
||
margin: auto;
|
||
margin-bottom: 20rpx;
|
||
margin-left: -334rpx;
|
||
}
|
||
.popup{
|
||
position: fixed;
|
||
left: 0rpx;
|
||
background-color: #FFFFFF;
|
||
width: 100%;
|
||
height: 950rpx;
|
||
padding: 0 40rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 30rpx;
|
||
z-index: 5;
|
||
bottom: -1200rpx;
|
||
border: 0rpx;
|
||
transition: all 1s;
|
||
}
|
||
.popupB{
|
||
bottom: -0rpx;
|
||
}
|
||
.make{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: fixed;
|
||
top: 0px;
|
||
left: 0px;
|
||
display: none;
|
||
background-color: rgba(0,0,0,0.5);
|
||
}
|
||
.makedis{
|
||
display: block;
|
||
}
|
||
.popupTitle .img{
|
||
width: 284rpx;
|
||
height: 284rpx;
|
||
margin: auto;
|
||
border-radius: 30rpx;
|
||
margin-top: -184rpx;
|
||
}
|
||
.popupTitle{
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
}
|
||
.popupTitle .money{
|
||
font-size: 48rpx;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
line-height: 58rpx;
|
||
color: #D33333;
|
||
}
|
||
.popupTitle .text{
|
||
font-size: 24rpx;
|
||
text-align: center;
|
||
color: #c0c0c0;
|
||
}
|
||
.popupList .tit{
|
||
margin-top: 32rpx;
|
||
font-size: 30rpx
|
||
}
|
||
.popupList .list{
|
||
border: 2rpx solid #666666;
|
||
width: 100%;
|
||
height: 106rpx;
|
||
margin-bottom: 20rpx;
|
||
padding: 0 42rpx;
|
||
font-size: 24rpx;line-height: 45rpx;
|
||
padding-top: 10rpx;
|
||
box-sizing: border-box;
|
||
color: #666666;
|
||
}
|
||
.popupList .list:last-child{
|
||
margin-bottom: 0;
|
||
}
|
||
.popupList .button{
|
||
width: 668rpx;
|
||
height: 98rpx;
|
||
background-color: #D33333;border-radius: 30rpx;
|
||
margin-top: 60rpx;
|
||
text-align: center;
|
||
position: absolute;
|
||
bottom: 34rpx;
|
||
line-height: 98rpx;
|
||
color: #FFFFFF;
|
||
font-size: 36rpx
|
||
}
|
||
.popupList .on{
|
||
background-color: #D33333;
|
||
color: #FFFFFF;
|
||
}
|
||
.popup .imgGb{
|
||
width: 66rpx;
|
||
height: 66rpx;
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 20rpx;
|
||
}
|
||
|
||
.classifyConList {
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
flex-wrap: wrap;
|
||
padding: 0 40rpx;
|
||
|
||
padding-bottom: 150rpx;
|
||
align-content: flex-start;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.classifyConList .list {
|
||
width: 320rpx;
|
||
/* height: 433rpx; */
|
||
margin-top: 30rpx;
|
||
border-radius: 30rpx;
|
||
background-color: #FFFFFF;
|
||
padding-bottom: 30rpx;
|
||
}
|
||
|
||
.classifyConList .list .img {
|
||
width: 100%;
|
||
height: 214rpx;
|
||
border-radius: 30rpx;
|
||
}
|
||
|
||
.classifyConList .list .text {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
word-break: break-all;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
-webkit-box-orient: vertical;
|
||
font-size: 28rpx;
|
||
margin-top: 15rpx;
|
||
line-height: 40rpx;
|
||
padding: 0 12rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.classifyConList .list .textA {
|
||
display: flex;
|
||
margin-top: 10rpx;
|
||
padding: 0 12rpx;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.classifyConList .list .textA .money {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.classifyConList .list .textA .btn {
|
||
font-size: 18rpx;
|
||
font-weight: bold;
|
||
width: 86rpx;
|
||
height: 28rpx;
|
||
border-radius: 14rpx;
|
||
color: #FFFFFF;
|
||
line-height: 28rpx;
|
||
text-align: center;
|
||
line-height: 28rpx;
|
||
background-color: #D33333;
|
||
}
|
||
.popupTitle .textmoney{
|
||
font-size: 40rpx;
|
||
line-height: 48rpx;
|
||
line-height: 58rpx;
|
||
|
||
}
|
||
.memberPrice{
|
||
font-size: 28rpx;font-weight: bold;padding-left: 20rpx;margin-top: 10rpx;
|
||
}
|
||
</style>
|