null/pages/mine/shopApply.vue

<template>
	<view class="page">
		<view class="p-content">
			<view class="align-center justify-between inpt-line">
			  <text class="text_2">*店铺名称</text>
			  <input type="text" class="inpt" placeholder="请输入您的店铺名称">
			</view>
			<view class="align-center justify-between inpt-line" @tap="chooseLoc">
			  <text class="text_2">*店铺地址</text>
			  <text class="text_4">请选择城市</text>
			  <image src="/static/r-arrow.png" mode="aspectFill" class="ic"></image>
			</view>
			<view class="align-center justify-end inpt-line">
			  <input type="text" class="inpt txtright" placeholder="请输入详细地址">
			</view>
			<view class="align-center justify-between inpt-line">
			  <text class="text_2">*联系电话</text>
			  <input type="number" class="inpt" placeholder="请输入联系电话">
			</view>	
		</view>
		<submit-btn @submit="submit" ref="submitRef">
			<template v-slot:btns="{isSubmitted}">
				<view class="p-btn" :class="{'disabled':isSubmitted}">
					提交
				</view>
			</template>
		</submit-btn>
		
	</view>
</template>

<script>
	import {chooseLoc} from '@/common/loc.js';
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			// 城市选择器
			async chooseLoc() {
				let  {
				   province,
				   city, 
				   area,
				   address,
				   latitude,
				   longitude,
				} =await chooseLoc();
				this.addr = `${province}${city} ${area}`;
				this.desc = address;
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f8f8f8;
}
.p-content{
	background-color: #fff;
	padding: 0 20rpx;
	margin-bottom: 100rpx;
	
}
.inpt-line {
  padding: 0 3rpx;
  border-bottom: solid 2rpx #0000001a;
  height: 110rpx;
  &:last-child{
	  border: none;
  }
}
.text_2 {
  color: #333333;
  font-size: 30rpx;
  font-family: PingFang;
  letter-spacing: 1.2rpx;
  flex-shrink: 0;
}
.inpt{
	height: 110rpx;
	line-height: 110rpx;
	font-size: 30rpx;
	color:#333;
	flex:1;
	text-align: right;
}
.text_4 {
  margin-left: auto;
  color: #999999;
  font-size: 30rpx;
  font-family: PingFang;
  letter-spacing: 1.2rpx;
}
.ic{
	flex-shrink: 0;
	margin-left: 10rpx;
	width: 20rpx;
	height: 20rpx;
}
.p-btn{
	width: 710rpx;
	height: 76rpx;
	background: #92B99C;
	border-radius: 38rpx;
	line-height: 76rpx;
	text-align: center;
	
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	margin: 0 auto;
}
</style>