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.
508 lines
13 KiB
508 lines
13 KiB
<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" v-if="tempName || goodsDetail.config"> |
|
<view class="safeguard-item" v-if="tempName"> |
|
<image class="img" src="@/static/images/by.png" mode=""></image> |
|
<view class="line1">{{tempName}}</view> |
|
</view> |
|
<view class="safeguard-item" v-for="(item,index) in goodsDetail.config" :key="index"> |
|
<image class="img" :src="item.configuration" mode=""></image> |
|
<view class="line1">{{item.content}}</view> |
|
</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"> |
|
<mp-html id="article" :setTitle="false" :lazy-load="true" :copy-link="false" :tag-style="tagStyle" |
|
:content="goodsDetail.description" @linktap="linktap" /> |
|
</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 class="entry-mask" v-show="showEntry" @touchmove.stop.prevent @click="closeEntry"> |
|
<view class="entry-box"> |
|
<scroll-view scroll-y="true" style="height: 310rpx;"> |
|
<view class="entry"> |
|
{{entryInfo.entryInfo}} |
|
</view> |
|
</scroll-view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import ProductConSwiper from '@/components/ProductConSwiper'; |
|
import CountDown from '@/components/CountDown'; |
|
import { getBargainDetail } from '@/api/activity'; |
|
import { getEntry } from '@/api/store' |
|
import { handleQrCode } from '@/utils/index' |
|
export default { |
|
components: { |
|
ProductConSwiper, |
|
CountDown, |
|
}, |
|
data() { |
|
return { |
|
addBottom: this.addBottom, |
|
goodsDetail: { |
|
minPrice: 0, |
|
price: 0, |
|
stock: '', |
|
unitName: '', |
|
}, |
|
bargainId: 0, |
|
bargainUid: 0, |
|
imgUrls: [], |
|
tempName: '', |
|
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;', |
|
entryInfo: {}, |
|
showEntry: false, |
|
tagStyle: { |
|
a: 'color:#0A59F7;text-decoration:underline;', |
|
img: 'padding:0;margin:0;font-size:0;display:block;' |
|
}, |
|
subType:true |
|
}; |
|
}, |
|
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;"'); |
|
this.tempName = res.data.tempName; |
|
}).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() { |
|
let isParticipation=JSON.parse(this.$yroute.query.isParticipation) |
|
if(this.subType && !isParticipation) { |
|
let tmplIds = ['iUviwf1eQoQ2BGXdCQx7ki_EAj_4e4v1eLI5IeUbT_0']; |
|
uni.requestSubscribeMessage({ |
|
tmplIds, |
|
success:res=> { |
|
this.subType=false |
|
this.$yrouter.push({ |
|
path: "/pages/activity/DargainDetails/index", |
|
query: { id: this.bargainId, partake: 0 } |
|
}); |
|
}, |
|
fail(err) { |
|
console.log("requestSubscribeMessage err", err) |
|
} |
|
|
|
}) |
|
}else{ |
|
this.$yrouter.push({ |
|
path: "/pages/activity/DargainDetails/index", |
|
query: { id: this.bargainId, partake: 0 } |
|
}); |
|
} |
|
|
|
}, |
|
linktap(e) { |
|
// console.log('description', e.innerText); |
|
if (e.innerText == this.entryInfo.entryName) { |
|
this.showEntry = true; |
|
return; |
|
} |
|
getEntry({ |
|
name: e.innerText |
|
}).then(res => { |
|
this.entryInfo = res.data; |
|
this.showEntry = true; |
|
}) |
|
}, |
|
closeEntry() { |
|
this.showEntry = false; |
|
}, |
|
} |
|
} |
|
</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 { |
|
flex: 1; |
|
// width: 226rpx; |
|
height: 84rpx; |
|
border-right: 2rpx solid #979797; |
|
font-size: 20rpx; |
|
font-family: SourceHanSansSCVF; |
|
font-weight: 600; |
|
color: #999999; |
|
line-height: 28rpx; |
|
text-align: center; |
|
.img { |
|
width: 46rpx; |
|
height: 46rpx; |
|
margin-top: 2rpx; |
|
} |
|
} |
|
.safeguard-item:last-child { |
|
border-right: 0; |
|
} |
|
// .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>
|
|
|