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.
398 lines
9.1 KiB
398 lines
9.1 KiB
<template>
|
|
<view class="page">
|
|
<!-- 导航栏 -->
|
|
<navbar title="商家合作" leftClick @leftClick="$utils.navigateBack" color="#fff" />
|
|
|
|
<view v-if="['0', '2'].includes(status) && statusDesc" class="flex tips">
|
|
<uv-icon name="info-circle" color="#86A941" size="28rpx"></uv-icon>
|
|
<text style="margin-left: 3rpx;">{{ statusDesc }}</text>
|
|
</view>
|
|
|
|
<view class="content">
|
|
<view class="form">
|
|
<view class="form-title">门头照片</view>
|
|
<view class="card upload">
|
|
<formUpload v-model="form.image">
|
|
<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="shop">
|
|
<view class="form-item-content">
|
|
<formInput v-model="form.shop" 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="area">
|
|
<view class="form-item-content flex area">
|
|
<text>{{ form.area ? form.area : '请选择' }}</text>
|
|
<button plain class="btn area-btn" @click="selectAddr">
|
|
<image class="area-btn-icon" src="../static/cooperation/icon-arrow.png" mode="widthFix"></image>
|
|
</button>
|
|
</view>
|
|
</uv-form-item>
|
|
</view>
|
|
<view class="form-item address">
|
|
<uv-form-item label="详细地址" prop="address" labelPosition="top" >
|
|
<view style="margin-top: 22rpx;">
|
|
<formTextarea
|
|
v-model="form.address"
|
|
placeholder="请输入详细地址"
|
|
></formTextarea>
|
|
</view>
|
|
</uv-form-item>
|
|
</view>
|
|
</uv-form>
|
|
</view>
|
|
</view>
|
|
<view class="tools" v-if="status != '1'">
|
|
<button plain class="btn btn-submit" @click="onSubmit">提交</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
|
|
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 {
|
|
id: null,
|
|
status: null,
|
|
statusDesc: null,
|
|
form: {
|
|
image: null,
|
|
shop: null,
|
|
name: null,
|
|
phone: null,
|
|
area: null,
|
|
latitude: null,
|
|
longitude: null,
|
|
address: null,
|
|
},
|
|
rules: {
|
|
'image': {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请选择门头照片',
|
|
},
|
|
'shop': {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请输入店铺名称',
|
|
},
|
|
'name': {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请输入您的姓名',
|
|
},
|
|
'phone': {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请输入您的手机号',
|
|
},
|
|
'area': {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请选择所在地区',
|
|
},
|
|
'address': {
|
|
type: 'string',
|
|
required: true,
|
|
message: '请输入详细地址',
|
|
},
|
|
},
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['userInfo']),
|
|
},
|
|
onLoad() {
|
|
this.initData()
|
|
},
|
|
onPullDownRefresh() {
|
|
this.updateStatus()
|
|
},
|
|
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.area = res.name
|
|
}
|
|
if (res.address || res.name) {
|
|
return this.form.area = res.address + res.name
|
|
}
|
|
this.form.area = '' //用户啥都没选就点击勾选
|
|
},
|
|
async initData() {
|
|
|
|
try {
|
|
const shopList = (await this.$fetch('queryShopList', { userId: this.userInfo.id }))?.records
|
|
|
|
if (!shopList.length) {
|
|
return
|
|
}
|
|
|
|
const {
|
|
id,
|
|
status,
|
|
status_dictText,
|
|
image,
|
|
shop,
|
|
name,
|
|
phone,
|
|
area,
|
|
latitude,
|
|
longitude,
|
|
address,
|
|
} = shopList[0]
|
|
|
|
this.form = {
|
|
image,
|
|
shop,
|
|
name,
|
|
phone,
|
|
area,
|
|
latitude,
|
|
longitude,
|
|
address,
|
|
}
|
|
|
|
this.id = id
|
|
this.status = status
|
|
this.statusDesc = status_dictText
|
|
|
|
} catch (err) {
|
|
|
|
}
|
|
},
|
|
async updateStatus() {
|
|
if (!this.id) {
|
|
return
|
|
}
|
|
|
|
try {
|
|
const { status, status_dictText } = await this.$fetch('queryShopById', { id: this.id })
|
|
|
|
this.status = status
|
|
this.statusDesc = status_dictText
|
|
} catch (err) {
|
|
|
|
}
|
|
},
|
|
async onSubmit() {
|
|
try {
|
|
|
|
await this.$refs.form.validate()
|
|
|
|
const {
|
|
image,
|
|
shop,
|
|
name,
|
|
phone,
|
|
area,
|
|
latitude,
|
|
longitude,
|
|
address,
|
|
} = this.form
|
|
|
|
const params = {
|
|
image,
|
|
shop,
|
|
name,
|
|
phone,
|
|
area,
|
|
latitude,
|
|
longitude,
|
|
address,
|
|
}
|
|
|
|
let api = this.id ? 'updateShop' : 'addShop'
|
|
|
|
await this.$fetch(api, params)
|
|
|
|
uni.showToast({
|
|
title: '提交成功',
|
|
icon: 'none'
|
|
})
|
|
|
|
setTimeout(uni.navigateBack, 1000, -1)
|
|
|
|
} catch (err) {
|
|
|
|
}
|
|
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
background-color: $uni-bg-color;
|
|
min-height: 100vh;
|
|
|
|
/deep/ .nav-bar__view {
|
|
background-image: linear-gradient(#84A73F, #D8FF8F);
|
|
}
|
|
}
|
|
|
|
.tips {
|
|
padding: 5rpx 0;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: $uni-color;
|
|
background-color: rgba($color: #D8FF8F, $alpha: 0.3);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.area {
|
|
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 {
|
|
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>
|