frontend_h5/treegitee/pages/redeem/index.vue

115 lines
3.8 KiB
Vue
Raw Normal View History

2024-06-17 15:25:46 +08:00
<template>
<view class="redeem pos">
<view v-if="ismask" class="mask flex_center flex_items"
style="width: 100%;height: 100vh;position: fixed;z-index: 1;background: rgba(0,0,0,.6);">
<view class="flex_column flex_items bgwhite"
style="padding:50rpx;border-radius: 16rpx;width: calc(100% - 200rpx);">
<image class="" :src="imgUrl+'dcg.png'" style="width: 120rpx;height: 120rpx;" mode=""></image>
<text class="f40 mt50" style="color: #333;">领取成功</text>
<text class="f28 mt30" style="color: #808080;">恭喜奖品已经成功兑换请到平台查看</text>
<view class="flex_items flex_center mt50">
<view @click="gomy" class="f32 f-center"
style="width: 280rpx;height: 80rpx;line-height: 80rpx;background: linear-gradient(270deg, #FF9843 0%, #F43139 100%);border-radius: 54rpx;color: #fff;">
确认
</view>
</view>
</view>
</view>
<view class="flex_items flex_center" style="width: 100%;">
<view class="bgwhite pb30 plr20 pt20 mt35" style="width: calc(100% - 100rpx);border-radius: 20rpx;">
<view class="flex_between flex_items pb20 bbe9s">
<view class="flex_start flex_items">
<image :src="info.prize_data.main_image"
style="width: 104rpx;height: 104rpx;border-radius: 12rpx;" mode=""></image>
<view class="flex_column f30 ml30" style="color:#333">
<text class="bold">{{info.prize}}</text>
<view class="f24 mt15" style="color: #666;">{{info.goodsExchangeRecord.receive_expire_time}}
</view>
</view>
</view>
<view class="flex_start flex_items mr20" style="color: #EB5E42;">
<view class="f24"></view>
<text class="f48 bolder one">{{info.prize_data.price}}</text>
</view>
</view>
<view class="pt20 f22" style="color: #666;">{{info.prize_data.price}}元积分兑换券积分已经充值到用户</view>
</view>
</view>
<view class="flex_items flex_center" style="width: 100%;">
<view class="bgwhite pb30 plr20 pt20 mt35 flex_column"
style="width: calc(100% - 100rpx);border-radius: 20rpx;">
<text class="f30 mt30 bold" style="color: #333;">待充账号</text>
<u--input class="mt30" fontSize="14" placeholder="请输入手机号" border="surround" v-model="form.phone">
</u--input>
<text class="f26 mt40" style="color:#4D4D4D;">温馨提示</text>
<view class="mt20 f24" style="color:#4D4D4D;">
<view>1.此商品兑换后不支持七天无理由退换货请谨慎兑换</view>
<view class="mt20">2.刷信誉兼职等理由均为诈骗术请勿相信任何诱导行为</view>
</view>
</view>
</view>
<view class="flex_items flex_center abs" style="width: 100%;bottom:60rpx;left: 0;">
<view @click="dui" class="f-center f32"
style="width: 638rpx;height: 108rpx;line-height: 108rpx;background: linear-gradient(270deg, #FF9843 0%, #F43139 100%);border-radius: 54rpx;color: #fff;">
立即兑换
</view>
</view>
<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
</view>
</template>
<script>
export default {
data() {
return {
form: {
phone: uni.getStorageSync('phone')
},
info: {},
ismask: false
}
},
onLoad(options) {
this.info = JSON.parse(options.item)
},
methods: {
dui() {
uni.showLoading({
title: '兑换中...',
})
let that = this
that.api.getdui({
joinId: this.info.id,
phone: this.form.phone
}).then((res) => {
console.log(res)
if (res.data.code == 200) {
that.ismask = true
} else {
uni.hideLoading()
uni.showToast({
title: res.data.message,
icon: 'none'
})
}
})
},
gomy(){
uni.switchTab({
url:"/pages/my/index"
})
}
}
}
</script>
<style>
page {
background: #f5f5f5 !important;
}
.redeem {
height: 100vh;
}
</style>