Skip to content

G
groupPurchase-miniapp
Commit e9644b4e authored by 彭佳妮（贵阳日报）'s avatar 彭佳妮（贵阳日报）
Browse files
Options

优惠券

parent d97c9db9
Hide whitespace changes
Inline Side-by-side
Showing with 461 additions and 13 deletions
src/pages.json
View file @ e9644b4e
...@@ -47,6 +47,19 @@ ...@@ -47,6 +47,19 @@
"style": { "style": {
"navigationBarTitleText": "" "navigationBarTitleText": ""
} }
},
{
"path": "pages/order/ticketCode",
"style": {
"navigationBarTitleText": "查看券码"
}
}
,
{
"path": "pages/ticket/ticket",
"style": {
"navigationBarTitleText": "我的券"
}
} }
], ],
"globalStyle": { "globalStyle": {
......
src/pages/order/detail.vue
View file @ e9644b4e
...@@ -120,11 +120,13 @@ ...@@ -120,11 +120,13 @@
<text class="title">温馨提示</text> <text class="title">温馨提示</text>
<view class="tips-box"> <view class="tips-box">
<view class="row"> <view class="row">
<text class="name">使用时间：</text> <text class="name">使用时间</text>
<text class="colon">：</text>
<text class="text">11:30-23:59</text> <text class="text">11:30-23:59</text>
</view> </view>
<view class="row"> <view class="row">
<text class="name">使用规则：</text> <text class="name">使用规则</text>
<text class="colon">：</text>
<text class="textarea"> <text class="textarea">
不可以使用包间\n本单发票由商家提供，详情请咨询商家仅限 堂食 不可以使用包间\n本单发票由商家提供，详情请咨询商家仅限 堂食
</text> </text>
...@@ -139,38 +141,46 @@ ...@@ -139,38 +141,46 @@
<text class="title">实付金额：￥89</text> <text class="title">实付金额：￥89</text>
<view class="tips-box"> <view class="tips-box">
<view class="row"> <view class="row">
<text class="name">订单号：</text> <text class="name">订单号</text>
<text class="colon">：</text>
<view class="copybox"> <view class="copybox">
<text class="text">491758727559582056</text> <text class="text">491758727559582056</text>
<view class="copy">复制</view> <view class="copy">复制</view>
</view> </view>
</view> </view>
<view class="row"> <view class="row">
<text class="name">手机号：</text> <text class="name">手机号</text>
<text class="colon">：</text>
<text class="text">187****8562</text> <text class="text">187****8562</text>
</view> </view>
<view class="row"> <view class="row">
<text class="name">付款时间：</text> <text class="name">付款时间</text>
<text class="colon">：</text>
<text class="text">2023-06-27 15:53:05</text> <text class="text">2023-06-27 15:53:05</text>
</view> </view>
<view class="row"> <view class="row">
<text class="name">下单时间：</text> <text class="name">下单时间</text>
<text class="colon">：</text>
<text class="text">2023-06-27 15:53:05</text> <text class="text">2023-06-27 15:53:05</text>
</view> </view>
<view class="row"> <view class="row">
<text class="name">数量：</text> <text class="name">数量</text>
<text class="colon">：</text>
<text class="text">1</text> <text class="text">1</text>
</view> </view>
<view class="row"> <view class="row">
<text class="name">总价：</text> <text class="name">总价</text>
<text class="colon">：</text>
<text class="text">￥120</text> <text class="text">￥120</text>
</view> </view>
<view class="row"> <view class="row">
<text class="name">优惠明细：</text> <text class="name">优惠明细</text>
<text class="colon">：</text>
<text class="text">-￥31</text> <text class="text">-￥31</text>
</view> </view>
<view class="row"> <view class="row">
<text class="name">实付：</text> <text class="name">实付</text>
<text class="colon">：</text>
<text class="text">￥89</text> <text class="text">￥89</text>
</view> </view>
</view> </view>
...@@ -320,7 +330,7 @@ page { ...@@ -320,7 +330,7 @@ page {
// 二维码 // 二维码
.qrcode { .qrcode {
padding: 20rpx; padding: 30rpx 20rpx 20rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 36rpx; gap: 36rpx;
...@@ -527,7 +537,7 @@ page { ...@@ -527,7 +537,7 @@ page {
.tips { .tips {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24rpx; gap: 28rpx;
.title { .title {
color: #333; color: #333;
...@@ -549,7 +559,7 @@ page { ...@@ -549,7 +559,7 @@ page {
gap: 8rpx; gap: 8rpx;
.name { .name {
width: 140rpx; width: 120rpx;
font-family: PingFang SC Regular; font-family: PingFang SC Regular;
font-size: 28rpx; font-size: 28rpx;
font-weight: normal; font-weight: normal;
...@@ -559,6 +569,14 @@ page { ...@@ -559,6 +569,14 @@ page {
text-align-last: justify; text-align-last: justify;
} }
.colon {
font-family: PingFang SC Regular;
font-size: 28rpx;
font-weight: normal;
line-height: 28rpx;
color: #999999;
}
.text { .text {
font-family: PingFang SC Regular; font-family: PingFang SC Regular;
font-size: 28rpx; font-size: 28rpx;
...@@ -608,8 +626,21 @@ page { ...@@ -608,8 +626,21 @@ page {
height: 188rpx; height: 188rpx;
width: 100%; width: 100%;
z-index: 10; z-index: 10;
display: flex;
justify-content: flex-end;
padding: 20rpx 38rpx 0;
box-sizing: border-box;
.btn { .btn {
width: 188rpx;
height: 76rpx;
background: linear-gradient(90deg, #f73f3f 0%, #ec1a1a 100%);
border-radius: 40rpx;
color: #fff;
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: center;
} }
} }
} }
......
src/pages/order/ticketCode.vue 0 → 100644
View file @ e9644b4e
<template>
<view class="container">
<Header title="查看券码"></Header>
<view class="content">
<!-- 使用状态 -->
<view class="status">
<view class="status-text">老凯里酸汤鱼双人餐</view>
<view class="detail">有效期：2023-07-04 23:59</view>
</view>
<!-- 券码信息 -->
<view class="info">
<view class="box">
<text class="title">酸汤鱼双人套餐</text>
<text class="code">0115 8156 9126</text>
</view>
<view class="rectangle-with-semicircles"></view>
<view class="qrcode line">
<!-- 二维码 -->
<view class="qr-box">
<image src="@/static/order/QR-code.png" class="qr"></image>
<text class="qr-text">请向商家出示此核销码</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import Header from './components/Header/index.vue';
</script>
<style scoped lang="scss">
page {
background: #f3f3f3;
}
.container {
.content {
padding-top: 44px;
display: flex;
flex-direction: column;
gap: 20rpx;
}
.status {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32rpx 20rpx;
gap: 10rpx;
.status-text {
font-size: 42rpx;
font-weight: bold;
color: #333;
font-family: PingFang SC;
}
.detail {
font-size: 24rpx;
color: #333;
font-family: PingFang SC;
}
}
.info {
background-color: #fff;
border-radius: 16rpx;
margin: 0 20rpx;
.box {
padding: 20rpx 20rpx 0;
display: flex;
flex-direction: column;
gap: 10rpx;
.title {
font-family: PingFang SC Bold;
font-size: 32rpx;
font-weight: bold;
line-height: 56rpx;
color: #333;
}
.code {
font-family: PingFang SC Heavy;
font-size: 40rpx;
font-weight: blod;
line-height: 56rpx;
color: #333;
}
}
}
.line {
border-top: 1px dashed #999;
}
.rectangle-with-semicircles {
width: 100%;
position: relative;
z-index: 10;
height: 20rpx;
}
.rectangle-with-semicircles::after {
position: absolute;
content: '';
height: 32rpx;
width: 32rpx;
border-radius: 50%;
background-color: #f5f5f5;
left: 0;
top: 50%;
transform: translate(-50%);
}
.rectangle-with-semicircles::before {
position: absolute;
content: '';
height: 32rpx;
width: 32rpx;
border-radius: 50%;
background-color: #f5f5f5;
right: 0;
top: 50%;
transform: translate(50%);
}
// 二维码
.qrcode {
padding: 30rpx 20rpx 20rpx;
display: flex;
flex-direction: column;
gap: 36rpx;
.qr-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4rpx;
.qr {
width: 320rpx;
height: 320rpx;
}
.qr-text {
font-family: PingFang SC Heavy;
font-size: 28rpx;
font-weight: blod;
line-height: 56rpx;
color: #333;
}
}
}
}
</style>
src/pages/ticket/ticket.vue 0 → 100644
View file @ e9644b4e
<template>
<Header title="我的码"></Header>
<view class="tab">
<view
:class="currentTab == index ? 'tab-select' : 'tab-item'"
@click="changeTab(index)"
v-for="(item, index) in tabList"
:key="index"
>
{{ item }}
</view>
</view>
<view class="content">
<view class="card">
<text class="text">已领取优惠金额（元）</text>
<text class="price">0.00</text>
</view>
<!-- 优惠券状态 -->
<view class="status">
<view
:class="currenStatus == index ? 'status-select' : 'status-item'"
@click="changeStatus(index)"
v-for="(item, index) in statusList"
:key="index"
>
{{ item }}
</view>
</view>
<!-- 优惠券列表 -->
<view class="ticket-list">
<view class="ticket-item">
<view class="normal ticket-left">
<view class="ticket-price">
<text class="price">￥</text>
<text class="num">20</text>
</view>
<view class="ticket-desc">
<text class="desc">满50元可用</text>
<text class="desc">数量：10</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import Header from '../order/components/Header/index.vue';
const tabList = ['有效优惠券', '无效优惠券'];
const currentTab = ref(0);
const changeTab = (index) => {
currentTab.value = index;
};
const statusList = ['全部', '附近可用', '已使用', '未使用'];
const currenStatus = ref(0);
const changeStatus = (index) => {
currenStatus.value = index;
};
</script>
<style scoped lang="scss">
page {
background: #f3f3f3;
}
// 标签栏
.tab {
display: flex;
align-items: center;
justify-content: space-around;
height: 88rpx;
background: #fff;
width: 100%;
position: fixed;
top: 88rpx;
.tab-item {
font-family: PingFang SC;
font-weight: bold;
font-size: 32rpx;
color: #999;
}
.tab-select {
font-family: PingFang SC;
font-weight: bold;
font-size: 32rpx;
color: #333;
position: relative;
&::after {
content: '';
width: 36rpx;
height: 16rpx;
background: url('../../static/ticket/tab.png') no-repeat;
background-size: 100% 100%;
position: absolute;
bottom: -16rpx;
left: 50%;
transform: translate(-50%);
}
}
}
.content {
display: flex;
flex-direction: column;
padding: 202rpx 26rpx 26rpx;
gap: 36rpx;
.card {
display: flex;
flex-direction: column;
align-items: center;
gap: 38rpx;
width: 100%;
height: 216rpx;
border-radius: 16rpx;
background: linear-gradient(270deg, #fc7859 0%, #f22424 100%);
.text {
padding-top: 26rpx;
font-family: PingFang SC;
font-size: 24rpx;
color: #ffffff;
}
.price {
font-family: PingFang SC;
font-weight: bold;
font-size: 36rpx;
color: #ffffff;
}
}
.status {
display: flex;
flex-direction: row;
align-items: center;
gap: 18rpx;
.status-item {
width: 132rpx;
height: 56rpx;
background-color: #fff;
border-radius: 28rpx;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC;
font-weight: bold;
font-size: 24rpx;
color: #666;
}
.status-select {
width: 132rpx;
height: 56rpx;
background-color: #fff;
border-radius: 28rpx;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC;
font-weight: bold;
font-size: 24rpx;
color: #f12a2a;
}
}
.ticket-list {
display: flex;
flex-direction: column;
gap: 36rpx;
.ticket-item {
width: 100%;
background-color: #fff;
border-radius: 16rpx;
display: flex;
.normal {
background: url('../../static/ticket/ticket-normal.png') no-repeat;
background-size: 100% 100%;
}
.past {
background: url('../../static/ticket/ticket-past.png') no-repeat;
background-size: 100% 100%;
}
.ticket-left {
width: 196rpx;
height: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30rpx;
.ticket-price {
display: flex;
align-items: last baseline;
.price {
font-size: 24rpx;
line-height: 24rpx;
font-family: PingFang SC;
color: #fff;
}
.num {
font-size: 52rpx;
line-height: 24rpx;
font-family: PingFang SC;
color: #fff;
}
}
.ticket-desc {
display: flex;
flex-direction: column;
gap: 24rpx;
.desc {
font-size: 24rpx;
line-height: 24rpx;
font-family: PingFang SC;
color: #fff;
}
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment