You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
245 lines
6.1 KiB
245 lines
6.1 KiB
<template>
|
|
<view class="page">
|
|
<!-- 导航栏 -->
|
|
<navbar title="商家合作" leftClick @leftClick="$utils.navigateBack" color="#fff" />
|
|
|
|
<view class="content">
|
|
<view class="form">
|
|
<view class="form-title">门头照片</view>
|
|
<view class="card upload">
|
|
<formUpload v-model="form.imageUrl">
|
|
<template v-slot="{ value }">
|
|
<view class="flex">
|
|
<image v-if="value"
|
|
class="upload-img"
|
|
:src="value"
|
|
mode="aspectFill"
|
|
/>
|
|
<image v-else
|
|
class="upload-img"
|
|
src="../static/cooperation/icon-upload.png"
|
|
mode="aspectFill"
|
|
/>
|
|
</view>
|
|
</template>
|
|
</formUpload>
|
|
</view>
|
|
</view>
|
|
<view class="form">
|
|
<view class="form-title">店铺信息</view>
|
|
<view class="card info">
|
|
<uv-form
|
|
ref="form"
|
|
:model="form"
|
|
:rules="rules"
|
|
labelPosition="left"
|
|
labelWidth="150rpx"
|
|
:labelStyle="{
|
|
color: '#000000',
|
|
fontSize: '28rpx',
|
|
}"
|
|
>
|
|
<view class="form-item">
|
|
<uv-form-item label="店铺名称" prop="storeName">
|
|
<view class="form-item-content">
|
|
<formInput v-model="form.storeName" placeholder="请输入店铺名称"></formInput>
|
|
</view>
|
|
</uv-form-item>
|
|
</view>
|
|
<view class="form-item">
|
|
<uv-form-item label="您的姓名" prop="name">
|
|
<view class="form-item-content">
|
|
<formInput v-model="form.name" placeholder="请输入您的姓名"></formInput>
|
|
</view>
|
|
</uv-form-item>
|
|
</view>
|
|
<view class="form-item">
|
|
<uv-form-item label="联系手机号" prop="phone">
|
|
<view class="form-item-content">
|
|
<formInput v-model="form.phone" placeholder="请输入您的手机号"></formInput>
|
|
</view>
|
|
</uv-form-item>
|
|
</view>
|
|
<view class="form-item">
|
|
<uv-form-item label="所在地区" prop="address">
|
|
<view class="form-item-content flex address">
|
|
<text>{{ form.address ? form.address : '请选择' }}</text>
|
|
<button plain class="btn address-btn" @click="selectAddr">
|
|
<image class="address-btn-icon" src="../static/cooperation/icon-arrow.png" mode="widthFix"></image>
|
|
</button>
|
|
</view>
|
|
</uv-form-item>
|
|
</view>
|
|
<view class="form-item address-details">
|
|
<uv-form-item label="详细地址" prop="addressDetails" labelPosition="top" >
|
|
<view style="margin-top: 22rpx;">
|
|
<formTextarea
|
|
v-model="form.addressDetails"
|
|
placeholder="请输入详细地址"
|
|
></formTextarea>
|
|
</view>
|
|
</uv-form-item>
|
|
</view>
|
|
</uv-form>
|
|
</view>
|
|
</view>
|
|
<view class="tools">
|
|
<button plain class="btn btn-submit">提交</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Position from '@/utils/position.js'
|
|
|
|
import formInput from '../components/formInput.vue'
|
|
import formUpload from '../components/formUpload.vue'
|
|
import formTextarea from '../components/formTextarea.vue'
|
|
|
|
export default {
|
|
components: {
|
|
formInput,
|
|
formUpload,
|
|
formTextarea,
|
|
},
|
|
data() {
|
|
return {
|
|
form: {
|
|
storeName: null,
|
|
name: null,
|
|
phone: null,
|
|
address: null,
|
|
latitude: null,
|
|
longitude: null,
|
|
addressDetails: null,
|
|
},
|
|
rules: {
|
|
// todo
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
//地图上选择地址
|
|
selectAddr() {
|
|
// Position.getLocation(res => {
|
|
Position.selectAddress(0, 0, success => {
|
|
this.setAddress(success)
|
|
})
|
|
// })
|
|
},
|
|
|
|
|
|
//提取用户选择的地址信息复制给表单数据
|
|
setAddress(res) {
|
|
//经纬度信息
|
|
this.form.latitude = res.latitude
|
|
this.form.longitude = res.longitude
|
|
|
|
if (!res.address && res.name) { //用户直接选择城市的逻辑
|
|
return this.form.address = res.name
|
|
}
|
|
if (res.address || res.name) {
|
|
return this.form.address = res.address + res.name
|
|
}
|
|
this.form.address = '' //用户啥都没选就点击勾选
|
|
},
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
background-color: $uni-bg-color;
|
|
min-height: 100vh;
|
|
|
|
/deep/ .nav-bar__view {
|
|
background-image: linear-gradient(#84A73F, #D8FF8F);
|
|
}
|
|
}
|
|
|
|
.content {
|
|
padding: 28rpx 30rpx;
|
|
}
|
|
|
|
|
|
.form {
|
|
& + & {
|
|
margin-top: 44rpx;
|
|
}
|
|
|
|
&-title {
|
|
color: #000000;
|
|
font-size: 28rpx;
|
|
margin-bottom: 15rpx;
|
|
}
|
|
|
|
&-item {
|
|
padding-left: 8rpx;
|
|
|
|
& + & {
|
|
// margin-top: 20rpx;
|
|
border-top: 1rpx solid rgba($color: #C7C7C7, $alpha: 0.69);
|
|
}
|
|
|
|
&-content {
|
|
min-height: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
font-size: 28rpx;;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.upload {
|
|
padding: 37rpx 22rpx;
|
|
|
|
&-img {
|
|
width: 131rpx; height: 131rpx;
|
|
}
|
|
}
|
|
|
|
.address {
|
|
color: #000000;
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
justify-content: flex-end;
|
|
|
|
&-btn {
|
|
border: none;
|
|
padding: 7rpx 20rpx 7rpx 7rpx;
|
|
|
|
&-icon {
|
|
width: 30rpx;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.address-details {
|
|
padding: 0;
|
|
|
|
/deep/ .uv-form-item__body__left__content {
|
|
margin-top: 10rpx;
|
|
padding-left: 8rpx;
|
|
}
|
|
}
|
|
|
|
.tools {
|
|
padding: 0 56rpx;
|
|
margin-top: 126rpx;
|
|
}
|
|
|
|
.btn-submit {
|
|
padding: 29rpx 0;
|
|
border: none;
|
|
font-size: 36rpx;
|
|
border-radius: 45rpx;
|
|
color: $uni-text-color-inverse;
|
|
background-image: linear-gradient(to right, #84A73F, #D8FF8F);
|
|
}
|
|
|
|
</style>
|