405 行
13 KiB
HTML
可执行文件
405 行
13 KiB
HTML
可执行文件
<!DOCTYPE html>
|
||
<html>
|
||
<!--[1.4.13]-->
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.2.8.2.css">
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/vue/element-ui.css">
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Retail/css/myscroll.css"/>
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/common-upload.css">
|
||
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
|
||
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.2.8.2.js"></script>
|
||
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/vue/element-ui.js"></script>
|
||
<title>订单详情</title>
|
||
<style>
|
||
.el-step__icon {
|
||
height: 65px;
|
||
width: 65px;
|
||
}
|
||
|
||
.el-step.is-horizontal .el-step__line {
|
||
top: 30px;
|
||
}
|
||
|
||
.el-step__title {
|
||
font-size: 30px;
|
||
position: relative;
|
||
left: -15px;
|
||
}
|
||
|
||
.el-step__icon-inner .is-status .el-icon-check {
|
||
font-size: 32px;
|
||
}
|
||
|
||
body {
|
||
background-color: #F6F6F6;
|
||
font-size: 36px;
|
||
}
|
||
|
||
/* 导航 */
|
||
.navs {
|
||
background-color: #FFFFFF;
|
||
margin: 3vw 0 3vw 2vw;
|
||
padding: 2vh 4vw 0 4vw;
|
||
width: 86vw;
|
||
height: 150px;
|
||
border-radius: 20px;
|
||
}
|
||
|
||
/* 商品图片 */
|
||
.contenta {
|
||
height: 200px;
|
||
margin: 3vw 0 3vw 2vw;
|
||
padding: 0 4vw;
|
||
width: 86vw;
|
||
padding-top: 2vh;
|
||
background-color: #FFFFFF;
|
||
border-radius: 15px;
|
||
display: flex;
|
||
}
|
||
|
||
.imgs1 {
|
||
height: 170px;
|
||
width: 130px;
|
||
}
|
||
|
||
.contenta_1 {
|
||
margin: 2vh 0 0 2vw;
|
||
}
|
||
|
||
.contenta_1 > div:nth-child(1) {
|
||
color: #333333;
|
||
}
|
||
|
||
.contenta_1 > div:nth-child(2) {
|
||
color: #999999;
|
||
margin-top: 1vh;
|
||
}
|
||
|
||
/* 订单信息 */
|
||
.contents {
|
||
height: 360px;
|
||
margin: 3vw 0 0 2vw;
|
||
padding: 0 4vw;
|
||
width: 86vw;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.contents_2, .contents_3, .contents_4 {
|
||
display: flex;
|
||
}
|
||
|
||
.contents > div > div {
|
||
margin-top: 2vh;
|
||
}
|
||
|
||
.contents > div > div:nth-child(1) {
|
||
color: #999999;
|
||
width: 20vw;
|
||
}
|
||
|
||
.contents > div > div:nth-child(2) {
|
||
text-align: right;
|
||
width: 80vw;
|
||
}
|
||
|
||
.contents_1 {
|
||
font-size: 40px;
|
||
line-height: 90px;
|
||
height: 90px;
|
||
border-bottom: 2px solid #E5E5E5;
|
||
}
|
||
|
||
.contents_5 {
|
||
border-top: 2px solid #E5E5E5;
|
||
background-color: #FFFFFF;
|
||
width: 94vw;
|
||
margin-left: 2vw;
|
||
height: 150px;
|
||
}
|
||
|
||
.contents_51 {
|
||
width: 20vw !important;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
border: 1px solid #FF5C6D;
|
||
color: #FF5C6D !important;
|
||
border-radius: 60px;
|
||
text-align: center;
|
||
margin: 2vh 0 0 70vw;
|
||
}
|
||
|
||
/* 自提订单数据的样式 */
|
||
.contentzt {
|
||
background-color: #FFFFFF;
|
||
width: 86vw;
|
||
margin-left: 2vw;
|
||
padding: 0 4vw;
|
||
}
|
||
|
||
.contentzt > div {
|
||
display: flex;
|
||
}
|
||
|
||
.contentzt > div > div:nth-child(1) {
|
||
color: #999999;
|
||
}
|
||
|
||
.contentzt > div > div:nth-child(2) {
|
||
text-align: right;
|
||
}
|
||
|
||
.contentzt > div > div {
|
||
width: 50vw;
|
||
}
|
||
|
||
.contentzt_2 {
|
||
padding-bottom: 2vh;
|
||
}
|
||
|
||
/* 预留信息 */
|
||
.Reserve {
|
||
height: 280px;
|
||
margin: 3vw 0 0 2vw;
|
||
padding: 0 4vw;
|
||
width: 86vw;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.Reserve_1 {
|
||
font-size: 40px;
|
||
line-height: 90px;
|
||
height: 90px;
|
||
border-bottom: 2px solid #E5E5E5;
|
||
}
|
||
|
||
.Reserve_2, .Reserve_3 {
|
||
display: flex;
|
||
}
|
||
|
||
.Reserve_2 > div, .Reserve_3 > div {
|
||
width: 50vw;
|
||
margin-top: 2vh;
|
||
}
|
||
|
||
.Reserve_2 > div:nth-child(1), .Reserve_3 > div:nth-child(1) {
|
||
color: #999999;
|
||
}
|
||
|
||
.Reserve_2 > div:nth-child(2), .Reserve_3 > div:nth-child(2) {
|
||
text-align: right;
|
||
}
|
||
|
||
.contents_s {
|
||
display: flex;
|
||
border-top: 2px solid #E5E5E5;
|
||
background-color: #FFFFFF;
|
||
width: 94vw;
|
||
margin-left: 2vw;
|
||
height: 150px;
|
||
}
|
||
|
||
.contents_s2 {
|
||
width: 20vw !important;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
border-radius: 60px;
|
||
text-align: center;
|
||
border: 1px solid #FF5C6D;
|
||
color: #FF5C6D;
|
||
margin: 2vh 0 0 70vw;
|
||
}
|
||
|
||
/* 核销码 */
|
||
.Wcodes {
|
||
display: flex;
|
||
margin-left: 15vw;
|
||
}
|
||
|
||
.imgCode {
|
||
width: 25vw;
|
||
height: 200px;
|
||
margin-top: -5vh;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div class="main">
|
||
<!-- 商家配送 -->
|
||
<div class="navs" v-if="delivery_type==1">
|
||
<el-steps :active="steps1" finish-status="success">
|
||
<el-step title="待发货"></el-step>
|
||
<el-step title="交易完成"></el-step>
|
||
</el-steps>
|
||
</div>
|
||
<!-- 订单自提 -->
|
||
<div class="navs" v-if="delivery_type==2">
|
||
<el-steps :active="steps2" finish-status="success">
|
||
<el-step title="待自提"></el-step>
|
||
<el-step title="交易完成"></el-step>
|
||
</el-steps>
|
||
</div>
|
||
<!-- 商品图片 -->
|
||
<div class="contenta">
|
||
<div><img :src="picture" alt="" class="imgs1"></div>
|
||
<div class="contenta_1">
|
||
<div>{{commodity_name}}</div>
|
||
<div>{{commodity_type}}</div>
|
||
</div>
|
||
</div>
|
||
<!-- 自提订单预留信息 -->
|
||
<div class="Reserve" v-if="delivery_type==2">
|
||
<div class="Reserve_1">预留信息</div>
|
||
<div class="Reserve_2">
|
||
<div>姓名</div>
|
||
<div>{{username}}</div>
|
||
</div>
|
||
<div class="Reserve_3">
|
||
<div>手机号码</div>
|
||
<div>{{phone}}</div>
|
||
</div>
|
||
</div>
|
||
<!-- 订单信息 -->
|
||
<div class="contents">
|
||
<div class="contents_1">商家配送</div>
|
||
<div class="contents_2">
|
||
<div>订单号</div>
|
||
<div>{{Orders}}</div>
|
||
</div>
|
||
<div class="contents_3">
|
||
<div>领取时间</div>
|
||
<div>{{times1}}</div>
|
||
</div>
|
||
<div class="contents_4">
|
||
<div>配送方式</div>
|
||
<div>{{send_name}}</div>
|
||
</div>
|
||
</div>
|
||
<!-- 自提订单的数据 -->
|
||
<div class="contentzt" v-if="delivery_type == 2">
|
||
<div class="contentzt_2">
|
||
<div>自提门店</div>
|
||
<div>{{store_name}}</div>
|
||
</div>
|
||
</div>
|
||
<!-- 订单信息按钮 -->
|
||
<div class="contents_5" v-if="delivery_type==1">
|
||
<div class="contents_51">物流信息</div>
|
||
</div>
|
||
<div class="contents_s" v-if="delivery_type==2">
|
||
<div class="contents_s2" @click="Writecsode">核销码</div>
|
||
<el-dialog
|
||
:visible.sync="dialogVisible"
|
||
width="60%"
|
||
height="1000px"
|
||
:show-close="false"
|
||
>
|
||
<div slot="title">
|
||
核销码
|
||
</div>
|
||
<div slot="footer" class="Wcodes" v-if="receive_code!=null"><img id="imgCode" class="imgCode"/></div>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
<script type="text/javascript" src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
|
||
<script type="text/javascript" src="__PUBLIC__/receipt/JsBarcode.js"></script>
|
||
<script>
|
||
function getQueryVariable(variable) {
|
||
var query = window.location.search.substring(1);
|
||
var vars = query.split("&");
|
||
for (var i = 0; i < vars.length; i++) {
|
||
var pair = vars[i].split("=");
|
||
if (pair[0] == variable) {
|
||
return pair[1];
|
||
}
|
||
}
|
||
return (false);
|
||
}
|
||
</script>
|
||
<script type="text/javascript">
|
||
var app = new Vue({
|
||
el: '#app',
|
||
data: function () {
|
||
return {
|
||
dialogVisible: false,
|
||
steps1: 1,//商家配送步骤
|
||
steps2: 1,//订单自提步骤
|
||
send_name: '',//配送方式的名称
|
||
username: '',//预留信息姓名
|
||
phone: '',//预留信息手机号
|
||
Orders: '',//订单号
|
||
times1: '',//领取时间
|
||
store_name: '',//自提门店
|
||
picture: "",//商品图片
|
||
commodity_name: '',//商品名称
|
||
commodity_type: '',//商品类型
|
||
receive_code: '',//核销码
|
||
win_id: '',//中奖id
|
||
delivery_type: '',//配送方式
|
||
}
|
||
},
|
||
methods: {
|
||
// 核销码
|
||
Writecsode() {
|
||
if (this.receive_code != '') {
|
||
this.dialogVisible = true
|
||
$("#imgCode").JsBarcode(this.receive_code);
|
||
} else {
|
||
this.$message('无核销码');
|
||
}
|
||
},
|
||
// 自提详情
|
||
mentions() {
|
||
$.ajax({
|
||
url: '{:U("Turntable/getDeliveryOrder")}',
|
||
type: 'post',
|
||
data: {
|
||
win_id: this.win_id,
|
||
delivery_type: this.delivery_type
|
||
},
|
||
dataType: 'json',
|
||
success: res => {
|
||
console.log(res.data);
|
||
this.steps2 = res.data.delivery_status;//配送状态：1待配送 2已发放
|
||
this.Orders = res.data.order_num;//订单号
|
||
// this.times1 = res.data.receive_time;//领取时间戳
|
||
this.times1 = parseInt(new Date(res.data.receive_time * 1000).getFullYear()) + '-' +
|
||
parseInt(new Date(res.data.receive_time * 1000).getMonth() + 1) + '-' +
|
||
parseInt(new Date(res.data.receive_time * 1000).getDate()) + '--' +
|
||
parseInt(new Date(res.data.receive_time * 1000).getHours()) + '.' +
|
||
parseInt(new Date(res.data.receive_time * 1000).getMinutes()) + '.' +
|
||
parseInt(new Date(res.data.receive_time * 1000).getSeconds())
|
||
this.picture = res.data.prize_img;//商品图片地址
|
||
this.commodity_name = res.data.prize_name;//奖品名
|
||
if (res.data.prize_type == 1) {
|
||
this.commodity_type = "实物"
|
||
} else if (res.data.prize_type == 2) {
|
||
this.commodity_type = "门店商品"
|
||
}
|
||
this.store_name = res.data.shop_name;// 门店名
|
||
// this.steps1 = res.data.shop_lat;//门店维度
|
||
// this.steps1 = res.data.shop_lng;//门店经度
|
||
this.username = res.data.username;//自提预留姓名
|
||
this.phone = res.data.phone;//自提预留手机号
|
||
this.receive_code = res.data.receive_code;//自提单 核销码
|
||
if (this.delivery_type == 1) {
|
||
this.send_name = "商家配送"
|
||
} else if (this.delivery_type == 2) {
|
||
this.send_name = "订单自提"
|
||
}
|
||
}
|
||
})
|
||
},
|
||
},
|
||
mounted: function () {
|
||
this.win_id = getQueryVariable('win_id')//中奖id
|
||
this.delivery_type = parseInt(getQueryVariable('send_type'))//配送方式
|
||
this.mentions();
|
||
}
|
||
})
|
||
</script>
|
||
</html> |