432 lines
8.2 KiB
Vue
432 lines
8.2 KiB
Vue
<template>
|
|
<view class="content">
|
|
|
|
<view class="content_top">
|
|
<!--选项卡滑动切换-->
|
|
<cxNavTitle :tabs="tabs" :activeItem="activeItem" @tabClick="tabClick"></cxNavTitle>
|
|
</view>
|
|
|
|
<view class="content-content">
|
|
|
|
<view class="content-onea" v-if='this.tabTitle=="tabTwo"'>
|
|
<view class="content-one-img">
|
|
<image src="@/static/images/bg2.png" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="content-one-txt">
|
|
<view class="one-txt-a">
|
|
超级无敌一级棒乌龙山马龙尖茶...
|
|
</view>
|
|
<view class="one-txt-b">
|
|
<view class="txt-b-a">
|
|
¥ 100.00
|
|
</view>
|
|
<view class="txt-b-b">
|
|
类型:调货
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content-one" v-else>
|
|
<view class="content-one-img">
|
|
<image src="@/static/images/bg2.png" mode="aspectFit"></image>
|
|
</view>
|
|
<view class="content-one-txt">
|
|
<view class="one-txt-a">
|
|
超级无敌一级棒乌龙山马龙尖茶...
|
|
</view>
|
|
<view class="one-txt-b">
|
|
<view class="txt-b-a">
|
|
¥ 100.00
|
|
</view>
|
|
<view class="txt-b-b">
|
|
类型:调货
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content-two_one" v-if='this.tabTitle=="tabOne"'>
|
|
|
|
<view class="content-two-edit" @click="soldEdit">
|
|
编辑
|
|
</view>
|
|
|
|
</view>
|
|
<view class="content-two-two" v-if='this.tabTitle=="tabTwo"'>
|
|
<!-- <view class="content-two-delete">
|
|
删除
|
|
</view>
|
|
<view class="content-two-edit">
|
|
编辑
|
|
</view>
|
|
-->
|
|
</view>
|
|
<view class="content-two-three" v-if='this.tabTitle=="tabThree"'>
|
|
<view class="content-two-delete" @click="pendingDeletion">
|
|
删除
|
|
</view>
|
|
<view class="content-two-edit" @click="editReviewe">
|
|
编辑
|
|
</view>
|
|
|
|
</view>
|
|
<view class="content-two-four" v-if='this.tabTitle=="tabFour"'>
|
|
<view class="content-two-delete" @click="auditDelete">
|
|
删除
|
|
</view>
|
|
<view class="content-two-edit" @click="auditEdit">
|
|
编辑
|
|
</view>
|
|
|
|
</view>
|
|
<view class="content-two-five" v-if='this.tabTitle=="tabFive"'>
|
|
<view class="content-two-delete" @click="passDlete">
|
|
拒绝
|
|
</view>
|
|
|
|
<view class="content-two-agree" @click="passagree">
|
|
同意
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import cxNavTitle from '@/components/cx-navTitle.vue'
|
|
export default {
|
|
components: {
|
|
cxNavTitle
|
|
},
|
|
data() {
|
|
return {
|
|
activeItem: "tabOne",
|
|
tabTitle: "",
|
|
tabs: [{
|
|
name: "tabOne",
|
|
label: '在售',
|
|
},
|
|
{
|
|
name: "tabTwo",
|
|
label: '已售出',
|
|
},
|
|
{
|
|
name: "tabThree",
|
|
label: '待审核',
|
|
},
|
|
{
|
|
name: "tabFour",
|
|
label: '审核未通过',
|
|
},
|
|
{
|
|
name: "tabFive",
|
|
label: '审核通过',
|
|
},
|
|
],
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.tabTitle = this.tabs[0].name
|
|
//有时进入页面需要获取默认的第一个标签做逻辑判断 -- 如下:
|
|
console.log(this.tabs[0])
|
|
},
|
|
methods: {
|
|
tabClick(e) { //点击获取当前标签数据
|
|
this.activeItem = e.name; //当前class类名
|
|
this.tabTitle = e.name; //当前选的标签名
|
|
},
|
|
// 已售出 编辑
|
|
soldEdit() {
|
|
|
|
},
|
|
//待审核 删除
|
|
pendingDeletion() {
|
|
|
|
},
|
|
//待审核 编辑
|
|
editReviewe() {
|
|
|
|
},
|
|
// 审核未通过 删除
|
|
auditDelete() {
|
|
|
|
},
|
|
|
|
// 审核未通过 编辑
|
|
auditEdit() {
|
|
|
|
},
|
|
//审核通过 拒绝
|
|
passDelete() {
|
|
|
|
},
|
|
//审核通过 同意
|
|
passagree() {
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content_top {
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
|
|
.content_top {
|
|
|
|
width: 100%;
|
|
}
|
|
|
|
.content-content {
|
|
|
|
margin-top: 21rpx;
|
|
background: #FFFFFF;
|
|
margin-left: 28rpx;
|
|
margin-right: 28rpx;
|
|
padding: 0 46rpx;
|
|
padding-top: 28rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
|
opacity: 1;
|
|
position: relative;
|
|
|
|
.content-onea {
|
|
display: flex;
|
|
padding-bottom: 23rpx;
|
|
|
|
|
|
|
|
.content-one-img {
|
|
width: 148rpx;
|
|
height: 148rpx;
|
|
margin-right: 28rpx;
|
|
border: 1px solid;
|
|
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.content-one-txt {
|
|
margin-bottom: 23rpx;
|
|
|
|
.txt-b-a {
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
|
|
.one-txt-b {
|
|
display: flex;
|
|
margin-top: 30rpx;
|
|
|
|
.txt-b-a {
|
|
font-size: 32rpx;
|
|
font-family: SF Pro Display-Medium, SF Pro Display;
|
|
font-weight: 500;
|
|
color: #F84221;
|
|
margin-right: 74rpx;
|
|
}
|
|
|
|
.txt-b-b {
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #333333
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.content-one {
|
|
display: flex;
|
|
border-bottom: 1px solid #CCCCCC;
|
|
padding-bottom: 23rpx;
|
|
|
|
.content-one-img {
|
|
width: 148rpx;
|
|
height: 148rpx;
|
|
margin-right: 28rpx;
|
|
border: 1px solid;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.content-one-txt {
|
|
|
|
|
|
.txt-b-a {
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
|
|
.one-txt-b {
|
|
display: flex;
|
|
margin-top: 30rpx;
|
|
|
|
.txt-b-a {
|
|
font-size: 32rpx;
|
|
font-family: SF Pro Display-Medium, SF Pro Display;
|
|
font-weight: 500;
|
|
color: #F84221;
|
|
margin-right: 74rpx;
|
|
}
|
|
|
|
.txt-b-b {
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #333333
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.content-two_one {
|
|
height: 110rpx;
|
|
position: relative;
|
|
|
|
.content-two-edit {
|
|
width: 168rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
background: linear-gradient(90deg, #F98649 0%, #F34E45 100%);
|
|
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
|
position: absolute;
|
|
right: 28rpx;
|
|
bottom: 20rpx;
|
|
}
|
|
}
|
|
|
|
.content-two-three {
|
|
height: 110rpx;
|
|
position: relative;
|
|
|
|
.content-two-edit {
|
|
width: 168rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
background: linear-gradient(90deg, #F98649 0%, #F34E45 100%);
|
|
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
|
position: absolute;
|
|
right: 28rpx;
|
|
bottom: 23rpx;
|
|
}
|
|
|
|
.content-two-delete {
|
|
width: 168rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
border: 2rpx solid #999999;
|
|
position: absolute;
|
|
right: 228rpx;
|
|
bottom: 23rpx;
|
|
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
|
}
|
|
}
|
|
|
|
.content-two-four {
|
|
height: 110rpx;
|
|
position: relative;
|
|
|
|
.content-two-edit {
|
|
width: 168rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
background: linear-gradient(90deg, #F98649 0%, #F34E45 100%);
|
|
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
|
position: absolute;
|
|
right: 28rpx;
|
|
bottom: 23rpx;
|
|
}
|
|
|
|
.content-two-delete {
|
|
width: 168rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
border: 2rpx solid #999999;
|
|
position: absolute;
|
|
right: 228rpx;
|
|
bottom: 23rpx;
|
|
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
|
}
|
|
}
|
|
|
|
|
|
.content-two-five {
|
|
height: 110rpx;
|
|
position: relative;
|
|
|
|
.content-two-agree {
|
|
width: 168rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
background: linear-gradient(90deg, #F98649 0%, #F34E45 100%);
|
|
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
|
position: absolute;
|
|
right: 28rpx;
|
|
bottom: 23rpx;
|
|
}
|
|
|
|
.content-two-delete {
|
|
width: 168rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
border: 2rpx solid #999999;
|
|
position: absolute;
|
|
right: 228rpx;
|
|
bottom: 23rpx;
|
|
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |