feat(訂單)
This commit is contained in:
Ankkaya
parent
78d6d7df1f
commit
dd8edc28fc
11
pages.json
11
pages.json
|
|
@ -8,6 +8,15 @@
|
|||
},
|
||||
"pages": [
|
||||
//pages数组中第一项表示应用启动页，参考：https://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"
|
||||
|
|
|
|||
|
|
@ -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.vue的show方法中拿到确认收货结果
|
||||
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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
// 吸顶容器到顶部某个距离的时候，进行吸顶，在H5平台，NavigationBar为44px
|
||||
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, // 是否使用css的sticky实现
|
||||
stickyTop: 0, // 吸顶的top值，因为可能受自定义导航栏影响，最终的吸顶值非offsetTop值
|
||||
elId: guid(),
|
||||
left: 0, // js模式时，吸顶的内容因为处于postition: fixed模式，为了和原来保持一致的样式，需要记录并重新设置它的left，height，width属性
|
||||
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)和非nvue的static静态模式即可
|
||||
// #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，则使用js方案，此方案性能比不上css方案
|
||||
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
|
||||
// H5，一般都是现代浏览器，是支持css sticky的，这里使用创建元素嗅探的形式判断
|
||||
if (this.checkCssStickyForH5()) {
|
||||
this.cssSticky = true
|
||||
}
|
||||
// #endif
|
||||
|
||||
// 如果安卓版本高于8.0，依然认为是支持css sticky的(因为安卓7在某些机型，可能不支持sticky)
|
||||
if (os() === 'android' && Number(sys().system) > 8) {
|
||||
this.cssSticky = true
|
||||
}
|
||||
|
||||
// APP-Vue和微信平台，通过computedStyle判断是否支持css sticky
|
||||
// #ifdef APP-VUE || MP-WEIXIN
|
||||
this.cssSticky = await this.checkComputedStyle()
|
||||
// #endif
|
||||
|
||||
// ios上，从ios6开始，都是支持css sticky的
|
||||
if (os() === 'ios') {
|
||||
this.cssSticky = true
|
||||
}
|
||||
|
||||
// nvue，是支持css sticky的
|
||||
// #ifdef APP-NVUE
|
||||
this.cssSticky = true
|
||||
// #endif
|
||||
},
|
||||
// 在APP和微信小程序上，通过uni.createSelectorQuery可以判断是否支持css 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
|
||||
},
|
||||
// H5通过创建元素的形式嗅探是否支持css 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 */
|
||||
// 此处默认写sticky属性，是为了给微信和APP通过uni.createSelectorQuery查询是否支持css sticky使用
|
||||
position: sticky;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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()
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
// list变化时，重新渲染list各项信息
|
||||
list() {
|
||||
this.$nextTick(() => {
|
||||
this.resize()
|
||||
})
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
textStyle() {
|
||||
return (index) => {
|
||||
const style = {}
|
||||
// 取当期是否激活的样式
|
||||
const customeStyle =
|
||||
index === this.innerCurrent ? addStyle(this.activeStyle) : addStyle(this.inactiveStyle)
|
||||
// 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!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的中间
|
||||
// 这里需要一个定时器，因为在非nvue下，是直接通过style绑定过渡时间，需要等其过渡完成后，再设置为false(非第一次移动滑块)
|
||||
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) {
|
||||
// 因为标签可能为disabled状态，所以click是一定会发出的，但是change事件是需要可用的状态才发出
|
||||
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() {
|
||||
// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
|
||||
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-item移动到屏幕正中间，实际上是对scroll-view的移动
|
||||
let scrollLeft =
|
||||
offsetLeft -
|
||||
(this.tabsRect.width - tabRect.rect.width) / 2 -
|
||||
(windowWidth - this.tabsRect.right) / 2 +
|
||||
this.tabsRect.left / 2
|
||||
// 这里做一个限制，限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
|
||||
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
|
||||
// 另外计算每一个item的中心点X轴坐标
|
||||
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
|
||||
// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://www.uviewui.com/js/getRect.html
|
||||
// 组件内部一般用this.$uGetRect，对外的为uni.$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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Loading…
Reference in New Issue