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>