增加订单详情页面
This commit is contained in:
311
groupBuying/detail/index.vue
Normal file
311
groupBuying/detail/index.vue
Normal file
@@ -0,0 +1,311 @@
|
|||||||
|
<template>
|
||||||
|
<view class="min-page bg-f7 u-font-28">
|
||||||
|
<view class="top" :style="topStyle">
|
||||||
|
<up-navbar bg-color="transparent" :fixed="false" :placeholder="false" title="订单详情" left-icon-color="#fff"
|
||||||
|
title-color="#fff"></up-navbar>
|
||||||
|
<view class="u-flex info u-col-center">
|
||||||
|
<image :src="imgs.map" class="map"></image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
reactive
|
||||||
|
} from 'vue';
|
||||||
|
|
||||||
|
const imgs = {
|
||||||
|
bg: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/d21f2dfd7bec44618f2d5e4b88372b08.png',
|
||||||
|
bg1: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/604c3f917daa41af9239145196c6d3f3.png',
|
||||||
|
map: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/0a293f6e1a6a4e7b956379a5b6701104.png',
|
||||||
|
pin: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/a9a4f8f59a6d4a46abf91141df3531fb.png'
|
||||||
|
}
|
||||||
|
|
||||||
|
const steps = ['发起拼团', '邀请好友', '成团优惠']
|
||||||
|
|
||||||
|
const topStyle = {
|
||||||
|
backgroundImage: 'url(' + imgs.bg + ')'
|
||||||
|
}
|
||||||
|
const tabs = reactive({
|
||||||
|
list: ['正在进行中', '我的拼团'],
|
||||||
|
sel: 1
|
||||||
|
})
|
||||||
|
const orders = reactive({
|
||||||
|
list: [{
|
||||||
|
name: '全部',
|
||||||
|
value: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '待成团',
|
||||||
|
value: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '待核销',
|
||||||
|
value: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '已核销',
|
||||||
|
value: ''
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '退款',
|
||||||
|
value: ''
|
||||||
|
},
|
||||||
|
],
|
||||||
|
sel: 0
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.top {
|
||||||
|
height: 422rpx;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
.info {
|
||||||
|
padding: 32rpx 30rpx 0 30rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map {
|
||||||
|
width: 48rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.steps {
|
||||||
|
display: flex;
|
||||||
|
padding: 20rpx 20rpx;
|
||||||
|
gap: 20rpx;
|
||||||
|
border-radius: 14rpx 14rpx 0 0;
|
||||||
|
background: linear-gradient(90deg, #FFF5E6 0%, #FFD2CA 100%);
|
||||||
|
|
||||||
|
.step {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index {
|
||||||
|
border-radius: 60rpx;
|
||||||
|
color: #fff;
|
||||||
|
width: 44rpx;
|
||||||
|
height: 44rpx;
|
||||||
|
line-height: 44rpx;
|
||||||
|
text-align: center;
|
||||||
|
background: #E55626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
color: #5A352F;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
margin-right: 22rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
color: rgba(90, 53, 47, 0.42);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon1 {
|
||||||
|
color: #5A352F;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lists {
|
||||||
|
padding: 18rpx 10rpx;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
padding: 32rpx 16rpx;
|
||||||
|
border-radius: 32rpx;
|
||||||
|
background: #FFF;
|
||||||
|
margin-bottom: 14rpx;
|
||||||
|
|
||||||
|
.numbers {
|
||||||
|
background: #4C2828;
|
||||||
|
padding: 8rpx 18rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #FAEAC6;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
max-width: 334rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.members {
|
||||||
|
margin-top: 26rpx;
|
||||||
|
background: #FDF1CB;
|
||||||
|
padding: 4rpx 18rpx;
|
||||||
|
border-radius: 10rpx 10rpx 10rpx 0;
|
||||||
|
width: fit-content;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #ED5A2E;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
background-image: url(https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/604c3f917daa41af9239145196c6d3f3.png);
|
||||||
|
width: 410rpx;
|
||||||
|
height: 102rpx;
|
||||||
|
background-size: cover;
|
||||||
|
transform: translateY(-10rpx);
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.left {
|
||||||
|
width: 306rpx;
|
||||||
|
color: #fff;
|
||||||
|
padding: 16rpx 22rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
padding-left: 16rpx;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
|
||||||
|
.pin {
|
||||||
|
width: 76rpx;
|
||||||
|
height: 54rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.filters {
|
||||||
|
padding: 16rpx 28rpx;
|
||||||
|
border-radius: 6rpx 6rpx 16rpx 16rpx;
|
||||||
|
background: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
padding: 32rpx 88rpx;
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
transition: all .3s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
color: #ED5A2E;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.translateY20 {
|
||||||
|
transform: translateY(-20rpx);
|
||||||
|
}
|
||||||
|
|
||||||
|
.orderStatus {
|
||||||
|
padding: 26rpx 28rpx;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.orderState {
|
||||||
|
color: #999;
|
||||||
|
transition: all .3s linear;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
color: #000;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.orders {
|
||||||
|
padding: 0 26rpx 36rpx;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
padding: 32rpx 24rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
background: #FFF;
|
||||||
|
margin-bottom: 32rpx;
|
||||||
|
|
||||||
|
.numbers {
|
||||||
|
background-color: #ED5A2E;
|
||||||
|
padding: 16rpx 30rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
padding: 8rpx 18rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
border: 2rpx solid transparent;
|
||||||
|
|
||||||
|
&.success {
|
||||||
|
border-color: rgba(123, 209, 54, 1);
|
||||||
|
color: rgba(123, 209, 54, 1);
|
||||||
|
background: rgba(123, 209, 54, 0.12);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.error {
|
||||||
|
border-color: #FF1C1C;
|
||||||
|
color: #FF1C1C;
|
||||||
|
background: rgba(255, 28, 28, 0.18);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
color: #ED5A2E;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 36rpx;
|
||||||
|
font-size: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
padding: 16rpx 34rpx;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
background: #F8F8F8;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
min-width: 208rpx;
|
||||||
|
padding-right: 8rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stitle {
|
||||||
|
color: #666;
|
||||||
|
|
||||||
|
&.price {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #ed5a2e;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.btns {
|
||||||
|
margin-top: 28rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 34rpx;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 8rpx 14rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
border: 2rpx solid #D9D9D9;
|
||||||
|
background: #FFF;
|
||||||
|
|
||||||
|
&.black {
|
||||||
|
border-color: #343030;
|
||||||
|
background-color: #343030;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -369,6 +369,13 @@
|
|||||||
"navigationBarTitleText": "拼团特惠",
|
"navigationBarTitleText": "拼团特惠",
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "detail/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "订单详情",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -166,7 +166,7 @@
|
|||||||
uni.hideLoading()
|
uni.hideLoading()
|
||||||
if (openId) {
|
if (openId) {
|
||||||
pointGoodsApi.exchange({
|
pointGoodsApi.exchange({
|
||||||
pointsGoodsId: item.id,
|
paramId: item.id,
|
||||||
shopId: item.shopId,
|
shopId: item.shopId,
|
||||||
number: 1,
|
number: 1,
|
||||||
price: item.extraPrice,
|
price: item.extraPrice,
|
||||||
|
|||||||
Reference in New Issue
Block a user