Applied.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
  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. this.verification(res.result);
  49. }
  50. });
  51. // #endif
  52. // #ifdef H5
  53. getWXSign().then(res => {
  54. console.log('wx_getLocation');
  55. this.$wx.scanQRCode({
  56. needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
  57. scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
  58. success: (res) => {
  59. console.log(res, "qrCode")
  60. this.verification(res.resultStr);
  61. }
  62. })
  63. })
  64. // #endif
  65. },
  66. //确定核销
  67. confirm() {
  68. if (!this.codes) {
  69. uni.showToast({
  70. title: '请输入核销码',
  71. icon: 'none'
  72. })
  73. return false
  74. }
  75. this.verification(this.codes);
  76. },
  77. //请求详情
  78. verification(code) {
  79. this.request({
  80. url:"coupon/verification",
  81. data: {
  82. token: uni.getStorageSync('token'),
  83. code: code,
  84. },
  85. }).then(res => {
  86. if (res.code == "200") {
  87. uni.showModal({
  88. title: '温馨提示',
  89. content: '核销成功',
  90. showCancel: false,
  91. confirmColor:"#000000",
  92. confirmText: '确定',
  93. success: (res) => {
  94. if (res.confirm) {
  95. this.codes = "";
  96. }
  97. },
  98. fail: () => {},
  99. complete: () => {}
  100. });
  101. }
  102. }).catch((res) => {
  103. console.log(res,"666")
  104. uni.showToast({
  105. title: res.message,
  106. icon: 'none'
  107. })
  108. });
  109. },
  110. }
  111. }
  112. </script>
  113. <style>
  114. page {
  115. background: #F5F7FA;
  116. }
  117. .flex-between {
  118. display: flex;
  119. flex-flow: row nowrap;
  120. justify-content: space-between;
  121. align-items: center;
  122. }
  123. .flex-y-center {
  124. display: -webkit-box;
  125. display: -webkit-flex;
  126. display: flex;
  127. -webkit-box-align: center;
  128. -webkit-align-items: center;
  129. -ms-flex-align: center;
  130. -ms-grid-row-align: center;
  131. align-items: center;
  132. }
  133. .appliedNum {
  134. height: 100rpx;
  135. background: #fff;
  136. /* margin-top: 10rpx; */
  137. }
  138. .appliedNumText {
  139. padding-left: 30rpx;
  140. font-size: 28rpx;
  141. font-family: PingFang SC, PingFang SC-Regular;
  142. font-weight: 400;
  143. color: #333333;
  144. }
  145. .appliedNuminput {
  146. flex: 1;
  147. text-align: right;
  148. padding: 0 30rpx 0 150rpx;
  149. font-size: 28rpx;
  150. font-family: PingFang SC, PingFang SC-Regular;
  151. font-weight: 400;
  152. color: #333;
  153. }
  154. .appliedNumpleahode {
  155. font-size: 28rpx;
  156. font-family: PingFang SC, PingFang SC-Regular;
  157. font-weight: 400;
  158. color: #666;
  159. }
  160. .appliedNumRgo {
  161. height: 100rpx;
  162. }
  163. .appliedNumRgotext {
  164. font-size: 28rpx;
  165. font-family: PingFang SC, PingFang SC-Regular;
  166. font-weight: 400;
  167. color: #666666;
  168. }
  169. .appliedNumRgoimg {
  170. width: 26rpx;
  171. height: 26rpx;
  172. margin: 0 30rpx 0 6rpx;
  173. }
  174. /* 圆圈扩散 */
  175. .point {
  176. width: 400rpx;
  177. height: 400rpx;
  178. position: /* absolute */;
  179. left: 170rpx;
  180. top: 220rpx;
  181. background: linear-gradient(180deg, #6fa5ff, #438aff);
  182. position: relative;
  183. border-radius: 50%;
  184. }
  185. /* 设置动画前颜色 */
  186. .point-flicker:after {
  187. background: linear-gradient(180deg, #6fa5ff, #438aff);
  188. }
  189. /* 设置动画后颜色 */
  190. .point-flicker:before {
  191. background: linear-gradient(180deg, #6fa5ff, #438aff);
  192. }
  193. /* 设置动画 */
  194. .point-flicker:before,
  195. .point-flicker:after {
  196. content: '';
  197. width: 400rpx;
  198. height: 400rpx;
  199. position: absolute;
  200. left: 10%;
  201. top: 10%;
  202. margin-left: -40rpx;
  203. margin-top: -40rpx;
  204. border-radius: 50%;
  205. animation: warn 1.5s ease-out 0s infinite;
  206. }
  207. /* @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 */
  208. @keyframes warn {
  209. 0% {
  210. transform: scale(0.5);
  211. opacity: 1;
  212. }
  213. 30% {
  214. opacity: 1;
  215. }
  216. 100% {
  217. transform: scale(1.4);
  218. opacity: 0;
  219. }
  220. }
  221. /* 圆圈扩散 end*/
  222. .scanTextsImgs {
  223. width: 100rpx;
  224. height: 100rpx;
  225. position: absolute;
  226. left: 50%;
  227. top: 45%;
  228. transform: translate(-50%, -50%);
  229. z-index: 998;
  230. }
  231. .scanTexts {
  232. position: absolute;
  233. left: 50%;
  234. top: 70%;
  235. transform: translate(-50%, -50%);
  236. color: #fff;
  237. font-size: 36rpx;
  238. z-index: 999;
  239. }
  240. /* 底部按钮 */
  241. .bottomButton {
  242. position: absolute;
  243. left: 60rpx;
  244. bottom: 100rpx;
  245. width: 630rpx;
  246. height: 98rpx;
  247. line-height: 98rpx;
  248. text-align: center;
  249. background: linear-gradient(180deg, #6fa5ff, #438aff);
  250. border-radius: 8rpx;
  251. box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
  252. font-size: 32rpx;
  253. font-family: Source Han Sans CN, Source Han Sans CN-Medium;
  254. font-weight: 500;
  255. color: #ffffff;
  256. }
  257. </style>