activityBean.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. <template>
  2. <view>
  3. <view class="tui-alert-class tui-alert-box" :class="[show?'tui-alert-show':'tui-alert-hide']" @touchmove.stop.prevent="discard">
  4. <view class="tui-alert-content" :style="{'background-image': 'url('+bgImagePath+')'}">
  5. <view class="tui-alert-content-text">恭喜您获得采美豆</view>
  6. <view class="tui-alert-content-bean">
  7. <view class="tui-alert-main">
  8. <image class="tui-alert-icon" src="https://static.caimei365.com/app/img/icon/bean-icon@2x.png" mode=""></image>
  9. <view class="tui-alert-text">
  10. <text class="icon-add">+</text>
  11. <text class="icon-text">{{ beanNumber }}</text>
  12. </view>
  13. </view>
  14. </view>
  15. <view class="tui-alert-content-tips">
  16. <view class="tips">采美豆可抵扣运费</view>
  17. </view>
  18. </view>
  19. <text class="iconfont icon-2guanbi" @click.stop="handleClickCancel"></text>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. name:"tuiAlert",
  26. props: {
  27. //控制显示
  28. show: {
  29. type: Boolean,
  30. default: false
  31. },
  32. //提示信息字体大小
  33. size: {
  34. type: Number,
  35. default: 30
  36. },
  37. //提示信息字体颜色
  38. color: {
  39. type: String,
  40. default: "#333"
  41. },
  42. //按钮字体颜色
  43. btnColor: {
  44. type: String,
  45. default: "#EB0909"
  46. },
  47. btnText:{
  48. type: String,
  49. default: ""
  50. },
  51. beanType:{//根据类型设置背景图片
  52. type: Number,
  53. default: 1
  54. },
  55. beanNumber:{//采美豆显示数量
  56. type:Number,
  57. default:100
  58. }
  59. },
  60. data() {
  61. return{
  62. bgImagePath:'https://static.caimei365.com/app/img/icon/bean-icon-2@2x.png',
  63. }
  64. },
  65. created() {
  66. this.handInitType(this.beanType)
  67. },
  68. methods: {
  69. handInitType(type){
  70. this.bgImagePath = `https://static.caimei365.com/app/img/icon/bean-icon-${type}@2x.png`
  71. console.log(this.bgImagePath)
  72. },
  73. handleClick(e) {
  74. console.log(e);
  75. if (!this.show) return;
  76. this.$emit('click',false);
  77. },
  78. handleClickCancel() {
  79. this.$emit('cancel',false);
  80. },
  81. discard(){
  82. //丢弃
  83. }
  84. }
  85. }
  86. </script>
  87. <style lang="scss">
  88. .tui-alert-box {
  89. width: 100%;
  90. height: 100%;
  91. display: flex;
  92. align-items: center;
  93. justify-content: center;
  94. flex-direction: column;
  95. position: fixed;
  96. left: 0;
  97. top: 100%;
  98. opacity: 0;
  99. background: rgba(51,51,51,0.5);
  100. z-index: 99999;
  101. }
  102. .tui-alert-show {
  103. top: 0;
  104. opacity: 1;
  105. // animation:rundtop 0.5s;
  106. }
  107. .tui-alert-hide{
  108. top: 100%;
  109. opacity: 0;
  110. // animation:rundbottom 0.5s;
  111. }
  112. .tui-alert-content{
  113. width: 580rpx;
  114. height: 790rpx;
  115. position: absolute;
  116. top: 0;
  117. left: 0;
  118. bottom: 0;
  119. right: 0;
  120. margin: auto;
  121. box-sizing: border-box;
  122. padding-top: 485rpx;
  123. background-size: cover;
  124. .tui-alert-content-text{
  125. height: 118rpx;
  126. line-height: 118rpx;
  127. text-align: center;
  128. width: 100%;
  129. font-size: $font-size-36;
  130. color: #333333;
  131. }
  132. .tui-alert-content-bean{
  133. width: 100%;
  134. height: 74rpx;
  135. line-height: 74rpx;
  136. box-sizing: border-box;
  137. display: flex;
  138. flex-direction: column;
  139. align-items: center;
  140. .tui-alert-main{
  141. .tui-alert-icon{
  142. width: 94rpx;
  143. height: 74rpx;
  144. display: block;
  145. float: left;
  146. }
  147. .tui-alert-text{
  148. color: $color-system;
  149. line-height: 74rpx;
  150. float: left;
  151. .icon-add{
  152. font-size:40rpx;
  153. margin:0 15rpx;
  154. }
  155. .icon-text{
  156. font-weight: bold;
  157. font-size:48rpx;
  158. }
  159. }
  160. }
  161. }
  162. .tui-alert-content-tips{
  163. width: 100%;
  164. height: 36rpx;
  165. line-height: 36rpx;
  166. margin-top: 41rpx;
  167. box-sizing: border-box;
  168. display: flex;
  169. flex-direction: column;
  170. align-items: center;
  171. .tips{
  172. width: 224rpx;
  173. height: 36rpx;
  174. background-color: rgba(226, 91, 28, 0.1);
  175. border-radius: 18rpx;
  176. line-height: 36rpx;
  177. font-size: $font-size-24;
  178. color: $color-system;
  179. text-align: center;
  180. }
  181. }
  182. }
  183. .icon-2guanbi{
  184. display: block;
  185. width: 100rpx;
  186. height: 100rpx;
  187. line-height: 100rpx;
  188. text-align: center;
  189. color: #FFFFFF;
  190. position: absolute;
  191. bottom: 13%;
  192. left: 50%;
  193. font-size: 60rpx;
  194. margin-left: -50rpx;
  195. }
  196. .tui-alert-mask-show {
  197. visibility: visible;
  198. opacity: 1;
  199. }
  200. .tui-alert-btn {
  201. width: 100%;
  202. height: 90rpx;
  203. display: flex;
  204. align-items: center;
  205. justify-content: center;
  206. background-color: #fff;
  207. box-sizing: border-box;
  208. position: relative;
  209. font-size: 32rpx;
  210. line-height: 32rpx;
  211. }
  212. .tui-alert-btn-hover {
  213. background-color: #f7f7f7;
  214. }
  215. .tui-alert-btn::before {
  216. width: 100%;
  217. content: "";
  218. position: absolute;
  219. border-top: 1rpx solid #E0E0E0;
  220. -webkit-transform: scaleY(0.5);
  221. transform: scaleY(0.5);
  222. left: 0;
  223. top: 0;
  224. }
  225. @keyframes rundtop{
  226. 0%{top: 100%;opacity: 0;}
  227. 100%{top:0;opacity: 1;}
  228. }
  229. @keyframes rundbottom{
  230. 0%{top: 0;opacity: 1;}
  231. 100%{top:100%;opacity: 0;}
  232. }
  233. </style>