<template> <view class="pages"> <!-- head --> <view class="scrollPage-header"> <view :style="{height:statusBarHeight+'px'}"></view> <view class="header-title"> <view class="header-left" @click="goBack"> <uni-icons type="arrowleft" size="20"></uni-icons> <text>{{isShare?'首页':'返回'}}</text> </view> <view class="header-right"></view> </view> </view> <!-- 内容 --> <view class="scrollPage-content"> <view class="product-info" v-if="detail"> <view :style="{height:statusBarHeight+'px'}"></view> <u-swiper mode="number" :border-radius="0" img-mode="aspectFit" :interval="3000" :height="450" :list="imgList" @click="viewImg"></u-swiper> <view class="product-info-text"> <view class="product-info-text-title"> {{detail.productName}} <!-- <view class="copyText" @click="copy(detail.productName)">复制</view> --> <uni-tag style="margin-left: 10px;" size="mini" :circle="true" v-if="detail.status==0 || detail.dealerScopeFlag==0" :text="detail.status==0?'已下架':'已售罄'"></uni-tag> </view> <view class="product-info-text-attr"> <view class="product-info-price flex align_center" v-if="!hasLogin"> ¥*** </view> <view class="flex align_center" v-else> <view class="product-info-price"> ¥<text>{{detail.priceStr[0]}}</text>.{{detail.priceStr[1]}} </view> <view class="flex align_center rebate-tag" v-if="detail.promoType=='BUY_PROD_GIVE_VALID'"> 返<text>{{detail.resultValue}}</text>元 </view> <view class="flex align_center rebate-tag" v-if="detail.promoType=='BUY_PROD_GIVE_PROD'"> 买{{detail.conditionValue}}赠{{detail.resultValue}} </view> <view class="flex align_center tejia-tag" v-if="detail.promoType=='PROMO_PROD'"> 特价<text>¥{{detail.orginPrice}}</text> </view> </view> <view class="product-info-nums"> <view class="share"> <button open-type="share"><u-icon :size='24' name="zhuanfa"></u-icon> 分享</button> </view> </view> </view> </view> </view> <u-divider bg-color="">商品详情</u-divider> <view class="product-info-guige" v-if="detail&&detail.product"> <view class="row">品牌:<text>{{detail.product.productBrandName||'--'}}</text></view> <view class="row">原厂编码:<text>{{detail.product.origCode||'--'}} </text> <view class="copyText" v-if="detail.product.origCode" @click="copy(detail.product.origCode)">复制</view></view> <view class="row">产品编码:<text>{{detail.product.code||'--'}}</text> <view class="copyText" v-if="detail.product.code" @click="copy(detail.product.code)">复制</view></view> <view class="row">条形码:<text>{{detail.product.qrCode||'--'}}</text> <view class="copyText" v-if="detail.product.qrCode" @click="copy(detail.product.qrCode)">复制</view></view> <view class="row-ban">商品尺寸:<text>{{detail.product.size||'--'}}</text></view> <view class="row-ban">计量单位:<text>{{detail.product.unit||'--'}}</text></view> <view class="row-ban">重量:<text>{{detail.product.weight||'--'}}</text></view> <view class="row-ban">包装数:<text>{{ (detail.product.packQty) || '--' }}{{ detail.product.packQty ? detail.product.unit : '' }}/{{ detail.product.packQtyUnit||'--' }}</text></view> </view> <view class="product-info-content"> <rich-text v-if="detail && detail.product && detail.product.description" :nodes="detail.product.description"></rich-text> <view v-else style="font-size: 12px;color: #999;text-align: center;">暂无产品介绍</view> </view> </view> <!-- 底部栏 --> <view class="scrollPage-footer"> <view class="scrollPage-footer-box"> <view class="footer-left"> <view v-if="isShare" class="footer-left-item" @click="goBack"> <u-icon :size='50' color="#666" name="home"></u-icon> <text class="footer-left-item-text">首页</text> </view> <view class="footer-left-item" @click="toCart"> <u-icon :size='50' color="#666" name="shopping-cart"></u-icon> <text class="footer-left-item-text">购物车</text> <text class="badge" v-if="totalNum">{{totalNum>99?'99+':totalNum}}</text> </view> </view> <view class="footer-right"> <view class="footer-right-item" @click="addCart($event)"> <text>加入购物车</text> </view> <view class="footer-right-item" @click="toBuy"> <text>立即购买</text> </view> </view> </view> <view :style="{height:safeAreaBottom+'px'}"></view> </view> <!-- 购物车动画 --> <uni-cart-animation ref="cartAnimation" @animationfinish="animationfinish"></uni-cart-animation> <!-- 立即购买 --> <page-container :show="showPopu" :round="true" :z-index="100" position="center" customStyle="right: 0; left: 0; top: 0; bottom: 0; margin: auto 10%;width: fit-content;height: fit-content;border-radius:15px;" @afterleave="closePopu"> <view class="popu-content" v-if="detail"> <view class="popu-close" @click="showPopu=false"> <uni-icons size="26" type="closeempty"></uni-icons> </view> <view class="pupu-box"> <view class="popu-content-img"> <image style="width: 80px; height: 80px;" mode="aspectFit" :src="detail.productMsg||'/static/def_imgs.png'"></image> </view> <view class="popu-content-info"> <view class="popu-content-info-title"> <text class="ellipsis-two">{{detail.productName}}</text> </view> <view class="popu-content-box"> <view class="popu-content-price" v-if="hasLogin"> ¥<text>{{detail.priceStr[0]}}</text>.{{detail.priceStr[1]}} </view> <view class="popu-content-price" v-else>¥***</view> <view class="flex align_center rebate-tag" v-if="hasLogin&&detail.promoType=='BUY_PROD_GIVE_VALID'"> 返<text>{{detail.resultValue}}</text>元 </view> <view class="flex align_center rebate-tag" v-if="hasLogin&&detail.promoType=='BUY_PROD_GIVE_PROD'"> 买{{detail.conditionValue}}赠{{detail.resultValue}} </view> <view class="flex align_center tejia-tag" v-if="hasLogin&&detail.promoType=='PROMO_PROD'"> 特价<text>¥{{detail.orginPrice}}</text> </view> </view> <view class="popu-content-num flex align_center justify_between"> <text>数量</text> <uni-number-box v-model="qty" :input-width="150" :input-height="60" :min="1" :max="999"></uni-number-box> </view> </view> </view> <view class="pupu-box gift-box" v-if="giftNum"> <view class="popu-content-img"> <image style="width: 50px; height: 50px;" mode="aspectFit" :src="detail.productMsg||'/static/def_imgs.png'"></image> </view> <view class="popu-content-info"> <view class="popu-content-info-title flex align_center"> <view class="flex align_center rebate-tag"> 赠品 </view> <text class="ellipsis-two">{{detail.productName}}</text> </view> <view class="popu-content-box justify_between"> <view></view> <view class="popu-content-num flex align_center"> <text>X</text> {{giftNum}} </view> </view> </view> </view> <view class="popu-content-btn"> <view class="popu-content-btn-item cancelBtn" @click="showPopu=false">取消</view> <view class="popu-content-btn-item okbtn" @click="toBuy">确定采购</view> </view> </view> </page-container> </view> </template> <script> import { mapState, mapMutations, } from 'vuex' import { addCart, getCartCount } from '@/api/cart.js' import { getShopDetail } from '@/api/shop.js' import { purchaseSave, purchaseCheck } from '@/api/purchase.js' import { toAuthStore, toLogin } from "@/utils/index.js" export default { data() { return { loading: false, showPopu: false, // 弹框 statusBarHeight: 0, // 状态栏高度 safeAreaBottom: 0, // 底部安全区域高度 imgList: [], shopProductSn: null, detail: null, qty: 1,// 数量 isShare: false ,// 是否从分享打开的 busPos:{ x: 10, y:uni.getSystemInfoSync().windowHeight - 30 } } }, onLoad(option) { this.isShare = !!option.share // 计算安全区域 this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight this.safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom this.shopProductSn = option.sn // 获取产品详情 this.getDetail() }, // 分享 onShareAppMessage(e){ return { title: this.detail ? this.detail.productName : '商品名称', path: '/pagesB/shopiing/productDetail?sn='+this.shopProductSn+'&share=1', imageUrl:this.detail ? this.detail.productMsg : '', type: '1' } }, computed: { ...mapState(['hasLogin']), // 登录用户信息 userInfo(){ return this.$store.state.vuex_userInfo }, totalNum(){ return this.hasLogin&&this.userInfo.sysUserFlag == '1' ? this.$store.state.vuex_cartTotal : 0 }, // 赠品数量 giftNum(){ return this.detail && this.detail.promoType=='BUY_PROD_GIVE_PROD' ? Math.floor(this.qty / this.detail.conditionValue)*this.detail.resultValue : 0 } }, methods: { // 返回 goBack(){ if(this.isShare){ uni.reLaunch({ url: '/pages/index/index' }) }else{ uni.navigateBack() } }, // 复制 copy(text){ uni.setClipboardData({ data: text, }) }, viewImg(index){ uni.previewImage({ urls: this.imgList }) }, // 产品详情 getDetail(){ uni.showLoading({ title: '加载中' }) const storeShelf = this.$store.state.vuex_storeShelf const dealerSn = this.hasLogin && this.userInfo && this.userInfo.sysUserFlag == '1'&&storeShelf ? storeShelf.dealerSn : '' // 获取产品详情 getShopDetail({ shopProductSn: this.shopProductSn, dealerSn: dealerSn }).then(res => { if(res.status == 200){ this.detail = res.data if(res.data){ if(res.data.productPicList){ res.data.productPicList.forEach(item => { this.imgList.push(item.imageUrl||'/static/def_imgs.png') }) }else{ this.imgList.push(res.data.productMsg||'/static/def_imgs.png') } const a = res.data.shopPromoProduct let bprice = res.data.price if(a){ res.data.promoType = a.promoType res.data.resultValue = a.resultValue res.data.conditionValue = a.conditionValue res.data.discountType = a.discountType res.data.promoProductSn = a.promoProductSn res.data.promoSn = a.promoSn // 特价 if(res.data.promoType=='PROMO_PROD'){ res.data.orginPrice = res.data.price // 直降 if(res.data.discountType == 'STRAIGHT_DOWN'){ bprice = res.data.price - res.data.resultValue } // 折扣 if(res.data.discountType == 'DISCOUNT'){ bprice = Number(res.data.price * res.data.resultValue).toFixed(2) } } } res.data.priceStr = Number(bprice).toFixed(2).toString().split('.') } } uni.hideLoading() }) }, animationfinish(){ this.loading = false }, // 加入购物车 addCart(event){ if(this.hasLogin){ // 游客未认证 if(this.userInfo.sysUserFlag == '0'){ toAuthStore() }else{ if(this.loading){ return } this.loading = true this.$refs.cartAnimation.touchOnGoods(event,this.busPos); // 加入购物车 addCart({ qty: 1, price: this.detail.price, productSn: this.detail.productSn }).then(res => { if(res.status == 200){ uni.$emit('refashCart') } }) } }else{ toLogin() } }, // 打开购物车 toCart(){ if(this.hasLogin){ // 游客未认证 if(this.userInfo.sysUserFlag == '0'){ toAuthStore() }else{ uni.navigateTo({ url: '/pagesB/cart/index' }) } }else{ toLogin() } }, // 立即购买 toBuy(){ if(this.hasLogin){ // 游客未认证 if(this.userInfo.sysUserFlag == '0'){ toAuthStore() }else{ if(this.detail.status==0 || this.detail.dealerScopeFlag==0){ uni.showToast({ title: '此商品已'+(this.detail.status==0?'下架':'售罄'), icon: 'none' }) }else{ // 打开数量选择弹框 if(!this.showPopu){ this.showPopu = true }else{ // 提交 this.submitOrder() } } } }else{ toLogin() } }, // 去结算 submitOrder(){ uni.showLoading({ title: '提交中...', mask: true }) const _this = this purchaseCheck({detailList: [{ productSn:this.detail.productSn, productCode:this.detail.productCode, qty: this.qty, price:this.detail.price, }]}).then(res => { uni.hideLoading() if(res.status == 200){ const successList = res.data.successList.map(item => { return { productSn:item.productSn, productCode: item.productCode, qty: item.qty, price:item.price } }) const removeList = res.data.removeList.map(item => item.productCode) const selloutList = res.data.selloutList.map(item => item.productCode) // 有已下架或已售罄产品提示 if(removeList.length || selloutList.length){ uni.showModal({ title: '提示', content: (removeList.length ? `产品${removeList.join(',')}已下架,`:'')+(selloutList.length?`产品${selloutList.join(',')}已售罄,`:'')+`不可采购。`+(successList.length?'是否继续采购其他产品?':''), showCancel: successList.length, confirmText: successList.length?'确定':'知道了', success(ret) { if(ret.confirm && successList.length){ _this.submitForm(successList) } } }) }else{ // 直接提交 _this.submitForm(successList) } }else{ uni.showToast({ title: res.message, icon: 'none' }) } }) }, submitForm(detailList){ uni.showLoading({ title: '提交中...', mask: true }) purchaseSave({ detailList: detailList }).then(res => { if(res.status == 200){ res.data.detailList = [] this.$store.state.vuex_tempData = res.data this.showPopu = false this.submitOk = true }else{ uni.hideLoading() uni.showToast({ title: res.message, icon: 'none' }) } }) }, // 关闭后 closePopu(){ this.showPopu = false this.qty = 1 if(this.submitOk){ uni.navigateTo({ url: "/pagesB/procureOrder" }) } setTimeout(()=>{ uni.hideLoading() },300) }, } } </script> <style lang="less"> .pages { height: 100vh; display: flex; flex-direction: column; .scrollPage-header{ z-index: 1; width: 100%; position:fixed; left: 0; top: 0; .header-title{ display: flex; align-items: center; justify-content: space-between; padding: 0 10px; height: 44px; .header-left{ display: flex; align-items: center; text{ font-size: 14px; color: #333333; } background-color: rgba(255,255,255,0.6); box-shadow: 0px 1px 0px 0px #E6E6E6; border-radius: 50px; padding: 3px 6px 3px; } .header-right{ width: 50px; } } } .copyText{ background-color: #efefef; border-radius: 100rpx; padding: 0 20rpx; color: #03A9F4; font-size: 20rpx; display: inline-block; margin-left: 20rpx; height: 44rpx; line-height: 44rpx; } .scrollPage-content{ flex: 1; overflow-y: auto; .product-info{ background:#fff; margin-bottom: 10px; .product-info-text{ padding: 10px; .product-info-text-title{ font-weight: bold; color: #333333; line-height: 22px; margin-bottom: 5px; } .product-info-text-attr{ display: flex; align-items: center; justify-content: space-between; .product-info-price{ color: red; display: flex; align-items: baseline; font-size: 12px; text{ font-size: 38rpx; } } .product-info-nums{ font-size: 12px; color: #999999; >view{ display: flex; align-items: center; } .share{ button{ width: auto; padding: 0; border: 0; background: none; line-height: normal; margin: 0; display: inline; font-size: 12px; color: #999; &::after{ border:none; } /deep/ .u-icon{ margin-right: 3px; } } } } } } } .product-info-guige{ display: flex; flex-wrap: wrap; justify-content: space-between; background:#fff; margin: 10px 0; padding: 10px; line-height: 28px; .row{ width: 100%; } .row-ban{ width: 50%; } >view{ color: #999; text{ color: #333333; } } } .product-info-content{ background:#fff; margin-bottom: 10px; padding: 10px; line-height: 28px; } } .rebate-tag{ background: #ffe7df; color: #E91E63; padding: 2px 5px; font-size: 10px; border-radius: 3px; margin-left: 6px; } .tejia-tag{ color: #E91E63; margin-left: 6px; font-size: 12px; text{ font-size: 12px; color: #999; margin-left: 5px; text-decoration: line-through; } } .scrollPage-footer{ background-color: #FFFFFF; width: 100%; position: fixed; left: 0; bottom: 0; .scrollPage-footer-box{ display: flex; align-items: center; justify-content: space-between; height: 50px; } .footer-left{ display: flex; align-items: center; justify-content: space-between; width: 35%; .footer-left-item{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 15px; position: relative; .footer-left-item-text{ font-size: 12px; color: #666666; } .badge{ background: #f44336; color: #fff; position: absolute; right: 5px; top: -8px; font-size: 12px; display: flex; align-items: center; justify-content: center; border-radius: 50rpx; padding: 0 10rpx; } } } .footer-right{ width: 60%; height: 100%; display: flex; align-items: center; .footer-right-item{ height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50%; font-size: 14px; color: #FFFFFF; } .footer-right-item:first-child{ background-color: #FF9900; } .footer-right-item:last-child{ background-color: #FF0000; } } } .popu-content{ display: flex; flex-direction: column; align-items: center; padding: 10px 15px; .popu-close{ padding: 10px; position: absolute; right: 0; top: 0; } .pupu-box{ display: flex; justify-content: space-between; margin-top: 35px; width: 100%; } .popu-content-img{ border-radius: 6px; border: 1px solid #eee; overflow: hidden; width: 80px; height: 80px; } .popu-content-info{ padding: 0 0 0 10px; flex-grow: 1; overflow: hidden; width: 50%; .popu-content-info-title{ font-size: 14px; } } .gift-box{ padding-left: 8%; margin-top: 10px; border-top: 1px solid #eee; padding-top: 10px; .popu-content-info-title{ font-size: 12px; color: #666; } .popu-content-box{ margin-top: 6px; } .rebate-tag{ margin: 0 5px 0 0; background: #ff0000; color: #fff; width: 40px; flex-grow: 1; display: flex; justify-content: center; } } .popu-content-box{ display: flex; align-items: baseline; margin-top: 5px; .popu-content-price{ color: red; display: flex; align-items: baseline; font-size: 12px; text{ font-size: 38rpx; } } } .popu-content-num{ font-size: 12px; color: #999999; padding: 10px 0; > text{ margin-right: 10px; font-size: 10px; } } .popu-content-btn{ width: 100%; display: flex; align-items: center; justify-content: space-around; margin: 20px 0 10px; .popu-content-btn-item{ width: 45%; height: 36px; font-size: 14px; display: flex; align-items: center; justify-content: center; border-radius: 100px; } .cancelBtn{ background-color: #f8f8f8; color: #666; } .okbtn{ background-color: #f70000; color: #FFFFFF; } } } } </style>