From 3b1bc2ba86219b37fffac708ca031f6a1ba1fde0 Mon Sep 17 00:00:00 2001
From: lgyg <1370861456@qq.com>
Date: Mon, 4 Sep 2023 23:32:29 +0800
Subject: [PATCH] link

---
 src/App.vue                  |  52 ++++
 src/pages.json               |   9 +
 src/pages/system/account.vue |   4 +-
 src/pages/system/links.vue   | 450 +++++++++++++++++++++++++++++++++++
 src/pages/system/log.vue     |   6 +-
 src/pages/user/user.vue      |   2 +-
 6 files changed, 519 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/system/links.vue

diff --git a/src/App.vue b/src/App.vue
index c340b0f..0d61473 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -38,10 +38,24 @@
 	.mr30{
 		margin-right: 30rpx;
 	}
+	.ml20{
+		margin-left: 20rpx;
+	}
+	.mr20{
+		margin-right: 20rpx;
+	}
 	.pdlr30{
 		padding-left: 30rpx;
 		padding-right: 30rpx;
 	}
+	.pdlr12{
+		padding-left: 12rpx;
+		padding-right: 12rpx;
+	}
+	.pdlr24{
+		padding-left: 24rpx;
+		padding-right: 24rpx;
+	}
 	.pdlr18{
 		padding-left: 18rpx;
 		padding-right: 18rpx;
@@ -68,6 +82,9 @@
 	.align-items{
 		align-items: center;
 	}
+	.align-items-c{
+		align-items: center;
+	}
 	.clamp {
 	  overflow: hidden;
 	  text-overflow: ellipsis;
@@ -193,6 +210,7 @@
 		}
 		.btn_group{
 			display: flex;
+			justify-content: space-around;
 			.btn{
 				width: 300rpx;
 			}
@@ -290,6 +308,7 @@
 		}
 		.buttom_section{
 			display: flex;
+			justify-content: space-around;
 			padding: 40rpx 24rpx 40rpx 24rpx;
 			.btn{
 				width: 220rpx;
@@ -328,6 +347,9 @@
 			.label_t{
 				width: 100px;
 			}
+			.flex-1{
+				word-break: break-all;
+			}
 		}
 	}
 	//弹窗表单详情编辑
@@ -353,6 +375,10 @@
 			.label_tit{
 				padding-top: 28rpx;
 			}
+			.input_box{
+				width: 100%;
+				padding: 0 12rpx;
+			}
 		}
 		.label_tit{
 			padding: 18rpx 0;
@@ -364,6 +390,7 @@
 		}
 		.buttom_section{
 			display: flex;
+			justify-content: space-around;
 			padding: 40rpx 24rpx 40rpx 24rpx;
 			.btn{
 				width: 220rpx;
@@ -418,10 +445,15 @@
 		.value{
 			line-height: initial;
 		}
+		.placeholder{
+			line-height: initial;
+		}
 		.right{
 			position: absolute;
 			top: 0;
 			right: 0;
+			display: flex;
+			align-items: center;
 		}
 	}
 	.popup-select-section{
@@ -469,5 +501,25 @@
 			}
 		}
 	}
+	.page-top-title-box{
+		display: flex;
+		align-items: center;
+		padding: 24rpx 30rpx;
+		background-color: #fff;
+		justify-content: space-between;
+		border-top: 12rpx solid #eeeeef;
+		.title{
+			font-size: 32rpx;
+			font-weight: bold;
+		}
+		.handle-option{
+			.btn{
+				font-size: 32rpx;
+				height: 60rpx;
+				padding: 0 40rpx;
+				background-color: rgb(42, 125, 201);
+			}
+		}
+	}
 </style>
 
diff --git a/src/pages.json b/src/pages.json
index f4400c2..c72d96f 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -100,6 +100,15 @@
             }
             
         }
+        ,{
+            "path" : "pages/system/links",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "友情链接",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "white",
diff --git a/src/pages/system/account.vue b/src/pages/system/account.vue
index 7bea10e..a1089c8 100644
--- a/src/pages/system/account.vue
+++ b/src/pages/system/account.vue
@@ -12,7 +12,7 @@
 		<view class="content-box">
 			<u-swipe-action class="tb_swipe_list" 
 				 v-for="(item, index) in list" 
-				 :show="item.show" :index="index"  :key="item.id" 
+				 :show="item.show" :index="index" :key="item.id" 
 				@click="click"
 				@open="open"
 				:options="options"
@@ -152,7 +152,7 @@
 					</view>
 					<view class="plist u-border-bottom">
 						<view class="label_t">是否启用</view>
-						<view class="flex-1 flex-row align-items">
+						<view class="flex-1 flex-row align-items-c">
 							<view class="text" style="margin-right: 20rpx;">
 								{{formInfo.is_enable==1?'是':'否'}}
 							</view>
diff --git a/src/pages/system/links.vue b/src/pages/system/links.vue
new file mode 100644
index 0000000..eb66537
--- /dev/null
+++ b/src/pages/system/links.vue
@@ -0,0 +1,450 @@
+<template>
+	<view class="bg-page">
+		<u-sticky>
+		<view class="page-top-title-box">
+			<view class="title">链接列表</view>
+			<view class="handle-option">
+				<u-button class="btn" size="medium"
+				 @click="addBtn()" type="primary">新增</u-button>
+			</view>
+		</view>
+		</u-sticky>
+		<view class="content-box">
+			<u-swipe-action class="tb_swipe_list" 
+				 v-for="(item, index) in list" 
+				 :show="item.show" :index="index" :key="item.id" 
+				@click="click"
+				@open="open"
+				:options="options"
+				>
+				<view class="tb_body" @click="showInfo(index)">
+					<view class="row_box">
+						<view class="text">名称：{{ item.name }}</view>
+					</view>
+					<!-- <view class="row_box">
+						<view class="text">排序：{{ item.sort }}</view>
+					</view> -->
+					<view class="row_box">
+						<view class="text">类型：{{typeName[item.type]}}</view>
+					</view>
+					<!-- <view class="row_box">
+						<view class="text">内链：{{item.is_iframe==1?'开启':'关闭'}}</view>
+					</view>
+					<view class="row_box">
+						<view class="text">推荐：{{item.is_recommend==1?'是':'否'}}</view>
+					</view> -->
+					<view class="row_box">
+						<view class="text">状态：{{item.is_show==1?'开启':'关闭'}}</view>
+					</view>
+					<view class="row_box">
+						<view class="text">创建时间：{{item.created_at|timeFormat}}</view>
+					</view>
+					
+				</view>
+			</u-swipe-action>
+		</view>
+		<!-- 编辑 -->
+		<u-popup v-model="editShow" border-radius="28" width="92%" height="70%"
+		 mode="center" :closeable="true" :mask-close-able="false" z-index="910">
+			<view class="popup-form-ubox">
+				<view class="top_box">
+					<view class="title" v-if="setInfo.id">编辑账号</view>
+					<view class="title" v-else>新增账号</view>
+				</view>
+				<scroll-view class="scroll-y" scroll-y="true">
+					<view class="form_edit" style="padding-left: 50rpx;">
+						<u-form>
+							<u-form-item label="ID" label-width="140" v-if="setInfo.id">
+								<view class="input_box bg_colorf8 pdlr12">
+									<u-input v-model="setInfo.id" :disabled="true" />
+								</view>
+							</u-form-item>
+							<u-form-item label="名称" label-width="140" :required='true'>
+								<view class="input_box">
+									<u-input v-model="setInfo.name" />
+								</view>
+							</u-form-item>
+							<u-form-item label="排序" label-width="140" :required='true'>
+								<view class="input_box">
+									<u-input v-model="setInfo.sort" type="number"/>
+								</view>
+							</u-form-item>
+							<u-form-item label="是否内链" label-width="140" :required='true'>
+								<view class="input_box flex-row align-items-c">
+									<u-switch v-model="setInfo.is_iframe" size="34"
+									></u-switch>
+									<view class="text ml20">
+										{{setInfo.is_iframe==1?'是':'否'}}
+									</view>
+								</view>
+							</u-form-item>
+							<u-form-item label="推荐" label-width="140" :required='true'>
+								<view class="input_box flex-row align-items-c">
+									<u-switch v-model="setInfo.is_recommend" size="34"
+									></u-switch>
+									<view class="text ml20">
+										{{setInfo.is_recommend?'是':'否'}}
+									</view>
+								</view>
+							</u-form-item>
+							<u-form-item label="状态" label-width="140" :required='true'>
+								<view class="input_box flex-row align-items-c">
+									<u-switch v-model="setInfo.is_show" size="34"
+									></u-switch>
+									<view class="text ml20">
+										{{setInfo.is_show?'开启':'关闭'}}
+									</view>
+								</view>
+							</u-form-item>
+							<u-form-item label="类型" label-width="140">
+								<view class="input_box">
+									<view class="u-select-list select_multiple" @click="typePopupShow()">
+										<view class="value u-line-2" 
+										v-if="setInfo.type">{{typeName[setInfo.type]}}</view>
+										<view class="placeholder" v-else>请选择</view>
+										<view class="right">
+											<u-icon name="arrow-right" color="#999" size="28"></u-icon>
+										</view>
+									</view>
+								</view>
+							</u-form-item>
+							<u-form-item label="地址" label-width="140">
+								<view class="input_box">
+									<u-input v-model="setInfo.content" type="text"/>
+								</view>
+							</u-form-item>
+						</u-form>
+						
+					</view>
+				</scroll-view>
+				<view class="buttom_section">
+					<u-button class="btn" type="default" @click="editShow = false">取消</u-button>
+					<u-button class="btn" @click="editInfoBtn()" type="primary">确定</u-button>
+				</view>
+			</view>
+		</u-popup>
+		<u-popup v-model="popupShow" mode="bottom" border-radius="28" z-index="900">
+			<view class="popup-form-info">
+				<view class="top_box u-border-bottom">
+					<view class="handle-btns">
+						<view class="btn_del" @click="deleteInfoId(formInfo.id)">删除</view>
+						<view class="btn_edit" @click="editInfoId(formInfo.id)">编辑</view>
+					</view>
+				</view>
+				<view class="section_c">
+					
+					<view class="plist u-border-bottom">
+						<view class="label_t">名称</view>
+						<view class="flex-1">{{formInfo.name}}</view>
+					</view>
+					<view class="plist u-border-bottom">
+						<view class="label_t">排序</view>
+						<view class="flex-1">{{formInfo.sort}}</view>
+					</view>
+					<view class="plist u-border-bottom">
+						<view class="label_t">类型</view>
+						<view class="flex-1">{{typeName[formInfo.type]}}</view>
+					</view>
+					<view class="plist u-border-bottom">
+						<view class="label_t">内链</view>
+						<view class="flex-1">{{formInfo.is_iframe==1?'开启':'关闭'}}</view>
+					</view>
+					<view class="plist u-border-bottom">
+						<view class="label_t">推荐</view>
+						<view class="flex-1 flex-row align-items">
+							<view class="text" style="margin-right: 20rpx;">
+								{{formInfo.is_recommend==1?'是':'否'}}
+							</view>
+						</view>
+					</view>
+					<view class="plist u-border-bottom">
+						<view class="label_t">状态</view>
+						<view class="flex-1">{{formInfo.is_show==1?'开启':'关闭'}}</view>
+					</view>
+					<view class="plist u-border-bottom">
+						<view class="label_t">创建时间</view>
+						<view class="flex-1">{{formInfo.created_at|timeFormat}}</view>
+					</view>
+					<view class="plist u-border-bottom">
+						<view class="label_t">地址</view>
+						<view class="flex-1">{{formInfo.content}}</view>
+					</view>
+				</view>
+			</view>
+		</u-popup>
+		<u-select v-model="select2" :list="typelist" :default-value="select2Value" mode="single-column"
+		 @confirm="uselectConfirm"></u-select>
+	</view>
+</template>
+
+<script>
+	import {formatDate} from '@/com/utils.js'
+	export default {
+		data() {
+			return {
+				per_page:10,
+				page:1,
+				list:[],
+				loading:'loadmore',
+				options: [
+					{
+						text: '编辑',
+						style: {
+							backgroundColor: '#007aff'
+						}
+					},
+					{
+						text: '删除',
+						style: {
+							backgroundColor: '#dd524d'
+						}
+					}
+				],
+				popupShow:false,
+				cindex:-1,//操作的索引
+				editShow:false,
+				formInfo:{},
+				typeName:{
+					1:'链接',
+					2:'视频',
+					3:'文章'
+				},
+				setInfo:{
+					id:'',
+					name:'',
+					sort:'',
+					is_iframe:false,
+					is_recommend:false,
+					is_show:true,
+					type:1,
+					content:'',
+				},
+				select2:false,
+				typelist: [
+					{
+						value: 1,
+						label: '链接'
+					},
+					{
+						value: 2,
+						label: '视频'
+					},
+					{
+						value: 3,
+						label: '文章'
+					}
+				],
+				select2Value:[0],
+				rules: {
+					password: [
+						{
+							required: true,
+							message: '请输入密码',
+							trigger: ['blur', 'change']
+						}
+					]
+				}
+			};
+		},
+		filters:{
+			timeFormat(val){
+				return formatDate(val*1000, 'yyyy-MM-dd hh:mm');
+			},
+		},
+		onLoad() {
+			this.queryDataList();
+		},
+		methods: {
+			typePopupShow(){
+				// this.select2 = true;
+			},
+			addBtn(){
+				this.setInfoKeys('add');
+				this.editShow = true;
+			},
+			showInfo(index){
+				this.cindex = index;
+				let _id = this.list[index].id;
+				this.queryInfo(_id);
+				this.formInfo = this.list[index];
+				this.popupShow = true;
+				
+			},
+			open(index){
+				this.list[index].show = true;
+			},
+			click(index, index1) {
+				console.log(index,index1,this.list[index])
+				if(index1 == 1) {
+					this.cindex = index;
+					let _id = this.list[index].id;
+					this.deleteInfoId(_id);
+				} else {//编辑
+					let _id = this.list[index].id;
+					this.queryInfo(_id);
+					this.formInfo = this.list[index];
+					this.setInfoKeys();
+					this.editShow = true;
+					this.list[index].show = false;
+					
+				}
+				
+			},
+			queryDataList(refresh){
+				if(refresh){
+					this.loading = 'loadmore';
+					this.page = 1;
+				}
+				if(this.loading=='nomore'){//超出最大页
+					return false;
+				}
+				let params = {
+					per_page:this.per_page,
+					page: this.page ++,
+					_t: new Date().getTime()
+				}
+				this.loading = 'loading';
+				this.$http.get('/api/friend-links',{params:params}).then(({data})=>{
+					console.log(data)
+					if(refresh){
+						this.list = [];
+					}
+					this.loading = 'loadmore';
+					if(data.code==200){
+						let _list = data.data|| [];
+						for(let item of _list){
+							item.show = false;
+						}
+						this.list = this.list.concat(_list);
+						console.log(this.list);
+						if(this.list.length>= data.meta.total){
+							this.loading ='nomore';
+						}
+					}
+				}).catch(()=>{
+					this.loading = 'loadmore';
+				})
+			},
+			//修改
+			editInfoBtn(){
+				let {id,name,sort,is_iframe,is_recommend,is_show,type,content} = this.setInfo;
+				let params = {
+					name:name,
+					sort:sort,
+					is_iframe:is_iframe?1:0,
+					is_recommend:is_recommend?1:0,
+					is_show:is_show?1:0,
+					type:type,
+					content:content,
+				}
+				if(id){params['id'] = id;}
+				if(params['id']){
+					this.$http.put(`/api/friend-links/${id}`,params).then(({data})=>{
+						if(data.code==200){
+							this.editShow = false;
+							this.queryDataList(true);
+							uni.showToast({ title: data.message, icon: 'none' });
+						}
+					}).catch(()=>{
+						
+					})
+				}else{
+					this.$http.post(`/api/friend-links`,params).then(({data})=>{
+						if(data.code==200){
+							this.queryDataList(true);
+							this.editShow = false;
+							uni.showToast({ title: data.message, icon: 'none' });
+						}else{
+							uni.showToast({ title: data.message, icon: 'none' });
+						}
+					}).catch(()=>{
+						
+					})
+				}
+				
+			},
+			editInfoId(id){
+				// this.queryInfo(id);
+
+				this.setInfoKeys();
+				this.editShow = true;
+				this.popupShow = false;
+			},
+			setInfoKeys(type){
+				let info = {
+					id:'',
+					name:'',
+					sort:'',
+					is_iframe:false,
+					is_recommend:false,
+					is_show:true,
+					type:1,
+					content:'',
+				}
+				if(type=='add'){
+					this.setInfo = info;
+				}else{
+					let {id,name,sort,is_iframe,is_recommend,is_show,type,content} = this.formInfo;
+					info['id'] = id;
+					info['name'] = name;
+					info['sort'] = sort;
+					info['is_iframe'] = is_iframe==1?true:false;
+					info['is_recommend'] = is_recommend==1?true:false;
+					info['is_show'] = is_show==1?true:false;
+					info['type'] = type;
+					info['content'] = content;
+					this.setInfo = info;
+				}
+			},
+			//删除deleteInfoId
+			deleteInfoId(id){
+				uni.showModal({
+					title: '提示',
+					content: '是否确定删除？',
+					success:  (res)=> {
+						if (res.confirm) {
+							console.log('用户点击确定');
+							this.$http.delete(`/api/friend-links/${id}`).then(({data})=>{
+								if(data.code==200){
+									this.formInfo = {};//重置删除
+									this.popupShow = false;
+									this.list.splice(this.cindex,1);
+									uni.showToast({ title: data.message, icon: 'none' });
+								}
+							}).catch(()=>{
+								
+							})
+						} else if (res.cancel) {
+							console.log('用户点击取消');
+						}
+					}
+				});
+				
+			},
+			queryInfo(id){
+				this.$http.get(`/api/friend-links/${id}`).then(({data})=>{
+					console.log(data,'queryInfo===')
+					if(data.code==200){
+						this.formInfo = data.data;
+						this.setInfoKeys();
+					}
+				}).catch((err)=>{
+					
+				})
+			},
+		},
+		//触底加载
+		onReachBottom() {
+			if(this.loading=='loadmore'){
+				this.queryDataList();
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+.content-box{
+	padding: 30rpx;
+}
+
+</style>
diff --git a/src/pages/system/log.vue b/src/pages/system/log.vue
index 8bdf1bb..68dcdf7 100644
--- a/src/pages/system/log.vue
+++ b/src/pages/system/log.vue
@@ -235,7 +235,11 @@
 		}
 	}
 }
-
+.row_box{
+	.text{
+		word-break: break-all;
+	}
+}
 .top-title-box{
 	display: flex;
 	align-items: center;
diff --git a/src/pages/user/user.vue b/src/pages/user/user.vue
index 68791dc..41ba21d 100644
--- a/src/pages/user/user.vue
+++ b/src/pages/user/user.vue
@@ -67,7 +67,7 @@
 						<view class="arrow_R"></view>
 					</view>
 				</view>
-				<view class="nav-list" @click="linnavF('/pages/user/password-edit')">
+				<view class="nav-list" @click="linnavF('/pages/system/links')">
 					<view class="icon_img">
 						<u-icon name="attach" size="46"></u-icon>
 					</view>