crmcard/pages/list/index.vue

<template>
	<view>
		<uni-menubar title="文章列表" />
		<tm-search v-model="param.keyword" color="blue" @confirm="init"></tm-search>
		<tm-tabs color="blue" v-model="activeIndex" :list="allnav" range-key="name" align="left" @change="change">
		</tm-tabs>
		<view class='art-coin'>
			<block v-for="(item,index) in list" :key="index">
				<view class='art-act' @click="goDetail(item.id)">
					<view class="art-act-imgAndTitle">
						<image v-if="item.pic" class='art-act-l' mode='aspectFill' :src='item.pic'></image>
						<view class="art-act-titleAndTime">
							<view class='act-act-rname'>{{ item.title }}</view>
							<view class="art-act-time">{{item.create_time}}</view>
						</view>
					</view>
					<view class='act-art-rinfo'>
						<view class='act-act-rsort'>{{ item.name }}</view>
						<view class='act-act-rbrowsing'>
							<view class='act-act-rlook'>{{ item.show_views > 0 ? item.show_views : item.views }}查看
							</view>
							<view class='act-act-rrelay'>{{ item.track_count }}转发</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<tm-poup confirmColor="blue" position="bottom" height="70%" :round="0" v-if="addShow" v-model="addShow">
			<view class="pa-20">
				<view class="text-xl text-bold">文章编辑</view>
				<tm-pickers default-value="cate" btn-color="blue" :list="allnav" rang-key="name" @confirm="sureCate">
					<view class="flex flex-between">
						<view style="mr-20">文章分类</view>
						<view>
							<tm-input :margin="[0,0]"
								:value="formData.cate_id? allnav.find(v=>v.id == formData.cate_id)['name']:'请选择分类'">
							</tm-input>
						</view>
					</view>
				</tm-pickers>
				<view class="flex flex-between mt-20">
					<view class="mr-20">文章来源</view>
					<view>

						<tm-groupradio>
							<tm-radio dense size="20" v-model="sourceObj.obj1" color="bg-gradient-blue-accent"
								label="微信公众号"></tm-radio>
							<tm-radio dense size="20" v-model="sourceObj.obj2" color="bg-gradient-blue-accent"
								label="今日头条"></tm-radio>
						</tm-groupradio>
					</view>
				</view>
				<view class="mt-40 flex flex-between">
					<view class="mr-20">打开方式</view>
					<view>
						<tm-groupradio>
							<tm-radio dense size="20" v-model="openObj.obj1" color="bg-gradient-blue-accent"
								label="小程序内"></tm-radio>
							<tm-radio dense size="20" v-model="openObj.obj2" color="bg-gradient-blue-accent"
								label="微信公众号"></tm-radio>
						</tm-groupradio>
					</view>
				</view>
				<view class="pa-20 ma-20 text-size-xs bg-gray" v-if="openObj.obj2">
					<view>微信内打开，需要小程序关联到微信公众号</view>
					<view @click="copy">点击复制APPID:<text>wx3466c53d33b9dbdc</text>进行关联</view>
				</view>


				<view class="mt-40">文章地址</view>
				<tm-gap></tm-gap>
				<tm-input bg-color="grey-lighten-5" :padding="[0,0]" clear :height="120" :maxlength="1000"
					input-type="textarea" v-model="formData.url"></tm-input>
				<view class="px-24">
					<tm-button block @click="articleAdd">确定提交</tm-button>
				</view>
			</view>


		</tm-poup>
		<tm-flotbutton @click="addShow = true" label="添加" :show-text="true">
		</tm-flotbutton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appIdShow: false,
				sourceObj: {
					obj1: true,
					obj2: false,
				},
				openObj: {
					obj1: true,
					obj2: false,
				},
				cate: "",
				pid: '',
				param: {
					page: 1,
					keyword: '',
					cate_id: '',
					cate_pid: '',
				},
				activeIndex: 0,
				nav: [],
				allnav: [{
					'name': '全部',
					'id': 0
				}],
				list: [],
				addShow: false,
				formData: {
					cate_id: "",
					is_make: "",
					link_type: "",
					url: ""
				}
			}
		},
		computed: {
			user() {
				return this.$tm.vx.state().user.userInfo || {}
			}
		},
		watch: {
			addShow(val) {
				if (val) {
					this.get()
				}
			}
		},
		onLoad() {
			uni.$tm.request.post('art/cate', this.pid).then(res => {
				this.nav = res.data
				this.allnav = [...this.allnav, ...this.nav]
			})
			this.init()
		},
		methods: {
			get() {
				uni.getClipboardData({
					success: (res) => {
						this.formData.url = res.data
						if (this.formData.url.indexOf("qq") != -1) {
							this.sourceObj.obj1 = true
						} else {
							this.sourceObj.obj2 = true
						}
					}
				});
			},
			copy() {
				uni.setClipboardData({
					data: "wx3466c53d33b9dbdc"
				});
			},
			radioChange(e) {
				if (e.checked == true) {
					this.appIdShow = true
				}
			},
			sureCate(e) {
				this.formData.cate_id = e[0].data.id
			},
			articleAdd() {
				this.formData.link_type = this.sourceObj.obj1 == true ? 1 : 2
				this.formData.is_make = this.openObj.obj1 == true ? 0 : 1
				this.$tm.request.post('art/fetchwxart', this.formData).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: "新增成功",
							icon: "success"
						})
						this.init()
						this.addShow = false
						this.formData = {
							cate_id: "",
							is_make: "",
							link_type: "",
							url: ""
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			init() {
				uni.$tm.request.post('art/list', this.param).then(res => {
					this.list = res.data
				})
			},
			change(e) {
				this.activeIndex = e
				this.param.cate_id = this.allnav[e].id
				this.init()
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/list/list?id=' + id + "&card_id=" + uni.getStorageSync('card_id')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/*去掉滚动条*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.top-bar {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		box-shadow: 2px 2px 5px #ccc;
		font-size: 28rpx;
	}

	.stick {
		position: fixed;
		right: 0;
		left: 0;
		background: #fff;
		box-shadow: 2px 2px 5px #ccc;
		font-size: 28rpx;
	}

	.contains-act {
		padding-top: 100rpx;
	}

	.scrolls {
		height: 100rpx;
		width: 98%;
		line-height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
	}

	.scrolls .cure {
		width: 130rpx;
		display: inline-flex;
		justify-content: center;
	}

	.scrolls .active text {
		color: #f90;
		height: 96rpx;
		border-bottom: 4rpx solid #f90;
	}

	.scroll-more {
		flex: 1;
		display: flex;
		justify-content: center;
	}

	.scroll-more text {
		font-size: 50rpx;
		line-height: 50rpx;
		color: #3b3b3b;
	}

	.art-act {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin: 1rem 20rpx 0 20rpx;
		box-shadow: 0px 1px 5px #EEEEEE;
		border-radius: 5px;
		background: #fff;
	}

	/* .art-act:last-child{
	  border-bottom: 0;
	} */
	.art-act-time {
		font-size: 24rpx;
		color: #aaa;
		margin-top: 3vw;
	}

	.art-act-imgAndTitle {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;
		padding: 3vw 0;
		margin: 0 3vw;
		border-bottom: 1px solid #eee;
	}

	.art-act-titleAndTime {
		display: flex;
		flex-direction: column;
		flex: 1;
		justify-content: space-between;
	}

	.art-act-l {
		width: 250rpx;
		height: 150rpx;
		margin-left: 3vw;
	}

	.act-act-rname {
		font-size: 30rpx;
		font-weight: 530;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		word-break: break-all;
		flex: 1;
	}

	.act-art-rinfo {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: #888888;
		padding: 4vw 0;
		margin: 0 3vw;
	}

	.act-act-rsort {
		/*color: #fff;
	  padding: 6rpx 20rpx;
	  background: #00a1e9;
	  border-radius: 2px;*/
	}

	.act-act-rbrowsing {
		display: flex;
		align-items: center;
	}

	.act-act-rrelay {
		margin-left: 20rpx;
	}

	/*底部tabbar*/
	.blank {
		height: 126rpx;
	}

	.art-tabbar {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		z-index: 99;
		display: flex;
		justify-content: center;
	}

	.art-tabbar view {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 1px solid #eeeeee;
		position: absolute;
		top: -34rpx;
		background-color: #ffffff;
	}

	.art-bar {
		position: fixed;
		display: flex;
		align-items: center;
		width: 100%;
		bottom: 0;
		border-top: 1px solid #eeeeee;
		z-index: 100;
		background-color: #ffffff;
	}

	.art-bar-act {
		flex: 1;
		display: flex;
		flex-flow: column;
		align-items: center;
		height: 120rpx;
		justify-content: flex-end;
	}

	/* .art-tabbar-on{
	  color:#55b537;
	} */
	.art-bar-act text {
		font-size: 50rpx;
		line-height: 50rpx;
	}

	.art-bar-act view {
		font-size: 24rpx;
		margin: 10rpx 0;
	}

	.art-bar-among {
		flex: 1;
		height: 120rpx;
		display: flex;
		justify-content: center;
		position: relative;
	}

	.art-bar-pic {
		position: absolute;
		font-size: 100rpx;
		top: -30rpx;
		line-height: 100rpx;
		/* border:1px solid #eeeeee; */
		border-radius: 50%;
		background-color: #ffffff;
	}

	.art-bar-tit {
		font-size: 24rpx;
		position: absolute;
		bottom: 10rpx;
	}

	.art-bar-act image {
		width: 50rpx;
	}

	.art-bar-among image {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #ffffff;
		top: -26rpx;
	}
</style>