|
|
|
|
<template>
|
|
|
|
|
<view class="product-con">
|
|
|
|
|
<view class="header">
|
|
|
|
|
<cu-custom :isBack="true" :isCenter="true" >
|
|
|
|
|
<block slot="backText">
|
|
|
|
|
<view class="backImg">
|
|
|
|
|
<image src="@/static/images/back-btn.png" mode=""></image>
|
|
|
|
|
</view>
|
|
|
|
|
</block>
|
|
|
|
|
</cu-custom>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- 商品轮播 -->
|
|
|
|
|
<product-con-swiper :imgUrls="imgUrls"></product-con-swiper>
|
|
|
|
|
|
|
|
|
|
<view class="tui-pro-detail">
|
|
|
|
|
<view class="activity-info-box">
|
|
|
|
|
<view class="tui-right__box">
|
|
|
|
|
<view class="acea-row row-middle row-center">
|
|
|
|
|
<view class="iconfont icon-kanjia"></view>
|
|
|
|
|
<text>砍价活动</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="count-down-box" v-if="goodsDetail.stopTime">
|
|
|
|
|
<count-down :isSecond="false" :datatime="goodsDetail.stopTime" :styleAllStyle="styleAllStyle" :timeTxtStyle="timeTxtStyle"></count-down>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="tui-pro-price">
|
|
|
|
|
<text class="tui-price">¥{{goodsDetail.minPrice}}</text>
|
|
|
|
|
<view class="tui-original-price">¥{{goodsDetail.price}}</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="tui-pro-title">{{ goodsDetail.title }}</view>
|
|
|
|
|
<view class="tui-pro-info">{{ goodsDetail.info }}</view>
|
|
|
|
|
<view class="tui-sale-info">
|
|
|
|
|
<view class="tips acea-row">
|
|
|
|
|
<view class="tip">甄选品牌</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view>库存：{{ goodsDetail.stock }}{{ goodsDetail.unitName }}</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="safeguard-info acea-row row-between-wrapper">
|
|
|
|
|
<view class="safeguard-item">
|
|
|
|
|
<image class="img" src="@/static/images/by.png" mode=""></image>
|
|
|
|
|
<view>满{{199}}包邮</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="line"></view>
|
|
|
|
|
<view class="safeguard-item">
|
|
|
|
|
<image class="img" src="@/static/images/fxt.png" mode=""></image>
|
|
|
|
|
<view>7天无理由</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="line"></view>
|
|
|
|
|
<view class="safeguard-item">
|
|
|
|
|
<image class="img" src="@/static/images/bj.png" mode=""></image>
|
|
|
|
|
<view>30天保价</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- 用户评价 -->
|
|
|
|
|
<!-- <view class="userEvaluation" v-if="replyCount">
|
|
|
|
|
<view class="title acea-row row-between-wrapper" @click="goEvaluateList(storeInfo.productId)">
|
|
|
|
|
<view class="acea-row row-middle"><text>评价</text><text class="replyCount">{{ replyCount }}</text></view>
|
|
|
|
|
<view @click="goEvaluateList(id)" class="praise acea-row row-middle">
|
|
|
|
|
<view>好评率{{ replyChance }}%</view>
|
|
|
|
|
<view class="jiantou-right"></view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<user-evaluation :reply="reply"></user-evaluation>
|
|
|
|
|
</view> -->
|
|
|
|
|
|
|
|
|
|
<view class="product-intro">
|
|
|
|
|
<view class="title">商品展示</view>
|
|
|
|
|
<view class="conter" v-html="goodsDetail.description"></view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view :style="addBottom?'height: 162rpx;':'height: 122rpx;'"></view>
|
|
|
|
|
<!--底部操作栏-->
|
|
|
|
|
<view class="tui-operation acea-row row-between" :style="addBottom?'height: 162rpx;':'height: 122rpx;'">
|
|
|
|
|
<view class="tui-operation-left acea-row row-between">
|
|
|
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
|
|
|
<button class="tui-operation-item" open-type="contact" hover-class="tui-opcity" :hover-stay-time="150">
|
|
|
|
|
<image src="@/static/images/service-icon.png" mode=""></image>
|
|
|
|
|
<view class="tui-operation-text">客服</view>
|
|
|
|
|
</button>
|
|
|
|
|
<!-- #endif -->
|
|
|
|
|
|
|
|
|
|
<view @click="goShoppingCart" class="tui-operation-item">
|
|
|
|
|
<image src="@/static/images/cart-icon.png" mode=""></image>
|
|
|
|
|
<view class="tui-operation-text">购物车</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<!-- <view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @click="setCollect">
|
|
|
|
|
<image v-if="userCollect" src="@/static/images/star-light.png" mode=""></image>
|
|
|
|
|
<image v-else src="@/static/images/star.png" mode=""></image>
|
|
|
|
|
<view class="tui-operation-text">{{userCollect?'已收藏':'收藏'}}</view>
|
|
|
|
|
</view> -->
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view class="tui-operation-right acea-row">
|
|
|
|
|
<view class="btn other-col" @click="openAlone">原价购买</view>
|
|
|
|
|
<view class="btn" @click="goDargain">发起砍价</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import ProductConSwiper from '@/components/ProductConSwiper';
|
|
|
|
|
import CountDown from '@/components/CountDown';
|
|
|
|
|
import { getBargainDetail } from '@/api/activity';
|
|
|
|
|
import { handleQrCode } from '@/utils/index'
|
|
|
|
|
export default {
|
|
|
|
|
components: {
|
|
|
|
|
ProductConSwiper,
|
|
|
|
|
CountDown,
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
addBottom: this.addBottom,
|
|
|
|
|
goodsDetail: {
|
|
|
|
|
minPrice: 0,
|
|
|
|
|
price: 0,
|
|
|
|
|
},
|
|
|
|
|
bargainId: 0,
|
|
|
|
|
bargainUid: 0,
|
|
|
|
|
imgUrls: [],
|
|
|
|
|
styleAllStyle: 'width:30rpx;height:24rpx;background:#F5F6F8;border-radius:8rpx;font-size:20rpx;color:#3A3A3C;line-height:24rpx;',
|
|
|
|
|
timeTxtStyle: 'font-size:20rpx;color:#F5F6F8;line-height:24rpx;padding:0rpx 4rpx;',
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
onLoad() {
|
|
|
|
|
let url = handleQrCode()
|
|
|
|
|
// bargainId 砍价商品id
|
|
|
|
|
// bargainUid 发起砍价人
|
|
|
|
|
if (url) {
|
|
|
|
|
// 通过二维码进来
|
|
|
|
|
this.bargainId = url.bargainId
|
|
|
|
|
// this.bargainUid = url.partake
|
|
|
|
|
} else {
|
|
|
|
|
// 正常途径进来
|
|
|
|
|
this.bargainId = this.$yroute.query.id
|
|
|
|
|
// this.bargainUid = this.$yroute.query.partake
|
|
|
|
|
}
|
|
|
|
|
// if (this.bargainUid == 0 || !this.bargainUid) {
|
|
|
|
|
// // url未携带用户uid，填上登录用户uid，跳转
|
|
|
|
|
// this.bargainUid = this.userInfo.uid
|
|
|
|
|
// }
|
|
|
|
|
this.getBargainDetail();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 获取产品详情
|
|
|
|
|
getBargainDetail() {
|
|
|
|
|
uni.showLoading({
|
|
|
|
|
title: '加载中',
|
|
|
|
|
mask: true,
|
|
|
|
|
})
|
|
|
|
|
getBargainDetail(this.bargainId).then(res => {
|
|
|
|
|
uni.hideLoading()
|
|
|
|
|
this.goodsDetail = res.data.bargain;
|
|
|
|
|
this.imgUrls.push(this.goodsDetail.image);
|
|
|
|
|
// console.log(this.goodsDetail);
|
|
|
|
|
this.goodsDetail.description = this.goodsDetail.description.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"');
|
|
|
|
|
this.goodsDetail.rule = this.goodsDetail.rule.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"');
|
|
|
|
|
}).catch(res => {
|
|
|
|
|
uni.hideLoading()
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: res.msg,
|
|
|
|
|
icon: 'none',
|
|
|
|
|
duration: 2000,
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
goShoppingCart() {
|
|
|
|
|
uni.setStorageSync('pathToCart', '/pages/activity/DargainGoodsDetails/index?id='+ this.bargainId +'&partake=0');
|
|
|
|
|
this.$yrouter.switchTab('/pages/shop/ShoppingCart/index');
|
|
|
|
|
},
|
|
|
|
|
// 单独购买
|
|
|
|
|
openAlone() {
|
|
|
|
|
this.$yrouter.push({
|
|
|
|
|
path: '/pages/shop/GoodsCon/index',
|
|
|
|
|
query: {
|
|
|
|
|
id: this.goodsDetail.productId,
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
goDargain() {
|
|
|
|
|
this.$yrouter.push({
|
|
|
|
|
path: "/pages/activity/DargainDetails/index",
|
|
|
|
|
query: { id: this.bargainId, partake: 0 }
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.header {
|
|
|
|
|
.tab-title {
|
|
|
|
|
font-size: 32rpx;
|
|
|
|
|
font-family: PingFang SC;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #2DB5AE;
|
|
|
|
|
line-height: 42rpx;
|
|
|
|
|
}
|
|
|
|
|
.backImg {
|
|
|
|
|
width: 88rpx;
|
|
|
|
|
height: 62rpx;
|
|
|
|
|
padding-left: 26rpx;
|
|
|
|
|
image {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tui-pro-detail {
|
|
|
|
|
margin: 8rpx 32rpx 20rpx;
|
|
|
|
|
width: 686rpx;
|
|
|
|
|
// height: 230rpx;
|
|
|
|
|
background: #F5F6F8;
|
|
|
|
|
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
|
|
|
|
|
border-radius: 16rpx;
|
|
|
|
|
padding: 24rpx;
|
|
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.activity-info-box {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0rpx;
|
|
|
|
|
right: 24rpx;
|
|
|
|
|
width: 220rpx;
|
|
|
|
|
height: 74rpx;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
.tui-right__box {
|
|
|
|
|
padding-top: 8rpx;
|
|
|
|
|
width: 188rpx;
|
|
|
|
|
height: 74rpx;
|
|
|
|
|
background: #2DB5AE;
|
|
|
|
|
border-radius: 0rpx 0rpx 16rpx 16rpx;
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
margin: 0rpx 16rpx;
|
|
|
|
|
font-size: 20rpx;
|
|
|
|
|
font-family: PingFang SC;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
line-height: 26rpx;
|
|
|
|
|
.iconfont.icon-kanjia {
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
line-height: 26rpx;
|
|
|
|
|
margin-right: 6rpx;
|
|
|
|
|
}
|
|
|
|
|
.count-down-box {
|
|
|
|
|
padding-top: 6rpx;
|
|
|
|
|
padding-left: 10rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tui-right__box::after {
|
|
|
|
|
width: 32rpx;
|
|
|
|
|
height: 32rpx;
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: -32rpx;
|
|
|
|
|
border-radius: 16rpx;
|
|
|
|
|
box-shadow: 16rpx -16rpx 0rpx #2DB5AE;
|
|
|
|
|
}
|
|
|
|
|
.tui-right__box::before {
|
|
|
|
|
width: 32rpx;
|
|
|
|
|
height: 32rpx;
|
|
|
|
|
content: "";
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: -32rpx;
|
|
|
|
|
border-radius: 16rpx;
|
|
|
|
|
box-shadow: -16rpx -16rpx 0rpx #2DB5AE;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tui-pro-price {
|
|
|
|
|
font-size: 48rpx;
|
|
|
|
|
font-family: Futura;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #3A3A3C;
|
|
|
|
|
line-height: 64rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
.tui-original-price {
|
|
|
|
|
padding-top: 18rpx;
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
font-family: Futura;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #999999;
|
|
|
|
|
line-height: 40rpx;
|
|
|
|
|
padding-left: 16rpx;
|
|
|
|
|
text-decoration: line-through;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tui-pro-title {
|
|
|
|
|
font-size: 34rpx;
|
|
|
|
|
font-family: SourceHanSansSCVF;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #3A3A3C;
|
|
|
|
|
line-height: 50rpx;
|
|
|
|
|
}
|
|
|
|
|
.tui-pro-info {
|
|
|
|
|
font-size: 20rpx;
|
|
|
|
|
font-family: SourceHanSansSCVF;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #999999;
|
|
|
|
|
line-height: 28rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tui-sale-info {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding-top: 16rpx;
|
|
|
|
|
font-size: 20rpx;
|
|
|
|
|
font-family: SourceHanSansSCVF;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: #999999;
|
|
|
|
|
line-height: 28rpx;
|
|
|
|
|
.tips {
|
|
|
|
|
padding-top: 4rpx;
|
|
|
|
|
.tip {
|
|
|
|
|
width: 80rpx;
|
|
|
|
|
height: 26rpx;
|
|
|
|
|
background: #2DB5AE;
|
|
|
|
|
border-radius: 6rpx;
|
|
|
|
|
margin-right: 4rpx;
|
|
|
|
|
font-size: 16rpx;
|
|
|
|
|
font-family: PingFang SC;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
line-height: 26rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-right: 20rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.safeguard-info {
|
|
|
|
|
width: 686rpx;
|
|
|
|
|
height: 120rpx;
|
|
|
|
|
background: #F5F6F8;
|
|
|
|
|
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
|
|
|
|
|
border-radius: 16rpx;
|
|
|
|
|
padding: 18rpx 0rpx;
|
|
|
|
|
margin: 0rpx 32rpx 20rpx;
|
|
|
|
|
.safeguard-item {
|
|
|
|
|
width: 226rpx;
|
|
|
|
|
font-size: 20rpx;
|
|
|
|
|
font-family: SourceHanSansSCVF;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #999999;
|
|
|
|
|
line-height: 28rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
.img {
|
|
|
|
|
width: 46rpx;
|
|
|
|
|
height: 46rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.line {
|
|
|
|
|
width: 2rpx;
|
|
|
|
|
height: 84rpx;
|
|
|
|
|
background-color: #979797;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tui-operation {
|
|
|
|
|
width: 100%;
|
|
|
|
|
position: fixed;
|
|
|
|
|
z-index: 100;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
background: #F1F1F1;
|
|
|
|
|
box-shadow: 0rpx -4rpx 38rpx 0rpx rgba(0,0,0,0.2);
|
|
|
|
|
border-radius: 28rpx 28rpx 0rpx 0rpx;
|
|
|
|
|
.tui-operation-left {
|
|
|
|
|
padding: 12rpx 28rpx;
|
|
|
|
|
width: 220rpx;
|
|
|
|
|
// width: 330rpx;
|
|
|
|
|
.tui-operation-item {
|
|
|
|
|
width: 60rpx;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
background: none;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
border: 0;
|
|
|
|
|
|
|
|
|
|
image {
|
|
|
|
|
width: 50rpx;
|
|
|
|
|
height: 50rpx;
|
|
|
|
|
}
|
|
|
|
|
&:after {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
.tui-operation-text {
|
|
|
|
|
font-size: 20rpx;
|
|
|
|
|
font-family: PingFang SC;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
color: #3A3A3C;
|
|
|
|
|
line-height: 22rpx;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.tui-operation-right {
|
|
|
|
|
padding-top: 18rpx;
|
|
|
|
|
padding-right: 18rpx;
|
|
|
|
|
.btn {
|
|
|
|
|
width: 186rpx;
|
|
|
|
|
height: 66rpx;
|
|
|
|
|
background: #2DB5AE;
|
|
|
|
|
border-radius: 16rpx;
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
font-family: PingFang SC;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
line-height: 66rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-right: 14rpx;
|
|
|
|
|
}
|
|
|
|
|
.other-col {
|
|
|
|
|
background: #98DAD7;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
