fix
This commit is contained in:
parent
6f0d928fb2
commit
4f7b20b257
|
@ -17,18 +17,21 @@
|
||||||
|
|
||||||
<view class="statistic ss-m-t-24">
|
<view class="statistic ss-m-t-24">
|
||||||
<view class="title ss-font-24 ss-m-b-20">
|
<view class="title ss-font-24 ss-m-b-20">
|
||||||
{{ `今日收款金额(成功收款${state.statistic?.todayPaymentCount || 0}笔)` }}
|
{{ `今日收款金额` }}
|
||||||
</view>
|
</view>
|
||||||
<view class="income flex justify-between align-center">
|
<view class="income flex justify-between align-center">
|
||||||
<view class="left flex align-center">
|
<view class="left flex align-center">
|
||||||
<view class="unit self-start">¥</view>
|
<view class="unit self-start">¥</view>
|
||||||
<view class="sincome ss-font-60">{{ fen2yuan(state.statistic.todayPaymentAmount || 0) }}</view>
|
<view class="sincome ss-font-60">{{ fen2yuan(state.statistic.todaySales || 0) }}</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- <button class="right-btn ss-reset-button">查看详情</button> -->
|
<!-- <button class="right-btn ss-reset-button">查看详情</button> -->
|
||||||
</view>
|
</view>
|
||||||
<view class="des ss-m-t-20">
|
<view class="des ss-m-t-20">
|
||||||
总销售额 {{ fen2yuan(state.statistic.totalSalesAmount) }} 元 | 成功退款 {{ state.statistic.refundCount }} 笔 |
|
总订单数 {{ state.statistic.total }} 笔 | 已完成订单 {{ state.statistic.countCompleted }} 笔 | 总付款额
|
||||||
退款金额 {{ fen2yuan(state.statistic.refundAmount) }} 元
|
{{ fen2yuan(state.statistic.totalPayPrice) }} 元
|
||||||
|
</view>
|
||||||
|
<view class="des ss-m-t-20">
|
||||||
|
取消订单 {{ state.statistic.countCanceled }} 笔 | 退款金额 {{ fen2yuan(state.statistic.totalRefundPrice) }} 元
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
@ -37,13 +40,13 @@
|
||||||
<view class="items">
|
<view class="items">
|
||||||
<view class="item" v-for="(item, index) in state.now" :key="item.name">
|
<view class="item" v-for="(item, index) in state.now" :key="item.name">
|
||||||
<view class="label">{{ item.name }}</view>
|
<view class="label">{{ item.name }}</view>
|
||||||
<view class="value">{{ index !== 0 ? item.value : fen2yuan(item.value) }}</view>
|
<view class="value">{{ index.name?.includes('金额') ? fen2yuan(item.value) : item.value }}</view>
|
||||||
<!-- <view class="last"> 昨日 {{ index === 0 ? fen2yuan(item.last) : item.last ? item.last : 0 }} </view> -->
|
<!-- <view class="last"> 昨日 {{ index === 0 ? fen2yuan(item.last) : item.last ? item.last : 0 }} </view> -->
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="more ss-m-t-40">
|
<view class="more ss-m-t-40" style="margin-bottom: 40rpx">
|
||||||
<view class="title ss-m-b-30">昨日数据</view>
|
<view class="title ss-m-b-30">昨日数据</view>
|
||||||
<view class="items">
|
<view class="items">
|
||||||
<view class="item" v-for="(item, index) in state.yesterday" :key="item.name">
|
<view class="item" v-for="(item, index) in state.yesterday" :key="item.name">
|
||||||
|
@ -75,43 +78,59 @@ const bgStyle = {
|
||||||
|
|
||||||
const state = ref({
|
const state = ref({
|
||||||
statistic: {
|
statistic: {
|
||||||
todayPaymentCount: 0,
|
todaySales: 0,
|
||||||
todayPaymentAmount: 0,
|
countCompleted: 0, // 总完成订单笔数
|
||||||
totalSalesAmount: 0,
|
total: 0, // 总订单
|
||||||
refundCount: 0,
|
totalPayPrice: 0, // 总付款额
|
||||||
refundAmount: 0,
|
countCanceled: 0, // 总取消订单
|
||||||
|
totalRefundPrice: 0, // 总退款金额
|
||||||
},
|
},
|
||||||
now: [
|
now: [
|
||||||
{
|
{
|
||||||
name: '销售金额',
|
name: '销售金额',
|
||||||
key: 'Amount',
|
key: 'todaySales',
|
||||||
value: 0,
|
value: 0,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '订单数',
|
name: '订单数',
|
||||||
key: 'orderCount',
|
key: 'todayOrders',
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '待支付订单',
|
||||||
|
key: 'countPayTodo',
|
||||||
value: 0,
|
value: 0,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '待核销',
|
name: '待核销',
|
||||||
key: 'verificationOrderCount',
|
key: 'countTodoUnverified',
|
||||||
value: 0,
|
value: 0,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '待配送',
|
name: '待配送',
|
||||||
key: 'deliveryOrderCount',
|
key: 'countTodoWaitingDelivery',
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '退款笔数',
|
||||||
|
key: 'todayRefunds',
|
||||||
value: 0,
|
value: 0,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
yesterday: [
|
yesterday: [
|
||||||
{
|
{
|
||||||
name: '销售金额',
|
name: '销售金额',
|
||||||
key: 'Amount',
|
key: 'yesterdaySales',
|
||||||
value: 0,
|
value: 0,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '订单数',
|
name: '订单数',
|
||||||
key: 'orderCount',
|
key: 'yesterdayOrders',
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '退款金额',
|
||||||
|
key: 'yesterdayRefunds',
|
||||||
value: 0,
|
value: 0,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
@ -129,12 +148,13 @@ async function getStatistic() {
|
||||||
state.value.statistic[key] = res.data[key]
|
state.value.statistic[key] = res.data[key]
|
||||||
}
|
}
|
||||||
|
|
||||||
state.value.now[0].value = res.data.todayPaymentAmount ?? 0
|
for (let obj of state.value.now) {
|
||||||
state.value.yesterday[0].value = res.data.yesterdaySalesAmount ?? 0
|
obj.value = res.data[obj.key] ?? 0
|
||||||
state.value.now[1].value = res.data.orderCount
|
}
|
||||||
state.value.yesterday[1].value = res.data.yesterdayOrderCount
|
|
||||||
state.value.now[2].value = res.data.verificationOrderCount
|
for (let obj of state.value.yesterday) {
|
||||||
state.value.now[3].value = res.data.deliveryOrderCount
|
obj.value = res.data[obj.key] ?? 0
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -200,7 +220,7 @@ onShow(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.statistic {
|
.statistic {
|
||||||
height: 200rpx;
|
// height: 200rpx;
|
||||||
background-color: #fffefe;
|
background-color: #fffefe;
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
border-radius: 26rpx;
|
border-radius: 26rpx;
|
||||||
|
|
|
@ -9,7 +9,21 @@
|
||||||
:leftIcon="''"
|
:leftIcon="''"
|
||||||
>
|
>
|
||||||
<pb-sticky bgColor="#fff">
|
<pb-sticky bgColor="#fff">
|
||||||
<pb-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab" />
|
<pb-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab">
|
||||||
|
<template #right>
|
||||||
|
<uni-icons
|
||||||
|
type="search"
|
||||||
|
size="20"
|
||||||
|
:color="state.searchStatus ? '#ff3000' : '#000'"
|
||||||
|
:style="{
|
||||||
|
position: 'relative',
|
||||||
|
top: '2px',
|
||||||
|
'margin-right': '20rpx',
|
||||||
|
}"
|
||||||
|
@click="onSearch"
|
||||||
|
></uni-icons>
|
||||||
|
</template>
|
||||||
|
</pb-tabs>
|
||||||
</pb-sticky>
|
</pb-sticky>
|
||||||
<p-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单" bgColor="transparent" />
|
<p-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单" bgColor="transparent" />
|
||||||
<view v-if="state.pagination.total > 0">
|
<view v-if="state.pagination.total > 0">
|
||||||
|
@ -25,6 +39,11 @@
|
||||||
{{ formatOrderStatus(order) }}
|
{{ formatOrderStatus(order) }}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="ss-p-x-20">
|
||||||
|
<view class="order-no">收货人:{{ order?.user.nickname }}</view>
|
||||||
|
<view class="order-no">联系电话:{{ order?.user.mobile }}</view>
|
||||||
|
<view class="order-no">下单时间:{{ formatDate(order.createTime) }}</view>
|
||||||
|
</view>
|
||||||
<view class="border-bottom" v-for="item in order.items" :key="item.id">
|
<view class="border-bottom" v-for="item in order.items" :key="item.id">
|
||||||
<p-goods-item
|
<p-goods-item
|
||||||
:img="item.picUrl"
|
:img="item.picUrl"
|
||||||
|
@ -112,6 +131,29 @@
|
||||||
:status="state.loadStatus"
|
:status="state.loadStatus"
|
||||||
:content-text="{ contentdown: '上拉加载更多' }"
|
:content-text="{ contentdown: '上拉加载更多' }"
|
||||||
/>
|
/>
|
||||||
|
<uni-popup type="right" ref="filterPopupRef" background-color="#fff">
|
||||||
|
<view class="query-form">
|
||||||
|
<uni-forms v-model="state.queryForm">
|
||||||
|
<uni-forms-item name="userNickname" label="昵称">
|
||||||
|
<uni-easyinput type="text" v-model="state.queryForm.userNickname" placeholder="请输入昵称" clearable />
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="联系电话" name="userMobile">
|
||||||
|
<uni-easyinput type="number" v-model="state.queryForm.userMobile" placeholder="请输入联系电话" />
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item name="no" label="订单号">
|
||||||
|
<uni-easyinput type="text" v-model="state.queryForm.no" placeholder="请输入订单号" clearable />
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item name="createTime" label="创建时间">
|
||||||
|
<uni-datetime-picker v-model="state.queryForm.createTime" type="daterange" />
|
||||||
|
</uni-forms-item>
|
||||||
|
</uni-forms>
|
||||||
|
|
||||||
|
<view class="btns">
|
||||||
|
<button class="ss-reset-button query-btn shadow" @tap="onSubmit">查询</button>
|
||||||
|
<button class="ss-reset-button reset-btn shadow" @tap="reset">重置</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
</pb-layout>
|
</pb-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -122,7 +164,7 @@ import { onLoad, onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-
|
||||||
import { fen2yuan, formatOrderColor, formatOrderStatus, handleOrderButtons } from '@/peach/hooks/useGoods'
|
import { fen2yuan, formatOrderColor, formatOrderStatus, handleOrderButtons } from '@/peach/hooks/useGoods'
|
||||||
import peach from '@/peach'
|
import peach from '@/peach'
|
||||||
import _, { isEmpty } from 'lodash'
|
import _, { isEmpty } from 'lodash'
|
||||||
import { resetPagination } from '@/peach/utils'
|
import { resetPagination, formatDate } from '@/peach/utils'
|
||||||
|
|
||||||
const bgStyle = {
|
const bgStyle = {
|
||||||
backgroundColor: 'var(--ui-BG-1)',
|
backgroundColor: 'var(--ui-BG-1)',
|
||||||
|
@ -138,8 +180,17 @@ const state = ref({
|
||||||
pageSize: 6,
|
pageSize: 6,
|
||||||
},
|
},
|
||||||
loadStatus: '',
|
loadStatus: '',
|
||||||
|
queryForm: {
|
||||||
|
userNickname: '',
|
||||||
|
userMobile: '',
|
||||||
|
no: '',
|
||||||
|
createTime: [],
|
||||||
|
},
|
||||||
|
searchStatus: false,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const filterPopupRef = ref(null)
|
||||||
|
|
||||||
const tabMaps = [
|
const tabMaps = [
|
||||||
{
|
{
|
||||||
name: '全部',
|
name: '全部',
|
||||||
|
@ -192,6 +243,34 @@ function totalPricePerOrder(order) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onSearch() {
|
||||||
|
filterPopupRef.value.open()
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSubmit() {
|
||||||
|
state.value.pagination.list = []
|
||||||
|
filterPopupRef.value.close()
|
||||||
|
state.value.searchStatus = true
|
||||||
|
getOrderList()
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetFields() {
|
||||||
|
state.value.queryForm = {
|
||||||
|
userNickname: '',
|
||||||
|
userMobile: '',
|
||||||
|
no: '',
|
||||||
|
createTime: [],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function reset() {
|
||||||
|
state.value.pagination.list = []
|
||||||
|
state.value.searchStatus = false
|
||||||
|
filterPopupRef.value.close()
|
||||||
|
resetFields()
|
||||||
|
getOrderList()
|
||||||
|
}
|
||||||
|
|
||||||
// 切换选项卡
|
// 切换选项卡
|
||||||
function onTabsChange(e) {
|
function onTabsChange(e) {
|
||||||
if (state.value.currentTab === e.index) {
|
if (state.value.currentTab === e.index) {
|
||||||
|
@ -224,6 +303,7 @@ async function getOrderList() {
|
||||||
? false
|
? false
|
||||||
: true
|
: true
|
||||||
: undefined,
|
: undefined,
|
||||||
|
...state.value.queryForm,
|
||||||
})
|
})
|
||||||
|
|
||||||
data.list.forEach((item) => {
|
data.list.forEach((item) => {
|
||||||
|
@ -263,6 +343,8 @@ onReachBottom(() => {
|
||||||
// 下拉刷新
|
// 下拉刷新
|
||||||
onPullDownRefresh(() => {
|
onPullDownRefresh(() => {
|
||||||
resetPagination(state.value.pagination)
|
resetPagination(state.value.pagination)
|
||||||
|
state.value.searchStatus = false
|
||||||
|
resetFields()
|
||||||
getOrderList()
|
getOrderList()
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
uni.stopPullDownRefresh()
|
uni.stopPullDownRefresh()
|
||||||
|
@ -311,8 +393,7 @@ onPullDownRefresh(() => {
|
||||||
|
|
||||||
.order-list-card-box {
|
.order-list-card-box {
|
||||||
.order-card-header {
|
.order-card-header {
|
||||||
height: 80rpx;
|
padding-top: 20rpx;
|
||||||
|
|
||||||
.order-no {
|
.order-no {
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
@ -370,6 +451,29 @@ onPullDownRefresh(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.query-form {
|
||||||
|
width: 600rpx;
|
||||||
|
margin-top: 230rpx;
|
||||||
|
padding: 0 20rpx;
|
||||||
|
.btns {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
.query-btn {
|
||||||
|
flex: 1;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
.reset-btn {
|
||||||
|
flex: 1;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
border: 1px solid #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
:deep(.uni-tooltip-popup) {
|
:deep(.uni-tooltip-popup) {
|
||||||
background: var(--ui-BG);
|
background: var(--ui-BG);
|
||||||
}
|
}
|
||||||
|
|
|
@ -364,8 +364,9 @@ function getProduct(id) {
|
||||||
richValues.value = res.data.description ? res.data.description + '<p><br/></p>' : ''
|
richValues.value = res.data.description ? res.data.description + '<p><br/></p>' : ''
|
||||||
|
|
||||||
// 循环遍历 categoryList,从二级分类找出和 formData.value.categoryId 相等的
|
// 循环遍历 categoryList,从二级分类找出和 formData.value.categoryId 相等的
|
||||||
|
|
||||||
let tempCategory = categoryList.value.find((item) => {
|
let tempCategory = categoryList.value.find((item) => {
|
||||||
return item.children.find((child) => {
|
return item.children?.find((child) => {
|
||||||
return child.id === formData.value.categoryId
|
return child.id === formData.value.categoryId
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
@ -378,6 +379,7 @@ function getProduct(id) {
|
||||||
}).name
|
}).name
|
||||||
|
|
||||||
// 循环遍历 brandList, 从一级分类找出和 formData.value.brandId 相等的
|
// 循环遍历 brandList, 从一级分类找出和 formData.value.brandId 相等的
|
||||||
|
|
||||||
let tempBrand = brandList.value.find((item) => {
|
let tempBrand = brandList.value.find((item) => {
|
||||||
return item.id === formData.value.brandId
|
return item.id === formData.value.brandId
|
||||||
})
|
})
|
||||||
|
|
|
@ -135,7 +135,7 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { onLoad } from '@dcloudio/uni-app'
|
import { onLoad } from '@dcloudio/uni-app'
|
||||||
import sheep from '@/peach'
|
import peach from '@/peach'
|
||||||
import $store from '@/peach/store'
|
import $store from '@/peach/store'
|
||||||
import UserApi from '@/peach/api/member/user'
|
import UserApi from '@/peach/api/member/user'
|
||||||
import { mobile, idCard, bankName, bankCode } from '@/peach/validate/form'
|
import { mobile, idCard, bankName, bankCode } from '@/peach/validate/form'
|
||||||
|
@ -292,7 +292,7 @@ const rules = {
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2
|
const statusBarHeight = peach.$platform.device.statusBarHeight * 2
|
||||||
|
|
||||||
const timeSlotRef = ref(null)
|
const timeSlotRef = ref(null)
|
||||||
const formRef = ref(null)
|
const formRef = ref(null)
|
||||||
|
|
|
@ -56,6 +56,10 @@ const UserUtil = {
|
||||||
url: '/shop/particulars/update',
|
url: '/shop/particulars/update',
|
||||||
method: 'PUT',
|
method: 'PUT',
|
||||||
data,
|
data,
|
||||||
|
custom: {
|
||||||
|
successMsg: '修改成功',
|
||||||
|
auth: true,
|
||||||
|
},
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -1,49 +1,66 @@
|
||||||
import request from '@/peach/request'
|
import request from '@/peach/request'
|
||||||
|
|
||||||
const OrderUtil = {
|
const OrderUtil = {
|
||||||
// 获取订单列表
|
// 获取订单列表
|
||||||
getOrderPage: (data) => {
|
getOrderPage: (data) => {
|
||||||
return request({
|
for (let key in data) {
|
||||||
url: '/trade/order/page',
|
if (!data[key]) {
|
||||||
method: 'GET',
|
delete data[key]
|
||||||
params: data,
|
}
|
||||||
})
|
}
|
||||||
},
|
|
||||||
|
|
||||||
// 订单详情
|
let temp = JSON.parse(JSON.stringify(data))
|
||||||
getOrderDetail: (data) => {
|
|
||||||
return request({
|
|
||||||
url: '/trade/order/get-detail',
|
|
||||||
method: 'GET',
|
|
||||||
params: data,
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
// 商品核销
|
if (temp.createTime.length > 0) {
|
||||||
orderVerification: (data) => {
|
temp['createTime[0]'] = data.createTime[0] + ' 00:00:00'
|
||||||
return request({
|
temp['createTime[1]'] = data.createTime[1] + ' 00:00:00'
|
||||||
url: '/trade/order/verify-code',
|
}
|
||||||
method: 'POST',
|
delete temp.createTime
|
||||||
data: data,
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
// 完成订单
|
const queryString = Object.keys(temp)
|
||||||
orderComplete: (data) => {
|
.map((key) => encodeURIComponent(key) + '=' + temp[key])
|
||||||
return request({
|
.join('&')
|
||||||
url: '/trade/order/completed-order',
|
|
||||||
method: 'POST',
|
|
||||||
data: data,
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
// 订单商品评论
|
return request({
|
||||||
orderComment: (id) => {
|
url: `/trade/order/page?${queryString}`,
|
||||||
return request({
|
method: 'GET',
|
||||||
url: '/product/comment/get-by-order-id/' + id,
|
})
|
||||||
method: 'GET',
|
},
|
||||||
})
|
|
||||||
},
|
// 订单详情
|
||||||
|
getOrderDetail: (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/trade/order/get-detail',
|
||||||
|
method: 'GET',
|
||||||
|
params: data,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 商品核销
|
||||||
|
orderVerification: (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/trade/order/verify-code',
|
||||||
|
method: 'POST',
|
||||||
|
data: data,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 完成订单
|
||||||
|
orderComplete: (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/trade/order/completed-order',
|
||||||
|
method: 'POST',
|
||||||
|
data: data,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 订单商品评论
|
||||||
|
orderComment: (id) => {
|
||||||
|
return request({
|
||||||
|
url: '/product/comment/get-by-order-id/' + id,
|
||||||
|
method: 'GET',
|
||||||
|
})
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
export default OrderUtil
|
export default OrderUtil
|
||||||
|
|
|
@ -64,7 +64,7 @@ const http = new Request({
|
||||||
|
|
||||||
http.interceptors.request.use(
|
http.interceptors.request.use(
|
||||||
(config) => {
|
(config) => {
|
||||||
console.log(config)
|
// console.log(config)
|
||||||
// 自定义处理【auth 授权】:必须登录的接口,否则提示登录
|
// 自定义处理【auth 授权】:必须登录的接口,否则提示登录
|
||||||
if (config.custom.auth && !$store('user').isLogin) {
|
if (config.custom.auth && !$store('user').isLogin) {
|
||||||
// 处理登录
|
// 处理登录
|
||||||
|
|
|
@ -1,74 +1,71 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="u-tabs">
|
<view class="u-tabs">
|
||||||
<view class="u-tabs__wrapper">
|
<view class="u-tabs__wrapper">
|
||||||
<slot name="left" />
|
<slot name="left" />
|
||||||
<view class="u-tabs__wrapper__scroll-view-wrapper">
|
<view class="u-tabs__wrapper__scroll-view-wrapper">
|
||||||
<scroll-view
|
<scroll-view
|
||||||
:scroll-x="scrollable"
|
:scroll-x="scrollable"
|
||||||
:scroll-left="scrollLeft"
|
:scroll-left="scrollLeft"
|
||||||
scroll-with-animation
|
scroll-with-animation
|
||||||
enable-flex
|
enable-flex
|
||||||
class="u-tabs__wrapper__scroll-view white-space"
|
class="u-tabs__wrapper__scroll-view white-space"
|
||||||
:show-scrollbar="false"
|
:show-scrollbar="false"
|
||||||
ref="u-tabs__wrapper__scroll-view"
|
ref="u-tabs__wrapper__scroll-view"
|
||||||
>
|
>
|
||||||
<view class="u-tabs__wrapper__nav" ref="u-tabs__wrapper__nav">
|
<view class="u-tabs__wrapper__nav" ref="u-tabs__wrapper__nav">
|
||||||
<view
|
<view
|
||||||
class="u-tabs__wrapper__nav__item"
|
class="u-tabs__wrapper__nav__item"
|
||||||
v-for="(item, index) in list"
|
v-for="(item, index) in list"
|
||||||
:key="index"
|
:key="index"
|
||||||
@tap="clickHandler(item, index)"
|
@tap="clickHandler(item, index)"
|
||||||
:ref="`u-tabs__wrapper__nav__item-${index}`"
|
:ref="`u-tabs__wrapper__nav__item-${index}`"
|
||||||
:style="[addStyle(itemStyle), { flex: scrollable ? '' : 1 }]"
|
:style="[addStyle(itemStyle), { flex: scrollable ? '' : 1 }]"
|
||||||
:class="[
|
:class="[`u-tabs__wrapper__nav__item-${index}`, item.disabled && 'u-tabs__wrapper__nav__item--disabled']"
|
||||||
`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"
|
||||||
<text
|
:style="[textStyle(index)]"
|
||||||
:class="[item.disabled && 'u-tabs__wrapper__nav__item__text--disabled']"
|
>{{ item[keyName] }}</text
|
||||||
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>
|
</view>
|
||||||
<slot name="right" />
|
<!-- #ifdef APP-NVUE -->
|
||||||
</view>
|
<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>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -90,343 +87,341 @@ const dom = uni.requireNativePlugin('dom')
|
||||||
* @example <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
|
* @example <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
|
||||||
*/
|
*/
|
||||||
export default {
|
export default {
|
||||||
name: 'pb-tabs',
|
name: 'pb-tabs',
|
||||||
data() {
|
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 {
|
return {
|
||||||
addStyle,
|
color: '#303133',
|
||||||
addUnit,
|
|
||||||
firstTime: true,
|
|
||||||
scrollLeft: 0,
|
|
||||||
scrollViewWidth: 0,
|
|
||||||
lineOffsetLeft: 0,
|
|
||||||
tabsRect: {
|
|
||||||
left: 0,
|
|
||||||
},
|
|
||||||
innerCurrent: 0,
|
|
||||||
moving: false,
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
props: {
|
// 菜单非选中时的样式
|
||||||
// 滑块的移动过渡时间,单位ms
|
inactiveStyle: {
|
||||||
duration: {
|
type: [String, Object],
|
||||||
type: Number,
|
default() {
|
||||||
default: 300,
|
return {
|
||||||
},
|
color: '#606266',
|
||||||
// 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: {
|
lineWidth: {
|
||||||
immediate: true,
|
type: [String, Number],
|
||||||
handler(newValue, oldValue) {
|
default: 20,
|
||||||
// 内外部值不相等时,才尝试移动滑块
|
|
||||||
if (newValue !== this.innerCurrent) {
|
|
||||||
this.innerCurrent = newValue
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.resize()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// list变化时,重新渲染list各项信息
|
|
||||||
list() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.resize()
|
|
||||||
})
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
computed: {
|
// 滑块高度
|
||||||
textStyle() {
|
lineHeight: {
|
||||||
return (index) => {
|
type: [String, Number],
|
||||||
const style = {}
|
default: 3,
|
||||||
// 取当期是否激活的样式
|
|
||||||
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()
|
lineBgSize: {
|
||||||
|
type: String,
|
||||||
|
default: 'cover',
|
||||||
},
|
},
|
||||||
methods: {
|
// 菜单item的样式
|
||||||
$uGetRect(selector, all) {
|
itemStyle: {
|
||||||
return new Promise((resolve) => {
|
type: [String, Object],
|
||||||
uni.createSelectorQuery()
|
default() {
|
||||||
.in(this)
|
return {
|
||||||
[all ? 'selectAll' : 'select'](selector)
|
height: '44px',
|
||||||
.boundingClientRect((rect) => {
|
}
|
||||||
if (all && Array.isArray(rect) && rect.length) {
|
},
|
||||||
resolve(rect)
|
},
|
||||||
}
|
// 菜单是否可滚动
|
||||||
if (!all && rect) {
|
scrollable: {
|
||||||
resolve(rect)
|
type: Boolean,
|
||||||
}
|
default: true,
|
||||||
})
|
},
|
||||||
.exec()
|
// 当前选中标签的索引
|
||||||
})
|
current: {
|
||||||
},
|
type: [Number, String],
|
||||||
setLineLeft() {
|
default: 0,
|
||||||
const tabItem = this.list[this.innerCurrent]
|
},
|
||||||
if (!tabItem) {
|
// 默认读取的键名
|
||||||
return
|
keyName: {
|
||||||
}
|
type: String,
|
||||||
// 获取滑块该移动的位置
|
default: 'name',
|
||||||
let lineOffsetLeft = this.list
|
},
|
||||||
.slice(0, this.innerCurrent)
|
},
|
||||||
.reduce((total, curr) => total + curr.rect.width, 0)
|
watch: {
|
||||||
// 获取下划线的数值px表示法
|
current: {
|
||||||
const lineWidth = getPx(this.lineWidth)
|
immediate: true,
|
||||||
this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2
|
handler(newValue, oldValue) {
|
||||||
// #ifdef APP-NVUE
|
// 内外部值不相等时,才尝试移动滑块
|
||||||
// 第一次移动滑块,无需过渡时间
|
if (newValue !== this.innerCurrent) {
|
||||||
this.animation(this.lineOffsetLeft, this.firstTime ? 0 : parseInt(this.duration))
|
this.innerCurrent = newValue
|
||||||
// #endif
|
this.$nextTick(() => {
|
||||||
|
|
||||||
// 如果是第一次执行此方法,让滑块在初始化时,瞬间滑动到第一个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.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
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
// 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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.u-tabs {
|
.u-tabs {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-bottom: 2rpx solid #eee;
|
border-bottom: 2rpx solid #eee;
|
||||||
|
|
||||||
&__wrapper {
|
&__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;
|
@include flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
&__scroll-view-wrapper {
|
&--disabled {
|
||||||
flex: 1;
|
/* #ifndef APP-NVUE */
|
||||||
/* #ifndef APP-NVUE */
|
cursor: not-allowed;
|
||||||
overflow: auto hidden;
|
/* #endif */
|
||||||
/* #endif */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__nav {
|
&__text {
|
||||||
@include flex;
|
font-size: 14px;
|
||||||
position: relative;
|
color: #606266;
|
||||||
|
white-space: nowrap !important;
|
||||||
|
|
||||||
&__item {
|
&--disabled {
|
||||||
padding: 0 11px;
|
color: #c8c9cc !important;
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__line {
|
||||||
|
height: 3px;
|
||||||
|
background: #3c9cff;
|
||||||
|
width: 30px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 2px;
|
||||||
|
border-radius: 100px;
|
||||||
|
transition-property: transform;
|
||||||
|
transition-duration: 300ms;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue