TmOct5/barter-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[新增地址管理模块]

Browse Source
This commit is contained in:
张冬雪
2021-09-16 11:26:45 +08:00
parent c95401abc5
commit 6946d6bc82
169 changed files with 34400 additions and 1377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
components/no-list-components/index.vue Normal file
View File

@@ -0,0 +1,69 @@
<template>
<view class="NOList">
<view class="no-addr">
<image :src="`https://e-chain.cnskl.com/storage/imageresource/no-image/${name}.png`" mode="widthFix"></image>
{{txt}}
</view>
</view>
</template>
<script>
export default {
name: "NOList",
/**
* name 携带过来的图片名称 （与本地问图片文件相对应）
*
* no-address（没有地址）
* no-counpon（没有优惠券）
* no-goods（没有商品）
* no-list（没有订单列表）
* no-news（没有任何消息）
* no-new1（没有任何消息1）
* no-chain （没有区块链信息）
* no-collection（没有任何收藏信息）
* no-foot （没有足迹信息）
* no-in（没有收入信息）
* no-out （没有任何支出信息）
* no-order （没有任何订单信息）
* no-order-list （没有任何订单信息）
* no-record （没有任何收益信息）
* no-records （没有任何收益信息2）
* no-search （没有任何搜索信息）
* no-shop （没有任何店铺信息）
*
*
* txt 携带过来的提示语
*/
props: {
name: String,
txt: String,
webUrl:'https://e-chain.cnskl.com/storage/imageresource/no-image'
},
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
// 无地址
.no-addr {
padding-top: $padding*6;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
color: #999;
font-size: $title-size*0.9;
image {
margin-bottom: $margin*4;
margin-top: $margin*2;
width: 400rpx;
opacity: .4;
}
}
</style>

355
components/yixuan-selectAddress/yixuan-selectAddress.vue Normal file
View File

@@ -0,0 +1,355 @@
<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.name || '请选择'}}</text>
<view :class="index === currentIndex?'indicator':'no-indicator'" ref="indicator"></view>
</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)">
{{item.name}}
<uni-icons class="address_item_icon" v-if="selectIndexArr[swiper_index] === index"
type="checkmarkempty" color="#009b69"></uni-icons>
</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 {
data() {
return {
isShow: false,
isShowMask: false,
dataList: ['请选择'],
currentIndex: 0,
cityData: {}, // 省市区对象
cityAreaArray: [], // 省市区数组
selectIndexArr: [], // 省市区index
indicatorStyleLeft: 16
};
},
props: {
addressIdList: {
type: Array
}
},
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 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
// console.log('changeIndicator',itemWidth,index)
this.indicatorStyleLeft = left
}).exec();
},
address_item_click(swiper_index, index) {
this.selectIndexArr.splice(swiper_index, 5, index)
//判断当前是否为最下一级
if (swiper_index === 0) { //第一级
let currentObj = this.cityData[index]
let city = {
name: currentObj.name,
id: currentObj.region_id
}
console.log(city)
this.dataList.splice(swiper_index, 5, city)
this.dataList.splice(swiper_index + 1, 0, '请选择')
this.cityAreaArray.splice(swiper_index + 1, 1, currentObj["city"])
console.log(this.cityAreaArray)
setTimeout(() => {
this.currentIndex = 1
this.changeIndicator(1)
}, 50);
} else {
let currentAreaArray = this.cityAreaArray[swiper_index]
let currentObj = currentAreaArray[index]
let area = currentObj["area"]
console.log(currentAreaArray)
if (area !== undefined) {
let city = {
name: currentObj.name,
id: currentObj.region_id
}
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 = {
name: currentObj.name,
id: currentObj.region_id
}
this.dataList.splice(swiper_index, 1, city)
//选择成功返回数据
this.$emit("selectAddress", 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)
if (this.addressIdList.length > 0) {
const privinceId = this.addressIdList[0] // 省份id请求接口返回
const cityId = this.addressIdList[1] // 城市id请求接口返回
const areaId = this.addressIdList[2] // 区域id请求接口返回
const privince = cityData // 省份数组
let city = [] // 城市数组
let area = [] // 区域数组
let cityAreaArray = []
let selectIndexArr = []
let dataList = []
let pIndex = privince.findIndex((item) => item.region_id === privinceId) // 省份的id
cityAreaArray.push(privince)
selectIndexArr.push(pIndex)
dataList.push(privince[pIndex])
city = privince[pIndex].city
let cIndex = city.findIndex((item) => item.region_id === cityId) // 城市的id
cityAreaArray.push(city)
selectIndexArr.push(cIndex)
dataList.push(city[cIndex])
area = city[cIndex].area
let aIndex = area.findIndex((item) => item.region_id === areaId) // 城市的id
cityAreaArray.push(area)
selectIndexArr.push(aIndex)
dataList.push(area[aIndex])
this.cityAreaArray = cityAreaArray
this.selectIndexArr = selectIndexArr
this.dataList = dataList
this.$emit("selectAddress", this.dataList)
}
}
}
</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: 60%;
left: 0;
bottom: 0;
right: 0;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
.title_view {
height: 120rpx;
display: flex;
justify-content: center;
align-items: center;
padding: 0 $uni-spacing-row-sm;
position: relative;
border-bottom: solid 1rpx #f8f8f8;
.title {
font-size: uni-font-size-sm;
}
.close_view {
height: 60px;
width: 60px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 0;
}
}
.select_top {
height: 8%;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 20rpx 0 20rpx;
position: relative;
margin: 30rpx 0 50rpx 0;
box-sizing: border-box;
.select_top_item {
max-width: 33.33%;
float: left;
font-size: $title-size - 1;
color: $text-price;
text-align: left;
@include no-wrap();
margin-right: $margin*1;
// display: flex;
// flex-direction: column;
// justify-content: center;
// align-items: center;
// box-sizing: border-box;
}
.indicator {
width: 30px;
height: 2px;
margin-top: 20rpx;
background: $text-price;
transition: left 0.5s ease;
}
.no-indicator {
background: #fff;
width: 30px;
height: 2px;
margin-top: 20rpx;
transition: left 0.5s ease;
}
}
.swiper {
height: 70%;
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: $padding*1.5 0;
border-bottom: solid 0.2rpx #f7f7f7;
font-size: $title-size - 1;
display: flex;
align-items: center;
.address_item_icon {
margin-left: 20rpx;
// 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>