325 lines
9.5 KiB
Vue
325 lines
9.5 KiB
Vue
<template>
|
|
<view class="apply-pages" v-if="isLoad">
|
|
<view class="fill-base mt-md">
|
|
<view class="flex-y-center pt-lg pl-lg">
|
|
<i class="iconfont icon-required c-warning"></i>
|
|
<view class="item-text">农场头像</view>
|
|
</view>
|
|
<view class="flex-between ml-lg mr-lg pb-sm b-1px-b">
|
|
<upload @upload="imgUpload" :imagelist="subForm.cover" imgtype="cover" text="添加封面" :imgsize="1">
|
|
</upload>
|
|
</view>
|
|
<view class="flex-between ml-lg mr-lg">
|
|
<view class="flex-y-center">
|
|
<i class="iconfont icon-required c-warning"></i>
|
|
<view class="item-text">农场名称</view>
|
|
</view>
|
|
<input v-model="subForm.title" type="text" class="item-input flex-1" maxlength="40"
|
|
placeholder-class="c-placeholder" :placeholder="rule[1].errorMsg" />
|
|
</view>
|
|
</view>
|
|
<view class="fill-base mt-md">
|
|
<view class="ml-lg mr-lg b-1px-b">
|
|
<view class="flex-y-center pt-lg pb-md">
|
|
<i class="iconfont icon-required c-warning"></i>
|
|
<view class="item-text">农场描述</view>
|
|
</view>
|
|
<textarea v-model="subForm.desc" type="text" class="item-textarea flex-1" maxlength="200"
|
|
placeholder-class="c-placeholder" :placeholder="rule[2].errorMsg"></textarea>
|
|
</view>
|
|
<view class="flex-y-center pt-lg pl-lg">
|
|
<i class="iconfont icon-required c-warning"></i>
|
|
<view class="item-text">农场详情图</view>
|
|
</view>
|
|
<view class="flex-between ml-lg mr-lg pb-lg">
|
|
<upload @upload="imgUpload" @del="imgUpload" :imagelist="subForm.imgs" imgtype="imgs" text="添加图片"
|
|
:imgsize="9">
|
|
</upload>
|
|
</view>
|
|
</view>
|
|
<view class="fill-base mt-md">
|
|
<view class="flex-between ml-lg mr-lg b-1px-b">
|
|
<view class="flex-y-center">
|
|
<i class="iconfont icon-required c-warning"></i>
|
|
<view class="item-text">联系电话</view>
|
|
</view>
|
|
<input v-model="subForm.mobile" type="text" class="item-input flex-1" placeholder-class="c-placeholder"
|
|
:placeholder="rule[4].errorMsg" />
|
|
</view>
|
|
<view class="flex-between ml-lg mr-lg b-1px-b">
|
|
<view class="flex-y-center">
|
|
<i class="iconfont icon-required c-warning"></i>
|
|
<view class="item-text">农场地址</view>
|
|
</view>
|
|
<view class="item-input text flex-1">
|
|
<view @tap.stop="toChooseLocation" class="flex-y-center">
|
|
<view class="flex-1" style="line-height: 1.2;"
|
|
:class="[{'c-placeholder':!subForm.address},{'c-title':subForm.address}]">
|
|
{{subForm.address || `点击右边图标设置`}}
|
|
</view><i class="iconfont icon-dingwei ml-sm" :style="{color:primaryColor}"></i>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-between ml-lg mr-lg b-1px-b">
|
|
<view class="flex-y-center">
|
|
<i class="iconfont icon-required c-warning"></i>
|
|
<view class="item-text">姓名</view>
|
|
</view>
|
|
<input v-model="subForm.user_name" type="text" class="item-input flex-1" maxlength="20"
|
|
placeholder-class="c-placeholder" :placeholder="rule[6].errorMsg" />
|
|
</view>
|
|
<view class="flex-between ml-lg mr-lg b-1px-b">
|
|
<view class="flex-y-center">
|
|
<i class="iconfont icon-required c-warning"></i>
|
|
<view class="item-text">手机号</view>
|
|
</view>
|
|
<input v-model="subForm.phone" type="text" class="item-input flex-1" placeholder-class="c-placeholder"
|
|
:placeholder="rule[7].errorMsg" />
|
|
</view>
|
|
<view class="flex-between ml-lg mr-lg">
|
|
<view class="flex-y-center">
|
|
<i class="iconfont icon-required c-warning"></i>
|
|
<view class="item-text">身份证号</view>
|
|
</view>
|
|
<input v-model="subForm.idcard_code" type="text" class="item-input flex-1"
|
|
placeholder-class="c-placeholder" :placeholder="rule[8].errorMsg" />
|
|
</view>
|
|
</view>
|
|
<view class="fill-base mt-md">
|
|
<view class="flex-y-center pt-lg pl-lg">
|
|
<i class="iconfont icon-required c-warning"></i>
|
|
<view class="item-text" style="width: 400rpx;">身份证正反面照片</view>
|
|
</view>
|
|
<view class="flex-between" style="width: 626rpx;margin: 0 auto;">
|
|
<upload @upload="imgUpload" :imagelist="subForm.idcard_imgs" imgtype="idcard_imgs" imgclass="md"
|
|
text="身份证正面照" :imgsize="1" bgimg="/static/image/farm/idcard.png"></upload>
|
|
<upload @upload="imgUpload" :imagelist="subForm.idcard_imgs_fan" imgtype="idcard_imgs_fan" imgclass="md"
|
|
text="身份证反面照" :imgsize="1" bgimg="/static/image/farm/idcard_fan.png"></upload>
|
|
</view>
|
|
<view class="flex-between pb-lg f-caption c-caption" style="width: 626rpx;margin: 0 auto;">
|
|
<view class="flex-center" style="width: 292rpx;">身份证正面照</view>
|
|
<view class="flex-center" style="width: 292rpx;">身份证反面照</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="space-max-footer"></view>
|
|
|
|
<auth :needAuth="userInfo && !userInfo.nickname" :must="true" @go="submit">
|
|
<fix-bottom-button :text="[{text:options.type==1?'保存':'提交申请',type:'confirm'}]" bgColor="#fff">
|
|
</fix-bottom-button>
|
|
</auth>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
mapActions,
|
|
mapMutations
|
|
} from "vuex"
|
|
export default {
|
|
data() {
|
|
return {
|
|
isLoad: false,
|
|
options: {},
|
|
subForm: {
|
|
id: 0,
|
|
cover: [], // 农场头像
|
|
title: '', //农场名称
|
|
desc: '', // 简介
|
|
imgs: [], // 详情
|
|
mobile: '', //联系电话
|
|
address: '', //农场地址
|
|
lng: '',
|
|
lat: '',
|
|
user_name: '', //用户名称
|
|
phone: '', //手机号
|
|
idcard_code: '', //身份证号
|
|
idcard_imgs: [], //身份证
|
|
idcard_imgs_fan: []
|
|
},
|
|
rule: [{
|
|
name: "cover",
|
|
checkType: "isNotNull",
|
|
errorMsg: "请上传农场头像"
|
|
}, {
|
|
name: "title",
|
|
checkType: "isNotNull",
|
|
errorMsg: "请输入您所拥有的农场名称",
|
|
regType: 2
|
|
}, {
|
|
name: "desc",
|
|
checkType: "isNotNull",
|
|
errorMsg: "请输入农场描述",
|
|
regType: 2
|
|
}, {
|
|
name: "imgs",
|
|
checkType: "isNotNull",
|
|
errorMsg: "请上传农场详情图"
|
|
},
|
|
{
|
|
name: "mobile",
|
|
checkType: "isAllPhone",
|
|
errorMsg: "请输入农场联系电话",
|
|
regText: "联系电话"
|
|
}, {
|
|
name: "address",
|
|
checkType: "isNotNull",
|
|
errorMsg: "请设置农场地址"
|
|
}, {
|
|
name: "user_name",
|
|
checkType: "isNotNull",
|
|
errorMsg: "请输入您的姓名",
|
|
regType: 2
|
|
},
|
|
{
|
|
name: "phone",
|
|
checkType: "isMobile",
|
|
errorMsg: "请输入您的手机号"
|
|
}, {
|
|
name: "idcard_code",
|
|
checkType: "isIdCard",
|
|
errorMsg: "请输入您的身份证号码"
|
|
},
|
|
{
|
|
name: "idcard_imgs",
|
|
checkType: "isNotNull",
|
|
errorMsg: "请上传身份证正面照"
|
|
},
|
|
{
|
|
name: "idcard_imgs_fan",
|
|
checkType: "isNotNull",
|
|
errorMsg: "请上传身份证反面照"
|
|
}
|
|
],
|
|
lockTap: false
|
|
}
|
|
},
|
|
computed: mapState({
|
|
primaryColor: state => state.config.configInfo.primaryColor,
|
|
subColor: state => state.config.configInfo.subColor,
|
|
}),
|
|
async onLoad(options) {
|
|
let {
|
|
type = 0
|
|
} = options
|
|
this.options = options
|
|
uni.setNavigationBarTitle({
|
|
title: type == 1 ? `农场管理` : `申请农场主`
|
|
})
|
|
await this.initIndex()
|
|
this.isLoad = true
|
|
},
|
|
methods: {
|
|
...mapActions(['getUserInfo']),
|
|
...mapMutations(['updateUserItem']),
|
|
async initIndex() {
|
|
let data = await this.$api.farmer.farmerInfo()
|
|
if (!data.id) return
|
|
data.cover = [{
|
|
path: data.cover
|
|
}]
|
|
let arr = ['imgs', 'idcard_imgs']
|
|
arr.map(item => {
|
|
data[item] = data[item].map(aitem => {
|
|
return {
|
|
path: aitem
|
|
}
|
|
})
|
|
})
|
|
data.idcard_imgs_fan = [data.idcard_imgs[1]]
|
|
data.idcard_imgs.splice(1, 2)
|
|
for (let key in this.subForm) {
|
|
this.subForm[key] = data[key]
|
|
}
|
|
},
|
|
imgUpload(e) {
|
|
let {
|
|
imagelist,
|
|
imgtype
|
|
} = e;
|
|
this.subForm[imgtype] = imagelist;
|
|
},
|
|
// 选择地区
|
|
async toChooseLocation(e) {
|
|
await this.$util.checkAuth({
|
|
type: 'userLocation'
|
|
})
|
|
let [, {
|
|
address = '',
|
|
longitude,
|
|
latitude
|
|
} = {}] = await uni.chooseLocation();
|
|
if (!address) return
|
|
this.subForm.address = address
|
|
this.subForm.lng = longitude
|
|
this.subForm.lat = latitude
|
|
},
|
|
//表单验证
|
|
validate(param) {
|
|
let validate = new this.$util.Validate();
|
|
this.rule.map(item => {
|
|
let {
|
|
name,
|
|
} = item
|
|
validate.add(param[name], item);
|
|
})
|
|
let message = validate.start();
|
|
console.log(message, "message");
|
|
return message;
|
|
},
|
|
async submit() {
|
|
let param = this.$util.deepCopy(this.subForm)
|
|
let arr = ['cover', 'idcard_imgs', 'idcard_imgs_fan']
|
|
arr.map(item => {
|
|
param[item] = param[item].length > 0 ? param[item][0].path : ''
|
|
})
|
|
let msg = this.validate(param);
|
|
if (msg) {
|
|
this.$util.showToast({
|
|
title: msg
|
|
})
|
|
return
|
|
}
|
|
param.imgs = param.imgs.map(item => {
|
|
return item.path
|
|
})
|
|
param.idcard_imgs = [param.idcard_imgs, param.idcard_imgs_fan]
|
|
delete param.idcard_imgs_fan
|
|
if (this.lockTap) return
|
|
this.lockTap = true
|
|
this.$util.showLoading()
|
|
let {
|
|
type = 0
|
|
} = this.options
|
|
let methodModel = type == 1 ? 'farmerUpdate' : 'applyFarmer'
|
|
try {
|
|
await this.$api.farmer[methodModel](param)
|
|
this.$util.hideAll()
|
|
this.$util.showToast({
|
|
title: type == 1 ? `修改成功` : `提交成功`
|
|
});
|
|
setTimeout(() => {
|
|
this.$util.back()
|
|
this.$util.goUrl({
|
|
url: 1,
|
|
openType: `navigateBack`
|
|
})
|
|
}, 1000)
|
|
} catch (e) {
|
|
setTimeout(() => {
|
|
this.lockTap = false
|
|
this.$util.hideAll()
|
|
}, 2000)
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
</style>
|