1.使用组件 el-steps,里面有上一步和下下一步的方法
2.控制组件 的显示v-show 或者v-if
3.在他们的方法里面改变显示的状态
4.点击一下一步切换显示的表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="static/css/admin.css" rel="stylesheet" type="text/css">
<link href="static/css/amazeui.css" rel="stylesheet" type="text/css">
<link href="static/css/personal.css" rel="stylesheet" type="text/css">
<link href="static/css/systyle.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="static/css/bootstrap.css" />
<script type="text/javascript" src="static/js/jquery-3.4.1.min.js"></script>
<!-- 引入样式 -->
<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/css/layui.css">
<!-- 引入 layui.js -->
<script src="//unpkg.com/[email protected]/dist/layui.js">
<script type="text/javascript" src="static/js/bootstrap.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js">
</script>
</head>
<body>
<div id="container">
<div class="m-order" style="margin-bottom: 0pxheight: 160px">
<div class="s-bar" style="height: 29px"><i class="s-icon"></i>衣服列表
<a @click="queryByStatus(0)" class="i-load-more-item-shadow">全部衣服</a>
</div>
<ul>
<li style="width: 25%">
<a @click="queryByStatus(1)"><i><img src="static/images/send.png"></i><span>男上装<em class="m-num"
style="display: none">0</em></span></a>
</li>
<li style="width: 25%">
<a @click="queryByStatus(2)"><i><img src="static/images/receive.png"></i><span>男下装<em class="m-num"
style="display: none">0</em></span></a>
</li>
<li style="width: 25%">
<a @click="queryByStatus(3)"><i><img src="static/images/comment.png"></i><span>女上装<em class="m-num"
style="display: none">0</em></span></a>
</li>
<li style="width: 25%">
<a @click="queryByStatus(4)"><i><img src="static/images/comment.png"></i><span>女下装<em class="m-num"
style="display: none">0</em></span></a>
</li>
<li style="width: 25%">
<a @click="queryByStatus(5)"><i><img src="static/images/comment.png"></i><span>童装专区<em
class="m-num" style="display: none">0</em></span></a>
</li>
<li style="width: 25%">
<a @click="queryByStatus(6)"><i><img src="static/images/comment.png"></i><span>鞋靴<em class="m-num"
style="display: none">0</em></span></a>
</li>
<li style="width: 25%">
<a @click="queryByStatus(7)"><i><img src="static/images/comment.png"></i><span>箱包<em class="m-num"
style="display: none">0</em></span></a>
</li>
</ul>
</div>
<div class="box-container-bottom" style="margin-bottom: 15px"></div>
<div class="m-logistics">
<!--<div class="s-bar" ><i class="s-icon"></i></div>-->
<div class="s-content">
<ul class="lg-list"></ul>
<el-button type="danger" size="small" @click="add" style="float: right">新增商品</el-button>
<table class="table" style="height: 5px">
<tr>
<td width="5%">序号</td>
<td width="20%">商品名</td>
<td width="10%">类别</td>
<td width="10%">销量</td>
<td width="20%">上架时间</td>
<td width="20%">更新时间</td>
<td width="20%">操作</td>
</tr>
<template v-for="product,index in products">
<tr>
<td>{{index+1}}</td>
<td>{{product.productName}}</td>
<td>{{product.categoryName}}</td>
<td>{{product.soldNum}}</td>
<td>{{product.createTime.replace(/T/g, ' ').replace(/.[\d]{3}Z/, ' ')}}</td>
<td>{{product.updateTime.replace(/T/g, ' ').replace(/.[\d]{3}Z/, ' ')}}</td>
<td>
<template>
<button class="btn btn-danger btn-xs" @click="changeClothesinfo"
:data-id="index">修改</button>
<button class="btn btn-danger btn-xs" @click="deleteClothes"
:data-id="index">下架</button>
</template>
</td>
</tr>
</template>
<tr>
<td colspan="5">
<!--分页 -->
<el-pagination background layout="prev, pager, next" :current-page="pageNum"
:page-size="limit" :total="count" @current-change="pager"></el-pagination>
</td>
</tr>
</table>
<!-- 弹窗,新增 -->
<el-dialog v-dialogDrag title="商品添加页面" :visible.sync="dialogFormVisible" class="dialog"
custom-class="dialogs">
<el-steps :space="800" :active="active" finish-status="success">
<el-step title="步骤 1">
</el-step>
<el-step title="步骤 2"></el-step>
</el-steps>
<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" v-show="show">
<h2 style="text-align: center">商品信息添加</h2>
<el-form-item label="商品名：">
<el-input v-model="product1.productName"></el-input>
</el-form-item>
<el-form-item label="指导价：">
<el-input v-model="product1.productPrice"></el-input>
</el-form-item>
<el-form-item label="一级分类名称：">
<el-select v-model="product1.rootCategoryId" filterable placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="二级分类名称：">
<el-select v-model="product1.categoryId" filterable placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="细节大图:" labe-width="100">
<el-input type="file" v-model="product1.content"></el-input>
</el-form-item>
<el-form-item label="原价:" labe-width="100">
<el-input v-model="product1.originPrice"></el-input>
</el-form-item>
<el-form-item label="尺码:" labe-width="100">
<div style="margin: 15px 0"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="库存:" labe-width="100">
<el-input v-model="product1.saveNum"></el-input>
</el-form-item>
</el-form>
<el-form label-width="100px" :model="formLabelAlign" v-show="!show">
<h2 style="text-align: center">商品参数信息添加</h2>
<el-form-item label="品牌：">
<el-input v-model="product1.productBrand"></el-input>
</el-form-item>
<el-form-item label="适合年龄:">
<el-input v-model="product1.applicableAge"></el-input>
</el-form-item>
<el-form-item label="面料：">
<el-input v-model="product1.productFabric"></el-input>
</el-form-item>
<el-form-item label="图案：" labe-width="100">
<el-input v-model="product1.productPattern"></el-input>
</el-form-item>
<el-form-item label="袖型:">
<el-input v-model="product1.sleeveType"></el-input>
</el-form-item>
<el-form-item label="袖长:">
<el-input v-model="product1.clothingLength"></el-input>
</el-form-item>
<el-form-item label=" 衣长：">
<el-input v-model="product1.sleevLength"></el-input>
</el-form-item>
<el-form-item label="颜色分类：">
<el-input v-model="product1.productColor"></el-input>
</el-form-item>
<el-form-item label=" 年份季节:" labe-width="100">
<el-radio-group v-model="product1.radio">
<el-radio :label="1">春天</el-radio>
<el-radio :label="2">夏天</el-radio>
<el-radio :label="3">秋天</el-radio>
<el-radio :label="4">冬天</el-radio>
</el-radio-group>
</el-form-item>
<el-el-form-item style="float: right">
<el-button @click="cancel">取消 </el-button>
<el-button type="danger" @click="saveProduct(product1)">保存</el-button>
</el-el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button style="margin-top: 12px" @click="pre">上一步</el-button>
<el-button style="margin-top: 12px" @click="next">下一步</el-button>
</div>
</el-dialog>
<div id="wrap" class="wrap">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="static/js/cookie_utils.js"></script>
<script type="text/javascript" src="static/js/axios.min.js"></script>
<script type="text/javascript" src="static/js/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="static/js/base.js"></script>
<script type="text/javascript">
var cityOptions = ['XL', 'M',"L"]
var layer
layui.use('layer', function(){
layer = layui.layer
})
var v = new Vue({
el:"#container",
data:{
// ------商品尺码
checkAll: true,
checkedCities: ['XL', 'M'],
cities: cityOptions,
isIndeterminate: true,
// ----------
// 一级分类
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: '',
// ----
radio: 3,
dialogFormVisible:false,
show:true,
product1:{ },
active: 0,
token:"",
pageNum:1,
limit:5,
userId:"",
products:[],
count:0,
status:0,
keyword:""
},
created:function(){
this.token = getCookieValue("token")
this.userId = getCookieValue("userId")
//1.加载页面，请求订单信息
var url1 = baseUrl+"admin/manageclothes"
axios({
url:url1,
method:"get",
headers:{
token:this.token
},
params:{
pageNum:this.pageNum,
limit:this.limit,
status:this.status,
keyword:this.keyword,
}
}).then((res)=>{
console.log(res.data.data)
if(res.data.code == 10000){
this.products = res.data.data.list
this.count = res.data.data.count
}
})
},
methods:{
// 保存商品
saveProduct(productVO){
console.log(productVO,"product1-------")
var url5=baseUrl+""
axios({
url:url5,
method:"POST",
data:productVO
}).then(res=>{
ELEMENT.Message.success("添加地址成功")
this.disabled=true
})
},
handleCheckAllChange(event) {
this.checkedCities = event.target.checked ? cityOptions : []
this.isIndeterminate = false
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length
this.checkAll = checkedCount === this.cities.length
this.isIndeterminate = checkedCount >0 &&checkedCount <this.cities.length
},
cancel(){
this.dialogFormVisible = false
},
add(){
this.show = true
this.dialogFormVisible = true
},
next() {this.show = false
if (this.active++ >2) this.active = 0
},
pre() {this.show = true
if (this.active-- <0) this.active = 0
},
pager:function(page){
this.pageNum = page
//1.加载页面，请求订单信息
var url1 = baseUrl+"admin/manageclothes"
var obj = {
pageNum:this.pageNum,
limit:this.limit,
keyword:this.keyword,
status:this.status
}
if(this.status!=null){
obj.status = this.status
}
axios({
url:url1,
method:"get",
headers:{
token:this.token
},
params:obj
}).then((res)=>{
console.log(res.data.data)
if(res.data.code == 10000){
this.products = res.data.data.list
this.count = res.data.data.count
}
})
},
queryByStatus:function(status){
this.pageNum = 1
this.status = status
console.log("插旗")
console.log(this.status)
var url1 = baseUrl+"admin/manageclothes"
/* var parm = {
"userId":this.userId,
"pageNum":this.pageNum,
"limit":this.limit,
"status":this.status
}*/
axios({
url:url1,
method:"get",
headers:{
token:this.token
},
//data: parm
params:{
userId:this.userId,
pageNum:this.pageNum,
limit:this.limit,
status:this.status
}
}).then((res)=>{
console.log(res.data.data)
if(res.data.code == 10000){
this.products = res.data.data.list
console.log(res.data.data.list.productName)
this.count = res.data.data.count
}
})
},
deleteClothes:function(event){
var index = event.srcElement.dataset.id
var pid = this.products[index].productId
var url = baseUrl+"admin/deleteclothes/"+pid
axios({
url:url,
method:"put",
headers:{
token:this.token
}
}).then((res)=>{
console.log("下架衣服测试")
//alert("取消成功！")
layer.msg("成功！")
window.location.href="admin-manageclothes.html"
})
},
changeClothesinfo:function(event){
var index = event.srcElement.dataset.id
var product = this.products[index]
localStorage.setItem("product",JSON.stringify(product))
window.location.href="admin-clothesinfo.html"
},
/* allOrder:function(){
this.pageNum = 1
//this.status = status
//console.log(this.status)
var url1 = baseUrl+"order/all"
var parm = {
"userId":this.userId,
"pageNum":this.pageNum,
"limit":this.limit,
"status":this.status
}
axios({
url:url1,
method:"get",
headers:{
token:this.token
},
//data: parm
params:{
userId:this.userId,
pageNum:this.pageNum,
limit:this.limit,
//status:this.status
}
}).then((res)=>{
console.log(res.data.data)
if(res.data.code == 10000){
this.orders = res.data.data.list
console.log("插旗")
console.log(res.data.data.list.productName)
this.count = res.data.data.count
}
})
}, */
}
})
</script>
</body>
</html>
JQ为CSS添加样式，可以使用jQuery CSS 操作 的css() 方法
定义和用法
css() 方法返回或设置匹配的元素的一个或多个样式属性。
设置 CSS 属性
设置所有匹配元素的指定 CSS 属性。
$(selector).css(name,value)实例
/*将所有段落的颜色设为红色：*/$("p").css("color","red")
设置多个 CSS 属性/值对
$(selector).css({property:value, property:value, ...})把“名/值对”对象设置为所有匹配元素的样式属性。
这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
实例
实例$("p").css({
"color":"white",
"background-color":"#98bf21",
"font-family":"Arial",
"font-size":"20px",
"padding":"5px"
})
也可以通过Jquery 属性操作的removeClass、addClass方法移除元素类名或者添加元素类名的方式达到修改元素样式的效果。详细内容可以百度“jQuery 参考手册 - 属性操作”
不存是jquery样式这么一说，其实就是通过js来动态设置css，而通常我们说的css样式则是静态的。如果真要说什么区别，那就是css样式是页面一开始就有的，而jquery动态设置的样式则可以在页面运行的时候随时改变。
