// 地区选择器
<template>
<view class="addressSelector">
<main>
<view class="provinceTree">
<view @click="getCityList(item, index)" :id="item.code" :class="item.checked === false ? 'provinceBox' : 'provinceBox provinceHeightLight'" v-for="(item, index) in provinceList" :key="item.code">
<span>{{item.name}}</span>
<i v-if="item.number !== ''">{{item.number}}</i>
</view>
</view>
<view class="cityTree">
<view @click="getAreaList(item, index)" :id="item.code" :class="item.checked === false ? 'cityBox' : 'cityBox cityHeightLight'" v-for="(item, index) in cityList" :key="item.code">
<span>{{item.name}}</span>
<i v-if="item.number !== ''">{{item.number}}</i>
</view>
</view>
<view class="areaTree">
<view @click="clickAreaList(item, index)" :id="item.code" :class="item.checked === false ? 'areaBox' : 'areaBox areaHeightLight'" v-for="(item, index) in areaList" :key="item.code">{{ item.name }}</view>
</view>
</main>
<u-top-tips z-index="99999" ref="uTips"></u-top-tips>
</view>
</template>
<script>
import { addressPartListApi } from '../../../api/api'
export default {
data() {
return {
// 省级城市编码
pcode: '',
// 市级城市编码
ccode: '110000',
// 省份列表
provinceList: [],
// 市级列表
cityList: [],
// 区县列表
areaList: [],
// 存储选中的省份列表
checkedProvinceList: [],
// 存储选中的市级列表
checkedCityList: [],
// 存储选中的区县级列表
checkedAreaList: []
}
},
onShow() {
// 获取省份列表
this.getProvinceList().then(() =>{
// 获取默认市级列表
this.getCityList({ code:'110000', pcode: '000000' }, 0)
})
},
methods: {
// 获取省份列表
async getProvinceList() {
const { data: res } = await addressPartListApi('000000')
if (res.code !== 0) return this. refs.uTips.show({ title: res.msg, type: 'error', duration: '2000'})
// 设置默认值
this.cityList = []
res.data.list.forEach((item, index) =>{
this.cityList.push({
id: item.id, // 地区id
name: item.name, // 地区名称
code: item.code, // 地区编码
pcode: item.pcode, // 父级地区编码
checked: false, // 选择状态
switch: false, // 切换状态
number: '', // 子级选中的值
index: index // 当前地区的下标
})
})
// 2.市级高亮
this.checkedCityList.forEach((checkCity, checkIndex) =>{
this.cityList.forEach((allCity, allIndex) =>{
if (checkCity.code === allCity.code) {
this.cityList[allIndex].checked = true
this.cityList[allIndex].number = this.checkedCityList[checkIndex].number
}
})
})
// 3.直接将所有区县级列表清空
this.areaList = []
// 4.将所有省份switch改为false,同时将当前选中的省份switch改为true
this.provinceList.forEach(zResult =>{
zResult.switch = false
})
this.provinceList[index].switch = true
return false
// 如果当前省级已经被点击过,但是不是第一次点击时
} else if (alreadyCheck === true &&value.switch === true) {
// 除了移除省级code还要移除对应省级下的所有市级code(移除对应的高亮状态,默认会重置)
// 将省级code和市级级pcode比较如果相同则移除(第一层)
if (this.checkedCityList.length !== 0) {
// --------------移除对应的市级code
let newCheckedCityList = []
this.checkedCityList.forEach((val, index) =>{
if (value.code !== val.pcode) {
newCheckedCityList.push(val)
} else {
// 将对应的市级code和区县级pcode比较如果相同则移除(第二层)
if (this.checkedAreaList.length !== 0) {
let newCheckedAreaList = []
this.checkedAreaList.forEach((keys, index) =>{
if (val.code !== keys.pcode) {
newCheckedAreaList.push(keys)
}
})
this.checkedAreaList = newCheckedAreaList
}
}
})
this.checkedCityList = newCheckedCityList
}
this.checkedProvinceList.splice(alreadyIndex, 1)
} else {
this.checkedProvinceList.push({ code: value.code, pcode: value.pcode, number: '全' })
}
console.log(this.checkedProvinceList, '省', this.checkedCityList, '市', this.checkedAreaList,'区县')
// 改变当前点击的省份高亮状态
this.provinceList[index].checked = !this.provinceList[index].checked
// 改变当前点击省份的全选状态
if (this.provinceList[index].number === '') {
this.provinceList[index].number = '全'
} else {
this.provinceList[index].number = ''
}
this.pcode = value.code
const { data: res } = await addressPartListApi(this.pcode)
if (res.code !== 0) return this. refs.uTips.show({ title: res.msg, type: 'error', duration: '2000'})
// 设置默认值
this.areaList = []
res.data.list.forEach((item, index) =>{
this.areaList.push({
id: item.id, // 地区id
name: item.name, // 地区名称
code: item.code, // 地区编码
pcode: item.pcode, // 父级地区编码
checked: false, // 选择状态
switch: false, // 切换状态
number: '', // 子级选中的值
index: index // 当前地区的下标
})
})
// 2.区县高亮
this.checkedAreaList.forEach((checkArea, checkIndex) =>{
this.areaList.forEach((allArea, allIndex) =>{
if (checkArea.code === allArea.code) {
this.areaList[allIndex].checked = true
}
})
})
// 3.将所有市级switch改为false,同时将当前选中的市级switch改为true
this.cityList.forEach(zResult =>{
zResult.switch = false
})
this.cityList[index].switch = true
return false
// 如果当前市级已经被点击过,但是不是第一次点击时
} else if (alreadyCheck === true &&value.switch === true) {
this.checkedCityList.splice(alreadyIndex, 1)
// 除了移除市级code还要移除对应市级下的所有区县级code同时移除对应的高亮状态
// 将市级code和区县级pcode比较如果相同则移除
if (this.checkedAreaList.length !== 0) {
let newCheckedAreaList = []
this.checkedAreaList.forEach((val, index) =>{
if (value.code !== val.pcode) {
newCheckedAreaList.push(val)
}
})
this.checkedAreaList = newCheckedAreaList
}
// 当市级已经被勾选时,找到对应的省级,省级后缀的数字得-1
this.provinceList.forEach((result, index) =>{
if (result.code === value.pcode) {
result.number = (result.number - 1) + ''
}
if (result.number === '0') result.number = '全'
// 不仅要改list的number还要改对应的checkedList上的number★~~~~~
if (this.checkedProvinceList.length !== 0) {
this.checkedProvinceList.forEach((redus, rIndex) =>{
if (redus.code === result.code) {
this.checkedProvinceList[rIndex].number = result.number
}
})
}
})
} else {
this.checkedCityList.push({ code: value.code, pcode: value.pcode, number: '全' })
// 勾选时点击当前市级地区时判断当前省级是否勾选,如果未勾选则勾选上(checked选择状态及高亮)
// 判断当前省级是否勾选
this.provinceList.forEach((result, index) =>{
// 找到对应的省级
if (result.code === value.pcode) {
// 如果省级未勾选,则勾选上省级
if (result.checked === false) {
result.checked = true
result.number = '全'
this.checkedProvinceList.push({ code: value.pcode, pcode: '000000', number: '1' })
}
// 到这一步肯定省级肯定是被勾选上了
// 如果市级被勾选,省级后缀的数字都得+1
if (result.number === '全') {
result.number = '1'
} else {
result.number = (result.number - 0 + 1) + ''
}
// 不仅要改list的number还要改对应的checkedList上的number★~~~~~
if (this.checkedProvinceList.length !== 0) {
this.checkedProvinceList.forEach((redus, rIndex) =>{
if (redus.code === result.code) {
this.checkedProvinceList[rIndex].number = result.number
}
})
}
}
})
}
// 改变当前点击的市级高亮状态
this.cityList[index].checked = !this.cityList[index].checked
// 改变当前点击市级的全选状态
if (this.cityList[index].number === '') {
this.cityList[index].number = '全'
} else {
this.cityList[index].number = ''
}
this.ccode = value.code
console.log(this.checkedProvinceList, '省', this.checkedCityList, '市', this.checkedAreaList,'区县')
const { data: res } = await addressPartListApi(this.ccode)
if (res.code !== 0) return this.$refs.uTips.show({ title: res.msg, type: 'error', duration: '2000'})
// 设置默认值
this.areaList = []
res.data.list.forEach((item, index) =>{
this.areaList.push({
id: item.id, // 地区id
name: item.name, // 地区名称
code: item.code, // 地区编码
pcode: item.pcode, // 父级地区编码
checked: false, // 选择状态
switch: false,// 切换状态
index: index // 当前地区的下标
})
})
// ------------------------------------------------------------------------------------------------(再获取完区县级列表后点击市级重置区县级高亮)
// 用所有被勾选的区县级code和所有区县列表进行比较如果相同则高亮
if (this.checkedAreaList.length !== 0 &&this.areaList.length !== 0) {
this.checkedAreaList.forEach((val, valIndex) =>{
this.areaList.forEach((keys, keysIndex)=>{
if (val.code === keys.code) {
this.areaList[keysIndex].checked = true
}
})
})
}
},
// 点击区县触发
clickAreaList(value, index) {
// 存储被点击的区县code(判断如果已经存在被点击过则去除)
let alreadyCheck = false
let alreadyIndex = ''
if (this.checkedAreaList.length !== 0) {
this.checkedAreaList.forEach((item, index) =>{
if (item.code === value.code) {
alreadyCheck = true
alreadyIndex = index
return false
}
})
}
// 如果当前县区级已经被勾选则去除
if (alreadyCheck === true) {
this.checkedAreaList.splice(alreadyIndex, 1)
// 去除的时候市级肯定是勾选状态
this.cityList.forEach((result, index) =>{
// 找到对应的市级,市级后缀的数字得-1
if (result.code === value.pcode) {
result.number = (result.number - 1) + ''
}
if (result.number === '0') result.number = '全'
// 不仅要改list的number还要改对应的checkedList上的number★~~~~~
if (this.checkedCityList.length !== 0) {
this.checkedCityList.forEach((redus, rIndex) =>{
if (redus.code === result.code) {
this.checkedCityList[rIndex].number = result.number
}
})
}
})
} else {
// 如果当前县区级如果未被勾选
this.checkedAreaList.push({ code: value.code, pcode: value.pcode })
// 勾选时点击当前区县地区时判断当前市级是否勾选,如果未勾选则勾选上(checked选择状态及高亮)
// 判断当前市级是否勾选
this.cityList.forEach((result, index) =>{
// 找到对应的市级
if (result.code === value.pcode) {
// 如果市级未勾选,则勾选上市级
if (result.checked === false) {
result.checked = true
result.number = '全'
this.checkedCityList.push({ code: value.pcode, pcode: '000000' })
//
}
// 到这一步肯定是被勾选上了
// 如果县区被勾选,市级后缀的数字都得+1
if (result.number === '全') {
result.number = '1'
} else {
result.number = (result.number - 0 + 1) + ''
}
// 不仅要改list的number还要改对应的checkedList上的number★~~~~~
if (this.checkedCityList.length !== 0) {
this.checkedCityList.forEach((redus, rIndex) =>{
if (redus.code === result.code) {
this.checkedCityList[rIndex].number = result.number
}
})
}
}
})
}
console.log(this.checkedProvinceList, '省', this.checkedCityList, '市', this.checkedAreaList,'区县')
// 改变当前点击的区县高亮状态
this.areaList[index].checked = !this.areaList[index].checked
}
}
}
</script>
<style lang="less">
.addressSelector{
main {
display: flex
width: 100%
background-color: #F5F5F5
.provinceTree, .cityTree, .areaTree {
flex: 1
height: 100vh
border-right: 1.81rpx solid #E4E4E4
overflow-y: auto
.provinceBox, .cityBox, .areaBox {
position: relative
height: 90.57rpx
line-height: 90.57rpx
text-align: center
i {
position: absolute
top: 30.8rpx
right: 30.79rpx
width: 28.98rpx
height: 28.98rpx
background-color: #188AFA
border-radius: 50%
line-height: 25.98rpx
color: #FFFFFF
font-size: 21.73rpx
}
}
// 省级高亮样式
.provinceHeightLight {
background: linear-gradient(270deg, #F5F5F5 0%, #D1E9FF 100%)
color: #188AFA
}
// 市级高亮样式
.cityHeightLight {
background-color: #F5F5F5
color: #188AFA
}
// 区县高亮样式
.areaHeightLight {
background-color: #F5F5F5
color: #188AFA
}
}
.cityTree, .areaTree {
background-color: #FFFFFF
}
}
}
</style>
老规矩，先上效果图
个人对夜间模式这个功能情有独钟
晚上黑灯瞎火的看手机，屏幕亮度就算调到最低依然很是刺眼呀
所以我一直用某浏览器，因为有夜间模式
言归正传，依然是分析功能点
1.点击按钮，切换一套css（这个功能很简单）
2.把皮肤设置保存到全局变量，在访问其它页面时也能有效果
3.把设置保存到本地，退出应用再进来时，依然加载上次设置的皮肤
先从切换开始吧，switch很少用，还是贴一下吧
按钮功能OK了，现在我们去写样式
像这种黑的风格的皮肤，大背景色用#000
小背景用#333，文字用#999吧，我也懒得用取色器了
既然需要一套皮肤，那我们就去文件夹外面写一个样式文件
就新建一个skin目录，下面写一个dark.wxss吧
然后呢
我们把普通模式下的wxss复制一份，贴进来
把和颜色有关的属性留下来，其它删除
像background呀，border，color等。。其它统统不要
最后发现就剩这么点了。。
大家发现，我这些样式名称都有dark-box
这个dark-box就是最外面，也是最大的盒子（除了默认的page哈）
my-box是普通模式，dark-box就是夜间模式
当然你也可以在写一个皮肤样式，黄、红、蓝。。。
现在这个写法，我们只用控制变量 skinStyle的值就能改变皮肤样式了
我们还能写个blue-box的皮肤，然后设置变量为skinStyle为blue就行了
还有关键一步，在wxss文件中把这个皮肤文件引入要显示的页面
接下来第二步，这就简单了。。
设置到全局变量嘛，先getApp(),然后传过去就行了
现在在访问其它页面的时候，dark皮肤也会传进去
我只写了一个页面哈，所以只有这个页面会有变化
现在第三步了，保存到localstroge中
完了吗？并没有。。
我们要在程序打开时就获取皮肤设置
所以要在app.js去get与皮肤相关的信息
现在我们设置黑色皮肤，然后退出，进去之后不是黑色
因为我们在页面加载时没设置
现在再来看看
结果按钮的状态是关闭，皮肤却是开着
因为开关重置了
这个就交给大家自己解决啦，启动时判断一下就OK啦
需要源码的话我再上传吧
点击跳过按钮就可以取消。美服进商店之后，点右上角你的头像，然后按一下右边，拉到最下面，点击改变英文，第一条选择相应的就可以了。如果是日文的话选择变更，第一项变成跳过的日文点击就可以了。
进入要输入密码，这是一个保护账号的机制，防止不是账号本人消费啥的，并且避免因误 *** 作需要自己承担责任之类。加上很多小孩子喜欢购买游戏，对金钱没什么观念，所以才需要设置这个密码保护。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）