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