modal-mask.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <template>
  2. <view>
  3. <button type="default" @click="showImageMenu">显示底部图标菜单</button>
  4. <view style="height: 100rpx;"></view>
  5. <button type="primary" @click="confirm({showCancel:true})">confirm提示</button>
  6. <view style="height: 100rpx;"></view>
  7. <button type="warn" @click="alert({showCancel:false})">alert提示</button>
  8. </view>
  9. </template>
  10. <script>
  11. import uniImageMenu from './js_sdk/bind-tip.js';
  12. export default {
  13. methods: {
  14. showImageMenu() {
  15. uniImageMenu.show({
  16. list: [{
  17. "img": "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/9a952c80-6080-11eb-a16f-5b3e54966275.png",
  18. "text": "uni-app"
  19. },
  20. {
  21. "img": "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/9a952c80-6080-11eb-a16f-5b3e54966275.png",
  22. "text": "uni-app"
  23. },
  24. {
  25. "img": "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/d84c6de0-6080-11eb-bdc1-8bd33eb6adaa.png",
  26. "text": "unicloud"
  27. },
  28. {
  29. "img": "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/9a952c80-6080-11eb-a16f-5b3e54966275.png",
  30. "text": "uni-app"
  31. }
  32. ],
  33. cancelText: "取消"
  34. }, index => {
  35. uni.showToast({
  36. title: '你点了第' + (index + 1) + '个图标',
  37. icon: 'none'
  38. });
  39. })
  40. },
  41. async alert(options) {
  42. await this.showModal(options);
  43. uni.showToast({
  44. title: "你点击了确定按钮",
  45. position: "bottom"
  46. })
  47. },
  48. async confirm(options) {
  49. try {
  50. await this.showModal(options);
  51. uni.showToast({
  52. title: "你点击了确定按钮",
  53. position: "bottom"
  54. })
  55. } catch (e) {
  56. uni.showToast({
  57. title: "你点击了取消按钮",
  58. position: "bottom"
  59. })
  60. }
  61. },
  62. showModal(options) {
  63. let params = {
  64. title: "提示",
  65. content: "自定义内容",
  66. align: "center", // 对齐方式 left/center/right
  67. cancelText: "取消", // 取消按钮的文字
  68. cancelColor: "#8F8F8F", // 取消按钮颜色
  69. confirmText: "确定", // 确认按钮颜色
  70. confirmColor: "#FFAD15", // 确认按钮颜色
  71. showCancel: true, // 是否显示取消按钮,默认为 true
  72. }
  73. Object.assign(params, options)
  74. let list = []
  75. Object.keys(params).forEach(ele => {
  76. list.push(ele + "=" + params[ele])
  77. })
  78. let paramsStr = list.join('&')
  79. console.log(1);
  80. uni.navigateTo({
  81. url: "/components/modal-mask/modal-mask-nvue?" + paramsStr
  82. })
  83. return new Promise((resolve, reject) => {
  84. uni.$once("AppModalCancel", () => {
  85. reject()
  86. })
  87. uni.$once("AppModalConfirm", () => {
  88. resolve()
  89. })
  90. });
  91. }
  92. }
  93. }
  94. </script>
  95. <style>
  96. </style>