油卡充值

src/App.vue

@@ -71,7 +71,7 @@ import login from "./store/module/login";
                 // window.location.reload()
                 let  storage = window.localStorage;
                 storage.clear()
-                this.$router.push('/login')
+                this.$router.replace('/login')
                 
                 localStorage.setItem('_version_', version)
             }

src/config/index.ts

@@ -49,5 +49,6 @@ export const http: any = {
     userWithdrawal: host + '/dev/user/userWithdrawal',
     getSociallist:host +  '/dev/getSociallist',
     getBannerList:host +  '/dev/banner',
-    getPolicy: host + '/dev/policy'
+    getPolicy: host + '/dev/policy',
+    getDenomination: host + '/dev/refill/goods'
 };

src/extend/Http.ts

@@ -348,4 +348,12 @@ export default class Http {
             data: params,
         });
     }
+
+    // 获取充值面额
+    async getDenomination() {
+        return this.httpClient.request({
+            url: http.getDenomination,
+            method: 'GET'
+        });
+    }
 }

src/main.ts

@@ -69,7 +69,7 @@ import {
     Loading,
     MessageBox,
     Message,
-    Notification
+    Notification,
 } from 'element-ui';
 // import { Cell, CellGroup, Icon, NavBar } from 'vant';
 import Cell from 'vant/lib/cell';

src/router/router.ts

@@ -320,4 +320,46 @@ export default [
             title: '收银台'
         }
     },
+    // 油卡充值
+    {
+        path: '/oilRecharge',
+        name: 'oilRecharge',
+        component: () => import('@/views/index/oilRecharge.vue'),
+        meta: {
+            icon: '',
+            keepAlive: false,
+            showTab: false,
+            showBackLeftBtn: false,
+            showBarRightBtn: false,
+            title: '油卡充值'
+        }
+    },
+    // 手机卡充值
+    {
+        path: '/phoneRecharge',
+        name: 'phoneRecharge',
+        component: () => import('@/views/index/phoneRecharge.vue'),
+        meta: {
+            icon: '',
+            keepAlive: false,
+            showTab: false,
+            showBackLeftBtn: false,
+            showBarRightBtn: false,
+            title: '手机卡充值'
+        }
+    },
+    // 充值列表
+    {
+        path: '/recharge/list',
+        name: 'rlist',
+        component: () => import('@/views/recharge/list.vue'),
+        meta: {
+            icon: '',
+            keepAlive: false,
+            showTab: false,
+            showBackLeftBtn: true,
+            showBarRightBtn: false,
+            title: '充值列表'
+        }
+    }
 ];

src/views/index/index.ts

@@ -1,4 +1,4 @@
-import {Component, Vue} from 'vue-property-decorator';
+import {Component, Vue, Watch} from 'vue-property-decorator';
 import Http from "../../extend/Http";
 import Utils from "../../extend/Utils";
 import router from "../../router";
@@ -207,5 +207,10 @@ export default class Index extends Vue {
             this.data.lastRowMargin = '13rem'
         }
     }
+    @Watch('$route', {immediate: true}) isLogin(newVal: any, oldVal: any) {
+        if (newVal.path == '/index' && !localStorage.getItem('access_token')) {
+            router.replace('/login')
+        }
+    }
 
 }

src/views/index/index.vue

@@ -45,6 +45,20 @@
                     <img src="../../assets/image/payroll@2x.png" style="width: 100%" alt="">
                 </el-col>
             </el-row>
+            <!-- 充值服务 -->
+            <el-row>
+                <el-col :span="24">
+                    <img src="../../assets/image/recharge@2x.png" style="width: 70%;" alt="">
+                </el-col>
+            </el-row>
+            <el-row :gutter="12">
+                <el-col :span="12" @click.native="$router.push('/phoneRecharge')">
+                    <img src="../../assets/image/phone_recharge@2x.png" style="width: 100%" alt="">
+                </el-col>
+                <el-col :span="12" @click.native="$router.push('/oilRecharge')">
+                    <img src="../../assets/image/oil_recharge@2x.png" style="width: 100%" alt="">
+                </el-col>
+            </el-row>
             <!-- 政策解读 -->
             <el-row>
                 <el-col :span="24">

src/views/index/oilRecharge.vue

@@ -0,0 +1,369 @@
+<template>
+  <div class="oilRecharge">
+    <div class="p_head">
+      <img src="../../assets/image/payrollback_left@2x.png" class="leftIcon" alt="" @click="$router.replace('/index')">
+      <span>
+          <span>
+              油卡充值
+          </span>
+      </span>
+    </div>
+    <div class="oilCard">
+      <!-- 选择油卡 -->
+      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
+        <el-tab-pane label="中国石化" name="petrifaction">
+           <span slot="label">
+             <img src="@/assets/image/petrifaction@2x.png" alt="">
+              中国石化
+            </span>
+            <div class="cardContent">
+              <div class="selectCard">选择油卡</div>
+              <el-input :value="petrifactionCard" placeholder="请输入以1开头的19位中石化加油卡号" />
+              <div class="alert">
+                <img src="@/assets/image/cardAlert@2x.png" alt="">
+                <span>请仔细核对卡号，避免造成不必要的损失。</span>
+              </div>
+            </div>
+            <!-- 充值面额 -->
+            <div class="denomination">
+              <div>充值面额</div>
+              <div class="denominationCard" :class="{'activeBorder': idx == curSinopecIdx}" v-for="(item, idx) in sinopec" :key="item">
+                <span>{{item}}</span>
+                <i>优惠价{{item * 0.995}}元</i>
+                <div :class="{'active': idx == curSinopecIdx}"></div>
+              </div>
+            </div>
+        </el-tab-pane>
+        <el-tab-pane label="中国石油" name="petroleum">
+          <span slot="label">
+            <img src="@/assets/image/petroleum@2x.png" alt="">
+            中国石油
+          </span>
+          <div class="cardContent">
+            <div class="selectCard">选择油卡</div>
+            <el-input :value="petrifactionCard" placeholder="请输入以9开头的16位中石油加油卡号" />
+            <div class="alert">
+              <img src="@/assets/image/cardAlert@2x.png" alt="">
+              <span>请仔细核对卡号，避免造成不必要的损失。</span>
+            </div>
+          </div>
+          <!-- 充值面额 -->
+          <div class="denomination">
+            <div>充值面额</div>
+            <div class="denominationCard" :class="{'activeBorder': idx == curPetrochinaIdx}" v-for="(item, idx) in petrochina" :key="item">
+              <span>{{item}}</span>
+              <i>优惠价{{item * 0.995}}元</i>
+              <div :class="{'active': idx == curPetrochinaIdx}"></div>
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+      <div class="recharfeBtn" @click="recharfeBtn">
+        <img src="@/assets/image/rechargeBtn@2x.png" alt="">
+      </div>
+      <!-- 说明 -->
+      <div class="explain">
+        <div class="explainHead">
+          <i></i>
+          <span>充值说明</span>
+          <i></i>
+        </div>
+        <ol>
+          <li>1. 充值优惠来自充值平台补贴；</li>
+          <li>2. 充值后1-10分钟左右到账，中石油或者中石化公众号将发充值 成功信息至加油卡捆绑微信；</li>
+          <li>3. 本服务为全国加油卡代充服务、故<span>不提供充值发票</span>;</li>
+          <li>4. 支付成功后，需收到充值成功通知短信后，方可到<span>加油站圈存</span>后加油使用;</li>
+        </ol>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Http from '@/extend/Http';
+export default {
+  name: 'oilRecharge',
+  data() {
+    return {
+      activeName: 'petrifaction',
+      // 石化
+      petrifactionCard: '',
+      // 石油
+      // 石化充值面额
+      sinopec: [],
+      // 石油面额
+      petrochina: [],
+      // 石油当前面额
+      curPetrochinaIdx: 0,
+      // 石化当前选择
+      curSinopecIdx: 0
+    }
+  },
+  created() {
+    this.getDenomination()
+  },
+  watch: {
+    '$route': {
+      handler(newVal) {
+        if (newVal.path == '/oilRecharge' && !localStorage.getItem('access_token')) {
+            router.replace('/login')
+        }
+      }
+    }
+  },
+  methods: {
+    handleClick(tab, event) {
+      // console.log(tab, event);
+    },
+    // 获取充值面额
+    async getDenomination() {
+      let res = await Http.getInstance().getDenomination();
+      console.log('油卡面额', res);
+      if (res && res.msg == '请求成功') {
+        this.petrochina = res.data.petrochina
+        this.sinopec = res.data.sinopec
+      }
+    },
+    // 充值按钮
+    recharfeBtn() {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .oilRecharge {
+    background-color: #EDF0F5;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    overflow: auto;
+  }
+  // 顶部导航
+  .p_head{
+    text-align: center;
+    position: relative;
+    top: 1.5rem;
+    font-size: 2rem;
+    // font-family: 'PingFang SC';
+    margin-bottom: 3.667rem;
+    // font-weight: bold;
+    line-height: 1.5rem;
+    .leftIcon{
+      position: absolute;
+      left: 1.667rem;
+      top: 0.7rem;
+      width: 0.667rem;
+    }
+    span {
+      vertical-align: middle;
+    }
+  }
+  .oilCard {
+    padding: 0 1.667rem 7.5rem;
+  }
+  .el-tabs img {
+    display: inline-block;
+    width: 2.5rem;
+  }
+  /deep/.el-tabs--border-card {
+    border-radius: 1.667rem;
+    border: 0;
+    box-shadow: none;
+  }
+  /deep/.el-tabs--border-card>.el-tabs__header {
+    border-top-left-radius: 1.667rem;
+    border-top-right-radius: 1.667rem;
+    overflow: hidden;
+    border:0;
+  }
+  /deep/.el-tabs__nav {
+    width: 100%;
+    height: 3.667rem;
+  }
+  /deep/#tab-petrifaction,
+  /deep/#tab-petroleum {
+    width: 50%;
+    height: 100%;
+    padding-left: 3rem;
+    font-size: 1.4rem;
+    border:0;
+  }
+  /deep/#tab-petroleum {
+    width: 51%;
+  }
+  /deep/.el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover,
+  /deep/.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active  {
+    color: #F47D53;
+  }
+  /deep/.el-tabs--border-card>.el-tabs__header .el-tabs__item {
+    color: #666;
+    background-color: #EDF0F5;
+  }
+  /deep/.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
+    background-color: #fff;
+  }
+  /deep/.el-tabs--border-card>.el-tabs__content {
+    height: 30rem;
+  }
+  /deep/.el-tabs--border-card>.el-tabs__content {
+    padding: 15px 20px;
+  }
+  .cardContent {
+    font-size: 1.167rem; 
+    font-family: PingFang SC;
+    color: #333;
+    .selectCard {
+      margin-bottom: 1.667rem;
+    }
+    /deep/.el-input__inner {
+      border: 0;
+      border-bottom: 1px solid #BFBFBF;
+      border-radius: 0;
+      // margin-bottom: 1rem;
+      padding-left: 0;
+    }
+    .alert {
+      font-size: 1.2rem;
+      color: #F58520;
+      padding-left: 0;
+      img {
+        width: 1.2rem;
+        margin-right: 0.6rem;
+      }
+      span {
+        vertical-align: middle;
+      }
+    }
+  }
+  .denominationCard {
+    // width: 7.917rem;
+    width: 29.3%;
+    height: 5rem;
+    border: 1px solid #E5E5E5;
+    margin-right: 1.667rem;
+    margin-top: 1.667rem;
+    display: inline-block;
+    // padding-left: 1rem;
+    position: relative;
+    span {
+      display: block;
+      font-size: 1.167rem;
+      font-family: PingFang SC;
+      font-weight: bold;
+      color: #F58520;
+      margin-top: 0.5rem;
+      margin-bottom: 0.3rem;
+      text-align: center;
+    }
+    i {
+      display: block;
+      text-align: center;
+      font-style: normal;
+      font-size: 1rem;
+      font-family: PingFang SC;
+      font-weight: 500;
+      color: #666666;
+    }
+  }
+  .denominationCard.activeBorder {
+    border: 2px solid #F58520;
+  }
+  .denominationCard:nth-child(4n) {
+    margin-right: 0;
+  }
+  .active {
+    background-color: #F58520;
+    -moz-opacity: 0.2;
+    opacity:.20;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .recharfeBtn {
+    margin: 2.5rem 0;
+    img {
+      width: 100%;
+    }
+  }
+  .explainHead {
+    padding: 0 4.667rem;
+    margin-bottom: 2.083rem;
+    i {
+      display: inline-block;
+      font-style: normal;
+      width: 6rem;
+      height: 1px;
+      background-color: #999;
+      vertical-align: middle;
+    }
+    span {
+      display: inline-block;
+      font-size: 1.5rem;
+      font-family: PingFang SC;
+      font-weight: 500;
+      color: #666666;
+      margin: 0 1.25rem;
+    }
+  }
+  ol li {
+    font-size: 1.1rem;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #666666;
+    margin-bottom: 1.667rem;
+    span {
+      color: #F58520;
+    }
+  }
+  @media screen and (max-width: 375px) {
+    .cardContent .alert {
+      font-size: 1.1rem;
+    }
+    .denominationCard {
+      margin-right: 1.3rem;
+    }
+    .explainHead i {
+      width: 5rem;
+    }
+  }
+  @media screen and (max-width: 360px) {
+    .cardContent .alert {
+      font-size: 1.1rem;
+    }
+    .denominationCard {
+      margin-right: 1.3rem;
+    }
+    .explainHead i {
+      width: 4rem;
+    }
+  }
+  @media screen and (max-width: 320px) {
+    .cardContent .alert {
+      font-size: 1rem;
+    }
+    .denominationCard {
+      width: 41.3%;
+      margin-right: 1.3rem;
+    }
+    .explainHead i {
+      width: 2.5rem;
+    }
+    /deep/#tab-petrifaction,
+    /deep/#tab-petroleum {
+      padding-left: 2rem;
+      padding-right: 0;
+    }
+    .cardContent .el-input__inner {
+      font-size: 1rem;
+    }
+    .denominationCard:nth-child(3n) {
+      margin-right: 0;
+    }
+    .denominationCard:nth-child(4n) {
+      margin-right: 1.667rem;
+    }
+  }
+</style>

src/views/index/phoneRecharge.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="phoneRecharge">政策解读</div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/recharge/list.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="rechargeList">
+    充值列表
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/views/user/index.vue

@@ -36,6 +36,7 @@
             <van-cell-group >
                 <van-cell title="个人信息" icon="user-o" is-link @click="$router.push('/user/info')" />
                 <van-cell title="我的订单" icon="orders-o" is-link @click="$router.push('/order/list')" />
+                <van-cell title="充值订单" icon="label-o" is-link @click="$router.push('/recharge/list')" />
                 <van-cell title="我的优惠劵" icon="coupon-o" is-link  @click="$router.push('/user/discount')"/>
                 <van-cell title="邀请好友" is-link icon="user-circle-o" @click="$router.push('/user/share')"></van-cell>
                 <van-cell title="好友列表" icon="friends-o" is-link @click="$router.push('/user/inviter')" />