Skip to content

Z
zhichan
Commit 524771f0 by 尹亚亭
Options

modify selftmreg

parent 1b5ef243
Showing with 545 additions and 92 deletions
channel-access/src/views/pages/selftmreg/ApplicationInfo.vue
<template>
<div class="infomation">
<i class="selfmreg_shuxian"></i>
<!-- <span>填写申请人信息</span> -->
<!-- 申请人信息 -->
<div class="info-title">
<i class="selftmreg_shuxian"></i>
<h4>填写申请人信息</h4>
</div>
<div class="applicantInfo">
<el-form
:model="ruleForm"
......@@ -17,106 +20,441 @@
<el-radio :label="2" border>个体户</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="公司名称：" prop="name">
<el-input v-model="ruleForm.name"></el-input>
<div v-if="ruleForm.resource == 1">
<el-form-item label="公司名称：" prop="name">
<el-input v-model="ruleForm.name" placeholder="请输入公司名称"></el-input>
</el-form-item>
<el-form-item label="统一社会信用代码：" prop="xinyongma">
<el-input v-model="ruleForm.xinyongma" placeholder="请输入统一社会信用代码"></el-input>
<el-popover
placement="right-end"
width="170"
trigger="hover"
content="由于官方商标注册增加“统一社会信用代码”的填写，企业申请必填，个体工商户申请可不填此项，请仔细核对营业执照填写。"
>
<el-button class="el-icon-question" slot="reference"></el-button>
</el-popover>
</el-form-item>
<el-form-item label="执照详细地址：" prop="address">
<el-input v-model="ruleForm.address" placeholder="请输入执照详细地址"></el-input>
</el-form-item>
<el-form-item label="邮政编码：" prop="postal">
<el-input v-model="ruleForm.postal" placeholder="请输入邮政编码" :maxlength="6"></el-input>
</el-form-item>
</div>
<div v-if="ruleForm.resource == 2">
<el-form-item label="姓名：" prop="name">
<el-input v-model="ruleForm.username" placeholder="请输入您的姓名"></el-input>
</el-form-item>
<el-form-item label="身份证号：" prop="name">
<el-input v-model="ruleForm.idCard" placeholder="请输入您的身份证号"></el-input>
</el-form-item>
<el-form-item label="注册地址：" prop="name">
<el-input v-model="ruleForm.idCard" placeholder="请输入注册地址"></el-input>
</el-form-item>
<el-form-item label="统一社会信用代码：" prop="xinyongma">
<el-input v-model="ruleForm.xinyongma" placeholder="请输入统一社会信用代码"></el-input>
<el-popover
placement="right-end"
width="170"
trigger="hover"
content="由于官方商标注册增加“统一社会信用代码”的填写，企业申请必填，个体工商户申请可不填此项，请仔细核对营业执照填写。"
>
<el-button class="el-icon-question" slot="reference"></el-button>
</el-popover>
</el-form-item>
<el-form-item label="邮政编码：" prop="postal">
<el-input v-model="ruleForm.postal" placeholder="请输入邮政编码" :maxlength="6"></el-input>
</el-form-item>
</div>
</el-form>
</div>
<!-- 订单联系人 -->
<div class="info-title">
<i class="selftmreg_shuxian"></i>
<h4>订单联系人</h4>
</div>
<div class="orderContact">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="110px"
class="demo-ruleForm"
label-position="left"
>
<el-form-item label="客户联系人：" prop="contanct">
<el-input v-model="ruleForm.contanct" placeholder="请输入联系人"></el-input>
</el-form-item>
<el-form-item label="统一社会信用代码：" prop="name">
<el-input v-model="ruleForm.name"></el-input>
<el-form-item label="联系电话：" prop="phone">
<el-input v-model="ruleForm.phone" placeholder="请输入联系电话"></el-input>
</el-form-item>
<el-form-item label="执照详细地址：" prop="name">
<el-input v-model="ruleForm.name"></el-input>
<el-form-item label="电子邮箱：" prop="email">
<el-input v-model="ruleForm.email" placeholder="请输入电子邮箱"></el-input>
</el-form-item>
<el-form-item label="邮政编码：" prop="name">
<el-input v-model="ruleForm.name"></el-input>
<el-form-item label="座机：">
<el-input v-model="ruleForm.tel" placeholder="区号座机号码"></el-input>
</el-form-item>
<el-form-item label="传真：">
<el-input v-model="ruleForm.faxNumber" placeholder="请输入传真号" :maxlength="6"></el-input>
</el-form-item>
</el-form>
</div>
<!-- 资料上传 -->
<div class="info-title">
<i class="selftmreg_shuxian"></i>
<h4>
资料上传
<span>（可跳过进行下一步，支付完成后，在订单中上传即可）</span>
</h4>
</div>
<div class="jdindentlist-drawerDetail">
<!-- -->
<div class="from-main">
<div class="from-items">
<div class="from-item-title">
<span>*</span>上传材料：营业执照
</div>
<div class="upload-box">
<!-- 1 -->
</div>
<div class="upload-box-next">
<img src="@/assets/imgs/sbzc/yyzz1.png" alt />
<div class="chakan" @click="lookImage(1)">查看大图</div>
</div>
</div>
<div class="from-items">
<div class="from-item-title">
<p>
<span>*</span>上传材料：代理委托书
</p>
<a
href="http://gsb-zc.oss-cn-beijing.aliyuncs.com/igirl_channel_tmwtsdemo001.doc"
>下载委托书模板</a>
</div>
<div class="upload-box">
<!-- 2 -->
</div>
<div class="upload-box-next">
<img src="@/assets/imgs/sbzc/wts1.png" alt />
<div class="chakan" @click="lookImage(2)">查看大图</div>
</div>
</div>
<div class="from-items">
<div class="from-item-title">
<p>上传材料：优先权证明</p>
<a
href="http://gsb-zc.oss-cn-beijing.aliyuncs.com/yzq_201908281849646526xujnsedjnqwdoni.doc"
>下载优先权证明</a>
</div>
<div class="upload-box">
<!-- 3 -->
</div>
<div class="upload-box-next">
<img src="@/assets/imgs/sbzc/yxq.png" alt />
<div class="chakan" @click="lookImage(3)">查看大图</div>
</div>
</div>
</div>
<!-- dialog -->
<el-dialog
style="z-index:99999;background:rgba(0,0,0,.3)"
title
:visible.sync="toViewImgType"
center
width="72%"
append-to-body
>
<img :src="toViewImgSrc" style="max-width:100%;display:block;margin: 0 auto;" alt />
</el-dialog>
</div>
</div>
</template>
<script>
import imgUrl1 from "@/assets/imgs/sbzc/yyzzD.png";
import imgUrl2 from "@/assets/imgs/sbzc/wtsD.png";
import imgUrl3 from "@/assets/imgs/sbzc/yxqD.png";
export default {
data() {
return {
// 申请人信息表格 及 验证
ruleForm: {
name: "",
region: "",
date1: "",
date2: "",
delivery: false,
type: [],
resource: 1,
desc: ""
xinyongma: "",
address: "",
postal: "",
username: "",
idCard: "",
zhuAddress: ""
},
rules: {
name: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
resource: [
{ required: true, message: "请选择申请人类型", trigger: "change" }
],
region: [
{ required: true, message: "请选择活动区域", trigger: "change" }
name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
xinyongma: [
{ required: true, message: "请输入统一社会信用代码", trigger: "blur" }
],
date1: [
{
type: "date",
required: true,
message: "请选择日期",
trigger: "change"
}
address: [
{ required: true, message: "请输入执照详细地址", trigger: "blur" }
],
date2: [
{
type: "date",
required: true,
message: "请选择时间",
trigger: "change"
}
postal: [{ required: true, message: "请输入邮政编码", trigger: "blur" }]
},
// 订单联系人表格信息 及验证
ruleForm: {
contanct: "",
phone: "",
email: "",
tel: "",
faxNumber: ""
},
rules: {
contanct: [
{ required: true, message: "请输入联系人", trigger: "blur" }
],
type: [
phone: [
{ required: true, message: "请输入统一社会信用代码", trigger: "blur" }
],
email: [
{ required: true, message: "请输入邮箱地址", trigger: "blur" },
{
type: "array",
required: true,
message: "请至少选择一个活动性质",
trigger: "change"
type: "email",
message: "请输入正确的邮箱地址",
trigger: ["blur", "change"]
}
],
resource: [
{ required: true, message: "请选择活动资源", trigger: "change" }
],
desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
}
]
},
// 资料上传
chakanKey: null,
toViewImgType: false,
toViewImgSrc: ""
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
// 资料上传
enter(index) {
this.chakanKey = index;
},
resetForm(formName) {
this.$refs[formName].resetFields();
lookImage(index) {
console.log(123123);
this.toViewImgType = true;
switch (index) {
case 1:
this.toViewImgSrc = imgUrl1;
break;
case 2:
this.toViewImgSrc = imgUrl2;
break;
case 3:
this.toViewImgSrc = imgUrl3;
break;
}
}
}
};
</script>
<style lang="scss">
.selftmreg_shuxian {
width: 3px;
height: 15px;
background-color: #0989c5;
display: inherit;
float: left;
margin-top: 4px;
margin-right: 10px;
.info-title {
.selftmreg_shuxian {
width: 3px;
height: 15px;
background-color: #0989c5;
display: inherit;
float: left;
margin-top: 4px;
margin-right: 10px;
}
h4 {
font-size: 16px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(83, 83, 83, 1);
margin-bottom: 15px;
span {
margin-left: 35px;
font-size: 14px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(99, 101, 105, 1);
}
}
}
/* 申请人信息 */
.applicantInfo {
width: 100%;
.el-radio {
height: auto;
padding: 7px 28px;
border-radius: 0px;
border: 1px solid #dee0eb;
.el-radio__label {
padding: 0;
font-family: PingFangSC-Regular;
font-size: 12px;
color: #333333;
}
}
.el-radio__input {
display: none;
}
.el-form-item {
.el-button {
border: none;
width: 12px;
height: 12px;
border-radius: 100%;
font-size: 12px;
padding: 0;
color: #3071fe;
line-height: 10px;
text-align: left;
margin-left: 10px;
}
}
.el-input {
width: 350px;
height: 40px;
input {
width: 350px;
height: 40px;
border-radius: 0px;
}
}
}
/* 订单联系人 */
.orderContact {
width: 100%;
.el-radio {
height: auto;
padding: 7px 28px;
border-radius: 0px;
border: 1px solid #dee0eb;
.el-radio__label {
padding: 0;
font-family: PingFangSC-Regular;
font-size: 12px;
color: #333333;
}
}
.el-radio__input {
display: none;
}
.el-form-item {
.el-button {
border: none;
width: 12px;
height: 12px;
border-radius: 100%;
font-size: 12px;
padding: 0;
color: #3071fe;
line-height: 10px;
text-align: left;
margin-left: 10px;
}
}
.el-input {
width: 350px;
height: 40px;
input {
width: 350px;
height: 40px;
border-radius: 0px;
}
}
}
/* 资料上传 */
.jdindentlist-drawerDetail {
.from-main {
width: 100%;
}
}
.drawer-bottom {
width: 100%;
padding: 10px 20px 20px;
position: absolute;
bottom: 0px;
left: 0;
border-top: 1px solid #dee0eb;
button {
padding: 6px 28px;
border-radius: 100px;
border: none;
font-family: PingFangSC-Regular;
font-size: 12px;
margin-right: 10px;
}
.esc {
background: #e7eaf3;
color: #777777;
}
.enter {
background: #3071fe;
color: #ffffff;
}
}
.from-items {
width: 100%;
height: 120px;
display: flex;
margin-top: 20px;
.from-item-title {
width: 160px;
font-size: 14px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(99, 101, 105, 1);
span {
color: #f00;
}
a {
color: #0f8ee9;
font-size: 13px;
cursor: pointer;
line-height: 0px;
border-bottom: 1px solid #0f8ee9;
height: 5px;
margin-left: 50px;
}
}
.upload-box {
width: 98px;
height: 100%;
cursor: pointer;
position: relative;
border: 3px dashed #ccc;
margin-left: 20px;
}
.upload-box-next {
width: 98px;
height: 100%;
cursor: pointer;
position: relative;
border: 3px dashed #ccc;
margin-left: 20px;
img {
width: 100%;
height: 100%;
}
.chakan {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
display: none;
color: #fff;
}
}
.upload-box-next:hover > .chakan {
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
channel-access/src/views/pages/selftmreg/ConfirmOrder.vue 0 → 100644
<template>
<div class="confirm">
<div class="info-title">
<i class="selftmreg_shuxian"></i>
<h4>
商标信息
<span class="edit">
<i class="el-icon-edit"></i>
<b>编辑</b>
</span>
</h4>
</div>
<div class="brand-info">
<p>
<strong>商标类型：</strong>
<span>文字图标</span>
</p>
<p>
<strong>商标名称：</strong>
<span>gongsibao</span>
</p>
<p>
<strong>商标图样：</strong>
<img src="http://temp.im/104x104/ff5a5f/fff" alt />
</p>
<p>
<strong>商标类别：</strong>
<span>
<i>15 类 乐器</i>
150001 手风琴150008 钢琴150011 小六角手风琴150012 手摇风琴150013 低音提琴（乐器）150014 口琴150016 大号（号）150019 小铃帽（乐器）150025 乐器150026 六角手风琴
</span>
</p>
</div>
<div class="info-title">
<i class="selftmreg_shuxian"></i>
<h4>
申请人及联系人信息
<span class="edit">
<i class="el-icon-edit"></i>
<b>编辑</b>
</span>
</h4>
</div>
<div class="user-info">
<ul>
<li>
<strong>申请人类型：</strong>
<span>企业</span>
</li>
<li>
<strong>公司名称：</strong>
<span>company name</span>
</li>
<li>
<strong>邮政编码：</strong>
<span>463800</span>
</li>
<li>
<strong>公司地址：</strong>
<span>company address</span>
</li>
<li>
<strong>联系人：</strong>
<span>reqr</span>
</li>
<li>
<strong>联系电话：</strong>
<span>13525897326</span>
</li>
<li>
<strong>电子邮箱：</strong>
<span>12e3r@qq.com</span>
</li>
<li>
<strong>信用编码：</strong>
<span>91110000551350971K</span>
</li>
</ul>
</div>
<div class="info-title">
<i class="selftmreg_shuxian"></i>
<h4>订单备注</h4>
</div>
<!-- 文本域 -->
<el-input type="textarea" :rows="2" placeholder="如有特殊需要，请填写订单备注" v-model="textarea"></el-input>
</div>
</template>
<script>
export default {
data() {
return {
textarea: ""
};
}
};
</script>
<style lang="scss" scoped>
.info-title {
.selftmreg_shuxian {
width: 3px;
height: 15px;
background-color: #0989c5;
display: inherit;
float: left;
margin-top: 4px;
margin-right: 10px;
}
h4 {
font-size: 16px;
font-family: PingFangSC;
font-weight: 400;
color: rgba(83, 83, 83, 1);
margin-bottom: 15px;
}
}
.edit {
color: #3071fe;
}
</style>
\ No newline at end of file
channel-access/src/views/pages/selftmreg/PayOrder.vue 0 → 100644
<template>
<div>支付订单页面</div>
</template>
\ No newline at end of file
channel-access/src/views/pages/selftmreg/SelftmregPage.vue
......@@ -9,16 +9,22 @@
<div class="selftmreg_main">
<div class="selftmreg_shu"></div>
<!-- Divider 分割线 -->
<!-- <el-divider></el-divider> -->
<!-- 第一步：填写基本信息 商标信息 -->
<!-- <ModifyTrademark /> -->
<!-- 第一步：填写基本信息 分类选择 -->
<!-- <ClassTrademark /> -->
<!-- 第二步：填写申请人信息 -->
<ApplicationInfo />
<!-- <ApplicationInfo /> -->
<!-- 第三步：确认订单 -->
<!-- <SelftmregPageConfirmStep /> -->
<ConfirmOrder />
<!-- 第四步：支付订单页面 -->
<!-- <PayOrder /> -->
</div>
<div style="clear:both;"></div>
......@@ -32,7 +38,8 @@ import SelftmregPageSteps from "./SelftmregPageSteps";
import ModifyTrademark from "./ModifyTrademark";
import ClassTrademark from "../jdindentdetail/classTrademark";
import ApplicationInfo from "./ApplicationInfo";
import SelftmregPageConfirmStep from "./SelftmregPageConfirmStep";
import ConfirmOrder from "./ConfirmOrder";
import PayOrder from "./PayOrder";
export default {
components: {
......@@ -40,7 +47,8 @@ export default {
ModifyTrademark,
ClassTrademark,
ApplicationInfo,
SelftmregPageConfirmStep
ConfirmOrder,
PayOrder
},
data() {
return {};
......@@ -64,7 +72,7 @@ export default {
/* 主页内容 */
.selftmreg_main {
width: 100%;
padding: 0px 20px;
padding: 0px 20px 50px;
box-sizing: border-box;
overflow: hidden;
}
......
channel-access/src/views/pages/selftmreg/SelftmregPageConfirmStep.vue deleted 100644 → 0
<template>
<div class="confirm">
<i class="selftmreg_shuxian"></i>
</div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.selftmreg_shuxian {
width: 3px;
height: 15px;
background-color: #0989c5;
display: inherit;
float: left;
margin-top: 4px;
margin-right: 10px;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment