Browse Source

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

home_hotList
whyneedname 2 years ago
parent
commit
f60f913aa6
  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

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

2
api/store.js

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

14
components/PromotionGood.vue

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

3
components/colorui/components/cu-custom.vue

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

8
pages.json

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

157
pages/expert/index.vue

@ -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

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

302
pages/home/index.vue

@ -83,11 +83,62 @@
</view>
</view>
<!-- 精品推荐 bastList -->
<!-- 为您推荐 推荐好物 benefit-->
<PromotionGood v-show="!tabType" :benefit="bastList" />
<!-- 热门榜单 -->
<HotCommodity v-show="tabType" :detail="hotList" />
<view class="list-box">
<swiper :current="tabType" @change="changeListCurrent" :style="'height:'+swiperHeight+'px;'">
<swiper-item>
<!-- 精品推荐 bastList -->
<!-- 为您推荐 推荐好物 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 v-for="(item, index) in homeData" :key="index"> -->
<!-- <view class="head_box" v-if="item.type == 'header'" :style="{ background: bgcolor }" :class="{ active: bgcolor }">
@ -153,7 +204,7 @@
<script>
import { mapState, mapMutations, mapActions } from 'vuex'
// import GoodList from '@/components/GoodList'
import PromotionGood from '@/components/PromotionGood'
// import PromotionGood from '@/components/PromotionGood'
// import CouponWindow from '@/components/CouponWindow'
// import Menu from '@/components/Menu'
// 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 Banner from './components/Banner'
import HotCommodity from './components/HotCommodity'
// import HotCommodity from './components/HotCommodity'
// import FirstNewProduct from './components/FirstNewProduct'
// import ProductsRecommended from './components/ProductsRecommended'
// import Live from './components/Live'
@ -182,13 +233,13 @@ export default {
// swiperSlide,
// UniNoticeBar,
// GoodList,
PromotionGood,
// PromotionGood,
// CouponWindow,
// Menu,
// Adv,
// Groupon,
Banner,
HotCommodity,
// HotCommodity,
Tabbar,
// FirstNewProduct,
// ProductsRecommended,
@ -231,6 +282,8 @@ export default {
lovely: [],
benefit: [],
hotList: [],
topList: [], // hotList
goodsList: [], // hotList
couponList: [],
swiperOption: {
pagination: {
@ -286,6 +339,8 @@ export default {
observeParents: true,
},
bgImage: '',
classifyType: 0, //
swiperHeight: 0,
// indexTitle: false,
}
},
@ -339,12 +394,19 @@ export default {
this.$set(this, 'couponList', res.data.couponList)
this.$set(this, 'combinationList', res.data.combinationList)
uni.hideLoading()
this.setOpenShare()
this.setOpenShare();
// 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 => {
this.hotList = res.data;
this.goodsList = this.sortData(this.hotList[this.classifyType].productInfo, 4);
})
},
onPageScroll(e) {
@ -378,9 +440,31 @@ export default {
changeCurrent(e) {
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) {
if(this.tabType == i) return;
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() {
// this.$yrouter.push('/pages/shop/GoodsEvaluate/index');
@ -408,17 +492,43 @@ export default {
// },
// })
// },
// goGoodsCon(item) {
// this.$yrouter.push({
// path: '/pages/shop/GoodsCon/index',
// query: {
// id: item.id,
// },
// })
// },
goGoodsCon(item) {
this.$yrouter.push({
path: '/pages/shop/GoodsCon/index',
query: {
id: item.id,
},
})
},
// goGoodsPromotion() {
// 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() {
if (this.$deviceType == 'weixin') {
getShare().then(res => {
@ -720,10 +830,10 @@ export default {
font-size: 50rpx;
line-height: 68rpx;
padding-top: 0rpx;
transition: all .8s;
-webkit-transition: all .8s;
-moz-transition: all .8s;
-o-transition: all .8s;
// transition: all .8s;
// -webkit-transition: all .8s;
// -moz-transition: all .8s;
// -o-transition: all .8s;
// transform:translateZ(0);
// 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 {
// position: relative;
// top: ;

373
pages/shop/Evaluations/EvaluationDetail/index.vue

@ -13,11 +13,102 @@
</cu-custom>
</view>
<!-- <view class="synopsis-box">
<view class="">
<text></text>
<view class="synopsis-box acea-row" v-if="info.synopsis">
<view class="left-circle"></view>
<view class="info">
<text>甄选评测介绍</text>{{' ' + info.synopsis}}
</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>
</template>
@ -26,23 +117,52 @@
import { getEvaluationDetail } from '@/api/store'
export default {
data() {
return {
id: 0,
return {
addBottom: this.addBottom,
id: 0,
info: {},
feelCurrent: 0,
accessibilityCurrent: 0,
};
},
onLoad() {
this.id = this._route.query.id
this.getInfo(this.id);
},
onShareAppMessage() {
return {
title: '甄选测评',
path: '/pages/shop/Evaluations/EvaluationDetail/index?id='+this.id
}
},
methods: {
getInfo(id) {
uni.showLoading({
title: ''
})
getEvaluationDetail(id).then(res => {
this.info = res.data;
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>
@ -68,17 +188,238 @@
}
.synopsis-box {
margin: 20rpx 32rpx 20rpx 90rpx;
padding: 20rpx 20rpx 20rpx 70rpx;
width: 626rpx;
min-height: 146rpx;
background: radial-gradient(circle at 24rpx 54rpx, transparent 98rpx, #F5F6F8) top left;
// background: #F5F6F8;
margin: 20rpx 32rpx 0rpx 90rpx;
padding: 20rpx 0rpx 20rpx 50rpx;
width: 628rpx;
height: 146rpx;
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);
border-radius: 16rpx;
// background-size: 17px 100px, 116px 100px, 17px 100px;
// background-repeat: no-repeat;
// background-position: 10px 0px,26px 0px,142px 0px;
#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.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>

13
pages/shop/Evaluations/index.vue

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

10
pages/shop/GoodsCon/index.vue

@ -19,7 +19,7 @@
</view>
<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">
<image class="img" :src="brandInfo.pic" mode="aspectFill"></image>
</view>
@ -446,6 +446,14 @@ export default {
goHome() {
this.$yrouter.switchTab('/pages/home/index')
},
goBrand() {
this.$yrouter.push({
path: '/pages/shop/brands/brandDetail/index',
query: {
id: this.brandInfo.id,
},
})
},
goShoppingCart() {
this.$yrouter.switchTab('/pages/shop/ShoppingCart/index')
},

BIN
static/images/evaluation-icon.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
static/images/left-bg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
static/images/right-bg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
static/images/share-icon.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 500 B

Loading…
Cancel
Save