Commit 5d0717b8 by 刘泽奇

123

parent d9dda6e1
This source diff could not be displayed because it is too large. You can view the blob instead.
.nowbuy {
margin: 0 auto;
width: 1200px;
}
.nowbuy-nav {
height: 60px;
box-sizing: border-box;
padding: 21px 0;
}
.nowbuy-main {
padding-left: 54px;
width: 1203px;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(214, 214, 214, 1);
}
.nowbuy-title>div {
border-left: 5px solid #1EAFFF;
padding-left: 12px;
font-size: 18px;
margin: 20px 0;
}
.nowbuy-title>div>span {
color: #1EAFFF;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgba(30, 175, 255, 1);
}
/* .nowbuy-tips {
height: 40px;
line-height: 40px;
padding-left: 25px;
width: 1095px;
background: rgba(243, 250, 254, 1);
border: 1px solid rgba(102, 201, 255, 1);
} */
.nowbuy-form {
width: 35%;
}
.nowbuy .el-form-item__label {
text-align: right;
}
.nowbuy-footer-warpper{
border-top:1px solid #C1C1C1;
height: 170px;
padding-top: 17px;
box-sizing: border-box;
}
.nowbuy-footer {
box-sizing: border-box;
padding-left: 54px;
width: 1200px;
margin: 0 auto;
}
.nowbuy-footer>div {
display: inline-block;
}
.nowbuy-footer>span {
color: #f54a07;
}
.nowbuy-footer-img {
display: inline-block;
vertical-align: middle;
width: 26px;
height: 26px;
margin-left: 278px;
margin-bottom: 3px;
cursor: pointer;
margin-right: 15px;
}
.nowbuy-footer-img>img {
width: 100%;
height: 100%;
}
.nowbuy-footer>div>button {
margin-left: 80px;
}
.nowbuy .nowbuy-tableheader {
background: #F3F3F3;
font-size:14px;
font-family:Microsoft YaHei;
font-weight:400;
color:rgba(34,34,34,1);
}
.nowbuy .el-table th,
.el-table tr {
background: none;
}
\ No newline at end of file
<div class="nowbuy">
<div class="nowbuy-nav">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: \'/\' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: \'/\' }">担保商标注册</el-breadcrumb-item>
<el-breadcrumb-item>下单</el-breadcrumb-item>
</el-breadcrumb>
<div class="nowbuy-warpper">
<div class="nowbuy">
<div class="nowbuy-nav">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: \'/\' }">首页</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: \'/\' }">担保商标注册</el-breadcrumb-item>
<el-breadcrumb-item>下单</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="nowbuy-main">
<div class="nowbuy-title">
<div>
购买服务
</div>
</div>
<div>
<el-table :data="tableData" header-row-class-name="nowbuy-tableheader" style="width: 100%">
<el-table-column prop="itemTypeName" label="服务名称" width="180">
</el-table-column>
<el-table-column prop="num" label="购买数量" width="180">
</el-table-column>
<el-table-column prop="countPrice" label="总金额(元)">
</el-table-column>
</el-table>
</div>
<div class="nowbuy-title">
<div>
订单联系人
<span style="margin-left:23px;"><i class="el-icon-warning"></i>
订单支付后,平台专业商标顾问会与您沟通商标注册需求,请保持电话畅通!</span>
</div>
</div>
<div class="nowbuy-form">
<div style="margin: 20px;"></div>
<el-form label-width="100px" :model="apply" :rules="applyRules" ref="apply">
<el-form-item label="姓名:" prop="contacts">
<el-input v-model="apply.contacts"></el-input>
</el-form-item>
<el-form-item label="电话:" prop="mobile">
<el-input v-model="apply.mobile"></el-input>
</el-form-item>
<el-form-item label="邮箱:">
<el-input v-model="apply.email"></el-input>
</el-form-item>
<el-form-item label="备注:">
<el-input type="textarea" v-model="apply.notes"></el-input>
</el-form-item>
</el-form>
</div>
</div>
</div>
<div class="nowbuy-title">
<div class="nowbuy-footer-warpper">
<div class="nowbuy-footer">
订单金额: <span>¥{{tableData[0] ? tableData[0].countPrice:\'-\' }}</span>
<div>
<div class="nowbuy-footer-img" @click="checkImg = !checkImg">
<img :src="checkImg?\'/imgs/nowbuy/xuanzhong2.png\':\'/imgs/nowbuy/xuanzhong.png\'" alt="">
</div>
<span style="font-size: 20px;color:#999999; ">
我已阅读 <span style="color:#1EAFFF;">《京东云商标服务合同》</span> ,且同意该合同内容
</span>
<el-button type="primary" @click="goOrder()" :disabled="!checkImg">去支付</el-button>
</div>
</div>
</div>
</div>
\ No newline at end of file
{
template: '${tmpl}',
data: function() {
var name = (rule, value, callback) => {
console.log(rule, value, callback);
if (value == '') {
callback(new Error('请输入姓名'));
} else {
callback();
}
};
var phoneNum = (rule, value, callback) => {
var x = /((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/g.test(value);
if (!x) {
callback(new Error('联系电话格式错误!'));
} else {
callback();
}
};
return {
activeIndex: "1",
tableData: [
],
labelPosition: 'right',
apply: {
orderType: "zzdd",
contacts: '',
mobile: '',
email: '',
notes: ''
},
applyRules: {
contacts: [
{ required: true, message: '请输入姓名', trigger: 'blur', validator: name },
],
mobile: [
{ required: true, message: '请输入正确电话号码', trigger: 'change', validator: phoneNum }
],
},
checkImg: false,
num: null,
params: {
itemCode: "",
order_appendinfo: {
level: "市级通知",
area_list: ["广州", "天津"],
department_list: ["发改部门", "教育部门"],
type_list: ["人才类", "技术改造"]
},
apply: {
orderType: "zzdd",
contacts: "",
mobile: "",
email: "",
notes: ""
},
tm: {
totalSum: 100
}
}
}
},
mounted: function() {
this.num = Number(this.$route.query.num);
this.getProduct();
console.log(this.$route.query);
/**
*
$("#app-header").hide();
......@@ -16,7 +75,41 @@
},
methods: {
goOrder(){
let that = this;
this.params.tm.totalSum = this.tableData[0].countPrice;
this.params.tm.salesNum = Number(this.$route.query.num);
this.apply.orderType = "zzdd";
this.params.apply = this.apply;
this.params.itemCode = this.tableData[0].code;
this.$root.postReq("/web/orderCtl/createOtherOrder", this.params).then(function (d) {
console.log("---------submitOrder-------");
console.log(d.msg);
if (d.code == 1) {
that.$root.pushx({
title: "订单支付",
name: "/orderpay",
params: { orderNum: d.data.code }
});
} else {
this.$message.warning(d.msg);
}
})
},
getProduct(){
var sdsId = window.location.href.split("sdsId=")[1];
var that = this;
this.$root.getReq("/web/serviceitemCtl/findOneById", { id: sdsId }).then(function (d) {
if (d.code == 1) {
var data = d.data;
console.log(d.data);
d.data.num = that.$route.query.num;
d.data.countPrice = (d.data.serviceCharge + d.data.publicExpense) * Number(that.$route.query.num);
that.tableData.push(d.data);
console.log("返回信息", that.tableData);
}
});
},
},
computed: {
......
......@@ -26,7 +26,6 @@
.sds-info p{
font-size: 12px;
color:#999;
margin-top: 30px;
}
.sds-t{
......@@ -99,4 +98,7 @@
}
.sds-container .el-form-item__error{
margin-left: 110px;
}
.sds-container .el-input-number{
margin-left: 41px;
}
\ No newline at end of file
<div class="sds-container" style="background-color:white">
<div style="width:1200px;color:#000;margin:0 auto;padding-top:20px;padding-bottom:30px;min-height:1000px">
<div class="tm-body-breadcrumb" style="margin-bottom: 15px;"><span @click="tiaozhuan(\'/\',\'首页\')" style="cursor: pointer;">首页</span> <i class="el-icon-arrow-right"></i>
<span style="font-weight:600;">服务详情页</span>
</div>
<div class="sds-img">
<img :src="serviceItem.mobilePic" alt="" style="width:100%;height:100%">
</div>
<div class="sds-info">
<h3>{{serviceItem.name}}</h3>
<h5>{{serviceItem.shortDesc}}</h5>
<div class="sds-t">
<span style="color:#999;font-size:12px;margin:12px">服务费:</span> <b style="color:#ff5135;font-size:18px">&yen;&nbsp;{{serviceItem.serviceCharge?serviceItem.serviceCharge.toFixed(2):0}}</b>
<span style="color:#999;font-size:12px;margin:12px;margin-left:40px">官费:</span> <b style="color:#ff5135;font-size:18px">&yen;&nbsp;{{serviceItem.publicExpense?serviceItem.publicExpense.toFixed(2):0}}</b>
</div>
<div style="height:45px;line-height:80px">
<span style="color:#999;font-size:12px;margin:12px">费用总计:</span> <b style="color:#ff5135;font-size:18px">&yen;&nbsp;{{serviceItem.price?serviceItem.price.toFixed(2):0}}</b>
</div>
<div class="sds-operate">
<span class="sds-op1" @click="showneed()">立即办理</span>
<span class="sds-op2" @click="sdsOp2()">立即购买</span>
</div>
<p>服务承诺:全流程服务 全程公开透明</p>
</div>
<div style="clear: both"></div>
<div class="sds-main-t">
</div>
<div class="sds-productdetails">
<h3><span>产品详情</span><i></i></h3>
<!-- <div style="height:400px;background-color: #e1e1e1;margin:10px">
<div style="width:1200px;color:#000;margin:0 auto;padding-top:20px;padding-bottom:30px;min-height:1000px">
<div class="tm-body-breadcrumb" style="margin-bottom: 15px;"><span @click="tiaozhuan(\'/\',\'首页\')"
style="cursor: pointer;">首页</span> <i class="el-icon-arrow-right"></i>
<span style="font-weight:600;">服务详情页</span>
</div>
<div class="sds-img">
<img :src="serviceItem.mobilePic" alt="" style="width:100%;height:100%">
</div>
<div class="sds-info">
<h3>{{serviceItem.name}}</h3>
<h5>{{serviceItem.shortDesc}}</h5>
<div class="sds-t">
<span style="color:#999;font-size:12px;margin:12px">服务费:</span> <b
style="color:#ff5135;font-size:18px">&yen;&nbsp;{{serviceItem.serviceCharge?serviceItem.serviceCharge.toFixed(2):0}}</b>
<span style="color:#999;font-size:12px;margin:12px;margin-left:40px">官费:</span> <b
style="color:#ff5135;font-size:18px">&yen;&nbsp;{{serviceItem.publicExpense?serviceItem.publicExpense.toFixed(2):0}}</b>
</div>
<div style="margin-top:20px;font-size: 12px;color: rgb(153, 153, 153);margin-left: 11px;">
数量:<el-input-number v-model="num" @change="handleChange" :min="1" label="描述文字"></el-input-number>
</div>
<div style="height:30px;line-height:60px">
<span style="color:#999;font-size:12px;margin:12px">费用总计:</span> <b
style="color:#ff5135;font-size:18px">&yen;&nbsp;{{serviceItem.price?serviceItem.price.toFixed(2):0}}</b>
</div>
<div class="sds-operate">
<span class="sds-op2" @click="showneed()">立即办理</span>
<span class="sds-op1" @click="sdsOp2()">立即购买</span>
</div>
<p>服务承诺:全流程服务 全程公开透明</p>
</div>
<div style="clear: both"></div>
<div class="sds-main-t">
</div>
<div class="sds-productdetails">
<h3><span>产品详情</span><i></i></h3>
<!-- <div style="height:400px;background-color: #e1e1e1;margin:10px">
</div> -->
<img v-if="serviceItem.mobileContentImg" :src="serviceItem.mobileContentImg" alt="" style="margin-top:10px">
<img v-if="serviceItem.mobileContentImg1" :src="serviceItem.mobileContentImg1" alt="">
<img v-if="serviceItem.mobileContentImg2" :src="serviceItem.mobileContentImg2" alt="">
<img v-if="serviceItem.mobileContentImg3" :src="serviceItem.mobileContentImg3" alt="">
<img v-if="serviceItem.mobileContentImg4" :src="serviceItem.mobileContentImg4" alt="">
<img v-if="serviceItem.mobileContentImg5" :src="serviceItem.mobileContentImg5" alt="">
<img v-if="serviceItem.mobileContentImg6" :src="serviceItem.mobileContentImg6" alt="">
</div>
<img v-if="serviceItem.mobileContentImg" :src="serviceItem.mobileContentImg" alt="" style="margin-top:10px">
<img v-if="serviceItem.mobileContentImg1" :src="serviceItem.mobileContentImg1" alt="">
<img v-if="serviceItem.mobileContentImg2" :src="serviceItem.mobileContentImg2" alt="">
<img v-if="serviceItem.mobileContentImg3" :src="serviceItem.mobileContentImg3" alt="">
<img v-if="serviceItem.mobileContentImg4" :src="serviceItem.mobileContentImg4" alt="">
<img v-if="serviceItem.mobileContentImg5" :src="serviceItem.mobileContentImg5" alt="">
<img v-if="serviceItem.mobileContentImg6" :src="serviceItem.mobileContentImg6" alt="">
</div>
</div>
<el-dialog title="提交需求" :visible.sync="dialogFormVisible" center width="600px" >
<el-form :model="form" ref="form" :rules="rules" style="margin-left:40px">
<div style="color:#606266;font-size:14px;font-weight:400;line-height:12px;margin-bottom:30px;margin-left:12px">服务需求:{{serviceName}}</div>
<el-form-item label="您的名字:" prop="name">
<el-input v-model="form.name" autocomplete="off" placeholder="请输入您的名字" style="width:360px"></el-input>
</el-form-item>
<el-form-item label="联系方式:" prop="mobile">
<el-input v-model="form.mobile" autocomplete="off" placeholder="请输入您的电话" style="width:360px"></el-input>
</el-form-item>
<el-form-item label="所属城市:" prop="city" style="margin-left:12px">
<el-cascader style="width:360px"
expand-trigger="hover"
:options="bigtype"
v-model="form.city" placeholder="请选择所属城市">
</el-cascader>
</el-form-item>
<el-form-item label="需求详情:" prop="notes" style="margin-left:12px">
<el-input v-model="form.notes" type="textarea" :rows="3" autocomplete="off" placeholder="请输入您的详细内容" style="width:360px"></el-input>
</el-form-item>
<el-form-item >
<div style="width:100%;font-size:12px;color:#B2B2B2;margin-left:12px;font-family:Microsoft YaHei">
<i class="el-icon-info"></i>
提交需求后,我们专业代理人会及时与您联系,为您服务,请保持电话畅通。
</div>
</el-form-item >
<el-form-item >
<div style="width:100%;text-align:center;font-family:Microsoft YaHei">
<el-button type="primary" @click="submitneed">提交</el-button>
<el-button @click="dialogFormVisible=false">取消</el-button>
</div>
</el-form-item>
</el-form>
</el-dialog>
<el-dialog title="提交需求" :visible.sync="dialogFormVisible" center width="600px">
<el-form :model="form" ref="form" :rules="rules" style="margin-left:40px">
<div style="color:#606266;font-size:14px;font-weight:400;line-height:12px;margin-bottom:30px;margin-left:12px">
服务需求:{{serviceName}}</div>
<el-form-item label="您的名字:" prop="name">
<el-input v-model="form.name" autocomplete="off" placeholder="请输入您的名字" style="width:360px"></el-input>
</el-form-item>
<el-form-item label="联系方式:" prop="mobile">
<el-input v-model="form.mobile" autocomplete="off" placeholder="请输入您的电话" style="width:360px"></el-input>
</el-form-item>
<el-form-item label="所属城市:" prop="city" style="margin-left:12px">
<el-cascader style="width:360px" expand-trigger="hover" :options="bigtype" v-model="form.city"
placeholder="请选择所属城市">
</el-cascader>
</el-form-item>
<el-form-item label="需求详情:" prop="notes" style="margin-left:12px">
<el-input v-model="form.notes" type="textarea" :rows="3" autocomplete="off" placeholder="请输入您的详细内容"
style="width:360px"></el-input>
</el-form-item>
<el-form-item>
<div style="width:100%;font-size:12px;color:#B2B2B2;margin-left:12px;font-family:Microsoft YaHei">
<i class="el-icon-info"></i>
提交需求后,我们专业代理人会及时与您联系,为您服务,请保持电话畅通。
</div>
</el-form-item>
<el-form-item>
<div style="width:100%;text-align:center;font-family:Microsoft YaHei">
<el-button type="primary" @click="submitneed">提交</el-button>
<el-button @click="dialogFormVisible=false">取消</el-button>
</div>
</el-form-item>
</el-form>
</el-dialog>
</div>
\ No newline at end of file
......@@ -328,6 +328,7 @@
{ required: true, validator: validateMobile, trigger: 'blur' }
],
},
num:null,
}
},
mounted: function() {
......@@ -356,17 +357,24 @@
}
})
},
handleChange(value) {
console.log(value);
this.serviceItem.price = (this.serviceItem.publicExpense + this.serviceItem.serviceCharge) * value;
this.serviceItem.number = value;
this.num = value;
console.log(this.serviceItem);
},
sdsOp2(){
var sdsId = window.location.href.split("sdsId=")[1];
/*
window.open("https://wpa.qq.com/msgrd?v=3&uin="+this.$root.contextCompany().serviceqq+"&site=qq&menu=yes");
*/
*/
let routeUrl = this.$router.resolve({
path: "/nowbuy",
query: {
isDirectJump:1,
v: 3,
uin: this.$root.contextCompany().serviceqq,
menu: "yes"
isDirectJump: 1,
num:this.num,
sdsId,
}
});
window.open(routeUrl.href, '_blank');
......
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