|
|
@@ -0,0 +1,535 @@
|
|
|
+<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">￥{{goodsData.salePrice}}</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">
|
|
|
+ <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({ });
|
|
|
+ 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({ });
|
|
|
+ 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>
|
