<template>
<view class="box">
<view v-if="goodsData">
<view class="mainTop">
<view class="imgBox">
<swiper class="swiper" :circular="true"swiper-item
:indicator-dots="true" indicator-active-color="#FF4F00"
>
<swiper-item v-for="(item,index) in goodsData.listImg">
<view class="swiper-item">
<image :src="item.url" mode="aspectFit" class="goodsImg" v-if="item.url"></image>
<image src="../../static/img/noimg.png" mode="widthFix" class="goodsImg" v-else></image>
</view>
</swiper-item>
<swiper-item v-if=" goodsData.listImg.length==0">
<image src="../../static/img/noimg.png" mode="widthFix" class="goodsImg" ></image>
</swiper-item>
</swiper>
</view>
<view class="priceBox">
<span class="price1">￥ <span v-if="goodsData.salePrice"> {{goodsData.salePrice}}</span>
<span v-else> - </span>
</span>
</view>
<view class="goodsName">
{{goodsData.ShowName}}
</view>
</view>
<!-- 已选车辆店铺-->
<!-- 购物流程-->
<view class="buyLc">
<view class="title">购物流程</view>
<view class="lcIMgBox">
<image src="../../static/img/icon_liuc.png" mode="" class="lcImg"></image>
</view>
<view class="lcLineBox">
<view class="lcline">
选择商品/项目
</view>
<view class="lcline">
选择门店
</view>
<view class="lcline">
在线支付
</view>
<view class="lcline">
到店服务
</view>
</view>
</view>
<!-- 购物流程-->
<!-- 详情-->
<view class="goosDetal" v-if="MiniAppContent">
<view class="goodsDetalTitle">详情</view>
<rich-text :nodes="MiniAppContent" style="font-size: 0px;"></rich-text>
</view>
<!-- 详情-->
<view style="height: 150rpx;"></view>
<!-- 无店的情况-->
<!-- <view class="bottomNoshop" v-if="!shopData">
<view class="bottomNoshopBtn" @click="gockShop">请先前往首页选择门店</view>
</view> -->
<!-- 立即购买-->
<!-- <view class="buyBottom" v-if="maintain!=1&&maintain!=2">
<view class="buyBottomLeftLine buyBottomLeftLine2" @click="call">
<image src="../../static/img/heicall.png" mode="widthFix" class="callImg"></image>
<view class="buyBottomLeftLineTxt">电话</view>
</view>
<view class="buyBottomLeftLine buyBottomLeftLine2 buyBottomLeftLine3" @click="addGoodsCollection">
<image src="../../static/img/icon_xin_pre.png" mode="widthFix" class="callImg"v-if="goodsData.isCollection==1"></image>
<image src="../../static/img/icon_xin.png" mode="widthFix" class="callImg" v-else></image>
<view class="buyBottomLeftLineTxt" v-if="goodsData.isCollection==1" style="color: #FF4F00;">已收藏</view>
<view class="buyBottomLeftLineTxt" v-else>收藏</view>
</view>
<view class="buyBtn" @click="buy" v-if="maintainCarData&&nobuy!=1">立即购买</view>
</view>
<view class="buyBottom" v-if="maintain==2">
<view class="tihuanBtn" @click="tihuan">替换</view>
</view> -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
goodsId:'',
ShowName:'',
shopData:'',
maintainCarData:'',
goodsData:'',
type:'',
MiniAppContent:'',
typeIndex:'',
nobuy:2,
maintain:'',
goodsreplaceData:'',
}
},
onLoad(opt) {
this.ShowName=opt.ShowName;
this.goodsId=opt.goodsId;
this.shopData=uni.getStorageSync("shopData");
this.maintainCarData=uni.getStorageSync("maintainCarData");
if(opt.type){
this.type=opt.type
}
if(opt.nobuy){
this.nobuy=opt.nobuy
}
if(opt.maintain){
this.maintain=opt.maintain
if(this.maintain==2){
this.goodsreplaceData=uni.getStorageSync("goodsreplaceData");
}
}
this.typeIndex=opt.typeIndex;
this.getData();
//this.addGoodsFootprint()
},
onShow() {
this.$common.isUserId()
this.shopData=uni.getStorageSync("shopData");
},
methods: {
tihuan(){
var that=this;
uni.setStorage({
key: 'replaceData',
data: that.goodsreplaceData,
success: function () {
uni.navigateBack({
delta:2
})
}
});
},
buy(){
var arr=[];
var obj={
'id':'',
'listGoodsAll':[],
'listItem':[],
};
var url=''
if(this.goodsData.list.length>0){
if(this.goodsData.list[0].url){
url=this.goodsData.list[0].url
}else{
}
}
var ShowName=''
if(this.goodsData.ShowName){
ShowName=this.goodsData.ShowName
}
var goodsObj={
goodsID:this.goodsData.ID,
mItemID:'',
mGoodsID:this.goodsData.miniId,
salePrice:this.goodsData.MiniAppSalePrice,
qty:1,
goodsName:ShowName,
picUrl:url
}
obj.listGoodsAll.push(goodsObj);
arr.push(obj)
console.log(arr)
//return false
uni.removeStorageSync('couponData');
uni.navigateTo({
url:'../module/confirmOrder?orderData='+JSON.stringify(arr)+'¤tMileage='+this.maintainCarData.milage
})
},
gockShop(){
uni.navigateTo({
url:'../Shop/ckShop'
})
},
call(){
console.log(this.shopData.mobilePhone)
if(this.shopData.mobilePhone){
uni.makePhoneCall({
phoneNumber: this.shopData.mobilePhone
});
}else{
uni.showToast({
title: '未设置电话',
icon:'none',
duration: 3000,
});
}
},
addGoodsCollection(){
if(this.goodsData.isCollection==0){
uni.showLoading({
title: '加载中'
})
this.$http('miniAppMyBMemberCar/addGoodsCollection', {
goodsId:this.goodsId,
},'POST').then(res => {
uni.hideLoading();
if(res.code!=0){
uni.showToast({
title: res.msg,
icon:'none',
duration: 3000,
});
}else{
uni.showToast({
title: '收藏成功',
icon:'none',
duration: 3000,
});
this.goodsData.isCollection=1;
}
})
}else{
uni.showLoading({
title: '加载中'
})
this.$http('miniAppMyBMemberCar/deleteBMemberGoods', {
goodId:this.goodsId,
},'POST').then(res => {
uni.hideLoading();
if(res.code!=0){
uni.showToast({
title: res.msg,
icon:'none',
duration: 3000,
});
}else{
uni.showToast({
title: '取消成功',
icon:'none',
duration: 3000,
});
this.goodsData.isCollection=0;
}
})
}
},
getData(){
if(this.type==2){
var params={
goodsId:this.goodsId,
//shopId:this.shopData.shopId,
}
}else{
var location = uni.getStorageSync("locationCity");
var params={
id:this.goodsId,
guidePrice:this.maintainCarData.guidePrice,
cityCode:location.cityCode,
// shopId:this.shopData.shopId,
}
}
uni.showLoading({ });
if( this.typeIndex==1){
var url='miniApp/tPackageMiniAppController/queryGoodsMiniAppList'
}else{
var url='miniApp/tPackageMiniAppController/queryGoodsInfoDetail'
}
this.$http(url, params,'GET').then(res => {
uni.hideLoading();
/* var a=res.data.Items
this.phoneList=this.phoneList.concat(a); */
if(res.data.MiniAppContent){
this.MiniAppContent=res.data.MiniAppContent.replace(/\<p/gi, '<p style="display: inline-block"');
}
this.goodsData=res.data;
uni.setNavigationBarTitle({
title: res.data.ShowName
})
})
},
addGoodsFootprint(){
this.$http('miniAppMyBMemberCar/addGoodsFootprint', {
goodId:this.goodsId,
},'POST').then(res => {
})
}
},
filters:{
formatRichText(html) {
},
}
}
</script>
<style scoped>
.box{
min-height: 100vh;
background:#F4F5F7 ;
}
.mainTop{
background: #FFFFFF;
}
.swiper-item{
width: 100vw;
height: 700rpx;
}
.swiper{
height: 700rpx;
}
.goodsImg{
width: 750rpx;
height: 700rpx;
}
.imgBox{
text-align: center;
}
.priceBox{
padding: 30rpx 17rpx;
}
.price1{
font-size: 36rpx;
font-weight: 600;
color: #FF4F00;
}
.price2{
font-size: 24rpx;
color: #999999;
padding-left: 20rpx;
text-decoration:line-through;
}
.goodsName{
padding: 0 25rpx 30rpx 25rpx;
font-size: 32rpx;
font-weight: 500;
color: #333333;
}
.carShopBox{
background: #FFFFFF;
padding: 30rpx 24rpx;
margin-top: 20rpx;
}
.maintainCarTitle{
font-size: 26rpx;
color: #999999;
}
.maintainCarTxt{
font-size: 26rpx;
color: #3C3C3C;
padding-left: 30rpx;
}
.title{
font-size: 30rpx;
padding-bottom: 30rpx;
color: #333333;
font-weight: 600;
}
.shopBox{
padding-top: 30rpx;
display: flex;
}
.flex{
display: flex;
justify-content: space-between;
}
.shopCont{
padding-left: 22rpx;
width: 480rpx;
}
.shopName{
color: #333333;
font-size: 26rpx;
font-weight: 600;
}
.span1{
color: #FF4F00;font-size: 36rpx;
}
.span2{
color: #FF4F00;font-size: 22rpx;
}
.span3{
color: #333333;font-size: 22rpx;padding-left: 22rpx;
}
.shopBq{
color: #FF4F00;font-size: 22rpx;border-radius: 4rpx;
border: 1px solid #FF4F00;line-height: 30rpx;height: 30rpx;padding: 0rpx 5rpx;
margin-top: 10rpx;
}
.shopTime{
color: #666666;font-size: 22rpx;
}
.addressBox{
color: #666666;font-size: 22rpx;
}
.shopImg{
width: 120rpx;
height: 120rpx;
}
.buyLc{
padding: 24rpx 30rpx;
background: #FFFFFF;
margin-top: 20rpx;
}
.lcImg{
width: 618rpx;
height: 22rpx;
}
.lcIMgBox{
text-align: center;
}
.lcline{
font-size: 26rpx;
color: #333333;
}
.lcLineBox{
display: flex;
justify-content: space-around;
padding-top: 20rpx;
}
.goosDetal{
background: #FFFFFF;
margin-top: 20rpx;
}
.goodsDetalTitle{
padding: 24rpx 30rpx;
font-size: 30rpx;
font-weight: 600;
color: #333333;
}
.bottomNoshop{
position: fixed;
left: 0;
bottom: 0;
width: 750rpx;
height: 120rpx;
background: #FFFFFF;
box-shadow: 0px -2px 20px 0px rgba(153, 153, 153, 0.2);
}
.bottomNoshopBtn{
width: 690rpx;
height: 74rpx;
background: #CCCCCC;
border-radius: 37rpx;
text-align: center;
line-height: 74rpx;
color: #FFFFFF;
margin-top: 29rpx;
margin-left: 30rpx;
}
.callImg{
width: 36rpx;
}
.buyBottomLeftLineTxt{
font-size: 22rpx;
color: #333333;
}
.buyBottom{
position: fixed;
left: 0;
bottom: 0;
width: 750rpx;
height: 120rpx;
background: #FFFFFF;
box-shadow: 0px -2px 20px 0px rgba(153, 153, 153, 0.2);
display: flex;
}
.buyBtn{
width: 400rpx;
height: 74rpx;
background: #FF4F00;
border-radius: 37rpx;
text-align: center;
line-height: 74rpx;
font-size: 30rpx;
color: #FFFFFF;
margin-top: 23rpx;
margin-left: 50rpx;
}
.buyBottomLeftLine1{
padding-top: 28rpx;
padding-left: 56rpx;
}
.buyBottomLeftLine2{
padding-top: 32rpx;
padding-left: 56rpx;
text-align: center;
}
.buyBottomLeftLine3{
width: 120rpx;
padding-left: 0;
margin-left: 50rpx;
}
.goosDetal /deep/ img{
width: 100vw;
}
.goosDetal image{
width: 100vw;
}
.goosDetal /deep/ p{
margin: 0;
padding: 0;
display: flex;
}
.tihuanBtn{
width: 600rpx;
height: 74rpx;
background: #FF4F00;
border-radius: 37rpx;
text-align: center;
line-height: 74rpx;
font-size: 30rpx;
color: #FFFFFF;
margin-top: 23rpx;
margin-left: 75rpx;
}
</style>