deming/pageB/photo/index.vue

<template>
    <view class="photo">
		<view class="status_bar"></view>
        <view class="back">
            <u-icon name="close" color="#999999" :size="30" @click="goBack"></u-icon>
        </view>
        <swiper class="swiper" circular autoplay @change="changeSwiper">
            <swiper-item v-for="(simg,sindex) in list.photo" :key="sindex">
                <image :src="simg.url" mode="widthFix" @tap="viewImage" :data-url="simg.url"></image>
            </swiper-item>
        </swiper>
        <view class="bottom">
            <view class="item" :style="{ width: photo_len * 20 + 100 + 'rpx' }">
                <text>图片</text>
                <view v-for="(item,index) in list.photo" :key="index" :style="{'background-color':index == swiper_id ? '#fff' : '#ede8e8'}"></view>
            </view>
            <view class="username">@{{ list.member_nickname }}</view>
            <view class="title">{{ list.article_title }}</view>
            <view class="info">{{ list.article_content }}</view>
			<view class="box">
				<view class="label" v-for="(label,id) in list.label" :key="id">{{ label.name }}</view>
			</view>
        </view>
		<!-- 用户操作 -->
        <userinfo class="userinfo" :list="list" :cart="cart_type" :comment="is_comment" :num="comment_num" @openCart="openPopup"></userinfo>
		<!-- 评论 -->
		<u-popup v-model="is_comment" class="pl" mode="bottom" border-radius="10" height="700rpx">
			<view class="top">
				<text>评论</text>
				<u-icon name="arrow-down" color="#333" size="28" @click="is_comment=false"></u-icon>
			</view>
			<scroll-view class="scroll-box" scroll-y="true" lower-threshold="50" @scrolltolower="scrollBottom">
				<block v-for="(item,index) in commentList" :key="index">
					<view class="box">
						<image :src="item.member_avatar" mode="aspectFill"></image>
						<view class="info">
							<text>{{ item.member_nickname }}</text>
							<text class="time">{{ item.create_time }}</text>
						</view>
						<text class="reply" @click="openKeyInput(item,index)">回复</text>
					</view>
					<view class="content">
						{{ item.content }}
					</view>
                    <view class="child-content">
                        <view class="child-box" v-for="(child,cid) in allList[item.id]" :key="cid">
                            <view class="info">
                                <image :src="child.member_avatar" mode=""></image>
                                <text>{{ child.member_nickname }}</text>
                                <u-icon v-if="!child.is_nickanme" class="icon" name="play-right-fill" color="#666" size="10rpx"></u-icon>
                                <text v-if="!child.is_nickanme">{{ child.reply_member_nickname }}</text>
                            </view>
                            <view class="child_content">{{ child.content }}</view>
                        </view>
                        <view class="more-reply" v-if="item.reply_count" @click="getReplyList(item.id)">展开更多回复<u-icon name="arrow-down"></u-icon></view>
                    </view>
				</block>
                <view class="no-data" v-if="!commentList.length">还没有评论，快来评论吧！</view>
				<u-loadmore v-else :status="status" icon-type="iconType" margin-top="50" margin-bottom="50" :load-text="loadText" />
			</scroll-view>
			<view class="editing" @touchend.prevent="openKeyInput">
				<input type="text" value="" :placeholder="edit_text" disabled="disabled" />
				<text>发送</text>
			</view>
		</u-popup>
		<!-- 评论box -->
		<u-popup v-model="is_edit" mode="bottom" border-radius="10" height="100rpx">
			<view class="edit-box">
				<input type="text" :focus="is_focus" :placeholder="edit_text_other" @focus="focus" v-model="send_value">
				<text @click="sendComment">发送</text>
			</view>
		</u-popup>
		<!-- 购物车 -->
		<u-popup v-if="cart_len > 1" class="cart" v-model="cart_type" mode="bottom" length="782" border-radius="20">
			<view class="top">
				<text>全部商品</text>
		        <u-icon name="close" color="#999999" :size="30" @click="cart_type = false"></u-icon>
			</view>
		    <scroll-view :scroll-y="true" class="scroll-box">
		        <view v-for="(item,index) in list.goods" :key="index" class="item" @click="gotoInfo(item.goods_id)">
					<image :src="item.goods_image" mode="aspectFill"></image>
					<view>
						<text class="title">{{ item.goods_advword }}</text>
						<text class="name">{{ item.goods_name }}</text>
						<text class="price">{{ item.goods_promotion_price }}</text>
					</view>
				</view>
		    </scroll-view>
		</u-popup>
		<!-- 单个 -->
		<view class="good-one" v-else v-show="cart_type">
			<view class="box" v-for="(item,index) in list.goods" :key="index" @click="gotoInfo(item.goods_id)">
				<image :src="item.goods_image" mode="aspectFill"></image>
				<view>
					<view class="title u-line-1">{{ item.goods_advword }}</view>
					<view class="content u-line-2">{{ item.goods_name }}</view>
					<view class="price">￥{{ item.goods_promotion_price }}</view>
				</view>
			</view>
		</view>
        <!-- <shoplist :list="list.goods" v-show="list.goods.length > 1 && cart_type" @hideCart="hideCart"></shoplist> -->
    </view>
</template>
<style lang="scss" scoped>
.photo{
    width: 100%;
    height: 100%;
    background-color: #000000;
    .back{
        padding-top: 28rpx;
        padding-right: 31rpx;
        text-align: right;
    }
    .swiper{
        width: 750rpx;
        height: 700rpx;
        margin-top: 140rpx;
        image{
            width: 100%;
            height: 100%;
        }
    }
    .bottom{
		margin-top: 180rpx;
        padding: 20rpx 30rpx;
        background-color: #fff;
        .item{
            display: flex;
            align-items: center;
            padding: 8rpx 16rpx;
            font-size: 24rpx;
            color: #fff;
            border-radius: 10rpx;
            background:rgba(153,153,153,.5);
            >view{
                width: 12rpx;
                height: 12rpx;
                border-radius: 50%;
                margin-left: 10rpx;
            }
        }
        .username{
			margin: 20rpx 0;
            font-size: 36rpx;
            color: #333;

        }
        .title{
            font-size: 28rpx;
            color: #333;
			line-height: 46rpx;
        }
        .info{
			margin: 20rpx 0;
            line-height: 1.2;
            font-size: 28rpx;
        }
		.box {
			display: flex;
			flex-wrap: wrap;
			.label {
				padding: 6rpx 10rpx;
				margin: 0 10rpx 10rpx 0;
				font-size: 24rpx;
				color: #fff;
				border-radius: 6rpx;
				background-color: #000000;
				opacity: 0.5;
			}
		}
    }
    .userinfo{
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translateY(-285rpx);
    }
	.pl {
		.top {
			z-index: 1000;
			position: fixed;
			top: 0;
			width: 100%;
			height: 88rpx;
			padding: 0 20rpx;
			line-height: 88rpx;
			background-color: #ECECEC;
			& > text {
				margin-right: 280rpx;
				color: #333;
				font-size: 30rpx;
				font-weight: 500;
			}
		}
		.scroll-box {
			z-index: 99;
			margin: 88rpx 0 100rpx 0;
			height: 100%;
			.box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;
				& > image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}
				.info {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					height: 60rpx;
					font-size: 26rpx;
					color: #333;
					.time {
						font-size: 22rpx;
						color: #999;
					}
				}
				.reply {
					font-size: 26rpx;
					color: #333;
				}
			}
			.content {
				padding: 0 20rpx 10rpx 90rpx;
			}
            .child-content {
                margin: 6rpx 90rpx 6rpx;
                .child-box {
                    .info {
                        display: flex;
                        align-items: center;
                        margin-bottom: 10rpx;
                        color: #666;
                        font-size: 20rpx;
                        & > image {
                            flex-shrink: 0;
                            width: 30rpx;
                            height: 30rpx;
                            margin-right: 10rpx;
                            border-radius: 50%;
                        }
                        .icon {
                            margin: 0 10rpx;
                        }
                    }
                    .child_content {
                        margin: 18rpx 0 18rpx 30rpx;
                    }
                }
                .more-reply {
                    font-size: 22rpx;
                    color: #999;
                }
            }
		}
		.no-data {
			margin-top: 200rpx;
            text-align: center;
		}
		.editing {
            z-index: 1000;
			position: fixed;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			border-top: 1px solid #ececec;
			background-color: #fff;
			& > input {
				width: 80%;
				height: 50rpx;
				padding: 0 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
			}
		}
	}
	// 弹出输入框
	.edit-box {
		display: flex;
		align-items: center;
		height: 90rpx;
		& > input {
			width: 80%;
			padding: 4rpx 20rpx;
			border-radius: 20rpx;
		}
	}
	.cart {
		.top{
			z-index: 1000;
			position: fixed;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			border-bottom: 1rpx solid #ececec;
			background-color: #fff;
			>text{
				font-size: 30rpx;
				color: #333;
			}
		}
		.scroll-box {
			margin-top: 88rpx;
			.item {
				display: flex;
				padding: 20rpx;
				border-bottom: 1px solid #ECECEC;
				& > image {
					flex-shrink: 0;
					width: 160rpx;
					height: 160rpx;
					margin-right: 14rpx;
					border-radius: 10rpx;
				}
				& > view {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					color: #333;
					font-size: 28rpx;
					.title {
					}
					.name {
						width: 500rpx;
						height: 80rpx;
						font-size: 24rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
					}
					.price {
						color: #FF3131;
					}
				}
			}
		}
	}
    .good-one{
        z-index: 999;
        position: absolute;
        right: 139rpx;
        top: 54%;
        transform: translateY(100rpx);
		.box {
			display: flex;
			align-items: center;
			width: 440rpx;
			height: 200rpx;
			padding: 20rpx;
			font-size: 28rpx;
			color: #fff;
			border-radius: 10rpx;
			background-color: rgba(0,0,0,0.5);
			& > image {
				flex-shrink: 0;
				width: 160rpx;
				height: 100%;
				margin-right: 10rpx;
				border-radius: 10rpx;
			}
			& > view {
				width: 200rpx;
			}
			.title {}
			.content {
				height: 60rpx;
				margin: 10rpx 0;
                line-height: 30rpx;
				font-size: 24rpx;
			}
			.price {
				color: #FF3131;
			}
		}
    }
}
</style>
<script>
import userinfo from "../components/userinfo/index" // 点赞组件
import contentBox from "../components/shpoone/index" // 评论
// import shoplist from "../components/shoplist/index" // 商品列表

export default {
    name:"photo",
    components:{
        userinfo
    },
    data(){
        return {
            list:{},
			swiper_id: "",
            page: 0, // 主评论
            page_: [], // 子评论
			cart_type: false, // 显示购物车
			is_comment: false, // 显示评论
			is_focus: false, // 聚焦
			is_edit: false, // 输入框
			send_value: "", // 输入的值
			cartList: [],
			cart_len: 0,
			photo_len: 0,
            comment_num: 0,
			edit_text: "有爱评论，说点好听的 ~",
			edit_text_other: "有爱评论，说点好听的 ~",
			commentList: [], // 评论
            allList: [], // 全部子评论
            status: 'loadmore',
            iconType: 'circle',
            loadText: {
                loadmore: '轻轻上拉',
                loading: '努力加载中',
                nomore: '暂时没有更多了',
                no: '评论'
            }
        }
    },
	onLoad(option){
	    this.article_id = option.id;
	    this.articleInfo(this.article_id);
	},
    // 监听返回按钮
    onBackPress() {
        if (this.cart_type) {
            this.cart_type = !this.cart_type;
        } else if (this.is_edit) {
            this.is_edit = !this.is_edit;
        } else if (this.is_comment) {
            this.is_comment = !this.is_comment;
        } else {
            return false;
        }
        return true;
    },
    methods:{
		// 发现详情
        articleInfo(article_id){
            this.$u.api.articleInfo({article_id}).then((res)=>{
                this.list = res.data.info;
				this.cart_len = res.data.info.goods.length;
                this.photo_len = res.data.info.photo.length;
            })
        },
		// 改变swiper
		changeSwiper(e) {
			// console.log(e.detail.current);
			this.swiper_id = e.detail.current; // 储存swiper id
		},
		// 更改弹框状态
		openPopup(data) {
			// console.log(data);
			this.cart_type = data.cart;
			this.is_comment = data.comment;
			if (this.is_comment) {
                this.page = 0;
				this.getComment();
			}
		},
		// 获取评论
		getComment() {
			this.$u.post("article/articleCommentList",{
				article_id: this.article_id,
				page: this.page,
			}).then(res => {
                this.status = "loading";
				// console.log(res);
                if (res.errCode == 0) {
                    if (this.commentList.length < 8) {
                        this.status = "nomore";
                    }
                    if (this.page == 0) {
                    	this.commentList = res.data;
                    } else if (res.data.length == 0 && this.page > 0) {
                        this.status = "nomore";
                    } else {
                        this.commentList = this.commentList.concat(res.data);
                    }
                    this.page++;
                }
			})
		},
		// 打开评论输入
		openKeyInput(data,index) {
			// console.log(data);
			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);
		},
		// 发布评论
		sendComment() {
			this.$u.post("article/articleAddComment",{
				article_id: this.article_id,
				content: this.send_value,
				pid: this.pid,
				reply_id: this.reply_id,
			}).then(res => {
				// console.log(res.data.data);
				if (res.errCode == 0) {
                    this.send_value = "";
                    this.comment_num = res.data.num;
                    // console.log(this.comment_num);
					this.is_edit = false;
                    if (res.data.data.pid) {
                        this.commentList[this.comment_id].reply_count = true;
                        this.allList[this.comment_id].unshift(res.data.data);
                    } else {
                        this.commentList.unshift(res.data.data);
                    }
				} else {
					this.$u.toast(res.message);
				}
			})
		},
        // 发现回复列表
        getReplyList(id) {
            this.page_[id] = 0;            
            if (!this.page_[id] === 0) {
            }
            console.log(this.page_[id]);
            this.$u.post("article/articleReplyList", {id: id, page: this.page_[id]}).then(res => {
                console.log(this.page_);
                if (res.errCode == 0) {
                    this.page_[id]++;
                    this.allList[id] = res.data;
                }
            })
        },
		// 预览图片
		viewImage(e) {
			let arr = [];
			this.list.photo.forEach(item => {
				arr.push(item.url);
			})
			uni.previewImage({
				urls: arr,
				current: e.currentTarget.dataset.url,
			})
		},
        // 评论滚动到底部
        scrollBottom(e) {
            this.getComment();
        },
		// 跳转到商品
		gotoInfo(id) {
			console.log(id);
			uni.navigateTo({
				url: "/pageB/sdetails/index?id=" + id + "&type=" + 1,
			})
		},
		goBack() {
			uni.navigateBack({
				delta: 1
			})
		},
		focus() {
			setTimeout(function(){
				uni.showSoftKeybord;
			}, 200)
		}
    },
}
</script>