|
|
@@ -2,16 +2,12 @@
|
|
|
<view class="box">
|
|
|
<view class="spwBox">
|
|
|
<swiper class="swiper" circular :autoplay="false" :indicator-dots="true" indicator-color="#CCCCCC" indicator-active-color="#D53533">
|
|
|
- <swiper-item>
|
|
|
+ <swiper-item v-for="(item,index) in info.ImgList">
|
|
|
<view class="swiper-item">
|
|
|
- <img mode="aspectFit" src="http://phone.66km.cn:8088/thFiles/C678448A-C874-4B42-9EAE-4F8F21D71D27.jpg" alt="" class="swiper-itemImg">
|
|
|
- </view>
|
|
|
- </swiper-item>
|
|
|
- <swiper-item>
|
|
|
- <view class="swiper-item">
|
|
|
- <img mode="aspectFit" src="http://phone.66km.cn:8088/thFiles/C678448A-C874-4B42-9EAE-4F8F21D71D27.jpg" alt="" class="swiper-itemImg">
|
|
|
+ <img mode="aspectFit" :src="item.url" alt="" class="swiper-itemImg">
|
|
|
</view>
|
|
|
</swiper-item>
|
|
|
+
|
|
|
</swiper>
|
|
|
</view>
|
|
|
<view class="shopCont">
|
|
|
@@ -19,30 +15,145 @@
|
|
|
<view class="goodsPrice">
|
|
|
<view class="goodsPrice1">店庆价</view>
|
|
|
<view class="goodsPrice2">￥</view>
|
|
|
- <view class="goodsPrice3">999</view>
|
|
|
- <view class="goodsPrice4">￥893</view>
|
|
|
+ <view class="goodsPrice3">{{info.scribingPrice?info.scribingPrice:info.salePrice}}</view>
|
|
|
+ <view class="goodsPrice4" v-if="info.scribingPrice">￥{{info.salePrice}}</view>
|
|
|
</view>
|
|
|
- <view class="Sold">已售 999</view>
|
|
|
+ <view class="Sold">已售 {{info.saleQty}}</view>
|
|
|
</view>
|
|
|
- <view class="goodsName">德国马牌 Continental 全新升级6 TechContct 过长长长长长长长长换行</view>
|
|
|
- <view class="goodsMd">这里展示商品卖点，如果后台没填则不展示</view>
|
|
|
+ <view class="goodsName">{{info.name}}</view>
|
|
|
+ <view class="goodsMd" v-if="info.sellingPoint">{{info.sellingPoint}}</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="modeBox">
|
|
|
<view class="modeline">
|
|
|
<view class="modelineLeft">配送方式</view>
|
|
|
- <view class="modeLineRight">到店取货</view>
|
|
|
+ <view class="modeLineRight">{{info.distributionType==1?'到店取货':'到店使用'}}</view>
|
|
|
</view>
|
|
|
<view class="modeline">
|
|
|
<view class="modelineLeft">限购数量</view>
|
|
|
- <view class="modeLineRight">到店取货</view>
|
|
|
+ <view class="modeLineRight">{{info.oneQty}}</view>
|
|
|
</view>
|
|
|
<view class="modeline">
|
|
|
<view class="modelineLeft">售后服务</view>
|
|
|
- <view class="modeLineRight">到店取货</view>
|
|
|
+ <view class="modeLineRight">{{info.afterService}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 服务流程 -->
|
|
|
+ <view class="fuwuliucBox">
|
|
|
+ <view class="fwlcTitle">服务流程</view>
|
|
|
+ <view class="fwlcxian">
|
|
|
+ <view class="fwlcyuan"></view>
|
|
|
+ <view class="fwHx"></view>
|
|
|
+ <view class="fwlcyuan"></view>
|
|
|
+ <view class="fwHx"></view>
|
|
|
+ <view class="fwlcyuan"></view>
|
|
|
+ <view class="fwHx"></view>
|
|
|
+ <view class="fwlcyuan"></view>
|
|
|
+ </view>
|
|
|
+ <view class="fwTxt">
|
|
|
+ <view class="fwTxtline">选择商品</view>
|
|
|
+ <view class="fwTxtline">选择门店</view>
|
|
|
+ <view class="fwTxtline">在线开卡</view>
|
|
|
+ <view class="fwTxtline">到店服务</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 套餐内容 -->
|
|
|
+ <view class="mealBox" v-if="info.bizType==3">
|
|
|
+ <view class="fwlcTitle">套餐内容</view>
|
|
|
+ <view class="mealLine" v-for="(item,index) in 2">
|
|
|
+ <view class="mealTop">
|
|
|
+ <view class="mealName">项目名称</view>
|
|
|
+ <view class="mealTopRight">
|
|
|
+ <view>数量</view>
|
|
|
+ <view style="padding-left: 44rpx;">有效期</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="itemlinebOX">
|
|
|
+ <view class="itemline">
|
|
|
+ <view class="itemname">这是项目名称长长长长长项目名称项目名称长长sss长长换行换</view>
|
|
|
+ <view>20</view>
|
|
|
+ <view>10个月</view>
|
|
|
+ </view>
|
|
|
+ <view class="itemline">
|
|
|
+ <view class="itemname">这是项目名称</view>
|
|
|
+ <view>200</view>
|
|
|
+ <view>10个月</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 商品详情 -->
|
|
|
+ <view class="goodsDetail">
|
|
|
+ <view class="goodsDetailTitle">商品详情</view>
|
|
|
+ <view v-html="info.details" style="background: #fff;"></view>
|
|
|
+ </view>
|
|
|
+ <view style="height: 120rpx;"></view>
|
|
|
+
|
|
|
+ <view class="bottomBox">
|
|
|
+ <view class="bottomImgBox" @click="goINdex">
|
|
|
+ <image src="../../static/timg/home.png" mode="" class="bottomImg"></image>
|
|
|
+ <view class="bottomTxt">首页</view>
|
|
|
+ </view>
|
|
|
+ <view class="bottomImgBox" style="margin-left: 20rpx;">
|
|
|
+ <image src="../../static/timg/share.png" mode="" class="bottomImg"></image>
|
|
|
+ <view class="bottomTxt">分享</view>
|
|
|
+ </view>
|
|
|
+ <view class="bottomBtn" @click="buyShow=true">立即购买</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 立即购买 -->
|
|
|
+ <view class="buyBox" v-if="buyShow" @click="buyShow=false">
|
|
|
+ <view class="buyCont" @click.stop="">
|
|
|
+ <image src="../../static/timg/chahao.png" mode="" class="buyContCh" @click="buyShow=false"></image>
|
|
|
+ <view class="goodsBox">
|
|
|
+ <view class="hotGoodsLine" >
|
|
|
+ <view>
|
|
|
+ <image :src="info.ImgList[0].url" mode="" v-if="info.ImgList.length>1" class="hotGoodsLineImg"></image>
|
|
|
+ <image src="../../static/timg/noimg.png" class="hotGoodsLineImg" v-else></image>
|
|
|
+ </view>
|
|
|
+ <view class="hotGoodsLineRIght">
|
|
|
+ <view class="goodsName2">{{info.name}}</view>
|
|
|
+ <view class="Sold">已售 {{info.saleQty}}</view>
|
|
|
+ <view class="goodsPrice">
|
|
|
+ <view class="goodsPrice11">店庆价</view>
|
|
|
+ <view class="goodsPrice22">￥</view>
|
|
|
+ <view class="goodsPrice33">{{info.scribingPrice?info.scribingPrice:info.salePrice}}</view>
|
|
|
+ <view class="goodsPrice44" v-if="info.scribingPrice">￥{{info.salePrice}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="buyNumBox">
|
|
|
+ <view class="bugNUm">
|
|
|
+ <view class="bugNUmLeft">
|
|
|
+ <view class="buySl">数量</view>
|
|
|
+ <view class="buyXg">限购{{info.oneQty}}件</view>
|
|
|
+ </view>
|
|
|
+ <view class="numJsbox">
|
|
|
+ <view class="numJj" @click="calculation(1)">-</view>
|
|
|
+ <view class="goodsnum">{{goodsnum}}</view>
|
|
|
+ <view class="numJj" @click="calculation(2)">+</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="buySHop">
|
|
|
+ <view>服务门店</view>
|
|
|
+ <view class="buyShopRight">
|
|
|
+ <view>连锁一号</view>
|
|
|
+ <image src="../../static/timg/icon_arrow_right.png" mode="" class="buyShopRightJt"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="buybtnBox">
|
|
|
+ <view class="buyBtn">立即购买</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
+
|
|
|
+<!-- <view :style="{color:colorX}">asdfas</view> -->
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -54,17 +165,42 @@
|
|
|
data() {
|
|
|
return {
|
|
|
userInfo:'',
|
|
|
-
|
|
|
+ goodsnum:1,
|
|
|
+ buyShow:false,
|
|
|
+ id:'',
|
|
|
+ info:'',
|
|
|
}
|
|
|
},
|
|
|
- onLoad() {
|
|
|
-
|
|
|
+ onLoad(opt) {
|
|
|
+ this.id=opt.id;
|
|
|
this.userInfo = uni.getStorageSync("userInfo");
|
|
|
- //this.getOrderTimes()
|
|
|
+ this.openGoodsDetailById()
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
-
|
|
|
+ openGoodsDetailById(){
|
|
|
+ this.$http('openMall/openGoodsDetailById', {
|
|
|
+ id:this.id
|
|
|
+ },'GET').then(res => {
|
|
|
+ this.info=res.data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goINdex(){
|
|
|
+ uni.switchTab({
|
|
|
+ url:'../index/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ calculation(type){
|
|
|
+ if(type==1){
|
|
|
+ if(this.goodsnum>1){
|
|
|
+ this.goodsnum--
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if(this.info.oneQty>this.goodsnum){
|
|
|
+ this.goodsnum++
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
}
|
|
|
@@ -76,6 +212,305 @@
|
|
|
background: #F4F5F7;
|
|
|
min-height: 100vh;
|
|
|
}
|
|
|
+.buySHop{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size:28rpx ;
|
|
|
+ color: #666666;
|
|
|
+ padding-top: 30rpx;
|
|
|
+}
|
|
|
+.buybtnBox{
|
|
|
+ width: 750rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px -2px 10px 0px rgba(153,153,153,0.2000);
|
|
|
+}
|
|
|
+.buyBox{
|
|
|
+ width: 750rpx;
|
|
|
+ height: 100vh;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ background: rgba(0,0,0,0.5);
|
|
|
+
|
|
|
+}
|
|
|
+.buyBtn{
|
|
|
+ width: 690rpx;
|
|
|
+ height: 74rpx;
|
|
|
+ background: #D53533;
|
|
|
+ border-radius: 37rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 74rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin-top: 23rpx;
|
|
|
+ margin-left: 30rpx;
|
|
|
+}
|
|
|
+.buyShopRightJt{
|
|
|
+ width: 12rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+}
|
|
|
+.buyShopRight{
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.bugNUm{
|
|
|
+ border-top: 1px solid #EEEEEE;
|
|
|
+ border-Bottom: 1px solid #EEEEEE;
|
|
|
+ padding: 28rpx 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.buyXg{
|
|
|
+ width: 110rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ border: 1px solid #F19D01;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 36rpx;
|
|
|
+ color: #F19D01;
|
|
|
+ font-size: 24rpx;
|
|
|
+}
|
|
|
+.numJj{
|
|
|
+width: 44rpx;
|
|
|
+height: 44rpx;
|
|
|
+background: #F4F5F7;
|
|
|
+border-radius: 0px 6rpx 6rpx 0px;
|
|
|
+text-align: center;
|
|
|
+line-height: 44rpx;
|
|
|
+font-size: 30rpx;
|
|
|
+color: #F4F5F7;
|
|
|
+}
|
|
|
+.bugNUmLeft{
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.buySl{
|
|
|
+ color: #666666;font-size: 28rpx;padding-right: 30rpx;
|
|
|
+}
|
|
|
+.goodsnum{
|
|
|
+ width: 88rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ background: #F4F5F7;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin: 0 4rpx;
|
|
|
+}
|
|
|
+.numJsbox{
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.buyCont{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 648rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 26rpx 26rpx 0px 0px;
|
|
|
+}
|
|
|
+.buyNumBox{
|
|
|
+ padding: 30rpx;
|
|
|
+
|
|
|
+}
|
|
|
+.buyContCh{
|
|
|
+ position: absolute;
|
|
|
+ top: 53rpx;
|
|
|
+ right: 36rpx;
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.hotGoodsLine{
|
|
|
+ margin-top: 30rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ .hotGoodsLineImg{
|
|
|
+ width: 208rpx;
|
|
|
+ height: 194rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ border: 1px solid #EEEEEE;
|
|
|
+ }
|
|
|
+ .goodsName2{
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-overflow: -o-ellipsis-lastline;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ min-height: 80rpx;
|
|
|
+ width: 370rpx;
|
|
|
+ }
|
|
|
+ .hotGoodsLineRIght{
|
|
|
+ padding-left: 24rpx;
|
|
|
+ }
|
|
|
+ .goodsPrice{
|
|
|
+ display: flex;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ }
|
|
|
+ .goodsPrice11{
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #F03B3B;
|
|
|
+ padding-top: 8rpx;
|
|
|
+ }
|
|
|
+ .goodsPrice22{
|
|
|
+ font-size: 22rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #F03B3B;
|
|
|
+ padding-top: 8rpx;
|
|
|
+ padding-left: 5rpx;
|
|
|
+ }
|
|
|
+ .goodsPrice33{
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #F03B3B;
|
|
|
+ }
|
|
|
+ .goodsPrice44{
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ padding-top: 8rpx;
|
|
|
+ padding-left: 5rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+.bottomBox{
|
|
|
+ width: 750px;
|
|
|
+ height: 120rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px -2px 10px 0px rgba(153,153,153,0.2000);
|
|
|
+ position: fixed;left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.bottomTxt{
|
|
|
+ color: #666666;font-size: 22rpx;
|
|
|
+}
|
|
|
+.bottomImg{
|
|
|
+ width: 48rpx;height: 48rpx;
|
|
|
+}
|
|
|
+.bottomImgBox{
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ padding-left: 40rpx;
|
|
|
+}
|
|
|
+.bottomBtn{
|
|
|
+ width: 450rpx;
|
|
|
+ height: 74rpx;
|
|
|
+ background: #D53533;
|
|
|
+ border-radius: 37rpx;
|
|
|
+ line-height: 74rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 30rpx;
|
|
|
+ margin-top: 23rpx;
|
|
|
+ margin-left: 70rpx;
|
|
|
+}
|
|
|
+.goodsDetailTitle{
|
|
|
+ color: #333333;
|
|
|
+ line-height: 42px;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+}
|
|
|
+.goodsDetail{
|
|
|
+ margin-top: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.mealBox{
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+}
|
|
|
+.mealTopRight{
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+}
|
|
|
+.mealLine{
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.itemname{
|
|
|
+ width: 441rpx;
|
|
|
+ text-overflow: -o-ellipsis-lastline;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+}
|
|
|
+.itemline{
|
|
|
+ display: flex;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ line-height: 37rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
+}
|
|
|
+.itemlinebOX{
|
|
|
+ border-radius: 0px 0px 10px 10px;
|
|
|
+ border: 2Rpx solid #EEEEEE;
|
|
|
+ padding: 10rpx 0;
|
|
|
+}
|
|
|
+.mealTop{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 72rpx;
|
|
|
+ background: #F19D01 linear-gradient(90deg, #FFF7EB 0%, #FFEFD5 100%);
|
|
|
+ border-radius: 10rpx 10rpx 0px 0px;
|
|
|
+ line-height: 72rpx;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+}
|
|
|
+.fwlcTitle{
|
|
|
+ color: #333333;font-size: 30rpx;
|
|
|
+}
|
|
|
+.fuwuliucBox{
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+}
|
|
|
+.fwlcxian{
|
|
|
+ padding:30rpx 42rpx 20rpx 42rpx ;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.fwlcyuan{
|
|
|
+ width: 16rpx;
|
|
|
+ height: 16rpx;
|
|
|
+ background: #F03B3B;
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+.fwHx{
|
|
|
+ height: 4rpx;
|
|
|
+ background: #F03B3B;
|
|
|
+ width: 186rpx;
|
|
|
+ margin-top: 7rpx;
|
|
|
+}
|
|
|
+.fwTxt{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.fwTxtline{
|
|
|
+ color: #333333;
|
|
|
+ line-height: 37px;
|
|
|
+ font-size: 26rpx;
|
|
|
+}
|
|
|
.swiper{
|
|
|
width: 750rpx;
|
|
|
height: 700rpx;
|
