coder-xiaomo/epp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity GitHub Gitee

通过微信开发者工具 商城模板 创建新小程序

Browse Source
This commit is contained in:
小墨
2023-03-06 23:52:24 +08:00
parent ada464a8cc
commit c21ff901d5
393 changed files with 52952 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
mini-program/pages/goods/comments/components/comments-card/components/images-videos/assets/play.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

36
mini-program/pages/goods/comments/components/comments-card/components/images-videos/index.js Normal file
View File

@@ -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: {},
});

7
mini-program/pages/goods/comments/components/comments-card/components/images-videos/index.json Normal file
View File

@@ -0,0 +1,7 @@
{
"component": true,
"usingComponents": {
"my-video": "../my-video/index",
"t-image": "/components/webp-image/index"
}
}

15
mini-program/pages/goods/comments/components/comments-card/components/images-videos/index.wxml Normal file
View File

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

68
mini-program/pages/goods/comments/components/comments-card/components/images-videos/index.wxss Normal file
View File

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

55
mini-program/pages/goods/comments/components/comments-card/components/my-video/index.js Normal file
View File

@@ -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;
},
},
});

4
mini-program/pages/goods/comments/components/comments-card/components/my-video/index.json Normal file
View File

@@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

26
mini-program/pages/goods/comments/components/comments-card/components/my-video/index.wxml Normal file
View File

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

21
mini-program/pages/goods/comments/components/comments-card/components/my-video/index.wxss Normal file
View File

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

51
mini-program/pages/goods/comments/components/comments-card/index.js Normal file
View File

@@ -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: {},
});

8
mini-program/pages/goods/comments/components/comments-card/index.json Normal file
View File

@@ -0,0 +1,8 @@
{
"component": true,
"usingComponents": {
"t-rate": "tdesign-miniprogram/rate/rate",
"images-videos": "./components/images-videos",
"t-image": "/components/webp-image/index"
}
}

27
mini-program/pages/goods/comments/components/comments-card/index.wxml Normal file
View File

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

172
mini-program/pages/goods/comments/components/comments-card/index.wxss Normal file
View File

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