yangjie
/
high-mini
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.开发团油页面

Browse Source
yj-dev
杨杰 3 years ago
parent 677c12fd6f
commit 823e49fbe6
15 changed files with 1155 additions and 5 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 475
      components/sl-filter/filter-view.vue
  2. 20
      components/sl-filter/iconfont/iconfont.css
  3. 122
      components/sl-filter/popup-layer.vue
  4. 302
      components/sl-filter/sl-filter.vue
  5. 12
      components/uni-search-bar/components/uni-search-bar/uni-search-bar.vue
  6. 12
      pages.json
  7. 208
      pages/goods/refuel/refuel.vue
  8. BIN
      static/img/btjy.png
  9. BIN
      static/img/dh.png
  10. BIN
      static/img/dhl.png
  11. BIN
      static/img/succes.png
  12. BIN
      static/img/xiala.png
  13. BIN
      static/img/yhl.png
  14. BIN
      static/img/yql.png
  15. 7
      uni.scss

475
components/sl-filter/filter-view.vue
Unescape View File

@ -0,0 +1,475 @@
<template>
<view>
<view style="padding: 0px 0px;">
<view class="filter-content" v-for="(item, index) in menuList" :key="index" v-if="menuIndex == index">
<view v-if="item.isSort">
<view class="filter-content-list">
<view v-for="(detailItem,idx) in selectDetailList" :key="idx" :class="detailItem.isSelected?'filter-content-list-item-active':'filter-content-list-item-default'"
:style="{'color': detailItem.isSelected?themeColor:'#666666'}" @tap="sortTap(idx,selectDetailList,item.key)">
<text>{{detailItem.title}}</text>
</view>
</view>
</view>
<view v-else>
<!-- <view class="filter-content-title" v-if="item.detailTitle && item.detailTitle.length">
<text>{{item.detailTitle}}</text>
</view> -->
<view class="filter-content-detail">
<text v-for="(detailItem,idx) in selectDetailList" :key="idx" class='filter-content-detail-item-default' :style="{'background-color':detailItem.isSelected?themeColor:'#f6f6f6','color':detailItem.isSelected?'#FFFFFF':'#999999'}"
@tap="itemTap(idx,selectDetailList,item.isMutiple,item.key)">
{{detailItem.title}}
</text>
</view>
<view class="filter-content-footer">
<view class="filter-content-footer-item" style="color: #777777; background-color: #FFFFFF;" @tap="resetClick(selectDetailList,item.key)">
<text>重置</text>
</view>
<view class="filter-content-footer-item" :style="{'color': '#FFFFFF', 'background-color': themeColor}" @tap="sureClick">
<text>确定</text>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
selectArr: [],
result: {},
menuIndex: 0,
selectDetailList: [],
independenceObj: {},
selectedKey: '',
cacheSelectedObj: {},
defaultSelectedTitleObj: {}
};
},
props: {
themeColor: {
type: String,
default () {
return '#D1372C'
}
},
menuList: {
type: Array,
default () {
return []
}
},
independence: {
type: Boolean,
default: false
}
},
computed: {
selectedTitleObj() {
let obj = {}
for (let i = 0; i < this.menuList.length; i++) {
let item = this.menuList[i];
obj[item.key] = item.title;
}
return obj;
},
defaultSelectedObj() { // 保存初始状态
return this.getSelectedObj()
},
selectedObj: {
get() {
return this.getSelectedObj()
},
set(newObj) {
return newObj;
}
}
},
methods: {
getSelectedObj() {
let obj = {}
for (let i = 0; i < this.menuList.length; i++) {
let item = this.menuList[i];
if (!this.independence && item.defaultSelectedIndex != null && item.defaultSelectedIndex.toString().length > 0) { // 处理并列菜单默认值
if (item.isMutiple) {
obj[item.key] = [];
item.detailList[0].isSelected = false;
if (!Array.isArray(item.defaultSelectedIndex)) { // 如果默认值不是数组
item.defaultSelectedIndex = [item.defaultSelectedIndex];
}
for (let j = 0; j < item.defaultSelectedIndex.length; j++) { // 将默认选中的值放入selectedObj
item.detailList[item.defaultSelectedIndex[j]].isSelected = true;
obj[item.key].push(item.detailList[item.defaultSelectedIndex[j]].value)
}
} else {
obj[item.key] = item.detailList[item.defaultSelectedIndex].value;
this.selectedTitleObj[item.key] = item.detailList[item.defaultSelectedIndex].title;
this.defaultSelectedTitleObj[item.key] = item.detailList[item.defaultSelectedIndex].title;
item.detailList[0].isSelected = false;
item.detailList[item.defaultSelectedIndex].isSelected = true;
}
} else {
if (item.isMutiple) {
obj[item.key] = [];
} else {
obj[item.key] = '';
}
}
}
this.result = obj;
return obj;
},
// 重置所有选项，包括默认选项，并更新result
resetAllSelect(callback) {
let titles = [];
for (let i = 0; i < this.menuList.length; i++) {
this.resetSelected(this.menuList[i].detailList,this.menuList[i].key);
titles[this.menuList[i].key] = this.menuList[i].title;
}
let obj = {
'result': this.result,
'titles': titles,
'isReset': true
}
this.$emit("confirm", obj);
callback(this.result);
},
// 重置选项为设置的默认值，并更新result
resetSelectToDefault(callback) {
for (let i = 0; i < this.menuList.length; i++) {
this.selectDetailList = this.menuList[i].detailList;
if (this.menuList[i].defaultSelectedIndex) {
if (Array.isArray(this.menuList[i].defaultSelectedIndex)) { // 把所有默认的为false的点为true
for (let j = 0; j < this.menuList[i].defaultSelectedIndex.length; j++) {
if (this.selectDetailList[this.menuList[i].defaultSelectedIndex[j]].isSelected == false) {
this.itemTap(this.menuList[i].defaultSelectedIndex[j], this.selectDetailList, this.menuList[i].isMutiple, this
.menuList[i].key)
}
}
} else {
this.itemTap(this.menuList[i].defaultSelectedIndex, this.selectDetailList, this.menuList[i].isMutiple, this.menuList[
i].key)
}
// 获取非默认项的下标
let unDefaultSelectedIndexArr = this.getUnDefaultSelectedIndex(this.menuList[i])
// 把所有不是默认的为true的点为false
for (let j = 0; j < unDefaultSelectedIndexArr.length; j++) {
if (this.selectDetailList[unDefaultSelectedIndexArr[j]].isSelected == true) {
this.itemTap(unDefaultSelectedIndexArr[j], this.selectDetailList, this.menuList[i].isMutiple, this
.menuList[i].key)
}
}
}
}
this.selectedObj = this.defaultSelectedObj;
this.result = this.defaultSelectedObj;
let obj = {
'result': this.result,
'titles': this.defaultSelectedTitleObj,
'isReset': true
}
this.$emit("confirm", obj);
callback(this.result)
},
getUnDefaultSelectedIndex(menuListItem) { // 获取非默认项
let tempDefault = menuListItem.defaultSelectedIndex;
if (!Array.isArray(tempDefault)) {
tempDefault = [tempDefault];
}
// 获取所有项的下标 组成新的数组
let all = [];
for (let i = 0; i < menuListItem.detailList.length; i++) {
all.push(i)
}
// 将默认选中的数组与所有项的数组的不同值合并为一个新数组
var unDefaultSelectedIndex = tempDefault.filter(function(v) {
return !(all.indexOf(v) > -1)
}).concat(all.filter(function(v) {
return !(tempDefault.indexOf(v) > -1)
}));
return unDefaultSelectedIndex;
},
resetMenuList(val) {
this.menuList = val;
this.$emit('update:menuList', val)
},
menuTabClick(index) {
this.menuIndex = index;
this.selectDetailList = this.menuList[index].detailList;
this.selectedKey = this.menuList[index].key;
// 如果是独立菜单
if (this.independence && !this.menuList[index].isSort) {
if (JSON.stringify(this.independenceObj) == '{}') {
this.initIndependenceObj(index);
} else {
for (let key in this.independenceObj) {
if (key != this.selectedKey) {
this.initIndependenceObj(index);
this.resetSelected(this.menuList[index].detailList, this.selectedKey);
}
}
}
}
if (this.independence && this.menuList[index].isSort) {
this.independenceObj = {};
}
if (this.independence) {
let idx = this.menuList[index].defaultSelectedIndex;
if (idx != null && idx.toString().length > 0) { // 处理独立菜单默认值
if (this.menuList[index].isMutiple) {
for (let i = 0; i < idx.length; i++) {
if (this.menuList[index].detailList[idx[i]].isSelected == false) {
this.itemTap(idx[i], this.menuList[index].detailList, true, this.selectedKey);
}
}
} else {
if (this.menuList[index].detailList[idx].isSelected == false) {
this.itemTap(idx, this.menuList[index].detailList, false, this.selectedKey);
}
}
}
}
// #ifdef H5
this.selectedObj = this.selectedObj;
this.$forceUpdate();
// #endif
},
initIndependenceObj(index) {
this.independenceObj = {};
if (this.menuList[index].isMutiple) {
this.independenceObj[this.selectedKey] = [];
} else {
this.independenceObj[this.selectedKey] = '';
}
},
itemTap(index, list, isMutiple, key) {
if (isMutiple == true) {
list[index].isSelected = !list[index].isSelected;
if (index == 0) {
this.resetSelected(list, key)
if (!this.independence) {
this.selectedTitleObj[key] = list[index].title;
}
} else {
list[0].isSelected = false
if (list[index].isSelected) {
if (this.independence) {
this.independenceObj[this.selectedKey].push(list[index].value);
} else {
this.selectedObj[key].push(list[index].value);
}
} else {
list[index].isSelected = false;
if (this.independence) {
var idx = this.independenceObj[this.selectedKey].indexOf(list[index].value);
this.independenceObj[this.selectedKey].splice(idx, 1);
} else {
var idx = this.selectedObj[key].indexOf(list[index].value);
this.selectedObj[key].splice(idx, 1);
}
}
if (this.independence) {
this.result = this.independenceObj;
} else {
this.result = this.selectedObj;
}
}
} else {
if (index == 0) {
this.resetSelected(list, key)
if (!this.independence) {
this.selectedTitleObj[key] = list[index].title;
}
} else {
list[0].isSelected = false
if (this.independence) {
this.independenceObj[this.selectedKey] = list[index].value;
this.result = this.independenceObj;
} else {
this.selectedObj[key] = list[index].value;
this.result = this.selectedObj;
this.selectedTitleObj[key] = list[index].title;
}
for (let i = 0; i < list.length; i++) {
if (index == i) {
list[i].isSelected = true
} else {
list[i].isSelected = false
}
}
}
}
// #ifdef H5
this.$forceUpdate();
// #endif
},
resetSelected(list, key) {
if (typeof this.result[key] == 'object') {
this.result[key] = [];
this.selectedTitleObj[key] = list[0].title;
} else {
this.result[key] = '';
this.selectedTitleObj[key] = list[0].title;
}
for (let i = 0; i < list.length; i++) {
if (i == 0) {
list[i].isSelected = true;
} else {
list[i].isSelected = false;
}
}
// #ifdef H5
this.$forceUpdate();
// #endif
},
sortTap(index, list, key) {
if (this.independence) {
this.independenceObj[this.selectedKey] = list[index].value;
this.result = this.independenceObj;
} else {
this.selectedObj[key] = list[index].value;
this.result = this.selectedObj;
this.selectedTitleObj[key] = list[index].title;
}
for (let i = 0; i < list.length; i++) {
if (index == i) {
list[i].isSelected = true;
} else {
list[i].isSelected = false;
}
}
let obj = {
'result': this.result,
'titles': this.selectedTitleObj,
'isReset': false
}
this.$emit("confirm", obj);
},
sureClick() {
let obj = {
'result': this.result,
'titles': this.selectedTitleObj,
'isReset': false
}
this.$emit("confirm", obj);
},
resetClick(list, key) {
this.resetSelected(list, key)
}
}
}
</script>
<style>
.filter-content {
background-color: #FFFFFF;
}
.filter-content-title {
border-bottom: #EEEEEE 1px solid;
padding: 10px 15px;
font-size: 13px;
color: #999999;
}
.filter-content-detail {
padding: 5px 15px;
}
.filter-content-detail-item-active {
background-color: #D1372C;
color: #FFFFFF;
padding: 5px 15px;
border-radius: 20px;
margin-right: 10px;
margin-top: 10px;
display: inline-block;
font-size: 14px;
}
.filter-content-detail-item-default {
background-color: #FFFFFF;
color: #666666;
padding: 5px 15px;
border-radius: 5px;
margin-right: 10px;
margin-top: 10px;
display: inline-block;
font-size: 14px;
}
.filter-content-footer {
display: flex;
justify-content: space-between;
width: 100%;
height: 45px;
margin-top: 10px;
}
.filter-content-footer-item {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
}
.filter-content-list {
padding: 5px 15px;
}
.filter-content-list-item-default {
color: #666666;
width: 100%;
padding: 10px 0px;
}
.filter-content-list-item-default text {
width: 90%;
font-size: 14px;
display: inline-block;
}
.filter-content-list-item-active {
color: #D1372C;
width: 100%;
padding: 10px 0px;
}
.filter-content-list-item-active text {
font-size: 14px;
width: 90%;
display: inline-block;
}
.filter-content-list-item-active:after {
content: '✓';
}
</style>

20
components/sl-filter/iconfont/iconfont.css
Unescape View File

@ -0,0 +1,20 @@
@font-face {
font-family: 'sl-font';
src: url('data:font/truetype;charset=utf-8;base64,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') format('truetype');
}
.sl-font {
font-family: "sl-font" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.sl-down:before {
content: "\e61a";
}
.sl-up:before {
content: "\e61c";
}

122
components/sl-filter/popup-layer.vue
Unescape View File

@ -0,0 +1,122 @@
<template>
<scroll-view scroll-y v-show="ifshow" @tap="ableClose" @touchmove.stop.prevent class="popup-layer">
<view ref="popRef" class="popup-content" @tap.stop="stopEvent" :style="_location">
<slot></slot>
</view>
</scroll-view>
</template>
<script>
export default {
name: 'popup-layer',
props: {
direction: {
type: String,
default: 'top', // 方向 top，bottom，left，right
},
autoClose: {
type: Boolean,
default: true,
},
isTransNav: {
type: Boolean,
default: false
},
navHeight: {
type: Number,
default: 0
}
},
data() {
return {
ifshow: false, // 是否展示,
translateValue: -100, // 位移距离
timer: null,
iftoggle: false,
};
},
computed: {
_translate() {
if (this.isTransNav) {
const transformObj = {
'top': `transform:translateY(${-this.translateValue}%)`,
'bottom': `transform:translateY(calc(${this.translateValue}% + ${this.navHeight}px))`,
'left': `transform:translateX(${-this.translateValue}%)`,
'right': `transform:translateX(${this.translateValue}%)`
};
return transformObj[this.direction]
} else {
const transformObj = {
'top': `transform:translateY(${-this.translateValue}%)`,
'bottom': `transform:translateY(${this.translateValue}%)`,
'left': `transform:translateX(${-this.translateValue}%)`,
'right': `transform:translateX(${this.translateValue}%)`
};
return transformObj[this.direction]
}
},
_location() {
const positionValue = {
'top': 'bottom:0px;width:100%;',
'bottom': 'top:0px;width:100%;',
'left': 'right:0px;height:100%;',
'right': 'left:0px;height:100%;',
};
return positionValue[this.direction] + this._translate;
}
},
methods: {
show() {
let _this = this;
this.ifshow = true;
let _open = setTimeout(() => {
this.translateValue = 0;
_open = null;
}, 100)
let _toggle = setTimeout(() => {
this.iftoggle = true;
_toggle = null;
}, 300);
},
close() {
if (this.timer !== null || !this.iftoggle) {
return;
}
this.translateValue = -100 - this.navHeight;
this.timer = setTimeout(() => {
this.ifshow = false;
this.timer = null;
this.iftoggle = false;
}, 300);
this.$emit("close")
},
ableClose() {
if (this.autoClose) {
this.close();
}
},
stopEvent(event) {},
}
}
</script>
<style>
.popup-layer {
position: absolute;
z-index: 999999;
background: rgba(0, 0, 0, .3);
height: calc(100% - 50px);
width: 100%;
left: 0px;
overflow: hidden;
}
.popup-content {
position: absolute;
z-index: 1000000;
background: #FFFFFF;
transition: all .3s ease;
}
</style>

302
components/sl-filter/sl-filter.vue
Unescape View File

@ -0,0 +1,302 @@
<template>
<view class="content">
<view :style="{height: tabHeight + 1 +'px'}">
<view :class="topFixed?'select-tab-fixed-top':'select-tab'" :style="{height: tabHeight+'px'}">
<view class="select-tab-item" :style="{width: itemWidth}" v-for="(item,index) in titleList" :key="index" @tap="showMenuClick(index)">
<text :style="{color:color}">{{item.title}}</text>
<text class="arrows sl-font" :class="statusList[index].isActive?up:down"></text>
</view>
</view>
</view>
<popup-layer ref="popupRef" :direction="'bottom'" @close="close" :isTransNav="isTransNav" :navHeight="navHeight"
:tabHeight="tabHeight">
<sl-filter-view :ref="'slFilterView'" :independence="independence" :themeColor="themeColor" :menuList.sync="menuListTemp"
ref="slFilterView" @confirm="filterResult"></sl-filter-view>
</popup-layer>
</view>
</template>
<script>
import popupLayer from '@/components/sl-filter/popup-layer.vue';
import slFilterView from '@/components/sl-filter/filter-view.vue';
export default {
components: {
popupLayer,
slFilterView
},
props: {
menuList: {
type: Array,
default () {
return []
}
},
themeColor: {
type: String,
default () {
return '#089bf5'
}
},
color: {
type: String,
default () {
return '#666666'
}
},
independence: {
type: Boolean,
default: false
},
isTransNav: {
type: Boolean,
default: false
},
navHeight: {
type: Number,
default: 0
},
topFixed: {
type: Boolean,
default: false
}
},
computed: {
itemWidth() {
return 'calc(100%/2)'
},
menuListTemp: {
get() {
return this.getMenuListTemp();
},
set(newObj) {
return newObj;
}
}
},
// #ifndef H5
onReady: function() {
let arr = [];
let titleArr = [];
let r = {};
for (let i = 0; i < this.menuList.length; i++) {
arr.push({
'isActive': false
});
// titleArr.push({
// 'title': this.menuList[i].title,
// 'key': this.menuList[i].key
// })
r[this.menuList[i].key] = this.menuList[i].title;
if (this.menuList[i].reflexTitle && this.menuList[i].defaultSelectedIndex > -1) {
titleArr.push({
'title': this.menuList[i].detailList[this.menuList[i].defaultSelectedIndex].title,
'key': this.menuList[i].key
})
} else {
titleArr.push({
'title': this.menuList[i].title,
'key': this.menuList[i].key
})
}
}
this.statusList = arr;
this.titleList = titleArr;
this.tempTitleObj = r;
},
// #endif
// #ifdef H5
created: function() {
let arr = [];
let titleArr = [];
let r = {};
for (let i = 0; i < this.menuList.length; i++) {
arr.push({
'isActive': false
});
// titleArr.push({
// 'title': this.menuList[i].title,
// 'key': this.menuList[i].key
// });
r[this.menuList[i].key] = this.menuList[i].title;
if (this.menuList[i].reflexTitle && this.menuList[i].defaultSelectedIndex > -1) {
titleArr.push({
'title': this.menuList[i].detailList[this.menuList[i].defaultSelectedIndex].title,
'key': this.menuList[i].key
})
} else {
titleArr.push({
'title': this.menuList[i].title,
'key': this.menuList[i].key
})
}
}
this.statusList = arr;
this.titleList = titleArr;
this.tempTitleObj = r;
},
// #endif
data() {
return {
down: 'sl-down',
up: 'sl-up',
tabHeight: 50,
statusList: [],
selectedIndex: '',
titleList: [],
tempTitleObj: {}
};
},
methods: {
getMenuListTemp() {
let arr = this.menuList;
for (let i = 0; i < arr.length; i++) {
let item = arr[i];
for (let j = 0; j < item.detailList.length; j++) {
let d_item = item.detailList[j];
if (j == 0) {
d_item.isSelected = true
} else {
d_item.isSelected = false
}
}
}
return arr;
},
// 重置所有选项，包括默认选项，并更新result
resetAllSelect(callback) {
this.$refs.slFilterView.resetAllSelect(function(e){
callback(e);
});
},
// 重置选项为设置的默认值，并更新result
resetSelectToDefault(callback) {
this.$refs.slFilterView.resetSelectToDefault(function(e){
callback(e);
});
},
resetMenuList(val) {
this.menuList = val;
this.$emit('update:menuList', val)
this.$forceUpdate();
this.$refs.slFilterView.resetMenuList(val)
},
showMenuClick(index) {
this.selectedIndex = index;
if (this.statusList[index].isActive == true) {
this.$refs.popupRef.close();
this.statusList[index].isActive = false
} else {
this.menuTabClick(index);
this.$refs.popupRef.show()
}
},
menuTabClick(index) {
this.$refs.slFilterView.menuTabClick(index);
for (let i = 0; i < this.statusList.length; i++) {
if (index == i) {
this.statusList[i].isActive = true;
} else {
this.statusList[i].isActive = false;
}
}
},
filterResult(obj) {
let val = obj.result;
let titlesObj = obj.titles;
// 处理选项映射到菜单title
if (this.independence) {
if (!this.menuList[this.selectedIndex].isMutiple || this.menuList[this.selectedIndex].isSort) {
let tempTitle = '';
for (let i = 0; i < this.menuList[this.selectedIndex].detailList.length; i++) {
let item = this.menuList[this.selectedIndex].detailList[i];
if (item.value == val[this.menuList[this.selectedIndex].key]) {
tempTitle = item.title;
}
}
if (this.menuList[this.selectedIndex].reflexTitle) {
this.titleList[this.selectedIndex].title = tempTitle;
}
}
} else {
for (let key in titlesObj) {
if (!Array.isArray(titlesObj[key])) {
this.tempTitleObj[key] = titlesObj[key];
}
}
for (let key in this.tempTitleObj) {
for (let i = 0; i < this.titleList.length; i++) {
if (this.titleList[i].key == key) {
this.titleList[i].title = this.tempTitleObj[key];
}
}
}
}
this.$refs.popupRef.close()
if (obj.isReset) {
} else{
this.$emit("result", val)
}
},
close() {
for (let i = 0; i < this.statusList.length; i++) {
this.statusList[i].isActive = false;
}
}
}
}
</script>
<style>
@import 'iconfont/iconfont.css';
.select-tab {
border-bottom: #F7F7F7 1px solid;
background-color: #FFFFFF;
display: flex;
width: 100%;
}
.select-tab-fixed-top {
border-bottom: #F7F7F7 1px solid;
background-color: #FFFFFF;
display: flex;
width: 100%;
position: fixed;
/* #ifdef H5 */
top: 44px;
/* #endif */
/* #ifndef H5 */
top: 0;
/* #endif */
}
.arrows {
margin-left: 5px;
}
.select-tab .select-tab-item,
.select-tab-fixed-top .select-tab-item {
display: flex;
justify-content: center;
align-items: center;
}
.select-tab .select-tab-item text,
.select-tab-fixed-top .select-tab-item text {
color: #666666;
font-size: 14px;
}
</style>

12
components/uni-search-bar/components/uni-search-bar/uni-search-bar.vue
Unescape View File

@ -3,7 +3,8 @@
<view :style="{borderRadius:radius+'px',backgroundColor: bgColor}" class="uni-searchbar__box" @click="searchClick">
<view class="uni-searchbar__box-icon-search">
<slot name="searchIcon">
<uni-icons color="#999999" size="18" type="search" />
<!-- <uni-icons color="#999999" size="18" type="search" /> -->
<text class="icon search"></text>
</slot>
</view>
<input v-if="show || searchVal" :focus="showSync" :placeholder="placeholder" :maxlength="maxlength" class="uni-searchbar__box-search-input"
@ -12,7 +13,8 @@
<view v-if="show && (clearButton==='always'||clearButton==='auto'&&searchVal!=='')" class="uni-searchbar__box-icon-clear"
@click="clear">
<slot name="clearIcon">
<uni-icons color="#c0c4cc" size="18" type="clear" />
<!-- <uni-icons color="#c0c4cc" size="18" type="clear" /> -->
<text class="icon shanchu"></text>
</slot>
</view>
</view>
@ -177,7 +179,9 @@
<style lang="scss" scoped>
$uni-searchbar-height: 36px;
.icon{
font-size: 15px;
}
.uni-searchbar {
/* #ifndef APP-NVUE */
display: flex;
@ -202,7 +206,7 @@
height: $uni-searchbar-height;
padding: 5px 8px 5px 0px;
border-width: 0.5px;
border-style: solid;
// border-style: solid;
border-color: $uni-border-color;
}

12
pages.json
Unescape View File

@ -1,5 +1,17 @@
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/goods/refuel/refuel",
"style" :
{
"navigationBarTitleText": "加油站列表",
"navigationBarBackgroundColor": "#0083f5",
"backgroundColorTop": "#0083f5",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": false
}
},
{
"path": "pages/tabBar/home/home",
"style": {

208
pages/goods/refuel/refuel.vue
Unescape View File

@ -0,0 +1,208 @@
<template>
<view>
<view class="width100 backcorfff">
<image mode="widthFix" class=" flleft sear mart15" src="../../../static/img/btjy.png"></image>
<uSearchBar @confirm="search" @input="input"></uSearchBar>
</view>
<slFilter :independence="true" :color="titleColor" :themeColor="themeColor" :menuList.sync="menuList"
@result="result"></slFilter>
<view class="width90 height100p backcorfff border-r mart10">
<image mode="widthFix" src="../../../static/img/noorder.png" class="recontleft flleft mart10 border-r"></image>
<view class="recontright">
<view class="text1 width100 font15 fontwig6 paddtop10">贵州花冠中石油燃气加油站</view>
<view class="width100 mart10 height22">
<view class="width70 flleft text1 font13 fcor999">
花冠路贵惠大道桐荫26号
</view>
<view class="width30 flright font13 fcor666 fotct">
<image mode="widthFix" src="../../../static/img/dh.png" style="width: 10px;"></image>1.9km
</view>
</view>
<view class="font14 width100 fcoreb5 mart5 height22">
<text class="font18 fontwig6">6.40</text>起<text class="fcor999 margle">油站价￥6.88</text>
</view>
</view>
</view>
<view class="width90 height100p backcorfff border-r mart10">
<image mode="widthFix" src="../../../static/img/noorder.png" class="recontleft flleft mart10 border-r"></image>
<view class="recontright">
<view class="text1 width100 font15 fontwig6 paddtop10">贵州花冠中石油燃气加油站</view>
<view class="width100 mart10 height22">
<view class="width70 flleft text1 font13 fcor999">
花冠路贵惠大道桐荫26号
</view>
<view class="width30 flright font13 fcor666 fotct">
<image mode="widthFix" src="../../../static/img/dh.png" style="width: 10px;"></image>1.9km
</view>
</view>
<view class="font14 width100 fcoreb5 mart5 height22">
<text class="font18 fontwig6">6.40</text>起<text class="fcor999 margle">油站价￥6.88</text>
</view>
</view>
</view>
<view class="width90 height100p backcorfff border-r mart10">
<image mode="widthFix" src="../../../static/img/noorder.png" class="recontleft flleft mart10 border-r"></image>
<view class="recontright">
<view class="text1 width100 font15 fontwig6 paddtop10">贵州花冠中石油燃气加油站</view>
<view class="width100 mart10 height22">
<view class="width70 flleft text1 font13 fcor999">
花冠路贵惠大道桐荫26号
</view>
<view class="width30 flright font13 fcor666 fotct">
<image mode="widthFix" src="../../../static/img/dh.png" style="width: 10px;"></image>1.9km
</view>
</view>
<view class="font14 width100 fcoreb5 mart5 height22">
<text class="font18 fontwig6">6.40</text>起<text class="fcor999 margle">油站价￥6.88</text>
</view>
</view>
</view>
</view>
</template>
<script>
import slFilter from '@/components/sl-filter/sl-filter.vue';
import uSearchBar from '../../../components/uni-search-bar/components/uni-search-bar/uni-search-bar.vue';
export default {
components: {
slFilter,
uSearchBar
},
data() {
return {
themeColor: '#089bf5',
titleColor: '#666666',
filterResult: '',
menuList: [{
'title': '品牌',
'key': 'single',
'isMutiple': false,
'detailTitle': '请选择（单选）',
'reflexTitle': true,
'defaultSelectedIndex': 0,
'detailList': [{
'title': '全部品牌',
'value': '全部品牌'
}, {
'title': '中石化',
'value': '中石化'
}, {
'title': '中石油',
'value': '中石油'
}, {
'title': '亮牌',
'value': '亮牌'
}, {
'title': '其他',
'value': '其他'
},
]
},
{
'title': '距离',
'key': 'single',
'isMutiple': false,
'detailTitle': '请选择（单选）',
'reflexTitle': true,
'defaultSelectedIndex': 0,
'detailList': [{
'title': '距离最近',
'value': '距离最近'
}]
},
{
'title': '油号',
'key': 'single',
'isMutiple': false,
'detailTitle': '请选择（单选）',
'reflexTitle': true,
'defaultSelectedIndex': 0,
'detailList': [{
'title': '89#',
'value': '89#'
}, {
'title': '92#',
'value': '92#'
}, {
'title': '95#',
'value': '92#'
}, {
'title': '98#',
'value': '98#'
}, ]
},
{
'title': '距离',
'key': 'single',
'isMutiple': false,
'detailTitle': '请选择（单选）',
'reflexTitle': true,
'defaultSelectedIndex': 0,
'detailList': [{
'title': '默认排序',
'value': ''
},
{
'title': '发布时间',
'value': 'add_time'
},
{
'title': '薪资最高',
'value': 'wages_up'
},
{
'title': '离我最近',
'value': 'location'
}
]
}
]
}
},
onLoad() {
},
methods: {
result(val) {
console.log('filter_result:' + JSON.stringify(val));
this.filterResult = JSON.stringify(val, null, 2)
}
}
}
</script>
<style lang="scss">
page {
background-color: #f6f6f6;
}
.sear {
margin-left: 10px;
width: 50px;
}
.searImg {
margin-left: 55px;
}
.recontleft {
width: 80px;
margin-left: 10px;
}
.recontright {
margin-left: 95px;
}
.text {
margin-top: 50px;
margin-left: 20px;
width: 100%;
}
</style>

BIN
static/img/btjy.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
static/img/dh.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
static/img/dhl.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
static/img/succes.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
static/img/xiala.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
static/img/yhl.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
static/img/yql.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

7
uni.scss
Unescape View File

@ -467,6 +467,13 @@ $uni-font-size-paragraph:30upx;
float: right;
}
/**
* 圆角
*/
.border-r{
border-radius: 5px;
}
/* button样式 */
.btnw70 {
width: 70%;

Write Preview
Loading…
Cancel
Save