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>
浙公网安备 33010602011771号