增加订单详情页面
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": "拼团特惠",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "detail/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单详情",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
@@ -166,7 +166,7 @@
|
||||
uni.hideLoading()
|
||||
if (openId) {
|
||||
pointGoodsApi.exchange({
|
||||
pointsGoodsId: item.id,
|
||||
paramId: item.id,
|
||||
shopId: item.shopId,
|
||||
number: 1,
|
||||
price: item.extraPrice,
|
||||
|
||||
Reference in New Issue
Block a user