Skip to content

S
SuperMan
Commit eb7e1677 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 4c209a7b
Show whitespace changes
Inline Side-by-side
Showing with 660 additions and 608 deletions
src/components/scenicSpot/Singleticket/OrderPreview.vue
View file @ eb7e1677
<style scoped>
.image-slot{
.image-slot {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.time-box.time-box2 .time-box-width span{
.time-box.time-box2 .time-box-width span {
width: auto;
}
.flexOne{
.flexOne {
margin: auto;
width: 70%;
min-width: 1300px;
......@@ -17,22 +19,26 @@
margin-top: 15px;
align-items: flex-start;
}
.flexOne-left{
.flexOne-left {
flex-grow: 1;
}
.flexOne-form-bj{
.flexOne-form-bj {
border-radius: 5px;
background: #ffffff;
padding: 15px;
margin-bottom: 20px;
}
.flexOne-form-bj h3{
.flexOne-form-bj h3 {
font-size: 18px;
color: black;
padding: 0 0 20px 0;
font-weight: 400;
}
.listone-form{
.listone-form {
padding: 5px 0 15px 0;
border-radius: 5px;
background: #ffffff;
......@@ -43,121 +49,149 @@
overflow: hidden;
border-bottom: 1px solid #eeeeee;
}
.listone-img{
.listone-img {
width: 130px;
flex-shrink: 0;
margin-right: 15px;
border-radius: 5px;
display: block;
}
.listone-list{
.listone-list {
flex-grow: 1;
display: flex;
justify-content: space-between;
}
.list-left h6,.card-centent h6{
.list-left h6,
.card-centent h6 {
font-size: 16px;
margin-bottom: 5px;
cursor: pointer;
}
.list-left div{
.list-left div {
color: #7E8299;
font-size: 13px;
margin-top: 7px;
}
.list-left div a{
.list-left div a {
color: #009EF7;
font-size: 12px;
margin-left: 15px;
cursor: pointer;
}
.flexOne-time{
.flexOne-time {
padding: 20px;
}
.time-box{
.time-box {
display: flex;
flex-direction: row;
margin-bottom: 15px;
border: 0 !important;
}
.time-box.center{
.time-box.center {
align-items: center;
}
.time-box>span{
.time-box>span {
/* width: 100px; */
flex-shrink: 0;
font-size: 13px;
color: #181C32;
margin-right: 40px;
}
.flexOne-type{
.flexOne-type {
display: flex;
align-items: center;
padding: 0 0 20px 0;
}
.flexOne-type b{
.flexOne-type b {
font-size: 13px;
width: 100px;
flex-shrink: 0;
}
.flexOne-type div{
.flexOne-type div {
display: flex;
}
.flexOne-description{
.flexOne-description {
padding: 15px 15px;
border-radius: 5px;
background: #E1F5FE;
margin-bottom: 20px;
}
.flexOne-description b{
.flexOne-description b {
font-size: 14px;
}
.flexOne-description p{
.flexOne-description p {
font-size: 12px;
color: #4C5759;
padding: 10px 0 0 0;
}
.flexOne-infor-box b{
.flexOne-infor-box b {
font-size: 13px;
}
.infor-list{
.infor-list {
display: flex;
flex-direction: column;
}
.list-title{
.list-title {
padding: 20px 0;
border-bottom: 1px dashed #eeeeee;
color: #7E8299;
font-size: 13px;
}
.list-title,.list-centent{
.list-title,
.list-centent {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}
.infor-list li{
.infor-list li {
width: 25%;
}
.list-centent li {
width: 33.33%;
}
.list-centent.active li {
width: 25%;
}
.bottom .el-form-item{
.bottom .el-form-item {
margin-bottom: 0;
}
.notice{
.notice {
border-radius: 5px;
border: 1px dashed #FFA500;
background: #FFF3E0;
margin-bottom: 15px;
padding: 15px;
}
.notice b{
.notice b {
font-size: 13px;
}
.notice p{
.notice p {
color: #5E6278;
font-size: 12px;
padding: 10px 0 0 0;
......@@ -177,7 +211,7 @@
.flexOne-right{
.flexOne-right {
width: 300px;
flex-shrink: 0;
margin-left: 20px;
......@@ -185,11 +219,13 @@
background: #ffffff;
padding: 15px;
}
.flexOne-right h4{
.flexOne-right h4 {
padding: 10px 0 20px 0;
color: #181C32;
}
.right-text{
.right-text {
border: 1px dashed #F1416C;
padding: 15px 10px;
background: #FFEBEE;
......@@ -198,68 +234,82 @@
margin-bottom: 20px;
border-radius: 5px;
}
.right-text p{
.right-text p {
color: #6D6E83;
font-size: 12px;
padding: 10px 0 0 0;
}
.right-form{
.right-form {
border-top: 1px dashed #EEEEEE;
border-bottom: 1px dashed #EEEEEE;
padding: 20px 0;
}
.right-form h6{
.right-form h6 {
font-size: 14px;
color: black;
}
.noData{
.noData {
text-align: center;
color: #7E8299;
font-size: 14px;
}
.right-form-list{
.right-form-list {
padding: 20px 0;
}
.right-list{
.right-list {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.right-list-right{
.right-list-right {
font-size: 13px;
color: #181C32;
padding: 0 0 0 5px;
}
.right-Money{
.right-Money {
padding: 20px 0;
font-size: 14px;
color: #181C32;
}
.right-Money b{
.right-Money b {
font-size: 18px;
color: #F1416C;
margin-left: 5px;
}
.right-Money,.right-Submit{
.right-Money,
.right-Submit {
display: flex;
flex-direction: row-reverse;
}
/deep/.el-input-number{
/deep/.el-input-number {
width: 200px;
height: 32px;
line-height: 32px;
}
/deep/.el-input-number .el-input__inner{
/deep/.el-input-number .el-input__inner {
text-align: center;
height: 34px;
}
/deep/.line-heigh .el-input-number{
/deep/.line-heigh .el-input-number {
line-height: 32px;
}
</style>
<template>
</style>
<template>
<div class="flexOne">
<div class="flexOne-left">
<div class="flexOne-form-bj">
......@@ -294,8 +344,8 @@
<div class="time-box center">
<span>游玩日期：</span>
<div>
<el-date-picker class="w150" v-model='msg.UseDate' format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date"
:picker-options="beforeCheck" laceholder="门票日期" @change="getInfo">
<el-date-picker class="w150" v-model='msg.UseDate' format="yyyy-MM-dd" value-format="yyyy-MM-dd"
type="date" :picker-options="beforeCheck" laceholder="门票日期" @change="getInfo">
</el-date-picker>
</div>
</div>
......@@ -303,11 +353,12 @@
<span>选择票型：</span>
<div style="display: flex;flex-wrap: wrap;">
<template v-for="x in types">
<el-tag class="time-box-width" :type="x.checked?'':'info'" style="margin-right: 10px;margin-bottom: 5px; cursor: pointer;"
@click="changeDetailListHandler(x)">
<el-tag class="time-box-width" :type="x.checked?'':'info'"
style="margin-right: 10px;margin-bottom: 5px; cursor: pointer;" @click="changeDetailListHandler(x)">
<a>{{ x.TicketName }}</a>
<p style="display: inline-block;margin-left: 5px;">
<a style="display: inline-block;border-left: 1px solid #E9E9EB;line-height: 17px;padding: 0 0 0 8px;">
<a
style="display: inline-block;border-left: 1px solid #E9E9EB;line-height: 17px;padding: 0 0 0 8px;">
{{x.B2BPrice.toFixed(2)}}</a>
</p>
</el-tag>
......@@ -319,10 +370,9 @@
<div style="display: flex;flex-direction: column;">
<template v-for="x in types">
<div style="flex-direction: row;" v-if="x.checked">
{{x.TicketName}}：
<el-input-number v-model="x.num" @change="changePeople" :min="1" label="购买数量"
style="margin-bottom: 10px;"></el-input-number>
<!-- <span> {{x.CurrencyName
}} </span> -->
</div>
</template>
</div>
......@@ -348,38 +398,31 @@
<b> {{msg.MailingState==1?'客人讯息':msg.MailingState==2?'邮寄讯息':''}}</b>
<el-form v-if="msg.MailingState!=4" label-width="80px" :model="msg" :rules="rules" ref="msg">
<div class="infor-list">
<!-- <div class="list-title">
<li>中文姓名</li>
<li>英文姓名</li>
<li>性别</li>
<li>联络电话</li>
<li>收件地址</li>
</div> -->
<div class="list-centent" :class="{'active':msg.MailingState==1}">
<li>
<el-form-item label="中文名" prop="Name">
<el-input v-model="msg.Name" placeholder="请输入名称"/>
<el-input v-model="msg.Name" placeholder="请输入名称" />
</el-form-item>
</li>
<li>
<el-form-item label="英文名" prop="EName">
<el-input v-model="msg.EName" placeholder="请输入英文名"/>
<el-input v-model="msg.EName" placeholder="请输入英文名" />
</el-form-item>
</li>
<li>
<el-form-item label="电话" prop="">
<el-input type="Number" v-model="msg.Mobile" placeholder="请输入电话"/>
<el-input type="Number" v-model="msg.Mobile" placeholder="请输入电话" />
</el-form-item>
</li>
<li v-if="msg.MailingState==2">
<el-popover trigger="click" placement="MailingAddress">
<el-input type="textarea" v-model="msg.MailingAddress"
:autosize="{ minRows: 3, maxRows: 100}"
placeholder="输入邮寄地址"/>
<el-input type="textarea" v-model="msg.MailingAddress" :autosize="{ minRows: 3, maxRows: 100}"
placeholder="输入邮寄地址" />
<div slot="reference" class="name-wrapper">
<el-form-item label="邮寄地址" prop="MailingAddress">
<el-input v-model="msg.MailingAddress" placeholder="输入邮寄地址" readonly/>
<el-input v-model="msg.MailingAddress" placeholder="输入邮寄地址" readonly />
</el-form-item>
</div>
</el-popover>
......@@ -387,15 +430,15 @@
<li class="bottom">
<el-form-item label="性别" prop="Sex">
<el-radio v-model="msg.Sex" label="1">男</el-radio>
<el-radio v-model="msg.Sex" label="2" >女</el-radio>
<el-radio v-model="msg.Sex" label="2">女</el-radio>
</el-form-item>
</li>
</div>
</div>
</el-form>
<div style="margin-top: 20px;">
<el-input style="width: 100%;" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"
v-model="msg.Remark" placeholder="订单备注"/>
<el-input style="width: 100%;" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="msg.Remark"
placeholder="订单备注" />
</div>
</div>
</div>
......@@ -457,9 +500,7 @@
<!-- <button v-else class="normalBtn" type="primary" @click="submit">
提交订单
</button> -->
<el-button :disabled="!isCheck"
:loading="loading"
class="normalBtn" type="primary" @click="submit">
<el-button :disabled="!isCheck" :loading="loading" class="normalBtn" type="primary" @click="submit">
提交订单
</el-button>
</div>
......@@ -469,15 +510,17 @@
<ticket-card :ticket="detailsRow"></ticket-card>
</el-dialog>
</div>
</template>
<script>
</template>
<script>
import TicketCard from './components/OrderDetails.vue'
export default {
components: { TicketCard },
components: {
TicketCard
},
data() {
return {
checkedTyps:0,//记录选多币种票型
isCheck:true,
checkedTyps: 0, //记录选多币种票型
isCheck: true,
showDetails: false,
loading: false,
SelffetchAddress: '',
......@@ -485,18 +528,18 @@
OrderId: 0,
Money: 0.0,
Remark: '',
MailingState: '1',//邮寄状态 1自取 2邮寄
MailingAddress: '',//MailingState =2 填写邮寄
MailingState: '1', //邮寄状态 1自取 2邮寄
MailingAddress: '', //MailingState =2 填写邮寄
MailingMoney: null,
SelffetchAddress: '',//自取地址
UseDate:'',//门票日期
Name:'',
EName:'',
Sex: '1',//1男2女
SelffetchAddress: '', //自取地址
UseDate: '', //门票日期
Name: '',
EName: '',
Sex: '1', //1男2女
Birthday: '',
Mobile:'',
CouponsId:'',//景点id
DetailList:[],
Mobile: '',
CouponsId: '', //景点id
DetailList: [],
LureEmpId: 0,
CRMGuestId: 0,
},
......@@ -506,11 +549,11 @@
detailsObj: {},
beforeCheck: {
disabledDate: time => {
let endTime = new Date(this.getBeforeDate(1,new Date().Format("yyyy-MM-dd")));
let endTime = new Date(this.getBeforeDate(1, new Date().Format("yyyy-MM-dd")));
return time && endTime.getTime() >= time.getTime();
}
},
rules:{
rules: {
Name: [{
required: true,
message: '请输入中文名',
......@@ -521,8 +564,11 @@
message: '请输入英文名',
trigger: 'blur'
}],
Mobile: [
{ required: true, message: "请输入联系电话", trigger: "blur" },
Mobile: [{
required: true,
message: "请输入联系电话",
trigger: "blur"
},
{
pattern: this.$commonUtils.Regex.el_ISphone,
message: "请输入正确的电话"
......@@ -539,8 +585,8 @@
};
},
methods: {
submit(){
if(this.msg.MailingState!=4){
submit() {
if (this.msg.MailingState != 4) {
this.$refs['msg'].validate((valid) => {
if (valid) {
this.setFormMsg()
......@@ -548,26 +594,27 @@
return false;
}
});
}else{
} else {
this.setFormMsg()
}
},
setFormMsg(){
if(this.msg.MailingState!='2'){
setFormMsg() {
if (this.msg.MailingState != '2') {
this.msg.MailingAddress = ''
this.msg.MailingMoney = null
}if(this.msg.MailingState!='1'){
}
if (this.msg.MailingState != '1') {
this.msg.SelffetchAddress = ''
}
this.msg.DetailList = []
this.types.forEach(x=>{
if(x.checked){
this.types.forEach(x => {
if (x.checked) {
let y = {
TicketType: x.TicketCouponsType,
TicketName: x.TicketName,
Unit_Price: x.B2BPrice,
Num: x.num,
Money: x.B2BPrice*x.num,
Money: x.B2BPrice * x.num,
TicketId: x.TicketID
}
this.msg.DetailList.push(y)
......@@ -593,54 +640,57 @@
changePeople(val) {
this.getNum()
},
getNum(){
getNum() {
// 控制门票张数
// this.types.forEach(x=>{
// if(x.num>x.RemainingInventory){
// x.num = x.RemainingInventory
// }
// })
setTimeout(()=>{
setTimeout(() => {
this.calcMoneyHandler()
},50)
}, 50)
},
calcMoneyHandler(){
this.msg.Money=0.0
let Money= 0
if(this.msg.MailingState == 2){
calcMoneyHandler() {
this.msg.Money = 0.0
let Money = 0
if (this.msg.MailingState == 2) {
this.msg.MailingMoney = this.detailsObj.MailingMoney
}else{
} else {
this.msg.MailingMoney = 0
}
this.types.forEach(x=>{
if(x.checked){
Money+=x.B2BPrice*x.num
this.types.forEach(x => {
if (x.checked) {
Money += x.B2BPrice * x.num
}
})
this.msg.Money = Number(Money)+Number(this.msg.MailingMoney)
this.msg.Money = Number(Money) + Number(this.msg.MailingMoney)
},
changeDetailListHandler(e) {
e.checked = !e.checked
this.isCheck = this.types.findIndex(x => x.checked) > -1
this.checkedTyps = 0
this.types.forEach(item=>{ if(item.checked==true){ this.checkedTyps++}})
if(this.isCheck){
this.types.forEach(item => {
if (item.checked == true) {
this.checkedTyps++
}
})
if (this.isCheck) {
this.calcMoneyHandler()
}else{
this.msg.Money=0.0
} else {
this.msg.Money = 0.0
}
},
getInfo(){
getInfo() {
let time
if(this.OpenTime!=this.msg.UseDate){
if (this.OpenTime != this.msg.UseDate) {
time = this.msg.UseDate
}else{
} else {
time = this.OpenTime
}
if(time){
if (time) {
this.apipost(
"ticket_post_GetTicketCouponsInfo",
{
"ticket_post_GetTicketCouponsInfo", {
CouponsId: this.msg.CouponsId,
OpenTime: time,
},
......@@ -657,15 +707,17 @@
};
addList(res.data.data.TicketPriceList);
this.msg.Money = 0.00
this.types = res.data.data.TicketPriceList.filter(x=>{ return x.B2BPrice>0})
if(this.types&&this.types.length>0){
this.types = res.data.data.TicketPriceList.filter(x => {
return x.B2BPrice > 0
})
if (this.types && this.types.length > 0) {
this.changeDetailListHandler(this.types[0])
}
if(this.types&&this.types.length==0){
if (this.types && this.types.length == 0) {
this.Error('暂无报价，无法下单')
}
}else{
} else {
this.Error(res.data.message)
}
},
......@@ -708,7 +760,7 @@
},
mounted() {
// crm自动登陆传过来的参数
if(this.$route.query.crmOrderObj){
if (this.$route.query.crmOrderObj) {
this.crmOrderObj = JSON.parse(this.$route.query.crmOrderObj)
this.msg.LureEmpId = this.crmOrderObj.LureEmpId
this.msg.CRMGuestId = this.crmOrderObj.CRMGuestId
......@@ -722,4 +774,4 @@
}
};
</script>
</script>
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