通过微信开发者工具 商城模板 创建新小程序
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
@@ -0,0 +1,36 @@
|
||||
// pages/goods/comments/components/comments-card/images-videos/index.js
|
||||
Component({
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
resources: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
classType: 'single',
|
||||
},
|
||||
|
||||
observers: {
|
||||
resources: function (newVal) {
|
||||
if (newVal.length <= 1) {
|
||||
this.setData({ classType: 'single' });
|
||||
} else if (newVal.length === 2) {
|
||||
this.setData({ classType: 'double' });
|
||||
} else {
|
||||
this.setData({ classType: 'multiple' });
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {},
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"my-video": "../my-video/index",
|
||||
"t-image": "/components/webp-image/index"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
<view class="images-videos-container container-{{classType}}">
|
||||
<view
|
||||
class="resource-container resource-container-{{classType}}"
|
||||
wx:for="{{resources}}"
|
||||
wx:for-item="resource"
|
||||
wx:key="*this"
|
||||
>
|
||||
<t-image wx:if="{{resource.type === 'image'}}" t-class="resource-item-{{classType}}" src="{{resource.src}}" />
|
||||
<my-video wx:else videoSrc="{{resource.src}} " my-video="resource-item-{{classType}}">
|
||||
<t-image t-class="resource-item resource-item-{{classType}}" slot="cover-img" src="{{resource.coverSrc}}" />
|
||||
<image class="play-icon" slot="play-icon" src="./assets/play.png" />
|
||||
</my-video>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
.resource-item-single {
|
||||
width: 360rpx;
|
||||
height: 360rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.resource-item-double {
|
||||
width: 334rpx;
|
||||
height: 334rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.resource-item-multiple {
|
||||
width: 218rpx;
|
||||
height: 218rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.resource-container-single {
|
||||
padding-left: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.resource-container-double {
|
||||
padding-left: 18rpx;
|
||||
padding-top: 18rpx;
|
||||
}
|
||||
|
||||
.resource-container-multiple {
|
||||
padding-left: 16rpx;
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
|
||||
.container-single {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.container-double {
|
||||
margin-left: -18rpx;
|
||||
margin-top: -18rpx;
|
||||
}
|
||||
|
||||
.container-multiple {
|
||||
margin-left: -16rpx;
|
||||
margin-top: -16rpx;
|
||||
}
|
||||
|
||||
.resource-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.play-icon {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
}
|
||||
|
||||
.images-videos-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.image {
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.cover-img-container {
|
||||
background-color: white;
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
Component({
|
||||
externalClasses: ['my-video', 'my-cover-img', 'my-play-icon'],
|
||||
properties: {
|
||||
videoSrc: { type: String },
|
||||
},
|
||||
data: {
|
||||
isShow: true,
|
||||
},
|
||||
|
||||
options: {
|
||||
multipleSlots: true, // 在组件定义时的选项中启用多slot支持
|
||||
},
|
||||
|
||||
attached() {
|
||||
this.videoContext = wx.createVideoContext('myVideo', this);
|
||||
},
|
||||
|
||||
fullScreen: false,
|
||||
|
||||
methods: {
|
||||
// 点击封面自定义播放按钮时触发
|
||||
bindplay(e) {
|
||||
this.setData({
|
||||
isShow: false,
|
||||
});
|
||||
this.videoContext.play();
|
||||
this.triggerEvent('play', e);
|
||||
},
|
||||
|
||||
bindplayByVideo(e) {
|
||||
this.setData({
|
||||
isShow: false,
|
||||
});
|
||||
this.triggerEvent('play', e);
|
||||
},
|
||||
|
||||
// 监听播放到末尾时触发
|
||||
bindended(e) {
|
||||
if (!this.fullScreen) {
|
||||
this.setData({
|
||||
isShow: true,
|
||||
});
|
||||
}
|
||||
this.triggerEvent('ended', e);
|
||||
},
|
||||
// 监听暂停播放时触发
|
||||
bindpause(e) {
|
||||
this.triggerEvent('pause', e);
|
||||
},
|
||||
bindfullscreenchange(e) {
|
||||
const fullScreen = e?.detail?.fullScreen;
|
||||
this.fullScreen = fullScreen;
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
<video
|
||||
id="myVideo"
|
||||
src="{{videoSrc}}"
|
||||
enable-danmu
|
||||
controls
|
||||
show-fullscreen-btn
|
||||
show-center-play-btn="{{false}}"
|
||||
auto-pause-if-navigate
|
||||
auto-pause-if-open-native
|
||||
show-play-btn
|
||||
object-fit="contain"
|
||||
bindpause="bindpause"
|
||||
bindended="bindended"
|
||||
bindplay="bindplayByVideo"
|
||||
class="video my-video"
|
||||
bindfullscreenchange="bindfullscreenchange"
|
||||
>
|
||||
<view class="video_cover" wx:if="{{isShow}}">
|
||||
<view class="my-cover-img">
|
||||
<slot name="cover-img" />
|
||||
</view>
|
||||
<view class="video_play_icon my-play-icon" bindtap="bindplay">
|
||||
<slot name="play-icon" />
|
||||
</view>
|
||||
</view>
|
||||
</video>
|
||||
@@ -0,0 +1,21 @@
|
||||
.video .video_cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video .video_play_icon {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.video .video_txt {
|
||||
margin: 10rpx auto;
|
||||
}
|
||||
|
||||
.video {
|
||||
display: flex;
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
Component({
|
||||
externalClasses: ['wr-class'],
|
||||
options: {
|
||||
multipleSlots: true,
|
||||
},
|
||||
properties: {
|
||||
goodsDetailInfo: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
sellerReply: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
userHeadUrl: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
userName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
commentContent: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
commentScore: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
},
|
||||
commentTime: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
commentResources: {
|
||||
type: Array,
|
||||
value: [],
|
||||
},
|
||||
},
|
||||
|
||||
data: {
|
||||
showMoreStatus: false,
|
||||
showContent: false,
|
||||
hideText: false,
|
||||
eleHeight: null,
|
||||
overText: false,
|
||||
isDisabled: true,
|
||||
startColors: ['#FFC51C', '#DDDDDD'],
|
||||
},
|
||||
methods: {},
|
||||
});
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-rate": "tdesign-miniprogram/rate/rate",
|
||||
"images-videos": "./components/images-videos",
|
||||
"t-image": "/components/webp-image/index"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
<view class="comments-card-item wr-class">
|
||||
<view class="comments-card-item-container">
|
||||
<view class="comments-title">
|
||||
<view class="comments-card-item-userImg">
|
||||
<t-image t-class="userImg" src="{{userHeadUrl}}" />
|
||||
</view>
|
||||
<view class="userName">{{userName}}</view>
|
||||
<text class="commentTime">{{commentTime}}</text>
|
||||
</view>
|
||||
<view class="comments-info">
|
||||
<view class="rate">
|
||||
<t-rate value="{{commentScore}}" size="14" gap="2" color="{{['#ffc51c', '#ddd']}}" />
|
||||
</view>
|
||||
<view class="goods-info-text" wx:if="{{goodsDetailInfo}}">{{goodsDetailInfo}}</view>
|
||||
</view>
|
||||
<view class="comments-card-item-container-content">
|
||||
<view class="content-text" hidden="{{showContent}}"> {{commentContent}} </view>
|
||||
</view>
|
||||
<view class="comments-card-item-container-image" wx:if="{{commentResources.length > 0}}">
|
||||
<images-videos resources="{{commentResources}}" />
|
||||
</view>
|
||||
<view class="comments-card-reply" wx:if="{{sellerReply}}">
|
||||
<text class="prefix">店家回复：</text>
|
||||
<text class="content">{{sellerReply}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,172 @@
|
||||
@import '../../../../../style/theme.wxss';
|
||||
|
||||
.comments-card-item {
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.comments-card-item::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0rpx;
|
||||
width: 686rpx;
|
||||
height: 2rpx;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.comments-card-item-userImg {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.comments-card-item-userImg .userImg {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.comments-card-item-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.comments-card-item-container-name {
|
||||
display: flex;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.comments-card-item-container-name .userName {
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.comments-card-item-container-date {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-top: 4rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.comments-card-item-container-content {
|
||||
margin-top: 16rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.comments-card-item-container-content .content-text {
|
||||
font-size: 28rpx;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.comments-card-item-container-content .hide-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 5;
|
||||
text-align: justify;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.comments-card-item-container-content .showMore {
|
||||
position: absolute;
|
||||
width: 112rpx;
|
||||
height: 36rpx;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(255, 255, 255, 0.2) 0,
|
||||
rgba(255, 255, 255, 0.45) 20%,
|
||||
rgba(255, 255, 255, 0.7) 25%,
|
||||
rgba(255, 255, 255, 0.9) 30%,
|
||||
rgba(255, 255, 255, 0.95) 35%,
|
||||
#ffffff 50%,
|
||||
#fff 100%
|
||||
);
|
||||
font-size: 26rpx;
|
||||
color: #fa550f;
|
||||
line-height: 36rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.comments-card-item-container-image {
|
||||
margin-top: 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.comments-card-item-container-image .commentImg {
|
||||
border-radius: 8rpx;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.comments-card-item-container-image .commentImg3 {
|
||||
width: 196rpx;
|
||||
height: 196rpx;
|
||||
}
|
||||
|
||||
.comments-card-item-container-image .commentImg2 {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.comments-card-item-container-image .commentImg1 {
|
||||
width: 404rpx;
|
||||
height: 404rpx;
|
||||
}
|
||||
|
||||
.comments-card-item-container .comments-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.comments-title .userName {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.comments-title .commentTime {
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.comments-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 18rpx;
|
||||
}
|
||||
|
||||
.comments-info .rate {
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.comments-info .goods-info-text {
|
||||
font-size: 24rpx;
|
||||
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.comments-card-item-container .comments-card-reply {
|
||||
background-color: #f5f5f5;
|
||||
padding: 24rpx 16rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.comments-card-item-container .comments-card-reply .prefix {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.comments-card-item-container .comments-card-reply .content {
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
}
|
||||
86
mini-program/pages/goods/comments/create/index.js
Normal file
86
mini-program/pages/goods/comments/create/index.js
Normal file
@@ -0,0 +1,86 @@
|
||||
// import { getCommentDetail } from '../../../../services/good/comments/fetchCommentDetail';
|
||||
import Toast from 'tdesign-miniprogram/toast/index';
|
||||
Page({
|
||||
data: {
|
||||
serviceRateValue: 1,
|
||||
goodRateValue: 1,
|
||||
conveyRateValue: 1,
|
||||
isAnonymous: false,
|
||||
uploadFiles: [],
|
||||
gridConfig: {
|
||||
width: 218,
|
||||
height: 218,
|
||||
column: 3,
|
||||
},
|
||||
isAllowedSubmit: false,
|
||||
imgUrl: '',
|
||||
title: '',
|
||||
goodsDetail: '',
|
||||
imageProps: {
|
||||
mode: 'aspectFit',
|
||||
},
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
this.setData({
|
||||
imgUrl: options.imgUrl,
|
||||
title: options.title,
|
||||
goodsDetail: options.specs,
|
||||
});
|
||||
},
|
||||
|
||||
onRateChange(e) {
|
||||
const { value } = e?.detail;
|
||||
const item = e?.currentTarget?.dataset?.item;
|
||||
this.setData({ [item]: value }, () => {
|
||||
this.updateButtonStatus();
|
||||
});
|
||||
},
|
||||
|
||||
onAnonymousChange(e) {
|
||||
const status = !!e?.detail?.checked;
|
||||
this.setData({ isAnonymous: status });
|
||||
},
|
||||
|
||||
handleSuccess(e) {
|
||||
const { files } = e.detail;
|
||||
|
||||
this.setData({
|
||||
uploadFiles: files,
|
||||
});
|
||||
},
|
||||
|
||||
handleRemove(e) {
|
||||
const { index } = e.detail;
|
||||
const { uploadFiles } = this.data;
|
||||
uploadFiles.splice(index, 1);
|
||||
this.setData({
|
||||
uploadFiles,
|
||||
});
|
||||
},
|
||||
|
||||
onTextAreaChange(e) {
|
||||
const value = e?.detail?.value;
|
||||
this.textAreaValue = value;
|
||||
this.updateButtonStatus();
|
||||
},
|
||||
|
||||
updateButtonStatus() {
|
||||
const { serviceRateValue, goodRateValue, conveyRateValue, isAllowedSubmit } = this.data;
|
||||
const { textAreaValue } = this;
|
||||
const temp = serviceRateValue && goodRateValue && conveyRateValue && textAreaValue;
|
||||
if (temp !== isAllowedSubmit) this.setData({ isAllowedSubmit: temp });
|
||||
},
|
||||
|
||||
onSubmitBtnClick() {
|
||||
const { isAllowedSubmit } = this.data;
|
||||
if (!isAllowedSubmit) return;
|
||||
Toast({
|
||||
context: this,
|
||||
selector: '#t-toast',
|
||||
message: '评价提交成功',
|
||||
icon: 'check-circle',
|
||||
});
|
||||
wx.navigateBack();
|
||||
},
|
||||
});
|
||||
13
mini-program/pages/goods/comments/create/index.json
Normal file
13
mini-program/pages/goods/comments/create/index.json
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"navigationBarTitleText": "评价商品",
|
||||
"usingComponents": {
|
||||
"t-image": "/components/webp-image/index",
|
||||
"t-rate": "tdesign-miniprogram/rate/rate",
|
||||
"t-textarea": "tdesign-miniprogram/textarea/textarea",
|
||||
"t-checkbox": "tdesign-miniprogram/checkbox/checkbox",
|
||||
"t-button": "tdesign-miniprogram/button/button",
|
||||
"t-upload": "tdesign-miniprogram/upload/upload",
|
||||
"t-icon": "tdesign-miniprogram/icon/icon",
|
||||
"t-toast": "tdesign-miniprogram/toast/toast"
|
||||
}
|
||||
}
|
||||
90
mini-program/pages/goods/comments/create/index.wxml
Normal file
90
mini-program/pages/goods/comments/create/index.wxml
Normal file
@@ -0,0 +1,90 @@
|
||||
<view class="page-container">
|
||||
<view class="comment-card">
|
||||
<view class="goods-info-container">
|
||||
<view class="goods-image-container">
|
||||
<t-image t-class="goods-image" src="{{imgUrl}}" />
|
||||
</view>
|
||||
<view class="goods-title-container">
|
||||
<view class="goods-title">{{title}}</view>
|
||||
<view class="goods-detail">{{goodsDetail}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rate-container">
|
||||
<text class="rate-title">商品评价</text>
|
||||
<view class="rate">
|
||||
<t-rate
|
||||
value="{{goodRateValue}}"
|
||||
bind:change="onRateChange"
|
||||
size="26"
|
||||
gap="6"
|
||||
color="{{['#ffc51c', '#ddd']}}"
|
||||
data-item="goodRateValue"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="textarea-container">
|
||||
<t-textarea
|
||||
t-class="textarea"
|
||||
maxlength="{{500}}"
|
||||
indicator
|
||||
placeholder="对商品满意吗？评论一下"
|
||||
bind:change="onTextAreaChange"
|
||||
/>
|
||||
</view>
|
||||
<view class="upload-container">
|
||||
<t-upload
|
||||
media-type="{{['image','video']}}"
|
||||
files="{{uploadFiles}}"
|
||||
bind:remove="handleRemove"
|
||||
bind:success="handleSuccess"
|
||||
gridConfig="{{gridConfig}}"
|
||||
imageProps="{{imageProps}}"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="anonymous-box">
|
||||
<t-checkbox bind:change="onAnonymousChange" checked="{{isAnonymous}}" color="#FA4126" />
|
||||
<view class="name">匿名评价</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="comment-card convey-card">
|
||||
<view class="convey-comment-title">物流服务评价</view>
|
||||
<view class="rate-container">
|
||||
<text class="rate-title">物流评价</text>
|
||||
<view class="rate">
|
||||
<t-rate
|
||||
value="{{conveyRateValue}}"
|
||||
bind:change="onRateChange"
|
||||
variant="filled"
|
||||
size="26"
|
||||
gap="6"
|
||||
color="{{['#ffc51c', '#ddd']}}"
|
||||
data-item="conveyRateValue"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="rate-container">
|
||||
<text class="rate-title">服务评价</text>
|
||||
<view class="rate">
|
||||
<t-rate
|
||||
value="{{serviceRateValue}}"
|
||||
bind:change="onRateChange"
|
||||
size="26"
|
||||
gap="6"
|
||||
color="{{['#ffc51c', '#ddd']}}"
|
||||
data-item="serviceRateValue"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="submit-button-container">
|
||||
<t-button
|
||||
content="提交"
|
||||
block
|
||||
shape="round"
|
||||
t-class="submit-button{{isAllowedSubmit ? '' : '-disabled'}}"
|
||||
bind:tap="onSubmitBtnClick"
|
||||
/>
|
||||
</view>
|
||||
<t-toast id="t-toast" />
|
||||
168
mini-program/pages/goods/comments/create/index.wxss
Normal file
168
mini-program/pages/goods/comments/create/index.wxss
Normal file
@@ -0,0 +1,168 @@
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-container .comment-card {
|
||||
padding: 24rpx 32rpx 28rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.comment-card .goods-info-container .goods-image {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.comment-card .goods-info-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.comment-card .goods-info-container .goods-title-container {
|
||||
padding-left: 24rpx;
|
||||
}
|
||||
|
||||
.comment-card .goods-info-container .goods-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.comment-card .goods-info-container .goods-detail {
|
||||
font-size: 24rpx;
|
||||
font-weight: normal;
|
||||
color: #999999;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.comment-card .rate-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
|
||||
.comment-card .rate-container .rate-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.comment-card .textarea-container {
|
||||
margin-top: 22rpx;
|
||||
}
|
||||
|
||||
.comment-card .textarea-container .textarea {
|
||||
height: 294rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.page-container .t-checkbox__bordered {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-container .anonymous-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 52rpx;
|
||||
}
|
||||
|
||||
.page-container .anonymous-box .name {
|
||||
font-size: 28rpx;
|
||||
font-weight: normal;
|
||||
color: #999999;
|
||||
padding-left: 28rpx;
|
||||
}
|
||||
|
||||
.page-container .t-checkbox {
|
||||
padding: 0rpx !important;
|
||||
}
|
||||
|
||||
.page-container .t-checkbox__content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.comment-card .convey-comment-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.convey-card {
|
||||
background-color: #ffffff;
|
||||
margin-top: 24rpx;
|
||||
padding: 32rpx;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
|
||||
}
|
||||
|
||||
.convey-card .rate-container .rate-title {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.page-container .t-checkbox__icon-left {
|
||||
margin-right: 0rpx !important;
|
||||
}
|
||||
|
||||
.submit-button-container {
|
||||
padding: 12rpx 32rpx;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
|
||||
background-color: #ffffff;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.submit-button-container .submit-button {
|
||||
--td-button-default-color: #fff;
|
||||
--td-button-default-bg-color: #fa4126;
|
||||
--td-button-default-border-color: #fa4126;
|
||||
--td-button-default-active-bg-color: #fa42269c;
|
||||
}
|
||||
|
||||
.submit-button-container .submit-button-disabled {
|
||||
--td-button-default-color: #fff;
|
||||
--td-button-default-bg-color: #ccc;
|
||||
--td-button-default-border-color: #ccc;
|
||||
--td-button-default-active-bg-color: rgba(204, 204, 204, 0.789);
|
||||
}
|
||||
|
||||
.page-container .upload-container {
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.page-container .t-upload__wrapper {
|
||||
border-radius: 8rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-container .submmit-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 12;
|
||||
padding: 12rpx 32rpx;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
background-color: #fff;
|
||||
height: 112rpx;
|
||||
}
|
||||
|
||||
.page-container .submmit-bar-button {
|
||||
border-radius: 48rpx !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.page-container .t-upload__close-btn {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
border-bottom-left-radius: 8rpx;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
|
||||
.upload-container .upload-addcontent-slot {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
227
mini-program/pages/goods/comments/index.js
Normal file
227
mini-program/pages/goods/comments/index.js
Normal file
@@ -0,0 +1,227 @@
|
||||
import { fetchComments } from '../../../services/comments/fetchComments';
|
||||
import { fetchCommentsCount } from '../../../services/comments/fetchCommentsCount';
|
||||
import dayjs from 'dayjs';
|
||||
const layoutMap = {
|
||||
0: 'vertical',
|
||||
};
|
||||
Page({
|
||||
data: {
|
||||
pageLoading: false,
|
||||
commentList: [],
|
||||
pageNum: 1,
|
||||
myPageNum: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
myTotal: 0,
|
||||
hasLoaded: false,
|
||||
layoutText: layoutMap[0],
|
||||
loadMoreStatus: 0,
|
||||
myLoadStatus: 0,
|
||||
spuId: '1060004',
|
||||
commentLevel: '',
|
||||
hasImage: '',
|
||||
commentType: '',
|
||||
totalCount: 0,
|
||||
countObj: {
|
||||
badCount: '0',
|
||||
commentCount: '0',
|
||||
goodCount: '0',
|
||||
middleCount: '0',
|
||||
hasImageCount: '0',
|
||||
uidCount: '0',
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
this.getCount(options);
|
||||
this.getComments(options);
|
||||
},
|
||||
async getCount(options) {
|
||||
try {
|
||||
const result = await fetchCommentsCount(
|
||||
{
|
||||
spuId: options.spuId,
|
||||
},
|
||||
{
|
||||
method: 'POST',
|
||||
},
|
||||
);
|
||||
this.setData({
|
||||
countObj: result,
|
||||
});
|
||||
// const { data, code = '' } = result;
|
||||
// if (code.toUpperCase() === 'SUCCESS') {
|
||||
// wx.setNavigationBarTitle({
|
||||
// title: `全部评价(${data.commentCount})`,
|
||||
// });
|
||||
// this.setData({
|
||||
// countObj: data,
|
||||
// });
|
||||
// } else {
|
||||
// wx.showToast({
|
||||
// title: '查询失败，请稍候重试',
|
||||
// });
|
||||
// }
|
||||
} catch (error) {}
|
||||
},
|
||||
generalQueryData(reset) {
|
||||
const { hasImage, pageNum, pageSize, spuId, commentLevel } = this.data;
|
||||
const params = {
|
||||
pageNum: 1,
|
||||
pageSize: 30,
|
||||
queryParameter: {
|
||||
spuId,
|
||||
},
|
||||
};
|
||||
if (
|
||||
Number(commentLevel) === 3 ||
|
||||
Number(commentLevel) === 2 ||
|
||||
Number(commentLevel) === 1
|
||||
) {
|
||||
params.queryParameter.commentLevel = Number(commentLevel);
|
||||
}
|
||||
if (hasImage && hasImage === '1') {
|
||||
params.queryParameter.hasImage = true;
|
||||
} else {
|
||||
delete params.queryParameter.hasImage;
|
||||
}
|
||||
// 重置请求
|
||||
if (reset) return params;
|
||||
|
||||
return {
|
||||
...params,
|
||||
pageNum: pageNum + 1,
|
||||
pageSize,
|
||||
};
|
||||
},
|
||||
async init(reset = true) {
|
||||
const { loadMoreStatus, commentList = [] } = this.data;
|
||||
const params = this.generalQueryData(reset);
|
||||
|
||||
// 在加载中或者无更多数据，直接返回
|
||||
if (loadMoreStatus !== 0) return;
|
||||
|
||||
this.setData({
|
||||
loadMoreStatus: 1,
|
||||
});
|
||||
|
||||
try {
|
||||
const data = await fetchComments(params, {
|
||||
method: 'POST',
|
||||
});
|
||||
const code = 'SUCCESS';
|
||||
if (code.toUpperCase() === 'SUCCESS') {
|
||||
const { pageList, totalCount = 0 } = data;
|
||||
pageList.forEach((item) => {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
item.commentTime = dayjs(Number(item.commentTime)).format(
|
||||
'YYYY/MM/DD HH:mm',
|
||||
);
|
||||
});
|
||||
|
||||
if (Number(totalCount) === 0 && reset) {
|
||||
this.setData({
|
||||
commentList: [],
|
||||
hasLoaded: true,
|
||||
total: totalCount,
|
||||
loadMoreStatus: 2,
|
||||
});
|
||||
return;
|
||||
}
|
||||
const _commentList = reset ? pageList : commentList.concat(pageList);
|
||||
const _loadMoreStatus =
|
||||
_commentList.length === Number(totalCount) ? 2 : 0;
|
||||
this.setData({
|
||||
commentList: _commentList,
|
||||
pageNum: params.pageNum || 1,
|
||||
totalCount: Number(totalCount),
|
||||
loadMoreStatus: _loadMoreStatus,
|
||||
});
|
||||
} else {
|
||||
wx.showToast({
|
||||
title: '查询失败，请稍候重试',
|
||||
});
|
||||
}
|
||||
} catch (error) {}
|
||||
this.setData({
|
||||
hasLoaded: true,
|
||||
});
|
||||
},
|
||||
getScoreArray(score) {
|
||||
var array = [];
|
||||
for (let i = 0; i < 5; i++) {
|
||||
if (i < score) {
|
||||
array.push(2);
|
||||
} else {
|
||||
array.push(0);
|
||||
}
|
||||
}
|
||||
return array;
|
||||
},
|
||||
getComments(options) {
|
||||
const { commentLevel = -1, spuId, hasImage = '' } = options;
|
||||
if (commentLevel !== -1) {
|
||||
this.setData({
|
||||
commentLevel: commentLevel,
|
||||
});
|
||||
}
|
||||
this.setData({
|
||||
hasImage: hasImage,
|
||||
commentType: hasImage ? '4' : '',
|
||||
spuId: spuId,
|
||||
});
|
||||
this.init(true);
|
||||
},
|
||||
changeTag(e) {
|
||||
var { commenttype } = e.currentTarget.dataset;
|
||||
var { commentType } = this.data;
|
||||
if (commentType === commenttype) return;
|
||||
this.setData({
|
||||
loadMoreStatus: 0,
|
||||
commentList: [],
|
||||
total: 0,
|
||||
myTotal: 0,
|
||||
myPageNum: 1,
|
||||
pageNum: 1,
|
||||
});
|
||||
if (commenttype === '' || commenttype === '5') {
|
||||
this.setData({
|
||||
hasImage: '',
|
||||
commentLevel: '',
|
||||
});
|
||||
} else if (commenttype === '4') {
|
||||
this.setData({
|
||||
hasImage: '1',
|
||||
commentLevel: '',
|
||||
});
|
||||
} else {
|
||||
this.setData({
|
||||
hasImage: '',
|
||||
commentLevel: commenttype,
|
||||
});
|
||||
}
|
||||
if (commenttype === '5') {
|
||||
this.setData({
|
||||
myLoadStatus: 1,
|
||||
commentType: commenttype,
|
||||
});
|
||||
this.getMyCommentsList();
|
||||
} else {
|
||||
this.setData({
|
||||
myLoadStatus: 0,
|
||||
commentType: commenttype,
|
||||
});
|
||||
this.init(true);
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
const { total = 0, commentList } = this.data;
|
||||
if (commentList.length === total) {
|
||||
this.setData({
|
||||
loadMoreStatus: 2,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.init(false);
|
||||
},
|
||||
});
|
||||
8
mini-program/pages/goods/comments/index.json
Normal file
8
mini-program/pages/goods/comments/index.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "全部评价",
|
||||
"usingComponents": {
|
||||
"t-tag": "tdesign-miniprogram/tag/tag",
|
||||
"comments-card": "./components/comments-card/index",
|
||||
"t-load-more": "/components/load-more/index"
|
||||
}
|
||||
}
|
||||
50
mini-program/pages/goods/comments/index.wxml
Normal file
50
mini-program/pages/goods/comments/index.wxml
Normal file
@@ -0,0 +1,50 @@
|
||||
<view class="comments-header">
|
||||
<t-tag t-class="comments-header-tag {{commentType === '' ? 'comments-header-active' : ''}}" data-commentType="" bindtap="changeTag">
|
||||
全部({{countObj.commentCount}})
|
||||
</t-tag>
|
||||
<t-tag
|
||||
t-class="comments-header-tag {{commentType === '5' ? 'comments-header-active' : ''}}"
|
||||
wx:if="{{countObj.uidCount !== '0'}}"
|
||||
data-commentType="5"
|
||||
bindtap="changeTag"
|
||||
>
|
||||
自己({{countObj.uidCount}})
|
||||
</t-tag>
|
||||
<t-tag t-class="comments-header-tag {{commentType === '4' ? 'comments-header-active' : ''}}" data-commentType="4" bindtap="changeTag">
|
||||
带图({{countObj.hasImageCount}})
|
||||
</t-tag>
|
||||
<t-tag t-class="comments-header-tag {{commentType === '3' ? 'comments-header-active' : ''}}" data-commentType="3" bindtap="changeTag">
|
||||
好评({{countObj.goodCount}})
|
||||
</t-tag>
|
||||
<t-tag t-class="comments-header-tag {{commentType === '2' ? 'comments-header-active' : ''}}" data-commentType="2" bindtap="changeTag">
|
||||
中评({{countObj.middleCount}})
|
||||
</t-tag>
|
||||
<t-tag t-class="comments-header-tag {{commentType === '1' ? 'comments-header-active' : ''}}" data-commentType="1" bindtap="changeTag">
|
||||
差评({{countObj.badCount}})
|
||||
</t-tag>
|
||||
</view>
|
||||
<view class="comments-card-list">
|
||||
<block wx:for="{{commentList}}" wx:key="index">
|
||||
<comments-card
|
||||
commentScore="{{item.commentScore}}"
|
||||
userName="{{item.userName}}"
|
||||
commentResources="{{item.commentResources || []}}"
|
||||
commentContent="{{item.commentContent}}"
|
||||
isAnonymity="{{item.isAnonymity}}"
|
||||
commentTime="{{item.commentTime}}"
|
||||
isAutoComment="{{item.isAutoComment}}"
|
||||
userHeadUrl="{{item.userHeadUrl}}"
|
||||
specInfo="{{item.specInfo}}"
|
||||
sellerReply="{{item.sellerReply || ''}}"
|
||||
goodsDetailInfo="{{item.goodsDetailInfo || ''}}"
|
||||
/>
|
||||
</block>
|
||||
<t-load-more
|
||||
t-class="no-more"
|
||||
status="{{loadMoreStatus}}"
|
||||
no-more-text="没有更多了"
|
||||
color="#BBBBBB"
|
||||
failedColor="#FA550F"
|
||||
/>
|
||||
</view>
|
||||
|
||||
49
mini-program/pages/goods/comments/index.wxss
Normal file
49
mini-program/pages/goods/comments/index.wxss
Normal file
@@ -0,0 +1,49 @@
|
||||
/* 层级定义
|
||||
@z-index-0: 1;
|
||||
@z-index-1: 100;
|
||||
@z-index-2: 200;
|
||||
@z-index-5: 500;
|
||||
@z-index-component: 1000; // 通用组件级别
|
||||
@z-index-dropdown: @z-index-component;
|
||||
@z-index-sticky: @z-index-component + 20;
|
||||
@z-index-fixed: @z-index-component + 30;
|
||||
@z-index-modal-backdrop:@z-index-component + 40;
|
||||
@z-index-modal:@z-index-component + 50;
|
||||
@z-index-popover:@z-index-component + 60;
|
||||
@z-index-tooltip:@z-index-component + 70;
|
||||
*/
|
||||
/* var() css变量适配*/
|
||||
page {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.comments-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 32rpx 32rpx 0rpx;
|
||||
background-color: #fff;
|
||||
margin-top: -24rpx;
|
||||
margin-left: -24rpx;
|
||||
}
|
||||
|
||||
.comments-header-tag {
|
||||
margin-top: 24rpx;
|
||||
margin-left: 24rpx;
|
||||
height: 56rpx !important;
|
||||
font-size: 24rpx !important;
|
||||
justify-content: center;
|
||||
background-color: #F5F5F5 !important;
|
||||
border-radius: 8rpx !important;
|
||||
border: 1px solid #F5F5F5 !important;
|
||||
}
|
||||
|
||||
.comments-header-active {
|
||||
background-color: #FFECE9 !important;
|
||||
color: #FA4126 !important;
|
||||
border: 1px solid #FA4126 !important;
|
||||
}
|
||||
|
||||
.no-more {
|
||||
padding-left: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
Reference in New Issue
Block a user