swan-tripgui

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.

更换组件 npm uninstall tripg-invoices

发票组件

注： 各个项目引入后 全局css样式表中mint-ui.css中修改mint-toast层级
	.mint-toast{
	  z-index: 99999 !important;
	} 
如果收银台页面左上角返回按钮不显示，请在当前页调整样式问题
其他样式冲突==>自行调试 

依赖安装后 在main.js中 添加

import invoices from 'swan-tripgui'
Vue.use(invoices)
import invmask from 'swan-tripgui'
Vue.use(invmask)

支付组件
import payment from 'swan-tripgui'
Vue.use(payment)


在index.html页面中引入支付包
 if(window.Vue){
   document.write('<script src="https://www.tripglobal.cn/tripg.php?_t='+Math.ceil(Math.random() * 999)+'"><\/script>');
 }else{
   document.write('<script src="https://www.tripglobal.cn/tripgvue.php?_t='+Math.ceil(Math.random() * 999)+'"><\/script>');
 }

####在需要引入发票组件的页面加入

支付内容展示页面
<payment 
	:payParams="payParams" 
	:payUserInfo='payUserInfo' 
	:payOrderStatus="payOrderStatus"  
	@cancelOrder="cancelOrderBtn"  
	@successOrder="successOrder"></payment>

发票内容展示页面
<invoices  
  ref="invoices"
  :invoicesObj.sync = "invoicesObj"
  :checkinvoicesIndex.sync = "checkinvoicesIndex"
  :checkinvoicesflag.sync = 'checkinvoicesflag'
  :ajaxObj = "ajaxObj"
  :travelType='isYg'
  ></invoices>
  

发票弹框展示页面
 <invmask 
  ref="inmask"
  :invoicesObj.sync = "invoicesObj"
  :checkinvoicesIndex.sync = "checkinvoicesIndex"
  :checkinvoicesflag.sync = 'checkinvoicesflag'
  :ajaxObj = "ajaxObj"
  ></invmask>
  
  
data里加入
  userInfo:{},//开局发票人员信息（登陆信息）
  ajaxObj:null, //发票请求ajax参数
  invoicesObj:{},//发票信息
  checkinvoicesIndex:null,//点击发票内容组件的项
  checkinvoicesflag:null, 
  isYg:null,  //true or false 因公因私 传Boolean类型
data里加入支付组件所需
	payUserInfo:{},   //个人信息字符串
	payParams:{
		orderid: "",   //订单号
		callBackUrls: encodeURI(window.location.href),   //回调地址
		travelType:1,  //因公因私  1因公  2因私
		testPay:false,  //测试环境  true or false
		payId:'14',   //产品线id 机票11 酒店12 租车13 火车票14 国际机票28 具体与产品线一致
		exceed:false   //酒店超标支付
	},
	payOrderStatus:'20190524093020',   //20190524093020 保险订单创建时间

created() {
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
    this.ajaxObj = {
      userInfo: this.userInfo,
      product_id: '11' //产品线id 机票11 酒店12 租车13 火车票14 国际机票28 具体与产品线一致
    }
  },
methods:{
	<!-- 按需调用 -->
	cancelOrderBtn(){
		<!-- 取消订单返回事件 -->
	},
	successOrder(item){
		<!-- 授信支付成功返回事件 -->
		console.log(item,'订单号')
	}
	}


  

###(提交发票。提交发票走原tripg发票的逻辑)

在计算属性 computed中获取
this.$refs.invoices.$data.popVisible;//该值是判断发票开关是否打开（下单时判断）

###下单按钮事件中添加 // 验证发票信息是否完整

if (this.$refs.invoices.checkInvoice() == false) {
  return;
}

###下单成功后添加

this.allinvoiceInfo = []; //所有发票信息
["下单成功后返回的订单号"].forEach(v => {
  //这里是给李发的值,具体添加什么李发提供 businessinfo，
  //下面是机票线的，其它线修改一下。
  v.businessinfo = {
    product_id: v.product_id, //产品线ID
    order_no: v.tradeCode, //订单号
    ...this.paramsObj[0], //其它航班信息等
    money: v.pay_money //价格
  };
  this.allinvoiceInfo.push(v);
});

//下单后记录综合订单号。
this.mainOrderCode = order_info.Result.mainOrderCode;

最后一步提交，添加在订单成功后，跳路由之前。

await this.$refs.invoices.invoiceInfo_post(
  allinvoiceInfo,
  mainOrderCode
);