Applied.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. <template>
  2. <view>
  3. <view class="" style="height: 20rpx;"></view>
  4. <!-- 核销号码 -->
  5. <view class="appliedNum flex-y-center flex-between ">
  6. <view class="appliedNumText">优惠券核销码</view>
  7. <input type="text" :value="codes" @input="appliedTab" class="appliedNuminput" placeholder-class="appliedNumpleahode"
  8. placeholder="请输入优惠券核销码" />
  9. </view>
  10. <!-- 圆圈扩散 -->
  11. <view class="point point-flicker" @click="scan">
  12. <image src="../static/images/my_icon_6.png" mode="" class="scanTextsImgs"></image>
  13. <view class="scanTexts">扫码核销</view>
  14. </view>
  15. <!-- 圆圈扩散end -->
  16. <!-- 底部按钮 -->
  17. <view class="bottomButton" @click="confirm">核销</view>
  18. </view>
  19. </template>
  20. <script>
  21. // #ifdef H5
  22. import getWXSign from "@/static/js/config.js";
  23. // #endif
  24. export default {
  25. data() {
  26. return {
  27. codes: '', //优惠券code码
  28. is_hexiao:false
  29. }
  30. },
  31. onLoad() {
  32. if(uni.getStorageSync("is_login")=="2"){
  33. this.is_hexiao=true;
  34. }
  35. },
  36. onShow() {
  37. },
  38. methods: {
  39. //输入核销码
  40. appliedTab(e) {
  41. this.codes = e.detail.value;
  42. },
  43. //扫描核销
  44. scan() {
  45. // #ifdef MP-WEIXIN
  46. uni.scanCode({
  47. success: (res)=> {
  48. console.log(res,"eeeee")
  49. // this.verification(res.result);
  50. uni.navigateTo({
  51. url:"./Applied-detail?code="+res.result
  52. })
  53. }
  54. });
  55. // #endif
  56. // #ifdef H5
  57. getWXSign().then(res => {
  58. console.log('wx_getLocation');
  59. this.$wx.scanQRCode({
  60. needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
  61. scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
  62. success: (res) => {
  63. console.log(res, "qrCode")
  64. uni.navigateTo({
  65. url:"./Applied-detail?code="+res.result
  66. })
  67. }
  68. })
  69. })
  70. // #endif
  71. },
  72. //确定核销
  73. confirm() {
  74. if (!this.codes) {
  75. uni.showToast({
  76. title: '请输入核销码',
  77. icon: 'none'
  78. })
  79. return false
  80. }
  81. uni.navigateTo({
  82. url:"./Applied-detail?code="+this.codes
  83. })
  84. },
  85. }
  86. }
  87. </script>
  88. <style>
  89. page {
  90. background: #F5F7FA;
  91. }
  92. .flex-between {
  93. display: flex;
  94. flex-flow: row nowrap;
  95. justify-content: space-between;
  96. align-items: center;
  97. }
  98. .flex-y-center {
  99. display: -webkit-box;
  100. display: -webkit-flex;
  101. display: flex;
  102. -webkit-box-align: center;
  103. -webkit-align-items: center;
  104. -ms-flex-align: center;
  105. -ms-grid-row-align: center;
  106. align-items: center;
  107. }
  108. .appliedNum {
  109. height: 100rpx;
  110. background: #fff;
  111. /* margin-top: 10rpx; */
  112. }
  113. .appliedNumText {
  114. padding-left: 30rpx;
  115. font-size: 28rpx;
  116. font-family: PingFang SC, PingFang SC-Regular;
  117. font-weight: 400;
  118. color: #333333;
  119. }
  120. .appliedNuminput {
  121. flex: 1;
  122. text-align: right;
  123. padding: 0 30rpx 0 150rpx;
  124. font-size: 28rpx;
  125. font-family: PingFang SC, PingFang SC-Regular;
  126. font-weight: 400;
  127. color: #333;
  128. }
  129. .appliedNumpleahode {
  130. font-size: 28rpx;
  131. font-family: PingFang SC, PingFang SC-Regular;
  132. font-weight: 400;
  133. color: #666;
  134. }
  135. .appliedNumRgo {
  136. height: 100rpx;
  137. }
  138. .appliedNumRgotext {
  139. font-size: 28rpx;
  140. font-family: PingFang SC, PingFang SC-Regular;
  141. font-weight: 400;
  142. color: #666666;
  143. }
  144. .appliedNumRgoimg {
  145. width: 26rpx;
  146. height: 26rpx;
  147. margin: 0 30rpx 0 6rpx;
  148. }
  149. /* 圆圈扩散 */
  150. .point {
  151. width: 400rpx;
  152. height: 400rpx;
  153. position: /* absolute */;
  154. left: 170rpx;
  155. top: 220rpx;
  156. background: linear-gradient(180deg, #6fa5ff, #438aff);
  157. position: relative;
  158. border-radius: 50%;
  159. }
  160. /* 设置动画前颜色 */
  161. .point-flicker:after {
  162. background: linear-gradient(180deg, #6fa5ff, #438aff);
  163. }
  164. /* 设置动画后颜色 */
  165. .point-flicker:before {
  166. background: linear-gradient(180deg, #6fa5ff, #438aff);
  167. }
  168. /* 设置动画 */
  169. .point-flicker:before,
  170. .point-flicker:after {
  171. content: '';
  172. width: 400rpx;
  173. height: 400rpx;
  174. position: absolute;
  175. left: 10%;
  176. top: 10%;
  177. margin-left: -40rpx;
  178. margin-top: -40rpx;
  179. border-radius: 50%;
  180. animation: warn 1.5s ease-out 0s infinite;
  181. }
  182. /* @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 */
  183. @keyframes warn {
  184. 0% {
  185. transform: scale(0.5);
  186. opacity: 1;
  187. }
  188. 30% {
  189. opacity: 1;
  190. }
  191. 100% {
  192. transform: scale(1.4);
  193. opacity: 0;
  194. }
  195. }
  196. /* 圆圈扩散 end*/
  197. .scanTextsImgs {
  198. width: 100rpx;
  199. height: 100rpx;
  200. position: absolute;
  201. left: 50%;
  202. top: 45%;
  203. transform: translate(-50%, -50%);
  204. z-index: 998;
  205. }
  206. .scanTexts {
  207. position: absolute;
  208. left: 50%;
  209. top: 70%;
  210. transform: translate(-50%, -50%);
  211. color: #fff;
  212. font-size: 36rpx;
  213. z-index: 999;
  214. }
  215. /* 底部按钮 */
  216. .bottomButton {
  217. position: absolute;
  218. left: 60rpx;
  219. bottom: 100rpx;
  220. width: 630rpx;
  221. height: 98rpx;
  222. line-height: 98rpx;
  223. text-align: center;
  224. background: linear-gradient(180deg, #6fa5ff, #438aff);
  225. border-radius: 8rpx;
  226. box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
  227. font-size: 32rpx;
  228. font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  229. font-weight: 500;
  230. color: #ffffff;
  231. }
  232. </style>