submit
parent
2742c317ee
commit
5f37e71be3
@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-popup :closeable="true"
|
||||
:show="showImg"
|
||||
mode="center"
|
||||
@close="dialogClose">
|
||||
<view style="height: 1130rpx;width:684rpx"
|
||||
class="row items-center justify-center">
|
||||
<u--image :src="imageUrlArr[activeIdx]"
|
||||
style="margin-top:70rpx"
|
||||
width="606rpx"
|
||||
height="938rpx"></u--image>
|
||||
|
||||
<view class="col-10 fl-mt-xs row items-center fl-mb-md">
|
||||
<view style="border-radius:4rpx;width:30rpx;height:30rpx;background: #EBEBEB;"
|
||||
class="row items-center justify-center">
|
||||
<u-image src="../../static/arrow-left.png"
|
||||
width="10rpx"
|
||||
height="20rpx"
|
||||
style="margin-right:10rpx"
|
||||
@click="handleLeftClick"></u-image>
|
||||
</view>
|
||||
|
||||
<view style="width:calc(100% - 80rpx);flex-flow: nowrap;overflow: auto;"
|
||||
class="row">
|
||||
<u-image v-for="(img,imgIdx) in imageUrlArr"
|
||||
:key="imgIdx"
|
||||
:src="img"
|
||||
style="margin: 8rpx 0 0 16rpx"
|
||||
width="60rpx"
|
||||
height="60rpx"
|
||||
@click="activeIdx=imgIdx"></u-image>
|
||||
</view>
|
||||
|
||||
<u-image src="../../static/arrow-right.png"
|
||||
width="30rpx"
|
||||
height="30rpx"
|
||||
style="margin-left:10rpx"
|
||||
@click="handleRightClick"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
pimageUrl: String,
|
||||
pimageUrlArr: Array,
|
||||
pactiveIdx: Number,
|
||||
pshowImg: Boolean,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showImg: false,
|
||||
activeIdx: 0,
|
||||
imageUrlArr: [],
|
||||
};
|
||||
},
|
||||
created () {
|
||||
this.imageUrlArr = this.pimageUrlArr;
|
||||
this.activeIdx = this.pactiveIdx;
|
||||
},
|
||||
watch: {
|
||||
pimageUrlArr () {
|
||||
this.imageUrlArr = this.pimageUrlArr;
|
||||
},
|
||||
pactiveIdx () {
|
||||
this.activeIdx = this.pactiveIdx;
|
||||
},
|
||||
pshowImg () {
|
||||
this.showImg = this.pshowImg;
|
||||
},
|
||||
activeIdx () {
|
||||
this.$emit("triggerShowActiveImgChange", this.activeIdx);
|
||||
},
|
||||
},
|
||||
onShow () {
|
||||
this.showImg = false
|
||||
},
|
||||
methods: {
|
||||
dialogClose () {
|
||||
this.showImg = false;
|
||||
this.$emit("triggerShowImgClose");
|
||||
},
|
||||
handleLeftClick () {
|
||||
if (this.activeIdx > 0) {
|
||||
this.activeIdx = this.activeIdx - 1
|
||||
}
|
||||
},
|
||||
handleRightClick () {
|
||||
if (this.activeIdx < this.imageUrlArr.length - 1) {
|
||||
this.activeIdx = this.activeIdx + 1
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .u-popup__content__close--top-right {
|
||||
border-radius: 50%;
|
||||
border: solid 1px #777171;
|
||||
padding: 3px;
|
||||
top: 8px;
|
||||
right: 15px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<u-input type="number"
|
||||
v-model="value"
|
||||
:placeholder="placeholder"
|
||||
:border="border"
|
||||
:readonly="readonly"
|
||||
:disabled="disabled"
|
||||
clearable
|
||||
@blur="handleBlur"
|
||||
@change="handleChange"
|
||||
@focus="handleFocus" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
border: String,
|
||||
placeholder: String,
|
||||
readonly: Boolean,
|
||||
disabled: Boolean,
|
||||
val: [Number, String],
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
value: null,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
val () {
|
||||
this.value = this.val;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleBlur (e) {
|
||||
this.$emit("triggerInputBlue", e);
|
||||
},
|
||||
handleFocus (e) {
|
||||
this.$emit("triggerInputFocus", e);
|
||||
},
|
||||
handleChange (e) {
|
||||
if (Number(e)) {
|
||||
let val = parseInt(e);
|
||||
this.$emit("triggerInputChange", val);
|
||||
return;
|
||||
}
|
||||
this.$emit("triggerInputChange", e);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="status_bar">
|
||||
<!-- 这里是状态栏 -->
|
||||
</view>
|
||||
<view style="height: 110upx">
|
||||
<u-navbar :bgColor="bgColor"
|
||||
@rightClick="rightClick"
|
||||
:autoBack="autoback">
|
||||
<view v-if="left"
|
||||
slot="left">
|
||||
<slot name="left"></slot>
|
||||
</view>
|
||||
|
||||
<view v-if="center"
|
||||
slot="center">
|
||||
<slot name="center"></slot>
|
||||
</view>
|
||||
|
||||
<view v-if="right"
|
||||
slot="right">
|
||||
<slot name="right"></slot>
|
||||
</view>
|
||||
</u-navbar>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
left: {
|
||||
type: Boolean,
|
||||
default () {
|
||||
return true;
|
||||
},
|
||||
},
|
||||
center: {
|
||||
type: Boolean,
|
||||
default () {
|
||||
return true;
|
||||
},
|
||||
},
|
||||
right: {
|
||||
type: Boolean,
|
||||
default () {
|
||||
return true;
|
||||
},
|
||||
},
|
||||
autoback: {
|
||||
type: Boolean,
|
||||
default () {
|
||||
return true;
|
||||
},
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
bgColor: "null",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
leftClick () { },
|
||||
rightClick () { },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .u-navbar__content {
|
||||
background: none !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="status_bar">
|
||||
<!-- 这里是状态栏 -->
|
||||
</view>
|
||||
<u-tabbar :value="current"
|
||||
@change="changeTab"
|
||||
:fixed="true"
|
||||
:placeholder="false"
|
||||
:safeAreaInsetBottom="true"
|
||||
:border="false"
|
||||
activeColor="#FFC748"
|
||||
inactiveColor="#1D1D1D">
|
||||
<u-tabbar-item v-for="(item,index) in tabBarList"
|
||||
:key="index"
|
||||
:text="item.text">
|
||||
<image class="u-page__item__slot-icon"
|
||||
slot="inactive-icon"
|
||||
:src="item.iconPath"></image>
|
||||
<image class="u-page__item__slot-icon"
|
||||
slot="active-icon"
|
||||
:src="item.selectedIconPath"></image>
|
||||
</u-tabbar-item>
|
||||
</u-tabbar>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
currentPage: String
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
current: 0,
|
||||
tabBarList: [{
|
||||
pagePath: "pages/home/index",
|
||||
iconPath: "../../static/tabbar/home.png",
|
||||
selectedIconPath: "../../static/tabbar/home-active.png",
|
||||
text: '首页',
|
||||
customIcon: false,
|
||||
},
|
||||
{
|
||||
pagePath: "pages/mine/index",
|
||||
iconPath: "../../static/tabbar/my.png",
|
||||
selectedIconPath: "../../static/tabbar/my-active.png",
|
||||
text: '我的',
|
||||
customIcon: false,
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeTab (e) {
|
||||
let page = '/' + this.tabBarList[e].pagePath
|
||||
console.log(page);
|
||||
uni.switchTab({
|
||||
url: page,
|
||||
success: () => {
|
||||
},
|
||||
fail: (e) => {
|
||||
console.log(e);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
//隐藏原生tabbar
|
||||
uni.hideTabBar();
|
||||
// 当前选中的菜单
|
||||
this.tabBarList.forEach((i, index) => {
|
||||
if (i.pagePath == this.currentPage) {
|
||||
this.current = index
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-page__item__slot-icon {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
}
|
||||
|
||||
.u-tabbar /deep/ .u-tabbar--fixed {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
padding: 20px 0;
|
||||
background: #ffffff;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,463 @@
|
||||
<template>
|
||||
<view class="superwei-combox"
|
||||
:class="border ? '' : 'superwei-combox__no-border'">
|
||||
<view v-if="label"
|
||||
class="superwei-combox__label"
|
||||
:style="labelStyle">
|
||||
<text>{{ label }}</text>
|
||||
</view>
|
||||
<view class="superwei-combox__input-box">
|
||||
<input class="superwei-combox__input"
|
||||
type="text"
|
||||
:placeholder="placeholder"
|
||||
placeholder-class="superwei-combox__input-plac"
|
||||
v-model="inputVal"
|
||||
@input="onInput"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur" />
|
||||
<uni-icons :type="showSelector ? 'top' : 'bottom'"
|
||||
size="14"
|
||||
color="#999"
|
||||
@click="toggleSelector"
|
||||
v-if="!inputVal"></uni-icons>
|
||||
<image src="../../static/close-icon.png"
|
||||
mode=""
|
||||
style="width: 28upx; height: 28upx"
|
||||
v-if="inputVal"
|
||||
@click="clear"></image>
|
||||
</view>
|
||||
<view class="superwei-combox__selector"
|
||||
v-if="showSelector">
|
||||
<view class="uni-popper__arrow"></view>
|
||||
<scroll-view scroll-y="true"
|
||||
class="superwei-combox__selector-scroll">
|
||||
<view class="superwei-combox__selector-empty"
|
||||
v-if="filterCandidatesLength === 0">
|
||||
<text>{{ emptyTips }}</text>
|
||||
</view>
|
||||
<view class="superwei-combox__selector-item"
|
||||
v-for="(item, index) in filterCandidates"
|
||||
:key="index">
|
||||
<template v-if="isJSON ? (item.disabled ? true : false) : false">
|
||||
<text :style="'color:' + disabledColor + ';cursor: not-allowed;'">{{
|
||||
isJSON
|
||||
? item[keyName]
|
||||
? item[keyName]
|
||||
: "字段" + keyName + "不存在"
|
||||
: item
|
||||
}}</text>
|
||||
</template>
|
||||
<template v-else>
|
||||
<text @click="onSelectorClick(index)"
|
||||
:style="
|
||||
(
|
||||
isJSON
|
||||
? item[keyName]
|
||||
? item[keyName] == inputVal
|
||||
: false
|
||||
: item == inputVal
|
||||
)
|
||||
? 'font-weight: bold;background-color: ' +
|
||||
selectedBackground +
|
||||
';color: ' +
|
||||
selectedColor
|
||||
: ''
|
||||
">{{
|
||||
isJSON
|
||||
? item[keyName]
|
||||
? item[keyName]
|
||||
: "字段" + keyName + "不存在"
|
||||
: item
|
||||
}}</text>
|
||||
</template>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="search-combox">
|
||||
<view class="uni-combox__input-box" :style="showSelector ?'z-index: 997;': ''">
|
||||
<input class="uni-combox__input" type="text" :placeholder="placeholder" placeholder-class="uni-combox__input-plac"
|
||||
v-model="inputVal" @input="onInput" @focus="onFocus" @blur="onBlur" />
|
||||
<view class="icon-box">
|
||||
<uni-icons :type="showSelector? 'top' : 'bottom'" size="14" color="#fff" @click="toggleSelector" v-if="!inputVal && icon=='icon'"></uni-icons>
|
||||
<image src="../../static/image/order/search.png" mode="" style="width: 28upx;height: 28upx;" v-if="iconShow && icon =='search'" @click="searchGet"></image>
|
||||
<image src="../../static/image/close-icon.png" mode="" style="width: 28upx;height: 28upx;" v-if="inputVal" @click="clear"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-combox__selector" v-if="showSelector">
|
||||
<view class="uni-popper__arrow"></view>
|
||||
<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
|
||||
<view class="uni-combox__selector-empty" v-if="searchList.length == 0">
|
||||
<text>{{emptyTips}}</text>
|
||||
</view>
|
||||
<view class="uni-combox__selector-item" v-for="(item,index) in searchList" :key="index" @click="onSelectorClick(index)">
|
||||
<text>{{item.value}}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* Combox 组合输入框
|
||||
* @description 组合输入框一般用于既可以输入也可以选择的场景
|
||||
* @property {String} label 左侧文字
|
||||
* @property {String} labelWidth 左侧内容宽度
|
||||
* @property {String} placeholder 输入框占位符
|
||||
* @property {Array} candidates 候选项列表
|
||||
* @property {String} emptyTips 筛选结果为空时显示的文字
|
||||
* @property {String} value 组合框的值
|
||||
* @property {String} selectedBackground 选中项背景颜色
|
||||
* @property {String} selectedColor 选中项文字颜色
|
||||
* @property {Boolean} isJSON 是否是json数组
|
||||
* @property {String} keyName json数组显示的字段值
|
||||
* @property {String} disabledColor 禁用项文字颜色
|
||||
* @property {Boolean} isAllowCreate 是否允许用户创建新条目
|
||||
*/
|
||||
export default {
|
||||
name: "inputSelect",
|
||||
emits: ["input", "update:modelValue", "select"],
|
||||
props: {
|
||||
isAllowCreate: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
disabledColor: {
|
||||
type: String,
|
||||
default: "#ababac",
|
||||
},
|
||||
isJSON: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
keyName: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
selectedBackground: {
|
||||
type: String,
|
||||
default: "#f5f7fa",
|
||||
},
|
||||
selectedColor: {
|
||||
type: String,
|
||||
default: "#409eff",
|
||||
},
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
labelWidth: {
|
||||
type: String,
|
||||
default: "auto",
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
candidates: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
emptyTips: {
|
||||
type: String,
|
||||
default: "无匹配项",
|
||||
},
|
||||
// #ifndef VUE3
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: "",
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: "",
|
||||
},
|
||||
// #endif
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isInput: false,
|
||||
showSelector: false,
|
||||
isSelector: false,
|
||||
inputVal: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
labelStyle () {
|
||||
if (this.labelWidth === "auto") {
|
||||
return "";
|
||||
}
|
||||
return `width: ${this.labelWidth}`;
|
||||
},
|
||||
filterCandidates () {
|
||||
if (this.isInput) {
|
||||
if (this.isJSON) {
|
||||
return this.candidates.filter((item) => {
|
||||
return item[this.keyName].toString().indexOf(this.inputVal) > -1;
|
||||
});
|
||||
} else {
|
||||
return this.candidates.filter((item) => {
|
||||
return item.toString().indexOf(this.inputVal) > -1;
|
||||
});
|
||||
}
|
||||
} else {
|
||||
return this.candidates;
|
||||
}
|
||||
},
|
||||
filterCandidatesLength () {
|
||||
return this.filterCandidates.length;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// #ifndef VUE3
|
||||
value: {
|
||||
handler (newVal) {
|
||||
this.inputVal = newVal;
|
||||
this.isInput = true;
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
modelValue: {
|
||||
handler (newVal) {
|
||||
this.inputVal = newVal;
|
||||
this.isInput = true;
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
toggleSelector () {
|
||||
this.showSelector = !this.showSelector;
|
||||
this.isInput = false;
|
||||
},
|
||||
onFocus () {
|
||||
this.showSelector = true;
|
||||
this.isInput = false;
|
||||
},
|
||||
onChange () {
|
||||
setTimeout(() => {
|
||||
this.showSelector = false;
|
||||
this.isInput = false;
|
||||
}, 200);
|
||||
},
|
||||
onBlur () {
|
||||
if (!this.isInput) {
|
||||
this.onChange();
|
||||
} else {
|
||||
if (this.inputVal && !this.isAllowCreate) {
|
||||
let index = this.candidates.findIndex((item) => {
|
||||
if (this.isJSON) {
|
||||
return (
|
||||
item[this.keyName].toString() == this.inputVal && !item.disabled
|
||||
);
|
||||
} else {
|
||||
return item.toString() == this.inputVal;
|
||||
}
|
||||
});
|
||||
if (index == -1) {
|
||||
if (this.filterCandidatesLength > 0) {
|
||||
setTimeout(() => {
|
||||
this.showSelector = false;
|
||||
this.isInput = false;
|
||||
if (!this.isSelector) {
|
||||
this.inputVal = "";
|
||||
this.$emit("input", this.inputVal);
|
||||
this.$emit("update:modelValue", this.inputVal);
|
||||
}
|
||||
}, 200);
|
||||
this.isSelector = false;
|
||||
} else {
|
||||
this.showSelector = false;
|
||||
this.isInput = false;
|
||||
this.inputVal = "";
|
||||
this.$emit("input", this.inputVal);
|
||||
this.$emit("update:modelValue", this.inputVal);
|
||||
}
|
||||
} else {
|
||||
this.onChange();
|
||||
}
|
||||
} else {
|
||||
this.onChange();
|
||||
}
|
||||
}
|
||||
},
|
||||
onSelectorClick (index) {
|
||||
let item = this.filterCandidates[index];
|
||||
if (this.isJSON) {
|
||||
this.inputVal = item[this.keyName];
|
||||
} else {
|
||||
this.inputVal = item;
|
||||
}
|
||||
this.showSelector = false;
|
||||
this.isSelector = true;
|
||||
this.$emit("input", this.inputVal);
|
||||
this.$emit("update:modelValue", this.inputVal);
|
||||
this.$emit("select", item);
|
||||
},
|
||||
onInput () {
|
||||
setTimeout(() => {
|
||||
this.$emit("input", this.inputVal);
|
||||
this.$emit("update:modelValue", this.inputVal);
|
||||
});
|
||||
},
|
||||
searchGet () {
|
||||
this.iconShow = false;
|
||||
this.$emit("search", true);
|
||||
},
|
||||
clear () {
|
||||
this.inputVal = "";
|
||||
this.iconShow = true;
|
||||
this.$emit("input", this.inputVal);
|
||||
this.$emit("update:modelValue", this.inputVal);
|
||||
this.$emit("select", {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.superwei-combox {
|
||||
font-size: 24upx;
|
||||
// border: 1px solid #DCDFE6;
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
// height: 40px;
|
||||
flex-direction: row;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
border-radius: 32upx;
|
||||
height: 60upx;
|
||||
padding: 0 20upx;
|
||||
background: #ffffff;
|
||||
z-index: 99999999999;
|
||||
// border-bottom: solid 1px #DDDDDD;
|
||||
}
|
||||
|
||||
.superwei-combox__label {
|
||||
font-size: 24upx;
|
||||
line-height: 22px;
|
||||
padding-right: 10px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.superwei-combox__input-box {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.superwei-combox__input {
|
||||
flex: 1;
|
||||
font-size: 24upx;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.superwei-combox__input-plac {
|
||||
font-size: 24upx;
|
||||
color: #ccc; //placeholder-style="color:#FFFFFF"
|
||||
}
|
||||
|
||||
.superwei-combox__selector {
|
||||
/* #ifndef APP-NVUE */
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
position: absolute;
|
||||
top: calc(100% + 12px);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
z-index: 2;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.superwei-combox__selector-scroll {
|
||||
/* #ifndef APP-NVUE */
|
||||
max-height: 200px;
|
||||
box-sizing: border-box;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.superwei-combox__selector-empty,
|
||||
.superwei-combox__selector-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
/* #endif */
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
// border-bottom: solid 1px #DDDDDD;
|
||||
padding: 0px 0px;
|
||||
}
|
||||
|
||||
.superwei-combox__selector-empty text,
|
||||
.superwei-combox__selector-item text {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.superwei-combox__selector-item:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.superwei-combox__selector-empty:last-child,
|
||||
.superwei-combox__selector-item:last-child {
|
||||
/* #ifndef APP-NVUE */
|
||||
border-bottom: none;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
// picker 弹出层通用的指示小三角
|
||||
.uni-popper__arrow,
|
||||
.uni-popper__arrow::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 6px;
|
||||
}
|
||||
|
||||
.uni-popper__arrow {
|
||||
filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
|
||||
top: -6px;
|
||||
left: 10%;
|
||||
margin-right: 3px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #ebeef5;
|
||||
}
|
||||
|
||||
.uni-popper__arrow::after {
|
||||
content: " ";
|
||||
top: 1px;
|
||||
margin-left: -6px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
.superwei-combox__no-border {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<view class="wrapper"
|
||||
v-show="isShowMask">
|
||||
<transition name="content">
|
||||
<view class="content_view"
|
||||
v-show="isShow">
|
||||
<view class="title_view">
|
||||
<view class="title">请选择所在地区</view>
|
||||
<view class="close_view"
|
||||
@click="hidden">
|
||||
<icon class="close_icon"
|
||||
:type="'clear'"
|
||||
size="26" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="select_top">
|
||||
<view class="select_top_item"
|
||||
ref="select_top_item"
|
||||
v-for="(item, index) in dataList"
|
||||
:key="index"
|
||||
@click="select_top_item_click(index)">
|
||||
<text class="address_value">{{ item }}</text>
|
||||
</view>
|
||||
<view class="indicator"
|
||||
:style="{ left: indicatorStyleLeft + 'px' }"
|
||||
ref="indicator"></view>
|
||||
</view>
|
||||
<swiper class="swiper"
|
||||
:current="currentIndex"
|
||||
@change="swiperChange">
|
||||
<swiper-item v-for="(swiper_item, swiper_index) in dataList"
|
||||
:key="swiper_index">
|
||||
<view class="swiper-item">
|
||||
<scroll-view class="scroll-view-item"
|
||||
scroll-y="true">
|
||||
<view class="address_item"
|
||||
v-for="(item, index) in cityAreaArray[swiper_index]"
|
||||
:key="index"
|
||||
@click="address_item_click(swiper_index, index)">
|
||||
<image v-if="selectIndexArr[swiper_index] === index"
|
||||
class="address_item_icon"
|
||||
src="../../static/yixuan-selectAddress/gou.png"
|
||||
mode=""></image>
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</transition>
|
||||
<view class="mask"
|
||||
@click="hidden"
|
||||
v-show="isShowMask"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cityData from "../../static/yixuan-selectAddress/city.json";
|
||||
export default {
|
||||
props: {
|
||||
limit: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isShow: false,
|
||||
isShowMask: false,
|
||||
dataList: ["请选择"],
|
||||
currentIndex: 0,
|
||||
cityData: {},
|
||||
cityAreaArray: [],
|
||||
selectIndexArr: [],
|
||||
indicatorStyleLeft: 16,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
show () {
|
||||
this.isShow = true;
|
||||
this.isShowMask = true;
|
||||
},
|
||||
hidden () {
|
||||
this.isShow = false;
|
||||
setTimeout(() => {
|
||||
this.isShowMask = false;
|
||||
}, 500);
|
||||
},
|
||||
select_top_item_click (index) {
|
||||
console.log("select_top_item_click");
|
||||
this.currentIndex = index;
|
||||
this.$nextTick(() => {
|
||||
this.changeIndicator(index);
|
||||
});
|
||||
},
|
||||
swiperChange (event) {
|
||||
let index = event.detail.current;
|
||||
this.currentIndex = index;
|
||||
|
||||
this.changeIndicator(index);
|
||||
},
|
||||
changeIndicator (index) {
|
||||
/*
|
||||
let itemWidth = this.$refs.select_top_item[index].$children[0].$el.offsetWidth
|
||||
if (itemWidth > 80){
|
||||
itemWidth = 80
|
||||
}
|
||||
let itemCenterX = 10 + index * 80 + itemWidth / 2
|
||||
let indicatorWidth = this.$refs.indicator.$el.offsetWidth
|
||||
this.$refs.indicator.$el.style.left = itemCenterX - indicatorWidth / 2 + 'px'
|
||||
*/
|
||||
let indicatorWidth = 30;
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
let arr = query.selectAll(".select_top_item .address_value");
|
||||
arr
|
||||
.fields(
|
||||
{
|
||||
size: true,
|
||||
scrollOffset: false,
|
||||
},
|
||||
(data) => {
|
||||
let itemWidth =
|
||||
data[index]["width"] > 80 ? 70 : data[index]["width"];
|
||||
let itemCenterX = 10 + index * 80 + itemWidth / 2;
|
||||
let left = itemCenterX - indicatorWidth / 2;
|
||||
|
||||
this.indicatorStyleLeft = left;
|
||||
}
|
||||
)
|
||||
.exec();
|
||||
},
|
||||
address_item_click (swiper_index, index) {
|
||||
// console.log(swiper_index,index)
|
||||
this.selectIndexArr.splice(swiper_index, 5, index);
|
||||
|
||||
//判断当前是否为最下一级
|
||||
if (swiper_index === 0) {
|
||||
//第一级
|
||||
|
||||
let currentObj = this.cityData[index];
|
||||
let city = currentObj.name;
|
||||
this.dataList.splice(swiper_index, 5, city);
|
||||
this.dataList.splice(swiper_index + 1, 0, "请选择");
|
||||
this.cityAreaArray.splice(swiper_index + 1, 1, currentObj["city"]);
|
||||
setTimeout(() => {
|
||||
this.currentIndex = 1;
|
||||
this.changeIndicator(1);
|
||||
}, 50);
|
||||
} else {
|
||||
let currentAreaArray = this.cityAreaArray[swiper_index];
|
||||
let currentObj = currentAreaArray[index];
|
||||
let area = currentObj["area"];
|
||||
if (this.limit === 'city') {
|
||||
area = undefined
|
||||
}
|
||||
if (area !== undefined) {
|
||||
let city = currentObj.name;
|
||||
|
||||
this.dataList.splice(swiper_index, 5, city);
|
||||
this.dataList.splice(swiper_index + 1, 0, "请选择");
|
||||
this.cityAreaArray.splice(swiper_index + 1, 1, currentObj["area"]);
|
||||
|
||||
setTimeout(() => {
|
||||
this.currentIndex = swiper_index + 1;
|
||||
this.changeIndicator(swiper_index + 1);
|
||||
}, 50);
|
||||
} else {
|
||||
//是最下一级
|
||||
|
||||
let city = currentObj.name;
|
||||
this.dataList.splice(swiper_index, 1, city);
|
||||
|
||||
//选择成功返回数据
|
||||
this.$emit("selectAddress", this.dataList);
|
||||
console.log("", this.dataList);
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.changeIndicator(swiper_index);
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.isShow = false;
|
||||
}, 100);
|
||||
setTimeout(() => {
|
||||
this.isShowMask = false;
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
created () {
|
||||
this.cityData = cityData;
|
||||
this.cityAreaArray.push(cityData);
|
||||
},
|
||||
mounted () {
|
||||
// this.changeIndicator(0)
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 不换行
|
||||
@mixin no-wrap() {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wrapper {
|
||||
z-index: 1999;
|
||||
position: absolute;
|
||||
top: -44px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
.content_view {
|
||||
z-index: 999;
|
||||
background: white;
|
||||
position: absolute;
|
||||
height: 80%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-top-left-radius: 20px;
|
||||
border-top-right-radius: 20px;
|
||||
.title_view {
|
||||
height: 12%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 $uni-spacing-row-sm;
|
||||
.title {
|
||||
font-size: uni-font-size-sm;
|
||||
}
|
||||
.close_view {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.select_top {
|
||||
height: 8%;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
.select_top_item {
|
||||
width: 80px;
|
||||
font-size: 14px;
|
||||
@include no-wrap();
|
||||
}
|
||||
.indicator {
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 2px;
|
||||
background: $uni-color-error;
|
||||
left: 16px;
|
||||
bottom: 0;
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
}
|
||||
.swiper {
|
||||
height: 80%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
.swiper-item {
|
||||
height: 100%;
|
||||
.scroll-view-item {
|
||||
height: 100%;
|
||||
padding: 0 10px;
|
||||
.address_item {
|
||||
padding: 5px 0;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.address_item_icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: $uni-text-color-grey;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.content-enter {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
.content-enter-to {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
.content-enter-active {
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
.content-leave {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
.content-leave-to {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
.content-leave-active {
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue