Skip to content

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

优惠券

parent b75c85a3
Hide whitespace changes
Inline Side-by-side
Showing with 654 additions and 177 deletions
src/api/order.js 0 → 100644
View file @ 9ba3a94e
import { request } from '../utils/request';
// 订单列表接口
export function getOrderList(data) {
return request({
url: '/sgyrdd/sgyOrder/groupBuy/page',
method: 'GET',
data,
});
}
src/pages.json
View file @ 9ba3a94e
......@@ -60,6 +60,12 @@
"style": {
"navigationBarTitleText": "我的券"
}
},
{
"path": "pages/ticket/detail",
"style": {
"navigationBarTitleText": "优惠券详情"
}
}
],
"globalStyle": {
......
src/pages/order/components/Header/index.vue
View file @ 9ba3a94e
......@@ -31,7 +31,7 @@ const handleBack = () => {
background-color: #ffffff;
position: fixed;
z-index: 999;
width: 100%;
width: 375 * 2rpx;
.headbox {
position: relative;
......
src/pages/order/components/OrderList/index.vue
View file @ 9ba3a94e
......@@ -28,10 +28,39 @@
<view class="btn-error">再来一单</view>
</view>
</view>
<wd-loadmore :state="state" @reload="loadmore" />
</view>
</template>
<script></script>
<script setup>
import { getOrderList } from '@/api/order';
const state = ref('loading');
const page = reactive({
pageNum: 0,
pageSize: 10,
});
const num = ref(0);
const max = ref(60);
onReachBottom(() => {
if (num.value === 45) {
state.value = 'error';
} else if (num.value < max.value) {
getList();
} else if (num.value === max.value) {
state.value = 'finished';
}
});
const getList = async () => {
const res = await getOrderList();
state.value = 'loading';
console.log(res);
};
getList();
</script>
<style lang="scss" scoped>
.content {
......@@ -59,7 +88,8 @@
.left {
display: flex;
align-items: center;
gap: 20rpx;
gap: 6rpx;
font-weight: bold;
image {
height: 38rpx;
......
src/pages/order/detail.vue
View file @ 9ba3a94e
......@@ -206,6 +206,8 @@ page {
}
.container {
width: 375 * 2rpx;
margin: 0 auto;
.content {
padding-top: 44px;
display: flex;
......
src/pages/order/order.vue
View file @ 9ba3a94e
......@@ -26,6 +26,8 @@ page {
background: #f3f3f3;
}
.container {
width: 375 * 2rpx;
margin: 0 auto;
.tabs {
padding-top: 44px;
......
src/pages/order/ticketCode.vue
View file @ 9ba3a94e
......@@ -37,6 +37,8 @@ page {
}
.container {
width: 375 * 2rpx;
margin: 0 auto;
.content {
padding-top: 44px;
display: flex;
......
src/pages/ticket/components/TicketList/index.vue 0 → 100644
View file @ 9ba3a94e
<template>
<!-- 优惠券列表 -->
<view class="ticket-list">
<view class="ticket-item">
<view class="ticket-box">
<view class="normal ticket-left">
<view class="ticket-box">
<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 class="ticket-right">
<view class="head">
<text class="title">超市优惠券</text>
<view class="headbox">
<text class="time">使用时间：2023.02.4-2023.02.10</text>
<view class="btn">使用</view>
</view>
</view>
<view class="foot">
<view class="line"></view>
<view class="footbox" @click="changeShowDetail()">
<text class="desc">详细信息</text>
<wd-icon
:name="showDetail ? 'chevron-down' : 'chevron-right'"
size="15px"
color="#9d9d9d"
></wd-icon>
</view>
</view>
</view>
</view>
<view class="detail" v-if="showDetail">
<view class="line"></view>
<view class="detail-box">
<view class="rowbox">
<text>使用时间</text>
<text class="desc">2023.02.04-2023.04.20</text>
</view>
<view class="rowbox">
<text>使用条件</text>
<text class="desc">满50元可用</text>
</view>
<view class="rowbox">
<text>使用说明</text>
<text class="desc">
活动期间，使用说明内容使用说明内容 使用说明内容使用说明内容使用说明内 容使用说明内容。
</text>
</view>
</view>
</view>
</view>
<view class="ticket-item">
<view class="ticket-box">
<view class="past ticket-left">
<view class="ticket-box">
<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 class="ticket-right">
<image src="@/static/ticket/past-icon.png" class="img"></image>
<view class="head">
<text class="title">超市优惠券</text>
<view class="headbox">
<text class="time">使用时间：2023.02.4-2023.02.10</text>
<!-- <view class="btn">使用</view> -->
</view>
</view>
<view class="foot">
<view class="line"></view>
<view class="footbox">
<text class="desc">详细信息</text>
<wd-icon name="chevron-right" size="15px" color="#9d9d9d"></wd-icon>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
const showDetail = ref(false);
const changeShowDetail = () => {
console.log('showDetail', showDetail.value);
showDetail.value = !showDetail.value;
};
</script>
<style lang="scss" scoped>
.ticket-list {
display: flex;
flex-direction: column;
gap: 36rpx;
.ticket-item {
width: 100%;
background-color: #fff;
border-radius: 16rpx;
display: flex;
flex-direction: column;
.ticket-box {
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: 200rpx;
height: 200rpx;
.ticket-box {
width: 94%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30rpx;
.ticket-price {
display: flex;
align-items: last baseline;
text {
font-size: 24rpx;
line-height: 24rpx;
font-family: PingFang SC;
color: #fff;
}
.num {
font-size: 52rpx;
}
}
.ticket-desc {
display: flex;
flex-direction: column;
align-items: center;
gap: 24rpx;
.desc {
font-size: 24rpx;
line-height: 24rpx;
font-family: PingFang SC;
color: #fff;
}
}
}
}
.ticket-right {
display: flex;
flex-direction: column;
width: 504rpx;
position: relative;
.img {
width: 126rpx;
height: 94rpx;
position: absolute;
right: 28rpx;
top: 26rpx;
}
.head {
display: flex;
flex-direction: column;
padding: 30rpx 22rpx 26rpx 32rpx;
gap: 4rpx;
.title {
font-family: PingFang SC Heavy-Regular;
font-size: 32rpx;
color: #333333;
line-height: 32rpx;
}
.headbox {
display: flex;
justify-content: space-between;
align-items: end;
height: 50rpx;
.time {
font-family: PingFang SC Heavy-Regular;
font-size: 20rpx;
color: #999999;
line-height: 20rpx;
}
.btn {
width: 100rpx;
height: 50rpx;
border-radius: 26rpx;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(90deg, #ff7051 0%, #ff382e 100%);
color: #fff;
font-size: 24rpx;
line-height: 24rpx;
}
}
}
.foot {
display: flex;
flex-direction: column;
padding: 0 22rpx 14rpx 32rpx;
gap: 14rpx;
.line {
border-top: 2rpx solid #f2f2f2;
}
.footbox {
display: flex;
align-items: center;
justify-content: space-between;
.desc {
font-family: PingFang SC Heavy-Regular;
font-size: 20rpx;
color: #999999;
line-height: 20rpx;
}
}
}
}
}
.detail {
display: flex;
flex-direction: column;
padding: 24rpx 0rpx 56rpx 0rpx;
gap: 30rpx;
.line {
border-top: 2rpx solid #e7e7e7;
}
.detail-box {
display: flex;
flex-direction: column;
gap: 40rpx;
padding: 0 40rpx 0 22rpx;
.rowbox {
display: flex;
flex-direction: row;
gap: 48rpx;
text {
font-family: PingFang SC Regular;
font-size: 28rpx;
color: #666666;
line-height: 28rpx;
}
.desc {
width: 476rpx;
}
}
}
}
}
}
</style>
src/pages/ticket/detail.vue 0 → 100644
View file @ 9ba3a94e
<template>
<view class="container">
<Header title="合力超市"></Header>
<view class="content">
<view class="shop">
<image src="@/static/ticket/logo.png" class="logo"></image>
<view class="info">
<view class="top">
<view class="left">
<text class="title">合力超市花果园R1区店</text>
<view class="ratebox">
<wd-rate v-model="value" size="13px" space="1px" active-color="#f12929" />
<text class="rate">4.9</text>
</view>
<view class="ratebox">
<text>营业时间：</text>
<text class="time">6:00-22:00</text>
</view>
</view>
<view class="btn">
<image src="@/static/ticket/shopmail.png"></image>
<text>进店</text>
</view>
</view>
<view class="bottom">
<image class="address" src="@/static/ticket/address.png"></image>
<view class="infobox">
<text class="addr">贵阳市南明区花果园R1区1209</text>
<text>距您400米 步行5分钟</text>
</view>
<view class="iconbox">
<image class="img" src="@/static/ticket/map.png"></image>
<text>导航到店</text>
</view>
<view class="iconbox">
<image class="img" src="@/static/ticket/phone.png"></image>
<text>电话</text>
</view>
</view>
</view>
</view>
<!-- 优惠券列表 -->
<TicketList></TicketList>
</view>
</view>
</template>
<script setup>
import Header from '@/pages/order/components/Header/index.vue';
import TicketList from '@/pages/ticket/components/TicketList/index.vue';
const value = ref(4);
</script>
<style scoped lang="scss">
page {
background: #f3f3f3;
}
.container {
width: 375 * 2rpx;
margin: 0 auto;
.content {
display: flex;
flex-direction: column;
padding: 100rpx 26rpx 26rpx;
gap: 26rpx;
.shop {
display: flex;
gap: 20rpx;
background-color: #fff;
border-radius: 16rpx;
padding: 24rpx 22rpx 30rpx;
.logo {
height: 116rpx;
width: 116rpx;
border-radius: 16rpx;
}
.info {
display: flex;
flex-direction: column;
gap: 34rpx;
.top {
display: flex;
justify-content: space-between;
width: 514rpx;
.left {
display: flex;
flex-direction: column;
gap: 10rpx;
.title {
font-family: PingFang SC Bold;
font-size: 32rpx;
color: #333333;
line-height: 32rpx;
}
.ratebox {
display: flex;
align-items: center;
gap: 8rpx;
text {
font-family: PingFang SC Regular;
font-size: 24rpx;
color: #666;
}
.rate {
font-size: 22rpx;
color: #f12a2a;
}
.time {
color: #333;
}
}
}
.btn {
width: 127rpx;
height: 53rpx;
border-radius: 27rpx;
border: 2rpx solid #f12a2a;
display: flex;
align-items: center;
justify-content: center;
font-family: PingFang SC Regular;
font-size: 24rpx;
color: #f12a2a;
gap: 6rpx;
image {
width: 30rpx;
height: 30rpx;
}
}
}
.bottom {
display: flex;
justify-content: space-around;
.address {
width: 30rpx;
height: 30rpx;
}
.infobox {
display: flex;
flex-direction: column;
gap: 6rpx;
text {
font-family: PingFang SC Regular;
font-size: 22rpx;
color: #999999;
}
.addr {
width: 324rpx;
font-size: 24rpx;
color: #333;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
.iconbox {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8rpx;
font-family: PingFang SC Regular;
font-size: 20rpx;
color: #666666;
.img {
width: 42rpx;
height: 42rpx;
}
}
}
}
}
}
}
</style>
src/pages/ticket/ticket.vue
View file @ 9ba3a94e
<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="container">
<Header title="我的码"></Header>
<view class="tab">
<view
:class="currenStatus == index ? 'status-select' : 'status-item'"
@click="changeStatus(index)"
v-for="(item, index) in statusList"
: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="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 class="status">
<view
:class="currenStatus == index ? 'status-select' : 'status-item'"
@click="changeStatus(index)"
v-for="(item, index) in statusList"
:key="index"
>
{{ item }}
</view>
</view>
<!-- 优惠券列表 -->
<TicketList></TicketList>
</view>
</view>
</template>
<script setup>
import Header from '../order/components/Header/index.vue';
import Header from '@/pages/order/components/Header/index.vue';
import TicketList from '@/pages/ticket/components/TicketList/index.vue';
const tabList = ['有效优惠券', '无效优惠券'];
const currentTab = ref(0);
......@@ -68,173 +58,112 @@ const changeStatus = (index) => {
page {
background: #f3f3f3;
}
.container {
width: 375 * 2rpx;
margin: 0 auto;
// 标签栏
.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 {
// 标签栏
.tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 38rpx;
justify-content: space-around;
height: 88rpx;
background: #fff;
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;
}
position: fixed;
top: 88rpx;
.price {
.tab-item {
font-family: PingFang SC;
font-weight: bold;
font-size: 36rpx;
color: #ffffff;
font-size: 32rpx;
color: #999;
}
}
.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;
.tab-select {
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;
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%);
}
}
}
.ticket-list {
.content {
display: flex;
flex-direction: column;
padding: 202rpx 26rpx 26rpx;
gap: 36rpx;
.ticket-item {
.card {
display: flex;
flex-direction: column;
align-items: center;
gap: 38rpx;
width: 100%;
background-color: #fff;
height: 216rpx;
border-radius: 16rpx;
display: flex;
background: linear-gradient(270deg, #fc7859 0%, #f22424 100%);
.normal {
background: url('../../static/ticket/ticket-normal.png') no-repeat;
background-size: 100% 100%;
.text {
padding-top: 26rpx;
font-family: PingFang SC;
font-size: 24rpx;
color: #ffffff;
}
.past {
background: url('../../static/ticket/ticket-past.png') no-repeat;
background-size: 100% 100%;
.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;
}
.ticket-left {
width: 196rpx;
height: 200rpx;
.status-select {
width: 132rpx;
height: 56rpx;
background-color: #fff;
border-radius: 28rpx;
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;
}
}
font-family: PingFang SC;
font-weight: bold;
font-size: 24rpx;
color: #f12a2a;
}
}
}
......
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