index.vue 4.5 KB

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