Loki
/
zsw-farm-bxg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

测评详情;专家;首页商品列表切换形式调整

home_hotList
whyneedname 2 years ago
parent
16d06531bc
commit
f60f913aa6
15 changed files with 837 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      api/public.js
  2. 2
      api/store.js
  3. 14
      components/PromotionGood.vue
  4. 3
      components/colorui/components/cu-custom.vue
  5. 8
      pages.json
  6. 157
      pages/expert/index.vue
  7. 2
      pages/home/components/HotCommodity.vue
  8. 302
      pages/home/index.vue
  9. 373
      pages/shop/Evaluations/EvaluationDetail/index.vue
  10. 13
      pages/shop/Evaluations/index.vue
  11. 10
      pages/shop/GoodsCon/index.vue
  12. BIN
      static/images/evaluation-icon.png
  13. BIN
      static/images/left-bg.png
  14. BIN
      static/images/right-bg.png
  15. BIN
      static/images/share-icon.png

8
api/public.js
Unescape View File

@ -115,3 +115,11 @@ export function imageBase64(image, code) {
{ login: false } { login: false }
); );
} }
/**
* 获取专家列表
* @returns {*}
*/
export function getExpert() {
return request.get("/expert", {}, { login: false });
}

2
api/store.js
Unescape View File

@ -196,7 +196,7 @@ export function getEvaluation() {
* 测评详情 * 测评详情
*/ */
export function getEvaluationDetail(id) { export function getEvaluationDetail(id) {
return request.get("/evaluation"+id, {}, { return request.get("/evaluation/"+id, {}, {
login: false login: false
}); });
} }

14
components/PromotionGood.vue
Unescape View File

@ -183,18 +183,18 @@ export default {
// &:before { // &:before {
// content: '￥'; // content: '￥';
// font-size: 26rpx; // font-size: 26rpx;
// } // }
text { text {
padding-left: 10rpx; padding-left: 10rpx;
font-size: 20rpx; font-size: 20rpx;
color: #999999; color: #999999;
line-height: 26rpx; line-height: 26rpx;
font-weight: 500; font-weight: 500;
// color: #000000; // color: #000000;
text-decoration: line-through; text-decoration: line-through;
// font-size: 28rpx; // font-size: 28rpx;
// font-style: italic; // font-style: italic;
} }
} }

3
components/colorui/components/cu-custom.vue
Unescape View File

@ -71,6 +71,9 @@
BackPage() { BackPage() {
uni.navigateBack({ uni.navigateBack({
delta: 1, delta: 1,
success(res) {
// console.log('navigateBack')
},
fail: (err) => { fail: (err) => {
uni.switchTab({ uni.switchTab({
url: '/pages/home/index', url: '/pages/home/index',

8
pages.json
Unescape View File

@ -503,6 +503,14 @@
"style": { "style": {
"navigationBarTitleText": "甄选测评", "navigationBarTitleText": "甄选测评",
"enablePullDownRefresh": false, "enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path": "pages/expert/index",
"style": {
"navigationBarTitleText": "专家专栏",
"enablePullDownRefresh": false,
"navigationStyle": "custom" "navigationStyle": "custom"
} }
} }

157
pages/expert/index.vue
Unescape View File

@ -0,0 +1,157 @@
<template>
<view>
<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>
<block slot="content">
<view class="tab-title">专家专栏</view>
</block>
</cu-custom>
</view>
<view class="list">
<view class="item" v-for="(item,index) in dataList" :key="index">
<image class="image" :src="item.image" mode="" :style="index%2?'right: 32rpx;':'left: 30rpx;'"></image>
<image v-if="index%2" class="bg" src="../../static/images/right-bg.png" mode=""></image>
<image v-else class="bg" src="../../static/images/left-bg.png" mode=""></image>
<view class="text-box" :style="index%2?'margin-left: 24rpx;':'margin-left: 296rpx;'">
<view class="acea-row">
<view class="name">{{item.expertName}}</view>
<view class="position">{{item.expertStatus}}</view>
</view>
<view class="line"></view>
<view class="unit">{{item.expertUnit}}</view>
<view class="info">{{item.expertInfo}}</view>
<view class="btn" :style="index%2?'':'margin-left: 192rpx;'">向ta留言咨询</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { getExpert } from "@/api/public.js"
export default {
data() {
return {
dataList: [],
};
},
onLoad() {
this.getExpertList();
},
methods: {
getExpertList() {
uni.showLoading({
title: ''
})
getExpert().then(res => {
this.dataList = res.data;
uni.hideLoading();
})
}
}
}
</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%;
}
}
}
.list {
padding: 20rpx 32rpx;
.item {
width: 100%;
height: 330rpx;
padding-top: 26rpx;
position: relative;
margin-bottom: 32rpx;
.image {
position: absolute;
top: 0;
width: 216rpx;
height: 330rpx;
}
.bg {
position: absolute;
top: 26rpx;
width: 100%;
height: 304rpx;
z-index: -1;
// box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15);
}
.text-box {
width: 362rpx;
height: 304rpx;
font-size: 20rpx;
font-family: SourceHanSansSCVF;
font-weight: 500;
color: #2DB5AE;
line-height: 28rpx;
.name {
font-size: 30rpx;
font-weight: bold;
color: #3A3A3C;
line-height: 46rpx;
padding-left: 4rpx;
}
.position {
padding-left: 10rpx;
font-weight: bold;
padding-top: 14rpx;
}
.line {
margin-top: 6rpx;
width: 362rpx;
height: 2rpx;
background-color: #979797;
}
.unit {
padding-left: 4rpx;
padding-bottom: 14rpx;
}
.info {
padding-left: 4rpx;
height: 126rpx;
overflow: hidden;
font-family: PingFang SC;
line-height: 26rpx;
margin-bottom: 4rpx;
}
.btn {
margin-left: 4rpx;
width: 170rpx;
height: 46rpx;
background: #2DB5AE;
border-radius: 16rpx;
font-family: PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 46rpx;
text-align: center;
}
}
}
}
</style>

2
pages/home/components/HotCommodity.vue
Unescape View File

@ -72,7 +72,7 @@
}, },
data() { data() {
return { return {
classifyList: ['护理榜', '清洗榜', '美妆榜', '热卖榜'], classifyList: [],
classifyType: 0, classifyType: 0,
topList: [], topList: [],
goodsList: [], goodsList: [],

302
pages/home/index.vue
Unescape View File

@ -83,11 +83,62 @@
</view> </view>
</view> </view>
<!-- 精品推荐 bastList --> <view class="list-box">
<!-- 为您推荐 推荐好物 benefit--> <swiper :current="tabType" @change="changeListCurrent" :style="'height:'+swiperHeight+'px;'">
<PromotionGood v-show="!tabType" :benefit="bastList" /> <swiper-item>
<!-- 热门榜单 --> <!-- 精品推荐 bastList -->
<HotCommodity v-show="tabType" :detail="hotList" /> <!-- 为您推荐 推荐好物 benefit v-show="!tabType" -->
<!-- <PromotionGood :benefit="bastList" /> -->
<view class="goods-list acea-row row-between">
<view class="goods-item" v-for="(item, promotionGoodIndex) in bastList" :key="promotionGoodIndex" @tap="goGoodsCon(item)">
<view class="img-box">
<image class="img" :src="item.image" lazy-load mode="aspectFill"></image>
</view>
<view class="name more-t">{{ item.storeName }}</view>
<view class="price-box">
<view class="current">¥{{ item.price }}<text>¥{{item.otPrice}}</text></view>
</view>
</view>
</view>
</swiper-item>
<swiper-item>
<!-- 热门榜单 v-show="tabType" -->
<!-- <HotCommodity :detail="hotList" /> -->
<view class="hot-list">
<view class="classify-tab-box acea-row">
<view :class="'classify-item ' + (classifyType == index?'on':'')" v-for="(item,index) in hotList" :key="index" @click="changeClassify(index)">{{item.listName}}</view>
</view>
<view class="top-box">
<view class="top-item acea-row" v-for="(item,index) in topList" :key="index" @tap="goGoodsCon(item)">
<view class="top-num-box">
<view class="">{{index+1}}</view>
<view class="tip">{{index===0?'ST':index===1?'ND':index===2?'RD':'TH'}}</view>
</view>
<image class="img" :src="item.image" mode="aspectFill"></image>
<view class="info-box">
<view class="title more-t">{{item.storeName}}</view>
<view class="price-box">¥{{ item.price }}<text>¥{{item.otPrice}}</text> </view>
<view class="original">{{ item.sales }}+人购买</view>
</view>
</view>
</view>
<view class="goods-list acea-row row-between" v-if="goodsList.length">
<view class="goods-item" v-for="(item, promotionGoodIndex) in goodsList" :key="promotionGoodIndex" @tap="goGoodsCon(item)">
<view class="img-box">
<image class="img" :src="item.image" lazy-load mode="aspectFill"></image>
</view>
<view class="name more-t">{{ item.storeName }}</view>
<view class="price-box">
<view class="current">¥{{ item.price }}<text>¥{{item.otPrice}}</text></view>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</view> </view>
<!-- <view v-for="(item, index) in homeData" :key="index"> --> <!-- <view v-for="(item, index) in homeData" :key="index"> -->
<!-- <view class="head_box" v-if="item.type == 'header'" :style="{ background: bgcolor }" :class="{ active: bgcolor }"> <!-- <view class="head_box" v-if="item.type == 'header'" :style="{ background: bgcolor }" :class="{ active: bgcolor }">
@ -153,7 +204,7 @@
<script> <script>
import { mapState, mapMutations, mapActions } from 'vuex' import { mapState, mapMutations, mapActions } from 'vuex'
// import GoodList from '@/components/GoodList' // import GoodList from '@/components/GoodList'
import PromotionGood from '@/components/PromotionGood' // import PromotionGood from '@/components/PromotionGood'
// import CouponWindow from '@/components/CouponWindow' // import CouponWindow from '@/components/CouponWindow'
// import Menu from '@/components/Menu' // import Menu from '@/components/Menu'
// import UniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar' // import UniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar'
@ -161,7 +212,7 @@ import PromotionGood from '@/components/PromotionGood'
// import Groupon from '@/components/sh-groupon.vue' // import Groupon from '@/components/sh-groupon.vue'
import Banner from './components/Banner' import Banner from './components/Banner'
import HotCommodity from './components/HotCommodity' // import HotCommodity from './components/HotCommodity'
// import FirstNewProduct from './components/FirstNewProduct' // import FirstNewProduct from './components/FirstNewProduct'
// import ProductsRecommended from './components/ProductsRecommended' // import ProductsRecommended from './components/ProductsRecommended'
// import Live from './components/Live' // import Live from './components/Live'
@ -182,13 +233,13 @@ export default {
// swiperSlide, // swiperSlide,
// UniNoticeBar, // UniNoticeBar,
// GoodList, // GoodList,
PromotionGood, // PromotionGood,
// CouponWindow, // CouponWindow,
// Menu, // Menu,
// Adv, // Adv,
// Groupon, // Groupon,
Banner, Banner,
HotCommodity, // HotCommodity,
Tabbar, Tabbar,
// FirstNewProduct, // FirstNewProduct,
// ProductsRecommended, // ProductsRecommended,
@ -231,6 +282,8 @@ export default {
lovely: [], lovely: [],
benefit: [], benefit: [],
hotList: [], hotList: [],
topList: [], // hotList 前五
goodsList: [], // hotList 除前五之外
couponList: [], couponList: [],
swiperOption: { swiperOption: {
pagination: { pagination: {
@ -286,6 +339,8 @@ export default {
observeParents: true, observeParents: true,
}, },
bgImage: '', bgImage: '',
classifyType: 0, // 热门榜单分类
swiperHeight: 0,
// indexTitle: false, // indexTitle: false,
} }
}, },
@ -339,12 +394,19 @@ export default {
this.$set(this, 'couponList', res.data.couponList) this.$set(this, 'couponList', res.data.couponList)
this.$set(this, 'combinationList', res.data.combinationList) this.$set(this, 'combinationList', res.data.combinationList)
uni.hideLoading() uni.hideLoading()
this.setOpenShare() this.setOpenShare();
// this.doColorThief() // this.doColorThief()
}) }).then(() => {
let query = uni.createSelectorQuery();
query.select('.goods-list').boundingClientRect(rect => {
// console.log('rectrectrect239',rect)
this.swiperHeight = rect.height;
}).exec();
})
getHotList().then(res => { getHotList().then(res => {
this.hotList = res.data; this.hotList = res.data;
this.goodsList = this.sortData(this.hotList[this.classifyType].productInfo, 4);
}) })
}, },
onPageScroll(e) { onPageScroll(e) {
@ -378,9 +440,31 @@ export default {
changeCurrent(e) { changeCurrent(e) {
this.tabType = e.detail.current; this.tabType = e.detail.current;
}, },
changeListCurrent(e) {
this.tabType = e.detail.current;
if(this.tabType == 1) {
let query = uni.createSelectorQuery();
query.select('.hot-list').boundingClientRect(rect => {
// console.log('rectrectrect239',rect)
if(this.swiperHeight >= rect.height) return;
if(this.swiperHeight != 0 && rect.height > this.swiperHeight) {
this.swiperHeight = rect.height;
}
}).exec();
}
},
changeTab(i) { changeTab(i) {
if(this.tabType == i) return; if(this.tabType == i) return;
this.tabType = i; this.tabType = i;
if(i == 1) {
let query = uni.createSelectorQuery();
query.select('.hot-list').boundingClientRect(rect => {
if(this.swiperHeight >= rect.height) return;
if(this.swiperHeight != 0 && rect.height > this.swiperHeight) {
this.swiperHeight = rect.height;
}
}).exec();
}
}, },
goGoodSearch() { goGoodSearch() {
// this.$yrouter.push('/pages/shop/GoodsEvaluate/index'); // this.$yrouter.push('/pages/shop/GoodsEvaluate/index');
@ -408,17 +492,43 @@ export default {
// }, // },
// }) // })
// }, // },
// goGoodsCon(item) { goGoodsCon(item) {
// this.$yrouter.push({ this.$yrouter.push({
// path: '/pages/shop/GoodsCon/index', path: '/pages/shop/GoodsCon/index',
// query: { query: {
// id: item.id, id: item.id,
// }, },
// }) })
// }, },
// goGoodsPromotion() { // goGoodsPromotion() {
// this.$yrouter.push('/pages/shop/GoodsPromotion/index') // this.$yrouter.push('/pages/shop/GoodsPromotion/index')
// }, // },
changeClassify(i) {
if(this.classifyType == i) return;
this.classifyType = i;
this.goodsList = this.sortData(this.hotList[this.classifyType].productInfo, 4);
setTimeout(() => {
let query = uni.createSelectorQuery();
query.select('.hot-list').boundingClientRect(rect => {
// console.log('rectrectrect',rect)
if(this.swiperHeight >= rect.height) return;
this.swiperHeight = rect.height;
}).exec();
}, 160)
},
// 数据分层
sortData(oArr, length) {
let arr = [];
let minArr = [];
if(oArr.length > 5) {
this.topList = oArr.slice(0, 5);
arr = oArr.slice(5, oArr.length);
} else {
this.topList = oArr;
}
return arr;
},
setOpenShare: function() { setOpenShare: function() {
if (this.$deviceType == 'weixin') { if (this.$deviceType == 'weixin') {
getShare().then(res => { getShare().then(res => {
@ -720,10 +830,10 @@ export default {
font-size: 50rpx; font-size: 50rpx;
line-height: 68rpx; line-height: 68rpx;
padding-top: 0rpx; padding-top: 0rpx;
transition: all .8s; // transition: all .8s;
-webkit-transition: all .8s; // -webkit-transition: all .8s;
-moz-transition: all .8s; // -moz-transition: all .8s;
-o-transition: all .8s; // -o-transition: all .8s;
// transform:translateZ(0); // transform:translateZ(0);
// backface-visibility: hidden; // backface-visibility: hidden;
// // 兼容写法 // // 兼容写法
@ -792,9 +902,153 @@ export default {
} }
} }
} }
} }
.list-box {
width: 100%;
swiper {
width: 100%;
}
}
.list-box .goods-list {
padding: 0rpx 32rpx 8rpx;
.goods-item {
width: 332rpx;
background: #F5F6F8;
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.15);
border-radius: 16rpx;
margin-bottom: 20rpx;
.img-box {
width: 332rpx;
height: 316rpx;
border-radius: 16rpx 16rpx 0rpx 0rpx;
overflow: hidden;
.img {
width: 100%;
height: 100%;
background-color: #fff;
}
}
.name {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #3A3A3C;
line-height: 38rpx;
height: 76rpx;
margin: 10rpx 16rpx;
}
.price-box {
padding: 0rpx 16rpx 26rpx;
width: 100%;
box-sizing: border-box;
text-align: center;
.current {
font-size: 30rpx;
font-family: Futura;
font-weight: 600;
color: #3A3A3C;
line-height: 40rpx;
text {
padding-left: 10rpx;
font-size: 20rpx;
color: #999999;
line-height: 26rpx;
font-weight: 500;
text-decoration: line-through;
}
}
}
}
}
.list-box .classify-tab-box {
padding: 4rpx 32rpx 22rpx;
.classify-item {
width: 124rpx;
height: 40rpx;
border-radius: 16rpx;
border: 2rpx solid #2EB5AE;
font-size: 24rpx;
font-weight: 500;
color: #2DB5AE;
line-height: 36rpx;
text-align: center;
margin-right: 20rpx;
}
.on {
color: #FFFFFF;
background: #2DB5AE;
}
}
.list-box .top-box {
padding: 0rpx 32rpx 12rpx;
.top-item {
width: 686rpx;
height: 174rpx;
background: #F5F6F8;
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15);
border-radius: 16rpx;
margin-bottom: 20rpx;
.top-num-box {
width: 146rpx;
height: 174rpx;
padding: 24rpx 0rpx 24rpx 12rpx;
font-size: 80rpx;
font-family: Futura;
font-weight: 700;
color: #2DB5AE;
line-height: 106rpx;
text-align: center;
.tip {
font-size: 32rpx;
line-height: 42rpx;
position: relative;
top: -22rpx;
}
}
.img {
width: 168rpx;
height: 162rpx;
border-radius: 8rpx;
margin: 6rpx 0rpx;
}
.info-box {
width: 370rpx;
height: 174rpx;
padding: 16rpx 18rpx 16rpx 10rpx;
.title {
height: 76rpx;
font-size: 26rpx;
font-weight: 500;
color: #3A3A3C;
line-height: 38rpx;
}
.price-box {
font-size: 30rpx;
font-family: Futura;
font-weight: 600;
color: #3A3A3C;
line-height: 40rpx;
text {
font-size: 20rpx;
font-weight: 500;
color: #999999;
line-height: 26rpx;
text-decoration: line-through;
padding-left: 10rpx;
}
}
.original {
font-size: 20rpx;
color: #999999;
line-height: 26rpx;
}
}
}
}
// .menus-box { // .menus-box {
// position: relative; // position: relative;
// top: ; // top: ;

373
pages/shop/Evaluations/EvaluationDetail/index.vue
Unescape View File

@ -13,11 +13,102 @@
</cu-custom> </cu-custom>
</view> </view>
<!-- <view class="synopsis-box"> <view class="synopsis-box acea-row" v-if="info.synopsis">
<view class=""> <view class="left-circle"></view>
<text></text> <view class="info">
<text>甄选评测介绍</text>{{' ' + info.synopsis}}
</view> </view>
</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 :style="addBottom?'height: 162rpx;':'height: 122rpx;'"></view>
<view class="footer acea-row row-between" :style="addBottom?'height: 162rpx;':'height: 122rpx;'">
<view class="acea-row">
<button class="item contacButton" open-type="share" hover-class="none">
<image src="../../../../static/images/share-icon.png" mode=""></image>
<view class="">分享</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> </view>
</template> </template>
@ -26,23 +117,52 @@
import { getEvaluationDetail } from '@/api/store' import { getEvaluationDetail } from '@/api/store'
export default { export default {
data() { data() {
return { return {
id: 0, addBottom: this.addBottom,
id: 0,
info: {},
feelCurrent: 0,
accessibilityCurrent: 0,
}; };
}, },
onLoad() { onLoad() {
this.id = this._route.query.id this.id = this._route.query.id
this.getInfo(this.id); this.getInfo(this.id);
}, },
onShareAppMessage() {
return {
title: '甄选测评',
path: '/pages/shop/Evaluations/EvaluationDetail/index?id='+this.id
}
},
methods: { methods: {
getInfo(id) { getInfo(id) {
uni.showLoading({ uni.showLoading({
title: '' title: ''
}) })
getEvaluationDetail(id).then(res => { getEvaluationDetail(id).then(res => {
this.info = res.data;
uni.hideLoading(); 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> </script>
@ -68,17 +188,238 @@
} }
.synopsis-box { .synopsis-box {
margin: 20rpx 32rpx 20rpx 90rpx; margin: 20rpx 32rpx 0rpx 90rpx;
padding: 20rpx 20rpx 20rpx 70rpx; padding: 20rpx 0rpx 20rpx 50rpx;
width: 626rpx; width: 628rpx;
min-height: 146rpx; height: 146rpx;
background: radial-gradient(circle at 24rpx 54rpx, transparent 98rpx, #F5F6F8) top left; background: #F5F6F8;
// background: #F5F6F8; box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15);
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.15); box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15);
border-radius: 16rpx; border-radius: 16rpx;
// background-size: 17px 100px, 116px 100px, 17px 100px; #myVideo {
// background-repeat: no-repeat; width: 686rpx;
// background-position: 10px 0px,26px 0px,142px 0px; 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.15);
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);
}
}
}
}
}
.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;
.contacButton {
height: 80rpx;
padding: 0;
background-color: #F1F1F1;
}
.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> </style>

13
pages/shop/Evaluations/index.vue
Unescape View File

@ -49,12 +49,15 @@
}) })
}, },
goDetail(item) { goDetail(item) {
this.$yrouter.push({ uni.navigateTo({
path: '/pages/shop/Evaluations/EvaluationDetail/index', url: '/pages/shop/Evaluations/EvaluationDetail/index?id=' + item.id
query: {
id: item.id
},
}) })
// this.$yrouter.push({
// path: '/pages/shop/Evaluations/EvaluationDetail/index',
// query: {
// id: item.id
// },
// })
} }
} }
} }

10
pages/shop/GoodsCon/index.vue
Unescape View File

@ -19,7 +19,7 @@
</view> </view>
<view v-if="storeInfo.id" style="padding-top: 4rpx;"> <view v-if="storeInfo.id" style="padding-top: 4rpx;">
<view class="brand-info-box"> <view class="brand-info-box" @click="goBrand">
<view class="brand-logo-box"> <view class="brand-logo-box">
<image class="img" :src="brandInfo.pic" mode="aspectFill"></image> <image class="img" :src="brandInfo.pic" mode="aspectFill"></image>
</view> </view>
@ -446,6 +446,14 @@ export default {
goHome() { goHome() {
this.$yrouter.switchTab('/pages/home/index') this.$yrouter.switchTab('/pages/home/index')
}, },
goBrand() {
this.$yrouter.push({
path: '/pages/shop/brands/brandDetail/index',
query: {
id: this.brandInfo.id,
},
})
},
goShoppingCart() { goShoppingCart() {
this.$yrouter.switchTab('/pages/shop/ShoppingCart/index') this.$yrouter.switchTab('/pages/shop/ShoppingCart/index')
}, },

BIN
static/images/evaluation-icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
static/images/left-bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
static/images/right-bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
static/images/share-icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 500 B

Write Preview
Loading…
Cancel
Save