新增订单管理界面
This commit is contained in:
jia
parent
5810ccd5a8
commit
018dc3e3f8
117
components/cx-navTitle.vue
Normal file
117
components/cx-navTitle.vue
Normal file
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<!-- tab选项卡滑动切换 -->
|
||||
<view class="my-tab" ref="myTabRef">
|
||||
<view
|
||||
class="my-tab-item"
|
||||
v-for="(item, index) in tabs" :ref="`tab${item.name}Ref`"
|
||||
:class="{ active: item.name === activeItem }" :key="index"
|
||||
>
|
||||
<view class="my-tab-text" ref="tabName" @click="tabClick(item,index)">
|
||||
<view class="name">{{ item.label }}</view>
|
||||
<view class="xian"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
/*
|
||||
tabs -- 传入标签名 array类型 : tabs: [{name: "tabOne",label: "全部"},{...}]
|
||||
activeItem -- 默认第一个class名 string
|
||||
@tabClick -- 自定义点击事件 回传用到 做逻辑判断
|
||||
标签大小、默认颜色、选中颜色，下边框线等样式，已在css中注释，请根据注释修改即可
|
||||
*/
|
||||
export default {
|
||||
name: "cx-navTitle",
|
||||
props:{
|
||||
tabs:{ //所有标签名
|
||||
type:Array,
|
||||
default:[]
|
||||
},
|
||||
activeItem:{//默认第一个 选中的class类名
|
||||
type:String,
|
||||
default:''
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
},
|
||||
methods: {
|
||||
// tab点击
|
||||
tabClick(item,index) {
|
||||
this.$emit('tabClick',item) //回传数据
|
||||
// 触发滑动方法
|
||||
this.scrollLeftTo(item.name);
|
||||
},
|
||||
// 滑动
|
||||
scrollLeftTo(name) {
|
||||
const ref = `tab${name}Ref`;
|
||||
// 获取myTabRef的DOM元素，即类名为my-tab的标签
|
||||
const nav = this.$refs.myTabRef.$el;
|
||||
// 获取当前点击的某一个tab的的DOM元素，即类名为my-tab-item的标签
|
||||
const title = this.$refs[ref][0].$el;
|
||||
// 计算位移偏差
|
||||
const to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2;
|
||||
nav.scrollLeft = to;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.my-tab {
|
||||
width:720rpx;
|
||||
margin:0 auto;
|
||||
// height:80rpx;
|
||||
// background: #ffffff;
|
||||
// line-height:80rpx;
|
||||
// border:1px solid red;
|
||||
display: flex;
|
||||
overflow-x: scroll;
|
||||
padding-right:0rpx;
|
||||
scroll-behavior: smooth; //平稳的滑动效果
|
||||
font-size:32rpx;
|
||||
font-family:PingFang-SC-Heavy;
|
||||
.my-tab-item {
|
||||
padding: 20rpx 35rpx; //标签上下左右距离 -- 在这里改
|
||||
color:#707070; //标签默认颜色 -- 在这里改
|
||||
// height: 0rpx;
|
||||
text-align: center;
|
||||
flex: 1 0 auto;
|
||||
&.active {
|
||||
color:#333333; //标签选中颜色 -- 在这里改
|
||||
font-family:PingFang-SC-Heavy;
|
||||
font-weight:600;
|
||||
position: relative;
|
||||
.my-tab-text {
|
||||
.xian{
|
||||
position:relative;
|
||||
top:0rpx; //下边框线和标签距离 -- 在这里改
|
||||
z-index:8;
|
||||
border:1rpx solid #F84221; //标签底部下边框线 -- 在这里改
|
||||
border-radius:50rpx;
|
||||
padding:0rpx 30rpx;
|
||||
opacity:0.6;//下边框线透明度 -- 在这里改
|
||||
}
|
||||
.name{
|
||||
position:relative;
|
||||
z-index:9;
|
||||
font-size: 32rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #F84221;
|
||||
color: #F84221;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 隐藏滚动条
|
||||
::-webkit-scrollbar {
|
||||
height: 0;
|
||||
width: 0;
|
||||
color: transparent;
|
||||
}
|
||||
</style>
|
||||
@ -9,8 +9,8 @@ let httpApiThree
|
||||
// 网络接口修改此字符 小程序域名要求https
|
||||
// let httpApi = 'http://192.168.31.110:8324' // 测试
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
httpApi = 'https://shop.lihaink.cn' // 生产
|
||||
// httpApi = "https://crmeb-test.shop.lihaink.cn"
|
||||
// httpApi = 'https://shop.lihaink.cn' // 生产
|
||||
httpApi = "https://crmeb-test.shop.lihaink.cn"
|
||||
// httpApi = "http://192.168.0.222"
|
||||
// httpApi = "http://192.168.0.108:8325"
|
||||
// #ifdef MP-WEIXIN
|
||||
|
||||
@ -698,6 +698,13 @@
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}, {
|
||||
"path": "releaseOrdermanagement/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单管理",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -134,7 +134,7 @@
|
||||
<text class="text">委托销售</text>
|
||||
</view>
|
||||
<view class="examine"
|
||||
@click="navigator(`/pages/product/basicSet?mer_id=${mer_id}`, '商户设置')">
|
||||
@click="navigator(`/pages/users/releaseOrdermanagement/index`, '商户设置')">
|
||||
<image class="icon_img" src="@/static/images/fabu.png" mode="aspectFill">
|
||||
</image>
|
||||
<text class="text">发布管理</text>
|
||||
|
||||
@ -1,37 +1,395 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<view class="">
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<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">
|
||||
编辑
|
||||
</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">
|
||||
删除
|
||||
</view>
|
||||
<view class="content-two-edit">
|
||||
编辑
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="content-two-four" v-if='this.tabTitle=="tabFour"'>
|
||||
<view class="content-two-delete">
|
||||
删除
|
||||
</view>
|
||||
<view class="content-two-edit">
|
||||
编辑
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="content-two-five" v-if='this.tabTitle=="tabFive"'>
|
||||
<view class="content-two-delete">
|
||||
拒绝
|
||||
</view>
|
||||
|
||||
<view class="content-two-agree">
|
||||
同意
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cxNavTitle from '@/components/cx-navTitle.vue'
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
list:[{
|
||||
name:在售
|
||||
},
|
||||
{
|
||||
name:已售出
|
||||
},
|
||||
{
|
||||
name:待审核
|
||||
},
|
||||
{
|
||||
name:审核未通过
|
||||
},
|
||||
{
|
||||
name:在售
|
||||
}]
|
||||
}
|
||||
}
|
||||
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) { //点击获取当前标签数据
|
||||
console.log('你点击了【' + e.label + '】的选项卡标签', e.name)
|
||||
this.activeItem = e.name; //当前class类名
|
||||
this.tabTitle = e.name; //当前选的标签名
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss" scoped>
|
||||
.content_top {}
|
||||
|
||||
|
||||
.content_top {
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content-content {
|
||||
|
||||
|
||||
background: #FFFFFF;
|
||||
margin-left: 28rpx;
|
||||
margin-right: 28rpx;
|
||||
padding: 28rpx 46rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 14px 14px 14px 14px;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
|
||||
.content-onea {
|
||||
display: flex;
|
||||
|
||||
|
||||
|
||||
|
||||
.content-one-img {
|
||||
width: 148rpx;
|
||||
height: 148rpx;
|
||||
margin-right: 28rpx;
|
||||
border: 1px solid;
|
||||
|
||||
|
||||
image {
|
||||
width: 148rpx;
|
||||
height: 148rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
|
||||
.content-one-img {
|
||||
width: 148rpx;
|
||||
height: 148rpx;
|
||||
margin-right: 28rpx;
|
||||
border: 1px solid;
|
||||
|
||||
|
||||
image {
|
||||
width: 148rpx;
|
||||
height: 148rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.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-two_one {
|
||||
|
||||
.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-three {
|
||||
|
||||
.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 {
|
||||
|
||||
.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 {
|
||||
|
||||
.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>
|
||||
Loading…
x
Reference in New Issue
Block a user