This commit is contained in:
Gdpao 2020-08-12 15:35:47 +08:00
parent 1db45d40a7
commit 22812469a8
4 changed files with 136 additions and 50 deletions

View File

@ -41,7 +41,6 @@
@import "/static/css/normalize";
/* 顶部自定义导航留白 */
.status_bar {
z-index: 1000;
width: 100%;
height: var(--status-bar-height);
}

View File

@ -531,9 +531,11 @@ export default {
this.comment_num = res.data.num;
// console.log(this.comment_num);
this.is_edit = false;
if (res.data.data.pid) {
console.log(res.data.data.reply_id);
if (res.data.data.reply_id) {
this.commentList[this.comment_id].reply_count = true;
this.allList[this.comment_id].unshift(res.data.data);
console.log(this.allList,111);
} else {
this.commentList.unshift(res.data.data);
}

View File

@ -29,18 +29,18 @@
</view>
</cover-view>
<!-- 单个商品 -->
<cover-view class="good-one" v-if="cart_len == 1">
<view class="one-list" v-for="(item,index) in list.goods" :key="index">
<cover-view class="good-one" v-if="cart_len == 1 && cart_type">
<view class="one-list" v-for="(item,index) in list.goods" :key="index" @click="goGoodInfo(item.goods_id)">
<image class="one-image" :src="item.goods_image" mode=""></image>
<view class="one-box">
<view class="title-one">{{ item.goods_advword }}</view>
<view class="content-one">{{ item.goods_name }}</view>
<view class="good-price">¥{{ item.goods_promotion_price }}</view>
<text class="title-one">{{ item.goods_advword }}</text>
<text class="content-one">{{ item.goods_name }}</text>
<text class="good-price">¥{{ item.goods_promotion_price }}</text>
</view>
</view>
</cover-view>
<!-- 遮罩层 -->
<cover-view class="mask" @click.stop="stopClick" :style="videoSize" v-if="is_comment || cart_type">
<cover-view class="mask" @click.stop="stopClick" :style="videoSize" v-if="is_edit || is_comment || cart_type && cart_len >= 2">
<!-- 评论 -->
<cover-view class="content-box" v-if="is_comment" ref="contentBox">
<view class="content-title">
@ -57,14 +57,15 @@
<text class="comment-time">{{ item.create_time }}</text>
</view>
</view>
<text class="reply">回复</text>
<text class="reply" @click="openKeyInput(item,index)">回复</text>
</view>
<view class="content-main">
<text class="content-style">{{ item.content }}</text>
</view>
</view>
<view class="send-box">
<input class="send-val" type="text" value="" />
<input class="send-val" type="text" :placeholder="edit_text" placeholder-class="placeholder-class"
disabled="true" @blur="blue" @click="openKeyInput" value="" />
<text class="btn-send">发送</text>
</view>
<loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
@ -73,6 +74,12 @@
</loading>
</scroller>
</cover-view>
<!-- 评论框 -->
<cover-view class="edit-box" v-if="is_edit">
<input class="edit-input" type="text" value="" :focus="is_focus" :placeholder="edit_text" placeholder-class="placeholder-class"
v-model="send_value" />
<text class="btn-send" @click="sendComment">发送</text>
</cover-view>
<!-- 购物车 -->
<cover-view class="cart-box" v-if="cart_type">
<view class="cart-title">
@ -89,7 +96,7 @@
</view>
</view>
</view>
<loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
<loading v-if="0" class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
<loading-indicator class="indicator"></loading-indicator>
<text class="indicator-text">努力加载中</text>
</loading>
@ -119,10 +126,19 @@
fixTop: 0,
list: {},
labelLen: [],
cart_len: 0, // 购物车个数
cart_type: false, // 显示购物车
is_comment: false, // 显示评论
is_edit: false, // 显示输入
is_focus: false, //
comment_num: 0, // 评论数
edit_text: "有爱评论,说点好听的 ~",
edit_text_other: "有爱评论,说点好听的 ~",
pid: 0, // 主键
reply_id: 0, // 回复id
page: 0,
comment_id: 0,
send_value: "", // 评论
commentList: [], // 评论列表
src: "",
is_play: true,
@ -170,6 +186,7 @@
this.list = res.data.data.info;
this.src = res.data.data.info.video_path;
this.cart_len = res.data.data.info.goods.length;
console.log(this.cart_len);
let item = res.data.data.info.label;
let arr = [];
item.forEach(data => {
@ -217,11 +234,21 @@
pid: this.pid,
reply_id: this.reply_id,
},
header: {
Authorization: 'Bearer' + ' ' + uni.getStorageSync('token')
},
success: (res) => {
if (res.data.errCode == 0) {
this.send_value = "";
this.comment_num = res.data.num;
console.log(res.data);
if (res.data.data.data.reply_id) {
// this.commentList[this.comment_id].reply_count = true;
// this.allList[this.comment_id].unshift(res.data.data);
// console.log(this.allList, 111);
} else {
this.commentList.unshift(res.data.data.data);
}
console.log(this.commentList);
} else {
uni.showToast({
title: res.data.message,
@ -288,6 +315,9 @@
// 打开弹窗
openPopup(data) {
// console.log(data);
if (this.cart_len >= 2) {
}
this.cart_type = data.cart;
this.is_comment = data.comment;
if (this.is_comment) {
@ -296,9 +326,33 @@
// this.is_play = true;
}
},
// 打开评论输入
openKeyInput(data,index) {
console.log(this.is_focus);
this.is_edit = true;
setTimeout(() => {
this.is_focus = true;
}, 200)
this.comment_id = index;
if (data.id) {
this.edit_text_other = "回复@" + data.member_nickname;
this.pid = data.id;
this.reply_id = data.member_id;
} else {
this.edit_text_other = "有爱评论,说点好听的 ~";
this.pid = "";
this.reply_id = "";
}
// console.log(this.pid, this.edit_text_other);
},
blue() {
this.is_focus = false;
console.log(111);
},
// 关闭评论
closeComment() {
this.is_comment = false;
this.is_edit = false;
// console.log(this.is_comment,this.is_play);
// if (!this.is_comment && this.is_play) {
// console.log(1);
@ -316,7 +370,7 @@
// 跳转
goGoodInfo(id) {
uni.navigateTo({
url: "/pageB/sdetails/index?id=" + id + "&type=" + 1,
url: "/pageB/sdetails/index?id=" + id + "&type=" + 1,
})
},
// stop
@ -376,44 +430,47 @@
border-radius: 10rpx;
background-color: rgba(255, 255, 255, .6);
}
.good-one {
position: absolute;
bottom: 300rpx;
right: 100rpx;
width: 450rpx;
position: fixed;
bottom: 260rpx;
right: 160rpx;
width: 420rpx;
padding: 20rpx;
border-radius: 10rpx;
background-color: rgba(0,0,0,0.6);
background-color: rgba(0, 0, 0, 0.6);
}
.one-list {
flex-direction: row;
}
.one-image {
width: 160rpx;
height: 160rpx;
margin-right: 20rpx;
border-radius: 4rpx;
}
.one-box {
justify-content: space-between;
justify-content: space-around;
color: #333;
}
.title-one {
width: 100rpx;
width: 200rpx;
font-size: 28rpx;
color: #fff;
lines: 1;
text-overflow: ellipsis;
}
.content-one {
width: 100rpx;
width: 200rpx;
font-size: 24rpx;
color: #fff;
lines: 2;
text-overflow: ellipsis;
}
.mask {
@ -431,6 +488,7 @@
left: 0;
width: 750rpx;
height: 700rpx;
padding-bottom: 50rpx;
margin-bottom: 88rpx;
background-color: #fff;
}
@ -529,6 +587,30 @@
color: #333;
}
.edit-box {
/* #ifdef H5 */
display: flex;
/* #endif */
z-index: 10000;
position: fixed;
bottom: 0;
left: 0;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 750rpx;
height: 88rpx;
padding: 0 20rpx;
background-color: #fff;
}
.edit-input {
width: 600rpx;
height: 88rpx;
font-size: 24rpx;
color: #333;
}
.cart-box {
z-index: 99;
position: fixed;
@ -549,33 +631,35 @@
border-bottom-width: 1rpx;
background-color: #fff;
}
.cart-list {
}
.cart-list {}
.cart-list-header {
padding: 20rpx;
flex-direction: row;
border-bottom-width: 1rpx;
border-bottom-color: #ececec;
}
.goods-img {
width: 160rpx;
height: 160rpx;
margin-right: 10rpx;
border-radius: 10rpx;
margin-right: 20rpx;
}
.goods-info {
justify-content: space-around;
}
.good-title {
width: 500rpx;
color: #333;
font-size: 30rpx;
lines: 2;
text-overflow: ellipsis;
}
.good-price {
font-size: 28rpx;
color: #FF3131;
@ -624,7 +708,6 @@
}
.label {
lines: 3;
width: 100rpx;
height: 40rpx;
padding: 4rpx 10rpx;
@ -632,6 +715,7 @@
margin-bottom: 10rpx;
font-size: 26rpx;
text-align: center;
line-height: 38rpx;
color: #666666;
border-radius: 10rpx;
background-color: rgba(255, 255, 255, .6);
@ -655,4 +739,9 @@
height: 30rpx;
color: #999;
}
.placeholder-class {
font-size: 13px;
color: #666;
}
</style>

View File

@ -1,7 +1,7 @@
<template>
<view>
<view class="status_bar"></view>
<view class="index" @touchmove.stop.prevent="moveHandle">
<view class="index">
<view class="top">
<view class="sosuo" @click="goSearch">
<u-icon name="search" color="#555" size="34rpx"></u-icon>
@ -98,11 +98,7 @@
width: 750rpx;
display: flex;
flex-direction: column;
height: 100vh;
/* #ifdef APP-PLUS */
padding-bottom: 88rpx;
/* #endif */
overflow: hidden;
height: 100vh;
.top {
z-index: 10000;
@ -135,9 +131,8 @@
.card {
width: 100%;
height: 100%;
margin-top: 88rpx;
// pointer-events: none;
height: calc(100vh + 500rpx);
padding-top: 88rpx;
.box {
width: 100%;
@ -147,17 +142,18 @@
.list {
display: flex;
padding-bottom: 50rpx;
margin-bottom: 50rpx;
// height: 100vh;
// padding-bottom: 100rpx;
// margin-bottom: 50rpx;
}
}
.tuijian {
width: 750rpx;
padding: 30rpx;
margin-left: -30rpx;
height: 400rpx;
background-color: #ececec;
padding: 30rpx;
.title {
width: 100%;