123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158 |
- <template>
- <view class="container">
- <view class="search-wrapper">
- <view class="search-input">
- <view class="search-input-wrapper">
- <view class="right">
- <input v-model="code" class="input" placeholder="请输入卡券核销码" type="text"></input>
- </view>
- <view class="scan u-icon-wrap">
- <view class="icon" @click="doScan">
- <u-icon name="scan"></u-icon>
- </view>
- </view>
- </view>
- </view>
- </view>
- <view class="main-form">
- <view class="footer">
- <view class="btn-wrapper">
- <view class="btn-item btn-item-main" :class="{ disabled }" @click="doSubmit()">确定兑换</view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import * as couponApi from '@/api/coupon'
- export default {
- data() {
- return {
- code: '',
- // 按钮禁用
- disabled: false
- }
- },
- /**
- * 生命周期函数--监听页面加载
- */
- onLoad(options) {
- this.code = options.code ? options.code : '';
- },
- methods: {
-
- /**
- * 扫码
- */
- doScan() {
- const app = this;
- uni.scanCode({
- success: function(res) {
- app.code = res.result;
- }
- });
- },
-
- /**
- * 提交兑换
- */
- doSubmit() {
- const app = this;
- app.disabled = true;
- couponApi.receive({ 'couponId': 0, 'receiveCode': app.code })
- .then(result => {
- app.code = '';
- app.disabled = false;
- // 显示提示
- if (parseInt(result.code) === 200) {
- app.$success("兑换成功!");
- } else {
- app.$error(result.message);
- }
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .container {
- padding: 20rpx;
- min-height: 100vh;
- background: #f7f7f7;
- }
- .search-wrapper {
- display: flex;
- height: 100rpx;
- margin-top: 80rpx;
- padding: 0 5rpx;
- }
- // 搜索输入框
- .search-input {
- width: 100%;
- background: #fff;
- border-radius: 10rpx 0 0 10rpx;
- box-sizing: border-box;
- overflow: hidden;
- .search-input-wrapper {
- display: flex;
- .right {
- flex: 1;
- input {
- font-size: 30rpx;
- height: 100rpx;
- line-height: 100rpx;
- padding-left: 30rpx;
- .input-placeholder {
- color: #aba9a9;
- }
- }
- }
-
- .scan {
- display: flex;
- width: 60rpx;
- justify-content: center;
- align-items: center;
- .icon {
- display: block;
- color: #b4b4b4;
- font-size: 48rpx;
- }
-
- }
- }
- }
- /* 底部操作栏 */
- .footer {
- margin-top: 100rpx;
- .btn-wrapper {
- height: 100%;
- display: flex;
- align-items: center;
- padding: 0 5rpx;
- }
- .btn-item {
- flex: 1;
- font-size: 28rpx;
- height: 80rpx;
- line-height: 80rpx;
- text-align: center;
- color: #fff;
- border-radius: 40rpx;
- }
-
- .btn-item-main {
- background: linear-gradient(to right, #f9211c, #ff6335);
- // 禁用按钮
- &.disabled {
- background: #ff9779;
- }
- }
- }
- </style>
|