|
|
@ -0,0 +1,313 @@ |
|
|
|
<template> |
|
|
|
<view class="applyLaundryStore"> |
|
|
|
<navbar title="申请水洗店" leftClick @leftClick="$utils.navigateBack" /> |
|
|
|
|
|
|
|
|
|
|
|
<view class="frame"> |
|
|
|
<view class="title"> |
|
|
|
<span style="width: 10rpx;height: 40rpx;background-color: #f78142;border-radius: 10rpx;overflow: hidden;"></span> |
|
|
|
<span>店铺信息</span> |
|
|
|
</view> |
|
|
|
<view class="shopName"> |
|
|
|
<view>店铺名称</view> |
|
|
|
<view> |
|
|
|
<input placeholder="请输入店铺名称" clearable></input> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="shopName"> |
|
|
|
<view>您的姓名</view> |
|
|
|
<view> |
|
|
|
<input placeholder="请输入您的姓名" clearable></input> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="shopName"> |
|
|
|
<view>联系方式</view> |
|
|
|
<view> |
|
|
|
<input placeholder="请输入联系方式" clearable></input> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="currentRegion"> |
|
|
|
<view>所在地区</view> |
|
|
|
<view @click="open"> |
|
|
|
湖南省 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="shopName"> |
|
|
|
<view>详细地址</view> |
|
|
|
<view> |
|
|
|
<input placeholder="请输入详细地址" clearable></input> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 省市区三级联动 --> |
|
|
|
<uv-picker ref="provinceCityDistrictLinkageRef" :columns="addressList" :loading="loading" keyName="name" |
|
|
|
@change="change" @confirm="confirm"> |
|
|
|
</uv-picker> |
|
|
|
|
|
|
|
<!-- 底部按钮 --> |
|
|
|
<bottomBtn @confirm='submitApplication()' :color='bottomBtnStyle.color' |
|
|
|
:backgroundColor='bottomBtnStyle.backgroundColor' :fontSize='bottomBtnStyle.fontSize' |
|
|
|
:text='bottomBtnStyle.text' :width="bottomBtnStyle.width" :height="bottomBtnStyle.height" |
|
|
|
:borderRadius='bottomBtnStyle.borderRadius' :bottom='bottomBtnStyle.bottom'> |
|
|
|
</bottomBtn> |
|
|
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import bottomBtn from "../../components/bottom/bottomBtn.vue" |
|
|
|
export default { |
|
|
|
components: { |
|
|
|
bottomBtn, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
loading: true, |
|
|
|
provinces: [], //省 |
|
|
|
citys: [], //市 |
|
|
|
areas: [], //区 |
|
|
|
pickerValue: [0, 0, 0], |
|
|
|
defaultValue: [3442, 1, 2], |
|
|
|
bottomBtnStyle: { |
|
|
|
color: '#FFF', |
|
|
|
backgroundColor: '#fd5100', |
|
|
|
fontSize: '34rpx', |
|
|
|
text: '提交', |
|
|
|
width: '400rpx', |
|
|
|
height: '80rpx', |
|
|
|
borderRadius: '100rpx', |
|
|
|
bottom: '40rpx' |
|
|
|
}, |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
addressList() { |
|
|
|
return [this.provinces, this.citys, this.areas]; |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getprovinceCityDistrictLinkageData(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
|
|
|
|
// 提交按钮 |
|
|
|
submitApplication() { |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
getprovinceCityDistrictLinkageData() { |
|
|
|
uni.request({ |
|
|
|
method: 'GET', |
|
|
|
url: '/static/uvui/example/regions.json', |
|
|
|
success: res => { |
|
|
|
const { |
|
|
|
statusCode, |
|
|
|
data |
|
|
|
} = res |
|
|
|
if (statusCode === 200) { |
|
|
|
console.log('获取的数据:', res); |
|
|
|
this.provinces = data.sort((left, right) => (Number(left.code) > Number(right |
|
|
|
.code) ? 1 : -1)); |
|
|
|
console.log(this.provinces) |
|
|
|
this.handlePickValueDefault() |
|
|
|
setTimeout(() => { |
|
|
|
this.loading = false |
|
|
|
}, 200) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
handlePickValueDefault() { |
|
|
|
// 设置省 |
|
|
|
this.pickerValue[0] = this.provinces.findIndex(item => Number(item.id) === this.defaultValue[0]); |
|
|
|
// 设置市 |
|
|
|
this.citys = this.provinces[this.pickerValue[0]]?.children || []; |
|
|
|
this.pickerValue[1] = this.citys.findIndex(item => Number(item.id) === this.defaultValue[1]); |
|
|
|
// 设置区 |
|
|
|
this.areas = this.citys[this.pickerValue[1]]?.children || []; |
|
|
|
this.pickerValue[2] = this.areas.findIndex(item => Number(item.id) === this.defaultValue[2]); |
|
|
|
// 重置下位置 |
|
|
|
this.$refs.provinceCityDistrictLinkageRef.setIndexs([this.pickerValue[0], this.pickerValue[1], this |
|
|
|
.pickerValue[2] |
|
|
|
], true); |
|
|
|
}, |
|
|
|
change(e) { |
|
|
|
if (this.loading) return; |
|
|
|
const { |
|
|
|
columnIndex, |
|
|
|
index, |
|
|
|
indexs |
|
|
|
} = e |
|
|
|
// 改变了省 |
|
|
|
if (columnIndex === 0) { |
|
|
|
this.citys = this.provinces[index]?.children || [] |
|
|
|
this.areas = this.citys[0]?.children || [] |
|
|
|
this.$refs.provinceCityDistrictLinkageRef.setIndexs([index, 0, 0], true) |
|
|
|
} else if (columnIndex === 1) { |
|
|
|
this.areas = this.citys[index]?.children || [] |
|
|
|
this.$refs.provinceCityDistrictLinkageRef.setIndexs(indexs, true) |
|
|
|
} |
|
|
|
}, |
|
|
|
open() { |
|
|
|
this.$refs.provinceCityDistrictLinkageRef.open(); |
|
|
|
this.handlePickValueDefault() |
|
|
|
}, |
|
|
|
confirm(e) { |
|
|
|
console.log('确认选择的地区:', e); |
|
|
|
uni.showToast({ |
|
|
|
icon: 'none', |
|
|
|
title: `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}` |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
* { |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.applyLaundryStore { |
|
|
|
padding: 0 20rpx 0 20rpx; |
|
|
|
background-color: #f5f5f5; |
|
|
|
|
|
|
|
.frame { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 20rpx; |
|
|
|
background-color: #FFF; |
|
|
|
margin-top: 20rpx; |
|
|
|
padding: 20rpx; |
|
|
|
|
|
|
|
.title { |
|
|
|
display: flex; |
|
|
|
// padding-top: 40rpx; |
|
|
|
font-size: 34rpx; |
|
|
|
font-weight: 700; |
|
|
|
padding: 0 0 0 20rpx; |
|
|
|
|
|
|
|
>span:nth-of-type(1) { |
|
|
|
margin: 4rpx 0 0 8rpx; |
|
|
|
background-color: #FFF; |
|
|
|
} |
|
|
|
|
|
|
|
>span:nth-of-type(2) { |
|
|
|
margin: 0 0 0 8rpx; |
|
|
|
background-color: #FFF; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.shopName { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
background-color: #FFF; |
|
|
|
height: 80rpx; |
|
|
|
// margin: 10rpx 0 0 0; |
|
|
|
padding: 10rpx 0 0 20rpx; |
|
|
|
|
|
|
|
>view:nth-of-type(1) { |
|
|
|
width: 30%; |
|
|
|
// font-weight: 700; |
|
|
|
} |
|
|
|
|
|
|
|
>view:nth-of-type(2) { |
|
|
|
width: 70%; |
|
|
|
// padding: 0 20rpx 0 0; |
|
|
|
border-radius: 10rpx; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
input{ |
|
|
|
background-color: #f5f5f5; |
|
|
|
color: #a4a4a4; |
|
|
|
font-size: 28rpx; |
|
|
|
padding: 8rpx 8rpx 8rpx 15rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.name { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
background-color: #FFF; |
|
|
|
height: 80rpx; |
|
|
|
// margin: 10rpx 0 0 0; |
|
|
|
padding: 10rpx 0 0 20rpx; |
|
|
|
|
|
|
|
>view:nth-of-type(1) { |
|
|
|
width: 30%; |
|
|
|
font-weight: 700; |
|
|
|
} |
|
|
|
|
|
|
|
>view:nth-of-type(2) { |
|
|
|
width: 70%; |
|
|
|
padding: 0 20rpx 0 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.phone { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
background-color: #FFF; |
|
|
|
height: 80rpx; |
|
|
|
// margin: 10rpx 0 0 0; |
|
|
|
padding: 10rpx 0 0 20rpx; |
|
|
|
|
|
|
|
>view:nth-of-type(1) { |
|
|
|
width: 30%; |
|
|
|
font-weight: 700; |
|
|
|
} |
|
|
|
|
|
|
|
>view:nth-of-type(2) { |
|
|
|
width: 70%; |
|
|
|
padding: 0 20rpx 0 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.currentRegion { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
background-color: #FFF; |
|
|
|
height: 80rpx; |
|
|
|
// margin: 10rpx 0 0 0; |
|
|
|
padding: 10rpx 0 0 20rpx; |
|
|
|
|
|
|
|
>view:nth-of-type(1) { |
|
|
|
width: 30%; |
|
|
|
// font-weight: 700; |
|
|
|
} |
|
|
|
|
|
|
|
>view:nth-of-type(2) { |
|
|
|
width: 70%; |
|
|
|
padding: 0 20rpx 0 0; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.detailedAddress { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
background-color: #FFF; |
|
|
|
height: 80rpx; |
|
|
|
// margin: 10rpx 0 0 0; |
|
|
|
padding: 10rpx 0 0 20rpx; |
|
|
|
|
|
|
|
>view:nth-of-type(1) { |
|
|
|
width: 30%; |
|
|
|
font-weight: 700; |
|
|
|
} |
|
|
|
|
|
|
|
>view:nth-of-type(2) { |
|
|
|
width: 70%; |
|
|
|
padding: 0 20rpx 0 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
</style> |