|
@@ -1,197 +1,69 @@
|
|
|
<template>
|
|
|
<view class="container special-column">
|
|
|
- <view class="tab-content" v-if="isAuthor">
|
|
|
- <view class="item" v-for="item in tabList" :key="item.value" @click="tabClickHandler(item)">
|
|
|
- {{ item.name }}
|
|
|
- <view class="line-active" v-if="tabActive == item.value"> </view>
|
|
|
+ <view class="top-content">
|
|
|
+ <view class="global_card_content column-author" @click="goColumnAuthor">
|
|
|
+ <text>专栏作者</text>
|
|
|
+ <van-icon name="arrow" color="#999999" size="16" />
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="item-ul" v-if="tabActive == 1">
|
|
|
- <view class="item-li" v-for="item in specialList" :key="item.Id" @click="goDetailPages(item)">
|
|
|
- <view class="item-title"> {{ item.SpecialName }}</view>
|
|
|
- <view class="item-name-time">
|
|
|
- <view class="name">
|
|
|
- <image :src="item.HeadImg"></image>
|
|
|
- <text> {{ item.NickName }}</text>
|
|
|
- </view>
|
|
|
- <view class="time"> {{ item.LatestPublishDate }}</view>
|
|
|
+ <view class="global_card_content column-my" @click="goColumnMy" v-if="isAuthor">
|
|
|
+ <text>我的专栏</text>
|
|
|
+ <view class="is-info">
|
|
|
+ <view v-if="!isImproveInformation">待完善信息</view>
|
|
|
+ <van-icon name="arrow" color="#999999" size="16" />
|
|
|
</view>
|
|
|
- <view class="item-content"> 专栏介绍: {{ item.Introduction }} </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="set-up-info" v-if="tabActive == 2">
|
|
|
- <block v-if="(authorDetail.NickName || authorDetail.SpecialName) && isEditInfo">
|
|
|
- <info-card :authorDetail="authorDetail" pagesType="专栏详情" @editColumnHandler="editColumnHandler" />
|
|
|
- <view class="column-list-content">
|
|
|
- <column-list-content :authorDetail="authorDetail" :mySpecialList="mySpecialList" @upDateCollectHandler="upDateCollectHandler" />
|
|
|
- </view>
|
|
|
- <view class="write-note-button">
|
|
|
- <view class="draft" @click="goContentPage"> 内容中心</view>
|
|
|
- <view class="release" @click="goReleaseContent"> 发布新内容</view>
|
|
|
- </view>
|
|
|
- </block>
|
|
|
- <block v-else>
|
|
|
- <view class="info-name info-box">
|
|
|
- <block v-if="isEditInfo">
|
|
|
- <text class="seting-txt">首次进入我的专栏</text>
|
|
|
- <text class="seting-txt">请设置您的专栏信息</text>
|
|
|
- </block>
|
|
|
- <text class="seting-txt" v-else>编辑专栏</text>
|
|
|
- <input v-model="columnName" placeholder="请输入专栏名称(最多12个字)" />
|
|
|
- <input v-model="columnNickname" placeholder="请输入昵称(最多12个字)" />
|
|
|
- </view>
|
|
|
- <view class="set-up-lable info-box">
|
|
|
- <view class="top-box">
|
|
|
- <view class="lable-txt">
|
|
|
- 专栏标签
|
|
|
- <text>(选填)</text>
|
|
|
- </view>
|
|
|
- <view v-if="columnLableList.length < 6" class="new-lable" @click="addlableShow = true">+ 新建标签</view>
|
|
|
- </view>
|
|
|
- <view class="column-lable">
|
|
|
- <view class="lable-item" v-for="(item, index) in columnLableList" :key="index">
|
|
|
- <text>{{ item }}</text>
|
|
|
- <van-icon name="cross" @click="deleteLablehandle(index)" />
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="set-up-info info-box" style="height: 480rpx">
|
|
|
- <view class="lable-txt"> 专栏介绍 </view>
|
|
|
- <u-input :maxlength="30" v-model="columnIntroduce" type="textarea" :clearable="false" placeholder="请输入专栏介绍 " height="300" class="ipt" />
|
|
|
- </view>
|
|
|
- <view class="my-btn" @click="infoDetermineHandler"> {{ isEditInfo ? "进入我的专栏" : "保存" }} </view>
|
|
|
- </block>
|
|
|
+ <view class="column-list-content">
|
|
|
+ <column-list-content :mySpecialList="mySpecialList" @upDateCollectHandler="upDateCollectHandler" />
|
|
|
+ <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="page_no > 1" />
|
|
|
</view>
|
|
|
- <u-modal
|
|
|
- v-model="addlableShow"
|
|
|
- :show-title="false"
|
|
|
- show-cancel-button
|
|
|
- confirm-text="确定"
|
|
|
- cancel-text="取消"
|
|
|
- :content-style="{ fontSize: '32rpx' }"
|
|
|
- :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
|
|
|
- :confirm-style="{ fontWeight: '700' }"
|
|
|
- @confirm="confirmModal"
|
|
|
- @cancel="cancelModal"
|
|
|
- >
|
|
|
- <view class="slot-content slot-content-text">
|
|
|
- <text class="add-lable-txt">新建标签</text>
|
|
|
- <input v-model="addLableName" placeholder="请输入标签名称(最多8个字)" />
|
|
|
- </view>
|
|
|
- </u-modal>
|
|
|
<Loading />
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import ColumnListContent from "../components/columnListContent.vue";
|
|
|
-import infoCard from "../components/infoCard.vue";
|
|
|
import { purchaserApi } from "@/config/api";
|
|
|
export default {
|
|
|
- components: { infoCard, ColumnListContent },
|
|
|
+ components: { ColumnListContent },
|
|
|
+
|
|
|
data() {
|
|
|
return {
|
|
|
- tabList: [
|
|
|
- { name: "专栏列表", value: "1" },
|
|
|
- { name: "我的专栏", value: "2" },
|
|
|
- ],
|
|
|
- specialList: [], // 专栏列表
|
|
|
- mySpecialList: [], // 专栏列表
|
|
|
- isAuthor: false, // 是否是作者
|
|
|
- authorDetail: {}, // 作者的详情信息
|
|
|
- tabActive: "1",
|
|
|
- addlableShow: false,
|
|
|
- columnName: "",
|
|
|
- columnNickname: "",
|
|
|
- columnIntroduce: "",
|
|
|
- columnLableList: [],
|
|
|
- addLableName: "",
|
|
|
- isEditInfo: true,
|
|
|
- refresh:false
|
|
|
+ mySpecialList: [],
|
|
|
+ isAuthor: true,
|
|
|
+ isImproveInformation: true,
|
|
|
+ refresh: false, //正在下拉
|
|
|
+ page_no: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ status: "loadmore",
|
|
|
+ loadText: {
|
|
|
+ loadmore: "上拉加载更多",
|
|
|
+ loading: "加载中",
|
|
|
+ nomore: "已经到底了",
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- // top标签点击事件
|
|
|
- tabClickHandler(item) {
|
|
|
- this.tabActive = item.value;
|
|
|
+ // 去往专栏作者
|
|
|
+ goColumnAuthor() {
|
|
|
+ uni.navigateTo({ url: "/pages-purchaser/columnAuthor/columnAuthor" });
|
|
|
},
|
|
|
- // 添加标签的确认事件
|
|
|
- confirmModal() {
|
|
|
- if (!this.addLableName) return this.$util.toast("未添加标签");
|
|
|
- this.columnLableList.push(this.addLableName.slice(0, 8));
|
|
|
- this.addLableName = "";
|
|
|
+ // 去往我的专栏
|
|
|
+ goColumnMy() {
|
|
|
+ uni.navigateTo({ url: "/pages-purchaser/myColumnDetail/myColumnDetail" });
|
|
|
},
|
|
|
- // 添加标签的取消事件
|
|
|
- cancelModal() {
|
|
|
- this.addLableName = "";
|
|
|
- },
|
|
|
- // 信息填写完成 进入我的专栏
|
|
|
- async infoDetermineHandler() {
|
|
|
- if (this.columnName && this.columnNickname && this.columnIntroduce) {
|
|
|
- const res = await purchaserApi.yanxuanSpecialAuthorSave({
|
|
|
- SpecialName: this.columnName.slice(0, 12),
|
|
|
- NickName: this.columnNickname.slice(0, 12),
|
|
|
- Introduction: this.columnIntroduce,
|
|
|
- Label: this.columnLableList.join(","),
|
|
|
- UserId: this.authorDetail.UserId,
|
|
|
- });
|
|
|
- if (res.Ret === 200) {
|
|
|
- this.getAuthorDetail();
|
|
|
- this.isEditInfo = true;
|
|
|
- }
|
|
|
- } else {
|
|
|
- let str = !this.columnName ? "专栏名称" : !this.columnNickname ? "专栏昵称" : !this.columnIntroduce ? "专栏介绍" : "";
|
|
|
- this.$util.toast("请输入" + str);
|
|
|
- }
|
|
|
- },
|
|
|
- // 删除新建标签
|
|
|
- deleteLablehandle(index) {
|
|
|
- this.columnLableList.splice(index, 1);
|
|
|
- },
|
|
|
- async getColumnList() {
|
|
|
- const res = await purchaserApi.yanxuanSpecialAuthorList();
|
|
|
+ async getYanxuanSpecialList() {
|
|
|
+ const res = await purchaserApi.yanxuanSpecialList({
|
|
|
+ PageSize: this.pageSize,
|
|
|
+ CurrentIndex: this.page_no,
|
|
|
+ });
|
|
|
if (res.Ret === 200) {
|
|
|
- this.specialList = res.Data.List || [];
|
|
|
+ this.status = res.Data.Paging.IsEnd ? "nomore" : "loadmore";
|
|
|
this.isAuthor = res.Data.IsAuthor;
|
|
|
- this.isAuthor && this.getAuthorDetail();
|
|
|
- if (this.refresh) {
|
|
|
- uni.stopPullDownRefresh();
|
|
|
- this.refresh = false;
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- async getAuthorDetail() {
|
|
|
- const res = await purchaserApi.yanxuanSpecialAuthorDetail();
|
|
|
- if (res.Ret === 200) {
|
|
|
- this.authorDetail = res.Data || {};
|
|
|
- const myRes = await purchaserApi.yanxuanSpecialList({
|
|
|
- UserId: this.authorDetail.UserId,
|
|
|
- });
|
|
|
- if (myRes.Ret === 200) {
|
|
|
- this.mySpecialList = myRes.Data.List || [];
|
|
|
- }
|
|
|
+ this.isImproveInformation = res.Data.IsImproveInformation;
|
|
|
+ this.mySpecialList = this.page_no == 1 ? res.Data.List || [] : this.mySpecialList.concat(res.Data.List);
|
|
|
}
|
|
|
},
|
|
|
- // 去往专栏详情
|
|
|
- goDetailPages(item) {
|
|
|
- uni.navigateTo({ url: "/pages-purchaser/columnDetail/columnDetail?id=" + item.UserId });
|
|
|
- },
|
|
|
- // 去往内容中心
|
|
|
- goContentPage() {
|
|
|
- uni.navigateTo({ url: "/pages-purchaser/contentAllPage/contentAllPage" });
|
|
|
- },
|
|
|
- // 去发布新内容
|
|
|
- goReleaseContent() {
|
|
|
- uni.navigateTo({ url: "/pages-purchaser/writeNote/writeNote" });
|
|
|
- },
|
|
|
- // 编辑专栏
|
|
|
- editColumnHandler() {
|
|
|
- this.columnName = this.authorDetail.SpecialName;
|
|
|
- this.columnNickname = this.authorDetail.NickName;
|
|
|
- this.columnIntroduce = this.authorDetail.Introduction;
|
|
|
- this.columnLableList = this.authorDetail.Label ? this.authorDetail.Label.split(",") : [];
|
|
|
- this.isEditInfo = false;
|
|
|
- },
|
|
|
// 更新收藏
|
|
|
upDateCollectHandler(item) {
|
|
|
this.mySpecialList.forEach((key) => {
|
|
@@ -203,7 +75,7 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
onShow() {
|
|
|
- this.getColumnList();
|
|
|
+ this.getYanxuanSpecialList();
|
|
|
},
|
|
|
/** 用户点击分享 */
|
|
|
onShareAppMessage: function (res) {
|
|
@@ -212,10 +84,12 @@ export default {
|
|
|
path: "/pages-purchaser/specialColumn/specialColumn",
|
|
|
};
|
|
|
},
|
|
|
- /* 下拉刷新 */
|
|
|
- onPullDownRefresh() {
|
|
|
- this.refresh = true;
|
|
|
- this.getColumnList();
|
|
|
+ // 下滑触底
|
|
|
+ onReachBottom() {
|
|
|
+ if (this.status == "nomore") return;
|
|
|
+ this.page_no++;
|
|
|
+ this.getYanxuanSpecialList();
|
|
|
+ this.status = "loading";
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
@@ -223,222 +97,45 @@ export default {
|
|
|
<style lang="scss" scope>
|
|
|
.special-column {
|
|
|
background-color: $uni-bg-color;
|
|
|
- input {
|
|
|
- height: 72rpx;
|
|
|
- background-color: #f0f1f3;
|
|
|
- padding-left: 24rpx;
|
|
|
- border-radius: 12rpx;
|
|
|
- }
|
|
|
- .tab-content {
|
|
|
- position: sticky;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 99;
|
|
|
- margin-top: 1rpx;
|
|
|
- background-color: #fff;
|
|
|
- height: 96rpx;
|
|
|
+ padding: 38rpx 35rpx 35rpx;
|
|
|
+ .top-content {
|
|
|
display: flex;
|
|
|
- view {
|
|
|
- flex: 1;
|
|
|
- text-align: center;
|
|
|
- line-height: 96rpx;
|
|
|
- border-bottom: 2rpx solid #e7e7e7;
|
|
|
- }
|
|
|
- .item {
|
|
|
- position: relative;
|
|
|
- .line-active {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- bottom: 0rpx;
|
|
|
- width: 32rpx;
|
|
|
- height: 6rpx;
|
|
|
- border-radius: 6rpx;
|
|
|
- background-color: #376cbb;
|
|
|
- transform: translateX(-50%);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .item-ul {
|
|
|
- padding: 30rpx;
|
|
|
- .item-li {
|
|
|
- padding: 0 30rpx 30rpx;
|
|
|
- background-color: white;
|
|
|
- border-radius: 16rpx;
|
|
|
- border-top: 10rpx solid #8fa4c4;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- .item-title {
|
|
|
- margin-top: 20rpx;
|
|
|
- font-size: 34rpx;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
- .item-name-time {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- height: 80rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #999;
|
|
|
- .name {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- image {
|
|
|
- width: 48rpx;
|
|
|
- height: 48rpx;
|
|
|
- border-radius: 50%;
|
|
|
- margin-right: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .item-content {
|
|
|
- text-overflow: -o-ellipsis-lastline;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 4;
|
|
|
- line-clamp: 4;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .set-up-info {
|
|
|
- padding: 30rpx;
|
|
|
- overflow: hidden;
|
|
|
- .info-name {
|
|
|
- width: 100%;
|
|
|
- padding: 40rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- color: #333;
|
|
|
- background-color: #fff;
|
|
|
- .seting-txt {
|
|
|
- text-align: center;
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: 500;
|
|
|
- line-height: 50rpx;
|
|
|
- }
|
|
|
- .item-txt {
|
|
|
- margin-top: 40rpx;
|
|
|
- margin-bottom: 5rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 500;
|
|
|
- line-height: 40rpx;
|
|
|
- }
|
|
|
- input {
|
|
|
- margin-top: 40rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .set-up-lable {
|
|
|
- .top-box {
|
|
|
- display: flex;
|
|
|
- background-color: #fff;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .new-lable {
|
|
|
- color: #376cbb;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .lable-txt {
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 500;
|
|
|
- line-height: 40rpx;
|
|
|
- display: flex;
|
|
|
- text {
|
|
|
- color: #999;
|
|
|
- flex-wrap: 400;
|
|
|
- }
|
|
|
- }
|
|
|
- .info-box {
|
|
|
- padding: 40rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- color: #333;
|
|
|
- background-color: #fff;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- }
|
|
|
- .ipt {
|
|
|
- height: 300rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .u-input {
|
|
|
- margin-top: 10rpx;
|
|
|
- background-color: #f0f1f3;
|
|
|
- }
|
|
|
- .u-input__textarea {
|
|
|
- padding: 20rpx !important;
|
|
|
- }
|
|
|
- .my-btn {
|
|
|
- margin: 50rpx 0;
|
|
|
- width: 100%;
|
|
|
- height: 72rpx;
|
|
|
- padding: 18rpx 30rpx 18rpx 30rpx;
|
|
|
- border-radius: 9rpx;
|
|
|
- background: #376cbb;
|
|
|
- color: #fff;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- .add-lable-txt {
|
|
|
- color: #000;
|
|
|
- font-size: 36rpx;
|
|
|
- flex-wrap: 600;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ color: #333;
|
|
|
margin-bottom: 20rpx;
|
|
|
-
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .column-lable {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- .lable-item {
|
|
|
- display: flex;
|
|
|
- color: #fff;
|
|
|
- font-size: 28rpx;
|
|
|
- padding: 10rpx 24rpx;
|
|
|
- background-color: #376cbb;
|
|
|
- border-radius: 153px;
|
|
|
- margin: 20rpx 20rpx 0 0;
|
|
|
- text {
|
|
|
- margin-right: 12rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .slot-content-text {
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- .write-note-button {
|
|
|
- position: fixed;
|
|
|
- width: 100%;
|
|
|
- bottom: 10rpx;
|
|
|
- left: 0rpx;
|
|
|
- z-index: 99;
|
|
|
- display: flex;
|
|
|
- padding: 0 35rpx;
|
|
|
- padding-bottom: constant(safe-area-inset-bottom);
|
|
|
- padding-bottom: env(safe-area-inset-bottom);
|
|
|
- .draft {
|
|
|
- margin-right: 20rpx;
|
|
|
+ .column-author,
|
|
|
+ .column-my {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 216rpx;
|
|
|
- height: 72rpx;
|
|
|
- color: #376cbb;
|
|
|
- background-color: #e5efff;
|
|
|
- border-radius: 9rpx;
|
|
|
- }
|
|
|
- .release {
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 107;
|
|
|
+ background-color: #fff;
|
|
|
flex: 1;
|
|
|
+ }
|
|
|
+ .column-my {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ .is-info {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- height: 72rpx;
|
|
|
- border-radius: 9rpx;
|
|
|
- color: #ffff;
|
|
|
- background-color: #376cbb;
|
|
|
+ justify-content: flex-end;
|
|
|
+ view {
|
|
|
+ color: #999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 34rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.column-list-content {
|
|
|
- margin-top: 20rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ /deep/ .column-list-content-detail {
|
|
|
+ padding: 0 40rpx !important;
|
|
|
+ border-bottom: 2rpx solid #f0f1f3;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|