<template> <view class=""> <!-- 商品主图轮播 --> <view class="swiper-box" v-if="goodsDetail.bannerImg"> <swiper circular="true" :autoplay="false" style="height: 288px;" @change="swiperChange"> <swiper-item class="fotct" v-for="(swiper,index) in goodsDetail.bannerImg" :key="index"> <image mode="heightFix" style="height: 100%;" :src="swiper" @click="perImage(index,goodsDetail.bannerImg)"></image> </swiper-item> </swiper> <view class="indicator">{{currentSwiper+1}}/{{goodsDetail.bannerImg.length}}</view> </view> <!-- 商品信息 --> <view class="goods-container "> <!-- 商品信息 --> <view class="goods-message br bg-white marb10"> <view class="goods-price"> <text>¥{{goodsDetail.price}}</text> <text class="old">¥{{goodsDetail.originalPrice}}</text> </view> <view class="goods-title"> <view class="goods-text">{{goodsDetail.name || ''}}</view> <view class="goods-desc">{{goodsDetail.listDescribe || ''}}</view> </view> </view> <!-- 选择参数 --> <view class="br bg-white parameter width100 " @click="showPopup(1)"> <view class=" "> 选择 </view> <view class="color999 font14"> 规格 </view> <view class="icon-ymt to-right"></view> </view> <!-- 保障 --> <view class="br bg-white parameter width100 " @click="showPopup(2)"> <view class=" "> 保障 </view> <view class="color999 font14"> 破损包赔 · 假一赔四 · 退货运费险 </view> <view class="icon-ymt to-right"></view> </view> <!--评论--> <!-- <view class="br bg-white width100 marb10" @click="goComment"> <view class="parameter"> <view class="color999 " > 评论 </view> <view class=" " > </view> <view class="icon-ymt to-right"></view> </view> </view> --> <!-- 详情 --> <view class="font13 goods-desc-img br tc marb10 colorccc"> ———— 商品详情 ———— </view> <view style="font-size: 0;" > <image mode="widthFix" class="width100" v-for="(item,index) in goodsDetail.detailImg" :key="index" :src="item" @click="perImage(index,goodsDetail.detailImg)"> </image> </view> <noMore></noMore> </view> <!-- 底部购物车 --> <view class="uni-container"> <view class="goods-carts"> <uniGoodsNav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick" @buttonClick="buttonClick" /> </view> </view> <!-- 选择类别 --> <wybPopup ref="popup" zIndex="999" height="500" type="bottom" width="500" :scrollY="true" radius="6" :showCloseIcon="true"> <cart-choose :goodsDetail="goodsDetail" :status="status" @refreshCartNum="refreshCartNum" :specificationList="specificationList" @close="close"></cart-choose> </wybPopup> <!-- 保障 --> <wybPopup ref="popup2" type="bottom" width="500" :scrollY="true" radius="6" :showCloseIcon="true"> <view class="choose-detail baozhang-detail"> <view> <view class="baozhangTitle fontwig6 font16 mart10"> 破损包退 </view> <view class="baozhangDescDesc font13 mart10"> 签收72小时之内。发现商品破损或商品变形等,保存有限证件,商家24小时内响应并退款,诚信用户享受极速退款 </view> </view> <view> <view class="baozhangTitle fontwig6 font16 mart10"> 假一赔四 </view> <view class="baozhangDescDesc font13 mart10"> 正品保障,假一赔四 </view> </view> <view> <view class="baozhangTitle fontwig6 font16 mart10"> 七天无理由退换 </view> <view class="baozhangDescDesc font13 mart10"> 满足相应条件时,消费者可申请"七天无理由退换货" </view> </view> <view class="fcorfff baozhang-btn " @click="closeBaoZhang"> 我知道了 </view> </view> </wybPopup> </view> </template> <script> import noMore from '@/components/no-more/no-more.vue' import wybPopup from '@/components/wyb-popup/wyb-popup.vue' import cartChoose from '@/components/cart-choose/cart-choose.vue' import uniGoodsNav from '@/components/uni-goods-nav/components/uni-goods-nav/uni-goods-nav.vue' import { findGoodsDetailById, getShoppingCartList, insertShoppingCart, findGoodsSkuByGoodsId } from '@/Utils/physicalObject.js'; const app = getApp(); export default { data() { return { imageUrl: app.globalData.imgUrl, //图片地址 //轮播图下标 currentSwiper: 0, isStar: false, // options: [ // { // icon: 'chat', // text: '客服', // }, { // icon: 'shoucang31', // text: '收藏', // }, { icon: 'cart', text: '购物车', info: 0, color: "#646566" } ], buttonGroup: [{ text: '加入购物车', backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)', color: '#fff' }, { text: '立即购买', backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)', color: '#fff' } ], isShowCang: false, // scIcon:'shoucang31-select' // scIcon:'shoucang31' goodsId: 0, goodsDetail: {}, specificationList: [], // 0,加入购物车,1:加入购物车,直接购买,2:直接购买 status: 1 } }, watch: { isShowCang: function(n) { if (n) { this.options[1].icon = "shoucang31-select" } else { this.options[1].icon = "shoucang31" } return } }, onLoad(options) { this.goodsId = options.goodsId; this.findGoodsById(); }, components: { wybPopup, cartChoose, uniGoodsNav, noMore }, onShow() { this.refreshCartNum(); // if(this.options[1].shoucang == true){ // } // this.isStar=this.options[1].shoucang // 判断是否收藏了该物品 // this.isShowCang? }, methods: { // 刷新购物车数量 refreshCartNum() { getShoppingCartList().then(res => { if (res.return_code == '000000') { this.options[0].info = res.return_data.length; } else { uni.showToast({ title: res.return_msg, icon: 'none', duration: 2000 }) } }) }, findGoodsById() { let _this = this; let params = { id: _this.goodsId } uni.showLoading({ title: '加载中', mask: true, }); findGoodsDetailById(params).then(res => { setTimeout(()=>{ uni.hideLoading(); if (res.return_code == '000000') { this.goodsDetail = res.return_data; this.goodsDetail.bannerImg = res.return_data.bannerImg.split(",").map(temp => this .imageUrl + temp); this.goodsDetail.detailImg = res.return_data.detailImg.split(",").map(temp => this .imageUrl + temp); console.log(this.goodsDetail, ) // let list =item.map(temp=>this.imageUrl + temp) } else { uni.showToast({ title: res.return_msg, icon: 'none', duration: 2000 }) } },100) }) }, //显示弹出 showPopup(num) { if (num == 1) { //选择规格弹出 this.status = 1; this.findGoodsSku(this.goodsId); } else if (num == 2) { //保障弹出 this.$refs.popup2.show(); } }, //关闭选择参数 close() { this.$refs.popup.hide(); }, //关闭保障--我知道了 closeBaoZhang() { this.$refs.popup2.hide(); }, //查看大图 perImage(index, item) { uni.previewImage({ current: Number(index), //预览图片的下标 urls: item //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以 }) }, //轮播图指示器 swiperChange(event) { this.currentSwiper = event.detail.current; }, //点击去评论页面 goComment() { //要判断评论条数 // uni.navigateTo({ // url: "../goods-comment/goods-comment?gid=" + 1598348 // }) }, // 客服,收藏,购物车图标点击事件 onClick(e) { // 购物车 if (e.index == 0) { // console.log("点击去购物车页面") uni.navigateTo({ url: "/physical-merchants/classify/cart/cart" }) return } // 收藏 // if(e.index == 1){ // this.isShowCang = !this.isShowCang; // console.log("点击收藏") // return // } // 购物车 // if(e.index == 2){ // console.log("点击去购物车") // uni.navigateTo({ // url:"/physical-merchants/classify/cart/cart" // }) // return // } // uni.showToast({ // title: `点击${e.content.text}`, // icon: 'none' // }) }, //加入购物车,立即购买按钮点击事件 buttonClick(e) { this.findGoodsSku(this.goodsId); // 加入购物车 if (e.index == 0) { this.status = 0; // console.log("加入购物车") } else if (e.index == 1) { this.status = 2; // console.log("立即购买") } }, //加入购物车 toCart() { let params = { // goodsId:this.specificationList[this.chooseIndex].goodsId, // num:this.chooseNumber, // sku:this.specificationList[this.chooseIndex].id, // whetherCheck:true } // insertShoppingCart(params).then(async res=>{ // let title ; // if (res.return_code == '000000') { // title = res.return_data; // this.$emit("refreshCartNum") // }else{ // title = res.return_msg; // } // uni.showToast({ // title: title, // icon: 'none', // duration: 2000 // }) // this.$emit("close") // }) }, // 查询规格 findGoodsSku(id) { this.specificationList = []; let params = { goodsId: id }; findGoodsSkuByGoodsId(params).then(res => { if (res.return_code == '000000') { if (res.return_data && res.return_data.length > 0) { this.specificationList = res.return_data; this.$refs.popup.show(); } else { this.specificationList = []; } } else { uni.showToast({ title: res.return_msg, icon: 'none', duration: 2000 }) } }) }, } } </script> <style lang="scss" scoped> // 修改uni-goods-nav默认图标颜色 // 底部购物车 .goods-carts { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: column; position: fixed; left: 0; right: 0; /* #ifdef H5 */ left: var(--window-left); right: var(--window-right); /* #endif */ bottom: 0; } // 轮播图 .swiper-box { position: relative; width: 100%; swiper { width: 100%; swiper-item { image { width: 100%; } } } .indicator { display: flex; justify-content: center; align-items: center; padding: 0 25upx; height: 40upx; border-radius: 40upx; font-size: 22upx; position: absolute; bottom: 20upx; right: 20upx; color: #fff; background-color: rgba(0, 0, 0, 0.2); } } .tc { text-align: center; } .br { border-radius: 10rpx; box-sizing: border-box; padding: 20rpx; } .bg-white { background-color: #fff; } .price-tag { font-family: Arial; font-weight: bold; } //商品详情 .goods-container { padding: 20rpx 20rpx 60px; background-color: #F6F6F6; } .goods-price { font-family: Arial; font-weight: bold; color: red; font-size: 28px; .old { text-decoration: line-through; color: #CCCCCC; display: inline-block; padding-left: 20rpx; font-size: 20px; } } .goods-title { width: 100%; padding: 0 10rpx 0 0; // height: 140rpx; } .goods-title .goods-text { height: 50rpx; line-height: 50rpx; font-size: 30rpx; padding: 20rpx 0 10rpx; } .goods-title .goods-desc { height: 40rpx; line-height: 40rpx; font-size: 24rpx; color: #999999; } //选择参数 .parameter { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #F6F6F6; } .parameter:last-of-type { border-bottom: none } //popUp .choose-detail { position: relative; //保障 &.baozhang-detail { padding:30px 10px 10px; box-sizing: border-box; height:calc(100% - 100rpx); .baozhangTitle {} .baozhangDescDesc { color: #999999; } .baozhang-btn { position: fixed; bottom: 20rpx; width: calc(100% - 40rpx); height: 80rpx; line-height: 80rpx; border-radius: 40rpx; text-align: center; background: linear-gradient(to right, #FF8E01, #FD5100); } } //选择 // .choose-top { // display: flex; // align-items: center; // height: 160rpx; // color: red; // .choose-img { // width: 160rpx; // height: 160rpx; // border-radius: 20rpx; // } // .choose-price { // } // .choose-less-price { // display: inline-block; // height: 40rpx; // line-height: 40rpx; // padding:4rpx 10rpx; // color: white; // background-color:#F95100 ; // border-radius: 20rpx; // } // } // .choose-bottom { // .choose-bottom-title{ // } // .choose-select { // .choose-item{ // display: flex; // align-items: center; // height: 60rpx; // border-radius: 20rpx; // overflow: hidden; // background-color:#F6F6F6; // border:1px solid transparent; // width: fit-content; // .img{ // width: 60rpx; // height: 60rpx; // } // } // .choose-active{ // border-color: #F95100; // } // } // .choose-num{ // display: flex; // height: 60rpx; // justify-content: space-between; // align-items: center; // .choose-change{ // width: 240rpx; // background-color:#F4F4F4; // height: 100%; // border-radius: 30rpx; // display: flex; // .number{ // // width: 80rpx; // height: 60rpx; // line-height: 60rpx; // text-align: center; // color: #333333; // font-size: 30rpx; // } // .width140{ // width: 120rpx !important; // } // .wid25{ // width: 60rpx !important; // background-color:#f8f8f8 ; // border-radius: 30rpx; // } // } // } // } // .choose-cart{ // position: fixed; // bottom: 0; // width: calc(100% - 40rpx); // padding-bottom: 20rpx; // .choose-way{ // height: 60rpx; // width: 100%; // border-radius: 30rpx; // overflow: hidden; // display: flex; // align-items: center; // .way{ // width: 50%; // height: 60rpx; // line-height: 60rpx; // text-align: center; // } // .bgcolor-ri{ // background-color: #FD5100; // } // .bgcolor-left{ // background-color: #FF8E01; // } // } // } } //商品信息图片 .goods-desc-img {} </style>