126 lines
3.0 KiB
Vue
126 lines
3.0 KiB
Vue
<template>
|
||
<view class="">
|
||
<up-navbar
|
||
bg-color="transparent"
|
||
title="兑换中心"
|
||
@leftClick="back"
|
||
></up-navbar>
|
||
|
||
<view class="top"> </view>
|
||
<view class="box">
|
||
<view class="info">
|
||
<view class="titile">兑换您的专属福利 </view>
|
||
<view class="u-flex justify-center">
|
||
<view class="input-box u-flex">
|
||
<image class="icon" src="/user/static/duihuan.png"></image>
|
||
<view class="u-flex-1">
|
||
<input placeholder="请输入兑换码" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="u-flex justify-center u-m-t-24">
|
||
<button class="duihuan">确认兑换</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="desc">
|
||
<view>兑换说明:</view>
|
||
<view>
|
||
兑换说明： 1、请直接输入您获得的兑换码，点击立即兑换即可
|
||
2、兑换码为一次性，兑换完成之后即失效
|
||
3、兑换获得的奖励，将直接发送至您的账号，可直接前往余额或优惠券查看
|
||
4、兑换码为赠品，不可转赠、不退不换
|
||
5、兑换码需在有效期内完成兑换，过期即作废
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<confirmModal v-model="modal.confirm.show"></confirmModal>
|
||
<resultModal v-model="modal.result.show" :title="modal.result.title"></resultModal>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { result } from "lodash";
|
||
import confirmModal from "./components/confirm.vue";
|
||
import resultModal from "./components/result.vue";
|
||
import { reactive } from "vue";
|
||
const modal = reactive({
|
||
confirm: {
|
||
show: false,
|
||
},
|
||
result:{
|
||
show:true,
|
||
title:'该兑换码无效，请输入有效兑换码'
|
||
}
|
||
});
|
||
function back() {
|
||
uni.navigateBack();
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.top {
|
||
width: 962rpx;
|
||
height: 648rpx;
|
||
flex-shrink: 0;
|
||
border-radius: 962rpx;
|
||
background: linear-gradient(357deg, #faf7ee 3.12%, #d8b285 71.51%);
|
||
position: relative;
|
||
transform: translateX(-104rpx) translateY(-136rpx);
|
||
}
|
||
.box {
|
||
position: relative;
|
||
transform: translateY(-340rpx);
|
||
.info {
|
||
padding: 0 74rpx;
|
||
}
|
||
}
|
||
.input-box {
|
||
display: flex;
|
||
width: 604rpx;
|
||
height: 106rpx;
|
||
padding: 30rpx 40rpx;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
flex-shrink: 0;
|
||
border-radius: 70rpx;
|
||
border: 2rpx solid #c58e4d;
|
||
background: #fff;
|
||
margin-top: 60rpx;
|
||
.icon {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
}
|
||
.titile {
|
||
color: #5c2602;
|
||
font-family: "Source Han Sans CN";
|
||
font-size: 48rpx;
|
||
font-style: normal;
|
||
font-weight: 700;
|
||
line-height: normal;
|
||
letter-spacing: 0.01rpx;
|
||
text-align: center;
|
||
}
|
||
.duihuan {
|
||
padding: 22rpx 236rpx;
|
||
border-radius: 110rpx;
|
||
background: #e8ad7b;
|
||
line-height: 48rpx;
|
||
margin: 0;
|
||
white-space: nowrap;
|
||
font-size: 32rpx;
|
||
color: #ffffff;
|
||
font-weight: 700;
|
||
}
|
||
.desc {
|
||
width: 662rpx;
|
||
color: #666666;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
letter-spacing: 0.01rpx;
|
||
padding: 0 44rpx;
|
||
margin-top: 160rpx;
|
||
}
|
||
</style> |