index.vue 6.1 KB

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