合并

MrShi

20 小时以前 56d7ebbc6297c306ec7197f29737a59703ca4bda

 mini-program/pages/details/details.vue

@@ -1,61 +1,105 @@
<template>
   <view class="details" v-if="info">
      <u-swiper :list="info.banner" height="375" @click="preview"></u-swiper>
      <view class="info">
         <view class="info-title">
            {{info.name}}
         </view>
         <view class="commodity-item-box-price">
            <view class="commodity-item-box-price-a">
               <text>{{info.minPrice[0]}}</text>
               <text>.{{info.minPrice[1]}}</text>
      <template v-if="info.isdeleted === 0">
         <u-swiper :list="info.banner" height="375" @click="preview"></u-swiper>
         <view class="info">
            <view class="info-title">
               {{info.name}}
            </view>
            <view class="commodity-item-box-price-b">
               原价¥{{info.price}}
            </view>
         </view>
         <view class="info-num">
            <text>已售 {{info.saleNum + info.realSaleNum}}+</text>
            <text>库存 {{info.stock}}</text>
         </view>
      </view>
      <view class="content">
         <view class="content-label">商品详情</view>
         <view class="content-val" v-html="info.content"></view>
      </view>
      <view style="width: 100%; height: calc(env(safe-area-inset-bottom) + 108rpx);"></view>
      <view class="footer">
         <view class="edit">
            <view class="edit-left">
               <view class="edit-left-row" @click="shoucang">
                  <image src="/static/icon/ic_collect_sel@2x.png" mode="widthFix" v-if="info.collectStatus === 1"></image>
                  <image src="/static/icon/ic_collect@2x.png" mode="widthFix" v-else></image>
                  <text>{{info.collectStatus === 1 ? '已收藏' : '收藏'}}</text>
            <view class="commodity-item-box-price">
               <view class="commodity-item-box-price-a">
                  <text>{{info.minPrice[0]}}</text>
                  <text>.{{info.minPrice[1]}}</text>
               </view>
               <view class="edit-left-row">
                  <button open-type="contact">客服</button>
                  <image src="/static/icon/detail_ic_kefu@2x.png" mode="widthFix"></image>
                  <text>客服</text>
               </view>
               <view class="edit-left-row" @click="toCard">
                  <image src="/static/icon/detail_ic_cart@2x.png" mode="widthFix"></image>
                  <text>购物车</text>
                  <view class="edit-left-row-num" v-if="cardObj && cardObj.cartTypeNum > 0">{{cardObj.cartTypeNum}}</view>
               <view class="commodity-item-box-price-b">
                  原价¥{{info.linePrice}}
               </view>
            </view>
            <view class="edit-btn">
               <view class="edit-btn-a" @click="addCard(info)">加入购物车</view>
               <view class="edit-btn-b" @click="submit">立即购买</view>
            <view class="info-num">
               <text>已售 {{info.shou}}+</text>
               <text>库存 {{info.stock}}</text>
            </view>
         </view>
         <view style="width: 100%; height: env(safe-area-inset-bottom);"></view>
      </view>
         <view class="content">
            <view class="content-label">商品详情</view>
            <view class="content-val">
               <u-parse :content="info.content"></u-parse>
            </view>
         </view>
         <view style="width: 100%; height: calc(env(safe-area-inset-bottom) + 108rpx);"></view>
         <view class="footer">
            <view class="edit">
               <view class="edit-left">
                  <view class="edit-left-row" @click="shoucang">
                     <image src="/static/icon/ic_collect_sel@2x.png" mode="widthFix" v-if="info.collectStatus === 1"></image>
                     <image src="/static/icon/ic_collect@2x.png" mode="widthFix" v-else></image>
                     <text>{{info.collectStatus === 1 ? '已收藏' : '收藏'}}</text>
                  </view>
                  <view class="edit-left-row">
                     <button open-type="contact">客服</button>
                     <image src="/static/icon/detail_ic_kefu@2x.png" mode="widthFix"></image>
                     <text>客服</text>
                  </view>
                  <view class="edit-left-row" @click="toCard">
                     <image src="/static/icon/detail_ic_cart@2x.png" mode="widthFix"></image>
                     <text>购物车</text>
                     <view class="edit-left-row-num" v-if="cardObj && cardObj.cartTypeNum > 0">{{cardObj.cartTypeNum}}</view>
                  </view>
               </view>
               <view class="edit-btn">
                  <template v-if="info.status === 0">
                     <!-- addCard(info) -->
                     <view class="edit-btn-a" @click="show = true">加入购物车</view>
                     <view class="edit-btn-b" @click="submit">立即购买</view>
                  </template>
                  <template v-else>
                     <view style="width: 250rpx; height: 88rpx;"></view>
                     <view class="edit-btn-c">商品已下架</view>
                  </template>
               </view>
            </view>
            <view style="width: 100%; height: env(safe-area-inset-bottom);"></view>
         </view>
      </template>
      <template v-else>
         <view class="wuImg">
            <image src="/static/images/default_empty.png" mode="widthFix"></image>
         </view>
      </template>
      <Login ref="login" />
      <u-popup :show="show" mode="bottom" round="20" closeable @close="show = false">
         <view class="cart">
            <view class="goods">
               <view class="goods-image">
                  <image :src="info.imgurl" mode="widthFix"></image>
               </view>
               <view class="goods-info">
                  <view class="commodity-item-box-price">
                     <view class="commodity-item-box-price-a">
                        <text>{{info.minPrice[0]}}</text>
                        <text>.{{info.minPrice[1]}}</text>
                     </view>
                     <view class="commodity-item-box-price-b">
                        原价¥{{info.linePrice}}
                     </view>
                  </view>
                  <view class="goods-info-kc">
                     库存 210
                  </view>
                  <u-number-box v-model="num"></u-number-box>
               </view>
            </view>
            <view class="cart-btn" @click="addCard(info)">加入购物车</view>
         </view>
      </u-popup>
   </view>
</template>

<script>
   import { mapState } from 'vuex'
   import Login from '@/components/login/login.vue'
   export default {
      components: { Login },
      computed: {
         ...mapState(['userInfo'])
      },
@@ -63,16 +107,27 @@
         return {
            id: null,
            info: null,
            cardObj: null
            cardObj: null,
            show: false,
            num: 1
         };
      },
      onLoad(option) {
         this.id = option.id
         this.getDetails()
         this.cardNum()
			
      },
      onShow() {
         if (this.userInfo) {
            this.cardNum()
         }
      },
      methods: {
         shoucang() {
            if (!this.userInfo) {
               this.$refs.login.open()
               return
            }
            if (this.info.collectStatus === 1) {
               this.$u.api.cancelbatch({ ids: this.info.id })
                  .then(res => {
@@ -90,6 +145,10 @@
            }
         },
         submit() {
            if (!this.userInfo) {
               this.$refs.login.open()
               return
            }
            let shop = [
               {
                  goodsNum: 1,
@@ -102,18 +161,27 @@
            })
         },
         addCard(e) {
            if (!this.userInfo) {
               this.$refs.login.open()
               return
            }
            this.$u.api.addCart({
               goodsId: e.id,
               goodsSkuId: e.skuResponsesList[0].id,
               num: 1
               goodsSkuId: e.goodsSkuResponseList[0].id,
               num: this.num
            }).then(res => {
               if (res.code === 200) {
                  this.cardNum()
                  uni.showToast({ title: '添加成功', icon: 'none' })
                  this.show = false
                  uni.showToast({ title: '添加成功', icon: 'success', mask: true })
               }
            })
         },
         toCard() {
            if (!this.userInfo) {
               this.$refs.login.open()
               return
            }
            uni.navigateTo({
               url: '/pages/shopping-cart/shopping-cart'
            })
@@ -134,18 +202,23 @@
            })
         },
         getDetails() {
            this.$u.api.goodsInfo({
               goodsId: this.id,
               memberId: this.userInfo ? this.userInfo.id : null,
            }).then(res => {
               if (res.code === 200) {
                  res.data.minPrice = res.data.minPrice.toFixed(2).split('.')
                  if (res.data.goodBannerMultiFiles && res.data.goodBannerMultiFiles.length > 0) {
                     res.data.banner = res.data.goodBannerMultiFiles.map(item => item.fileurlfull)
            try {
               this.$u.api.goodsInfo({
                  goodsId: this.id,
                  memberId: this.userInfo ? this.userInfo.id : null,
               }).then(res => {
                  if (res.code === 200) {
                     res.data.minPrice = res.data.minPrice.toFixed(2).split('.')
                     if (res.data.goodBannerMultiFiles && res.data.goodBannerMultiFiles.length > 0) {
                        res.data.banner = res.data.goodBannerMultiFiles.map(item => item.fileurlfull)
                     }
                     res.data.shou = (res.data.salenum  || 0) + (res.data.realSaleNum || 0)
                     this.info = res.data
                  }
                  this.info = res.data
               }
            })
               })
            } catch (err) {
               console.log(err)
            }
         }
      }
   }
@@ -159,6 +232,105 @@
<style lang="scss" scoped>
   .details {
      width: 100%;
      .cart {
         width: 100%;
         padding: 40rpx 30rpx;
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
         .goods {
            width: 100%;
            display: flex;
            align-items: center;
            .goods-image {
               flex-shrink: 0;
               margin-right: 30rpx;
               width: 200rpx;
               height: 200rpx;
               display: flex;
               align-items: center;
               justify-content: center;
               overflow: hidden;
               background: #FFFFFF;
               border-radius: 8rpx;
               border: 1rpx solid #EEEEEE;
               image {
                  width: 100%;
               }
            }
            .goods-info {
               flex: 1;
               height: 200rpx;
               display: flex;
               flex-direction: column;
               justify-content: space-between;
               .goods-info-kc {
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #999999;
               }
               .commodity-item-box-price {
                  width: 100%;
                  display: flex;
                  align-items: baseline;
                  margin-top: 8rpx;
                  .commodity-item-box-price-a {
                     display: flex;
                     align-items: baseline;
                     margin-right: 8rpx;
                     text {
                        &:nth-child(1) {
                           font-weight: bold;
                           font-size: 48rpx;
                           color: #E4001D;
                           &::before {
                              content: '￥';
                              font-weight: 400;
                              font-size: 26rpx;
                              color: #E4001D;
                           }
                        }
                        &:nth-child(2) {
                           font-weight: 400;
                           font-size: 26rpx;
                           color: #E4001D;
                        }
                     }
                  }
                  .commodity-item-box-price-b {
                     font-weight: 400;
                     font-size: 24rpx;
                     color: #999999;
                     text-decoration: line-through;
                  }
               }
            }
         }
         .cart-btn {
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            background: #004096;
            border-radius: 44rpx;
            font-weight: 500;
            font-size: 32rpx;
            color: #FFFFFF;
            margin-top: 80rpx;
         }
      }
      .wuImg {
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
         padding-top: 400rpx;
         box-sizing: border-box;
         image {
            width: 320rpx;
            height: 320rpx;
         }
      }
      .footer {
         width: 100%;
         position: fixed;
@@ -250,6 +422,17 @@
                  font-size: 30rpx;
                  color: #FFFFFF;
               }
               .edit-btn-c {
                  width: 200rpx;
                  height: 88rpx;
                  line-height: 88rpx;
                  text-align: center;
                  background: #999999;
                  border-radius: 44rpx;
                  font-weight: 500;
                  font-size: 30rpx;
                  color: #FFFFFF;
               }
            }
         }
      }