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.
 
 
 
 
high-mini/physical-merchants/classify/goodsDetail/goodsDetail.vue

906 lines
18 KiB

<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>&yen;{{goodsDetail.price || ''}}</text>
<text class="old">&yen;{{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=" font16">
选择
</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="font16 ">
保障
</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 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 class="nomore font13 backcor9">
———— 我是有底线的 ————
</view>
</view>
<!-- 底部购物车 -->
<view class="uni-container">
<view class="goods-carts">
<uniGoodsNav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
@buttonClick="buttonClick" />
</view>
</view>
<view class="h5_press_save" v-if="rightTopSrc" @click="rightTopSrc = ''">
<image :src="rightTopSrc" class="my_xing" mode="aspectFit"></image>
</view>
<ccShareMenu ref="share" :contentHeight="400" :shareList="shareList" @click="shareMenuClick"></ccShareMenu>
<!-- 选择类别 -->
<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 ccShareMenu from '@/components/cc-shareMenu/cc-shareMenu.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"
},
{
icon: 'redo',//icon-y
text: '分享',
},
],
rightTopSrc:'',
shareList: [{
type: 1,
icon: '/physical-merchants/static/img/link.png',
text: '复制链接'
},
{
type: 2,
icon: '/physical-merchants/static/img/placard.png',
text: '生成海报'
},
{
type: 3,
icon: '/physical-merchants/static/img/share_wechat.png',
text: '分享给好友'
},
],
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,
ccShareMenu,
},
onShow() {
if(app.globalData.userInfo){
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
// })
},
// 点击分享
shareMenuClick(item) {
let currentRoutes = getCurrentPages(); // 获取当前打开过的页面路由数组
let route = currentRoutes[currentRoutes.length - 1];
let str = app.globalData.h5url + '?accountId=0000016&key=&code=' + decodeURIComponent(route.$page
.fullPath);
if (item.type == 1) {
/* 复制链接*/
this.copyText(str);
} else if (item.type == 2) {
/* 生成海报*/
let obj = {
priceShop: '¥' + this.goodsDetail.originalPrice, //原价
headImgs: this.goodsDetail.bannerImg,
goodsName: this.goodsDetail.name,
goodsPrice: '¥' + this.goodsDetail.price, //现价
goLink: str,
recommendCodeGoods: '', //小程序码
}
// console.log(obj,"obj");
uni.navigateTo({
url: "/physical-merchants/classify/poster/poster?obj=" + encodeURIComponent(JSON.stringify(
obj))
})
} else if (item.type == 3) {
/* 分享给好友 */
// #ifdef H5
// console.log("点击了分享好友")
this.rightTopSrc="../../static/img/rightTop.png"
setTimeout(()=>{
this.rightTopSrc = ""
},4000)
// #endif
}
},
// 复制
copyText(text) {
// #ifdef H5
this.$copyText(text).then(
res => {
uni.showToast({
title: '复制成功'
})
}
)
// #endif
// #ifndef H5
uni.setClipboardData({
data: text,
success: () => {
uni.showToast({
title: '复制成功'
})
}
})
// #endif
},
// 客服,收藏,购物车图标点击事件
onClick(e) {
// 购物车
if (e.index == 0) {
// console.log("点击去购物车页面")
uni.navigateTo({
url: "/physical-merchants/classify/cart/cart"
})
return
}
if (e.index == 1) {
// console.log("点击分享")
this.$refs.share.toggleMask();
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>
.h5_press_save {
background-color: #000;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
z-index: 100;
image {
width:80px;
height: 80px;
object-fit: contain;
position:absolute;
top: 100px;
right: 60px;
}
}
@keyframes xing {
0% {
transform: scale(1);
}
25% {
transform: scale(1.4);
}
50% {
transform: scale(1);
}
75% {
transform: scale(1.4);
}
}
.my_xing {
-webkit-animation-name: xing;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2s;
}
// 修改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>