123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299 |
- <template>
- <view>
- <view class="" style="height: 20rpx;"></view>
- <!-- 核销号码 -->
- <view class="appliedNum flex-y-center flex-between ">
- <view class="appliedNumText">优惠券核销码</view>
- <input type="text" :value="codes" @input="appliedTab" class="appliedNuminput" placeholder-class="appliedNumpleahode"
- placeholder="请输入优惠券核销码" />
- </view>
- <!-- 圆圈扩散 -->
- <view class="point point-flicker" @click="scan">
- <image src="./static/images/my_icon_6.png" mode="" class="scanTextsImgs"></image>
- <view class="scanTexts">扫码核销</view>
- </view>
- <!-- 圆圈扩散end -->
- <!-- 底部按钮 -->
- <view class="bottomButton" @click="confirm">核销</view>
- </view>
- </template>
- <script>
- // #ifdef H5
- import getWXSign from "@/static/js/config.js";
- // #endif
- export default {
- data() {
- return {
- codes: '', //优惠券code码
- is_hexiao:false
- }
- },
- onLoad() {
-
- if(uni.getStorageSync("is_login")=="2"){
- this.is_hexiao=true;
- }
-
- },
-
- onShow() {
- },
- methods: {
- //输入核销码
- appliedTab(e) {
- this.codes = e.detail.value;
- },
-
- //扫描核销
- scan() {
- // #ifdef MP-WEIXIN
- uni.scanCode({
- success: (res)=> {
- this.verification(res.result);
- }
- });
- // #endif
- // #ifdef H5
- getWXSign().then(res => {
- console.log('wx_getLocation');
- this.$wx.scanQRCode({
- needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
- scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
- success: (res) => {
- console.log(res, "qrCode")
- this.verification(res.resultStr);
- }
- })
- })
- // #endif
- },
-
- //确定核销
- confirm() {
- if (!this.codes) {
- uni.showToast({
- title: '请输入核销码',
- icon: 'none'
- })
- return false
- }
- this.verification(this.codes);
- },
- //请求详情
- verification(code) {
- this.request({
- url:"coupon/verification",
- data: {
- token: uni.getStorageSync('token'),
- code: code,
- },
- }).then(res => {
- if (res.code == "200") {
- uni.showModal({
- title: '温馨提示',
- content: '核销成功',
- showCancel: false,
- confirmColor:"#000000",
- confirmText: '确定',
- success: (res) => {
- if (res.confirm) {
- this.codes = "";
- }
- },
- fail: () => {},
- complete: () => {}
- });
- }
- }).catch((res) => {
- console.log(res,"666")
- uni.showToast({
- title: res.message,
- icon: 'none'
- })
- });
- },
-
- }
- }
- </script>
- <style>
- page {
- background: #F5F7FA;
- }
- .flex-between {
- display: flex;
- flex-flow: row nowrap;
- justify-content: space-between;
- align-items: center;
- }
- .flex-y-center {
- display: -webkit-box;
- display: -webkit-flex;
- display: flex;
- -webkit-box-align: center;
- -webkit-align-items: center;
- -ms-flex-align: center;
- -ms-grid-row-align: center;
- align-items: center;
- }
- .appliedNum {
- height: 100rpx;
- background: #fff;
- /* margin-top: 10rpx; */
- }
- .appliedNumText {
- padding-left: 30rpx;
- font-size: 28rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- color: #333333;
- }
- .appliedNuminput {
- flex: 1;
- text-align: right;
- padding: 0 30rpx 0 150rpx;
- font-size: 28rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- color: #333;
- }
- .appliedNumpleahode {
- font-size: 28rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- color: #666;
- }
- .appliedNumRgo {
- height: 100rpx;
- }
- .appliedNumRgotext {
- font-size: 28rpx;
- font-family: PingFang SC, PingFang SC-Regular;
- font-weight: 400;
- color: #666666;
- }
- .appliedNumRgoimg {
- width: 26rpx;
- height: 26rpx;
- margin: 0 30rpx 0 6rpx;
- }
- /* 圆圈扩散 */
- .point {
- width: 400rpx;
- height: 400rpx;
- position: /* absolute */;
- left: 170rpx;
- top: 220rpx;
- background: linear-gradient(180deg, #6fa5ff, #438aff);
- position: relative;
- border-radius: 50%;
- }
- /* 设置动画前颜色 */
- .point-flicker:after {
- background: linear-gradient(180deg, #6fa5ff, #438aff);
- }
- /* 设置动画后颜色 */
- .point-flicker:before {
- background: linear-gradient(180deg, #6fa5ff, #438aff);
- }
- /* 设置动画 */
- .point-flicker:before,
- .point-flicker:after {
- content: '';
- width: 400rpx;
- height: 400rpx;
- position: absolute;
- left: 10%;
- top: 10%;
- margin-left: -40rpx;
- margin-top: -40rpx;
- border-radius: 50%;
- animation: warn 1.5s ease-out 0s infinite;
- }
- /* @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 */
- @keyframes warn {
- 0% {
- transform: scale(0.5);
- opacity: 1;
- }
- 30% {
- opacity: 1;
- }
- 100% {
- transform: scale(1.4);
- opacity: 0;
- }
- }
- /* 圆圈扩散 end*/
- .scanTextsImgs {
- width: 100rpx;
- height: 100rpx;
- position: absolute;
- left: 50%;
- top: 45%;
- transform: translate(-50%, -50%);
- z-index: 998;
- }
- .scanTexts {
- position: absolute;
- left: 50%;
- top: 70%;
- transform: translate(-50%, -50%);
- color: #fff;
- font-size: 36rpx;
- z-index: 999;
- }
- /* 底部按钮 */
- .bottomButton {
- position: absolute;
- left: 60rpx;
- bottom: 100rpx;
- width: 630rpx;
- height: 98rpx;
- line-height: 98rpx;
- text-align: center;
- background: linear-gradient(180deg, #6fa5ff, #438aff);
- border-radius: 8rpx;
- box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
- font-size: 32rpx;
- font-family: Source Han Sans CN, Source Han Sans CN-Medium;
- font-weight: 500;
- color: #ffffff;
- }
- </style>
|