1hjz
/
1hjz-h5
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

v 2.4.1

feature/feature-compatible
wangkesi 7 years ago
parent
f1a16f1588
commit
87ac2d39f6
21 changed files with 1202 additions and 475 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      package.json
  2. 26
      src/api/order.js
  3. BIN
      src/assets/images/order-list/address.png
  4. BIN
      src/assets/images/order-list/coupon.png
  5. BIN
      src/assets/images/order-list/edit.png
  6. BIN
      src/assets/images/order-list/true.png
  7. BIN
      src/assets/images/order-list/wechat.png
  8. 385
      src/assets/styles/style.css
  9. 7
      src/components/back-header.vue
  10. 110
      src/components/order-item.vue
  11. 92
      src/main.js
  12. 37
      src/models/home-model.js
  13. 41
      src/models/order-model.js
  14. 135
      src/models/utils-model.js
  15. 153
      src/models/wxShare.js
  16. 2
      src/router/index.js
  17. 4
      src/view/home.vue
  18. 10
      src/view/month-card.vue
  19. 304
      src/view/order-check.vue
  20. 308
      src/view/order-detail.vue
  21. 62
      src/view/order-list.vue

1
package.json
View File

@ -50,6 +50,7 @@
"opn": "^4.0.2",
"optimize-css-assets-webpack-plugin": "^1.3.2",
"ora": "^1.3.0",
"qs": "^6.5.2",
"rimraf": "^2.6.2",
"sass-loader": "^6.0.6",
"semver": "^5.4.1",

26
src/api/order.js
View File

@ -0,0 +1,26 @@
export default {
getList: {
url: "/mall/web/order/list",
method: "get"
},
getDetail: {
url: "/mall/web/order/detail",
method: "get"
},
checkOrder: {
url: "/mall/web/order/prepare",
method: "post"
},
cancel: {
url: "/mall/web/order/cancel",
method: "put"
},
addOrder: {
url: "/mall/web/order/new",
method: "post"
},
payMoney: {
url: "/mall/web/order/pay",
method: "put"
}
};

BIN
src/assets/images/order-list/address.png
View File

Before After
Width: 51  |  Height: 42  |  Size: 1.2 KiB

BIN
src/assets/images/order-list/coupon.png
View File

Before After
Width: 53  |  Height: 44  |  Size: 1.8 KiB

BIN
src/assets/images/order-list/edit.png
View File

Before After
Width: 51  |  Height: 51  |  Size: 1.3 KiB

BIN
src/assets/images/order-list/true.png
View File

Before After
Width: 58  |  Height: 46  |  Size: 1.5 KiB

BIN
src/assets/images/order-list/wechat.png
View File

Before After
Width: 95  |  Height: 78  |  Size: 4.2 KiB

385
src/assets/styles/style.css
View File

@ -2,21 +2,24 @@
margin: 0;
padding: 0;
}
input:focus,button:focus,textarea:focus {
input:focus,
button:focus,
textarea:focus {
outline: none;
}
html,body {
html,
body {
width: 100%;
height: 100%;
/*overflow-y: scroll;*/
position: relative;
-webkit-overflow-scrolling : touch;
background:rgba(243,243,243,1);
-webkit-overflow-scrolling: touch;
background: rgba(243, 243, 243, 1);
}
#app {
width: 100%;
height: 100%;
height: 100%;
}
.m-page {
@ -28,15 +31,15 @@ html,body {
.m-month-card {
width: 100%;
height: 100%;
background-color: #FFF3E8;
background-color: #fff3e8;
}
.m-slider {
.m-slider {
height: 175px;
}
.m-slider img {
object-fit: cover;
}
.month-card-title {
.month-card-title {
background-color: #fff;
padding-bottom: 52px;
padding-top: 10px;
@ -57,14 +60,14 @@ html,body {
color: #333;
}
.month-card-area {
position: relative;
position: relative;
height: 100%;
background-color: #FFF3E8;
padding-left:15px;
background-color: #fff3e8;
padding-left: 15px;
}
.month-card {
position: relative;
top: -40px;
top: -40px;
padding: 5px 10px 10px 0;
background: url(../images/coupon-bg-red@1x.png) no-repeat 0 0 /100% 100%;
}
@ -98,13 +101,13 @@ html,body {
.limit-buy {
font-size: 10px;
line-height: 12px;
color: #FFBAA9;
color: #ffbaa9;
}
.end-date {
margin-top: 10px;
font-size: 9px;
line-height: 14px;
color: #FFBAA9;
color: #ffbaa9;
}
.qrcode-img {
@ -123,8 +126,8 @@ html,body {
padding-left: 10px;
}
.month-card .f-font-45 {
font-size: 30px;
.month-card .f-font-45 {
font-size: 30px;
}
.month-card .get-btn {
@ -148,12 +151,11 @@ html,body {
}
}
/*公共样式*/
.container {
width: 100%;
min-height: 100%;
box-sizing: border-box;
width: 100%;
min-height: 100%;
box-sizing: border-box;
}
.btn-md {
@ -178,15 +180,15 @@ html,body {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #FE9B36;
border: 1px solid #fe9b36;
background: none;
line-height: 23px;
}
.bg-orange {
background-color: #FE9B36;
background-color: #fe9b36;
}
.bg-gray {
background-color: #D4D4D4;
background-color: #d4d4d4;
}
.f-mt5 {
margin-top: 5px;
@ -256,7 +258,7 @@ html,body {
.f-font-13 {
font-size: 13px;
}
.f-font-15 {
.f-font-15 {
font-size: 15px;
line-height: 17px;
}
@ -277,13 +279,13 @@ html,body {
font-weight: bold;
}
.s-orange {
color: #FE9B36;
color: #fe9b36;
}
.s-orange-1 {
color: #E6A96C;
color: #e6a96c;
}
.s-orange-2 {
color: #FF9363;
color: #ff9363;
}
.s-white {
color: #fff;
@ -299,7 +301,7 @@ html,body {
}
.s-red {
font-weight: bold;
color: #F45252 !important;
color: #f45252 !important;
}
.line-through {
text-decoration: line-through;
@ -314,24 +316,24 @@ html,body {
position: absolute;
}
.f-ellipsis-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
overflow: hidden;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 1;
overflow: hidden;
-webkit-box-orient: vertical;
}
.f-ellipsis-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
-webkit-box-orient: vertical;
/* autoprefixer: off*/
/* autoprefixer: on*/
display: -webkit-box;
-webkit-line-clamp: 2;
overflow: hidden;
-webkit-box-orient: vertical;
/* autoprefixer: off*/
/* autoprefixer: on*/
}
.f-inb {
display: inline-block;
}
.weui-toast {
.weui-loading_toast .weui-toast {
width: 100%;
min-height: 100% !important;
overflow: hidden;
@ -341,42 +343,41 @@ html,body {
margin-top: 75%;
}
@media (-webkit-min-device-pixel-ratio: 2) {
.f-bb-gray::after {
height: 1px;
content: '';
width: 100%;
border-bottom: 1px solid #EEEEEE;
position: absolute;
bottom: -1px;
right: 0;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
}
.f-all-1px::after {
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #EEEEEE;
border-radius: 2px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
z-index: -1;
}
}
.f-bb-gray::after {
height: 1px;
content: "";
width: 100%;
border-bottom: 1px solid #eeeeee;
position: absolute;
bottom: -1px;
right: 0;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
}
.f-all-1px::after {
content: "";
position: absolute;
top: 0;
left: 0;
border: 1px solid #eeeeee;
border-radius: 2px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
z-index: -1;
}
}
/******我的钱包******/
.page-top {
width: 100%;
height: 0.9rem;
background:rgba(0,186,134,1);
background: rgba(0, 186, 134, 1);
display: flex;
align-items: center;
position: relative;
@ -387,7 +388,7 @@ html,body {
height: 0.36rem;
display: inline-block;
position: absolute;
left: 0.3rem
left: 0.3rem;
}
.page-top a img {
height: 0.36rem;
@ -396,9 +397,9 @@ html,body {
.page-top span {
display: inline-block;
margin: auto;
font-size:0.36rem;
font-family:PingFang-SC-Medium;
color:rgba(255,255,255,1);
font-size: 0.36rem;
font-family: PingFang-SC-Medium;
color: rgba(255, 255, 255, 1);
letter-spacing: 1px;
}
@ -407,7 +408,7 @@ html,body {
.popup-box {
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
background: rgba(0, 0, 0, 0.6);
position: fixed;
display: flex;
align-items: center;
@ -419,16 +420,16 @@ html,body {
.popup-centent {
position: relative;
background:rgba(255,255,255,1);
background: rgba(255, 255, 255, 1);
margin-top: -2rem;
}
.popup-centent span.closeBtn {
.popup-centent span.closeBtn {
position: absolute;
right: .1rem;
right: 0.1rem;
top: 5px;
width: .35rem;
height: .35rem;
width: 0.35rem;
height: 0.35rem;
display: block;
}
.popup-centent span.closeBtn img {
@ -442,14 +443,14 @@ html,body {
top: 0.9rem;
bottom: 0;*/
overflow-y: scroll;
-webkit-overflow-scrolling : touch;
-webkit-overflow-scrolling: touch;
}
.put-money .content-box {
width: 7rem;
margin: auto;
margin-top: 0.3rem;
border: 1px solid #DCDCDC;
border: 1px solid #dcdcdc;
border-radius: 5px;
/* padding: 0.5rem 0.35rem 1rem; */
box-sizing: border-box;
@ -458,13 +459,13 @@ html,body {
.put-money .content-box .account {
padding: 0.5rem 0.35rem 0.3rem;
border-bottom: 1px solid #DCDCDC;
border-bottom: 1px solid #dcdcdc;
}
.put-money .content-box .account div {
font-size:0.3rem;
font-family:PingFang-SC-Medium;
color:rgba(51,51,51,1);
font-size: 0.3rem;
font-family: PingFang-SC-Medium;
color: rgba(51, 51, 51, 1);
align-items: center;
display: flex;
}
@ -473,13 +474,13 @@ html,body {
width: 0.4rem;
height: 0.4rem;
margin-left: 3px;
margin-right: 5px;
margin-right: 5px;
}
.put-money .content-box .account p {
font-size:0.2rem;
font-family:PingFang-SC-Medium;
color:rgba(153,153,153,1);
font-size: 0.2rem;
font-family: PingFang-SC-Medium;
color: rgba(153, 153, 153, 1);
text-align: center;
}
@ -488,28 +489,28 @@ html,body {
}
.put-money .content-box .cash .cash-cue {
font-size:0.3rem;
font-family:PingFang-SC-Medium;
color:rgba(51,51,51,1);
font-size: 0.3rem;
font-family: PingFang-SC-Medium;
color: rgba(51, 51, 51, 1);
}
.put-money .content-box .cash .cash-cue span {
font-size:0.24rem;
font-family:PingFang-SC-Regular;
color:rgba(153,153,153,1);
font-size: 0.24rem;
font-family: PingFang-SC-Regular;
color: rgba(153, 153, 153, 1);
}
.put-money .content-box .cash .cash-cue span.active {
color: #F45252;
color: #f45252;
}
.put-money .content-box .cash .money {
width: 100%;
display: block;
border-bottom: 1px solid #D2D2D2;
border-bottom: 1px solid #d2d2d2;
}
.put-money .content-box .cash .money span {
font-size:0.6rem;
font-family:PingFang-SC-Regular;
color:rgba(51,51,51,1);
font-size: 0.6rem;
font-family: PingFang-SC-Regular;
color: rgba(51, 51, 51, 1);
}
.put-money .content-box .cash .money input {
@ -519,19 +520,19 @@ html,body {
}
.put-money .content-box .cash p {
font-size:0.3rem;
font-family:PingFang-SC-Medium;
color:rgba(153,153,153,1);
font-size: 0.3rem;
font-family: PingFang-SC-Medium;
color: rgba(153, 153, 153, 1);
margin-top: 0.25rem;
}
.put-money .content-box .cash button {
width:4.68rem;
height:0.76rem;
background:rgba(0,186,134,.5);
width: 4.68rem;
height: 0.76rem;
background: rgba(0, 186, 134, 0.5);
border-radius: 5px;
color: #fff;
font-size:0.34rem;
font-size: 0.34rem;
border: none;
margin: auto;
display: block;
@ -539,15 +540,14 @@ html,body {
}
.put-money .content-box .cash button.ative {
background:#00BA86;
background: #00ba86;
}
.put-money #upper-limit {
position: absolute;
width: 3.2rem;
height: 2.9rem;
background: rgba(0,0,0,.6);
background: rgba(0, 0, 0, 0.6);
border-radius: 5px;
top: 2.8rem;
left: 2.15rem;
@ -558,25 +558,23 @@ html,body {
width: 1rem;
height: 1rem;
display: block;
margin: .5rem auto;
margin: 0.5rem auto;
}
.put-money #upper-limit p {
font-size:0.26rem;
font-family:PingFang-SC-Medium;
color:rgba(255,255,255,1);
font-size: 0.26rem;
font-family: PingFang-SC-Medium;
color: rgba(255, 255, 255, 1);
text-align: center;
}
.put-money-success .content-box {
width:6.9rem;
height:5.4rem;
background:rgba(255,255,255,1);
width: 6.9rem;
height: 5.4rem;
background: rgba(255, 255, 255, 1);
border-radius: 5px;
margin: auto;
margin-top: .3rem;
margin-top: 0.3rem;
}
.put-money-success .content-box .box-top {
@ -588,91 +586,90 @@ html,body {
.put-money-success .content-box .box-top img {
width: 1rem;
margin-top: .6rem;
margin-bottom: .3rem;
margin-top: 0.6rem;
margin-bottom: 0.3rem;
}
.put-money-success .content-box .box-top p {
font-size:0.3rem;
font-family:PingFang-SC-Medium;
color:rgba(0,186,134,1);
font-size: 0.3rem;
font-family: PingFang-SC-Medium;
color: rgba(0, 186, 134, 1);
}
.put-money-success .content-box .box-top span {
font-size:0.24rem;
font-family:PingFang-SC-Medium;
color:rgba(153,153,153,1);
margin-top: .2rem;
font-size: 0.24rem;
font-family: PingFang-SC-Medium;
color: rgba(153, 153, 153, 1);
margin-top: 0.2rem;
}
.put-money-success .content-box .money-news {
width: 90%;
font-size:0.3rem;
font-family:PingFang-SC-Medium;
color:rgba(51,51,51,1);
font-size: 0.3rem;
font-family: PingFang-SC-Medium;
color: rgba(51, 51, 51, 1);
margin: auto;
margin-top: .7rem;
border-bottom: 1px solid #D2D2D2;
margin-top: 0.7rem;
border-bottom: 1px solid #d2d2d2;
}
.put-money-success .content-box .money-news span {
font-size:0.6rem;
font-family:PingFang-SC-Bold;
color:rgba(51,51,51,1);
font-size: 0.6rem;
font-family: PingFang-SC-Bold;
color: rgba(51, 51, 51, 1);
margin-left: 5px;
}
.put-money-success .goHome {
width:5rem;
height:0.8rem;
background:rgba(0,186,134,1);
border-radius:5px;
width: 5rem;
height: 0.8rem;
background: rgba(0, 186, 134, 1);
border-radius: 5px;
margin: auto;
display: block;
border: none;
font-size:0.36rem;
font-family:PingFang-SC-Medium;
color:rgba(255,255,255,1);
margin-top: .4rem;
font-size: 0.36rem;
font-family: PingFang-SC-Medium;
color: rgba(255, 255, 255, 1);
margin-top: 0.4rem;
}
.service-evaluation .page-content {
background: #fff;
}
.service-evaluation .page-content .line {
height: 5px;
background: #F4F4F4;
background: #f4f4f4;
}
.service-evaluation .page-content .cleaners-news {
padding: 0.3rem 0 0.3rem 0.3rem;
background-color: #fff;
}
.service-evaluation .page-content .cleaners-news p:nth-child(1) {
font-size:0.32rem;
font-family:PingFang-SC-Medium;
color:rgba(51,51,51,1);
font-size: 0.32rem;
font-family: PingFang-SC-Medium;
color: rgba(51, 51, 51, 1);
}
.service-evaluation .page-content .cleaners-news p:nth-child(2) {
font-size:0.26rem;
font-family:PingFang-SC-Medium;
color:rgba(102,102,102,1);
font-size: 0.26rem;
font-family: PingFang-SC-Medium;
color: rgba(102, 102, 102, 1);
}
.service-evaluation .evaluate {
position: relative;
}
.service-evaluation .evaluate .evaluate-question-btn {
width: .5rem;
height: .5rem;
width: 0.5rem;
height: 0.5rem;
display: block;
background: url(../images/service-evaluation/u578.png) no-repeat;
background-size: 100%;
background-size: 100%;
position: absolute;
right: .15rem;
top: .1rem;
right: 0.15rem;
top: 0.1rem;
}
.service-evaluation .evaluate .evaluate-tab {
display: flex;
align-items: center;
padding: .3rem 0;
border-bottom: 1px solid #F4F4F4;
padding: 0.3rem 0;
border-bottom: 1px solid #f4f4f4;
}
.service-evaluation .evaluate .evaluate-tab ul {
display: flex;
@ -681,22 +678,22 @@ html,body {
.service-evaluation .evaluate .evaluate-tab ul li {
list-style: none;
display: inline-block;
width: .6rem;
height: .6rem;
margin-right: .3rem;
width: 0.6rem;
height: 0.6rem;
margin-right: 0.3rem;
background: url(../images/service-evaluation/stars-1.png) no-repeat;
background-size: 100%;
}
.service-evaluation .evaluate .evaluate-tab label {
font-size:0.3rem;
font-family:PingFang-SC-Medium;
color:rgba(51,51,51,1);
margin-right: .4rem;
margin-left: .3rem;
font-size: 0.3rem;
font-family: PingFang-SC-Medium;
color: rgba(51, 51, 51, 1);
margin-right: 0.4rem;
margin-left: 0.3rem;
}
.service-evaluation .evaluate .evaluate-tab ul li.ative {
width: .6rem;
height: .6rem;
width: 0.6rem;
height: 0.6rem;
background: url(../images/service-evaluation/stars-2.png) no-repeat;
background-size: 100%;
}
@ -706,27 +703,27 @@ html,body {
height: 2rem;
display: block;
margin: auto;
margin-top: .4rem;
margin-top: 0.4rem;
resize: none;
background: #F4F4F4;
background: #f4f4f4;
border: none;
padding: .2rem;
padding: 0.2rem;
box-sizing: border-box;
font-size: .3rem;
color:rgba(153,153,153,1);
}
font-size: 0.3rem;
color: rgba(153, 153, 153, 1);
}
.service-evaluation .submitBtn {
width:5rem;
height:0.8rem;
background:rgba(0,186,134,1);
width: 5rem;
height: 0.8rem;
background: rgba(0, 186, 134, 1);
border-radius: 5px;
margin: auto;
display: block;
border: none;
font-size:0.36rem;
font-family:PingFang-SC-Medium;
color:rgba(255,255,255,1);
font-size: 0.36rem;
font-family: PingFang-SC-Medium;
color: rgba(255, 255, 255, 1);
letter-spacing: 10px;
margin-top: 1.5rem;
}
@ -736,22 +733,16 @@ html,body {
width: 90%;
left: 5%;
top: 7rem;
font-size: .3rem;
border: 1px solid #DDD;
font-size: 0.3rem;
border: 1px solid #ddd;
border-radius: 5px;
padding: .3rem;
padding: 0.3rem;
box-sizing: border-box;
}
.service-evaluation #popup-question .popup-body p {
line-height: .5rem;
line-height: 0.5rem;
}
.service-evaluation-status .evaluation-status-icon {
width: 2rem;
display: block;
@ -759,11 +750,11 @@ html,body {
margin-top: 1.8rem;
}
.service-evaluation-status .evaluation-status-box span {
font-size:0.36rem;
font-family:PingFang-SC-Medium;
color:rgba(0,186,134,1);
font-size: 0.36rem;
font-family: PingFang-SC-Medium;
color: rgba(0, 186, 134, 1);
display: block;
margin: auto;
margin-top: 0.3rem;
text-align: center;
}
}

7
src/components/back-header.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="header">
<img src="../assets/images/icon/arrow-left.png" />
<img src="../assets/images/icon/arrow-left.png" @click="back()" />
<div class="title">
<slot></slot>
</div>
@ -13,6 +13,11 @@ export default {
type: String,
default: ""
}
},
methods: {
back() {
location.href = this.path;
}
}
};
</script>

110
src/components/order-item.vue
View File

@ -1,37 +1,103 @@
<template>
<div class="item">
<router-link tag="div" class="item" :to="{name:'orderDetail',params:{id:id}}">
<div class="item-top">
<div class="item-top-address">广州站</div>
<div class="item-top-state">已取消</div>
<div class="item-top-box">
<img src="../assets/images/order-list/address.png">
<div class="item-top-address">{{address}}</div>
</div>
<div class="item-top-state" :class="'state'+status">{{state}}</div>
</div>
<div class="item-main">
<img src="">
<img :src="img">
<div class="item-main-text">
<div class="name">5A至臻家·体验卡</div>
<div class="tips">104次×4小时全屋高端保洁</div>
<div class="name">{{name}}</div>
<div class="tips">{{desc}}</div>
<div class="tag-box">
<i class="tag">新人优惠</i>
<i class="tag">新人优惠</i>
<i class="tag" v-for="item in labelList" v-if="item.labelText">{{item.labelText}}</i>
</div>
<div class="price-box">
<div class="box-left">¥18999</div>
<div class="box-left">¥{{totalPrice}}</div>
<div class="box-right">
<div class="box-right-text">
实付：
</div>
¥18999
¥{{pay}}
</div>
</div>
</div>
</div>
</div>
</router-link>
</template>
<script>
export default {
data() {
return {};
},
props: {}
props: {
address: {
type: String,
default: ""
},
status: {
type: Number,
default: ""
},
name: {
type: String,
default: ""
},
desc: {
type: String,
default: ""
},
label: {
type: String,
default: ""
},
totalPrice: {
type: Number,
default: ""
},
pay: {
type: Number,
default: ""
},
img: {
type: String,
default: ""
},
id: {
type: String,
default: ""
}
},
computed: {
state() {
let str = "";
switch (this.status) {
case 0:
str = "待支付";
break;
case 10:
case 11:
str = "已支付";
break;
case 20:
str = "退款中";
break;
case 21:
str = "已退款";
break;
case 30:
str = "已取消";
break;
}
return str;
},
labelList() {
return this.label ? JSON.parse(this.label) : "";
}
}
};
</script>
<style lang="scss" scoped>
@ -51,12 +117,32 @@ export default {
padding: 0 0.36rem 0 0.3rem;
line-height: 1;
align-items: center;
.item-top-box {
display: flex;
img {
width: 0.34rem;
height: 0.28rem;
margin-right: 0.2rem;
}
}
.item-top-address {
}
.item-top-state {
color: #999;
font-size: 0.28rem;
}
.state0 {
color: #fcac21;
}
.state10 {
color: #00ba86;
}
.state11 {
color: #00ba86;
}
.state20 {
color: #fc4f21;
}
}
.item-main {
display: flex;

92
src/main.js
View File

@ -1,38 +1,72 @@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import { WechatPlugin, AjaxPlugin, LoadingPlugin, ToastPlugin, AlertPlugin } from 'vux'
import App from './App'
import router from './router'
import '@/assets/iconfont.css'
import '@/assets/styles/main.scss'
import '@/assets/styles/style.css'
import '@/common/rem.js'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import $ from 'jquery'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import '@/assets/styles/swiper.css'
import Vue from "vue";
import { WechatPlugin, LoadingPlugin, ToastPlugin, AlertPlugin } from "vux";
import App from "./App";
import router from "./router";
import "@/assets/iconfont.css";
import "@/assets/styles/main.scss";
import "@/assets/styles/style.css";
import "@/common/rem.js";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import $ from "jquery";
import VueAwesomeSwiper from "vue-awesome-swiper";
import "@/assets/styles/swiper.css";
//import wx from 'weixin-js-sdk'
//import axios from 'axios'
import '@/models/wxShare.js'
import "@/models/wxShare.js";
Vue.config.productionTip = false
Vue.use(WechatPlugin)
Vue.use(AjaxPlugin)
Vue.use(LoadingPlugin)
Vue.use(ToastPlugin)
Vue.use(AlertPlugin)
Vue.config.productionTip = false;
Vue.use(WechatPlugin);
Vue.use(LoadingPlugin);
Vue.use(ToastPlugin);
Vue.use(AlertPlugin);
Vue.use(VueAwesomeSwiper)
Vue.use(VueAwesomeSwiper);
Vue.mixin({
data() {
return {
imghost: "http://medou.oss-cn-shenzhen.aliyuncs.com/"
};
},
methods: {
isWeixin() {
var ua = navigator.userAgent.toLowerCase();
return ua.indexOf("micromessenger") !== -1;
},
setToken() {
var strCookie = document.cookie;
var cookieName = "1hjz_mall_login_access_token=";
var token = strCookie.slice(cookieName.length);
sessionStorage.setItem("token", token);
},
getParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var reg_rewrite = new RegExp("(^|/)" + name + "/([^/]*)(/|$)", "i");
var r = window.location.search.substr(1).match(reg);
var q = window.location.pathname.substr(1).match(reg_rewrite);
if (r != null) {
return unescape(r[2]);
} else if (q != null) {
return unescape(q[2]);
} else {
return null;
}
}
},
mounted() {
this.setToken();
}
});
var vue = new Vue({
el: '#app',
router,
template: '<App/>',
components: {
App
}
})
//vue.wxShare();
el: "#app",
router,
template: "<App/>",
components: {
App
}
});
//vue.wxShare();

37
src/models/home-model.js
View File

@ -1,28 +1,21 @@
import utilsModel from './utils-model'
import homeApi from '../api/home'
import utilsModel from "./utils-model";
import homeApi from "../api/home";
export default {
getGoods : (params) =>
utilsModel
.config(homeApi.getGoods)
.request({
params : params,
getGoods: params =>
utilsModel.config(homeApi.getGoods).request({
params: params
}),
getAddress : () =>
utilsModel
.config(homeApi.getAddress)
.request({
headers: {
'version': '2.50'
getAddress: () =>
utilsModel.config(homeApi.getAddress).request({
headers: {
version: "2.5.0"
}
}),
getdefaultAddress : () =>
utilsModel
.config(homeApi.getdefaultAddress)
.request({
headers: {
'version': '2.50'
getdefaultAddress: () =>
utilsModel.config(homeApi.getdefaultAddress).request({
headers: {
version: "2.5.0"
}
}),
}
})
};

41
src/models/order-model.js
View File

@ -0,0 +1,41 @@
import utilsModel from "./utils-model";
import order from "../api/order.js";
export default {
getList: (params, version) =>
utilsModel.config(order.getList).request({
params: params,
headers: {
version: version
}
}),
getDetail: params =>
utilsModel.config(order.getDetail).request({
params: params
}),
checkOrder: data =>
utilsModel.config(order.checkOrder).request({
data: data,
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
}),
cancel: data =>
utilsModel.config(order.cancel).request({
data: data
}),
addOrder: data =>
utilsModel.config(order.addOrder).request({
data: data,
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
}),
payMoney: data =>
utilsModel.config(order.payMoney).request({
data: data,
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
})
};

135
src/models/utils-model.js
View File

@ -1,37 +1,44 @@
import configs from '../configs';
import axios from 'axios'
import {
bus
} from '../bus.js'
import configs from "../configs";
import axios from "axios";
import { bus } from "../bus.js";
// axios.defaults.withCredentials = true;
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';//配置请求头
let instance = axios.create();
// 添加一个请求拦截器
// axios.interceptors.request.use(function (config) {
// console.log(config);
// return config;
// }, function (error) {
// // Do something with request error
// return Promise.reject(error);
// });
instance.interceptors.request.use(
config => {
// let token = sessionStorage.getItem("token") || "";
// if (token) {
// config.headers.encodeToken = token;
// }
config.headers.encodeToken =
"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE1NzEyMjQ3Mjc1OTcsInBheWxvYWQiOiJcIjE4MDYwMTE0MDkyODM4NDEwMXwxNTM5Njg4NzI3NTc5XCIifQ.sJBefUfJwybtWTNauW3j-w8VA6BlV56ASKmgQvDJc_Y";
console.log(config);
return config;
},
err => {
return Promise.reject(err);
}
);
// 添加一个响应拦截器
axios.interceptors.response.use(function (response) {
if (response.data && response.data.errcode) {
if (parseInt(response.data.errcode) === 40001) {
//未登录
bus.$emit('goto', '/login')
instance.interceptors.response.use(
function(response) {
if (response.data && response.data.errcode) {
if (parseInt(response.data.errcode) === 40001) {
//未登录
bus.$emit("goto", "/login");
}
}
return response;
},
function(error) {
// Do something with response error
return Promise.reject(error);
}
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
);
//基地址
let basePath = configs.baseURL;
@ -47,74 +54,80 @@ let basePath = configs.baseURL;
*
* Inspired by pathRexp in visionmedia/express/lib/utils.js.
*/
const pathReplace = function (path, opts) {
const pathReplace = function(path, opts) {
const ret = {
originalPath: path,
patternPath: path
}
};
path = path
.replace(/([().])/g, '\\$1')
.replace(/(\/)?:(\w+)(\*\?|[?*])?/g, function (_, slash, key, option) {
const optional = (option === '?' || option === '*?') ? '?' : null;
const star = (option === '*' || option === '*?') ? '*' : null;
slash = slash || '';
opts[key] = typeof opts[key] === 'number' ? opts[key].toString() : opts[key];
return '' +
(optional ? '' : slash) +
(opts[key] != '' ?
opts[key] : '${' + key + '}') +
(optional || '');
})
.replace(/([().])/g, "\\$1")
.replace(/(\/)?:(\w+)(\*\?|[?*])?/g, function(_, slash, key, option) {
const optional = option === "?" || option === "*?" ? "?" : null;
const star = option === "*" || option === "*?" ? "*" : null;
slash = slash || "";
opts[key] =
typeof opts[key] === "number"
? opts[key].toString()
: opts[key];
return (
"" +
(optional ? "" : slash) +
(opts[key] != "" ? opts[key] : "${" + key + "}") +
(optional || "")
);
});
ret.patternPath = path;
return ret;
}
};
// 处理http请求
const config = function (config, params) {
const config = function(config, params) {
//提取接口url路径
const url = basePath + pathReplace(config.url, params || {}).patternPath;
return {
// 发送请求
request: function (obj) {
request: function(obj) {
// 全部接口带token
obj = obj || {}
obj.params = obj.params || {}
obj = obj || {};
obj.params = obj.params || {};
// obj.params.token = localStorage.getItem('user_key')
//整合请求配置
let newConfig = Object.assign({}, obj || {}, config, {
url: url,
url: url
});
// console.log(newConfig)
// console.log(newConfig)
// newConfig.headers.Authorization=params.token
//执行http接口请求
return axios(newConfig).then(successCallback, errorCallback);
return instance(newConfig).then(successCallback, errorCallback);
}
}
}
};
};
// 请求成功回调
const successCallback = (result) => {
const successCallback = result => {
// if (result.data.code === 666) {
// sessionStorage.removeItem("token");
// }
// -402用户认证失败，请重新登录 -101没有操作权限
if (result.data.error_code === -402) {
sessionStorage.clear()
localStorage.removeItem('user_key')
sessionStorage.clear();
localStorage.removeItem("user_key");
//未登录
bus.$emit('goto', '/login')
bus.$emit("goto", "/login");
}
return result.data
}
return result.data;
};
// 请求失败回调
const errorCallback = (result) => {
return result.data
}
const errorCallback = result => {
return result.data;
};
export default {
config: config
}
};

153
src/models/wxShare.js
View File

@ -1,96 +1,93 @@
import Vue from 'vue'
import wx from 'weixin-js-sdk'
import axios from 'axios'
import Vue from "vue";
import wx from "weixin-js-sdk";
import axios from "axios";
import wxShareModel from "../models/wxShare-model.js";
import homeApi from "../models/home-model.js";
//微信分享功能
Vue.prototype.wxShare = function(params) {
var params = params || {}
wxShareModel.getShare(params).then(response => {
console.log(response)
if ( response.code != 0 ){
return;
}
var jsApiSignConfig = response.data.jsApiSignConfig
var shareConfig = response.data.shareConfig
wx.config({
debug: false, // 开启调试模式,开发时可以开启
appId: jsApiSignConfig.appId, // 必填，公众号的唯一标识 由接口返回
timestamp: jsApiSignConfig.timestamp, // 必填，生成签名的时间戳 由接口返回
nonceStr: jsApiSignConfig.nonceStr, // 必填，生成签名的随机串 由接口返回
signature: jsApiSignConfig.signature, // 必填，签名 由接口返回
jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone']
})
var params = params || {};
wxShareModel.getShare(params).then(response => {
if (response.code != 0) {
return;
}
var jsApiSignConfig = response.data.jsApiSignConfig;
var shareConfig = response.data.shareConfig;
wx.config({
debug: false, // 开启调试模式,开发时可以开启
appId: jsApiSignConfig.appId, // 必填，公众号的唯一标识 由接口返回
timestamp: jsApiSignConfig.timestamp, // 必填，生成签名的时间戳 由接口返回
nonceStr: jsApiSignConfig.nonceStr, // 必填，生成签名的随机串 由接口返回
signature: jsApiSignConfig.signature, // 必填，签名 由接口返回
jsApiList: [
"onMenuShareAppMessage",
"onMenuShareTimeline",
"onMenuShareQQ",
"onMenuShareWeibo",
"onMenuShareQZone"
]
});
wx.ready(() => {
//获取“分享给朋友”按钮点击状态及自定义分享内容接口
wx.onMenuShareAppMessage({ // 分享给朋友
title: shareConfig.title, // 分享标题
desc: shareConfig.desc, // 分享描述
link: shareConfig.url, // 分享链接 默认以当前链接
imgUrl: shareConfig.img, // 分享图标
success: function(res){
}
})
//转发到朋友圈
wx.ready(() => {
//获取“分享给朋友”按钮点击状态及自定义分享内容接口
wx.onMenuShareAppMessage({
// 分享给朋友
title: shareConfig.title, // 分享标题
desc: shareConfig.desc, // 分享描述
link: shareConfig.url, // 分享链接 默认以当前链接
imgUrl: shareConfig.img, // 分享图标
success: function(res) {}
});
//转发到朋友圈
wx.onMenuShareTimeline({
title: shareConfig.title, // 分享标题
desc: shareConfig.desc, // 分享描述
link: shareConfig.url, // 分享链接 默认以当前链接
imgUrl: shareConfig.img, // 分享图标
success: function(res){
}
desc: shareConfig.desc, // 分享描述
link: shareConfig.url, // 分享链接 默认以当前链接
imgUrl: shareConfig.img, // 分享图标
success: function(res) {}
});
//微信分享qq
wx.onMenuShareQQ({
title: shareConfig.title, // 分享标题
desc: shareConfig.desc, // 分享描述
link: shareConfig.url, // 分享链接 默认以当前链接
imgUrl: shareConfig.img, // 分享图标
success: function(res){
}
});
//获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
wx.onMenuShareWeibo({
title: shareConfig.title, // 分享标题
desc: shareConfig.desc, // 分享描述
link: shareConfig.url, // 分享链接 默认以当前链接
imgUrl: shareConfig.img, // 分享图标
success: function(res){
}
});
//获取“分享到QQ空间”按钮点击状态及自定义分享内容接口（即将废弃）
wx.onMenuShareQZone({
title: shareConfig.title, // 分享标题
desc: shareConfig.desc, // 分享描述
link: shareConfig.url, // 分享链接 默认以当前链接
imgUrl: shareConfig.img, // 分享图标
success: function(res){
}
});
})
})
}
title: shareConfig.title, // 分享标题
desc: shareConfig.desc, // 分享描述
link: shareConfig.url, // 分享链接 默认以当前链接
imgUrl: shareConfig.img, // 分享图标
success: function(res) {}
});
//获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
wx.onMenuShareWeibo({
title: shareConfig.title, // 分享标题
desc: shareConfig.desc, // 分享描述
link: shareConfig.url, // 分享链接 默认以当前链接
imgUrl: shareConfig.img, // 分享图标
success: function(res) {}
});
//获取“分享到QQ空间”按钮点击状态及自定义分享内容接口（即将废弃）
wx.onMenuShareQZone({
title: shareConfig.title, // 分享标题
desc: shareConfig.desc, // 分享描述
link: shareConfig.url, // 分享链接 默认以当前链接
imgUrl: shareConfig.img, // 分享图标
success: function(res) {}
});
});
});
};
//Vue.prototype.wxShares = function(params) {
// var wxconfigApi = 'http://1hjz.3ncto.com.cn/mall/web/share/config';
// axios.get(wxconfigApi,{params:params}).then(function(response) {
//
//
// var response = response
// console.log('1111',response)
// var jsApiSignConfig = response.data.data.jsApiSignConfig
// var shareConfig = response.data.data.shareConfig
//
//
// wx.config({
// debug: false, // 开启调试模式,开发时可以开启
// debug: false, // 开启调试模式,开发时可以开启
// appId: jsApiSignConfig.appId, // 必填，公众号的唯一标识 由接口返回
// timestamp: jsApiSignConfig.timestamp, // 必填，生成签名的时间戳 由接口返回
// nonceStr: jsApiSignConfig.nonceStr, // 必填，生成签名的随机串 由接口返回
@ -126,7 +123,7 @@ Vue.prototype.wxShare = function(params) {
// success: function(res){
// }
// });
//
//
// //获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
// wx.onMenuShareWeibo({
// title: shareConfig.title, // 分享标题
@ -136,7 +133,7 @@ Vue.prototype.wxShare = function(params) {
// success: function(res){
// }
// });
//
//
// //获取“分享到QQ空间”按钮点击状态及自定义分享内容接口（即将废弃）
// wx.onMenuShareQZone({
// title: shareConfig.title, // 分享标题
@ -147,13 +144,13 @@ Vue.prototype.wxShare = function(params) {
// }
// });
// })
//
//
//
//
//
//
// })
// .catch(function(error) {
// console.log(error);
// });
//
//}
//
//}

2
src/router/index.js
View File

@ -76,7 +76,7 @@ let router = new Router({
component: resolve => require(["@/view/order-check.vue"], resolve)
},
{
path: "/order-detail",
path: "/order-detail/:id",
name: "orderDetail",
component: resolve => require(["@/view/order-detail.vue"], resolve)
},

4
src/view/home.vue
View File

@ -308,7 +308,7 @@ export default {
}
},
mounted() {
//异步加载
//异步加载
this.getdefaultAddress();
this.getAddress();
this.ShareWenXin();
@ -529,7 +529,7 @@ export default {
}
.home .page-content .new-card .card-list li .right .card-name i {
font-style: normal;
line-height: 1.5;
line-height: 1.5;
background: rgba(255, 242, 229, 1);
padding: 0.05rem 0.1rem;
// line-height: 0.28rem;

10
src/view/month-card.vue
View File

@ -117,8 +117,8 @@ export default {
}
that.getData = result.response;
} else {
//console.log(result.msg);
alert(result.msg);
console.log(result.msg);
// alert(result.msg);
}
});
},
@ -146,7 +146,7 @@ export default {
if (result.code === 0 || result.code === 3) {
window.history.go(0);
} else if (result.code === 666) {
that.$vux.toast.text("您还没登录，请先登录!", "middle");
that.$vux.toast.text("您还没登录，请先登录!", "middle");
setTimeout(function() {
window.location.href =
locationUrl +
@ -161,7 +161,7 @@ export default {
) {
result.msg = "操作失败，请刷新重试";
}
alert(result.msg);
// alert(result.msg);
}
});
},
@ -182,7 +182,7 @@ export default {
}
},
mounted() {
// 初始化
// 初始化
this.handleInit();
this.wxShare({
couponNo: this.batchNo,

304
src/view/order-check.vue
View File

@ -1,24 +1,24 @@
<template>
<div class="order-check-whole">
<back-header>
<back-header :path="'/mall/web/vgoods/detail/'+goodsNo">
订单确认
</back-header>
<div class="top">
<div class="goods-container">
<img src="">
<img :src="imghost+info.goodsImgUrl">
<div class="goods-main-container">
<div class="name">高端保洁铂金月卡</div>
<div class="name">{{info.goodsName}}</div>
<div class="box">
<div class="box-text">1次×4小时高端保洁 1次×4小时高端保洁 1次×4小时高端保洁 1次×4小时高端保洁 1次×4小时高端保洁 </div>
<div class="box-price">¥39911111</div>
<div class="box-text">{{info.shortDesc}}</div>
<div class="box-price">¥{{info.totalPrice/100}}</div>
</div>
</div>
</div>
<div class="gift-container">
<div class="gift-item">
<div class="gift-container" v-if="info.gifts&&info.gifts.length>0">
<div class="gift-item" v-for="item in info.gifts">
<div class="text">【赠品】</div>
<div class="name">高端保洁铂金月卡  高端保洁铂金月卡 高端保洁铂金月卡 高端保洁铂金月卡 高端保洁铂金月卡 高端保洁铂金月卡</div>
<div class="num">X1</div>
<div class="name">{{item.name}}</div>
<div class="num">x{{item.num}}</div>
</div>
</div>
</div>
@ -28,50 +28,231 @@
服务区域：
</div>
<div class="area-text">
广州市（天河区、海珠区、番禺区、白云区、越秀区、荔湾区、黄埔区）；佛山市（xxx区、xxx区、xxx区）
{{info.serviceAreaStr}}
</div>
</div>
<div class="coupon-container">
<div class="coupon-container" @click="go()">
<div class="coupon-left">
<div class="left-box">
<img src="../assets/images/order-list/location.png">
<img src="../assets/images/order-list/coupon.png">
<div class="text">
优惠券：
</div>
<div class="name">新人专属券新人专属券新人专属券新人专属券</div>
<div class="name" v-if="info.primeCoupon">{{info.primeCoupon.couponName}}</div>
</div>
<div class="price">-￥400</div>
<div class="price" v-if="info.primeCoupon">-￥{{info.primeCoupon.amount}}</div>
</div>
<img class="icon" src="../assets/images/order-list/arrow.png">
</div>
<div class="message-container">
<div class="title">
<img src="../assets/images/order-list/location.png">
<img src="../assets/images/order-list/edit.png">
留言备注：
</div>
<textarea placeholder="为了更好地为您服务，请简单说明您家的格局面积与保洁史"></textarea>
<textarea v-model="info.text" placeholder="为了更好地为您服务，请简单说明您家的格局面积与保洁史"></textarea>
</div>
<div class="pay-container">
<div class="text">支付方式</div>
<div class="text">支付方式：</div>
<div class="pay">
<img src="">
<img src="../assets/images/order-list/wechat.png">
微信支付
</div>
</div>
<div class="clause"></div>
<div class="clause">
<div class="true-box" @click="agree=!agree">
<img v-show="agree" src="../assets/images/order-list/true.png">
</div>
<div @click="agree=!agree">
我已阅读并同意
</div>
<div class="tips" @click="agree=!agree">
《一号家政服务协议书》
</div>
</div>
<div class="fill"></div>
<div class="button" role="button">
<div class="button-text">
还需支付：
<div class="num">¥{{info.payPrice?info.payPrice/100:''}}</div>
</div>
<button :disabled="!agree" @click="pay()">立即付款</button>
</div>
</div>
</template>
<script>
import backHeader from "../components/back-header.vue";
import orderApi from "../models/order-model.js";
var qs = require("qs");
export default {
data() {
return {};
return {
info: {
text: ""
},
agree: true,
goodsNo: ""
};
},
components: {
"back-header": backHeader
},
methods: {
getData() {}
getData() {
let goodsNo = this.getParam("goodsNo");
let couponNo = this.getParam("couponNo");
// let orderData = localStorage.getItem("orderData") || "";
let goodsVersion = this.getParam("goodsVersion");
orderApi
.checkOrder(
qs.stringify({
goodsNo: goodsNo,
couponNo: couponNo,
goodsVersion: goodsVersion
})
)
.then(res => {
if (res.code == 0) {
let data = res.response;
this.info = data;
} else if (res.code == 666) {
this.$vux.toast.text("您还没登录，请先登录!", "middle");
setTimeout(function() {
window.location.href = "/mall/web/user/login";
}, 2000);
} else {
if (
res.msg == "" ||
res.msg == undefined ||
res.msg == null
) {
res.msg = "操作失败，请刷新重试";
}
this.$vux.toast.text(res.msg, "middle");
}
this.$vux.loading.hide();
});
},
pay() {
this.addOrder().then(res => {
this.$vux.loading.show({
text: "正在调起支付"
});
if (this.isWeixin() && res.data.payPrice > 0) {
//微信内打开，直接调起微信公众号支付
this.$vux.loading.hide();
location.href = res.authUrl.replace(
"state=2",
"state=2" + "," + res.data.orderNo
);
} else {
var paymentType = res.data.payPrice > 0 ? 7 : 10;
orderApi
.payMoney(
qs.stringify({
orderNo: res.data.orderNo,
paymentType: paymentType
})
)
.then(data => {
this.$vux.loading.hide();
if (data && data.code === 0) {
if (paymentType === 7) {
var transMessageOutput = data.response;
var transInfo =
transMessageOutput.weixinTransParameters;
if (
transInfo.prepayid !== "" &&
transInfo.prepayid !== undefined &&
transInfo.prepayid != null
) {
window.location.href =
transInfo.mwebUrl;
}
} else {
setTimeout(function() {
window.location.href =
"/mall/web/order_index";
}, 2000);
}
} else if (data.code === 666) {
this.$vux.toast.text(
"您还没登录，请先登录!",
"middle"
);
setTimeout(function() {
window.location.href =
"/mall/web/user/login";
}, 2000);
} else {
if (
data.msg === "" ||
data.msg === undefined ||
data.msg == null
) {
data.msg = "操作失败，请刷新重试";
}
this.$vux.toast.text(data.msg, "middle");
setTimeout(function() {
window.location.href =
"/mall/web/order_index";
}, 2000);
}
});
}
});
},
addOrder() {
let goodsNo = this.getParam("goodsNo");
let couponNo = this.getParam("couponNo");
let goodsVersion = this.getParam("goodsVersion");
let promise = new Promise((resolve, reject) => {
orderApi
.addOrder(
qs.stringify({
goodsNo: goodsNo,
goodsNo: goodsNo,
couponNo: couponNo,
goodsVersion: goodsVersion,
remark: this.info.text
})
)
.then(res => {
if (res.code == 0) {
resolve(res.response);
} else if (res.code === 666) {
this.$vux.toast.text(
"您还没登录，请先登录!",
"middle"
);
setTimeout(function() {
window.location.href = "/mall/web/user/login";
}, 2000);
} else if (res.code === 200) {
this.$vux.toast.text(res.msg, "middle");
setTimeout(function() {
window.location.href = "/mall/web/order_index";
}, 2000);
} else {
if (
res.msg === "" ||
res.msg === undefined ||
res.msg == null
) {
res.msg = "操作失败，请刷新重试";
}
this.$vux.toast.text(res.msg, "middle");
}
});
});
return promise;
},
go() {
location.href = "/mall/web/coupon_index?" + this.goodsNo;
}
},
mounted() {
this.getData();
this.goodsNo = this.getParam("goodsNo");
}
};
</script>
@ -307,15 +488,80 @@ export default {
background-color: white;
font-size: 0.3rem;
line-height: 1;
justify-content: space-between;
margin-bottom: 0.3rem;
justify-content: space-between;
margin-bottom: 0.3rem;
display: flex;
align-items: center;
.pay{
display: flex;
}
align-items: center;
.pay {
display: flex;
align-items: center;
img {
width: 0.63rem;
margin-right: 0.2rem;
height: 0.52rem;
}
}
}
.clause {
// width: 100%;
padding-left: 0.36rem;
display: flex;
font-size: 0.28rem;
align-items: center;
margin-bottom: 0.66rem;
line-height: 1;
.true-box {
width: 0.23rem;
height: 0.23rem;
margin-right: 0.11rem;
border: 0.02rem solid #d0d0d0;
border-radius: 0.03rem;
position: relative;
z-index: 1;
}
img {
position: absolute;
left: 0;
// right: 0;
width: 0.31rem;
bottom: 0;
z-index: 2;
// width: 0.29rem;
// height: 0.23rem;
}
.tips {
color: #00ba86;
}
}
.clause{
.button {
width: 100%;
height: 1rem;
display: flex;
position: fixed;
bottom: 0;
justify-content: space-between;
background-color: white;
.button-text {
flex-grow: 1;
display: flex;
font-size: 0.3rem;
align-items: center;
line-height: 1;
padding-left: 0.3rem;
colo: #333;
.num {
font-size: 0.36rem;
color: #f42525;
}
}
button {
width: 3.5rem;
height: 1rem;
background-color: #00ba86;
color: white;
font-size: 0.36rem;
border-radius: 0px;
border: none;
}
}
</style>

308
src/view/order-detail.vue
View File

@ -1,100 +1,333 @@
<template>
<div class="order-detail-whole">
<back-header style="margin-bottom:0.15rem">
<back-header path="/v2/order-list" style="margin-bottom:0.15rem">
订单详情
</back-header>
<div class="goods-box">
<div class="item-top">
<div class="item-top-address">广州站</div>
<div class="item-top-state">已取消</div>
<div class="item-top-left">
<img src="../assets/images/order-list/address.png">
<div class="item-top-address">{{info.merchantName}}</div>
</div>
<div class="item-top-state">{{stateText}}</div>
</div>
<div class="item-main">
<img src="">
<img :src="imghost+info.goodsImgUrl">
<div class="item-main-text">
<div class="name">5A至臻家·体验卡</div>
<div class="name">{{info.goodsName}}</div>
<div class="tips-box">
<div class="tips">
104次×4小时全屋高端保洁
{{info.shortDesc}}
</div>
<div class="price">¥399</div>
<div class="price">¥{{info.totalPrice/100}}</div>
</div>
<div class="tag-box">
<i class="tag">新人优惠</i>
<i class="tag">新人优惠</i>
<i class="tag" v-for="item in labelList" v-if="item.labelText">{{item.labelText}}</i>
<!-- <i class="tag">新人优惠</i> -->
</div>
</div>
</div>
<div class="gift-box">
<div class="gift-item">
<div class="gift-box" v-if="info.gifts&&info.gifts.length>0">
<div class="gift-item" v-for="item in info.gifts">
<div class="text">【赠品】</div>
<div class="name">高端保洁铂金月卡</div>
<div class="num">x1</div>
<div class="name">{{item.goodsName}}</div>
<div class="num">x{{item.num}}</div>
</div>
</div>
</div>
<div class="message">
<div class="message-title">留言备注：</div>
<div class="box" role="text">
这里是留言内容，下面的的内容是展示超出换行样式的辅导费费大幅度发
{{info.remark}}
</div>
</div>
<div class="time-box">
<div class="time-item">下单时间：
<div class="time">2018-09-25 17:00:00</div>
<div class="time">{{info.create}}</div>
</div>
<div class="time-item">付款时间：
<div class="time">2018-09-25 17:00:00</div>
<div class="time">{{info.payTime}}</div>
</div>
</div>
<div class="money-box">
<div class="money-box-top">
<div class="order">
<div class="text">订单金额：</div>
<div class="num">¥399</div>
<div class="num">¥{{info.totalPrice/100}}</div>
</div>
<div class="discount">
<div class="text">
<div class="string">
优惠减免：
</div>
<span class="discount-name">(新人专享优惠券)</span>
<span class="discount-name" v-if="info.primeCoupon">{{info.primeCoupon.couponName}}</span>
</div>
<div class="num">¥20</div>
<div class="num">¥{{info.couponPrice/100}}</div>
</div>
</div>
<div class="money-box-bottom">
<div class="button-box" role="button">
<div class="money-box-bottom" :class="{right:state!==0||state!==10}">
<div class="button-box" role="button" v-if="state===0" @click="cancel()">
取消订单
</div>
<!-- <div class="button-box" role="button">
<div class="button-box" role="button" v-if="state===10" @click="go(3)">
申请退款
</div> -->
</div>
<div class="money">
实际支付：
<div class="money-count">¥379</div>
<div class="money-count">¥{{info.payPrice/100}}</div>
</div>
</div>
</div>
<div class="fill"></div>
<div class="button" role="button">
{{buttonText}}
<div class="button" role="button" v-if="state==30||state==21" @click="go(1)">
重新下单
</div>
<div class="button" role="button" v-if="state===0" @click="pay()">
立即付款
</div>
<div class="button" role="button" v-if="state==10||state==11" @click="go(2)">
预约服务
</div>
<div class="button" role="button" v-if="state==20">
<a href="tel:400-6080100">联系客服</a>
<!-- 联系客服 -->
</div>
</div>
</template>
<script>
import backHeader from "../components/back-header.vue";
import orderApi from "../models/order-model.js";
export default {
data() {
return {
state: "",
buttonText: "重新下单"
stateText: "",
orderNo: "",
info: {}
};
},
watch: {
state(val) {}
state(val) {
switch (val) {
case 0:
this.stateText = "待支付";
break;
case 10:
case 11:
this.stateText = "已支付";
break;
case 20:
this.stateText = "退款中";
break;
case 21:
this.stateText = "已退款";
break;
case 30:
this.stateText = "已取消";
break;
}
}
},
components: {
"back-header": backHeader
},
computed: {
labelList() {
let str = this.info.smallLabel;
return str ? JSON.parse(str) : "";
}
},
methods: {
getData() {
orderApi
.getDetail({
orderNo: this.orderNo
})
.then(res => {
if (res.code === 0 && res.response.data) {
let info = res.response.data;
info.create = info.createdAt
? this.getTime(info.createdAt)
: "";
info.payTime = info.payTime
? this.getTime(info.payTime)
: "";
this.info = JSON.parse(JSON.stringify(info));
this.state = res.response.data.status;
} else if (res.code == 666) {
this.$vux.toast.text("您还没登录，请先登录!", "middle");
setTimeout(function() {
window.location.href = "/mall/web/user/login";
}, 2000);
} else {
if (
res.msg == "" ||
res.msg == undefined ||
res.msg == null
) {
res.msg = "操作失败，请刷新重试";
}
this.$vux.toast.text(res.msg, "middle");
}
this.$vux.loading.hide();
});
},
getTime(time) {
let date = new Date(time);
let year = date.getFullYear();
let month = this.checkTime(date.getMonth() + 1);
let day = this.checkTime(date.getDate());
let h = this.checkTime(date.getHours());
let m = this.checkTime(date.getMinutes());
let s = this.checkTime(date.getSeconds());
let str =
year + "-" + month + "-" + day + " " + h + ":" + m + ":" + s;
return str;
},
checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
},
cancel() {
orderApi
.cancel({
orderApi: this.orderNo
})
.then(res => {
if (res.code == 0) {
this.state = 30;
}
});
},
go(num) {
if (num == 1) {
location.href = "/mall/web/vgoods/detail/" + this.info.goodsNo;
} else if (num == 2) {
location.href = "/mall/web/appoint_index";
} else if (num == 3) {
location.href =
"/mall/web/order_refund?" +
this.info.goodsNo +
"&" +
this.info.orderNo;
}
},
pay() {
this.addOrder().then(res => {
this.$vux.loading.show({
text: "正在调起支付"
});
if (isWeixin() && res.data.payPrice > 0) {
//微信内打开，直接调起微信公众号支付
this.$vux.loading.hide();
location.href = res.authUrl.replace(
"state=2",
"state=2" + "," + res.data.orderNo
);
} else {
var paymentType = res.data.payPrice > 0 ? 7 : 10;
orderApi
.pay({
orderNo: res.data.orderNo,
paymentType: paymentType
})
.then(data => {
this.$vux.loading.hide();
if (data.code === 0) {
if (paymentType === 7) {
var transMessageOutput = data.response;
var transInfo =
transMessageOutput.weixinTransParameters;
if (
transInfo.prepayid !== "" &&
transInfo.prepayid !== undefined &&
transInfo.prepayid != null
) {
window.location.href =
transInfo.mwebUrl;
}
} else {
setTimeout(function() {
window.location.href =
"/mall/web/order_index";
}, 2000);
}
} else if (data.code === 666) {
this.$vux.toast.text(
"您还没登录，请先登录!",
"middle"
);
setTimeout(function() {
window.location.href =
"/mall/web/user/login";
}, 2000);
} else {
if (
data.msg === "" ||
data.msg === undefined ||
data.msg == null
) {
data.msg = "操作失败，请刷新重试";
}
this.$vux.toast.text(data.msg, "middle");
setTimeout(function() {
window.location.href =
"/mall/web/order_index";
}, 2000);
}
});
}
});
},
addOrder() {
let goodsNo = this.info.goodsNo;
let couponNo = this.info.primeCoupon.couponNo;
let orderData = localStorage.getItem("orderData") || "";
let data = orderData ? JSON.parse(orderData) : "";
let promise = new Promise((resolve, reject) => {
orderApi
.addOrder({
goodsNo: goodsNo,
goodsNo: goodsNo,
couponNo: couponNo,
goodsVersion: data.goodsVersion
})
.then(res => {
if (res.code == 0) {
resolve(res.response);
} else if (res.code === 666) {
this.$vux.toast.text(
"您还没登录，请先登录!",
"middle"
);
setTimeout(function() {
window.location.href = "/mall/web/user/login";
}, 2000);
} else if (res.code === 200) {
this.$vux.toast.text(res.msg, "middle");
setTimeout(function() {
window.location.href = "/mall/web/order_index";
}, 2000);
} else {
if (
res.msg === "" ||
res.msg === undefined ||
res.msg == null
) {
res.msg = "操作失败，请刷新重试";
}
this.$vux.toast.text(res.msg, "middle");
}
});
});
return promise;
}
},
mounted() {
this.orderNo = this.$route.params.id;
this.getData();
}
};
</script>
@ -120,6 +353,15 @@ export default {
padding: 0 0.36rem 0 0.3rem;
line-height: 1;
align-items: center;
img {
width: 0.34rem;
height: 0.28rem;
margin-right: 0.2rem;
}
.item-top-left {
display: flex;
align-items: center;
}
.item-top-address {
}
.item-top-state {
@ -271,7 +513,7 @@ export default {
}
.time-box {
width: 100%;
height: 1.5rem;
// height: 1.5rem;
padding: 0.4rem 0.2rem;
background-color: #fff;
box-sizing: border-box;
@ -365,7 +607,7 @@ export default {
justify-content: center;
align-items: center;
border: 0.01rem solid rgba(220, 220, 220, 1);
border-radius:4px;
border-radius: 4px;
}
.button {
}
@ -380,6 +622,9 @@ export default {
}
}
}
.right {
justify-content: flex-end;
}
}
.fill {
width: 100%;
@ -396,6 +641,9 @@ export default {
line-height: 1rem;
color: #00ba85;
font-size: 0.36rem;
a {
color: #00ba85;
}
}
.green {
background: #00ba86;

62
src/view/order-list.vue
View File

@ -1,30 +1,76 @@
<template>
<div class="order-list-whole">
<back-header>
<back-header path="/mall/web/owner">
我的订单
</back-header>
<div class="state-bar">
<div class="state-item" @click="active=''" :class="{active:!active}">全部</div>
<div class="state-item" @click="active=1" :class="{active:active==1}">待支付</div>
<div class="state-item" @click="active=2" :class="{active:active==2}">已支付</div>
<div class="state-item" @click="active=3" :class="{active:active==3}">退款中</div>
<div class="state-item" @click="active=4" :class="{active:active==4}">已退款</div>
<div class="state-item" @click="active=''" :class="{active:active===''}">全部</div>
<div class="state-item" @click="active=0" :class="{active:active===0}">待支付</div>
<div class="state-item" @click="active=10" :class="{active:active==10}">已支付</div>
<div class="state-item" @click="active=20" :class="{active:active==20}">退款中</div>
<div class="state-item" @click="active=21" :class="{active:active==21}">已退款</div>
</div>
<order-item></order-item>
<order-item v-for="item in list" :id="item.orderNo" :pay="item.payPrice/100" :totalPrice="item.totalPrice/100" :name="item.goodsName" :desc="item.shortDesc" :address="item.merchantName" :status="item.status" :img="imghost+item.goodsImgUrl" :label="item.smallLabel"></order-item>
</div>
</template>
<script>
import orderItem from "../components/order-item.vue";
import backHeader from "../components/back-header.vue";
import orderApi from "../models/order-model.js";
export default {
data() {
return {
active: ""
active: "",
list: []
};
},
components: {
"back-header": backHeader,
"order-item": orderItem
},
watch: {
active(val) {
this.getData();
}
},
methods: {
getData() {
this.$vux.loading.show({
text: "Loading"
});
orderApi
.getList({
status: this.active
})
.then(res => {
if (res && res.code == 0) {
this.list = res.response.slice();
} else if (res.code == 666) {
this.$vux.toast.text("您还没登录，请先登录!", "middle");
setTimeout(function() {
window.location.href = "/mall/web/user/login";
}, 2000);
} else {
if (
res.msg == "" ||
res.msg == undefined ||
res.msg == null
) {
res.msg = "操作失败，请刷新重试";
}
this.$vux.toast.text(res.msg, "middle");
}
this.$vux.loading.hide();
});
}
},
mounted() {
// this.wxShare({
// merchantNo: merchantNo,
// source: 0,
// url: encodeURIComponent(location.href)
// });
this.getData();
}
};
</script>

Write Preview
Loading…
Cancel
Save