feat(訂單)

This commit is contained in:
Ankkaya 2024-05-27 18:30:44 +08:00
parent 78d6d7df1f
commit dd8edc28fc
9 changed files with 2088 additions and 3 deletions

View File

@ -8,6 +8,15 @@
},
"pages": [
//pageshttps://uniapp.dcloud.io/collocation/pages
{
"path": "pages/order/list",
"style": {
"navigationBarTitleText": "订单"
},
"meta": {
"auth": true
}
},
{
"path": "pages/index/my",
"style": {
@ -63,7 +72,7 @@
"pagePath": "pages/index/product"
},
{
"pagePath": "pages/index/icons"
"pagePath": "pages/order/list"
},
{
"pagePath": "pages/index/my"

616
pages/order/detail.vue Normal file
View File

@ -0,0 +1,616 @@
<!-- 订单详情 -->
<template>
<s-layout title="订单详情" class="index-wrap" navbar="inner">
<!-- 订单状态 -->
<view
class="state-box ss-flex-col ss-col-center ss-row-right"
:style="[
{
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
paddingTop: Number(statusBarHeight + 88) + 'rpx',
},
]"
>
<view class="ss-flex ss-m-t-32 ss-m-b-20">
<image
v-if="
state.orderInfo.status_code == 'unpaid' ||
state.orderInfo.status === 10 || //
state.orderInfo.status_code == 'nocomment'
"
class="state-img"
:src="sheep.$url.static('/static/img/shop/order/order_loading.png')"
>
</image>
<image
v-if="state.orderInfo.status_code == 'completed' || state.orderInfo.status_code == 'refund_agree'"
class="state-img"
:src="sheep.$url.static('/static/img/shop/order/order_success.png')"
>
</image>
<image
v-if="state.orderInfo.status_code == 'cancel' || state.orderInfo.status_code == 'closed'"
class="state-img"
:src="sheep.$url.static('/static/img/shop/order/order_close.png')"
>
</image>
<image
v-if="state.orderInfo.status_code == 'noget'"
class="state-img"
:src="sheep.$url.static('/static/img/shop/order/order_express.png')"
>
</image>
<view class="ss-font-30">{{ formatOrderStatus(state.orderInfo) }}</view>
</view>
<view class="ss-font-26 ss-m-x-20 ss-m-b-70">{{ formatOrderStatusDescription(state.orderInfo) }}</view>
</view>
<!-- 收货地址 -->
<view class="order-address-box" v-if="state.orderInfo.receiverAreaId > 0">
<view class="ss-flex ss-col-center">
<text class="address-username">
{{ state.orderInfo.receiverName }}
</text>
<text class="address-phone">{{ state.orderInfo.receiverMobile }}</text>
</view>
<view class="address-detail">
{{ state.orderInfo.receiverAreaName }} {{ state.orderInfo.receiverDetailAddress }}
</view>
</view>
<view class="detail-goods" :style="[{ marginTop: state.orderInfo.receiverAreaId > 0 ? '0' : '-40rpx' }]">
<!-- 订单信 -->
<view class="order-list" v-for="item in state.orderInfo.items" :key="item.goods_id">
<view class="order-card">
<s-goods-item
@tap="onGoodsDetail(item.spuId)"
:img="item.picUrl"
:title="item.spuName"
:skuText="item.properties.map((property) => property.valueName).join(' ')"
:price="item.price"
:num="item.count"
>
<template #tool>
<view class="ss-flex">
<button
class="ss-reset-button apply-btn"
v-if="[10, 20, 30].includes(state.orderInfo.status) && item.afterSaleStatus === 0"
@tap.stop="
sheep.$router.go('/pages/order/aftersale/apply', {
orderId: state.orderInfo.id,
itemId: item.id,
})
"
>
申请售后
</button>
<button
class="ss-reset-button apply-btn"
v-if="item.afterSaleStatus === 10"
@tap.stop="
sheep.$router.go('/pages/order/aftersale/detail', {
id: item.afterSaleId,
})
"
>
退款中
</button>
<button
class="ss-reset-button apply-btn"
v-if="item.afterSaleStatus === 20"
@tap.stop="
sheep.$router.go('/pages/order/aftersale/detail', {
id: item.afterSaleId,
})
"
>
退款成功
</button>
</view>
</template>
<template #priceSuffix>
<button class="ss-reset-button tag-btn" v-if="item.status_text">
{{ item.status_text }}
</button>
</template>
</s-goods-item>
</view>
</view>
</view>
<!-- 订单信息 -->
<view class="notice-box">
<view class="notice-box__content">
<view class="notice-item--center">
<view class="ss-flex ss-flex-1">
<text class="title">订单编号</text>
<text class="detail">{{ state.orderInfo.no }}</text>
</view>
<button class="ss-reset-button copy-btn" @tap="onCopy">复制</button>
</view>
<view class="notice-item">
<text class="title">下单时间</text>
<text class="detail">
{{ sheep.$helper.timeFormat(state.orderInfo.createTime, 'yyyy-mm-dd hh:MM:ss') }}
</text>
</view>
<view class="notice-item" v-if="state.orderInfo.payTime">
<text class="title">支付时间</text>
<text class="detail">
{{ sheep.$helper.timeFormat(state.orderInfo.payTime, 'yyyy-mm-dd hh:MM:ss') }}
</text>
</view>
<view class="notice-item">
<text class="title">支付方式</text>
<text class="detail">{{ state.orderInfo.payChannelName || '-' }}</text>
</view>
</view>
</view>
<!-- 价格信息 -->
<view class="order-price-box">
<view class="notice-item ss-flex ss-row-between">
<text class="title">商品总额</text>
<view class="ss-flex">
<text class="detail">{{ fen2yuan(state.orderInfo.totalPrice) }}</text>
</view>
</view>
<view class="notice-item ss-flex ss-row-between">
<text class="title">运费</text>
<text class="detail">{{ fen2yuan(state.orderInfo.deliveryPrice) }}</text>
</view>
<!-- TODO 芋艿优惠劵抵扣积分抵扣 -->
<view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.couponPrice > 0">
<text class="title">优惠劵金额</text>
<text class="detail">-¥{{ fen2yuan(state.orderInfo.couponPrice) }}</text>
</view>
<view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.discountPrice > 0">
<text class="title">活动优惠</text>
<text class="detail">¥{{ fen2yuan(state.orderInfo.discountPrice) }}</text>
</view>
<view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.vipPrice > 0">
<text class="title">会员优惠</text>
<text class="detail">-¥{{ fen2yuan(state.orderInfo.vipPrice) }}</text>
</view>
<view class="notice-item all-rpice-item ss-flex ss-m-t-20">
<text class="title">{{ state.orderInfo.payStatus ? '已付款' : '需付款' }}</text>
<text class="detail all-price">{{ fen2yuan(state.orderInfo.payPrice) }}</text>
</view>
<view class="notice-item all-rpice-item ss-flex ss-m-t-20" v-if="state.orderInfo.refundPrice > 0">
<text class="title">已退款</text>
<text class="detail all-price">{{ fen2yuan(state.orderInfo.refundPrice) }}</text>
</view>
</view>
<!-- 底部按钮 -->
<!-- TODO: 查看物流等待成团评价完后返回页面没刷新页面 -->
<su-fixed bottom placeholder bg="bg-white" v-if="state.orderInfo.buttons?.length">
<view class="footer-box ss-flex ss-col-center ss-row-right">
<button
class="ss-reset-button cancel-btn"
v-if="state.orderInfo.buttons?.includes('cancel')"
@tap="onCancel(state.orderInfo.id)"
>
取消订单
</button>
<button
class="ss-reset-button pay-btn ui-BG-Main-Gradient"
v-if="state.orderInfo.buttons?.includes('pay')"
@tap="onPay(state.orderInfo.payOrderId)"
>
继续支付
</button>
<button
class="ss-reset-button cancel-btn"
v-if="state.orderInfo.buttons?.includes('combination')"
@tap="
sheep.$router.go('/pages/activity/groupon/detail', {
id: state.orderInfo.combinationRecordId,
})
"
>
拼团详情
</button>
<button
class="ss-reset-button cancel-btn"
v-if="state.orderInfo.buttons?.includes('express')"
@tap="onExpress(state.orderInfo.id)"
>
查看物流
</button>
<button
class="ss-reset-button cancel-btn"
v-if="state.orderInfo.buttons?.includes('confirm')"
@tap="onConfirm(state.orderInfo.id)"
>
确认收货
</button>
<button
class="ss-reset-button cancel-btn"
v-if="state.orderInfo.buttons?.includes('comment')"
@tap="onComment(state.orderInfo.id)"
>
评价
</button>
</view>
</su-fixed>
</s-layout>
</template>
<script setup>
import sheep from '@/sheep'
import { onLoad } from '@dcloudio/uni-app'
import { reactive } from 'vue'
import { isEmpty } from 'lodash'
import { fen2yuan, formatOrderStatus, formatOrderStatusDescription, handleOrderButtons } from '@/sheep/hooks/useGoods'
import OrderApi from '@/sheep/api/trade/order'
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2
const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png')
const state = reactive({
orderInfo: {},
merchantTradeNo: '', //
comeinType: '', //
})
//
const onCopy = () => {
sheep.$helper.copyText(state.orderInfo.sn)
}
//
function onPay(payOrderId) {
sheep.$router.go('/pages/pay/index', {
id: payOrderId,
})
}
//
function onGoodsDetail(id) {
sheep.$router.go('/pages/goods/index', {
id,
})
}
//
async function onCancel(orderId) {
uni.showModal({
title: '提示',
content: '确定要取消订单吗?',
success: async function (res) {
if (!res.confirm) {
return
}
const { code } = await OrderApi.cancelOrder(orderId)
if (code === 0) {
await getOrderDetail(orderId)
}
},
})
}
//
async function onExpress(id) {
sheep.$router.go('/pages/order/express/log', {
id,
})
}
// TODO
async function onConfirm(orderId, ignore = false) {
//
// todo:
// 1.return
// 2.mpConfirm,App.vueshow
let isOpenBusinessView = true
if (
sheep.$platform.name === 'WechatMiniProgram' &&
!isEmpty(state.orderInfo.wechat_extra_data) &&
isOpenBusinessView &&
!ignore
) {
mpConfirm(orderId)
return
}
//
const { code } = await OrderApi.receiveOrder(orderId)
if (code === 0) {
await getOrderDetail(orderId)
}
}
// #ifdef MP-WEIXIN
//
function mpConfirm(orderId) {
if (!wx.openBusinessView) {
sheep.$helper.toast(`请升级微信版本`)
return
}
wx.openBusinessView({
businessType: 'weappOrderConfirm',
extraData: {
merchant_trade_no: state.orderInfo.wechat_extra_data.merchant_trade_no,
transaction_id: state.orderInfo.wechat_extra_data.transaction_id,
},
success(response) {
console.log('success:', response)
if (response.errMsg === 'openBusinessView:ok') {
if (response.extraData.status === 'success') {
onConfirm(orderId, true)
}
}
},
fail(error) {
console.log('error:', error)
},
complete(result) {
console.log('result:', result)
},
})
}
// #endif
//
function onComment(id) {
sheep.$router.go('/pages/goods/comment/add', {
id,
})
}
async function getOrderDetail(id) {
//
let res
if (state.comeinType === 'wechat') {
//
res = await OrderApi.getOrder(id, {
merchant_trade_no: state.merchantTradeNo,
})
} else {
res = await OrderApi.getOrder(id)
}
if (res.code === 0) {
state.orderInfo = res.data
handleOrderButtons(state.orderInfo)
} else {
sheep.$router.back()
}
}
onLoad(async (options) => {
let id = 0
if (options.id) {
id = options.id
}
// TODO
state.comeinType = options.comein_type
if (state.comeinType === 'wechat') {
state.merchantTradeNo = options.merchant_trade_no
}
await getOrderDetail(id)
})
</script>
<style lang="scss" scoped>
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.apply-btn {
width: 140rpx;
height: 50rpx;
border-radius: 25rpx;
font-size: 24rpx;
border: 2rpx solid #dcdcdc;
line-height: normal;
margin-left: 16rpx;
}
.state-box {
color: rgba(#fff, 0.9);
width: 100%;
background: v-bind(headerBg) no-repeat, linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
background-size: 750rpx 100%;
box-sizing: border-box;
.state-img {
width: 60rpx;
height: 60rpx;
margin-right: 20rpx;
}
}
.order-address-box {
background-color: #fff;
border-radius: 10rpx;
margin: -50rpx 20rpx 16rpx 20rpx;
padding: 44rpx 34rpx 42rpx 20rpx;
font-size: 30rpx;
box-sizing: border-box;
font-weight: 500;
color: rgba(51, 51, 51, 1);
.address-username {
margin-right: 20rpx;
}
.address-detail {
font-size: 26rpx;
font-weight: 500;
color: rgba(153, 153, 153, 1);
margin-top: 20rpx;
}
}
.detail-goods {
border-radius: 10rpx;
margin: 0 20rpx 20rpx 20rpx;
.order-list {
margin-bottom: 20rpx;
background-color: #fff;
.order-card {
padding: 20rpx 0;
.order-sku {
font-size: 24rpx;
font-weight: 400;
color: rgba(153, 153, 153, 1);
width: 450rpx;
margin-bottom: 20rpx;
.order-num {
margin-right: 10rpx;
}
}
.tag-btn {
margin-left: 16rpx;
font-size: 24rpx;
height: 36rpx;
color: var(--ui-BG-Main);
border: 2rpx solid var(--ui-BG-Main);
border-radius: 14rpx;
padding: 0 4rpx;
}
}
}
}
//
.notice-box {
background: #fff;
border-radius: 10rpx;
margin: 0 20rpx 20rpx 20rpx;
.notice-box__head {
font-size: 30rpx;
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 80rpx;
border-bottom: 1rpx solid #dfdfdf;
padding: 0 25rpx;
}
.notice-box__content {
padding: 20rpx;
.self-pickup-box {
width: 100%;
.self-pickup--img {
width: 200rpx;
height: 200rpx;
margin: 40rpx 0;
}
}
}
.notice-item,
.notice-item--center {
display: flex;
align-items: center;
line-height: normal;
margin-bottom: 24rpx;
.title {
font-size: 28rpx;
color: #999;
}
.detail {
font-size: 28rpx;
color: #333;
flex: 1;
}
}
}
.copy-btn {
width: 100rpx;
line-height: 50rpx;
border-radius: 25rpx;
padding: 0;
background: rgba(238, 238, 238, 1);
font-size: 22rpx;
font-weight: 400;
color: rgba(51, 51, 51, 1);
}
//
.order-price-box {
background-color: #fff;
border-radius: 10rpx;
padding: 20rpx;
margin: 0 20rpx 20rpx 20rpx;
.notice-item {
line-height: 70rpx;
.title {
font-size: 28rpx;
color: #999;
}
.detail {
font-size: 28rpx;
color: #333;
font-family: OPPOSANS;
}
}
.all-rpice-item {
justify-content: flex-end;
align-items: center;
.title {
font-size: 26rpx;
font-weight: 500;
color: #333333;
line-height: normal;
}
.all-price {
font-size: 26rpx;
font-family: OPPOSANS;
line-height: normal;
color: $red;
}
}
}
//
.footer-box {
height: 100rpx;
width: 100%;
box-sizing: border-box;
border-radius: 10rpx;
padding-right: 20rpx;
.cancel-btn {
width: 160rpx;
height: 60rpx;
background: #eeeeee;
border-radius: 30rpx;
margin-right: 20rpx;
font-size: 26rpx;
font-weight: 400;
color: #333333;
}
.pay-btn {
width: 160rpx;
height: 60rpx;
font-size: 26rpx;
border-radius: 30rpx;
font-weight: 500;
color: #fff;
}
}
</style>

213
pages/order/list.vue Normal file
View File

@ -0,0 +1,213 @@
<template>
<pb-layout title="订单" navbar="nomal" tabbar="/pages/order/list" :bgStyle="bgStyle">
<pb-sticky bgColor="#fff">
<pb-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab" />
</pb-sticky>
<p-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单" />
<view v-if="state.pagination.total > 0">
<view
class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20"
v-for="order in state.pagination.list"
:key="order.payOrderId"
>
<view v-for="(sorder, sindex) in order.order" @tap="onOrderDetail(sorder.id)">
<view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
<!-- <view class="order-no">订单号{{ sorder.no }}</view> -->
<view class="order-no text-lg font-weight-bold">{{ sorder.particularName }}</view>
<view class="order-state ss-font-26" :class="formatOrderColor(sorder)">
{{ formatOrderStatus(sorder) }}
</view>
</view>
<view class="border-bottom" v-for="item in sorder.items" :key="item.id">
<p-goods-item
:img="item.picUrl"
:title="item.spuName"
:skuText="item.properties.map((property) => property.valueName).join(' ')"
:price="item.price"
:num="item.count"
/>
</view>
<view
class="order-card-footer ss-flex ss-col-center ss-p-x-20"
:class="sorder.buttons.length > 3 ? 'ss-row-between' : 'ss-row-right'"
>
<view class="ss-flex ss-col-center">
<button
v-if="sorder.buttons.includes('combination')"
class="tool-btn ss-reset-button"
@tap.stop="onOrderGroupon(sorder)"
>
拼团详情
</button>
<button
v-if="sorder.buttons.length === 0"
class="tool-btn ss-reset-button"
@tap.stop="onOrderDetail(sorder.id)"
>
查看详情
</button>
<button
v-if="sorder.buttons.includes('confirm')"
class="tool-btn ss-reset-button"
@tap.stop="onConfirm(sorder)"
>
确认收货
</button>
<button
v-if="sorder.buttons.includes('express')"
class="tool-btn ss-reset-button"
@tap.stop="onExpress(sorder.id)"
>
查看物流
</button>
<button
v-if="sorder.buttons.includes('cancel')"
class="tool-btn ss-reset-button"
@tap.stop="onCancel(sorder.id, sindex)"
>
取消订单
</button>
<button
v-if="sorder.buttons.includes('comment')"
class="tool-btn ss-reset-button"
@tap.stop="onComment(sorder.id)"
>
评价
</button>
<button
v-if="sorder.buttons.includes('delete')"
class="delete-btn ss-reset-button"
@tap.stop="onDelete(sorder.id)"
>
删除订单
</button>
</view>
</view>
<view class="pay-box ss-m-t-30 ss-flex ss-gap-40 ss-p-b-40 ss-row-right ss-p-r-20">
<view class="ss-flex ss-col-center">
<view class="discounts-title pay-color"
> {{ totalNumsPerOrder(order) }} 件商品,总金额:</view
>
<view class="discounts-money pay-color"> {{ fen2yuan(totalPricePerOrder(order)) }} </view>
</view>
</view>
</view>
</view>
</view>
<uni-load-more
v-if="state.pagination.total > 0"
:status="state.loadStatus"
:content-text="{ contentdown: '上拉加载更多' }"
/>
</pb-layout>
</template>
<script setup>
import { ref } from 'vue'
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { fen2yuan, formatOrderColor, formatOrderStatus, handleOrderButtons } from '@/peach/hooks/useGoods'
import peach from '@/peach'
import _, { isEmpty } from 'lodash'
import { resetPagination } from '@/peach/util'
const bgStyle = {
backgroundColor: '#fff',
description: '',
}
const state = ref({
currentTab: 0,
pagination: {
list: [],
total: 0,
pageNo: 1,
pageSize: 6,
},
loadStatus: '',
})
const tabMaps = [
{
name: '全部',
},
{
name: '待付款',
value: 0,
},
{
name: '待核销',
value: 50,
},
{
name: '待配送',
value: 60,
},
]
//
function totalNumsPerOrder(order) {
if (order.order.length) {
return order.order.reduce((per, cur) => {
return per + cur.productCount
}, 0)
}
}
//
function totalPricePerOrder(order) {
if (order.order.length) {
return order.order.reduce((per, cur) => {
return per + cur.payPrice
}, 0)
}
}
//
function onTabsChange(e) {
if (state.value.currentTab === e.index) {
return
}
//
resetPagination(state.value.pagination)
state.value.currentTab = e.index
getOrderList()
}
//
function onOrderDetail(id) {
peach.$router.go('/pages/order/detail', {
id,
})
}
onLoad(async (options) => {
if (options.type) {
state.value.currentTab = options.type
}
await getOrderList()
})
//
function loadMore() {
if (state.value.loadStatus === 'noMore') {
return
}
state.value.pagination.pageNo++
getOrderList()
}
//
onReachBottom(() => {
loadMore()
})
//
onPullDownRefresh(() => {
resetPagination(state.value.pagination)
getOrderList()
setTimeout(function () {
uni.stopPullDownRefresh()
}, 800)
})
</script>

370
pages/user/wallet/money.vue Normal file
View File

@ -0,0 +1,370 @@
<!-- 我的钱包 -->
<template>
<pb-layout navbar="inner" class="wallet-wrap" title="钱包" :bgStyle="bgStyle">
<!-- 钱包卡片 -->
<view class="header-box ss-flex ss-row-center ss-col-center">
<view class="card-box ui-BG-Main ui-Shadow-Main">
<view class="card-head ss-flex ss-col-center">
<view class="card-title ss-m-r-10">钱包余额</view>
<view
@tap="state.showMoney = !state.showMoney"
class="ss-eye-icon"
:class="state.showMoney ? 'cicon-eye' : 'cicon-eye-off'"
/>
</view>
<view class="ss-flex ss-row-between ss-col-center ss-m-t-64">
<view class="money-num">{{ state.showMoney ? fen2yuan(userWallet.balance) : '*****' }}</view>
<button class="ss-reset-button topup-btn" @tap="peach.$router.go('/pages/pay/recharge')">
充值
</button>
</view>
</view>
</view>
<su-sticky>
<!-- 统计 -->
<view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
<uni-datetime-picker v-model="state.data" type="daterange" @change="onChangeTime" :end="state.today">
<button class="ss-reset-button date-btn">
<text>{{ dateFilterText }}</text>
<text class="cicon-drop-down ss-seldate-icon"></text>
</button>
</uni-datetime-picker>
<view class="total-box">
<view class="ss-m-b-10">总收入{{ fen2yuan(state.summary.totalIncome) }}</view>
<view>总支出{{ fen2yuan(state.summary.totalExpense) }}</view>
</view>
</view>
<su-tabs :list="tabMaps" @change="onChange" :scrollable="false" :current="state.currentTab"></su-tabs>
</su-sticky>
<s-empty v-if="state.pagination.total === 0" text="暂无数据" icon="/static/data-empty.png" />
<!-- 钱包记录 -->
<view v-if="state.pagination.total > 0">
<view class="wallet-list ss-flex border-bottom" v-for="item in state.pagination.list" :key="item.id">
<view class="list-content">
<view class="title-box ss-flex ss-row-between ss-m-b-20">
<text class="title ss-line-1">
{{ item.title }}
</text>
<view class="money">
<text v-if="item.price >= 0" class="add">+{{ fen2yuan(item.price) }}</text>
<text v-else class="minus">{{ fen2yuan(item.price) }}</text>
</view>
</view>
<text class="time">
{{ peach.$helper.timeFormat(state.createTime, 'yyyy-mm-dd hh:MM:ss') }}
</text>
</view>
</view>
</view>
<uni-load-more
v-if="state.pagination.total > 0"
:status="state.loadStatus"
:content-text="{
contentdown: '上拉加载更多',
}"
/>
</pb-layout>
</template>
<script setup>
import { computed, reactive } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import peach from '@/peach'
import dayjs from 'dayjs'
import _ from 'lodash'
import PayWalletApi from '@/peach/api/pay/wallet'
import { fen2yuan } from '@/peach/hooks/useGoods'
import { resetPagination } from '@/peach/util'
const bgStyle = {
backgroundImage: '/static/bg-page.png',
imageType: 'local',
backgroundColor: '#fff',
description: '',
}
const headerBg = peach.$url.css('/static/img/shop/user/wallet_card_bg.png')
//
const state = reactive({
showMoney: false,
date: [], //
currentTab: 0,
pagination: {
list: [],
total: 0,
pageNo: 1,
pageSize: 8,
},
summary: {
totalIncome: 0,
totalExpense: 0,
},
loadStatus: '',
today: '',
})
const tabMaps = [
{
name: '全部',
value: '',
},
{
name: '收入',
value: '1',
},
{
name: '支出',
value: '2',
},
]
const userWallet = computed(() => peach.$store('user').userWallet)
//
const dateFilterText = computed(() => {
if (state.date[0] === state.date[1]) {
return state.date[0]
} else {
return state.date.join('~')
}
})
//
async function getLogList() {
state.loadStatus = 'loading'
const { data, code } = await PayWalletApi.getWalletTransactionPage({
pageNo: state.pagination.pageNo,
pageSize: state.pagination.pageSize,
type: tabMaps[state.currentTab].value,
'createTime[0]': state.date[0] + ' 00:00:00',
'createTime[1]': state.date[1] + ' 23:59:59',
})
if (code !== 0) {
return
}
state.pagination.list = _.concat(state.pagination.list, data.list)
state.pagination.total = data.total
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore'
}
//
async function getSummary() {
const { data, code } = await PayWalletApi.getWalletTransactionSummary({
createTime: [state.date[0] + ' 00:00:00', state.date[1] + ' 23:59:59'],
})
if (code !== 0) {
return
}
state.summary = data
}
onLoad(() => {
state.today = dayjs().format('YYYY-MM-DD')
state.date = [state.today, state.today]
getLogList()
getSummary()
//
peach.$store('user').getWallet()
})
// tab
function onChange(e) {
state.currentTab = e.index
//
resetPagination(state.pagination)
getLogList()
getSummary()
}
//
function onChangeTime(e) {
state.date[0] = e[0]
state.date[1] = e[e.length - 1]
//
resetPagination(state.pagination)
getLogList()
getSummary()
}
onReachBottom(() => {
if (state.loadStatus === 'noMore') {
return
}
state.pagination.pageNo++
getLogList()
})
</script>
<style lang="scss" scoped>
//
.header-box {
background-color: $white;
padding: 30rpx;
.card-box {
width: 100%;
min-height: 300rpx;
padding: 40rpx;
background-size: 100% 100%;
border-radius: 30rpx;
overflow: hidden;
position: relative;
z-index: 1;
box-sizing: border-box;
&::after {
content: '';
display: block;
width: 100%;
height: 100%;
z-index: 2;
position: absolute;
top: 0;
left: 0;
background: v-bind(headerBg) no-repeat;
pointer-events: none;
}
.card-head {
color: $white;
font-size: 30rpx;
}
.ss-eye-icon {
font-size: 40rpx;
color: $white;
}
.money-num {
font-size: 70rpx;
line-height: 70rpx;
font-weight: 500;
color: $white;
font-family: OPPOSANS;
}
.reduce-num {
font-size: 26rpx;
font-weight: 400;
color: $white;
}
.topup-btn {
width: 120rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 30px;
font-size: 26rpx;
font-weight: 500;
background-color: $white;
color: var(--ui-BG-Main);
}
}
}
//
.filter-box {
height: 114rpx;
background-color: $bg-page;
.total-box {
font-size: 24rpx;
font-weight: 500;
color: $dark-9;
}
.date-btn {
background-color: $white;
line-height: 54rpx;
border-radius: 27rpx;
padding: 0 20rpx;
font-size: 24rpx;
font-weight: 500;
color: $dark-6;
.ss-seldate-icon {
font-size: 50rpx;
color: $dark-9;
}
}
}
.tabs-box {
background: $white;
border-bottom: 2rpx solid #eeeeee;
}
// tab
.wallet-tab-card {
.tab-item {
height: 80rpx;
position: relative;
.tab-title {
font-size: 30rpx;
}
.cur-tab-title {
font-weight: $font-weight-bold;
}
.tab-line {
width: 60rpx;
height: 6rpx;
border-radius: 6rpx;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 2rpx;
background-color: var(--ui-BG-Main);
}
}
}
//
.wallet-list {
padding: 30rpx;
background-color: #ffff;
.head-img {
width: 70rpx;
height: 70rpx;
border-radius: 50%;
background: $gray-c;
}
.list-content {
justify-content: space-between;
align-items: flex-start;
flex: 1;
.title {
font-size: 28rpx;
color: $dark-3;
width: 400rpx;
}
.time {
color: $gray-c;
font-size: 22rpx;
}
}
.money {
font-size: 28rpx;
font-weight: bold;
font-family: OPPOSANS;
.add {
color: var(--ui-BG-Main);
}
.minus {
color: $dark-3;
}
}
}
</style>

View File

@ -0,0 +1,181 @@
<template>
<view>
<view>
<slot name="top"></slot>
</view>
<view
class="ss-order-card-warp ss-flex ss-col-stretch ss-row-between bg-white"
:style="[{ borderRadius: radius + 'rpx', marginBottom: marginBottom + 'rpx' }]"
>
<view class="img-box ss-m-r-24">
<image class="order-img" :src="sheep.$url.cdn(img)" mode="aspectFill"></image>
</view>
<view
class="box-right ss-flex-col ss-row-between"
:style="[{ width: titleWidth ? titleWidth + 'rpx' : '' }]"
>
<view class="title-text ss-line-2" v-if="title">{{ title }}</view>
<view v-if="skuString" class="spec-text ss-m-t-8 ss-m-b-12">{{ skuString }}</view>
<view class="groupon-box">
<slot name="groupon"></slot>
</view>
<view class="ss-flex">
<view class="ss-flex ss-col-center">
<view
class="price-text ss-flex ss-col-center"
:style="[{ color: priceColor }]"
v-if="price && Number(price) > 0"
>
{{ fen2yuan(price) }}
</view>
<view v-if="num" class="total-text ss-flex ss-col-center">x {{ num }}</view>
<slot name="priceSuffix"></slot>
</view>
</view>
<view class="tool-box">
<slot name="tool"></slot>
</view>
<view>
<slot name="rightBottom"></slot>
</view>
</view>
</view>
</view>
</template>
<script setup>
import peach from '@/peach'
import { computed } from 'vue'
import { fen2yuan } from '@/peach/hooks/useGoods'
/**
* 订单卡片
*
* @property {String} img - 图片
* @property {String} title - 标题
* @property {Number} titleWidth = 0 - 标题宽度默认0单位rpx
* @property {String} skuText - 规格
* @property {String | Number} price - 价格
* @property {String} priceColor - 价格颜色
* @property {Number | String} num - 数量
*
*/
const props = defineProps({
img: {
type: String,
default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto',
},
title: {
type: String,
default: '',
},
titleWidth: {
type: Number,
default: 0,
},
skuText: {
type: [String, Array],
default: '',
},
price: {
type: [String, Number],
default: '',
},
priceColor: {
type: [String],
default: '',
},
num: {
type: [String, Number],
default: 0,
},
score: {
type: [String, Number],
default: '',
},
radius: {
type: [String],
default: '',
},
marginBottom: {
type: [String],
default: '',
},
})
const skuString = computed(() => {
if (!props.skuText) {
return ''
}
if (typeof props.skuText === 'object') {
return props.skuText.join(',')
}
return props.skuText
})
</script>
<style lang="scss" scoped>
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.ss-order-card-warp {
padding: 20rpx;
.img-box {
width: 164rpx;
height: 164rpx;
border-radius: 10rpx;
overflow: hidden;
.order-img {
width: 164rpx;
height: 164rpx;
}
}
.box-right {
flex: 1;
// width: 500rpx;
// height: 164rpx;
position: relative;
.tool-box {
position: absolute;
right: 0rpx;
bottom: -10rpx;
}
}
.title-text {
font-size: 28rpx;
font-weight: 500;
line-height: 40rpx;
}
.spec-text {
font-size: 24rpx;
font-weight: 400;
color: $dark-9;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.price-text {
font-size: 24rpx;
font-weight: 500;
font-family: OPPOSANS;
}
.total-text {
font-size: 24rpx;
font-weight: 400;
line-height: 24rpx;
color: $dark-9;
margin-left: 8rpx;
}
}
</style>

View File

@ -72,8 +72,8 @@ const useAppStore = defineStore(
{
activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-002.png',
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-001.png',
text: '购物车',
url: '/pages/index/icons',
text: '订单',
url: '/pages/order/list',
},
{
activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-002.png',

View File

@ -0,0 +1,264 @@
<template>
<view class="u-sticky" :id="elId" :style="[style]">
<view :style="[stickyContent]" class="u-sticky__content"><slot /></view>
</view>
</template>
<script>
import { deepMerge, addStyle, addUnit, sleep, guid, getPx, os, sys } from '@/peach/helper'
import peach from '@/peach'
/**
* sticky 吸顶
* @description 该组件与CSS中position: sticky属性实现的效果一致当组件达到预设的到顶部距离时 就会固定在指定位置组件位置大于预设的顶部距离时会重新按照正常的布局排列
* @property {String Number} offsetTop 吸顶时与顶部的距离单位px默认 0
* @property {String Number} customNavHeight 自定义导航栏的高度 h5 默认44 其他默认 0
* @property {Boolean} stickyToTop 是否开启吸顶功能 默认 false
* @property {String} bgColor 组件背景颜色默认 '#ffffff'
* @property {String Number} zIndex 吸顶时的z-index值
* @property {String Number} index 自定义标识用于区分是哪一个组件
* @property {Object} customStyle 组件的样式对象形式
* @event {Function} fixed 组件吸顶时触发
* @event {Function} unfixed 组件取消吸顶时触发
* @example <u-sticky offsetTop="200"><view>塞下秋来风景异衡阳雁去无留意</view></u-sticky>
*/
export default {
name: 'pb-sticky',
props: {
// H5NavigationBar44px
offsetTop: {
type: [String, Number],
default: 0,
},
//
customNavHeight: {
type: [String, Number],
// #ifdef H5
// H5
default: 44,
// #endif
// #ifndef H5
default: peach.$platform.navbar,
// #endif
},
//
stickyToTop: {
type: Boolean,
default: false,
},
//
bgColor: {
type: String,
default: 'transparent',
},
// z-index
zIndex: {
type: [String, Number],
default: '',
},
//
index: {
type: [String, Number],
default: '',
},
customStyle: {
type: [Object, String],
default: () => ({}),
},
},
data() {
return {
cssSticky: false, // 使csssticky
stickyTop: 0, // topoffsetTop
elId: guid(),
left: 0, // jspostition: fixedleftheightwidth
width: 'auto',
height: 'auto',
fixed: false, // js
}
},
computed: {
style() {
const style = {}
if (!this.stickyToTop) {
if (this.cssSticky) {
style.position = 'sticky'
style.zIndex = this.uZindex
style.top = addUnit(this.stickyTop)
} else {
style.height = this.fixed ? this.height + 'px' : 'auto'
}
} else {
// relative(nvue)nvuestatic
// #ifdef APP-NVUE
style.position = 'relative'
// #endif
// #ifndef APP-NVUE
style.position = 'static'
// #endif
}
style.backgroundColor = this.bgColor
return deepMerge(addStyle(this.customStyle), style)
},
//
stickyContent() {
const style = {}
if (!this.cssSticky) {
style.position = this.fixed ? 'fixed' : 'static'
style.top = this.stickyTop + 'px'
style.left = this.left + 'px'
style.width = this.width == 'auto' ? 'auto' : this.width + 'px'
style.zIndex = this.uZindex
}
return style
},
uZindex() {
return this.zIndex ? this.zIndex : 970
},
},
mounted() {
this.init()
},
methods: {
init() {
this.getStickyTop()
// 使
this.checkSupportCssSticky()
// css sticky使jscss
if (!this.cssSticky) {
!this.stickyToTop && this.initObserveContent()
}
},
$uGetRect(selector, all) {
return new Promise((resolve) => {
uni.createSelectorQuery()
.in(this)
[all ? 'selectAll' : 'select'](selector)
.boundingClientRect((rect) => {
if (all && Array.isArray(rect) && rect.length) {
resolve(rect)
}
if (!all && rect) {
resolve(rect)
}
})
.exec()
})
},
initObserveContent() {
// js""
this.$uGetRect('#' + this.elId).then((res) => {
this.height = res.height
this.left = res.left
this.width = res.width
this.$nextTick(() => {
this.observeContent()
})
})
},
observeContent() {
//
this.disconnectObserver('contentObserver')
const contentObserver = uni.createIntersectionObserver({
//
thresholds: [0.95, 0.98, 1],
})
//
contentObserver.relativeToViewport({
top: -this.stickyTop,
})
//
contentObserver.observe(`#${this.elId}`, (res) => {
this.setFixed(res.boundingClientRect.top)
})
this.contentObserver = contentObserver
},
setFixed(top) {
//
const fixed = top <= this.stickyTop
this.fixed = fixed
},
disconnectObserver(observerName) {
//
const observer = this[observerName]
observer && observer.disconnect()
},
getStickyTop() {
this.stickyTop = getPx(this.offsetTop) + getPx(this.customNavHeight)
},
async checkSupportCssSticky() {
// #ifdef H5
// H5css sticky使
if (this.checkCssStickyForH5()) {
this.cssSticky = true
}
// #endif
// 8.0css sticky(7sticky)
if (os() === 'android' && Number(sys().system) > 8) {
this.cssSticky = true
}
// APP-VuecomputedStylecss sticky
// #ifdef APP-VUE || MP-WEIXIN
this.cssSticky = await this.checkComputedStyle()
// #endif
// iosios6css sticky
if (os() === 'ios') {
this.cssSticky = true
}
// nvuecss sticky
// #ifdef APP-NVUE
this.cssSticky = true
// #endif
},
// APPuni.createSelectorQuerycss sticky
checkComputedStyle() {
//
// #ifdef APP-VUE || MP-WEIXIN
return new Promise((resolve) => {
uni.createSelectorQuery()
.in(this)
.select('.u-sticky')
.fields({
computedStyle: ['position'],
})
.exec((e) => {
resolve('sticky' === e[0].position)
})
})
// #endif
},
// H5css sticky
// sticky
checkCssStickyForH5() {
//
// #ifdef H5
const vendorList = ['', '-webkit-', '-ms-', '-moz-', '-o-'],
vendorListLength = vendorList.length,
stickyElement = document.createElement('div')
for (let i = 0; i < vendorListLength; i++) {
stickyElement.style.position = vendorList[i] + 'sticky'
if (stickyElement.style.position !== '') {
return true
}
}
return false
// #endif
},
},
beforeDestroy() {
this.disconnectObserver('contentObserver')
},
}
</script>
<style lang="scss" scoped>
.u-sticky {
/* #ifdef APP-VUE || MP-WEIXIN */
// stickyAPPuni.createSelectorQuerycss sticky使
position: sticky;
/* #endif */
}
</style>

View File

@ -0,0 +1,432 @@
<template>
<view class="u-tabs">
<view class="u-tabs__wrapper">
<slot name="left" />
<view class="u-tabs__wrapper__scroll-view-wrapper">
<scroll-view
:scroll-x="scrollable"
:scroll-left="scrollLeft"
scroll-with-animation
enable-flex
class="u-tabs__wrapper__scroll-view white-space"
:show-scrollbar="false"
ref="u-tabs__wrapper__scroll-view"
>
<view class="u-tabs__wrapper__nav" ref="u-tabs__wrapper__nav">
<view
class="u-tabs__wrapper__nav__item"
v-for="(item, index) in list"
:key="index"
@tap="clickHandler(item, index)"
:ref="`u-tabs__wrapper__nav__item-${index}`"
:style="[addStyle(itemStyle), { flex: scrollable ? '' : 1 }]"
:class="[
`u-tabs__wrapper__nav__item-${index}`,
item.disabled && 'u-tabs__wrapper__nav__item--disabled',
]"
>
<text
:class="[item.disabled && 'u-tabs__wrapper__nav__item__text--disabled']"
class="u-tabs__wrapper__nav__item__text"
:style="[textStyle(index)]"
>{{ item[keyName] }}</text
>
</view>
<!-- #ifdef APP-NVUE -->
<view
class="u-tabs__wrapper__nav__line"
ref="u-tabs__wrapper__nav__line"
:style="[
{
width: addUnit(lineWidth),
height: addUnit(lineHeight),
background: lineColor ? lineColor : 'var(--ui-BG-Main)',
backgroundSize: lineBgSize,
},
]"
></view>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<view
class="u-tabs__wrapper__nav__line"
ref="u-tabs__wrapper__nav__line"
:style="[
{
width: addUnit(lineWidth),
transform: `translate(${lineOffsetLeft}px)`,
transitionDuration: `${firstTime ? 0 : duration}ms`,
height: addUnit(lineHeight),
background: lineColor ? lineColor : 'var(--ui-BG-Main)',
backgroundSize: lineBgSize,
},
]"
>
</view>
<!-- #endif -->
</view>
</scroll-view>
</view>
<slot name="right" />
</view>
</view>
</template>
<script>
import { deepMerge, addStyle, addUnit, sleep, getPx, sys } from '@/peach/helper'
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation')
const dom = uni.requireNativePlugin('dom')
// #endif
/**
* Tabs 标签
* @description tabs标签组件在标签多的时候可以配置为左右滑动标签少的时候可以禁止滑动 该组件的一个特点是配置为滚动模式时激活的tab会自动移动到组件的中间位置
* @tutorial https://www.uviewui.com/components/tabs.html
* @property {String | Number} duration 滑块移动一次所需的时间单位秒默认 200
* @property {String | Number} swierWidth swiper的宽度默认 '750rpx'
* @property {String} keyName `list`元素对象中读取的键名默认 'name'
* @event {Function(index)} change 标签改变时触发 index: 点击了第几个tab索引从0开始
* @event {Function(index)} click 点击标签时触发 index: 点击了第几个tab索引从0开始
* @example <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
*/
export default {
name: 'pb-tabs',
data() {
return {
addStyle,
addUnit,
firstTime: true,
scrollLeft: 0,
scrollViewWidth: 0,
lineOffsetLeft: 0,
tabsRect: {
left: 0,
},
innerCurrent: 0,
moving: false,
}
},
props: {
// ms
duration: {
type: Number,
default: 300,
},
// tabs
list: {
type: Array,
default: [],
},
//
lineColor: {
type: String,
default: '',
},
//
activeStyle: {
type: [String, Object],
default() {
return {
color: '#303133',
}
},
},
//
inactiveStyle: {
type: [String, Object],
default() {
return {
color: '#606266',
}
},
},
//
lineWidth: {
type: [String, Number],
default: 20,
},
//
lineHeight: {
type: [String, Number],
default: 3,
},
// 使
lineBgSize: {
type: String,
default: 'cover',
},
// item
itemStyle: {
type: [String, Object],
default() {
return {
height: '44px',
}
},
},
//
scrollable: {
type: Boolean,
default: true,
},
//
current: {
type: [Number, String],
default: 0,
},
//
keyName: {
type: String,
default: 'name',
},
},
watch: {
current: {
immediate: true,
handler(newValue, oldValue) {
//
if (newValue !== this.innerCurrent) {
this.innerCurrent = newValue
this.$nextTick(() => {
this.resize()
})
}
},
},
// listlist
list() {
this.$nextTick(() => {
this.resize()
})
},
},
computed: {
textStyle() {
return (index) => {
const style = {}
//
const customeStyle =
index === this.innerCurrent ? addStyle(this.activeStyle) : addStyle(this.inactiveStyle)
// nvuestyle!import
if (this.list[index].disabled) {
style.color = '#c8c9cc'
}
return deepMerge(customeStyle, style)
}
},
},
async mounted() {
this.init()
},
methods: {
$uGetRect(selector, all) {
return new Promise((resolve) => {
uni.createSelectorQuery()
.in(this)
[all ? 'selectAll' : 'select'](selector)
.boundingClientRect((rect) => {
if (all && Array.isArray(rect) && rect.length) {
resolve(rect)
}
if (!all && rect) {
resolve(rect)
}
})
.exec()
})
},
setLineLeft() {
const tabItem = this.list[this.innerCurrent]
if (!tabItem) {
return
}
//
let lineOffsetLeft = this.list
.slice(0, this.innerCurrent)
.reduce((total, curr) => total + curr.rect.width, 0)
// 线px
const lineWidth = getPx(this.lineWidth)
this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2
// #ifdef APP-NVUE
//
this.animation(this.lineOffsetLeft, this.firstTime ? 0 : parseInt(this.duration))
// #endif
// tab item
// nvuestylefalse()
if (this.firstTime) {
setTimeout(() => {
this.firstTime = false
}, 10)
}
},
// nvue
animation(x, duration = 0) {
// #ifdef APP-NVUE
const ref = this.$refs['u-tabs__wrapper__nav__line']
animation.transition(ref, {
styles: {
transform: `translateX(${x}px)`,
},
duration,
})
// #endif
},
//
clickHandler(item, index) {
// disabledclickchange
this.$emit('click', {
...item,
index,
})
// disabled
if (item.disabled) return
this.innerCurrent = index
this.resize()
this.$emit('change', {
...item,
index,
})
},
init() {
sleep().then(() => {
this.resize()
})
},
setScrollLeft() {
// tabtabwidthleft()
const tabRect = this.list[this.innerCurrent]
// item
const offsetLeft = this.list.slice(0, this.innerCurrent).reduce((total, curr) => {
return total + curr.rect.width
}, 0)
//
const windowWidth = sys().windowWidth
// tabs-itemscroll-view
let scrollLeft =
offsetLeft -
(this.tabsRect.width - tabRect.rect.width) / 2 -
(windowWidth - this.tabsRect.right) / 2 +
this.tabsRect.left / 2
// scrollLeftscroll-viewtabs
scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width)
this.scrollLeft = Math.max(0, scrollLeft)
},
//
resize() {
// list
if (this.list.length === 0) {
return
}
Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
this.tabsRect = tabsRect
this.scrollViewWidth = 0
itemRect.map((item, index) => {
// scroll-view
this.scrollViewWidth += item.width
// itemX
this.list[index].rect = item
})
// tabs
this.setLineLeft()
this.setScrollLeft()
})
},
//
getTabsRect() {
return new Promise((resolve) => {
this.queryRect('u-tabs__wrapper__scroll-view').then((size) => resolve(size))
})
},
//
getAllItemRect() {
return new Promise((resolve) => {
const promiseAllArr = this.list.map((item, index) =>
this.queryRect(`u-tabs__wrapper__nav__item-${index}`, true)
)
Promise.all(promiseAllArr).then((sizes) => resolve(sizes))
})
},
//
queryRect(el, item) {
// #ifndef APP-NVUE
// $uGetRectuViewhttps://www.uviewui.com/js/getRect.html
// this.$uGetRectuni.$u.getRect
return new Promise((resolve) => {
this.$uGetRect(`.${el}`).then((size) => {
resolve(size)
})
})
// #endif
// #ifdef APP-NVUE
// nvue使dom
// promise使then
return new Promise((resolve) => {
dom.getComponentRect(item ? this.$refs[el][0] : this.$refs[el], (res) => {
resolve(res.size)
})
})
// #endif
},
},
}
</script>
<style lang="scss" scoped>
.u-tabs {
background: #fff;
border-bottom: 2rpx solid #eee;
&__wrapper {
@include flex;
align-items: center;
&__scroll-view-wrapper {
flex: 1;
/* #ifndef APP-NVUE */
overflow: auto hidden;
/* #endif */
}
&__nav {
@include flex;
position: relative;
&__item {
padding: 0 11px;
@include flex;
align-items: center;
justify-content: center;
&--disabled {
/* #ifndef APP-NVUE */
cursor: not-allowed;
/* #endif */
}
&__text {
font-size: 14px;
color: #606266;
white-space: nowrap !important;
&--disabled {
color: #c8c9cc !important;
}
}
}
&__line {
height: 3px;
background: #3c9cff;
width: 30px;
position: absolute;
bottom: 2px;
border-radius: 100px;
transition-property: transform;
transition-duration: 300ms;
}
}
}
}
</style>

BIN
static/order-empty.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB