|
|
@ -5,45 +5,48 @@ |
|
|
|
|
|
|
|
|
<view class="frame"> |
|
|
<view class="frame"> |
|
|
<view class="title"> |
|
|
<view class="title"> |
|
|
<span style="width: 10rpx;height: 40rpx;background-color: #f78142;border-radius: 10rpx;overflow: hidden;"></span> |
|
|
|
|
|
|
|
|
<span |
|
|
|
|
|
style="width: 10rpx;height: 40rpx;background-color: #f78142;border-radius: 10rpx;overflow: hidden;"></span> |
|
|
<span>店铺信息</span> |
|
|
<span>店铺信息</span> |
|
|
</view> |
|
|
</view> |
|
|
<view class="shopName"> |
|
|
<view class="shopName"> |
|
|
<view>店铺名称</view> |
|
|
<view>店铺名称</view> |
|
|
<view> |
|
|
<view> |
|
|
<input placeholder="请输入店铺名称" clearable></input> |
|
|
|
|
|
|
|
|
<input v-model="form.name" placeholder="请输入店铺名称" clearable></input> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="shopName"> |
|
|
<view class="shopName"> |
|
|
<view>您的姓名</view> |
|
|
<view>您的姓名</view> |
|
|
<view> |
|
|
<view> |
|
|
<input placeholder="请输入您的姓名" clearable></input> |
|
|
|
|
|
|
|
|
<input v-model="form.userName" placeholder="请输入您的姓名" clearable></input> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="shopName"> |
|
|
<view class="shopName"> |
|
|
<view>联系方式</view> |
|
|
<view>联系方式</view> |
|
|
<view> |
|
|
<view> |
|
|
<input placeholder="请输入联系方式" clearable></input> |
|
|
|
|
|
|
|
|
<input v-model="form.phone" type="number" placeholder="请输入联系方式" clearable></input> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
<view class="currentRegion"> |
|
|
<view class="currentRegion"> |
|
|
<view>所在地区</view> |
|
|
<view>所在地区</view> |
|
|
<view @click="open"> |
|
|
|
|
|
湖南省 |
|
|
|
|
|
|
|
|
<view> |
|
|
|
|
|
<input class="input" v-model="form.currentRegion" placeholder="请选择所在地区"></input> |
|
|
|
|
|
<view class="orientation" @click.stop="selectAddr"> |
|
|
|
|
|
定位 |
|
|
|
|
|
<image src="../static/address/selectIcon.png" |
|
|
|
|
|
style="width:30rpx;height: 30rpx;margin:5rpx 5rpx 5rpx 5rpx;"></image> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
<view class="shopName"> |
|
|
<view class="shopName"> |
|
|
<view>详细地址</view> |
|
|
<view>详细地址</view> |
|
|
<view> |
|
|
<view> |
|
|
<input placeholder="请输入详细地址" clearable></input> |
|
|
|
|
|
|
|
|
<input v-model="form.address" placeholder="详细地址" clearable></input> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</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' |
|
|
<bottomBtn @confirm='submitApplication()' :color='bottomBtnStyle.color' |
|
|
@ -57,6 +60,7 @@ |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
|
|
|
import Position from '@/utils/position.js' |
|
|
import bottomBtn from "../../components/bottom/bottomBtn.vue" |
|
|
import bottomBtn from "../../components/bottom/bottomBtn.vue" |
|
|
export default { |
|
|
export default { |
|
|
components: { |
|
|
components: { |
|
|
@ -64,12 +68,16 @@ |
|
|
}, |
|
|
}, |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
loading: true, |
|
|
|
|
|
provinces: [], //省 |
|
|
|
|
|
citys: [], //市 |
|
|
|
|
|
areas: [], //区 |
|
|
|
|
|
pickerValue: [0, 0, 0], |
|
|
|
|
|
defaultValue: [3442, 1, 2], |
|
|
|
|
|
|
|
|
form: { |
|
|
|
|
|
userName: '', |
|
|
|
|
|
name: '', |
|
|
|
|
|
phone: '', |
|
|
|
|
|
currentRegion: '', |
|
|
|
|
|
address: '', |
|
|
|
|
|
latitude: '', |
|
|
|
|
|
longitude: '', |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
bottomBtnStyle: { |
|
|
bottomBtnStyle: { |
|
|
color: '#FFF', |
|
|
color: '#FFF', |
|
|
backgroundColor: '#fd5100', |
|
|
backgroundColor: '#fd5100', |
|
|
@ -83,84 +91,56 @@ |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
|
addressList() { |
|
|
|
|
|
return [this.provinces, this.citys, this.areas]; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
mounted() { |
|
|
|
|
|
this.getprovinceCityDistrictLinkageData(); |
|
|
|
|
|
|
|
|
onShow() { |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
|
|
|
|
|
|
// 提交按钮 |
|
|
// 提交按钮 |
|
|
submitApplication() { |
|
|
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) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
this.$api('applyShopHotel', this.form, res => { |
|
|
|
|
|
if (res.code == 200) { |
|
|
|
|
|
uni.showToast({ |
|
|
|
|
|
title: '申请成功待审核', // 提示的内容 |
|
|
|
|
|
icon: 'success', // 图标，可选值有 'success', 'loading', 'none' |
|
|
|
|
|
duration: 1500 // 提示的持续时间，默认是1500毫秒 |
|
|
|
|
|
}); |
|
|
|
|
|
setTimeout(()=>{ |
|
|
|
|
|
uni.navigateTo({ |
|
|
|
|
|
url:'/pages/index/center' |
|
|
|
|
|
}) |
|
|
|
|
|
},1500) |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
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); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//地图上选择地址 |
|
|
|
|
|
selectAddr() { |
|
|
|
|
|
Position.getLocation(res => { |
|
|
|
|
|
Position.selectAddress(res.longitude, res.latitude, success => { |
|
|
|
|
|
this.setAddress(success) |
|
|
|
|
|
}) |
|
|
|
|
|
}) |
|
|
}, |
|
|
}, |
|
|
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) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//提取用户选择的地址信息复制给表单数据 |
|
|
|
|
|
setAddress(res) { |
|
|
|
|
|
//经纬度信息 |
|
|
|
|
|
this.form.latitude = res.latitude |
|
|
|
|
|
this.form.longitude = res.longitude |
|
|
|
|
|
|
|
|
|
|
|
if (!res.address && res.name) { //用户直接选择城市的逻辑 |
|
|
|
|
|
return this.form.currentRegion = res.name |
|
|
} |
|
|
} |
|
|
|
|
|
if (res.address || res.name) { |
|
|
|
|
|
return this.form.currentRegion = res.address + res.name |
|
|
|
|
|
} |
|
|
|
|
|
this.form.currentRegion = '' //用户啥都没选就点击勾选 |
|
|
}, |
|
|
}, |
|
|
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}` |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@ -189,7 +169,7 @@ |
|
|
font-size: 34rpx; |
|
|
font-size: 34rpx; |
|
|
font-weight: 700; |
|
|
font-weight: 700; |
|
|
padding: 0 0 0 20rpx; |
|
|
padding: 0 0 0 20rpx; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
>span:nth-of-type(1) { |
|
|
>span:nth-of-type(1) { |
|
|
margin: 4rpx 0 0 8rpx; |
|
|
margin: 4rpx 0 0 8rpx; |
|
|
background-color: #FFF; |
|
|
background-color: #FFF; |
|
|
@ -219,10 +199,10 @@ |
|
|
// padding: 0 20rpx 0 0; |
|
|
// padding: 0 20rpx 0 0; |
|
|
border-radius: 10rpx; |
|
|
border-radius: 10rpx; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
input{ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
input { |
|
|
background-color: #f5f5f5; |
|
|
background-color: #f5f5f5; |
|
|
color: #a4a4a4; |
|
|
|
|
|
|
|
|
// color: #a4a4a4; |
|
|
font-size: 28rpx; |
|
|
font-size: 28rpx; |
|
|
padding: 8rpx 8rpx 8rpx 15rpx; |
|
|
padding: 8rpx 8rpx 8rpx 15rpx; |
|
|
} |
|
|
} |
|
|
@ -283,7 +263,25 @@ |
|
|
>view:nth-of-type(2) { |
|
|
>view:nth-of-type(2) { |
|
|
width: 70%; |
|
|
width: 70%; |
|
|
padding: 0 20rpx 0 0; |
|
|
padding: 0 20rpx 0 0; |
|
|
|
|
|
|
|
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
|
|
|
|
.input { |
|
|
|
|
|
background-color: #f5f5f5; |
|
|
|
|
|
// color: #a4a4a4; |
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
padding: 8rpx 8rpx 8rpx 15rpx; |
|
|
|
|
|
width: 300rpx; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.orientation { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
padding: 10rpx 10rpx 10rpx 20rpx; |
|
|
|
|
|
font-size: 30rpx; |
|
|
|
|
|
color: #FBAB32; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
