123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639 |
- <template>
-
- <div v-loading='loading'>
- <div v-if="!isShowProbationPeriod&&!isShowFormal&&!isShowYj" class="topHint">
- <div class="top-text">
- 您未订购血透管理的服务<br>
- 逾期未订购血透管理将无法正常使用,如有疑问,请咨询客服:0755-86526342
- </div>
- </div>
-
- <div v-if="isShowProbationPeriod" class="topHint">
- <div class="top-text">
- 您的血透管理处于免费版,当前管理患者<span>{{this.subscibe.patients}}</span>位<br>
- 逾期未订购血透管理将无法正常使用,如有疑问,请咨询客服:0755-86526342
- </div>
- </div>
- <div v-if="isShowFormal" class="topHint">
- <div class="top-text">
- 您的血透管理处于标准版(<span>{{time}}</span>),当前管理患者<span>{{this.subscibe.patients}}</span>位<br>
- 逾期未订购血透管理将无法正常使用,如有疑问,请咨询客服:0755-86526342
- </div>
- </div>
- <div v-if="isShowZYPanel" class="topHint">
- <div class="top-text">
- 您的血透管理处于专业版(<span>{{time}}</span>),当前管理患者<span>{{this.subscibe.patients}}</span>位<br>
- 逾期未订购血透管理将无法正常使用,如有疑问,请咨询客服:0755-86526342
- </div>
- </div>
-
- <div v-if="isShowYj" class="topHint">
- <div class="top-text">
- 您的血透管理处于永久免费使用<br>
- 逾期未订购血透管理将无法正常使用,如有疑问,请咨询客服:0755-86526342
- </div>
- </div>
- <!-- <div class="online-edu">
- <div class="online-header">
- <div class="header-desc">
- <h3>
- 血透管理正式版
- </h3>
- </div>
- </div>
- </div> -->
-
- <div class="config-process">
-
- <ul class="process">
- <li tag="li" class="items" >
- <div class="inner">
- <h2 class="name">免费版</h2>
- <p class="text">最多可管理100位患者</p>
- <span class="price size">免费使用</span>
- <!-- <span @click="isSCRMClick = 1" v-if="isSCRMClick == 2" class="buy active">已选购</span> -->
- <span class="buy active">已开通</span>
- </div>
- </li>
- <li tag="li" class="items" >
- <div class="inner">
- <h2 class="name">标准版</h2>
- <p class="text">最多可管理200位患者</p>
- <span class="price"><i>¥</i>6980<span class="year">/ 年</span></span>
- <!-- <span @click="isWxClick = 1" v-if="isWxClick == 2" class="buy active">已选购</span> -->
- <!-- <span class="buy active">已开通</span> -->
- <!-- <span @click="selectXt(1)" v-if="isBZClick == 2" class="buy active">已选购</span> -->
- <span @click="selectXt(1)" class="buy " :class="bzactive||!bzflag?'active':''" >{{bztext}}</span>
-
- </div>
- </li>
- <li tag="li" class="items" >
- <div class="inner">
- <h2 class="name">专业版</h2>
- <p class="text">管理的患者数无限制</p>
- <span class="price"><i>¥</i>15800<span class="year">/ 年</span></span>
- <!-- <span class="price"><i>¥</i>23888<span class="year">/ 年</span></span> -->
- <!-- <span @click="selectXt(8)" v-if="isXTClick == 2" class="buy active">已选购</span>
- <span @click="selectXt(8)" v-if="isXTClick == 1" class="buy ">立即选购</span> -->
-
- <span @click="selectXt(8)" class="buy " :class="zyactive?'active':''" >{{zytext}}</span>
- </div>
- </li>
- </ul>
- </div>
-
- <div class="purchaseCart">
- <div class="content-part">
- <span>购买年数:</span>
- <el-input-number v-model="num1" @change="handleChange" :min="1" :max="1000" label="年"></el-input-number>
- <div class="total-price">
- 合计:
- <span v-if="isXTClick == 2">{{totalPrice}} 元</span>
- <span v-if="isXTClick == 1">0元</span>
-
- </div>
- <button v-if="bzactive||zyactive" class="go-to-purchase" @click="jumpToNewUrl">去结算</button>
- <button v-if="!bzactive&&!zyactive" class="go-to-purchase2" @click="jumpToNewUrl" disabled>去结算</button>
-
- </div>
- </div>
-
- </div>
- </template>
-
- <script>
-
- import {getProduct} from "@/api/service"
-
- export default {
- name: "ServiceOrder",
- created() {
- this.getProduct()
-
- },
- data() {
- return {
- loading:true,
- bzactive:false,
- bztext:'立即选购',
- bzflag:false,
-
- zyactive:false,
- zytext:'立即选购',
- isWxClick:1,
- isXTClick:2,
- isBZClick:2,
- isSCRMClick:1,
- flag: false,
- time:'',
- isShowProbationPeriod: false,
- isShowFormal: false,
- isShowZYPanel:false,
- isShowYj: false,
- leftTime:'',
- num1: 1,
- price:'',
- original_price:'',
- totalPrice:'',
- subscibe:{
- created_time: 0,
- id: 0,
- org_id: 0,
- patients: 0,
- period_end: 0,
- period_end_time: "0",
- period_start: 0,
- period_start_time: "0",
- state: 0,
- status: 0,
- updated_time: 0,
- },
- products: [
-
- ],
- productsMap:{},
- selectProduct:{},
- };
- },
- methods:{
- getProduct:function () {
- getProduct().then(response => {
-
- if (response.data.state == 0) {
- this.$message.error(response.data.msg);
- }else {
- this.subscibe = response.data.data.subscibe;
- if(this.subscibe.patients>60) {
- this.bzflag = false; //可否购买
- this.bztext = '无法选购';
- }else {
- this.bzflag = true;
- this.bztext = '立即选购';
- }
-
- if(this.subscibe.state == 1){//标准版
- this.isShowFormal = true
- this.isShowProbationPeriod = false
- this.isShowZYPanel = false;
- this.isShowYj = false;
- this.leftTime = response.data.data.subscibe.period_end - response.data.data.serviceTime
- if(this.leftTime < 0){
- this.flag = true
- this.time="已过期"
- }
- }else if(this.subscibe.state == 8){//专业版
- this.isShowProbationPeriod = false;
- this.isShowFormal = false;
- this.isShowZYPanel = true;
- this.isShowYj = false;
- this.leftTime = response.data.data.subscibe.period_end - response.data.data.serviceTime
- if(this.leftTime < 0){
- this.flag = true
- this.time="已过期"
- }
- }else if(this.subscibe.state == 2){//试用版
- this.isShowProbationPeriod = true
- this.isShowFormal = false
- this.isShowZYPanel = false;
- this.isShowYj = false;
- this.leftTime = response.data.data.subscibe.period_end - response.data.data.serviceTime
- if(this.leftTime < 0){
- this.flag = true
- this.time="已过期"
- }
- }if(this.subscibe.state == 9){//永乐免费版
- this.isShowProbationPeriod = false
- this.isShowFormal = false
- this.isShowZYPanel = false;
- this.isShowYj = true;
- }
- for(let i = 0; i < response.data.data.products.length; i++){
- this.products.unshift(response.data.data.products[i]);
- this.productsMap[response.data.data.products[i]['edition']] = response.data.data.products[i];
- // this.price = response.data.data.products[0].price
- // this.original_price = response.data.data.products[0].original_price
- }
- }
-
-
- this.loading = false;
-
- })
-
- },timeDown() {
- let leftTime = this.leftTime
- let d = parseInt(leftTime / (24 * 60 * 60))
- let h = this.formate(parseInt(leftTime / (60 * 60) % 24))
- let m = this.formate(parseInt(leftTime / 60 % 60))
- let s = this.formate(parseInt(leftTime % 60))
- if (leftTime <= 0) {
- this.flag = true
- }else {
- this.time = d + '天' + h + '小时' + m + '分' + s + '秒'
- }
- }, formate(time) {
- if (time >= 10) {
- return time
- } else {
- return `0${time}`
- }
- },
- handleChange:function (val) {
- this.totalPrice = this.price * val
- },
- jumpToNewUrl:function () {
- this.$router.push("/servicePay?amount="+this.num1+'&serve_id='+this.selectProduct['id']);
- },
- selectXt(type) {
- if(type==1 && this.bzflag) {
-
- if(!(type in this.productsMap)) {
- this.$message.error("没有此服务,无法订购");
- return false;
- }
-
- this.bzactive = true;
- this.bztext = '已选购';
- this.zyactive = false;
- this.zytext = '立即选购';
-
- this.selectProduct = this.productsMap[type];
- this.price = this.selectProduct['price'];
- this.totalPrice = this.price;
- this.num1 = 1;
- // this.isXTClick = 2;
- // this.isBZClick = 1;
- }else if(type==8) {
- if(!(type in this.productsMap)) {
- this.$message.error("没有此服务,无法订购");
- return false;
- }
- this.bzactive = false;
- this.bztext = this.bzflag?'立即选购':'无法选购';
- this.zyactive = true;
- this.zytext = '已选购';
- this.selectProduct = this.productsMap[type];
- this.price = this.selectProduct['price'];
- this.totalPrice = this.price;
- this.num1 = 1;
- }else {
- this.selectProduct = {};
- }
- }
- },
- mounted() {
- let time = setInterval(() => {
- if (this.flag == true) {
- clearInterval(time)
- }
- this.leftTime = this.leftTime - 1
- this.timeDown()
- }, 1000)
-
- },
- };
- </script>
-
- <style rel="stylesheet/scss" lang="scss" scoped>
- @mixin ellipsis {
- float: left;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
-
- ::-webkit-scrollbar-track-piece {
- background: #e5e5e5;
- }
-
- ::-webkit-scrollbar {
- width: 6px;
- }
-
- ::-webkit-scrollbar-thumb {
- background: #ffffff;
- border-radius: 20px;
- }
-
- .topHint {
- padding: 0 10px;
- .top-text {
- width: 100%;
- line-height: 24px;
- background: rgba(255, 184, 94, 0.1);
- border: 1px solid #ffdeb4;
- border-radius: 2px;
- margin-top: 20px;
- padding: 10px;
- margin-bottom: 40px;
- font-size: 14px;
- color: #353535;
- span {
- color: #fb6161;
- }
- }
- }
-
- .online-edu {
- padding: 0 10px 30px 10px;
- .online-header {
- color: #fff;
- background: linear-gradient(90deg, #2abdb8, #2e99ce);
- text-align: center;
- border-radius: 4px;
- height: 50px;
- line-height: 50px;
- .header-desc {
- h3 {
- font-size: 14px;
- font-weight: normal;
- }
- }
- }
- }
-
- .header-price {
- padding: 20px 0 40px;
- background: #fff;
- border-radius: 4px;
- .price-view {
- text-align: center;
- h5 {
- color: #303133;
- span {
- font-size: 20px;
- font-weight: normal;
- }
- }
- p {
- color: #eee;
- margin-top: 10px;
- font-size: 14px;
- color: #888;
- }
- }
- .buy {
- margin-top: 15px;
- p {
- width: 210px;
- margin: 0 auto;
- cursor: pointer;
- font-size: 14px;
- padding: 10px 15px;
- text-align: center;
- border-radius: 4px;
- background: linear-gradient(90deg, #2abdb8, #2e99ce);
- color: #fff;
- }
- }
- }
-
- .config-process {
- width: 100%;
- padding-bottom: 60px;
- .process {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
- padding-left: 0;
- width: 90%;
- margin: 0 auto;
- // height: 480px;
- // text-align: center;
- .items {
- list-style: none;
- box-shadow: 4px 4px 12px rgba(135, 135, 135, 0.15);
- margin: 0 10px;
- background: #fff;
- cursor: pointer;
- flex: 1;
- padding-bottom: 30px;
- .inner {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- flex-direction: column;
- .name {
- font-size: 18px;
- color: #34495e;
- background: #e9f8f8;
- height:50px;
- line-height: 50px;
- border-top: 3px #2abdb8 solid;
- margin: 0;
- text-align: center;
- font-weight: bold;
-
- }
- .text {
- height: 166px;
- line-height: 22px;
- margin: 0;
- padding: 20px;
- display: flex;
- font-size: 15px;
- color: #353535;
- }
- .price{
- font-size: 32px;
- color: #383838;
- text-align: center;
- margin: 20px 0 10px 0;
- height: 36px;
- line-height: 36px;
- i{
- font-size:20px;
- }
- .year{
- font-size:18px;
- color: #999999;
- margin-left: 4px;
- }
- }
- .size{
- font-size:15px;
- color: #2abdb8;
- }
- .buy{
- font-size: 14px;
- text-align:center;
- width: 162px;
- height: 44px;
- line-height: 44px;
- color: #2abdb8;
- margin: 0 auto;
- border-radius: 30px;
- background: -webkit-gradient(linear, left top, right top, from(#2abdb8), to(#2e99ce));
- background: linear-gradient(90deg, #2abdb8, #2e99ce);
- color: #fff;
- &.active{
- background: #e9f8f8;
- color: #2abdb8;
- }
- }
-
- }
- }
- }
- }
-
- .purchaseCart {
- height: 60px;
- width: 100%;
- position: fixed;
- bottom: 0;
- left: 0;
- right: 0;
- border-top: 1px solid #eeeeee;
- padding-left: 160px;
- background-color: #ffffff;
- .content-part {
- height: 100%;
- width: 100%;
- padding-right: 40px;
- text-align: right;
-
- .chosen-service {
- display: inline-block;
- height: 60px;
- line-height: 60px;
- position: relative;
- margin-right: 30px;
- cursor: pointer;
- span {
- color: #fb6161;
- }
- .triangle {
- position: absolute;
- top: 25px;
- right: -15px;
- height: 0;
- width: 0;
- display: inline-block;
- border-bottom: 6px solid #c1c4ca;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- }
- }
- .total-price {
- display: inline-block;
- height: 60px;
- line-height: 60px;
- margin-right: 50px;
- span {
- color: #fb6161;
- }
- }
- .go-to-purchase {
- width: 86px;
- height: 36px;
- line-height: 36px;
- font-size: 14px;
- color: #ffffff;
- border: none;
- border-radius: 2px;
- text-align: center;
- user-select: none;
- background: #fb6161;
- }
-
- .go-to-purchase2 {
- width: 86px;
- height: 36px;
- line-height: 36px;
- font-size: 14px;
- color: #ffffff;
- border: none;
- border-radius: 2px;
- text-align: center;
- user-select: none;
- background: grey;
- }
- }
- .chosen-list-box {
- position: absolute;
- bottom: 65px;
- right: 45px;
- width: 510px;
- height: 300px;
- background: #fff;
- box-shadow: 0px 0 12px 0px rgba(0, 0, 0, 0.07),
- 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
- border-radius: 2px;
- .box-title {
- width: 100%;
- height: 50px;
- line-height: 50px;
- padding: 0 20px;
- background: #f5f7fa;
- border-radius: 2px;
- .close-icon {
- width: 16px;
- height: 16px;
- float: right;
- margin: 17px 0 0;
- cursor: pointer;
- display: inline-block;
- background: url(../../assets/service/icon_Pop-ups_close.svg) center no-repeat;
- }
- }
- .chosen-list {
- height: 240px;
- width: 100%;
- padding: 10px 0 0 0;
- overflow-y: scroll;
- .service-item {
- height: 60px;
- width: 100%;
- margin-bottom: 10px;
- padding: 10px 0 10px 20px;
- line-height: 40px;
- font-size: 14px;
- position: relative;
- cursor: pointer;
- div {
- @include ellipsis;
- &.image {
- width: 40px;
- height: 40px;
- margin-right: 10px;
- img {
- width: 100%;
- height: 100%;
- float: left;
- }
- }
- &.name {
- color: #353535;
- width: 290px;
- }
- &.price {
- color: #353535;
- width: 130px;
- }
- }
- .delete-icon {
- display: none;
- width: 12px;
- height: 12px;
- position: absolute;
- top: 24px;
- right: 20px;
- background: url(../../assets/service/delete.png) center no-repeat;
- }
- &:hover {
- background: #f5f7fa;
- .delete-icon {
- display: block;
- }
- }
- }
- }
- }
- }
- </style>
-
|