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 1 <template>
2 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 19 </div>
16 20 </template>
17 21  
... ... @@ -19,63 +23,107 @@
19 23 export default {
20 24 data: function () {
21 25 return {
22   - isShow: false
  26 + isShow: false,
  27 + defaultOptions: null // 默认参数
23 28 }
24 29 },
25 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 124 </script>
77 125  
78 126 <!-- Add "scoped" attribute to limit CSS to this component only -->
79 127 <style rel="stylesheet/less" lang="less">
80 128 @import './show_modal';
81   -</style>
82 129 \ No newline at end of file
  130 +</style>
... ...
src/components/showModal/show_modal.less
  View file @c08d138
1 1 @charset "UTF-8";
2 2  
3 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 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 53 link(index){
54 54 // 区分app内点击还是app外点击
55 55 if(this.isCNLive.value){
56   - this.$parent.callAppModal()
  56 + // 提示app内打开
  57 + this.$parent.callApp()
57 58 }else {
58 59 var items;
59 60 if(index==1){
... ...