| @ -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> | |||||