334 lines
8.4 KiB
Vue
334 lines
8.4 KiB
Vue
<template>
|
||
<view style="padding: 10px">
|
||
<u-form :model="form" ref="uForm" :rules="rules">
|
||
<u-form-item label="姓名"
|
||
><u-input v-model="form.name" placeholder="请输入您真实姓名"
|
||
/></u-form-item>
|
||
<u-form-item label="性别">
|
||
<u-radio-group v-model="form.sex" style="margin-left: 30px">
|
||
<u-radio
|
||
v-for="(item, index) in radioList"
|
||
:key="index"
|
||
:name="item.value"
|
||
:value="item.value"
|
||
:disabled="item.disabled"
|
||
>
|
||
{{ item.name }}
|
||
</u-radio>
|
||
</u-radio-group>
|
||
</u-form-item>
|
||
<u-form-item label="联系方式"
|
||
><u-input v-model="form.contact" placeholder="请输入"
|
||
/></u-form-item>
|
||
<u-form-item label="店铺地址"
|
||
><u-input v-model="form.residenceAddress" placeholder="请输入"
|
||
/></u-form-item>
|
||
<u-form-item label="营业执照">
|
||
<u-upload
|
||
:action="action"
|
||
:header="{ accessToken: storage.getAccessToken() }"
|
||
max-count="1"
|
||
style="margin-left: 30px"
|
||
@on-uploaded="onUploaded"
|
||
></u-upload>
|
||
<!-- <u-input v-model="form.businessLicense" placeholder="请输入"/> -->
|
||
</u-form-item>
|
||
|
||
<u-form-item label="证件类别"
|
||
><u-input v-model="idType" type="select" @click="show = true" />
|
||
<u-action-sheet
|
||
:list="actionSheetList"
|
||
v-model="show"
|
||
@click="actionSheetCallback"
|
||
></u-action-sheet>
|
||
</u-form-item>
|
||
|
||
<u-form-item label="证件照片">
|
||
<u-upload
|
||
:header="{ accessToken: storage.getAccessToken() }"
|
||
max-count="2"
|
||
:action="action"
|
||
@on-uploaded="onUploadedtwo"
|
||
style="margin-left: 30px"
|
||
></u-upload>
|
||
</u-form-item>
|
||
<u-form-item label="证件有效期" right-icon="arrow-right">
|
||
<u-input
|
||
v-model="form.idExpiryDate"
|
||
placeholder="请输入"
|
||
@click="showtime = true"
|
||
/>
|
||
<u-calendar
|
||
v-model="showtime"
|
||
mode="date"
|
||
@change="changetime"
|
||
max-date="30000"
|
||
></u-calendar>
|
||
</u-form-item>
|
||
<u-form-item label="经营范围">
|
||
<u-checkbox-group
|
||
@change="checkboxGroupChange"
|
||
style="margin-left: 30px"
|
||
>
|
||
<u-checkbox
|
||
v-model="item.checked"
|
||
v-for="(item, index) in cateList"
|
||
:key="index"
|
||
:name="item.id"
|
||
>{{ item.name }}</u-checkbox
|
||
>
|
||
</u-checkbox-group>
|
||
</u-form-item>
|
||
</u-form>
|
||
<button @click="consub" :style="{ background: '#FE3C3C' }"
|
||
class="bunem">提交</button>
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import storage from "@/utils/storage.js";
|
||
import { upload } from "@/api/common.js";
|
||
import { getCategoryList, getMon } from "@/api/goods.js";
|
||
export default {
|
||
data() {
|
||
return {
|
||
action: upload,
|
||
storage: storage,
|
||
form: {
|
||
name: "",
|
||
sex: "",
|
||
contact: "",
|
||
residenceAddress: "",
|
||
businessLicense: "",
|
||
idType: "",
|
||
idPhoto: [],
|
||
idExpiryDate: "",
|
||
businessAddress: "",
|
||
businessScope: "",
|
||
},
|
||
rules: {
|
||
name: [
|
||
{
|
||
required: true,
|
||
message: "姓名不能为空",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
sex: [
|
||
{
|
||
required: true,
|
||
message: "性别不能为空",
|
||
trigger: "change",
|
||
},
|
||
],
|
||
contact: [
|
||
{
|
||
required: true,
|
||
message: "联系方式不能为空",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
residenceAddress: [
|
||
{
|
||
required: true,
|
||
message: "居住地址不能为空",
|
||
trigger: "blur",
|
||
},
|
||
],
|
||
businessLicense: [
|
||
{
|
||
required: true,
|
||
message: "营业执照不能为空",
|
||
trigger: "change",
|
||
},
|
||
],
|
||
idType: [
|
||
{
|
||
required: true,
|
||
message: "证件类别不能为空",
|
||
trigger: "change",
|
||
},
|
||
],
|
||
idPhoto: [
|
||
{
|
||
required: true,
|
||
message: "证件照片不能为空",
|
||
trigger: "change",
|
||
},
|
||
],
|
||
idExpiryDate: [
|
||
{
|
||
required: true,
|
||
message: "证件有效期不能为空",
|
||
trigger: "change",
|
||
},
|
||
],
|
||
businessAddress: [
|
||
{
|
||
required: true,
|
||
message: "经营范围不能为空",
|
||
trigger: "change",
|
||
},
|
||
],
|
||
},
|
||
idType: "",
|
||
radioList: [
|
||
{
|
||
name: "男",
|
||
disabled: false,
|
||
value: "MALE",
|
||
},
|
||
{
|
||
name: "女",
|
||
disabled: false,
|
||
value: "FEMALE",
|
||
},
|
||
],
|
||
showtime: false, // 控制u-calendar的显示与隐藏
|
||
show: false, // 控制actionSheet的显示与隐藏--证件
|
||
// 证件
|
||
actionSheetList: [
|
||
{
|
||
text: "身份证",
|
||
value: "ID",
|
||
},
|
||
{
|
||
text: "护照",
|
||
value: "PASSPORT",
|
||
},
|
||
{
|
||
text: "其他",
|
||
value: "OTHER",
|
||
},
|
||
],
|
||
radio: "",
|
||
switchVal: false,
|
||
cateList: [],
|
||
};
|
||
},
|
||
|
||
onLoad() {
|
||
// 页面加载时可以初始化数据
|
||
},
|
||
onShow() {
|
||
// 页面显示时可以执行一些操作
|
||
},
|
||
mounted() {
|
||
this.getCategoryList(); // 调用获取分类列表的方法
|
||
},
|
||
methods: {
|
||
//点击actionSheet回调--证件
|
||
actionSheetCallback(index) {
|
||
this.form.idType = this.actionSheetList[index].value;
|
||
this.idType = this.actionSheetList[index].text;
|
||
},
|
||
consub() {
|
||
const {
|
||
name,
|
||
sex,
|
||
contact,
|
||
residenceAddress,
|
||
businessLicense,
|
||
idType,
|
||
idPhoto,
|
||
idExpiryDate,
|
||
businessAddress,
|
||
businessScope,
|
||
} = this.form;
|
||
if (
|
||
name == "" ||
|
||
sex == "" ||
|
||
contact == "" ||
|
||
residenceAddress == "" ||
|
||
businessLicense.length == 0 ||
|
||
idType == "" ||
|
||
idPhoto.length == 0 ||
|
||
idExpiryDate == "" ||
|
||
businessScope.length == 0
|
||
) {
|
||
this.$refs.uToast.show({
|
||
title: "不能为空",
|
||
type: "error",
|
||
});
|
||
} else {
|
||
this.form.businessAddress = this.form.residenceAddress;
|
||
getMon(this.form).then((res) => {
|
||
if (res.data.code == 200) {
|
||
this.$refs.uToast.show({
|
||
title: "提交成功",
|
||
type: "success",
|
||
});
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: "/pages/tabbar/user/my",
|
||
});
|
||
}, 1000);
|
||
}
|
||
});
|
||
}
|
||
},
|
||
onUploaded(lists) {
|
||
console.log(lists); // 打印上传成功后的文件列表
|
||
lists.forEach((item) => {
|
||
this.form.businessLicense = item.response.result;
|
||
});
|
||
},
|
||
onUploadedtwo(lists) {
|
||
let images = [];
|
||
lists.forEach((item) => {
|
||
images.push(item.response.result);
|
||
});
|
||
this.form.idPhoto = images;
|
||
},
|
||
changetime(value) {
|
||
console.log(value); // 打印选择的日期
|
||
this.form.idExpiryDate = value.result; // 将选择的日期赋值给form.idExpiryDate
|
||
},
|
||
// 选中某个复选框时，由checkbox时触发
|
||
checkboxChange(e) {
|
||
console.log(e, "[====]");
|
||
},
|
||
// 选中任一checkbox时，由checkbox-group触发
|
||
checkboxGroupChange(e) {
|
||
this.form.businessScope = e;
|
||
},
|
||
|
||
getCategoryList() {
|
||
getCategoryList(0).then((res) => {
|
||
res.data.result.forEach((item) => {
|
||
item.checked = false; // 初始化每个项目的checked属性为false
|
||
});
|
||
this.cateList = res.data.result;
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep {
|
||
.u-form-item--left__content {
|
||
width: 100px;
|
||
white-space: nowrap;
|
||
}
|
||
.u-input {
|
||
margin-left: 30px; // 可根据实际情况调整这个值
|
||
}
|
||
.u-checkbox__icon-wrap--checked{
|
||
border-color: #fe3c3c !important;
|
||
background-color: #fe3c3c !important;
|
||
}
|
||
}
|
||
.bunem {
|
||
width: 309px;
|
||
margin-top: 20px;
|
||
height: 41px;
|
||
font-size: 15px;
|
||
line-height: 41px;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
margin-bottom: 35px;
|
||
}
|
||
</style>
|