SxhGroup / sxhPersonalCenterZLB

Download as
Browse Code »

Commit 91ec018f8f18e34d94a037b015879f873fb5a8cd

Authored by 夏洋涛
1 parent 0cf3eb03
Exists in master

feat:新版功能基本搭建，等设计稿

Showing 7 changed files with 125 additions and 299 deletions   Show diff stats
src/main.js
  Diff comments   View file @91ec018
... ... @@ -7,6 +7,10 @@ import store from './store'
7 7 import Moment from 'moment'
8 8 Vue.prototype.Moment = Moment;
9 9  
  10 +// Vue.prototype.yanxueUrl = 'https://yanxue.myjxt.com';
  11 +
  12 +// import yxAxios from '@/https/yxAxios'
  13 +// Vue.prototype.yxAxios = yxAxios;
10 14  
11 15 import { mgop } from '@aligov/jssdk-mgop';
12 16 Vue.prototype.mgop = mgop;
... ...
src/router/index.js
  Diff comments   View file @91ec018
... ... @@ -33,6 +33,9 @@ import schoolFollow from '@/views/Travel/schoolFollow.vue' //已关注学校列è
33 33 import schoolAttestation from '@/views/Travel/schoolAttestation.vue' //已认è¯å­¦æ ¡åˆ—表
34 34 import classAttestation from '@/views/Travel/classAttestation.vue' //已集团æƒé™å¹´çº§ç­çº§åˆ—表
35 35  
  36 +import YanxuePage from '@/views/Yanxue/YanxuePage.vue' //研学
  37 +import YanxueDetail from '@/views/Yanxue/YanxueDetail.vue' //研学
  38 +
36 39 Vue.use(VueRouter)
37 40 const [routerPush, routerReplace] = [VueRouter.prototype.push, VueRouter.prototype.replace];
38 41 VueRouter.prototype.push = function push(to) {
... ... @@ -119,7 +122,7 @@ const routes = [{
119 122 name: 'ServiceOrderXST',
120 123 component: ServiceOrderXST,
121 124 meta: {
122   - title: '我的订å•'
  125 + title: '我的评价'
123 126 }
124 127 },
125 128 {
... ... @@ -250,6 +253,22 @@ const routes = [{
250 253 title: '集团认领'
251 254 }
252 255 },
  256 + {
  257 + path: '/YanxuePage',
  258 + name: 'YanxuePage',
  259 + component: YanxuePage,
  260 + meta: {
  261 + title: '研学'
  262 + }
  263 + },
  264 + {
  265 + path: '/YanxueDetail',
  266 + name: 'YanxueDetail',
  267 + component: YanxueDetail,
  268 + meta: {
  269 + title: '研学'
  270 + }
  271 + },
253 272  
254 273 ]
255 274 const router = new VueRouter({
... ...
src/views/Home/Home.vue
  Diff comments   View file @91ec018
... ... @@ -20,10 +20,10 @@
20 20 </div>
21 21 <HomeOrder></HomeOrder>
22 22 <div class="function">
23   - <div class="item" @click="handleMyCard">
  23 + <div class="item" @click="handleYanxue">
24 24 <div class="left">
25 25 <van-icon class="icon" name="discount" />
26   - <span>我的优惠券</span>
  26 + <span>研学</span>
27 27 </div>
28 28 <van-icon name="arrow" />
29 29 </div>
... ... @@ -107,9 +107,9 @@ export default {
107 107 },
108 108 },
109 109 methods: {
110   - // 研学码
  110 +
111 111 handleYanxue() {
112   - this.$router.push({ name: 'YanxueCode' })
  112 + this.$router.push({ name: 'YanxuePage' })
113 113 },
114 114 // 我的订单
115 115 handleOrder() {
... ...
src/views/Home/component/HomeOrder.vue
  Diff comments   View file @91ec018
1 1 <template>
2 2 <div class="home_order">
3 3 <div class="top">
4   - <p>我的订单</p>
  4 + <p>我的评价</p>
5 5 </div>
6 6 <div class="icon_box">
7 7 <!-- <div @click="handleCustom">
8 8 <img src="@/assets/home/icon_kq1.png" alt="">
9 9 <p>定制研学</p>
10 10 </div> -->
11   - <div @click="handleServiceOrder(0)">
  11 + <!-- <div @click="handleServiceOrder(0)">
12 12 <img src="@/assets/home/icon_kq2.png" alt="">
13 13 <p>待付款</p>
14 14 </div>
15 15 <div @click="handleServiceOrder(1)">
16 16 <img src="@/assets/home/icon_kq3.png" alt="">
17 17 <p>待使用</p>
18   - </div>
19   - <div @click="handleServiceOrder(2)">
20   - <img src="@/assets/home/icon_kq4.png" alt="">
  18 + </div> -->
  19 + <div @click="handleServiceOrder(0)">
  20 + <img src="@/assets/home/icon_kq4.png" alt="" />
21 21 <p>待评价</p>
22 22 </div>
23   - <div @click="handleServiceOrder(3)">
24   - <img src="@/assets/home/icon_kq5.png" alt="">
  23 + <div @click="handleServiceOrder(1)">
  24 + <img src="@/assets/home/icon_kq5.png" alt="" />
25 25 <p>已评价</p>
26 26 </div>
27   -
  27 + <div></div>
  28 + <div></div>
  29 + <div></div>
28 30 </div>
29 31 </div>
30 32 </template>
31 33 <script>
32 34 export default {
33   - props:{
34   - parent:{
35   - type:String,
36   - default:''
37   - }
  35 + props: {
  36 + parent: {
  37 + type: String,
  38 + default: '',
  39 + },
38 40 },
39 41 methods: {
40 42 // 定制研学
41   - handleCustom () {
42   - this.$toast('暂未开放，敬请期待！');
  43 + handleCustom() {
  44 + this.$toast('暂未开放，敬请期待！')
43 45 },
44   - handleServiceOrder (active) {
  46 + handleServiceOrder(active) {
45 47 this.$router.push({ name: 'ServiceOrderXST', query: { active: active } })
46   - }
47   - }
  48 + },
  49 + },
48 50 }
49 51 </script>
50 52 <style lang="scss" scoped>
... ... @@ -68,6 +70,9 @@ export default {
68 70 justify-content: space-between;
69 71 height: 140px;
70 72 margin-top: 20px;
  73 + div{
  74 + width: 80px;
  75 + }
71 76 img {
72 77 display: block;
73 78 width: 62px;
... ... @@ -81,16 +86,16 @@ export default {
81 86 }
82 87 </style>
83 88 <style lang="scss">
84   - .elder{
85   - .home_order{
86   - .top{
87   - p{
88   - font-size: 44px;
89   - }
  89 +.elder {
  90 + .home_order {
  91 + .top {
  92 + p {
  93 + font-size: 44px;
90 94 }
91   - .icon_box p{
92   - font-size: 34px;
93   - }
  95 + }
  96 + .icon_box p {
  97 + font-size: 34px;
94 98 }
95 99 }
96   -</style>
97 100 \ No newline at end of file
  101 +}
  102 +</style>
... ...
src/views/Service/ServiceOrderXST.vue
  Diff comments   View file @91ec018
1 1 <template>
2 2 <div class="myOrders">
3   - <!-- <van-nav-bar title="" left-text="返回首页" left-arrow @click-left="back" /> -->
4 3 <van-tabs v-model="active" :before-change="beforeTabChange">
5   - <van-tab title="待付款">
6   - <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoadpay()">
7   - <div class="showBoxDPJ" v-for="(item,index) in paylist" :key="index">
8   - <div class="topLine">
9   - <div class="topLineL">订单编号：{{item.orderpaynum}}</div>
10   - <div class="topLineR" style="color:#F64C37">待付款</div>
11   - </div>
12   - <div class="top" @click="toEdit(item)">
13   - <div class="pic">
14   - <img :src="item.coverUrl ? item.coverUrl : require('@/assets/service/defCoure.jpg')" alt="" style="width:100%;height:100%">
15   - </div>
16   - <div class="basefont">
17   - <div class="titlefont">{{item.baseName}}</div>
18   - <div class="tcfont">套餐名称：{{item.courseName}}</div>
19   - <div class="tcfont">数量*{{item.orderCount}}</div>
20   - </div>
21   - <div class="priceRight">¥{{item.paymoney}}</div>
22   - </div>
23   - <div class="detailsBox">
24   - <div class="detailsBoxOne">
25   - <div>订单创建时间</div>
26   - <div>{{item.intime.replace(/T/,' ')}}</div>
27   - </div>
28   - </div>
29   - </div>
30   - </van-list>
31   - </van-tab>
32   - <van-tab title="待使用">
33   - <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoadmove()">
34   - <div class="showBox" v-for="(item,index) in movelist" :key="index">
35   - <div class="top" @click="toEdit(item)">
36   - <div class="pic">
37   - <img :src="item.coverUrl ? item.coverUrl : require('@/assets/service/defCoure.jpg')" alt="" style="width:100%;height:100%">
38   - </div>
39   - <div class="basefont">
40   - <div class="titlefont">{{item.baseName}}</div>
41   - <div class="tcfont">套餐名称：{{item.courseName}}</div>
42   - <div class="tcfont">数量*{{item.orderCount}}</div>
43   - </div>
44   - <div class="priceRight">¥{{item.paymoney}}</div>
45   - </div>
46   - <div class="groupTime">
47   - <van-icon name="clock-o" /><span class="grey"> 活动日期</span><span> {{item.startDate}} - {{ item.endDate}}</span>
48   - </div>
49   - <div class="btnBox">
50   - <div></div>
51   - <div>
52   - <van-button class="btn" type="warning" plain size="small" @click="showPintuanAbout = true" style="margin-right:15px">退款说明</van-button>
53   - <!-- <van-button type="info" size="small" @click="makeCode(item.id)">核销码</van-button> -->
54   - <van-button class="btn" type="info" size="small" @click="toCode(item)">核销码</van-button>
55   - </div>
56   - </div>
57   - <div class="detailsBox">
58   - <div class="detailsBoxOne">
59   - <div>订单创建时间</div>
60   - <div>{{item.intime.replace(/T/,' ')}}</div>
61   - </div>
62   - <div class="detailsBoxOne">
63   - <div>订单编号</div>
64   - <div>{{item.orderpaynum}}</div>
65   - </div>
66   - </div>
67   - </div>
68   - </van-list>
69   - </van-tab>
70 4 <van-tab title="待评价">
71 5 <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoadCareer()">
72 6 <div class="showBoxDPJ" v-for="(item,index) in datalist" :key="index">
... ... @@ -132,58 +66,6 @@
132 66 </van-tab>
133 67 </van-tabs>
134 68  
135   - <!--二维码-->
136   - <!-- <div class="qrcodeBox" @click.self="qrcodeShow = false" v-show="qrcodeShow">
137   - <div id="qrcode"></div>
138   - </div> -->
139   -
140   - <!--退款说明-->
141   - <van-popup v-model="showPintuanAbout" round>
142   - <div class="pintuan_about">
143   - <img class="about_img" src="@/assets/service/tip.png" alt="">
144   - <p class="about_title">退款说明</p>
145   - <div class="about_box">
146   - <p class="about_content">1、凡拼团活动报名人数未达最低成团数，本团活动则不开营，系统将在72小时内，全额退还，且不产生违约风险赔偿。</p>
147   - <p class="about_content">2、如果您因行程发生变动需要取消预订，建议您尽可能提前与平台商户取得联系，并按商品订购须知或该商户旅游合同条款进行退款。</p>
148   - <p class="about_content" style="font-weight:bold">如若未声明与明确的，按《浙江省境内旅游合同》条款退款。</p>
149   - <!-- <p class="about_content">（1）出发前7日至4日，支付旅游费用总额的10%。</p>
150   - <p class="about_content">（2）出发前3日至1日，支付旅游费用总额的15%。</p>
151   - <p class="about_content">（3）出发当日，支付旅游费用总额的20%。</p> -->
152   - </div>
153   - <p class="about_know" @click="showPintuanAbout=false">我知道了</p>
154   - </div>
155   - </van-popup>
156   -
157   - <van-popup v-model="showCode" round get-container="body">
158   - <div class="codeCss">
159   - <div class="showBox">
160   - <div class="top">
161   - <div class="pic">
162   - <img :src="codeData.coverUrl ? codeData.coverUrl : require('@/assets/service/defCoure.jpg')" alt="" style="width:100%;height:100%">
163   - </div>
164   - <div class="basefont">
165   - <div class="titlefont">{{codeData.baseName}}</div>
166   - <div class="tcfont">套餐名称：{{codeData.courseName}}</div>
167   - <div class="tcfont">数量*{{codeData.orderCount}}</div>
168   - </div>
169   - <!-- <div class="priceRight">¥{{codeData.paymoney}}</div> -->
170   - </div>
171   - <div class="groupTime">
172   - <van-icon name="clock-o" /><span class="grey"> 活动日期</span><span> {{codeData.startDate}} - {{ codeData.endDate}}</span>
173   - </div>
174   - <div class="qrcodeBox">
175   - <div id="qrcode" ref="imageWrapper" v-if="!imgUrl"></div>
176   - <div class="imgBox">
177   - <img :src="imgUrl" v-if="imgUrl" style="width:100%;height:100%" />
178   - </div>
179   - </div>
180   - <div class="numShow">
181   - {{codeData.id}}
182   - </div>
183   - <div class="fontBottom">请向工作人员出示</div>
184   - </div>
185   - </div>
186   - </van-popup>
187 69 <van-popup v-model="showPreview" round get-container="body">
188 70 <img class="preview_img" :src="previewUrl" alt="">
189 71 </van-popup>
... ... @@ -191,25 +73,17 @@
191 73 </template>
192 74  
193 75 <script>
194   -import QRCode from 'qrcodejs2' // 引入qrcode
195   -import html2canvas from "html2canvas"
196   -// let Base64 = require('js-base64').Base64;
197 76 export default {
198 77 name: 'ServiceOrder',
199 78 data () {
200 79 return {
201 80 userInfo: '',
202 81 active: 1,
203   - paylist: [], //待付款
204   - movelist: [], //待核销
205 82 list: [], //所有
206 83 datalist: [], //未评价
207 84 loading: false,
208 85 finished: false,
209 86 pageCareerIndex: 0,
210   - qrcodeShow: false,
211   - showPintuanAbout: false,
212   - showCode: false,
213 87 codeData: {},
214 88 imgUrl: '',
215 89 previewUrl: '',//图片预览
... ... @@ -232,91 +106,17 @@ export default {
232 106 }
233 107 },
234 108 methods: {
235   - back () {
236   - this.$router.push({ name: 'ServiceKQ' })
237   - },
238 109 beforeTabChange (item) {
239 110 console.log(item)
240   - this.paylist = [];
241   - this.movelist = [];
242 111 this.list = [];
243 112 this.datalist = [];
244 113 if (item == 0) {
245   - this.onLoadpay()
246   - } else if (item == 1) {
247   - // this.onLoadCareer()
248   - this.onLoadmove()
249   - } else if (item == 2) {
250 114 this.onLoadCareer()
251   - } else {
  115 + } else if (item == 1) {
252 116 this.onLoad()
253 117 }
254 118 return true;
255 119 },
256   - //获取待支付
257   - onLoadpay () {
258   - this.mgop({
259   - api: 'mgop.sz.hswsy.GetOrderPayList', // 必须
260   - host: 'https://mapi.zjzwfw.gov.cn/',
261   - dataType: 'JSON',
262   - type: 'GET',
263   - appKey: 'fuxgnukl+2001895516+edccpx', // 必须
264   - headers: {
265   - // 'isTestUrl': '1'
266   - },
267   - data: {
268   - "userId": localStorage.getItem('centerNo'),
269   - "type": 1,
270   - "page": 1,
271   - "pageSize": 999
272   - },
273   - onSuccess: res => {
274   - console.log('待支付:', res)
275   - if (res.data.status == 1) {
276   - this.paylist = res.data.data.list;
277   - this.loading = false;
278   - this.finished = true;
279   - } else {
280   - this.$toast.fail(res.data.message);
281   - }
282   - },
283   - onFail: err => {
284   - console.log('err', err)
285   - }
286   - });
287   - },
288   - //获取已支付
289   - onLoadmove () {
290   - this.mgop({
291   - api: 'mgop.sz.hswsy.GetOrderPayList', // 必须
292   - host: 'https://mapi.zjzwfw.gov.cn/',
293   - dataType: 'JSON',
294   - type: 'GET',
295   - appKey: 'fuxgnukl+2001895516+edccpx', // 必须
296   - headers: {
297   - // 'isTestUrl': '1'
298   - },
299   - data: {
300   - "userId": localStorage.getItem('centerNo'),
301   - "type": 2,
302   - "page": 1,
303   - "pageSize": 999
304   - },
305   - onSuccess: res => {
306   - console.log('已支付:', res)
307   - if (res.data.status == 1) {
308   - this.movelist = res.data.data.list;
309   - this.loading = false;
310   - this.finished = true;
311   - } else {
312   - this.$toast.fail(res.data.message);
313   - }
314   - },
315   - onFail: err => {
316   - console.log('err', err)
317   - }
318   - });
319   - },
320 120 //获取待评价
321 121 onLoadCareer () {
322 122 this.mgop({
... ... @@ -381,48 +181,15 @@ export default {
381 181 }
382 182 });
383 183 },
384   - //生成核销码
385   - makeCode (id) {
386   - console.log(id.toString())
387   - document.getElementById('qrcode').innerHTML = '';
388   - this.qrcodeShow = true;
389   -
390   - let qrcode = new QRCode('qrcode', {
391   - width: 200,
392   - height: 200,
393   - text: id.toString(), // 二维码地址
394   - })
395   - this.canvanqrCode()
396   - },
397 184 //评价
398 185 evaluate (item) {
399 186 window.localStorage.setItem('courseInfo', JSON.stringify(item))
400 187 this.$router.push({ name: 'evaluateCourse' })
401 188 },
402   - //核销码
403   - toCode (item) {
404   - this.codeData = {}
405   - this.showCode = true
406   - this.codeData = item
407   - this.imgUrl = ''
408   - setTimeout(() => {
409   - this.makeCode(item.id)
410   - }, 1000);
411   - },
412 189 //跳转
413 190 toEdit (item) {
414 191 this.$router.push({ path: 'abroad_detail', query: { courseId: item.courseId } })
415 192 },
416   - //二维码转图片
417   - canvanqrCode () {
418   - html2canvas(this.$refs.imageWrapper, {
419   - width: 200,
420   - height: 200
421   - }).then(canvas => {
422   - let dataURL = canvas.toDataURL("image/png");
423   - this.imgUrl = dataURL;
424   - });
425   - },
426 193 // 预览图片
427 194 previewImg (url) {
428 195 this.previewUrl = url;
... ... @@ -444,23 +211,6 @@ export default {
444 211 overflow: auto;
445 212 background: #f6f7fa;
446 213  
447   - // .qrcodeBox {
448   - // position: fixed;
449   - // top: 0;
450   - // left: 0;
451   - // bottom: 0;
452   - // right: 0;
453   - // background-color: rgba(0, 0, 0, 0.4);
454   -
455   - // #qrcode {
456   - // position: absolute;
457   - // top: 50%;
458   - // left: 50%;
459   - // transform: translate(-50%, -50%);
460   - // padding: 20px;
461   - // background: #fff;
462   - // }
463   - // }
464 214  
465 215 .list {
466 216 padding: 20px;
... ... @@ -794,21 +544,6 @@ export default {
794 544 color: #999999;
795 545 }
796 546 }
797   - .qrcodeBox {
798   - width: 100%;
799   - height: 430px;
800   -
801   - #qrcode {
802   - transform: translate(25%, 10%);
803   - // margin: auto;
804   - }
805   - .imgBox {
806   - width: 370px;
807   - height: 370px;
808   - margin: 30px auto 0;
809   - // transform: translate(25%, 10%);
810   - }
811   - }
812 547 .numShow {
813 548 width: 100%;
814 549 font-size: 28px;
... ...
src/views/Yanxue/YanxueDetail.vue 0 → 100644
  Diff comments   View file @91ec018
... ... @@ -0,0 +1,25 @@
  1 +<template>
  2 + <div class="yanxue_detail">
  3 + <img :src="image" alt="">
  4 + </div>
  5 +</template>
  6 +<script>
  7 +import axios from 'axios'
  8 +export default {
  9 + data() {
  10 + return {
  11 + image:''
  12 + }
  13 + },
  14 + mounted() {
  15 + this.image = `https://payment.myjxt.com/zlb_assets/image/${this.$route.query.image}.jpg`
  16 + },
  17 +}
  18 +</script>
  19 +<style lang="scss">
  20 +.yanxue_detail {
  21 + img{
  22 + width: 100%;
  23 + }
  24 +}
  25 +</style>
... ...
src/views/Yanxue/YanxuePage.vue 0 → 100644
  Diff comments   View file @91ec018
... ... @@ -0,0 +1,38 @@
  1 +<template>
  2 + <div class="yanxue_page">
  3 + <p class="item" v-for="(item,index) in listData" :key="index" @click="handleItem(item.title)">{{item.title}}</p>
  4 + </div>
  5 +</template>
  6 +<script>
  7 +import axios from 'axios'
  8 +export default {
  9 + data() {
  10 + return {
  11 + listData:[]
  12 + }
  13 + },
  14 + mounted() {
  15 + this.getList()
  16 + },
  17 + methods: {
  18 + getList() {
  19 + this.$toast.loading('加载中...')
  20 + axios.get(`https://payment.myjxt.com/zlb_assets/yanxue.json`).then((res) => {
  21 + this.$toast.clear()
  22 + console.log('列表：', res.data)
  23 + this.listData = res.data
  24 + })
  25 + },
  26 + handleItem(image){
  27 + this.$router.push({ name: 'YanxueDetail' ,query:{image:image}})
  28 + }
  29 + },
  30 +}
  31 +</script>
  32 +<style lang="scss">
  33 +.yanxue_page {
  34 + .item{
  35 + font-size: 30px;
  36 + }
  37 +}
  38 +</style>
... ...