panxiaohe
/
ceres-uniapp-v2.0
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

我的评价模块页面布局调整修改

master
dy-hu 1 year ago
parent
1bd91deb23
commit
84080994f3
2 changed files with 89 additions and 82 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 54
      pages_category_page1/goodsModule/evaluateDetails.vue
  2. 117
      pages_category_page1/goodsModule/userEvaluate.vue

54
pages_category_page1/goodsModule/evaluateDetails.vue
View File

@ -8,15 +8,15 @@
<view class="flex-items">
<image class="user-headSmallImg" v-if="commentVOList.headImage" :src="commentVOList.headImage"></image>
<image class="user-headSmallImg" src="https://ceres.zkthink.com/static/images/storeLogo.png" v-else ></image>
<label class="fs28 mar-left-20" v-if="commentVOList.name">{{commentVOList.name}}</label>
<label class="fs28 mar-left-20" v-else>匿名</label>
<label class="fs28 mar-left-20 font-color-252744" v-if="commentVOList.name">{{commentVOList.name}}</label>
<label class="fs28 mar-left-20 font-color-252744" v-else>匿名</label>
</view>
<label class="font-color-999 fs22">{{commentVOList.createTime}}</label>
<label class="font-color-90919C fs22">{{commentVOList.createTime}}</label>
</view>
<view class="fs22 font-color-999 mar-top-10">
<view class="fs22 font-color-90919C mar-top-10">
{{commentVOList.value}}
</view>
<view class="fs26 pad-topbot-20">{{commentVOList.comment}}</view>
<view class="fs28 pad-topbot-20 font-color-252744">{{commentVOList.comment}}</view>
<view class="evaluateImg-box" v-if="commentVOList.image">
<view v-for="(cItem, index) in imageList" :key="index" @click="previewImg(1, index)">
<image class="evaluate-Img" :src="cItem"></image>
@ -35,9 +35,9 @@
<view class="flex-row-plus" @click="goGoodsDetails">
<image class="goodsDes-img" :src="commentVOList.productImage"></image>
<view class="goodsDesText-box">
<label class="fs26 goodsDes-text">{{commentVOList.productName}}</label>
<label class="fs28 font-color-252744">{{commentVOList.productName}}</label>
<view class="mar-top-70">
<label>¥ {{commentVOList.productPrice}}</label>
<label class="fs32 font-color-252744">¥ {{commentVOList.productPrice}}</label>
</view>
</view>
</view>
@ -190,8 +190,8 @@
display: flex;
justify-content: space-between;
.user-headSmallImg{
width: 46upx;
height: 46upx;
width: 64rpx;
height: 64rpx;
border-radius: 50%;
}
}
@ -209,12 +209,13 @@
}
}
.goodsDes-box{
background-color: #F7F7F7;
background-color: #FAFAFA;
border-radius: 30rpx;
padding: 20upx 44upx 20upx 20upx;
.goodsDes-img{
width: 180upx;
height: 180upx;
border-radius: 10upx;
width: 152rpx;
height: 152rpx;
border-radius: 30rpx;
}
.goodsDesText-box{
width: 416upx;
@ -248,30 +249,33 @@
display: flex;
justify-content: space-between;
.addComments-box{
height: 100upx;
width: 330upx;
height: 88rpx;
width: 330rpx;
background-color: #FFFFFF;
color: #333333;
border: 2rpx solid #333333;
border-radius: 50rpx;
color: #252744;
border: 1rpx solid #252744;
.addComments-cion{
width: 50upx;
height: 50upx;
width: 50rpx;
height: 50rpx;
}
}
.addPraise-box{
height: 100upx;
width: 330upx;
background: #333333;
height: 88rpx;
width: 330rpx;
background: #252744;
color: #FFFFFF;
border-radius: 50rpx;
.addPraise-icon{
width: 50upx;
height: 50upx;
}
}
.addPraise-box1{
height: 100upx;
width: 690upx;
background: #333333;
height: 88rpx;
width: 690rpx;
background: #252744;
border-radius: 50rpx;
color: #FFFFFF;
.addPraise-icon{
width: 50upx;

117
pages_category_page1/goodsModule/userEvaluate.vue
View File

@ -15,7 +15,7 @@
:class="{'evaluateTitle-on' : evaluateTitleFlag == 1}"
@click="evaluateTitleClick(1)"
>全部评价({{ myCommentList.total || 0}})</view>
<view class="centerLine">|</view>
<view class="font-color-BCBDC6">|</view>
<view
:class="{'evaluateTitle-on' : evaluateTitleFlag == 2}"
@click="evaluateTitleClick(2)"
@ -24,7 +24,7 @@
<view v-if="evaluateTitleFlag == 1" class="mar-top-20">
<template>
<view
class="evaluate-contentbox u-skeleton-fillet"
class="evaluate-contentbox u-skeleton-fillet evaluate-item"
v-for="(item, index) in commentVOList"
:key="index"
@click="commentDetails(index)"
@ -34,16 +34,16 @@
<image class="user-headSmallImg u-skeleton-circle" v-if="item.headImage" :src="item.headImage"></image>
<image class="user-headSmallImg u-skeleton-circle" src="https://ceres.zkthink.com/static/images/storeLogo.png" v-else></image>
<view class="skuValue u-skeleton-fillet">
<label class="fs28" v-if="item.name">{{item.name}}</label>
<label class="fs28" v-else>匿名</label>
<view class="fs22 font-color-999 mar-top-10">
<label class="fs28 font-color-252744" v-if="item.name">{{item.name}}</label>
<label class="fs28 font-color-252744" v-else>匿名</label>
<view class="fs22 font-color-90919C mar-top-10">
{{item.value}}
</view>
</view>
</view>
<view class="addCommentsBut" v-if="item.addComment == ''" @click.stop="addCommentsClick(index)">追加评价</view>
</view>
<view class="fs26 pad-topbot-20 u-skeleton-fillet" style="margin-top: 10rpx">{{item.comment}}</view>
<view class="fs28 pad-topbot-20 u-skeleton-fillet font-color-252744" style="margin-top: 10rpx">{{item.comment}}</view>
<view class="evaluateImg-box" v-if="item.image">
<view v-for="(cItem, index) in commentImgData(item.image)" :key="index">
<image class="evaluate-Img" :src="cItem"></image>
@ -60,32 +60,32 @@
</view>
<view class="goodsDes-box u-skeleton-fillet flex-column-plus mar-top-30">
<view class="flex-row-plus" @click.stop="goGoodsDetails(item.shopId,item.productId,item.skuId)">
<image class="goodsDes-img default-img"
<image class="goodsDes-img default-img"
onerror="this.src='url(https://wechat.hnthee.com/ceres-local-file/image/default.png) no-repeat center';this.οnerrοr=null"
:src="item.productImage"></image>
<view class="goodsDesText-box">
<label class="fs26 goodsDes-text">{{item.productName}}</label>
<label class="fs28 font-color-252744">{{item.productName}}</label>
<view class="mar-top-70">
<label>¥ {{item.productPrice}}</label>
<label class="fs32 font-color-252744">¥ {{item.productPrice}}</label>
</view>
</view>
</view>
</view>
<view class="flex-items flex-row mar-top-30 flex-sp-between">
<view class="font-color-999 fs22">{{item.createTime}}</view>
<view class="font-color-90919C fs22">{{item.createTime}}</view>
<view class="praise-box flex-items flex-row">
<image class="praise-icon" @click.stop="zanTap(index,item.commentId,0)" src="https://ceres.zkthink.com/static/images/praiseActiveIcon.png"
<image class="praise-icon" @click.stop="zanTap(index,item.commentId,0)" src="https://wechat.hnthee.com/ceres-local-file/image/evaluate_like_active.png"
v-if="item.ifLike"></image>
<image class="praise-icon" @click.stop="zanTap(index,item.commentId,1)" src="https://ceres.zkthink.com/static/images/addPraiseIcon.png"
<image class="praise-icon" @click.stop="zanTap(index,item.commentId,1)" src="https://wechat.hnthee.com/ceres-local-file/image/evaluate_like_normal.png"
v-else></image>
<label class="mar-left-10">{{item.likes}}</label>
<label class="fs22 font-color-252744 mar-left-10">{{item.likes}}</label>
</view>
</view>
</view>
</template>
<view v-if="evaluateEmpty" class="emptyOrder-box flex-items-plus flex-column">
<image class="emptyOrder-img" src="https://ceres.zkthink.com/static/img/bgnull.png"></image>
<label class="font-color-999 fs26 mar-top-30">你还没有评论哦～</label>
<label class="font-color-90919C fs26 mar-top-30">你还没有评论哦～</label>
</view>
</view>
<view v-if="evaluateTitleFlag == 2" class="mar-top-20">
@ -99,13 +99,13 @@
<view class="flex-items">
<image class="user-headSmallImg" v-if="item.headImage" :src="item.headImage"></image>
<image class="user-headSmallImg" src="https://ceres.zkthink.com/static/images/storeLogo.png" v-else></image>
<label class="fs28 mar-left-20" v-if="item.name">{{item.name}}</label>
<label class="fs28 mar-left-20" v-else>匿名</label>
<label class="fs28 mar-left-20 font-color-252744" v-if="item.name">{{item.name}}</label>
<label class="fs28 mar-left-20 font-color-252744" v-else>匿名</label>
</view>
<view class="fs22 font-color-999 mar-top-10">
<view class="fs22 font-color-90919C mar-top-10">
{{item.value}}
</view>
<view class="fs26 pad-topbot-20">{{item.comment}}</view>
<view class="fs28 pad-topbot-20 font-color-252744">{{item.comment}}</view>
<view class="evaluateImg-box" v-if="item.image">
<view v-for="(cItem, index) in commentImgData(item.image)" :key="index">
<image class="evaluate-Img" :src="cItem"></image>
@ -122,13 +122,13 @@
</view>
<view class="flex-items flex-row mar-top-30 flex-sp-between">
<view class="font-color-999 fs22">{{item.createTime}}</view>
<view class="font-color-90919C fs22">{{item.createTime}}</view>
<view class="praise-box flex-items flex-row">
<image class="praise-icon" @click.stop="zanTap(index,item.commentId,0)" src="https://ceres.zkthink.com/static/images/praiseActiveIcon.png"
<image class="praise-icon" @click.stop="zanTap(index,item.commentId,0)" src="https://wechat.hnthee.com/ceres-local-file/image/evaluate_like_active.png"
v-if="item.ifLike"></image>
<image class="praise-icon" @click.stop="zanTap(index,item.commentId,1)" src="https://ceres.zkthink.com/static/images/praiseIcon.png"
<image class="praise-icon" @click.stop="zanTap(index,item.commentId,1)" src="https://wechat.hnthee.com/ceres-local-file/image/evaluate_like_normal.png"
v-else></image>
<label class="mar-left-10">{{item.likes}}</label>
<label class="fs22 font-color-252744 mar-left-10">{{item.likes}}</label>
</view>
</view>
</view>
@ -136,7 +136,7 @@
</template>
<view v-if="evaluateEmpty" class="emptyOrder-box flex-items-plus flex-column">
<image class="emptyOrder-img" src="https://ceres.zkthink.com/static/img/bgnull.png"></image>
<label class="font-color-999 fs26 mar-top-30">你还没有评论哦～</label>
<label class="font-color-90919C fs26 mar-top-30">你还没有评论哦～</label>
</view>
</view>
</view>
@ -301,7 +301,7 @@
<style lang="scss" scoped>
page {
background-color: #FFFFFF;
background-color: #FAFAFA;
}
.container {
@ -316,31 +316,40 @@ page {
}
.evaluateTitle-box {
color: #CCCCCC;
margin-top: 26upx;
border-bottom: 2rpx solid #F3F4F5;
background: #FFFFFF;
color: #90919C;
padding-top: 26upx;
//border-bottom: 20rpx solid #FAFAFA;
.evaluateTitle-on {
padding-bottom: 20upx;
border-bottom: 4upx solid #C5AA7B;
color: #333333;
border-bottom: 6rpx solid #252744;
border-radius: 3rpx;
color: #252744;
font-weight: bold;
}
}
.evaluate-item{
background: #FFFFFF;
border-radius: 30rpx;
box-shadow: 0rpx 15rpx 30rpx 0rpx #F2F2F2;
}
.evaluate-contentbox {
display: flex;
justify-content: center;
flex-direction: column;
padding: 30upx 30upx;
margin: 10rpx 10rpx;
background-color: #FFFFFF;
border-bottom: 2rpx solid #F3F4F5;
margin: 20rpx 30rpx;
//background-color: #FFFFFF;
//border-bottom: 2rpx solid #F3F4F5;
.evaluate-content {
width: 670upx;
display: flex;
justify-content: space-between;
.user-headSmallImg {
width: 46upx;
height: 46upx;
width: 64rpx;
height: 64rpx;
border-radius: 50%;
}
.skuValue {
@ -365,13 +374,14 @@ page {
}
.goodsDes-box {
background-color: #F7F7F7;
background-color: #FAFAFA;
border-radius: 30rpx;
padding: 20upx 44upx 20upx 20upx;
.goodsDes-img {
width: 180upx;
height: 180upx;
border-radius: 10upx;
width: 152rpx;
height: 152rpx;
border-radius: 30rpx;
}
.goodsDesText-box {
@ -383,8 +393,8 @@ page {
.praise-box {
.praise-icon {
width: 50upx;
height: 50upx;
width: 28rpx;
height: 26rpx;
}
}
@ -397,25 +407,18 @@ page {
}
}
.praise-icon {
width: 50upx;
height: 50upx;
width: 28rpx;
height: 26rpx;
}
.addCommentsBut {
width: 140upx;
height: 58upx;
background: #333333;
font-size: 26upx;
line-height: 58upx;
text-align: center;
color: #C5AA7B;
}
.addCommentsBut1 {
width: 140upx;
height: 58upx;
font-size: 26upx;
background: #333333;
line-height: 58upx;
background: #252744;
height: 50rpx;
line-height: 48rpx;
font-size: 26rpx;
padding: 0rpx 25rpx;
border-radius: 30rpx;
margin-right: 30rpx;
text-align: center;
color: #FFFFFF;
}
</style>
Write Preview
Loading…
Cancel
Save