w-front-end / popularSports · Commits

Commit c08d138215030fc81214a0bd9d5b9c4bf4258fff

Authored by zhiyangdu
1 parent 6642fe00

提示app内打开

Inline Side-by-side
Showing 3 changed files with 239 additions and 121 deletions
src/components/showModal/showModal.vue
  View file @c08d138
1 <template> 1 <template>
2 <div class="show-modal" v-if="isShow && options"> 2 <div class="show-modal" v-if="isShow && options">
3 - <div class="layer-box" @click="hideLayer" @touchmove.stop.prevent>  
4 - <div class="box" @click.stop.prevent>  
5 - <div class="title" v-if="options.title">{{options.title}}</div>  
6 - <div class="content" v-if="options.content">  
7 - <div v-html="options.content"></div>  
8 - </div>  
9 - <div class="buttons-box">  
10 - <div class="btn btn-cancel" @click="hideLayer">取消</div>  
11 - <div class="btn btn-okay" @click="success(options)">允许</div>  
12 - </div>  
13 - </div>  
14 - </div> 3 + <div class="layer-box" :class="defaultOptions.classType || ''" @click="hideLayer" @touchmove.stop.prevent>
  4 + <div class="box" @click.stop.prevent>
  5 + <div class="title" v-if="defaultOptions.title">{{defaultOptions.title}}</div>
  6 + <slot name="htmlMessage"></slot>
  7 + <div class="message" v-if="defaultOptions.message">
  8 + <div class="message-content" v-html="defaultOptions.message"></div>
  9 + </div>
  10 + <div class="buttons-box">
  11 + <div class="btn btn-cancel" v-if="defaultOptions.showCancelButton" @click="cancel(defaultOptions.params || defaultOptions)">{{defaultOptions.cancelButtonText}}</div>
  12 + <div class="btn btn-confirm" v-if="defaultOptions.showConfirmButton" @click="confirm(defaultOptions.params || defaultOptions)">{{defaultOptions.confirmButtonText}}</div>
  13 + </div>
  14 + </div>
  15 + <div class="bottomClose" v-if="defaultOptions.bottomClose" @click="hideLayer">
  16 + <img src="static/img/icon_layer_bottom_close.png" class="close-img" />
  17 + </div>
  18 + </div>
15 </div> 19 </div>
16 </template> 20 </template>
17 21
@@ -19,63 +23,107 @@ @@ -19,63 +23,107 @@
19 export default { 23 export default {
20 data: function () { 24 data: function () {
21 return { 25 return {
22 - isShow: false 26 + isShow: false,
  27 + defaultOptions: null // 默认参数
23 } 28 }
24 }, 29 },
25 props: ["options"], 30 props: ["options"],
26 - methods: {  
27 -  
28 - /**  
29 - * 显示提示用户升级层  
30 - */  
31 - showLayer() {  
32 -  
33 - // 设置浮层显示  
34 - this.$set(this.options, "isShow", true);  
35 - },  
36 -  
37 - /**  
38 - * 隐藏提示用户升级层  
39 - */  
40 - hideLayer() {  
41 -  
42 - // 设置浮层隐藏  
43 - this.$set(this.options, "isShow", false);  
44 - },  
45 -  
46 - /**  
47 - * 点击"确定"回调  
48 - * @param {object} options [回调参数]  
49 - */  
50 - success(options) {  
51 -  
52 - // 隐藏层  
53 - this.hideLayer();  
54 -  
55 - if (typeof this.options === "object" && typeof this.options.cb === "function") {  
56 - this.options.cb(options);  
57 - }  
58 - }  
59 - },  
60 - watch: {  
61 - "options.isShow"(newValue, oldValue) {  
62 - if (newValue !== oldValue) {  
63 - this.isShow = newValue;  
64 - }  
65 - }  
66 - },  
67 - mounted() {  
68 -  
69 - this.$nextTick(function() {  
70 - if (this.options !== null && typeof this.options === "object" && this.options.isShow) {  
71 - this.isShow = this.options.isShow;  
72 - }  
73 - });  
74 - } 31 + methods: {
  32 +
  33 + /**
  34 + * 显示提示用户升级层
  35 + */
  36 + showLayer() {
  37 +
  38 + // 设置浮层显示
  39 + this.$set(this, "isShow", true);
  40 + },
  41 +
  42 + /**
  43 + * 隐藏提示用户升级层
  44 + */
  45 + hideLayer() {
  46 +
  47 + // 设置浮层隐藏
  48 + this.$set(this, "isShow", false);
  49 + },
  50 +
  51 + /**
  52 + * 初始化showModal默认参数
  53 + */
  54 + initDefaultOptions() {
  55 +
  56 + // 初始化默认参数
  57 + this.$set(this, "defaultOptions", {
  58 + title: "",
  59 + message: "",
  60 + classType: "",
  61 + showConfirmButton: true,
  62 + confirmButtonText: "确定",
  63 + confirmButtonClass: "",
  64 + confirmButtonCallback: null,
  65 + showCancelButton: false,
  66 + cancelButtonText: "",
  67 + cancelButtonClass: "",
  68 + cancelButtonCallback: null,
  69 + bottomClose: false,
  70 + closeOnClickModal: true
  71 + });
  72 + },
  73 +
  74 + /**
  75 + * 点击"确定"回调
  76 + * @param {object} options [回调参数]
  77 + */
  78 + confirm(options) {
  79 + // 隐藏层
  80 + this.hideLayer();
  81 +
  82 + if (typeof this.options === "object" && typeof this.options.confirmButtonCallback === "function") {
  83 + this.options.confirmButtonCallback(options);
  84 + }
  85 + },
  86 +
  87 + /**
  88 + * 点击"取消"回调
  89 + * @param {object} options [回调参数]
  90 + */
  91 + cancel(options) {
  92 +
  93 + // 隐藏层
  94 + this.hideLayer();
  95 +
  96 + if (typeof this.options === "object" && typeof this.options.cancelButtonCallback === "function") {
  97 + this.options.cancelButtonCallback(options);
  98 + }
  99 + }
  100 + },
  101 + watch: {
  102 +
  103 + /**
  104 + * 监听选项变化
  105 + */
  106 + options(newVal, oldVal) {
  107 +
  108 + // this.$nextTick(function() {
  109 + if (newVal !== null && typeof newVal === "object") {
  110 +
  111 + // 初始化showModal默认参数
  112 + this.initDefaultOptions();
  113 +
  114 + // 合并提示框配置选项
  115 + Object.assign(this.defaultOptions, newVal);
  116 + }
  117 + // });
  118 + }
  119 + },
  120 + mounted() {
  121 +
  122 + }
75 } 123 }
76 </script> 124 </script>
77 125
78 <!-- Add "scoped" attribute to limit CSS to this component only --> 126 <!-- Add "scoped" attribute to limit CSS to this component only -->
79 <style rel="stylesheet/less" lang="less"> 127 <style rel="stylesheet/less" lang="less">
80 @import './show_modal'; 128 @import './show_modal';
81 -</style>  
82 \ No newline at end of file 129 \ No newline at end of file
  130 +</style>
src/components/showModal/show_modal.less
  View file @c08d138
1 @charset "UTF-8"; 1 @charset "UTF-8";
2 2
3 .show-modal { 3 .show-modal {
4 - .layer-box {  
5 - position: fixed;  
6 - top: 0;  
7 - left: 0;  
8 - z-index: 150;  
9 - display: flex;  
10 - flex-direction: row;  
11 - justify-content: center;  
12 - align-items: center;  
13 - background-color: rgba(0, 0, 0, 0.4);  
14 - width: 100%;  
15 - height: 100%;  
16 - .box {  
17 - background-color: #F8F8FA;  
18 - width: 540px;  
19 - border-radius: 10px;  
20 - .title {  
21 -  
22 - }  
23 - .content {  
24 - padding: 60px 0 50px 0;  
25 - text-align: center;  
26 - color: #000000;  
27 - font-size: 30px;  
28 - font-weight: 500;  
29 - line-height: 42px;  
30 - letter-spacing: 1px;  
31 - }  
32 - .buttons-box {  
33 - display: flex;  
34 - justify-content: space-evenly;  
35 - .btn {  
36 - display: flex;  
37 - justify-content: center;  
38 - align-items: center;  
39 - height: 104px;  
40 - border-top: 1px solid #EBEBEB;  
41 - & + .btn {  
42 - border-left: 1px solid #EBEBEB;  
43 - }  
44 - &.btn-okay {  
45 - flex: 1;  
46 - color: #6B7698;  
47 - font-size: 30px;  
48 - letter-spacing: 1px;  
49 - }  
50 - &.btn-cancel {  
51 - flex: 1;  
52 - color: #000000;  
53 - font-size: 30px;  
54 - letter-spacing: 1px;  
55 - }  
56 - }  
57 - }  
58 - }  
59 - }  
60 -}  
61 \ No newline at end of file 4 \ No newline at end of file
  5 + .layer-box {
  6 + position: fixed;
  7 + top: 0;
  8 + left: 0;
  9 + z-index: 150;
  10 + display: flex;
  11 + flex-direction: column;
  12 + justify-content: center;
  13 + align-items: center;
  14 + background-color: rgba(0, 0, 0, 0.4);
  15 + width: 100%;
  16 + height: 100%;
  17 + .box {
  18 + background-color: #F8F8FA;
  19 + width: 540px;
  20 + border-radius: 10px;
  21 + .title {
  22 + color: #333333;
  23 + font-size: 32px;
  24 + font-weight: 500;
  25 + text-align: center;
  26 + padding-top: 30px;
  27 + & + .message {
  28 + padding-top: 30px;
  29 + }
  30 + }
  31 + .message {
  32 + padding: 60px 0 50px 0;
  33 + text-align: center;
  34 + color: #000000;
  35 + font-size: 30px;
  36 + font-weight: 500;
  37 + line-height: 42px;
  38 + letter-spacing: 1px;
  39 + }
  40 + .buttons-box {
  41 + display: flex;
  42 + justify-content: space-evenly;
  43 + .btn {
  44 + display: flex;
  45 + justify-content: center;
  46 + align-items: center;
  47 + height: 104px;
  48 + border-top: 1px solid #EBEBEB;
  49 + & + .btn {
  50 + border-left: 1px solid #EBEBEB;
  51 + }
  52 + &.btn-confirm {
  53 + flex: 1;
  54 + color: #6B7698;
  55 + font-size: 30px;
  56 + letter-spacing: 1px;
  57 + }
  58 + &.btn-cancel {
  59 + flex: 1;
  60 + color: #000000;
  61 + font-size: 30px;
  62 + letter-spacing: 1px;
  63 + }
  64 + }
  65 + }
  66 + }
  67 + .bottomClose {
  68 + margin-top: 99px;
  69 + .close-img {
  70 + display: block;
  71 + width: 62px;
  72 + height: 62px;
  73 + }
  74 + }
  75 + &.douyin-url {
  76 + background-color: rgba(0, 0, 0, 0.6);
  77 + .box {
  78 + background-color: #FFFFFF;
  79 + width: 580px;
  80 + border-radius: 24px;
  81 + .message {
  82 + background-color: #F9F9F9;
  83 + color: #666666;
  84 + font-size: 26px;
  85 + width: 520px;
  86 + margin: 30px auto 40px auto;
  87 + padding: 0;
  88 + border-radius: 16px;
  89 + .message-content {
  90 + width: 468px;
  91 + margin: 0 auto;
  92 + padding: 26px 0;
  93 + text-align: left;
  94 + }
  95 + }
  96 + .buttons-box {
  97 + justify-content: space-between;
  98 + align-items: center;
  99 + width: 520px;
  100 + margin: 0 auto 40px auto;
  101 + .btn {
  102 + display: flex;
  103 + justify-content: center;
  104 + align-items: center;
  105 + border-radius:39px;
  106 + & + .btn {
  107 + margin-left: 48px;
  108 + }
  109 + &.btn-confirm {
  110 + background:linear-gradient(270deg,rgba(207,146,117,1) 0%,rgba(238,185,143,1) 100%);
  111 + width: 236px;
  112 + height: 78px;
  113 + color: #FFFFFF;
  114 + font-size: 30px;
  115 + letter-spacing: 1px;
  116 + }
  117 + &.btn-cancel {
  118 + width: 234px;
  119 + height: 76px;
  120 + color: #D69B7B;
  121 + font-size: 30px;
  122 + letter-spacing: 1px;
  123 + border:1px solid rgba(214,155,123,1);
  124 + }
  125 + }
  126 + }
  127 + }
  128 + }
  129 + }
  130 +}
src/pages/index/index.vue
  View file @c08d138
@@ -53,7 +53,8 @@ @@ -53,7 +53,8 @@
53 link(index){ 53 link(index){
54 // 区分app内点击还是app外点击 54 // 区分app内点击还是app外点击
55 if(this.isCNLive.value){ 55 if(this.isCNLive.value){
56 - this.$parent.callAppModal() 56 + // 提示app内打开
  57 + this.$parent.callApp()
57 }else { 58 }else {
58 var items; 59 var items;
59 if(index==1){ 60 if(index==1){