You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
741 lines
14 KiB
741 lines
14 KiB
<template>
|
|
<view class="">
|
|
<!-- 商品主图轮播 -->
|
|
<view class="swiper-box">
|
|
<swiper circular="true" :autoplay="false" style="height: 188px;" @change="swiperChange">
|
|
<swiper-item class="fotct" v-for="(swiper,index) in goodsDetail.bannerImg" :key="index">
|
|
<image mode="heightFix" :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="color999 ">
|
|
选择
|
|
</view>
|
|
<view class=" ">
|
|
规格
|
|
</view>
|
|
<view class="icon-ymt to-right"></view>
|
|
</view>
|
|
<!-- 保障 -->
|
|
<view class="br bg-white parameter width100 " @click="showPopup(2)">
|
|
<view class="color999 ">
|
|
保障
|
|
</view>
|
|
<view class=" ">
|
|
破损包赔 · 假一赔四 · 退货运费险
|
|
</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="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="key"
|
|
: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" 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 '@/pages/classify/no-more/no-more.vue'
|
|
import wybPopup from '../../../components/wyb-popup/wyb-popup.vue'
|
|
|
|
import cartChoose from '@/pages/classify/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: null,
|
|
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 => {
|
|
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
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
|
|
//显示弹出
|
|
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: "/pages/classify/cart/cart"
|
|
})
|
|
return
|
|
|
|
}
|
|
// 收藏
|
|
// if(e.index == 1){
|
|
// this.isShowCang = !this.isShowCang;
|
|
// console.log("点击收藏")
|
|
// return
|
|
|
|
// }
|
|
// 购物车
|
|
// if(e.index == 2){
|
|
// console.log("点击去购物车")
|
|
// uni.navigateTo({
|
|
// url:"/pages/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;
|
|
border-bottom: 1px solid #F6F6F6;
|
|
}
|
|
|
|
.parameter:last-of-type {
|
|
border-bottom: none
|
|
}
|
|
|
|
//popUp
|
|
.choose-detail {
|
|
position: relative;
|
|
padding: 20rpx;
|
|
|
|
//保障
|
|
&.baozhang-detail {
|
|
padding-top: 30px;
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
|
|
.baozhangTitle {}
|
|
|
|
.baozhangDescDesc {
|
|
color: #999999;
|
|
}
|
|
|
|
.baozhang-btn {
|
|
position: fixed;
|
|
bottom: 20rpx;
|
|
width: calc(100% - 40rpx);
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
border-radius: 30rpx;
|
|
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>
|
|
|