增加兑换中心页面
This commit is contained in:
@@ -74,6 +74,9 @@ page,
|
||||
.font-700{
|
||||
font-weight: 700;
|
||||
}
|
||||
.font-bold{
|
||||
font-weight: 700;
|
||||
}
|
||||
.font-14{
|
||||
font-size: 14px;
|
||||
}
|
||||
@@ -97,4 +100,7 @@ page,
|
||||
}
|
||||
.justify-between{
|
||||
justify-content: space-between;
|
||||
}
|
||||
.justify-center{
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -35,7 +35,10 @@ function qrcodeResult(e) {
|
||||
|
||||
<style scoped>
|
||||
.qrcode-box {
|
||||
position: fixed;
|
||||
transform: translateX(200vw, 200vh);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -231,6 +231,13 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "积分门店"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "exchange/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
101
user/exchange/components/confirm.vue
Normal file
101
user/exchange/components/confirm.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<up-popup
|
||||
:show="show"
|
||||
bgColor="transparent"
|
||||
:safeAreaInsetBottom="false"
|
||||
:closeOnClickOverlay="false"
|
||||
@close="close"
|
||||
mode="center"
|
||||
>
|
||||
<view class="box">
|
||||
<view class="u-flex top justify-between u-p-32">
|
||||
<text class="title">确认信息</text>
|
||||
<up-icon name="close"></up-icon>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="color-333">兑换码包含内容如下:</view>
|
||||
<view class="u-m-t-32 u-flex u-col-center">
|
||||
<view class="color-333 font-bold small-title">店铺</view>
|
||||
<text class="color-666 u-m-l-38">店铺名称</text>
|
||||
</view>
|
||||
<view class="u-m-t-32 u-flex u-col-center">
|
||||
<view class="color-333 font-bold small-title">名称</view>
|
||||
<text class="color-666 u-m-l-38">10张券兑换码</text>
|
||||
</view>
|
||||
<view class="u-m-t-32 u-flex u-col-center">
|
||||
<view class="color-333 font-bold small-title">优惠券</view>
|
||||
<text class="color-666 u-m-l-38">优惠券名称*2、优惠券名称*1</text>
|
||||
</view>
|
||||
<view class="u-m-t-32 u-flex u-col-center" style="gap: 54rpx">
|
||||
<view class="cancel" @click="close">取消</view>
|
||||
<view class="confirm" @click="confirm">确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const show = defineModel({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
});
|
||||
const emits = defineEmits(["cancel", "confirm"]);
|
||||
function close() {
|
||||
show.value = false;
|
||||
emits("cancel");
|
||||
}
|
||||
function confirm() {
|
||||
show.value = false;
|
||||
emits("confirm");
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
width: 586rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
.title {
|
||||
color: #000000;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.top {
|
||||
border-bottom: 2rpx solid #ededed;
|
||||
}
|
||||
.info {
|
||||
padding: 32rpx 40rpx 40rpx 40rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.small-title {
|
||||
min-width: 84rpx;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel {
|
||||
padding: 14rpx 76rpx;
|
||||
border-radius: 36rpx;
|
||||
border: 2rpx solid #e8ad7b;
|
||||
color: #e8ad7b;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
.confirm {
|
||||
padding: 14rpx 76rpx;
|
||||
border-radius: 36rpx;
|
||||
background-color: #e8ad7b;
|
||||
border: 2rpx solid #e8ad7b;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
line-height: 48rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
81
user/exchange/components/result.vue
Normal file
81
user/exchange/components/result.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<up-popup
|
||||
:show="show"
|
||||
bgColor="transparent"
|
||||
:safeAreaInsetBottom="false"
|
||||
:closeOnClickOverlay="false"
|
||||
@close="close"
|
||||
mode="center"
|
||||
>
|
||||
<view class="box">
|
||||
<view class="title">{{ title }}</view>
|
||||
<view class="u-flex justify-center" style="margin-top: 72rpx;">
|
||||
<view class="confirm" @click="confirm">确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const show = defineModel({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
});
|
||||
const props=defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
const emits = defineEmits(["cancel", "confirm"]);
|
||||
function close() {
|
||||
show.value = false;
|
||||
emits("cancel");
|
||||
}
|
||||
function confirm() {
|
||||
show.value = false;
|
||||
emits("confirm");
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.box {
|
||||
width: 586rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
padding: 64rpx 32rpx 32rpx 32rpx;
|
||||
.title {
|
||||
color: #000000;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.cancel {
|
||||
padding: 14rpx 76rpx;
|
||||
border-radius: 36rpx;
|
||||
border: 2rpx solid #e8ad7b;
|
||||
color: #e8ad7b;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
.confirm {
|
||||
padding: 14rpx 76rpx;
|
||||
border-radius: 36rpx;
|
||||
background-color: #e8ad7b;
|
||||
border: 2rpx solid #e8ad7b;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
line-height: 48rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
126
user/exchange/index.vue
Normal file
126
user/exchange/index.vue
Normal file
@@ -0,0 +1,126 @@
|
||||
<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>
|
||||
BIN
user/static/duihuan.png
Normal file
BIN
user/static/duihuan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Reference in New Issue
Block a user