UniApp-CURD

药品添加

<template>
	<view class="content">
		<view class="form-container">
			<view class="form-item">
				<label class="label">药品名称</label>
				<input type="text" class="input" v-model="name">
			</view>
			<view class="form-item">
				<label class="label">价格</label>
				<input type="text" class="input" v-model="price"/>
			</view>
			<view class="form-item">
				<label class="label">分类</label>
				<select v-model="cate">
					<option>感冒药</option>
					<option>咳嗽药</option>
					<option>止疼药</option>
				</select>
			</view>
			<view class="form-item">
				<label class="label">描述</label>
				<input type="text" class="input" v-model="intro"/>
			</view>
			<view class="form-item">
				<button class="btn" @click="Add()">添加</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:"",
				price:"",
				intro:"",
				cate:"",
			}
		},
		methods: {
			Add(){
				var data = {
					name:this.name,
					price:this.price,
					cate:this.cate,
					intro:this.intro,
				}			
				uni.request({
					url:"http://127.0.0.1:8080/add",
					data:data,
					method:"POST",
					header:{
						'content-type':'application/x-www-form-urlencoded'
					},
					success:(res)=>{
						if(res.data.code == 200){
							uni.showToast({
							      title: '添加成功',
							      icon: 'success',
							      duration: 2000,
							      success: function() {
							        setTimeout(function() {
							          uni.reLaunch({
							            url: '/pages/list/list',
							          });
							        }, 2000);
							      }
							    });
						}else{
							alert("添加失败")
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.content {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #f5f5f5;
}

.form-container {
	width: 80%;
	background-color: #fff;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-item {
	margin-bottom: 20px;
}

.label {
	font-size: 16px;
	color: #333;
}

.input {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

.btn {
	width: 100%;
	padding: 10px;
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	transition: background-color 0.3s ease;
}

.btn:hover {
	background-color: #0056b3;
}
</style>

药品列表

<template>
	<view>
		<view class="search-container">
			<input type="text" class="search-input" v-model="name"/>
			<button class="search-button" @click="List(1)">搜索</button>
		</view>
		
		<view>
			<table>
				<th>编号</th>
				<th>名称</th>
				<th>价格</th>
				<th>分类</th>
				<th>描述</th>
				<th>操作</th>
				<tr v-for="(v,k) in slice" :key="k">
					<td>{{v.id}}</td>
					<td>{{v.name}}</td>
					<td>{{v.price}}</td>
					<td>{{v.cate}}</td>
					<td>{{v.intro}}</td>
					<td>
						<button class="delete-btn" type="warn" size="mini" @click="Del(k,v.id)">删除</button>
						<button class="update-btn" type="primary" size="mini" @click="Update(v.id)">修改</button>
					</td>
				</tr>
			</table>
			<button class="mini-btn" type="primary" size="mini" @click="List(1)">首页</button>
			<button class="mini-btn" type="primary" size="mini" @click="List(up)">上一页</button>
			<button class="mini-btn" type="primary" size="mini" @click="List(i)" v-for="i in sum" :key="i">{{i}}</button>
			<button class="mini-btn" type="primary" size="mini" @click="List(down)">下一页</button>
			<button class="mini-btn" type="primary" size="mini" @click="List(sum)">尾页</button>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				slice:[],
				sum:"",
				up:"",
				down:"",
				name:"",
			}
		},
		onLoad() {
			this.List(1)
		},
		methods: {
			List(p){
				uni.request({
					url:"http://127.0.0.1:8080/list?p="+p+"&name="+this.name,
					method:"GET",
					success: (res) => {
						this.slice = res.data.data.slice
						this.sum = res.data.data.sum
						this.up = res.data.data.up
						this.down = res.data.data.down
					}
				})
			},
			Del(k,id){
				uni.request({
					url:"http://127.0.0.1:8080/delete?id="+id,
					method:"GET",
					success: (res) => {
						if(res.data.code == 200){
							this.slice.splice(k,1)
						}
					}
				})
			},
			Update(id){
				uni.navigateTo({
				  url: '/pages/update/update?id=' + id,
				});
			}
		}
	}
</script>

<style>
  /* 表格样式 */
	  table {
		width: 100%;
		border-collapse: collapse;
		margin-bottom: 20px;
	  }
	  th, td {
		padding: 10px;
		border: 1px solid #ccc;
	  }
	  th {
		background-color: #f0f0f0;
	  }
	  tr:nth-child(even) {
		background-color: #f9f9f9;
	  }

	  /* 按钮样式 */
	  .mini-btn {
		margin-right: 10px;
		padding: 5px 10px;
		border-radius: 5px;
		background-color: #007bff;
		color: #fff;
		border: none;
		cursor: pointer;
	  }
	  .mini-btn:hover {
		background-color: #0056b3;
	  }
  
.search-container {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
	margin-bottom: 10px;
}
.search-input {
	padding: 8px 12px;
	font-size: 14px;
	border: 1px solid #ccc;
	border-radius: 4px;
}
.search-button {
	padding: 8px 16px;
	font-size: 14px;
	background-color: #007bff;
	color: #fff;
	border: 1px solid #0056b3;
	border-radius: 4px;
	cursor: pointer;
	margin-left: 10px;
}
.search-button:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}
</style>

　　药品修改

 

<template>
	<view class="content">
		<view class="form-container">
			<view class="form-item">
				<label class="label">药品名称</label>
				<input type="text" class="input" v-model="drug.name">
			</view>
			<view class="form-item">
				<label class="label">价格</label>
				<input type="text" class="input" v-model="drug.price"/>
			</view>
			<view class="form-item">
				<label class="label">分类</label>
				<select v-model="drug.cate">
					<option>感冒药</option>
					<option>咳嗽药</option>
					<option>止疼药</option>
				</select>
			</view>
			<view class="form-item">
				<label class="label">描述</label>
				<input type="text" class="input" v-model="drug.intro"/>
			</view>
			<view class="form-item">
				<button class="btn" @click="Update()">修改</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				drug:{}
			}
		},
		onLoad: function(options) {
			var id = options.id;
			uni.request({
				url:"http://127.0.0.1:8080/info?id="+id,
				method:"GET",
				success: (res) => {
					if(res.data.code == 200){
						this.drug = res.data.data
					}
				}
			})
		},
		methods: {
			Update(){
				var data = {
					id:this.drug.id,
					name:this.drug.name,
					price:this.drug.price,
					cate:this.drug.cate,
					intro:this.drug.intro,
				}			
				uni.request({
					url:"http://127.0.0.1:8080/update",
					data:data,
					method:"POST",
					header:{
						'content-type':'application/x-www-form-urlencoded'
					},
					success:(res)=>{
						if(res.data.code == 200){
							uni.showToast({
							      title: '修改成功',
							      icon: 'success',
							      duration: 2000,
							      success: function() {
							        setTimeout(function() {
							          uni.reLaunch({
							            url: '/pages/list/list',
							          });
							        }, 2000);
							      }
							    });
						}else{
							alert("修改失败")
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.content {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #f5f5f5;
}

.form-container {
	width: 80%;
	background-color: #fff;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-item {
	margin-bottom: 20px;
}

.label {
	font-size: 16px;
	color: #333;
}

.input {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

.btn {
	width: 100%;
	padding: 10px;
	background-color: #007bff;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	transition: background-color 0.3s ease;
}

.btn:hover {
	background-color: #0056b3;
}
</style>