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.
515 lines
13 KiB
515 lines
13 KiB
<template> |
|
<view> |
|
<view class="header"> |
|
<cu-custom :isBack="true" :isCenter="true" :hasShadow="true"> |
|
<block slot="backText"> |
|
<view class="backImg"> |
|
<image src="@/static/images/back-btn.png" mode=""></image> |
|
</view> |
|
</block> |
|
<block slot="content"> |
|
<view class="tab-title">甄选测评</view> |
|
</block> |
|
</cu-custom> |
|
</view> |
|
|
|
<view class="synopsis-box acea-row" v-if="info.synopsis"> |
|
<view class="left-circle"></view> |
|
<view class="info"> |
|
<!-- <text>甄选评测介绍</text> -->{{' ' + info.synopsis}} |
|
</view> |
|
<image src="../../../../static/images/evaluation-icon.png" mode=""></image> |
|
</view> |
|
|
|
<view class="video-box" v-if="info.videoInput"> |
|
<video |
|
id="myVideo" |
|
:src="info.videoInput" |
|
@error="videoErrorCallback" |
|
:show-center-play-btn="true" |
|
:show-play-btn="true" |
|
:show-mute-btn="true" |
|
controls |
|
></video> |
|
<!-- picture-in-picture-mode="{{['push', 'pop']}}" |
|
bindenterpictureinpicture='bindVideoEnterPictureInPicture' |
|
bindleavepictureinpicture='bindVideoLeavePictureInPicture' --> |
|
</view> |
|
|
|
<view class="productInfo-box acea-row row-between" v-if="info.productInfo"> |
|
<image :src="info.productInfo.image" mode="aspectFill"></image> |
|
<view class="right-text"> |
|
<view class="name line1">{{info.productInfo.storeName}}</view> |
|
<view class="info line1">{{info.productInfo.storeInfo}}</view> |
|
<view class="acea-row row-between"> |
|
<view class="price-box"> |
|
<view class="price">¥{{info.productInfo.price}}</view> |
|
<view class="otPrice">¥{{info.productInfo.otPrice}}</view> |
|
</view> |
|
<view class="btn" @click="goGoodsDetail">查看详情</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<!-- <view class="wrapper"> |
|
<view class="item" v-if="info.summary"> |
|
<view class="title-box acea-row row-middle"> |
|
<view class="num">1</view> |
|
<view class="">眼界甄选评测员总结</view> |
|
</view> |
|
<view class="info-text">{{info.summary}}</view> |
|
</view> |
|
<view class="item" v-if="info.feelSynopsis || info.feelImage"> |
|
<view class="title-box acea-row row-middle"> |
|
<view class="num">{{info.summary?'2':'1'}}</view> |
|
<view class="">实用体验感受</view> |
|
</view> |
|
<view class="info-text" v-if="info.feelSynopsis">{{info.feelSynopsis}}</view> |
|
<view class="images-box" v-if="info.feelImage"> |
|
<swiper @change="feelCurrentChange"> |
|
<swiper-item v-for="(item, index) in info.feelImageArr" :key="index"> |
|
<image :src="item" mode="aspectFill"></image> |
|
</swiper-item> |
|
</swiper> |
|
<view class="dot-box acea-row row-center"> |
|
<view :class="'dot ' + (feelCurrent == index?'on':'')" v-for="(item,index) in info.feelImageArr" :key="index"></view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="item" v-if="info.accessibilitySynopsis || info.accessibilityImage"> |
|
<view class="title-box acea-row"> |
|
<view class="num">{{info.summary?(info.feelSynopsis || info.feelImage?'3':'2'):(info.feelSynopsis || info.feelImage?'2':'1')}}</view> |
|
<view class="">易用性体验</view> |
|
</view> |
|
<view class="info-text" v-if="info.accessibilitySynopsis">{{info.accessibilitySynopsis}}</view> |
|
<view class="images-box" v-if="info.accessibilityImage"> |
|
<swiper @change="accessibilityCurrentChange"> |
|
<swiper-item v-for="(item, index) in info.accessibilityImageArr" :key="index"> |
|
<image :src="item" mode="aspectFill"></image> |
|
</swiper-item> |
|
</swiper> |
|
<view class="dot-box acea-row row-center"> |
|
<view :class="'dot ' + (accessibilityCurrent == index?'on':'')" v-for="(item,index) in info.accessibilityImageArr" :key="index"></view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> --> |
|
|
|
<view class="wrapper-box"> |
|
<view class="item" v-for="(item,index) in editableTabs" :key="index"> |
|
<view class="title-box acea-row row-middle"> |
|
<view class="num">{{index+1}}</view> |
|
<view class="title">{{item.content}}</view> |
|
</view> |
|
<mp-html id="article" :setTitle="false" :lazy-load="true" :copy-link="false" :tag-style="tagStyle" |
|
:content="item.configuration"/> |
|
</view> |
|
</view> |
|
|
|
<view :style="addBottom?'height: 162rpx;':'height: 122rpx;'"></view> |
|
<view class="footer acea-row row-between" :style="addBottom?'height: 162rpx;':'height: 122rpx;'"> |
|
<view class="acea-row btn-box row-around"> |
|
<button class="item contacButton" open-type="share" hover-class="none"> |
|
<image src="../../../../static/images/share-icon.png" mode=""></image> |
|
<view class="">分享</view> |
|
</button> |
|
<button class="item contacButton" hover-class="none" @click.stop="getCollection"> |
|
<image :src="`../../../../static/images/${isCollect?'star-light':'star'}.png`" mode=""></image> |
|
<view class="">{{isCollect? '已收藏':'收藏'}}</view> |
|
</button> |
|
<!-- <view class="item" @click="share"> |
|
<image src="../../../../static/images/share-icon.png" mode=""></image> |
|
<view class="">分享</view> |
|
</view> --> |
|
</view> |
|
<view class="btn" @click="goGoodsDetail">立即购买</view> |
|
</view> |
|
</view> |
|
</template> |
|
<script> |
|
import { getEvaluationDetail,getUserCollection,delUserCollection} from '@/api/store' |
|
export default { |
|
data() { |
|
return { |
|
isCollect:true, |
|
productInfo:{}, |
|
addBottom: this.addBottom, |
|
id: 0, |
|
info: {}, |
|
feelCurrent: 0, |
|
accessibilityCurrent: 0, |
|
editableTabs:[], |
|
tagStyle: { |
|
// p: 'text-indent:2em;font-family: PingFang SC;font-size:28rpx;', |
|
img: 'padding:0;margin:20rpx 0;font-size:0;display:block;border-radius: 16rpx;' |
|
} |
|
}; |
|
}, |
|
onLoad() { |
|
this.id = this._route.query.id |
|
this.getInfo(this.id); |
|
}, |
|
onShareAppMessage() { |
|
return { |
|
title: '甄选测评', |
|
path: '/pages/shop/Evaluations/EvaluationDetail/index?id='+this.id |
|
} |
|
}, |
|
methods: { |
|
getCollection: function() { |
|
let param={} |
|
param.id=this.id |
|
param.category= "collect" |
|
if (this.isCollect) { |
|
delUserCollection(param).then(res=>{ |
|
this.isCollect=!this.isCollect |
|
}) |
|
}else{ |
|
getUserCollection(param).then(res=>{ |
|
this.isCollect=!this.isCollect |
|
}) |
|
} |
|
}, |
|
getInfo(id) { |
|
uni.showLoading({ |
|
title: '' |
|
}) |
|
getEvaluationDetail(id).then(res => { |
|
this.info = res.data; |
|
this.isCollect=this.info.isCollect; |
|
this.$set(this,'editableTabs',res.data.editableTabs) |
|
uni.hideLoading(); |
|
}) |
|
}, |
|
videoErrorCallback(e) { |
|
console.log('视频错误信息:') |
|
console.log(e.detail.errMsg) |
|
}, |
|
goGoodsDetail() { |
|
this.$yrouter.push({ |
|
path: '/pages/shop/GoodsCon/index', |
|
query: { |
|
id: this.info.productInfo.id, |
|
}, |
|
}) |
|
}, |
|
feelCurrentChange(e) { |
|
this.feelCurrent = e.detail.current; |
|
}, |
|
accessibilityCurrentChange(e) { |
|
this.accessibilityCurrent = e.detail.current; |
|
}, |
|
} |
|
} |
|
</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%; |
|
} |
|
} |
|
} |
|
|
|
.synopsis-box { |
|
margin: 20rpx 32rpx 0rpx 90rpx; |
|
padding: 20rpx 0rpx 20rpx 50rpx; |
|
width: 628rpx; |
|
min-height: 146rpx; |
|
background: #F5F6F8; |
|
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06); |
|
border-radius: 16rpx; |
|
position: relative; |
|
.left-circle { |
|
height: 98rpx; |
|
width: 98rpx; |
|
background: #F1F1F1; |
|
border-radius: 50%; |
|
position: absolute; |
|
top: 22rpx; |
|
left: -50rpx; |
|
// box-shadow: 0rpx 10rpx 8rpx 0rpx rgba(0,0,0,0.15); |
|
} |
|
image { |
|
width: 120rpx; |
|
height: 120rpx; |
|
position: absolute; |
|
top: 24rpx; |
|
left: -66rpx; |
|
} |
|
.info { |
|
height: 100%; |
|
overflow: hidden; |
|
font-size: 20rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #2DB5AE; |
|
line-height: 26rpx; |
|
padding: 0rpx 8rpx; |
|
// text { |
|
// font-weight: 600; |
|
// // padding-right: 6rpx; |
|
// } |
|
} |
|
} |
|
|
|
.video-box { |
|
margin: 20rpx 32rpx 0rpx; |
|
width: 686rpx; |
|
height: 384rpx; |
|
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06); |
|
border-radius: 16rpx; |
|
#myVideo { |
|
width: 686rpx; |
|
height: 384rpx; |
|
border-radius: 16rpx; |
|
} |
|
} |
|
|
|
.productInfo-box { |
|
margin: 20rpx 32rpx 0rpx; |
|
width: 686rpx; |
|
height: 178rpx; |
|
background: #F5F6F8; |
|
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06); |
|
border-radius: 16rpx; |
|
padding: 8rpx; |
|
image { |
|
width: 164rpx; |
|
height: 164rpx; |
|
border-radius: 16rpx; |
|
} |
|
.right-text { |
|
width: 478rpx; |
|
margin-right: 8rpx; |
|
padding-top: 8rpx; |
|
font-size: 20rpx; |
|
font-family: SourceHanSansSCVF; |
|
font-weight: 600; |
|
color: #999999; |
|
line-height: 28rpx; |
|
.name { |
|
font-size: 26rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #3A3A3C; |
|
line-height: 38rpx; |
|
} |
|
.info { |
|
padding-bottom: 14rpx; |
|
} |
|
.price-box { |
|
font-family: Futura; |
|
.price { |
|
color: #3A3A3C; |
|
line-height: 36rpx; |
|
font-size: 30rpx; |
|
} |
|
.otPrice { |
|
text-decoration: line-through; |
|
} |
|
} |
|
.btn { |
|
margin-top: 18rpx; |
|
width: 138rpx; |
|
height: 42rpx; |
|
background: #2DB5AE; |
|
border-radius: 16rpx; |
|
font-size: 24rpx; |
|
font-family: PingFang SC; |
|
color: #FFFFFF; |
|
line-height: 42rpx; |
|
text-align: center; |
|
} |
|
} |
|
} |
|
|
|
// .wrapper { |
|
// margin: 20rpx 32rpx; |
|
// padding: 16rpx 24rpx; |
|
// width: 686rpx; |
|
// background: #F5F6F8; |
|
// box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15); |
|
// border-radius: 16rpx; |
|
// .item { |
|
// padding-bottom: 22rpx; |
|
// .title-box { |
|
// font-size: 30rpx; |
|
// font-family: SourceHanSansSCVF; |
|
// font-weight: 600; |
|
// color: #3A3A3C; |
|
// line-height: 23px; |
|
// .num { |
|
// width: 34rpx; |
|
// height: 34rpx; |
|
// border-radius: 50%; |
|
// background: #2DB5AE; |
|
// font-size: 20rpx; |
|
// font-family: PingFang SC; |
|
// font-weight: 600; |
|
// color: #FFFFFF; |
|
// line-height: 34rpx; |
|
// text-align: center; |
|
// margin-right: 8rpx; |
|
// } |
|
// } |
|
// .info-text { |
|
// margin-bottom: 24rpx; |
|
// font-size: 24rpx; |
|
// font-family: PingFang SC; |
|
// font-weight: 500; |
|
// color: #3A3A3C; |
|
// line-height: 32rpx; |
|
// text-indent: 42rpx; |
|
// } |
|
// .images-box { |
|
// padding-bottom: 24rpx; |
|
// position: relative; |
|
// swiper { |
|
// width: 638rpx; |
|
// height: 360rpx; |
|
// border-radius: 16rpx; |
|
// overflow: hidden; |
|
// swiper-item { |
|
// border-radius: 16rpx; |
|
// image { |
|
// width: 638rpx; |
|
// height: 360rpx; |
|
// border-radius: 16rpx; |
|
// } |
|
// } |
|
// } |
|
// .dot-box { |
|
// position: absolute; |
|
// bottom: 40rpx; |
|
// left: 50%; |
|
// transform: translateX(-50%); |
|
// .dot { |
|
// width: 8rpx; |
|
// height: 8rpx; |
|
// background: #FFFFFF; |
|
// border-radius: 6rpx; |
|
// margin: 0rpx 8rpx; |
|
// transition: width .5s cubic-bezier(.18,.89,.17,.88); |
|
// } |
|
// .on { |
|
// width: 36rpx; |
|
// background: #2DB5AE; |
|
// transition: width .5s cubic-bezier(.18,.89,.17,.88); |
|
// } |
|
// } |
|
// } |
|
// } |
|
// } |
|
|
|
.wrapper-box { |
|
margin: 20rpx 32rpx; |
|
padding: 16rpx 24rpx; |
|
width: 686rpx; |
|
background: #F5F6F8; |
|
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06); |
|
border-radius: 16rpx; |
|
.item { |
|
padding-bottom: 22rpx; |
|
.title-box { |
|
// padding: 0 30rpx; |
|
font-size: 30rpx; |
|
font-family: SourceHanSansSCVF; |
|
font-weight: 600; |
|
color: #3A3A3C; |
|
line-height: 23px; |
|
margin-bottom: 10rpx; |
|
.num { |
|
width: 34rpx; |
|
height: 34rpx; |
|
border-radius: 50%; |
|
background: #2DB5AE; |
|
font-size: 20rpx; |
|
font-family: PingFang SC; |
|
font-weight: 600; |
|
color: #FFFFFF; |
|
line-height: 34rpx; |
|
text-align: center; |
|
margin-right: 8rpx; |
|
} |
|
.title{ |
|
font-size: 32rpx; |
|
font-weight: 600; |
|
} |
|
} |
|
.info-text { |
|
margin-bottom: 24rpx; |
|
font-size: 24rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #3A3A3C; |
|
line-height: 32rpx; |
|
text-indent: 42rpx; |
|
} |
|
|
|
} |
|
} |
|
|
|
|
|
|
|
.footer { |
|
position: fixed; |
|
bottom: 0; |
|
left: 0; |
|
width: 750rpx; |
|
background: #F1F1F1; |
|
box-shadow: 0rpx -4rpx 38rpx 0rpx rgba(0,0,0,0.2); |
|
border-radius: 28rpx 28rpx 0rpx 0rpx; |
|
padding: 12rpx 32rpx 0rpx; |
|
.btn-box{ |
|
width: 35%; |
|
} |
|
.contacButton { |
|
height: 80rpx; |
|
padding: 0; |
|
background-color: #F1F1F1; |
|
width: 100rpx; |
|
} |
|
.contacButton::after { |
|
border: 0; |
|
} |
|
.item { |
|
text-align: center; |
|
font-size: 20rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #3A3A3C; |
|
line-height: 22rpx; |
|
image { |
|
width: 50rpx; |
|
height: 50rpx; |
|
} |
|
} |
|
.btn { |
|
margin-top: 6rpx; |
|
width: 386rpx; |
|
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; |
|
} |
|
} |
|
|
|
</style>
|
|
|