积分商城相关页面添加
This commit is contained in:
30
pages.json
30
pages.json
@@ -302,9 +302,35 @@
|
||||
"root": "scoreShop",
|
||||
"pages": [
|
||||
{
|
||||
"path": "index",
|
||||
"path": "index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "积分商城"
|
||||
"navigationBarTitleText": "积分商城",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "detail/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "success/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "兑换成功",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "order/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "积分订单"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "order/detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单详情"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
87
scoreShop/components/modal.vue
Normal file
87
scoreShop/components/modal.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<view>
|
||||
<up-popup :show="show" mode="center" :safeAreaInsetBottom="mode==='bottom'?true:false">
|
||||
<view class="popup-content">
|
||||
<view class="top u-flex u-row-between">
|
||||
<text class="font-bold u-font-32 color-333">{{ title }}</text>
|
||||
<up-icon size="18" name="close" @click="show = false"></up-icon>
|
||||
</view>
|
||||
<up-line></up-line>
|
||||
<scroll-view style="max-height: 50vh" :scroll-y="true">
|
||||
<slot></slot>
|
||||
</scroll-view>
|
||||
<up-line></up-line>
|
||||
|
||||
<view class="bottom">
|
||||
<view class="btn cancel" @click="close">{{ cancelText }}</view>
|
||||
<view class="btn success" @click="confirm">{{ confirmText }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
mode: {
|
||||
type: String,
|
||||
default: "center",
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: "标题",
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: "确认",
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: "取消",
|
||||
},
|
||||
});
|
||||
const show = defineModel({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
});
|
||||
const emits = defineEmits(["close", "confirm"]);
|
||||
function close() {
|
||||
show.value = false;
|
||||
emits("close");
|
||||
}
|
||||
function confirm() {
|
||||
emits("confirm");
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.popup-content {
|
||||
background: #fff;
|
||||
width: 640rpx;
|
||||
border-radius: 18rpx;
|
||||
}
|
||||
.top {
|
||||
padding: 40rpx 48rpx;
|
||||
}
|
||||
.bottom {
|
||||
padding: 48rpx 52rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 50rpx;
|
||||
.btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 18rpx 60rpx;
|
||||
border-radius: 100rpx;
|
||||
font-size: 32rpx;
|
||||
border: 2rpx solid transparent;
|
||||
&.success {
|
||||
background-color: $my-main-color;
|
||||
color: #fff;
|
||||
}
|
||||
&.cancel {
|
||||
border-color: $my-main-color;
|
||||
color: $my-main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
267
scoreShop/detail/index.vue
Normal file
267
scoreShop/detail/index.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<view class="color-333 u-font-28">
|
||||
<view class="top" :style="{ backgroundImage: 'url(' + imgs.bg + ')' }">
|
||||
<view class="name"> 这里是优惠券名称啊啊啊啊 </view>
|
||||
<view class="info"> 15元代金券（满200可用） </view>
|
||||
</view>
|
||||
<view class="sku">
|
||||
<view>
|
||||
<view>
|
||||
<text class="price">800</text>
|
||||
<text class="text">积分</text>
|
||||
<text class="price">+</text>
|
||||
<text class="price">9.99</text>
|
||||
<text class="text">元</text>
|
||||
</view>
|
||||
<view class="u-m-t-16 text"> 限购2份 </view>
|
||||
</view>
|
||||
<text class="text">剩余：99999</text>
|
||||
</view>
|
||||
<view class="goods-name">这里是商品名称啊啊啊啊啊</view>
|
||||
<view class="bg-f7" style="height: 24rpx"></view>
|
||||
<view class="desc">
|
||||
<view class="u-flex">
|
||||
<view class="color-666 no-wrap">领取方式</view>
|
||||
<view class="u-m-l-16">系统发放</view>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-16 u-col-baseline">
|
||||
<view class="color-666 no-wrap">特别说明</view>
|
||||
<view class="u-m-l-16"
|
||||
>优惠券为虚拟发放，一旦兑换不支持退款，请悉知</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bg-f7" style="height: 24rpx"></view>
|
||||
|
||||
<view class="goods-detail">
|
||||
<view class="u-flex u-row-center">
|
||||
<view class="title">商品详情</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="height: 72px"></view>
|
||||
<view class="fixed-bottom u-flex u-row-center">
|
||||
<view class="btn" @click="exchangeClick">立即兑换</view>
|
||||
</view>
|
||||
|
||||
<!-- 兑换确认弹窗start -->
|
||||
<modal
|
||||
v-model="modalData.show"
|
||||
title="立即兑换确认"
|
||||
@confirm="confirmExchange"
|
||||
>
|
||||
<view style="padding: 32rpx 50rpx">
|
||||
<view class="u-font-32"
|
||||
>您将消耗{800}积分，兑换商品{这里是商品名称}，是否确认兑换</view
|
||||
>
|
||||
<view class="u-m-t-20 waring u-flex u-font-32 u-col-center">
|
||||
<up-icon name="info-circle" size="16" color="#FF9900"></up-icon>
|
||||
<view class="u-m-l-24"
|
||||
>优惠券为虚拟发放，一旦兑换不支持退款，请悉知</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</modal>
|
||||
|
||||
<!-- 需要支付的弹窗 -->
|
||||
<up-popup
|
||||
:show="popupData.show"
|
||||
mode="bottom"
|
||||
closeOnClickOverlay
|
||||
@close="popupData.show = false"
|
||||
>
|
||||
<view class="popup-content">
|
||||
<view class="popup-content-top">
|
||||
<text class="color-666">领取方式</text>
|
||||
<text class="u-m-l-16">需前往店铺自行兑换领取</text>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="u-flex">
|
||||
<image class="cover"></image>
|
||||
<view class="u-flex u-flex-1 u-row-between u-p-l-16 u-col-center">
|
||||
<view>
|
||||
<view class="u-font-32 font-bold">这里是商品名称</view>
|
||||
<view class="u-m-t-54 color-666">8000积分+9.99元</view>
|
||||
</view>
|
||||
<text class="color-666">X1</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-20 waring u-flex u-col-center">
|
||||
<up-icon name="info-circle" size="16" color="#FF9900"></up-icon>
|
||||
<view class="u-m-l-16"
|
||||
>优惠券为虚拟发放，一旦兑换不支持退款，请悉知</view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom font-bold text-right">
|
||||
<text>合计 8000积分 + ¥9.99</text>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-42 u-flex u-row-center">
|
||||
<view class="btn">确认兑换</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
<!-- 兑换确认弹窗end -->
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import modal from "@/scoreShop/components/modal.vue";
|
||||
const imgs = {
|
||||
bg: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/9fd6a3ad2b384f6cb4e88ed6b77bd334.png",
|
||||
};
|
||||
const modalData = reactive({
|
||||
show: false,
|
||||
});
|
||||
|
||||
const popupData = reactive({
|
||||
show: false,
|
||||
});
|
||||
function exchangeClick() {
|
||||
modalData.show = true;
|
||||
}
|
||||
function confirmExchange() {
|
||||
modalData.show = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.top {
|
||||
margin: 14rpx 18rpx;
|
||||
background-size: cover;
|
||||
height: 350rpx;
|
||||
box-sizing: border-box;
|
||||
padding-left: 70rpx;
|
||||
padding-top: 95rpx;
|
||||
|
||||
.name {
|
||||
color: #000000;
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.info {
|
||||
color: #333333;
|
||||
font-size: 48rpx;
|
||||
font-weight: 700;
|
||||
margin-top: 62rpx;
|
||||
}
|
||||
}
|
||||
.sku {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 36rpx;
|
||||
align-items: center;
|
||||
background: linear-gradient(90deg, #ff4a63 0%, #fd1f48 100%);
|
||||
.price {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.text {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
.goods-name {
|
||||
padding: 20rpx 28rpx;
|
||||
background: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
.desc {
|
||||
padding: 32rpx 28rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
.goods-detail {
|
||||
padding: 32rpx;
|
||||
.title {
|
||||
position: relative;
|
||||
padding: 0 22rpx;
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
width: 70rpx;
|
||||
height: 2rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(90deg, #f7f8f9 0%, #c9cbcc 100%);
|
||||
}
|
||||
&::after {
|
||||
left: 100%;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: block;
|
||||
width: 70rpx;
|
||||
height: 2rpx;
|
||||
background: linear-gradient(90deg, #c9cbcc 0%, #f7f8f9 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-bottom {
|
||||
position: fixed;
|
||||
background-color: #fff;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 2rpx);
|
||||
background-color: #fff;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
.btn {
|
||||
padding: 16rpx 62rpx;
|
||||
border-radius: 16rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
color: #9c571f;
|
||||
background: linear-gradient(180deg, #f7cc84 0%, #f9dda9 100%);
|
||||
&.gray {
|
||||
background: #9999992b;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.waring {
|
||||
background-color: rgba(255, 204, 0, 0.09);
|
||||
padding: 32rpx 24rpx;
|
||||
color: #ff8d28;
|
||||
}
|
||||
.popup-content {
|
||||
font-size: 28rpx;
|
||||
min-height: 300px;
|
||||
.popup-content-top {
|
||||
padding: 32rpx 28rpx;
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
.goods-info {
|
||||
padding: 44rpx 28rpx;
|
||||
border-bottom: 1px solid #ededed;
|
||||
.cover {
|
||||
width: 184rpx;
|
||||
height: 184rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #d9d9d9;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
padding: 20rpx 28rpx 20rpx 20rpx;
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
padding: 22rpx 214rpx;
|
||||
align-items: flex-start;
|
||||
gap: 20rpx;
|
||||
border-radius: 66rpx;
|
||||
background: #e8ad7b;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
font-size: 700;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="header">
|
||||
<view class="title">{{ a }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
const arr=ref([1,2,3])
|
||||
|
||||
reactive({
|
||||
a:1
|
||||
})
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.container {
|
||||
flex-direction: column;
|
||||
}
|
||||
.header {
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
155
scoreShop/index/components/goods-list.vue
Normal file
155
scoreShop/index/components/goods-list.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<view class="goodslist" :class="[layout]">
|
||||
<view v-for="(item, index) in 10" :key="index" @click="toDetail(item)">
|
||||
<template v-if="layout === 'list'">
|
||||
<view class="item">
|
||||
<image class="img" lazy-load></image>
|
||||
<view class="info">
|
||||
<view>
|
||||
<view class="name u-line-1">这里是商品名称</view>
|
||||
<view class="price">8000积分</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-center u-col-center u-flex-col">
|
||||
<view class="btn">兑换</view>
|
||||
<view class="limit">限购2份</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="layout === 'block'">
|
||||
<view class="item">
|
||||
<image class="img" lazy-load></image>
|
||||
<view class="info">
|
||||
<view class="name u-line-1">这里是商品名称</view>
|
||||
<view class="price">8000积分</view>
|
||||
<view class="u-flex u-col-center u-m-t-16 u-row-between">
|
||||
<view class="limit">限购2份</view>
|
||||
<view class="btn">兑换</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Object,
|
||||
default: () => [],
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
default: "block",
|
||||
},
|
||||
});
|
||||
|
||||
function toDetail(item) {
|
||||
uni.navigateTo({
|
||||
url: '/scoreShop/detail/index?id=' + item.id,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.goodslist {
|
||||
padding: 28rpx;
|
||||
&.list {
|
||||
.item {
|
||||
background-color: #fff;
|
||||
padding: 32rpx 24rpx;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
margin-bottom: 18rpx;
|
||||
.img {
|
||||
width: 112rpx;
|
||||
height: 112rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #d9d9d9;
|
||||
}
|
||||
.info {
|
||||
flex: 1;
|
||||
padding-left: 16rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
}
|
||||
.price {
|
||||
font-size: 28rpx;
|
||||
margin-top: 14rpx;
|
||||
color: #666;
|
||||
}
|
||||
.btn {
|
||||
padding: 14rpx 48rpx;
|
||||
border-radius: 16rpx;
|
||||
background: linear-gradient(180deg, #f7cc84 0%, #f9dda9 100%);
|
||||
color: #9c571f;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
&.end {
|
||||
color: #999999;
|
||||
background-color: rgba(153, 153, 153, 0.3);
|
||||
}
|
||||
}
|
||||
.limit {
|
||||
color: #666;
|
||||
font-size: 24rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.block {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
row-gap: 30rpx;
|
||||
column-gap: 52rpx;
|
||||
.item {
|
||||
padding: 32rpx 28rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: #fff;
|
||||
.img {
|
||||
width: 266rpx;
|
||||
height: 266rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #d9d9d9;
|
||||
}
|
||||
.info {
|
||||
margin-top: 28rpx;
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 700;
|
||||
}
|
||||
.price {
|
||||
font-size: 28rpx;
|
||||
margin-top: 16rpx;
|
||||
font-weight: 700;
|
||||
color: #9C571F;
|
||||
}
|
||||
.btn {
|
||||
padding: 14rpx 48rpx;
|
||||
border-radius: 16rpx;
|
||||
background: linear-gradient(180deg, #f7cc84 0%, #f9dda9 100%);
|
||||
color: #9c571f;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
&.end {
|
||||
color: #999999;
|
||||
background-color: rgba(153, 153, 153, 0.3);
|
||||
}
|
||||
}
|
||||
.limit {
|
||||
color: #666;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
157
scoreShop/index/index.vue
Normal file
157
scoreShop/index/index.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<view class="min-page bg-f7">
|
||||
<up-navbar
|
||||
title="积分商城"
|
||||
bgColor="transparent"
|
||||
leftIconColor="#333"
|
||||
titleStyle="color:#333"
|
||||
></up-navbar>
|
||||
<view :style="{ backgroundImage: 'url(' + imgs.bg + ')' }" class="bg">
|
||||
<view class="top">
|
||||
<view>
|
||||
<view class="u-flex">
|
||||
<image :src="imgs.wujiaoxing" class="wujiaoxing"></image>
|
||||
<view class="number u-m-l-20 u-m-r-12">73954</view>
|
||||
<view class="u-flex">
|
||||
<up-icon
|
||||
name="arrow-right"
|
||||
size="18"
|
||||
bold
|
||||
color="#9C571F"
|
||||
></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-10 u-flex color1" style="margin-left: 66rpx">
|
||||
<text>积分订单</text>
|
||||
<text class="u-m-l-44">积分明细</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex">
|
||||
<image :src="imgs.huizhang" class="huizhang"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="tab-box u-flex">
|
||||
<view class="tabs u-flex-1 u-flex">
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="tabActive === 0 ? 'active' : ''"
|
||||
@click="tabActive = 0"
|
||||
>优惠券</view
|
||||
>
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="tabActive === 1 ? 'active' : ''"
|
||||
@click="tabActive = 1"
|
||||
>其他商品</view
|
||||
>
|
||||
</view>
|
||||
<view class="u-flex" @click="toggleLayout">
|
||||
<image :src="imgs.layout" class="layout" />
|
||||
</view>
|
||||
</view>
|
||||
<goodsList :layout="layout"></goodsList>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import goodsList from "./components/goods-list.vue";
|
||||
const imgs = {
|
||||
bg: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/3716211a58d84fda9ee596a1882c0704.png", //背景图
|
||||
huizhang:
|
||||
"https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/5d07600cc494490aa3adacfe51d8845d.png", //徽章
|
||||
wujiaoxing:
|
||||
"https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/d53e8d88462d4d838b12150062644d03.png", //五角星
|
||||
layout:
|
||||
"https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/cba40ceb38a64bbfbe144f2ab0d6197f.png", //布局
|
||||
};
|
||||
const layout = ref("block");
|
||||
|
||||
function toggleLayout() {
|
||||
layout.value = layout.value === "block" ? "list" : "block";
|
||||
}
|
||||
|
||||
const tabActive = ref(0);
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.bg {
|
||||
background-size: cover;
|
||||
min-height: 454rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.top {
|
||||
padding: 138rpx 26rpx 48rpx 42rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
$color: #9c571f;
|
||||
.huizhang {
|
||||
width: 218rpx;
|
||||
height: 212rpx;
|
||||
}
|
||||
.wujiaoxing {
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
}
|
||||
.color1 {
|
||||
color: $color;
|
||||
}
|
||||
.number {
|
||||
color: $color;
|
||||
font-size: 64rpx;
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
.layout {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
.min-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.bottom {
|
||||
width: 750rpx;
|
||||
flex: 1;
|
||||
border-radius: 40rpx 40rpx 0 0;
|
||||
position: relative;
|
||||
transform: translateY(-32rpx);
|
||||
z-index: 1;
|
||||
background: #f7f7f7;
|
||||
|
||||
.tab-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 36rpx 32rpx 14rpx 0;
|
||||
|
||||
.tabs {
|
||||
justify-content: center;
|
||||
gap: 200rpx;
|
||||
.tab-item {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
padding: 16rpx 0;
|
||||
position: relative;
|
||||
&::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
content: "";
|
||||
width: 58rpx;
|
||||
height: 6rpx;
|
||||
background-color: transparent;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
&.active::after {
|
||||
background-color: #ffaa62;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
71
scoreShop/order/components/order-list.vue
Normal file
71
scoreShop/order/components/order-list.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<view class="list">
|
||||
<view v-for="(item, index) in 10" :key="index" class="item">
|
||||
<view class="u-flex u-row-between">
|
||||
<text class="color-999">2025/08/20 02:37:58</text>
|
||||
<text class="status success">待核销</text>
|
||||
</view>
|
||||
<view class="u-m-t-22 u-flex u-col-center">
|
||||
<up-image width="132rpx" height="132rpx" :src="item.img"></up-image>
|
||||
<view class="u-p-l-36">
|
||||
<view>这里是商品名称</view>
|
||||
<view class="u-m-t-28 color-666">800积分</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-28 u-flex u-row-right btns">
|
||||
<view class="btn look">查看券码</view>
|
||||
<view class="btn black">申请退款</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.list {
|
||||
padding: 28rpx;
|
||||
.item {
|
||||
padding: 14rpx 46rpx;
|
||||
border-radius: 24rpx;
|
||||
background: #fff;
|
||||
margin-bottom: 48rpx;
|
||||
.status {
|
||||
padding: 8rpx 18rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid transparent;
|
||||
&.success {
|
||||
background: rgba(123, 209, 54, 0.12);
|
||||
border-color: #7bd136;
|
||||
color: #7bd136;
|
||||
}
|
||||
&.gray {
|
||||
background: #9999991f;
|
||||
border-color: #999;
|
||||
color: #999;
|
||||
}
|
||||
&.error {
|
||||
background: #ff1c1c2e;
|
||||
border-color: #ff1c1c;
|
||||
color: #ff1c1c;
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
gap: 34rpx;
|
||||
.btn {
|
||||
padding: 8rpx 14rpx;
|
||||
border-radius: 10rpx;
|
||||
border: 2rpx solid transparent;
|
||||
&.look {
|
||||
border-color: #ededed;
|
||||
color: #333;
|
||||
}
|
||||
&.black {
|
||||
border-color: #343030;
|
||||
background: #343030;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
89
scoreShop/order/detail.vue
Normal file
89
scoreShop/order/detail.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<view class="min-page bg-f7 color-333 u-font-28">
|
||||
<view class="top">
|
||||
<view class="u-flex u-col-center">
|
||||
<up-image width="208rpx" height="208rpx"></up-image>
|
||||
<view class="u-p-l-28 u-flex-1">
|
||||
<view class="font-bold">这里是商品名称</view>
|
||||
<view class="u-flex u-row-between u-m-t-8">
|
||||
<text class="color1 font-bold">8000积分</text>
|
||||
<text class="status success">已完成</text>
|
||||
</view>
|
||||
<view class="u-m-t-8 font-bold color1"> X1 </view>
|
||||
</view>
|
||||
</view>
|
||||
<template v-if="true">
|
||||
<view class="u-m-t-16">
|
||||
<view class="u-flex u-row-center">
|
||||
<up-qrcode cid="ex1" :size="104" :val="qrcode"></up-qrcode>
|
||||
</view>
|
||||
<view class="u-m-t-22 u-flex u-row-center">
|
||||
<text>{{ qrcode }}</text>
|
||||
<view @click="copyCode">
|
||||
<image
|
||||
src="/scoreShop/static/image/copy.png"
|
||||
class="u-m-l-24 copy"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="u-m-t-16">
|
||||
<text class="color-666">领取方式</text>
|
||||
<text class="u-m-l-20">需前往店铺自行兑换领取</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
const qrcode = ref("251202150055");
|
||||
function copyCode() {
|
||||
uni.setClipboardData({
|
||||
data: qrcode.value,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: "复制成功",
|
||||
icon: "none",
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.min-page {
|
||||
padding: 28rpx;
|
||||
}
|
||||
.top {
|
||||
padding: 32rpx 24rpx;
|
||||
background: #fff;
|
||||
.color1 {
|
||||
color: #9c571f;
|
||||
}
|
||||
.status {
|
||||
padding: 8rpx 18rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid transparent;
|
||||
&.success {
|
||||
background: rgba(123, 209, 54, 0.12);
|
||||
border-color: #7bd136;
|
||||
color: #7bd136;
|
||||
}
|
||||
&.gray {
|
||||
background: #9999991f;
|
||||
border-color: #999;
|
||||
color: #999;
|
||||
}
|
||||
&.error {
|
||||
background: #ff1c1c2e;
|
||||
border-color: #ff1c1c;
|
||||
color: #ff1c1c;
|
||||
}
|
||||
}
|
||||
}
|
||||
.copy {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
}
|
||||
</style>
|
||||
62
scoreShop/order/index.vue
Normal file
62
scoreShop/order/index.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<view class="min-page bg-f7 u-font-28">
|
||||
<up-sticky>
|
||||
<view class="top">
|
||||
<view
|
||||
v-for="(item, index) in tabs.list"
|
||||
:key="index"
|
||||
class="tab-item"
|
||||
:class="{ active: item.value == tabs.sel }"
|
||||
@click="tabs.sel = item.value"
|
||||
>{{ item.name }}</view
|
||||
>
|
||||
</view>
|
||||
</up-sticky>
|
||||
|
||||
<orderList :list="list" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import orderList from "./components/order-list.vue";
|
||||
const tabs = reactive({
|
||||
list: [
|
||||
{
|
||||
name: "全部订单",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
name: "待核销",
|
||||
value: "unevaluated",
|
||||
},
|
||||
{
|
||||
name: "已核销",
|
||||
value: "evaluated",
|
||||
},
|
||||
{
|
||||
name: "售后",
|
||||
value: "after_sale",
|
||||
},
|
||||
],
|
||||
sel: "",
|
||||
});
|
||||
const list = ref([]);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.top {
|
||||
background-color: #fff;
|
||||
padding: 32rpx 28rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.tab-item {
|
||||
color: #999;
|
||||
transition: all 0.3s ease-in-out;
|
||||
&.active {
|
||||
color: #000;
|
||||
font-size: 32rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
scoreShop/static/image/copy.png
Normal file
BIN
scoreShop/static/image/copy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
106
scoreShop/success/index.vue
Normal file
106
scoreShop/success/index.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<view class="min-page bg-f7 u-font-28 color-333">
|
||||
<up-navbar
|
||||
title="兑换成功"
|
||||
bgColor="transparent"
|
||||
leftIconColor="#333"
|
||||
titleStyle="color:#333"
|
||||
></up-navbar>
|
||||
<view class="content">
|
||||
<view class="bg" :style="{ backgroundImage: `url(${imgs.bg})` }">
|
||||
<image :src="imgs.success" class="success"></image>
|
||||
<view class="u-font-40 font-700">兑换成功</view>
|
||||
<view class="u-font-32 font-700">这里是商品名称</view>
|
||||
<view class="u-m-t-14">需前往店铺自行兑换领取</view>
|
||||
</view>
|
||||
<view class="info u-flex u-flex-col">
|
||||
<view class="u-p-22">
|
||||
<text class="color-666">兑换商品：</text>
|
||||
<text>这里是商品名称</text>
|
||||
</view>
|
||||
<view class="u-p-22">
|
||||
<text class="color-666">兑换数量：</text>
|
||||
<text>1份</text>
|
||||
</view>
|
||||
<view class="u-p-22">
|
||||
<text class="color-666">消耗积分：</text>
|
||||
<text>800</text>
|
||||
</view>
|
||||
<view class="u-p-22">
|
||||
<text class="color-666">下单时间：</text>
|
||||
<text>2025-12-3 17:19：32</text>
|
||||
</view>
|
||||
<view class="u-p-22">
|
||||
<text class="color-666">订单号：</text>
|
||||
<text>：DH202511300001</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex bottom u-row-center">
|
||||
<view class="back btn" @click="back">继续兑换</view>
|
||||
<view class="look btn" @click="lookOrder">查看订单</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const imgs = {
|
||||
bg: "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/b625560a5b75418c9e643841f8674a0c.png",
|
||||
success:
|
||||
"https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/c2f0865efb444de58ff0d8bb3a51d300.png",
|
||||
};
|
||||
function back() {
|
||||
uni.navigateBack();
|
||||
}
|
||||
function lookOrder() {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
background: linear-gradient(180deg, #f5cd82 0%, rgba(247, 219, 165, 0) 100%);
|
||||
height: 670rpx;
|
||||
$color: #9c571f;
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 586rpx;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding-bottom: 26rpx;
|
||||
color: $color;
|
||||
|
||||
.success {
|
||||
width: 310rpx;
|
||||
height: 206rpx;
|
||||
}
|
||||
}
|
||||
.info {
|
||||
padding-left: 174rpx;
|
||||
padding-right: 32rpx;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
gap: 48rpx;
|
||||
margin-top: 44rpx;
|
||||
|
||||
.btn {
|
||||
padding: 14rpx 76rpx;
|
||||
border-radius: 100rpx;
|
||||
font-size: 32rpx;
|
||||
border: 1px solid transparent;
|
||||
&.back {
|
||||
border-color: $my-main-color;
|
||||
color: $my-main-color;
|
||||
}
|
||||
&.look {
|
||||
background-color: $my-main-color;
|
||||
border-color: $my-main-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user