xiaoyu
279 lines
14 KiB
PHP
279 lines
14 KiB
PHP
<link rel="stylesheet" href="https://qs.liche.cn/web/javascript/LArea/css/LArea.css">
|
|
<script type="text/javascript" src="https://qs.liche.cn/web/javascript/LArea/js/LAreaData1.js"></script>
|
|
<script type="text/javascript" src="https://qs.liche.cn/web/javascript/LArea/js/LAreaData2.js"></script>
|
|
<script type="text/javascript" src="https://qs.liche.cn/web/javascript/LArea/js/LArea.js"></script>
|
|
<script type="text/javascript" src="https://qs.liche.cn/web/javascript/clipboard.min.js"></script>
|
|
<body class="bg-f6">
|
|
<div id="app" ref="app">
|
|
<div class="container relative bg-no-repeat bg-size-fullwidth bg-pos-top pb40" :style="'background-image:url('+info.bg+')'">
|
|
<div class="relative height-710">
|
|
<div class="pt90 pl100 pr100 fn-clear">
|
|
<div class="fn-fl font-18">订单号 {{info.order.sid}}</div>
|
|
<div class="fn-fr font-18"><i class="iconfont icon-time"></i> {{info.order.c_time}}</div>
|
|
</div>
|
|
<div class="uinfo absolute wp100 pr100 pl100">
|
|
<div class="space-nowrap"><span>{{info.order.uname}}</span><span class="font-28">·{{info.order.utel}}</span></div>
|
|
<template v-if="info.ifAddress>0">
|
|
<div class="mt10 uinfoadd font-22 ulib-rl750" v-if="show_address" @click="showAdd()"><i class="iconfont mr5 icon-dizhi"></i>{{show_address}}</div>
|
|
<div class="mt10 uinfoadd font-22 ulib-rl750" v-else @click="showAdd()"><i class="iconfont mr5 icon-zengjia"></i>(完善收货地址)</div>
|
|
</template>
|
|
<img class="absolute box-middle right-0 mr80 imgsize-130X100" src="https://qs.liche.cn/web/images/project/H5-ShiYu/icon-hexiao.png" alt="已核销" v-if="info.is_writeoff">
|
|
</div>
|
|
<!-- <div class="uinfo absolute box-center pt15 pb15 pl30 pr30 font-32 ulib-r750 space-nowrap">{{info.order.uname}} · {{info.order.utel}}</div>-->
|
|
<div class="odslogan absolute box-center text-center color-e4bc93 space-nowrap">
|
|
<div class="pb10 bbs-1-e4bc93 font-48">{{info.order.slogan}}</div>
|
|
<div class="mt10 font-24">{{info.order.valid_time}}</div>
|
|
</div>
|
|
<div class="absolute logistics box-center bg-e0b78d pt10 pb10 pl15 pr15 ulib-rtr20 ulib-rbl20 ulib-r750 font-22 color-1a1a1a text-nowrap text-center" v-if="info.show_express" @click="msgisShowExpress = true">
|
|
您的礼包已发出 {{info.express.title}}·{{info.express.code}}
|
|
</div>
|
|
</div>
|
|
<div class="relative bg-fff mb30 ml30 mr30 inner40 pl150 pr220 ulib-r20 box-shadow-darkGray" v-if="info.if_pid">
|
|
<img class="absolute left-0 box-middle ml35 imgsize-90X90 ulib-r750 bds-1-eee" :src="info.logo" :alt="info.title" />
|
|
<div>
|
|
<span class="font-36 text-middle">{{info.title}}</span>
|
|
<span class="inline-block pl10 pr10 line-height-15 text-middle ulib-r750 font-22 color-fff bg-1a1a1a">专属顾问</span>
|
|
</div>
|
|
<div class="mt10 font-22 color-999">{{info.slogan}}</div>
|
|
<a class="absolute right-0 box-middle mr30" :href="'tel:'+info.cust_tel">
|
|
<img class="imgsize-60X60" src="https://qs.liche.cn/web/images/project/H5-ShiYu/tel.png" alt="拨打电话" />
|
|
</a>
|
|
</div>
|
|
<div class="relative bg-fff mb30 ml30 mr30 inner40 ulib-r20 box-shadow-darkGray">
|
|
<div class="pb20 text-center"><div class="inline-block relative pl10 pr10 introTitle font-36"><span class="relative z-index-1">{{info.introTitle}}</span></div></div>
|
|
<div class="line-height-17 font-28 color-666 text-break space-pre-line rich-text-img" v-html="info.content"></div>
|
|
</div>
|
|
</div>
|
|
<? $this->load->view('h5/market/sylive2/nav_my') ?>
|
|
|
|
<div class="msg fn-hide" :style="isShowAdd?'display:block':'display:none'" v-if="isShowAdd">
|
|
<div class="msgBg" @click="isShowAdd=!isShowAdd"></div>
|
|
<div class="msgMain">
|
|
<div class="content">
|
|
<div class="word text-center">
|
|
<div class="mt15 font-22 color-999">请输入您的收货地址</div>
|
|
<div class="mt30 relative bg-f6 ulib-r10">
|
|
<input id="region" class="wp100 inner30 font-28 bg-f6 border-none ulib-r10" type="text" readonly="" v-model="region" placeholder="选择省/市/区" />
|
|
<input id="regionvalue" type="hidden" v-model="regionvalue"/>
|
|
</div>
|
|
<div class="mt30 relative bg-f6 ulib-r10">
|
|
<input class="wp100 inner30 font-28 bg-f6 border-none ulib-r10" type="text" v-model="address" placeholder="请输入详细地址" />
|
|
</div>
|
|
</div>
|
|
<div class="mt30">
|
|
<a class="block pt25 pb25 bg-1a1a1a text-center font-32 color-fff ulib-r10" @click="postAddress()">确认</a>
|
|
</div>
|
|
<!--
|
|
<div class="mt30 text-center">
|
|
<a class="font-24 text-underline" @click="isShowAdd=!isShowAdd">不了，看完直播再说></a>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--快递-->
|
|
<div class="msg fn-hide" :style="msgisShowExpress?'display:block':'display:none'" v-if="msgisShowExpress">
|
|
<div class="msgBg" @click="msgisShowExpress = false"></div>
|
|
<div class="msgMain">
|
|
<div class="content">
|
|
<div class="pt20 pb20 fn-clear">
|
|
<div class="fn-fl font-36">{{info.express.title}}</div>
|
|
<div class="fn-fr mt10 font-24">
|
|
<span>{{info.express.code}}</span>
|
|
<a class="J_copy" :data-clipboard-text="info.express.code">复制</a>
|
|
</div>
|
|
</div>
|
|
<div class="pl20 pr20 max-height-500 scroll-y">
|
|
<div class="orderDtail-log mt40 relative">
|
|
<div class="orderDtail-log-item pl40 relative" v-for="(item,index) in info.express.list">
|
|
<div class="orderDtail-log-content font-22">
|
|
<div :class="index == 0?'color-ff9d47':''">{{item.time}}</div>
|
|
<div class="color-999 text-break">{{item.status}}</div>
|
|
</div>
|
|
<span class="absolute orderDtail-log-line2 z-index-0" v-if="index != info.express.list.length-1"></span>
|
|
<span class="absolute orderDtail-log-dot z-index-1"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="opt mt20 pl20 pr20">
|
|
<a class="bg-1a1a1a ml15 pt20 pb20 pl60 pr60 text-center font-32 color-fff ulib-r750" @click="msgisShowExpress = false" href="javascript:" >知道了</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
let hostUrl = ''
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
// info:{
|
|
// bg:"https://qs.liche.cn/web/images/project/H5-ShiYu/mine-bg.jpg",
|
|
// logo:"https://qs.liche.cn/web/images/project/H5-ShiYu/goodslogo.jpg",
|
|
// title:"东风·纳米",
|
|
// slogan:"东风EV·您的专属的福利官",
|
|
// cust_tel:'15355555555',
|
|
// introTitle:'权益说明',
|
|
// content:'纳米BOX充分考虑到了用户的用车续航焦虑问题，新车采用了高密度电池组，CLTC续航331km。此外，纳米BOX全系支持快充、慢充功能，快充30分钟可以完成30～80%的补电，慢充4小时即可满电，轻松覆盖日常用车需求。纳米BOX充分考虑到了用户的用车续航焦虑问题，新车采用了高密度电池组，CLTC续航331km。此外，纳米BOX全系支持快充、慢充功能，快充30分钟可以完成30～80%的补电，慢充4小时即可满电，轻松覆盖日常用车需求。',
|
|
// order:{
|
|
// uname:'张大三',
|
|
// utel:'13459***382',
|
|
// slogan:'尊享您的直播好礼',
|
|
// valid_time:'2022-08-01-2022-08-31',
|
|
// oid:'XM202210111563586',
|
|
// c_time:'2022-10-11 15:35:52',
|
|
// }
|
|
// },
|
|
info : <?=json_encode($info,JSON_UNESCAPED_UNICODE)?>,
|
|
region:'<?=$info['order']['region']?>',
|
|
regionvalue:'',
|
|
address:'<?=$info['order']['detail']?>',
|
|
show_address:'<?=$info['order']['region'] ? $info['order']['region']." ".$info['order']['detail'] : ''?>',
|
|
isShowAdd: false,
|
|
isSubmiting: false,
|
|
msgisShowExpress:false,
|
|
},
|
|
created(){
|
|
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
mounted() {
|
|
let that = this
|
|
let swiper = new Swiper('.goods-banner .swiper-container', {
|
|
//loop: true,
|
|
//autoHeight: true,
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
type: 'fraction',
|
|
},
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
},
|
|
on: {
|
|
slideChangeTransitionEnd: function(){
|
|
that.activeIndex = this.activeIndex
|
|
},
|
|
},
|
|
});
|
|
//复制文字
|
|
let clipboardDemos = new ClipboardJS('.J_copy');
|
|
clipboardDemos.on('success', function (e) {
|
|
e.clearSelection();
|
|
var msgDia = mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: "复制成功！"
|
|
});
|
|
});
|
|
},
|
|
beforeDestroy() {
|
|
|
|
},
|
|
methods: {
|
|
showAdd: function() {
|
|
this.isShowAdd = true
|
|
let that = this;
|
|
//选择省市初始化
|
|
setTimeout(function () {
|
|
let area = new LArea();
|
|
area.init({
|
|
'trigger': '#region', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
|
|
'valueTo': '#regionvalue', //选择完毕后id属性输出到该位置
|
|
'keys': {
|
|
id: 'value',
|
|
name: 'text'
|
|
}, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
|
|
'type': 2,
|
|
'data': [provs_data, citys_data, dists_data]
|
|
});
|
|
|
|
if(that.region !=''){
|
|
for(var i in provs_data){
|
|
if(provs_data[i].text==that.region.split(",")[0]){
|
|
var x=i;
|
|
var city=citys_data[provs_data[i].value];
|
|
for(var j in city){
|
|
if(city[j].text==that.region.split(",")[1]){
|
|
var y=j;
|
|
var district=dists_data[city[j].value];
|
|
for(var k in district){
|
|
if(district[k].text==that.region.split(",")[2]){
|
|
var z=k;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
area.value=[x,y,z];//控制初始位置，注意：该方法并不会影响到input的value
|
|
}else{
|
|
//area.value=[12,1,1];//控制初始位置，注意：该方法并不会影响到input的value
|
|
}
|
|
area.success = function(){
|
|
that.regionvalue = $("#regionvalue").val();
|
|
}
|
|
}, 200)
|
|
},
|
|
//提交地址
|
|
postAddress() {
|
|
if (this.isSubmiting) return;
|
|
if (!this.region) {
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: "请选择所在地区"
|
|
});
|
|
}else if (!this.address) {
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: "请输入详细地址"
|
|
});
|
|
}else{
|
|
this.isSubmiting = true
|
|
var params = {
|
|
'skey':'<?=$skey?>',
|
|
'region':this.region,
|
|
'address':this.address,
|
|
'id':this.info.order.id
|
|
}
|
|
var that = this;
|
|
$.post('/h5/market/sylive2/ucenter/edit_address',params,function (res){
|
|
that.isSubmiting = false
|
|
if(res.code==200){
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: res.msg,
|
|
onClose:function(){
|
|
window.location.reload();
|
|
}
|
|
});
|
|
}else{
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: res.msg
|
|
});
|
|
}
|
|
},'json');
|
|
//提交数据
|
|
// mDialog.msg({
|
|
// duration: 250,
|
|
// pause: 2000,
|
|
// content: "提交成功"
|
|
// });
|
|
// this.isShowAdd = false
|
|
// this.isSubmiting = false
|
|
|
|
}
|
|
},
|
|
},
|
|
})
|
|
</script>
|
|
<?= $this->load->view('h5/market/sylive2/hidden_wx_share') ?>
|
|
</body>
|