Skip to content

M
mallapp
Commit 8eec57b1 authored by Mac's avatar Mac
Browse files
Options

司导

parent 660ae09b
Show whitespace changes
Inline Side-by-side
Showing with 145 additions and 474 deletions
pages/guidecar/guidecarList.vue
View file @ 8eec57b1
......@@ -15,16 +15,27 @@
</view>
</div>
<view style="padding: 10px 0 0; background: #fff;width: 100%;border-bottom: 1px solid #E2E2E2;">
<!-- <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :active-color="mainColor"></u-tabs> -->
<wyb-drop-down
ref="dropDown"
:options="options"
@select="onItemSelect">
<!-- 自定义模式开启时，这里可以放内容 -->
</wyb-drop-down>
<view style="padding: 10px 0 0;position: relative;background: #fff;width: 100%;height: 55px;">
<view style=" border-bottom: 1px solid #E2E2E2;">
<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" :active-color="mainColor"></u-tabs>
</view>
<view v-if="screenshow==true" class="tanchu" >
<scroll-view
:scroll-y="true"
:enable-back-to-top="true"
style="max-height: 283px;">
<view class="tanchu_item" v-for="(item, index) in screenList" :key="index" @click="onItemSelect(item)">
<span>{{item.Name}}</span>
<u-icon name="success" :color="mainColor" size="30" v-if='item.ID==msg.OrderBy && current==0'></u-icon>
<u-icon name="success" :color="mainColor" size="30" v-if='item.ID==msg.CarBrandId && current==1'></u-icon>
</view>
</scroll-view>
</view>
</view>
<div style='display: flex;width: 100%;'>
<view v-if="screenshow==true" class="Mask" @click="screenshow=false"></view>
<div class="left-slider">
<sidebar
:active="tic"
......@@ -42,6 +53,7 @@
:enable-back-to-top="true"
:enable-flex="true"
@scrolltolower="lower"
v-if="g.length > 0"
style=" height: calc(100vh - (44px+10px+50px)) ;width: calc(100vw - 85px);"
>
<view style="width: 100%;display: flex;flex-direction: column;align-items: center;padding: 10px;">
......@@ -95,11 +107,10 @@
<script>
import sidebar from "../../components/sidebar/index.vue";
import wybDropDown from './wyb-drop-down/wyb-drop-down.vue'
export default {
components: {
sidebar,
wybDropDown
sidebar
},
data() {
return {
......@@ -108,14 +119,14 @@ export default {
pageTitle: "订车",
classList:[],
current:0,
screenshow:false,
tic:0,
msg:{
pageIndex:1,
pageSize:15,
Name:"",
GoodsType:1,
OrderBy:1,
OrderBy:0,
StartTime:'',
EndTime:'',
CarType:0,
......@@ -126,14 +137,17 @@ export default {
CarBrandId:0,
RegionIds:0
},
options: [{
header: '综合排序',
contents: ['不限','综合升序', '综合降序', '价格升序', '价格降序','评分升序','评分降序']
}, {
header: '品牌',
contents: []
}],
screenList:[],
contents:[
{'ID':0,Name:'不限'},
{'ID':1,Name:'综合升序'},
{'ID':2,Name:'综合降序'},
{'ID':3,Name:'价格升序'},
{'ID':4,Name:'价格降序'},
{'ID':5,Name:'评分升序'},
{'ID':6,Name:'评分降序'},
],
contents2:[],//品牌
list: [{name: '综合排序'}, {name: '品牌'}],
STime:'',
ETime:'',
......@@ -176,19 +190,17 @@ export default {
if(options && options.tic){
this.tic = options.tic
}
this.getCarClassList()
this.getCarClassList()//车辆类型
this.init();
this.getGuideCarBrandList()
this.getGuideCarBrandList()//车辆品牌
},
created() {
this.mainColor = this.$uiConfig.mainColor;
this.activeStyle = `background:${this.mainColor};`;
uni.setNavigationBarTitle({
title: this.pageTitle,
});
},
methods: {
init(){
......@@ -222,12 +234,11 @@ getGuideCarBrandList(){
this.BrandList = res.data;
let obj = {Name: "全部", ID: 0}
this.BrandList.unshift(obj)
console.log(this.BrandList)
let list=[];
this.BrandList.forEach(x=>{
list.push(x.Name)
list.push(x)
})
this.options[1].contents = list
this.contents2 = list
}
);
},
......@@ -253,20 +264,36 @@ getGuideCarBrandList(){
},
change(val){
console.log(val)
if(val==0){
if(val==this.current&& this.screenshow==true){
this.screenshow= false
}else{
this.screenshow= true
}
this.screenList = this.contents
}else{
if(val==this.current&& this.screenshow==true){
this.screenshow= false
}else{
this.screenshow= true
}
this.screenList = this.contents2
}
console.log(this.screenList)
this.current= val
},
onItemSelect(val){
console.log(val)
if(val.headerIndex ==0){
this.msg.OrderBy = val.contentIndex
}
if(val.headerIndex ==1){
this.msg.CarBrandId = this.BrandList[val.contentIndex].ID
if(this.current==0){
this.msg.OrderBy = val.ID;
}else{
this.msg.CarBrandId = val.ID
}
this.screenshow = false
this.msg.pageIndex=1;
this.g = [];
this.init()
this.$refs.dropDown.close() // 关闭
},
lower(e) {
......@@ -365,4 +392,21 @@ getGuideCarBrandList(){
margin-top: 10px;
background: #E2E2E2;
}
.guidecarList .Mask{
width: 100%;height: 100%;background: #000000;opacity: 0.3;position: absolute;left: 0;top: 130px;z-index: 999;
}
.guidecarList .tanchu{
width: 100%;display: flex;flex-direction: column;align-items: center;background: #FFF;position: absolute;top: 55px;left: 0;z-index: 1999;
}
.guidecarList .tanchu_item{
width: 94%;
margin-left: 3%;
height: 40px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #E2E2E2;
}
</style>
pages/guidecar/guidecarOrderdetails.vue 0 → 100644
View file @ 8eec57b1
<template>
<view class="guidecarOrderdetails" :style="{'height':contentHeight}">
</view>
</template>
<script>
export default {
data() {
return {
pageTitle: "取车城市",
msg:{
OrderId:367471,
NewUserId:0,
}
}
},
onLoad(option){
},
created(){
this.contentHeight = this.$utils.calcContentHeight(-40)+'px';
this.mainColor = this.$uiConfig.mainColor;
this.secondary = this.$uiConfig.secondary;
this.init()//商品详情
},
mounted() {
uni.setNavigationBarTitle({
title: this.pageTitle,
});
},
methods: {
init(){
uni.showLoading({
title: "加载中",
});
this.request2(
{
url: '/api/AppletGCOrder/GetAppletGuidecarOrderOrderInfo',
data: this.msg
},
(res) => {
uni.hideLoading();
console.log(res.data)
}
);
},
}
}
</script>
<style>
.guidecarOrderdetails{
background: #FFFFFF;
}
</style>
pages/guidecar/wyb-drop-down/iconfont.css deleted 100755 → 0
View file @ 660ae09b
@font-face {font-family: "iconfont";
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMoAAsAAAAABxwAAALZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqBYIFNATYCJAMQCwoABCAFhG0HPRs0BsgusG3YowCKZblG/A248I8FOyAe+Oye987uPHySFUCVQo0KTFJCRZnz739uc6TZ6xcSFkmmSfPs/p8faiVYyJAysa8jwJbrp83gaCY/j/s8l9O7q4ACmd/Ochtr0Z5+1AswDijQsQZt4QI6QW6pXcSBwSv/1nYCCqqqsdC7M5oKSRHpFxDmudwQkr2QKEbZvCA7MzUKh2Tkk93JOxzUvw//aBnyJDIpMnTQjLYt1H4v9UeQN/18GCcJYQJ3dgYpGiMSZs2mppCFiJ8qyI6iLfLyEn7P/b7mjxDH1smHZfQvjyCRErJIZWHQ2kun/J7jNIHfTzQJf4gVUvghxnw/0x4DfV5lXaBHlFVi7aO0/bxWdv6+cPdRmdlrbzn+qfO6PVN6994+P/v5PWXZ++LdvWUs9gsXP7QrtrfB91P9aflbn1u37JV5vmPHmbH/a+bW/pculdBKpMfTy/pJ27c1d3s3Ha40b4Xnb7c73PMn7hxVM+r+psb222nvS698xqM+qUXITmlvaakgkG5KhgsC6ePkJarZcby5/0ws1vn5QhH8iDY/1tYIZoAvBViBWAWwLpYq4ogxV3N5FYzKghIJClIX6MxR0m9XGMuAawnyyhwI5lRpkcqrTUZeY2QU0hpZed1QUCP9ZhdSyhKyEAugoe0OguIeIlHUK6SKe09G3q/IKOs/ZBUPKQoaEUotWUjdMDvda4XGBm2YcoTZFkWMuTZpUz1Gvg2MVVelBXNcrd0otGjafJjtYoSrK0Ys3fHKsg2DGSsKoa+zGwYBwaIVeWhtCrM2m0W1WbMZc3cqTKVQSOtlBRk2kA1McQRms5AIk8030qPvjyFuK2BYrTAW0nNoZc1tH7TQVHMA2dVHIMav3LLUDlexzAYDZlghIdDX8aKApghYNN/JgywbBbMOJBaqmnmNZkD1heeNIYZboCByVgxJSEMMGdlpW5fTVplG+0he5RqCAAAAAA==') format('woff2')
}
.iconfont {
font-family: "iconfont" !important;
margin-top: 5rpx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-selected:before {
content: "\e613";
}
.icon-down:before {
font-weight: bold;
content: "\e67a";
}
.icon-down-fill:before {
content: "\e701";
}
pages/guidecar/wyb-drop-down/wyb-drop-down.vue deleted 100755 → 0
View file @ 660ae09b
<template>
<view
class="wyb-drop-down-box"
:style="{
'--duration': duration + 'ms',
'--autoContentTop': autoContentTop}">
<view class="wyb-drop-down-container" @tap.stop.prevent @touchmove.stop.prevent>
<view
class="wyb-drop-down-header"
:style="{
zIndex: zIndex,
backgroundColor: bgColor.header}">
<view
class="wyb-drop-down-header-item"
v-for="(item,index) in options"
:key="item.header"
@tap.stop="onHeaderTap(index)"
:style="{fontSize: fontSize.header + 'rpx'}">
<text
class="wyb-drop-down-header-item-label"
:style="{
fontWeight: headerActiveIndex === index && dropOver && activeWeight ? 'bold' : 'normal',
color: headerActiveIndex === index && dropOver ? activeColor: defaultColor}">{{item.header}}</text>
<text
v-if="dropIcon === 'fill'"
class="iconfont icon-down-fill wyb-drop-down-header-item-icon"
:class="[headerActiveIndex === index && dropOver ? 'wyb-drop-down-header-item-icon-active' : '']"
:style="{
fontSize: fontSize.header - 5 + 'rpx',
color: headerActiveIndex === index && dropOver ? activeColor: defaultColor}" />
<text
v-if="dropIcon==='line'"
class="iconfont icon-down wyb-drop-down-header-item-icon"
:class="[headerActiveIndex === index && dropOver ? 'wyb-drop-down-header-item-icon-active' : '']"
:style="{
fontSize: fontSize.header - 5 + 'rpx',
transformOrigin: '50% 45%',
color: headerActiveIndex === index && dropOver ? activeColor: defaultColor}" />
<view class="wyb-drop-down-vline" v-if="index !== options.length - 1" />
</view>
</view>
<scroll-view
v-if="dropDown"
class="wyb-drop-down-content"
:class="[dropOver ? 'wyb-drop-down-content-active' : '']"
:scroll-y="scroll"
:enable-flex="true"
:scroll-anchoring="true"
:style="{
zIndex: zIndex - 1,
fontSize: fontSize.content + 'rpx',
backgroundColor: bgColor.content,
borderBottomLeftRadius: radius + 'px',
borderBottomRightRadius: radius + 'px',
minHeight: minHeight + 'rpx',
height: autoHeight ? 'auto' : minHeight + 'rpx',
maxHeight: autoHeight && maxHeight ? maxHeight + 'rpx' : 'auto'}">
<view class="wyb-drop-down-content-box" v-for="(item,index) in options" :key="contentBoxKey(index)">
<view v-if="item['custom'] && headerActiveIndex === index && dropDown" class="wyb-drop-down-content-slot">
<slot></slot>
</view>
<view
v-if="!item['custom'] && headerActiveIndex === index && dropDown"
class="wyb-drop-down-content-item"
v-for="(content,zIndex) in item['contents']"
:key="content"
@tap.stop="onContentItemsTap(zIndex)">
<text
class="wyb-drop-down-content-item-label"
:style="{color: contentActiveIndexList[headerActiveIndex]['index'] === zIndex && dropOver ? activeColor: defaultColor}">
{{content}}
</text>
<text
v-if="contentActiveIndexList[headerActiveIndex]['index'] === zIndex && dropOver"
:style="{color: activeColor}"
class="iconfont icon-selected wyb-drop-down-content-item-icon" />
<view class="wyb-drop-down-line" v-if="zIndex !== options[headerActiveIndex].contents.length - 1" />
</view>
</view>
</scroll-view>
</view>
<view
v-if="dropDown"
class="wyb-drop-down-mask"
:class="[dropOver ? 'wyb-drop-down-mask-active' : '']"
@tap.stop="close"
@touchmove.stop.prevent
:style="{
zIndex: zIndex - 2,
height: screenHeight + 'px',
backgroundColor: 'rgba(0, 0, 0, ' + maskAlpha + ')'}" />
</view>
</template>
<script>
export default {
data() {
return {
dropDown: false,
dropOver: false,
duration: 100,
contents: this.options[0].contents || [0],
headerActiveIndex: 0,
contentActiveIndexList: []
}
},
computed: {
autoContentTop() {
return `${44 + this.rpxToPx(100)}px`
},
screenHeight() {
return uni.getSystemInfoSync().screenHeight
},
screenWidth() {
return uni.getSystemInfoSync().screenWidth
},
contentBoxKey() {
return function(index) {
return `option${index}`
}
}
},
props: {
options: {
type: Array,
default() {
return [{
header: 'A',
contents: ['1', '2']
}]
}
},
defaultIndexList: {
type: Array,
default() {
return []
}
},
autoHeight: {
type: Boolean,
default: true
},
minHeight: {
type: [String, Number],
default: 10
},
maxHeight: {
type: [String, Number],
default: 600
},
scroll: {
type: Boolean,
default: true
},
radius: {
type: [String, Number],
default: '0'
},
activeColor: {
type: String,
default: '#2979ff'
},
activeWeight: {
type: Boolean,
default: true
},
defaultColor: {
type: String,
default: '#333'
},
bgColor: {
type: Object,
default() {
return {
header: '#fff',
content: '#fff'
}
}
},
dropIcon: {
type: String,
default: 'fill'
},
fontSize: {
type: Object,
default() {
return {
header: 30,
content: 30
}
}
},
maskAlpha: {
type: [String, Number],
default: '0.5'
},
zIndex: {
type: Number,
default: 500
}
},
mounted() {
if (this.defaultIndexList.length === 0) {
this.options.forEach((item, index) => {
if (!item.custom) {
this.contentActiveIndexList.push({headerIndex: index, index: 0})
} else {
this.contentActiveIndexList.push({headerIndex: index, custom: true})
}
})
} else {
let i = 0
this.options.forEach((item, index) => {
if (!item.custom) {
this.contentActiveIndexList.push([...this.defaultIndexList][i])
i++
} else {
this.contentActiveIndexList.push({headerIndex: index, custom: true})
}
})
}
},
methods: {
onHeaderTap(index) {
let item = this.options[index]
if (Object.is(this.headerActiveIndex, index) && this.dropOver) {
this.close()
} else {
this.headerActiveIndex = index
if (item.custom) {
this.$emit('change', {
headerIndex: index,
header: this.options[index].header
})
}
this.dropDown = true
this.$nextTick(() => {
this.dropOver = true
this.$emit('show')
})
}
},
onContentItemsTap(index) {
this.contentActiveIndexList[this.headerActiveIndex]['index'] = index
this.$forceUpdate()
let event = {
headerIndex: this.headerActiveIndex,
header: this.options[this.headerActiveIndex]['header'],
contentIndex: index,
content: this.options[this.headerActiveIndex]['contents'][index],
contentActiveIndexList: this.contentActiveIndexList
}
this.$emit('select', event)
},
close() {
this.dropOver = false
setTimeout(() => {
this.dropDown = false
this.$emit('hide')
}, this.duration)
},
rpxToPx(rpx) {
return rpx / 750 * this.screenWidth
}
}
}
</script>
<style>
@import './iconfont.css';
.wyb-drop-down-mask {
position: fixed;
top: 44px;
/* #ifndef H5 */
top: 55px;
/* #endif */
left: 0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity var(--duration);
z-index: 498;
}
.wyb-drop-down-mask-active {
opacity: 1;
transition: opacity var(--duration);
}
.wyb-drop-down-header {
position: fixed;
top: 44px;
/* #ifndef H5 */
top: 55px;
/* #endif */
left: 0;
right: 0;
display: flex;
flex-direction: row;
background-color: #fff;
z-index: 500;
}
.wyb-drop-down-header-item {
flex: 1;
height: 100rpx;
font-size: 30rpx;
border-bottom: 1px solid #eee;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
}
.wyb-drop-down-header-item-label {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
.wyb-drop-down-header-item-icon {
margin-left: 20rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
transform-origin: 50% 40%;
transform: rotate(0);
transition: transform var(--duration);
}
.wyb-drop-down-header-item-icon-active {
transform: rotate(180deg);
transition: transform var(--duration);
}
.wyb-drop-down-content {
position: fixed;
top: var(--autoContentTop);
/* #ifndef H5 */
top: 105px;
/* #endif */
left: 0;
right: 0;
z-index: 499;
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: #fff;
/* transform: translateY(-100%); */
transition: transform var(--duration);
}
.wyb-drop-down-content-active {
transform: translateY(0);
transition: transform var(--duration);
}
.wyb-drop-down-content-item {
width: 100%;
height: 100rpx;
font-size: 30rpx;
display: flex;
flex-direction: column;
position: relative;
}
.wyb-drop-down-content-item-label {
width: 90%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding-left: 50rpx;
}
.wyb-drop-down-content-item-icon {
position: absolute;
top: 50%;
right: 40rpx;
font-size: 40rpx;
transform: translateY(-50%);
}
.wyb-drop-down-content-box {
width: 100%;
}
.wyb-drop-down-content-slot {
width: 100%;
height: 100%;
}
.wyb-drop-down-vline {
width: 1px;
height: 40rpx;
background-color: #eee;
position: absolute;
right: 0;
}
.wyb-drop-down-line {
width: 100%;
height: 1px;
background-color: #eee;
margin-left: 50rpx;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment