order-alert.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. <template name="sharealert">
  2. <view class="alert spec" :class="specClass">
  3. <view class="model-warp">
  4. <view class="content">
  5. <view class="content-title"></view>
  6. <view class="text-content">
  7. <view class="title">分享订单</view>
  8. <view class="share">您的分享码:<text class="txt">{{shareCode}}</text></view>
  9. <view class="text">
  10. <text>有效期为24小时。订单分享后若对方无法直接登录小程序查看订单,请提供该分享码给对方,通过输入分享码查看</text>
  11. </view>
  12. </view>
  13. <view class="alert-btn">
  14. </view>
  15. </view>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. import { queryOrderShareCode } from "@/api/order.js"
  21. export default{
  22. name:'sharealert',
  23. props:{
  24. orderID:{
  25. type:Number
  26. }
  27. },
  28. data() {
  29. return{
  30. shareCode:'',
  31. }
  32. },
  33. created() {
  34. },
  35. methods:{
  36. hideConfirm(){
  37. this.$parent.isShareModal = false
  38. },
  39. btnConfirm(code){//点击事件
  40. this.$emit('btnConfirm')
  41. }
  42. }
  43. }
  44. </script>
  45. <style lang="scss">
  46. /*弹窗*/
  47. .model-warp.none{
  48. display: none;
  49. }
  50. .model-warp.show{
  51. display: block;
  52. }
  53. .model-warp{
  54. width: 100%;
  55. height: 100%;
  56. background: rgba(0,0,0,0.3);
  57. position: fixed;
  58. top: 0;
  59. left: 0;
  60. z-index: 10000;
  61. transition: all 0.4s;
  62. &.none{
  63. display: none;
  64. }
  65. &.show{
  66. display: block;
  67. }
  68. .content{
  69. width: 540rpx;
  70. min-height: 310rpx;
  71. box-sizing: border-box;
  72. position: absolute;
  73. left: 50%;
  74. top: 50%;
  75. transform: translate(-50%,-50%);
  76. border-radius: 14rpx;
  77. .content-title{
  78. width: 100%;
  79. height: 232rpx;
  80. background: url(https://admin-b.caimei365.com/userfiles/1/images/photo/2020/08/alert%402x.png) no-repeat;
  81. background-size: contain;
  82. }
  83. .text-content{
  84. width: 448rpx;
  85. height: auto;
  86. padding: 20rpx 35rpx;
  87. float: left;
  88. .title{
  89. line-height: 40rpx;
  90. font-size: $font-size-28;
  91. color: $text-color;
  92. text-align: center;
  93. font-weight: bold;
  94. margin-bottom: 36rpx;
  95. }
  96. .share{
  97. line-height: 36rpx;
  98. font-size: $font-size-26;
  99. color: $text-color;
  100. text-align: justify;
  101. margin-top: 22rpx;
  102. font-weight: normal;
  103. .txt{
  104. margin-left: 10rpx;
  105. color: #FF2A2A;
  106. }
  107. }
  108. .text{
  109. line-height: 36rpx;
  110. font-size: $font-size-26;
  111. color: $text-color;
  112. text-align: justify;
  113. margin-top: 22rpx;
  114. }
  115. }
  116. .alert-btn{
  117. width: 80%;
  118. height: 70rpx;
  119. display: flex;
  120. margin: 0 auto;
  121. }
  122. }
  123. }
  124. </style>