feat(订单产品)
This commit is contained in:
parent
94ee2a3d22
commit
b6f8d5a656
104
pages.json
104
pages.json
|
@ -12,7 +12,7 @@
|
|||
"path": "pages/index/redirect"
|
||||
},
|
||||
{
|
||||
"path": "pages/order/list",
|
||||
"path": "pages/index/order",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单"
|
||||
},
|
||||
|
@ -115,54 +115,70 @@
|
|||
}
|
||||
},
|
||||
{
|
||||
"path": "wallet/withdraw",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提现"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true
|
||||
}
|
||||
"path": "wallet/withdraw",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提现"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "point/buy",
|
||||
"style": {
|
||||
"navigationBarTitleText": "购买积分"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true
|
||||
}
|
||||
}, {
|
||||
"path": "point/share",
|
||||
"style": {
|
||||
"navigationBarTitleText": "分发积分"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true
|
||||
}
|
||||
}, {
|
||||
"path": "point/loglist",
|
||||
"style": {
|
||||
"navigationBarTitleText": "历史积分"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true
|
||||
}
|
||||
"path": "point/buy",
|
||||
"style": {
|
||||
"navigationBarTitleText": "购买积分"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "point/share",
|
||||
"style": {
|
||||
"navigationBarTitleText": "分发积分"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "point/loglist",
|
||||
"style": {
|
||||
"navigationBarTitleText": "历史积分"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/product",
|
||||
"pages": [
|
||||
{
|
||||
"path": "manageGoods",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品管理"
|
||||
},
|
||||
"meta": {
|
||||
"auth": false
|
||||
}
|
||||
}
|
||||
]
|
||||
"root": "pages/product",
|
||||
"pages": [
|
||||
{
|
||||
"path": "manageGoods",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品管理"
|
||||
},
|
||||
"meta": {
|
||||
"auth": false
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages/order",
|
||||
"pages": [
|
||||
{
|
||||
"path": "detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单详情"
|
||||
},
|
||||
"meta": {
|
||||
"auth": true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"tabBar": {
|
||||
|
@ -174,7 +190,7 @@
|
|||
"pagePath": "pages/index/product"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/order/list"
|
||||
"pagePath": "pages/index/order"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/index/my"
|
||||
|
|
|
@ -0,0 +1,372 @@
|
|||
<template>
|
||||
<pb-layout
|
||||
title="订单"
|
||||
navbar="normal"
|
||||
tabbar="/pages/index/order"
|
||||
:bgStyle="bgStyle"
|
||||
opacityBgUi="bg-white"
|
||||
color="black"
|
||||
>
|
||||
<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="暂无订单"
|
||||
bgColor="transparent"
|
||||
/>
|
||||
<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.id"
|
||||
>
|
||||
<view @tap="onOrderDetail(order.id)">
|
||||
<view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
|
||||
<view class="order-no">订单号:{{ order.no }}</view>
|
||||
<view class="order-state ss-font-26" :class="formatOrderColor(order)">
|
||||
{{ formatOrderStatus(order) }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="border-bottom" v-for="item in order.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="order.buttons.length > 3 ? 'ss-row-between' : 'ss-row-right'"
|
||||
>
|
||||
<view class="ss-flex ss-col-center">
|
||||
<button
|
||||
v-if="order.buttons.length === 0"
|
||||
class="tool-btn ss-reset-button"
|
||||
@tap.stop="onOrderDetail(order.id)"
|
||||
>
|
||||
查看详情
|
||||
</button>
|
||||
<button
|
||||
v-if="order.buttons.includes('confirm')"
|
||||
class="tool-btn ss-reset-button"
|
||||
@tap.stop="onConfirm(order)"
|
||||
>
|
||||
确认收货
|
||||
</button>
|
||||
<button
|
||||
v-if="order.buttons.includes('express')"
|
||||
class="tool-btn ss-reset-button"
|
||||
@tap.stop="onExpress(order.id)"
|
||||
>
|
||||
查看物流
|
||||
</button>
|
||||
<button
|
||||
v-if="order.buttons.includes('cancel')"
|
||||
class="tool-btn ss-reset-button"
|
||||
@tap.stop="onCancel(order.id, sindex)"
|
||||
>
|
||||
取消订单
|
||||
</button>
|
||||
<button
|
||||
v-if="order.buttons.includes('comment')"
|
||||
class="tool-btn ss-reset-button"
|
||||
@tap.stop="onComment(order.id)"
|
||||
>
|
||||
评价
|
||||
</button>
|
||||
<button
|
||||
v-if="order.buttons.includes('delete')"
|
||||
class="delete-btn ss-reset-button"
|
||||
@tap.stop="onDelete(order.id)"
|
||||
>
|
||||
删除订单
|
||||
</button>
|
||||
<button
|
||||
v-if="order.buttons.includes('verification')"
|
||||
class="tool-btn ss-reset-button ui-BG-Main-Gradient"
|
||||
@tap.stop="onVerification(order.id)"
|
||||
>
|
||||
核销订单
|
||||
</button>
|
||||
<button
|
||||
v-if="order.buttons.includes('delivery')"
|
||||
class="tool-btn ss-reset-button ui-BG-Main-Gradient"
|
||||
@tap.stop="onDelivery(order.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 OrderApi from '@/peach/api/trade/order'
|
||||
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/utils'
|
||||
|
||||
const bgStyle = {
|
||||
backgroundColor: 'var(--ui-BG-1)',
|
||||
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.items.length) {
|
||||
return order.items.reduce((per, cur) => {
|
||||
return per + cur.count
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
|
||||
// 单个订单总金额
|
||||
function totalPricePerOrder(order) {
|
||||
if (order.items.length) {
|
||||
return order.items.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,
|
||||
})
|
||||
}
|
||||
|
||||
// 获取订单列表
|
||||
async function getOrderList() {
|
||||
state.value.loadStatus = 'loading'
|
||||
let { data } = await OrderApi.getOrderPage({
|
||||
pageNo: state.value.pagination.pageNo,
|
||||
pageSize: state.value.pagination.pageSize,
|
||||
status: tabMaps[state.value.currentTab].value,
|
||||
})
|
||||
|
||||
data.list.forEach((item) => {
|
||||
handleOrderButtons(item)
|
||||
})
|
||||
state.value.pagination.list = _.concat(state.value.pagination.list, data.list)
|
||||
console.log(state.value.pagination.list)
|
||||
state.value.pagination.total = data.total
|
||||
let currentPageTotal = state.value.pagination.length
|
||||
state.value.loadStatus = currentPageTotal < state.value.pagination.total ? 'more' : 'noMore'
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tool-btn {
|
||||
width: 160rpx;
|
||||
height: 60rpx;
|
||||
background: #f6f6f6;
|
||||
font-size: 26rpx;
|
||||
border-radius: 30rpx;
|
||||
margin-right: 10rpx;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
width: 160rpx;
|
||||
height: 56rpx;
|
||||
color: #ff3000;
|
||||
background: #fee;
|
||||
border-radius: 28rpx;
|
||||
font-size: 26rpx;
|
||||
margin-right: 10rpx;
|
||||
line-height: normal;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.apply-btn {
|
||||
width: 140rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 25rpx;
|
||||
font-size: 24rpx;
|
||||
border: 2rpx solid #dcdcdc;
|
||||
line-height: normal;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.order-list-card-box {
|
||||
.order-card-header {
|
||||
height: 80rpx;
|
||||
|
||||
.order-no {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.order-state {
|
||||
}
|
||||
}
|
||||
|
||||
.pay-box {
|
||||
.discounts-title {
|
||||
font-size: 24rpx;
|
||||
line-height: normal;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.discounts-money {
|
||||
font-size: 24rpx;
|
||||
line-height: normal;
|
||||
color: #999;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
|
||||
.pay-color {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.order-card-footer {
|
||||
height: 100rpx;
|
||||
|
||||
.more-item-box {
|
||||
padding: 20rpx;
|
||||
|
||||
.more-item {
|
||||
height: 60rpx;
|
||||
|
||||
.title {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
color: $dark-9;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 154rpx;
|
||||
color: #333333;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.uni-tooltip-popup) {
|
||||
background: var(--ui-BG);
|
||||
}
|
||||
|
||||
.warning-color {
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
.danger-color {
|
||||
color: #ff3000;
|
||||
}
|
||||
|
||||
.success-color {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
.info-color {
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
|
@ -1,85 +1,213 @@
|
|||
<template>
|
||||
<pb-layout class="product-list" title="产品" navbar="normal" tabbar="/pages/index/product" :bgStyle="bgStyle"
|
||||
opacityBgUi="bg-white" color="black">
|
||||
<view v-if="state.pagination.total > 0" class="goods-list ss-m-t-20">
|
||||
<view class="ss-p-l-20 ss-p-r-20" v-for="item in state.pagination.list" :key="item.id">
|
||||
<p-goods-column size="lg" :data="item" :topRadius="10" bottomRadius="10"
|
||||
@click="peach.$router.go('/pages/goods/index', { id: item.id })" />
|
||||
</view>
|
||||
</view>
|
||||
<pb-layout
|
||||
class="product-list"
|
||||
title="产品"
|
||||
navbar="normal"
|
||||
tabbar="/pages/index/product"
|
||||
:bgStyle="bgStyle"
|
||||
opacityBgUi="bg-white"
|
||||
color="black"
|
||||
>
|
||||
<view v-if="state.pagination.total > 0" class="goods-list ss-m-t-20">
|
||||
<view class="ss-p-l-20 ss-p-r-20 ss-m-b-20" v-for="item in state.pagination.list" :key="item.id">
|
||||
<p-goods-column
|
||||
size="lg"
|
||||
:data="item"
|
||||
:topRadius="10"
|
||||
:bottomRadius="10"
|
||||
@click="peach.$router.go('/pages/goods/index', { id: item.id })"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}" @click="loadMore" />
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{
|
||||
contentdown: '上拉加载更多',
|
||||
}"
|
||||
@click="loadMore"
|
||||
/>
|
||||
|
||||
<view class="_icon-add-round add-product" @click="addGoods"></view>
|
||||
<view class="_icon-add-round add-product" @click="addGoods"></view>
|
||||
|
||||
<p-empty v-if="state.pagination.total === 0" icon="/static/soldout-empty.png" text="暂无产品" />
|
||||
</pb-layout>
|
||||
<p-empty
|
||||
v-if="state.pagination.total === 0"
|
||||
icon="/static/soldout-empty.png"
|
||||
text="暂无产品"
|
||||
bgColor="transparent"
|
||||
/>
|
||||
</pb-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
|
||||
import GoodApi from '@/peach/api/trade/goods'
|
||||
import peach from '@/peach'
|
||||
import _ from 'lodash'
|
||||
import { resetPagination } from '@/peach/utils'
|
||||
|
||||
const bgStyle = {
|
||||
backgroundImage: '',
|
||||
backgroundColor: '#fff',
|
||||
description: '',
|
||||
backgroundImage: '',
|
||||
backgroundColor: 'var(--ui-BG-1)',
|
||||
description: '',
|
||||
}
|
||||
|
||||
const state = ref({
|
||||
pagination: {
|
||||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 6,
|
||||
},
|
||||
pagination: {
|
||||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 6,
|
||||
name: '',
|
||||
createTime: [],
|
||||
},
|
||||
loadStatus: '',
|
||||
})
|
||||
|
||||
function emptyList() {
|
||||
resetPagination(state.value.pagination)
|
||||
resetPagination(state.value.pagination)
|
||||
}
|
||||
|
||||
function onSearch() {
|
||||
emptyList()
|
||||
getList()
|
||||
emptyList()
|
||||
getList()
|
||||
}
|
||||
|
||||
function getList() { }
|
||||
async function getList() {
|
||||
let { data } = await GoodApi.getProductList({
|
||||
pageNo: state.value.pagination.pageNo,
|
||||
pageSize: state.value.pagination.pageSize,
|
||||
})
|
||||
|
||||
state.value.pagination.list = _.concat(state.value.pagination.list, data.list)
|
||||
state.value.pagination.total = data.total
|
||||
let currentPageTotal = state.value.pagination.length
|
||||
|
||||
state.value.loadStatus = currentPageTotal < state.value.pagination.total ? 'more' : 'noMore'
|
||||
}
|
||||
|
||||
function addGoods() {
|
||||
peach.$router.go('/pages/product/manageGoods')
|
||||
peach.$router.go('/pages/product/manageGoods')
|
||||
}
|
||||
|
||||
function loadMore() {
|
||||
if (state.value.loadStatus === 'noMore') {
|
||||
return
|
||||
}
|
||||
state.value.pagination.pageNo++
|
||||
getList()
|
||||
if (state.value.loadStatus === 'noMore') {
|
||||
return
|
||||
}
|
||||
state.value.pagination.pageNo++
|
||||
getList()
|
||||
}
|
||||
|
||||
onLoad(async (options) => {
|
||||
getList()
|
||||
getList()
|
||||
})
|
||||
|
||||
onReachBottom(() => {
|
||||
loadMore()
|
||||
loadMore()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.product-list {
|
||||
.add-product {
|
||||
position: fixed;
|
||||
color: var(--ui-BG-Main);
|
||||
bottom: 70px;
|
||||
right: 20px;
|
||||
font-size: 80rpx;
|
||||
}
|
||||
.add-product {
|
||||
position: fixed;
|
||||
color: var(--ui-BG-Main);
|
||||
bottom: 70px;
|
||||
right: 20px;
|
||||
font-size: 80rpx;
|
||||
}
|
||||
|
||||
.goods-list-box {
|
||||
width: 50%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.left-list {
|
||||
margin-right: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.right-list {
|
||||
margin-left: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-box {
|
||||
&:nth-last-of-type(1) {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
&:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list-icon {
|
||||
width: 80rpx;
|
||||
|
||||
.sicon-goods-card {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.sicon-goods-list {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-card {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.list-filter-tabs {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.filter-list-box {
|
||||
padding: 28rpx 52rpx;
|
||||
|
||||
.filter-item {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
line-height: normal;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
&:nth-last-child(1) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-item-active {
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
height: 50px;
|
||||
position: relative;
|
||||
z-index: 11;
|
||||
|
||||
.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: 10rpx;
|
||||
background-color: var(--ui-BG-Main);
|
||||
z-index: 12;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,6 +1,13 @@
|
|||
<!-- 订单详情 -->
|
||||
<template>
|
||||
<s-layout title="订单详情" class="index-wrap" navbar="inner">
|
||||
<pb-layout
|
||||
title="订单详情"
|
||||
class="goods-detail-wrap"
|
||||
navbar="inner"
|
||||
leftIcon="leftIcon"
|
||||
color="#fff"
|
||||
iconColor="#fff"
|
||||
>
|
||||
<!-- 订单状态 -->
|
||||
<view
|
||||
class="state-box ss-flex-col ss-col-center ss-row-right"
|
||||
|
@ -19,25 +26,25 @@
|
|||
state.orderInfo.status_code == 'nocomment'
|
||||
"
|
||||
class="state-img"
|
||||
:src="sheep.$url.static('/static/img/shop/order/order_loading.png')"
|
||||
:src="peach.$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')"
|
||||
:src="peach.$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')"
|
||||
:src="peach.$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')"
|
||||
:src="peach.$url.static('/static/img/shop/order/order_express.png')"
|
||||
>
|
||||
</image>
|
||||
<view class="ss-font-30">{{ formatOrderStatus(state.orderInfo) }}</view>
|
||||
|
@ -46,7 +53,7 @@
|
|||
</view>
|
||||
|
||||
<!-- 收货地址 -->
|
||||
<view class="order-address-box" v-if="state.orderInfo.receiverAreaId > 0">
|
||||
<view class="order-address-box" v-if="state.orderInfo.receiverAreaId">
|
||||
<view class="ss-flex ss-col-center">
|
||||
<text class="address-username">
|
||||
{{ state.orderInfo.receiverName }}
|
||||
|
@ -62,7 +69,7 @@
|
|||
<!-- 订单信 -->
|
||||
<view class="order-list" v-for="item in state.orderInfo.items" :key="item.goods_id">
|
||||
<view class="order-card">
|
||||
<s-goods-item
|
||||
<p-goods-item
|
||||
@tap="onGoodsDetail(item.spuId)"
|
||||
:img="item.picUrl"
|
||||
:title="item.spuName"
|
||||
|
@ -76,7 +83,7 @@
|
|||
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', {
|
||||
peach.$router.go('/pages/order/aftersale/apply', {
|
||||
orderId: state.orderInfo.id,
|
||||
itemId: item.id,
|
||||
})
|
||||
|
@ -88,7 +95,7 @@
|
|||
class="ss-reset-button apply-btn"
|
||||
v-if="item.afterSaleStatus === 10"
|
||||
@tap.stop="
|
||||
sheep.$router.go('/pages/order/aftersale/detail', {
|
||||
peach.$router.go('/pages/order/aftersale/detail', {
|
||||
id: item.afterSaleId,
|
||||
})
|
||||
"
|
||||
|
@ -99,7 +106,7 @@
|
|||
class="ss-reset-button apply-btn"
|
||||
v-if="item.afterSaleStatus === 20"
|
||||
@tap.stop="
|
||||
sheep.$router.go('/pages/order/aftersale/detail', {
|
||||
peach.$router.go('/pages/order/aftersale/detail', {
|
||||
id: item.afterSaleId,
|
||||
})
|
||||
"
|
||||
|
@ -113,7 +120,7 @@
|
|||
{{ item.status_text }}
|
||||
</button>
|
||||
</template>
|
||||
</s-goods-item>
|
||||
</p-goods-item>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
@ -131,13 +138,13 @@
|
|||
<view class="notice-item">
|
||||
<text class="title">下单时间:</text>
|
||||
<text class="detail">
|
||||
{{ sheep.$helper.timeFormat(state.orderInfo.createTime, 'yyyy-mm-dd hh:MM:ss') }}
|
||||
{{ peach.$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') }}
|
||||
{{ peach.$helper.timeFormat(state.orderInfo.payTime, 'yyyy-mm-dd hh:MM:ss') }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="notice-item">
|
||||
|
@ -183,8 +190,8 @@
|
|||
</view>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<!-- TODO: 查看物流、等待成团、评价完后返回页面没刷新页面 -->
|
||||
<su-fixed bottom placeholder bg="bg-white" v-if="state.orderInfo.buttons?.length">
|
||||
|
||||
<pb-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"
|
||||
|
@ -204,7 +211,7 @@
|
|||
class="ss-reset-button cancel-btn"
|
||||
v-if="state.orderInfo.buttons?.includes('combination')"
|
||||
@tap="
|
||||
sheep.$router.go('/pages/activity/groupon/detail', {
|
||||
peach.$router.go('/pages/activity/groupon/detail', {
|
||||
id: state.orderInfo.combinationRecordId,
|
||||
})
|
||||
"
|
||||
|
@ -232,21 +239,34 @@
|
|||
>
|
||||
评价
|
||||
</button>
|
||||
<button
|
||||
v-if="state.orderInfo.buttons.includes('verification')"
|
||||
class="ss-reset-button cancel-btn ui-BG-Main-Gradient"
|
||||
@tap.stop="onVerification(order.id)"
|
||||
>
|
||||
核销订单
|
||||
</button>
|
||||
<button
|
||||
v-if="state.orderInfo.buttons.includes('delivery')"
|
||||
class="ss-reset-button cancel-btn ui-BG-Main-Gradient"
|
||||
@tap.stop="onDelivery(order.id)"
|
||||
>
|
||||
配送完成
|
||||
</button>
|
||||
</view>
|
||||
</su-fixed>
|
||||
</s-layout>
|
||||
</pb-fixed>
|
||||
</pb-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import sheep from '@/sheep'
|
||||
import peach from '@/peach'
|
||||
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'
|
||||
import { fen2yuan, formatOrderStatus, formatOrderStatusDescription, handleOrderButtons } from '@/peach/hooks/useGoods'
|
||||
import OrderApi from '@/peach/api/trade/order'
|
||||
|
||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2
|
||||
const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png')
|
||||
const statusBarHeight = peach.$platform.device.statusBarHeight * 2
|
||||
|
||||
const state = reactive({
|
||||
orderInfo: {},
|
||||
|
@ -256,19 +276,19 @@ const state = reactive({
|
|||
|
||||
// 复制
|
||||
const onCopy = () => {
|
||||
sheep.$helper.copyText(state.orderInfo.sn)
|
||||
peach.$helper.copyText(state.orderInfo.sn)
|
||||
}
|
||||
|
||||
// 去支付
|
||||
function onPay(payOrderId) {
|
||||
sheep.$router.go('/pages/pay/index', {
|
||||
peach.$router.go('/pages/pay/index', {
|
||||
id: payOrderId,
|
||||
})
|
||||
}
|
||||
|
||||
// 查看商品
|
||||
function onGoodsDetail(id) {
|
||||
sheep.$router.go('/pages/goods/index', {
|
||||
peach.$router.go('/pages/goods/index', {
|
||||
id,
|
||||
})
|
||||
}
|
||||
|
@ -292,7 +312,7 @@ async function onCancel(orderId) {
|
|||
|
||||
// 查看物流
|
||||
async function onExpress(id) {
|
||||
sheep.$router.go('/pages/order/express/log', {
|
||||
peach.$router.go('/pages/order/express/log', {
|
||||
id,
|
||||
})
|
||||
}
|
||||
|
@ -305,7 +325,7 @@ async function onConfirm(orderId, ignore = false) {
|
|||
// 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
|
||||
let isOpenBusinessView = true
|
||||
if (
|
||||
sheep.$platform.name === 'WechatMiniProgram' &&
|
||||
peach.$platform.name === 'WechatMiniProgram' &&
|
||||
!isEmpty(state.orderInfo.wechat_extra_data) &&
|
||||
isOpenBusinessView &&
|
||||
!ignore
|
||||
|
@ -325,7 +345,7 @@ async function onConfirm(orderId, ignore = false) {
|
|||
// 小程序确认收货组件
|
||||
function mpConfirm(orderId) {
|
||||
if (!wx.openBusinessView) {
|
||||
sheep.$helper.toast(`请升级微信版本`)
|
||||
peach.$helper.toast(`请升级微信版本`)
|
||||
return
|
||||
}
|
||||
wx.openBusinessView({
|
||||
|
@ -354,41 +374,30 @@ function mpConfirm(orderId) {
|
|||
|
||||
// 评价
|
||||
function onComment(id) {
|
||||
sheep.$router.go('/pages/goods/comment/add', {
|
||||
peach.$router.go('/pages/goods/comment/add', {
|
||||
id,
|
||||
})
|
||||
}
|
||||
|
||||
function onDelivery(id) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确认完成配送吗?',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
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()
|
||||
}
|
||||
let res = await OrderApi.getOrderDetail({ id: id })
|
||||
state.orderInfo = res.data
|
||||
handleOrderButtons(state.orderInfo)
|
||||
}
|
||||
|
||||
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)
|
||||
await getOrderDetail(options.id)
|
||||
})
|
||||
</script>
|
||||
|
||||
|
@ -412,7 +421,8 @@ onLoad(async (options) => {
|
|||
.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: url('/static/order/order_bg.png') no-repeat,
|
||||
linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||
background-size: 750rpx 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
|
|
@ -1,203 +0,0 @@
|
|||
<template>
|
||||
<pb-layout title="订单" navbar="normal" tabbar="/pages/order/list" :bgStyle="bgStyle" opacityBgUi="bg-white"
|
||||
color="black">
|
||||
<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 OrderApi from '@/peach/api/trade/order'
|
||||
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/utils'
|
||||
|
||||
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,
|
||||
})
|
||||
}
|
||||
|
||||
// 获取订单列表
|
||||
async function getOrderList() {
|
||||
state.value.loadStatus = 'loading'
|
||||
let { data } = await OrderApi.getOrderPage({
|
||||
pageNo: state.value.pagination.pageNo,
|
||||
pageSize: state.value.pagination.pageSize,
|
||||
status: tabMaps[state.value.currentTab].value,
|
||||
})
|
||||
|
||||
data.list.forEach((item) => {
|
||||
item.order.forEach((sitem) => {
|
||||
handleOrderButtons(sitem)
|
||||
})
|
||||
})
|
||||
state.value.pagination.list = _.concat(state.value.pagination.list, data.list)
|
||||
console.log(state.value.pagination.list)
|
||||
state.value.pagination.total = data.total
|
||||
let currentPageTotal = state.value.pagination.list.reduce((pre, cur) => {
|
||||
return pre + cur.order.length
|
||||
}, 0)
|
||||
state.value.loadStatus = currentPageTotal < state.value.pagination.total ? 'more' : 'noMore'
|
||||
}
|
||||
|
||||
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>
|
|
@ -1,245 +1,292 @@
|
|||
<template>
|
||||
<pb-layout class="manage-goods" title="发布商品" leftIcon="leftIcon" navbar="normal" tabbar="/pages/product/manageGoods"
|
||||
:bgStyle="bgStyle" opacityBgUi="bg-white" color="black">
|
||||
<view class="goods-form">
|
||||
<uni-forms ref="formRef" v-model="formData" :rules="rules" label-position="top" label-width="160">
|
||||
<uni-forms-item label="商品封面图" name="picUrl" required>
|
||||
<p-uploader v-model:url="formData.picUrl" fileMediatype="image" limit="1" mode="grid"
|
||||
:imageStyles="{ width: '168rpx', height: '168rpx' }" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品轮播图" name="sliderPicUrls" required>
|
||||
<p-uploader v-model:url="formData.sliderPicUrls" fileMediatype="image" limit="6" mode="grid"
|
||||
:imageStyles="{ width: '168rpx', height: '168rpx' }" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品名称" name="name" required>
|
||||
<uni-easyinput type="text" trim="all" v-model="formData.name" placeholder="请输入商品名称" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品分类" name="categoryId" label-position="left" required>
|
||||
<uni-easyinput type="text" v-model="formData.categoryId" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
|
||||
:clearable="false" :inputBorder="false" placeholder="请选择商品分类" disabled>
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right" />
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品品牌" name="brandId" label-position="left" required>
|
||||
<uni-easyinput type="text" v-model="formData.brandId" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
|
||||
:clearable="false" :inputBorder="false" placeholder="请选择商品品牌" disabled>
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right" />
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品规格" name="skus" label-position="left" required>
|
||||
<uni-easyinput type="text" v-model="formData.skus" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
|
||||
:clearable="false" :inputBorder="false" placeholder="请添加商品规格" disabled> <template v-slot:right>
|
||||
<uni-icons type="right" />
|
||||
</template></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品关键词" name="keyword" required>
|
||||
<uni-easyinput type="text" v-model="formData.keyword" placeholder="请输入商品关键词" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品简介" name="introduction" required>
|
||||
<uni-easyinput type="textarea" trim="all" autoHeight v-model="formData.introduction" placeholder="请输入商品简介" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="物流设置" name="deliveryTypes" label-position="left" required>
|
||||
<uni-easyinput type="text" :clearable="false" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
|
||||
:inputBorder="false" v-model="formData.keyword" placeholder="请选择配送方式" disabled>
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right" />
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</pb-layout>
|
||||
<pb-layout
|
||||
class="manage-goods"
|
||||
title="发布商品"
|
||||
leftIcon="leftIcon"
|
||||
navbar="normal"
|
||||
:bgStyle="bgStyle"
|
||||
opacityBgUi="bg-white"
|
||||
color="black"
|
||||
>
|
||||
<view class="goods-form">
|
||||
<uni-forms ref="formRef" v-model="formData" :rules="rules" label-position="top" label-width="160">
|
||||
<uni-forms-item label="商品封面图" name="picUrl" required>
|
||||
<p-uploader
|
||||
v-model:url="formData.picUrl"
|
||||
fileMediatype="image"
|
||||
limit="1"
|
||||
mode="grid"
|
||||
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品轮播图" name="sliderPicUrls" required>
|
||||
<p-uploader
|
||||
v-model:url="formData.sliderPicUrls"
|
||||
fileMediatype="image"
|
||||
limit="6"
|
||||
mode="grid"
|
||||
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品名称" name="name" required>
|
||||
<uni-easyinput type="text" trim="all" v-model="formData.name" placeholder="请输入商品名称" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品分类" name="categoryId" label-position="left" required>
|
||||
<uni-easyinput
|
||||
type="text"
|
||||
v-model="formData.categoryId"
|
||||
:styles="selfStyles"
|
||||
placeholderStyle="color:#8a8a8a"
|
||||
:clearable="false"
|
||||
:inputBorder="false"
|
||||
placeholder="请选择商品分类"
|
||||
disabled
|
||||
>
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right" />
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品品牌" name="brandId" label-position="left" required>
|
||||
<uni-easyinput
|
||||
type="text"
|
||||
v-model="formData.brandId"
|
||||
:styles="selfStyles"
|
||||
placeholderStyle="color:#8a8a8a"
|
||||
:clearable="false"
|
||||
:inputBorder="false"
|
||||
placeholder="请选择商品品牌"
|
||||
disabled
|
||||
>
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right" />
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品规格" name="skus" label-position="left" required>
|
||||
<uni-easyinput
|
||||
type="text"
|
||||
v-model="formData.skus"
|
||||
:styles="selfStyles"
|
||||
placeholderStyle="color:#8a8a8a"
|
||||
:clearable="false"
|
||||
:inputBorder="false"
|
||||
placeholder="请添加商品规格"
|
||||
disabled
|
||||
>
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right" /> </template
|
||||
></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品关键词" name="keyword" required>
|
||||
<uni-easyinput type="text" v-model="formData.keyword" placeholder="请输入商品关键词" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="商品简介" name="introduction" required>
|
||||
<uni-easyinput
|
||||
type="textarea"
|
||||
trim="all"
|
||||
autoHeight
|
||||
v-model="formData.introduction"
|
||||
placeholder="请输入商品简介"
|
||||
/>
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="物流设置" name="deliveryTypes" label-position="left" required>
|
||||
<uni-easyinput
|
||||
type="text"
|
||||
:clearable="false"
|
||||
:styles="selfStyles"
|
||||
placeholderStyle="color:#8a8a8a"
|
||||
:inputBorder="false"
|
||||
v-model="formData.keyword"
|
||||
placeholder="请选择配送方式"
|
||||
disabled
|
||||
>
|
||||
<template v-slot:right>
|
||||
<uni-icons type="right" />
|
||||
</template>
|
||||
</uni-easyinput>
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</pb-layout>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
import peach from '@/peach';
|
||||
import GoodsApi from '@/peach/api/trade/goods';
|
||||
import _ from 'lodash';
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import peach from '@/peach'
|
||||
import GoodsApi from '@/peach/api/trade/goods'
|
||||
import _ from 'lodash'
|
||||
|
||||
const bgStyle = {
|
||||
backgroundImage: '',
|
||||
backgroundColor: '#fff',
|
||||
description: '',
|
||||
backgroundImage: '',
|
||||
backgroundColor: '#fff',
|
||||
description: '',
|
||||
}
|
||||
|
||||
const selfStyles = {
|
||||
backgroundColor: '#f9f9f9'
|
||||
backgroundColor: '#f9f9f9',
|
||||
}
|
||||
|
||||
const formData = ref({
|
||||
picUrl: 'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
|
||||
sliderPicUrls: [
|
||||
'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
|
||||
'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
|
||||
'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
|
||||
],
|
||||
name: '测试商品',
|
||||
categoryId: 91,
|
||||
brandId: 4,
|
||||
keyword: '香酥鸭,但家',
|
||||
deliveryTypes: [3],
|
||||
introduction: '但家贵阳香酥鸭现榨香酥鸭无任何添加剂香酥鸭但家贵阳香酥鸭现榨香酥鸭无任何添加剂香酥鸭'
|
||||
});
|
||||
picUrl: 'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
|
||||
sliderPicUrls: [
|
||||
'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
|
||||
'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
|
||||
'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
|
||||
],
|
||||
name: '测试商品',
|
||||
categoryId: 91,
|
||||
brandId: 4,
|
||||
keyword: '香酥鸭,但家',
|
||||
deliveryTypes: [3],
|
||||
introduction: '但家贵阳香酥鸭现榨香酥鸭无任何添加剂香酥鸭但家贵阳香酥鸭现榨香酥鸭无任何添加剂香酥鸭',
|
||||
})
|
||||
|
||||
const rules = {
|
||||
name: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请输入商品名称',
|
||||
},
|
||||
],
|
||||
},
|
||||
picUrl: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请上传商品封面图',
|
||||
},
|
||||
],
|
||||
},
|
||||
sliderPicUrls: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请上传商品轮播图',
|
||||
},
|
||||
],
|
||||
},
|
||||
categoryId: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请选择商品分类',
|
||||
},
|
||||
],
|
||||
},
|
||||
brandId: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请选择商品品牌',
|
||||
},
|
||||
],
|
||||
},
|
||||
skus: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请选择商品规格',
|
||||
},
|
||||
],
|
||||
},
|
||||
keyword: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请输入商品关键字',
|
||||
},
|
||||
],
|
||||
},
|
||||
introduction: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请输入商品简介',
|
||||
},
|
||||
],
|
||||
},
|
||||
deliveryTypes: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请选择商品物流',
|
||||
},
|
||||
]
|
||||
}
|
||||
};
|
||||
name: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请输入商品名称',
|
||||
},
|
||||
],
|
||||
},
|
||||
picUrl: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请上传商品封面图',
|
||||
},
|
||||
],
|
||||
},
|
||||
sliderPicUrls: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请上传商品轮播图',
|
||||
},
|
||||
],
|
||||
},
|
||||
categoryId: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请选择商品分类',
|
||||
},
|
||||
],
|
||||
},
|
||||
brandId: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请选择商品品牌',
|
||||
},
|
||||
],
|
||||
},
|
||||
skus: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请选择商品规格',
|
||||
},
|
||||
],
|
||||
},
|
||||
keyword: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请输入商品关键字',
|
||||
},
|
||||
],
|
||||
},
|
||||
introduction: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请输入商品简介',
|
||||
},
|
||||
],
|
||||
},
|
||||
deliveryTypes: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
errorMessage: '请选择商品物流',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
const formRef = ref(null);
|
||||
const formRef = ref(null)
|
||||
|
||||
function onSubmit() {
|
||||
console.log('res', formData.value)
|
||||
|
||||
console.log('res', formData.value);
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async (res) => {
|
||||
let tempObj = { ...res }
|
||||
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async (res) => {
|
||||
let tempObj = { ...res };
|
||||
|
||||
|
||||
if (formData.value.id) {
|
||||
tempObj.id = formData.value.id;
|
||||
await GoodsApi.editProduct(tempObj);
|
||||
} else {
|
||||
await GoodsApi.addProduct(tempObj);
|
||||
}
|
||||
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('err', err);
|
||||
});
|
||||
if (formData.value.id) {
|
||||
tempObj.id = formData.value.id
|
||||
await GoodsApi.editProduct(tempObj)
|
||||
} else {
|
||||
await GoodsApi.addProduct(tempObj)
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('err', err)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 获取商品详情
|
||||
function getGoodsInfo() {
|
||||
|
||||
}
|
||||
function getGoodsInfo() {}
|
||||
|
||||
onLoad((options) => {
|
||||
if (options.id) {
|
||||
getProduct();
|
||||
}
|
||||
});
|
||||
if (options.id) {
|
||||
getProduct()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.manage-goods {
|
||||
.goods-form {
|
||||
margin: 40rpx;
|
||||
.goods-form {
|
||||
margin: 40rpx;
|
||||
|
||||
:deep() {
|
||||
.uni-easyinput__content-input {
|
||||
font-size: 28rpx !important;
|
||||
color: #333333 !important;
|
||||
line-height: normal !important;
|
||||
}
|
||||
:deep() {
|
||||
.uni-easyinput__content-input {
|
||||
font-size: 28rpx !important;
|
||||
color: #333333 !important;
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
||||
.uni-easyinput__placeholder-class {
|
||||
font-size: 14px;
|
||||
}
|
||||
.uni-easyinput__placeholder-class {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.is-direction-left {
|
||||
.is-direction-left {
|
||||
.uni-forms-item__label {
|
||||
padding-left: 10px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
|
||||
.uni-forms-item__label {
|
||||
padding-left: 10px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 10px 0 0 10px;
|
||||
uni-icons {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.uni-easyinput__content {
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.is-disabled {
|
||||
color: #333333;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
uni-icons {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.uni-easyinput__content {
|
||||
border-radius: 0 10px 10px 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.is-disabled {
|
||||
color: #333333;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,49 +1,62 @@
|
|||
<template>
|
||||
<pb-layout navbar="inner" class="wallet-wrap" iconColor="#fff" leftIcon="leftIcon" color="#fff" title="余额"
|
||||
:bgStyle="bgStyle">
|
||||
<view class="header-box ss-row-center ss-col-center">
|
||||
<view class="card-box ui-BG-Main ui-Shadow-Main ss-flex ss-row-between ss-col-center">
|
||||
<view class="ss-flex ss-flex-col ss-row-between ss-col-top ss-gap-40">
|
||||
<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>
|
||||
<pb-layout
|
||||
navbar="inner"
|
||||
class="wallet-wrap"
|
||||
iconColor="#fff"
|
||||
leftIcon="leftIcon"
|
||||
color="#fff"
|
||||
title="余额"
|
||||
:bgStyle="bgStyle"
|
||||
>
|
||||
<view class="header-box ss-row-center ss-col-center">
|
||||
<view class="card-box ss-flex ss-row-between ss-col-center">
|
||||
<view class="ss-flex ss-flex-col ss-row-between ss-col-top ss-gap-40">
|
||||
<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="money-num">{{ state.showMoney ? fen2yuan(userWallet.balance) : '*****' }}</view>
|
||||
</view>
|
||||
<button class="ss-reset-button topup-btn" @tap="peach.$router.go('/pages/user/wallet/withdraw')">
|
||||
提现
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<p-empty v-if="state.pagination.total === 0" :marginTop="40" 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 class="money-num">{{ state.showMoney ? fen2yuan(userWallet.balance) : '*****' }}</view>
|
||||
</view>
|
||||
<button class="ss-reset-button topup-btn" @tap="peach.$router.go('/pages/user/wallet/withdraw')">
|
||||
提现
|
||||
</button>
|
||||
</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>
|
||||
|
||||
<p-empty v-if="state.pagination.total === 0" :marginTop="40" 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>
|
||||
|
@ -57,207 +70,203 @@ import { fen2yuan } from '@/peach/hooks/useGoods'
|
|||
import { resetPagination } from '@/peach/utils'
|
||||
|
||||
const bgStyle = {
|
||||
backgroundImage: '/static/bg-page.png',
|
||||
imageType: 'local',
|
||||
backgroundColor: '#fff',
|
||||
description: '',
|
||||
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,
|
||||
pagination: {
|
||||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 8,
|
||||
},
|
||||
loadStatus: '',
|
||||
showMoney: false,
|
||||
pagination: {
|
||||
list: [],
|
||||
total: 0,
|
||||
pageNo: 1,
|
||||
pageSize: 8,
|
||||
},
|
||||
loadStatus: '',
|
||||
})
|
||||
|
||||
const userWallet = computed(() => peach.$store('user').userWallet)
|
||||
|
||||
|
||||
// 获得钱包记录分页
|
||||
async function getLogList() {
|
||||
state.loadStatus = 'loading'
|
||||
// const { data, code } = await PayWalletApi.getWalletTransactionPage({
|
||||
// pageNo: state.pagination.pageNo,
|
||||
// pageSize: state.pagination.pageSize,
|
||||
state.loadStatus = 'loading'
|
||||
// const { data, code } = await PayWalletApi.getWalletTransactionPage({
|
||||
// pageNo: state.pagination.pageNo,
|
||||
// pageSize: state.pagination.pageSize,
|
||||
|
||||
// })
|
||||
// })
|
||||
|
||||
// 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'
|
||||
// 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'
|
||||
}
|
||||
|
||||
|
||||
onLoad(() => {
|
||||
getLogList()
|
||||
// 刷新钱包的缓存
|
||||
// peach.$store('user').getWallet()
|
||||
getLogList()
|
||||
// 刷新钱包的缓存
|
||||
// peach.$store('user').getWallet()
|
||||
})
|
||||
|
||||
|
||||
|
||||
onReachBottom(() => {
|
||||
if (state.loadStatus === 'noMore') {
|
||||
return
|
||||
}
|
||||
state.pagination.pageNo++
|
||||
getLogList()
|
||||
if (state.loadStatus === 'noMore') {
|
||||
return
|
||||
}
|
||||
state.pagination.pageNo++
|
||||
getLogList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header-box {
|
||||
.card-box {
|
||||
width: 100%;
|
||||
min-height: 250rpx;
|
||||
padding: 0 40rpx;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 30rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
.card-box {
|
||||
width: 100%;
|
||||
min-height: 250rpx;
|
||||
padding: 0 40rpx;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 30rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-sizing: border-box;
|
||||
|
||||
.card-head {
|
||||
color: $white;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.card-head {
|
||||
color: $white;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.ss-eye-icon {
|
||||
font-size: 40rpx;
|
||||
color: $white;
|
||||
}
|
||||
.ss-eye-icon {
|
||||
font-size: 40rpx;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.money-num {
|
||||
font-size: 70rpx;
|
||||
line-height: 70rpx;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
font-family: OPPOSANS;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.reduce-num {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.topup-btn {
|
||||
width: 150rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 30px;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
background-color: $white;
|
||||
color: var(--ui-BG-Main);
|
||||
.topup-btn {
|
||||
width: 150rpx;
|
||||
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;
|
||||
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;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// tab
|
||||
.wallet-tab-card {
|
||||
.tab-item {
|
||||
height: 80rpx;
|
||||
position: relative;
|
||||
.tab-item {
|
||||
height: 80rpx;
|
||||
position: relative;
|
||||
|
||||
.tab-title {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.tab-title {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.cur-tab-title {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
.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);
|
||||
.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;
|
||||
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;
|
||||
.head-img {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 50%;
|
||||
background: $gray-c;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: $gray-c;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
.list-content {
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
|
||||
.money {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
font-family: OPPOSANS;
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: $dark-3;
|
||||
width: 400rpx;
|
||||
}
|
||||
|
||||
.add {
|
||||
color: var(--ui-BG-Main);
|
||||
.time {
|
||||
color: $gray-c;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.minus {
|
||||
color: $dark-3;
|
||||
.money {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
font-family: OPPOSANS;
|
||||
|
||||
.add {
|
||||
color: var(--ui-BG-Main);
|
||||
}
|
||||
|
||||
.minus {
|
||||
color: $dark-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,30 +1,38 @@
|
|||
import request from "@/peach/request";
|
||||
import request from '@/peach/request'
|
||||
|
||||
const GoodsApi = {
|
||||
// 商品详情
|
||||
getProduct: (data) => {
|
||||
return request({
|
||||
url: "/trade/order/page",
|
||||
method: "GET",
|
||||
params: data,
|
||||
});
|
||||
},
|
||||
// 添加商品
|
||||
addProduct: (data) => {
|
||||
return request({
|
||||
url: "/trade/order/page",
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
},
|
||||
// 修改商品
|
||||
editProduct: (data) => {
|
||||
return request({
|
||||
url: "/trade/order/page",
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
},
|
||||
};
|
||||
// 商品列表
|
||||
getProductList: (data) => {
|
||||
return request({
|
||||
url: '/product/spu/page',
|
||||
method: 'GET',
|
||||
params: data,
|
||||
})
|
||||
},
|
||||
// 商品详情 spuIds
|
||||
getProduct: (data) => {
|
||||
return request({
|
||||
url: '/product/spu/list',
|
||||
method: 'GET',
|
||||
params: data,
|
||||
})
|
||||
},
|
||||
// 添加商品
|
||||
addProduct: (data) => {
|
||||
return request({
|
||||
url: '/trade/order/page',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
},
|
||||
// 修改商品
|
||||
editProduct: (data) => {
|
||||
return request({
|
||||
url: '/trade/order/page',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
export default GoodsApi;
|
||||
export default GoodsApi
|
||||
|
|
|
@ -1,14 +1,23 @@
|
|||
import request from "@/peach/request";
|
||||
import request from '@/peach/request'
|
||||
|
||||
const OrderUtil = {
|
||||
// 获取订单列表
|
||||
getOrderPage: (data) => {
|
||||
return request({
|
||||
url: "/trade/order/page",
|
||||
method: "GET",
|
||||
params: data,
|
||||
});
|
||||
},
|
||||
};
|
||||
// 获取订单列表
|
||||
getOrderPage: (data) => {
|
||||
return request({
|
||||
url: '/trade/order/page',
|
||||
method: 'GET',
|
||||
params: data,
|
||||
})
|
||||
},
|
||||
|
||||
export default OrderUtil;
|
||||
// 订单详情
|
||||
getOrderDetail: (data) => {
|
||||
return request({
|
||||
url: '/trade/order/get-detail',
|
||||
method: 'GET',
|
||||
params: data,
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
export default OrderUtil
|
||||
|
|
|
@ -1,176 +1,210 @@
|
|||
<template>
|
||||
<view class="ss-goods-wrap">
|
||||
<view v-if="size === 'lg'" class="lg-goods-card ss-flex ss-col-stretch" :style="[elStyles]" @click="onClick">
|
||||
<image class="lg-img-box" :src="peach.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
|
||||
<view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
|
||||
<view>
|
||||
<view v-if="goodsFields.title?.show || goodsFields.name?.show" class="lg-goods-title ss-line-2"
|
||||
:style="[{ color: titleColor }]">
|
||||
{{ data.title || data.name }}
|
||||
</view>
|
||||
<view v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
|
||||
class="lg-goods-subtitle ss-m-t-10 ss-line-1"
|
||||
:style="[{ color: subTitleColor, background: subTitleBackground }]">
|
||||
{{ data.subtitle || data.introduction }}
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="ss-flex ss-col-bottom ss-m-t-10">
|
||||
<view v-if="goodsFields.price?.show" class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS"
|
||||
:style="[{ color: goodsFields.price.color }]">
|
||||
<text class="ss-font-24">{{ priceUnit }}</text>
|
||||
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
|
||||
<view class="ss-goods-wrap">
|
||||
<view v-if="size === 'lg'" class="lg-goods-card ss-flex ss-col-stretch" :style="[elStyles]" @click="onClick">
|
||||
<image class="lg-img-box" :src="peach.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
|
||||
<view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
|
||||
<view>
|
||||
<view
|
||||
v-if="goodsFields.title?.show || goodsFields.name?.show"
|
||||
class="lg-goods-title ss-line-2"
|
||||
:style="[{ color: titleColor }]"
|
||||
>
|
||||
{{ data.title || data.name }}
|
||||
</view>
|
||||
<view
|
||||
v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
|
||||
class="lg-goods-subtitle ss-m-t-10 ss-line-1"
|
||||
:style="[{ color: subTitleColor, background: subTitleBackground }]"
|
||||
>
|
||||
{{ data.subtitle || data.introduction }}
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="ss-flex ss-col-bottom ss-m-t-10">
|
||||
<view
|
||||
v-if="goodsFields.price?.show"
|
||||
class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS"
|
||||
:style="[{ color: goodsFields.price.color }]"
|
||||
>
|
||||
<text class="ss-font-24">{{ priceUnit }}</text>
|
||||
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
|
||||
</view>
|
||||
<view
|
||||
v-if="
|
||||
(goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
|
||||
(data.original_price > 0 || data.marketPrice > 0)
|
||||
"
|
||||
class="goods-origin-price ss-flex ss-col-bottom font-OPPOSANS"
|
||||
:style="[{ color: originPriceColor }]"
|
||||
>
|
||||
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
|
||||
<view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ss-m-t-8 ss-flex ss-col-center ss-flex-wrap">
|
||||
<view class="sales-text">{{ salesAndStock }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="(goodsFields.original_price?.show || goodsFields.marketPrice?.show) && (data.original_price > 0 || data.marketPrice > 0)"
|
||||
class="goods-origin-price ss-flex ss-col-bottom font-OPPOSANS" :style="[{ color: originPriceColor }]">
|
||||
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
|
||||
<view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ss-m-t-8 ss-flex ss-col-center ss-flex-wrap">
|
||||
<view class="sales-text">{{ salesAndStock }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<button>详情</button>
|
||||
<button>编辑</button>
|
||||
<button>删除</button>
|
||||
</view>
|
||||
<view class="ss-flex ss-row-around" :style="btnStyles">
|
||||
<button class="ss-reset-button btn-group">详情</button>
|
||||
<button class="ss-reset-button btn-group">编辑</button>
|
||||
<button class="ss-reset-button btn-group btn-del">删除</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import peach from '@/peach'
|
||||
import { ref, computed } from 'vue'
|
||||
import { isArray } from 'lodash';
|
||||
import { fen2yuan, formatSales, formatStock } from '@/peach/hooks/useGoods';
|
||||
import { isArray } from 'lodash'
|
||||
import { fen2yuan, formatSales, formatStock } from '@/peach/hooks/useGoods'
|
||||
|
||||
const props = defineProps({
|
||||
goodsFields: {
|
||||
type: [Array, Object],
|
||||
default() {
|
||||
return {
|
||||
price: { show: true },
|
||||
stock: { show: true },
|
||||
name: { show: true },
|
||||
introduction: { show: true },
|
||||
marketPrice: { show: true },
|
||||
salesCount: { show: true }
|
||||
}
|
||||
}
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
topRadius: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
bottomRadius: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
priceUnit: {
|
||||
type: String,
|
||||
default: '¥',
|
||||
},
|
||||
titleColor: {
|
||||
type: String,
|
||||
default: '#333',
|
||||
},
|
||||
subTitleColor: {
|
||||
type: String,
|
||||
default: '#999999',
|
||||
},
|
||||
subTitleBackground: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
goodsFields: {
|
||||
type: [Array, Object],
|
||||
default() {
|
||||
return {
|
||||
price: { show: true },
|
||||
stock: { show: true },
|
||||
name: { show: true },
|
||||
introduction: { show: true },
|
||||
marketPrice: { show: true },
|
||||
salesCount: { show: true },
|
||||
}
|
||||
},
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
originPriceColor: {
|
||||
type: String,
|
||||
default: '#C4C4C4',
|
||||
},
|
||||
topRadius: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
bottomRadius: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
priceUnit: {
|
||||
type: String,
|
||||
default: '¥',
|
||||
},
|
||||
titleColor: {
|
||||
type: String,
|
||||
default: '#333',
|
||||
},
|
||||
subTitleColor: {
|
||||
type: String,
|
||||
default: '#999999',
|
||||
},
|
||||
subTitleBackground: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
const emits = defineEmits(['click'])
|
||||
|
||||
function onClick() {
|
||||
emits('click')
|
||||
emits('click')
|
||||
}
|
||||
|
||||
const elStyles = computed(() => {
|
||||
return {
|
||||
background: props.background,
|
||||
'border-top-left-radius': props.topRadius + 'px',
|
||||
'border-top-right-radius': props.topRadius + 'px',
|
||||
'border-bottom-left-radius': props.bottomRadius + 'px',
|
||||
'border-bottom-right-radius': props.bottomRadius + 'px',
|
||||
}
|
||||
return {
|
||||
background: props.background,
|
||||
'border-top-left-radius': props.topRadius + 'px',
|
||||
'border-top-right-radius': props.topRadius + 'px',
|
||||
}
|
||||
})
|
||||
|
||||
const btnStyles = computed(() => {
|
||||
return {
|
||||
background: '#fff',
|
||||
'border-bottom-left-radius': props.bottomRadius + 'px',
|
||||
'border-bottom-right-radius': props.bottomRadius + 'px',
|
||||
padding: '8px 0',
|
||||
}
|
||||
})
|
||||
|
||||
// 格式化销量、库存信息
|
||||
const salesAndStock = computed(() => {
|
||||
let text = [];
|
||||
if (props.goodsFields.salesCount?.show) {
|
||||
text.push(formatSales(props.data.sales_show_type, props.data.salesCount));
|
||||
}
|
||||
if (props.goodsFields.stock?.show) {
|
||||
text.push(formatStock(props.data.stock_show_type, props.data.stock));
|
||||
}
|
||||
return text.join(' | ');
|
||||
});
|
||||
let text = []
|
||||
if (props.goodsFields.salesCount?.show) {
|
||||
text.push(formatSales(props.data.sales_show_type, props.data.salesCount))
|
||||
}
|
||||
if (props.goodsFields.stock?.show) {
|
||||
text.push(formatStock(props.data.stock_show_type, props.data.stock))
|
||||
}
|
||||
return text.join(' | ')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lg-goods-card {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: $white;
|
||||
height: 280rpx;
|
||||
.ss-goods-wrap {
|
||||
.lg-goods-card {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: $white;
|
||||
height: 280rpx;
|
||||
|
||||
.lg-img-box {
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
.lg-img-box {
|
||||
width: 280rpx;
|
||||
height: 280rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.lg-goods-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
// line-height: 36rpx;
|
||||
// width: 410rpx;
|
||||
}
|
||||
.lg-goods-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
// line-height: 36rpx;
|
||||
// width: 410rpx;
|
||||
}
|
||||
|
||||
.lg-goods-subtitle {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
// line-height: 30rpx;
|
||||
// width: 410rpx;
|
||||
}
|
||||
.lg-goods-subtitle {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
// line-height: 30rpx;
|
||||
// width: 410rpx;
|
||||
}
|
||||
|
||||
.lg-goods-price {
|
||||
font-size: 30rpx;
|
||||
color: $red;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
.lg-goods-price {
|
||||
font-size: 30rpx;
|
||||
color: $red;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.buy-box {
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
right: 20rpx;
|
||||
z-index: 2;
|
||||
width: 120rpx;
|
||||
height: 50rpx;
|
||||
background: linear-gradient(90deg, #fe8900, #ff5e00);
|
||||
border-radius: 25rpx;
|
||||
font-size: 24rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
.sales-text {
|
||||
display: table;
|
||||
font-size: 24rpx;
|
||||
transform: scale(0.8);
|
||||
margin-left: 0rpx;
|
||||
color: #c4c4c4;
|
||||
}
|
||||
}
|
||||
.btn-group {
|
||||
width: 120rpx;
|
||||
height: 50rpx;
|
||||
background: var(--ui-BG-1);
|
||||
border-radius: 25rpx;
|
||||
font-size: 24rpx;
|
||||
color: #000;
|
||||
}
|
||||
.btn-del {
|
||||
color: var(--ui-BG-Main);
|
||||
background-color: var(--ui-BG-Main-opacity-1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
: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>
|
||||
<image class="order-img" :src="peach.$url.cdn(img)" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view
|
||||
class="box-right ss-flex-col ss-row-between"
|
||||
|
|
|
@ -1,5 +1,32 @@
|
|||
import { ref } from 'vue'
|
||||
import dayjs from 'dayjs'
|
||||
import { formatDate } from '@/peach/utils'
|
||||
|
||||
/**
|
||||
* 格式化数字
|
||||
* @param {string} prefix 前缀
|
||||
* @param {'exact' | string} type 格式类型:exact=精确值,其它=大致数量
|
||||
* @param {number} num 销量
|
||||
* @return {string} 格式化后的销量字符串
|
||||
*/
|
||||
export function formatNum(prefix, type, num) {
|
||||
num = num || 0
|
||||
// 情况一:精确数值
|
||||
if (type === 'exact') {
|
||||
return prefix + num
|
||||
}
|
||||
// 情况二:小于等于 10
|
||||
if (num < 10) {
|
||||
return `${prefix}≤10`
|
||||
}
|
||||
// 情况三:大于 10,除第一位外,其它位都显示为0
|
||||
// 例如:100 - 199 显示为 100+
|
||||
// 9000 - 9999 显示为 9000+
|
||||
const numStr = num.toString()
|
||||
const first = numStr[0]
|
||||
const other = '0'.repeat(numStr.length - 1)
|
||||
return `${prefix}${first}${other}+`
|
||||
}
|
||||
|
||||
/**
|
||||
* 将分转成元
|
||||
|
@ -32,6 +59,31 @@ export function formatStock(type, num) {
|
|||
return formatNum('库存', type, num)
|
||||
}
|
||||
|
||||
export function formatOrderStatusDescription(order) {
|
||||
if (order.status === 0) {
|
||||
if (!order.payExpireTime) {
|
||||
return '当前支付已过期'
|
||||
}
|
||||
return `请在 ${formatDate(order.payExpireTime)} 前完成支付`
|
||||
}
|
||||
if (order.status === 10) {
|
||||
return '商家未发货,请耐心等待'
|
||||
}
|
||||
if (order.status === 20) {
|
||||
return '商家已发货,请耐心等待'
|
||||
}
|
||||
if (order.status === 30 && !order.commentStatus) {
|
||||
return '已收货,快去评价一下吧'
|
||||
}
|
||||
if (order.status === 30 && order.commentStatus) {
|
||||
return '交易完成,感谢您的支持'
|
||||
}
|
||||
if (order.status === 50) {
|
||||
return '请及时到店核销商品'
|
||||
}
|
||||
return '交易关闭'
|
||||
}
|
||||
|
||||
export function formatOrderStatus(order) {
|
||||
if (order.status === 0) {
|
||||
return '待付款'
|
||||
|
@ -105,6 +157,14 @@ export function handleOrderButtons(order) {
|
|||
}
|
||||
if (order.status === 40) {
|
||||
// 删除订单
|
||||
order.buttons.push('delete')
|
||||
// order.buttons.push('delete')
|
||||
}
|
||||
if (order.status === 50) {
|
||||
// 核销订单
|
||||
order.buttons.push('verification')
|
||||
}
|
||||
if (order.status === 60) {
|
||||
// 配送完成
|
||||
order.buttons.push('delivery')
|
||||
}
|
||||
}
|
||||
|
|
|
@ -19,6 +19,40 @@
|
|||
}
|
||||
}
|
||||
|
||||
@each $value in ('', '-1', '-2', '-3', '-4') {
|
||||
// 背景色 + 文字色 : 白色 + 默认色;
|
||||
.ui-BG#{$value} {
|
||||
background-color: var(--ui-BG#{$value}) !important;
|
||||
color: var(--ui-TC);
|
||||
}
|
||||
// 文字颜色
|
||||
.ui-TC#{$value} {
|
||||
color: var(--ui-TC#{$value}) !important;
|
||||
}
|
||||
// 主题色背景
|
||||
.ui-BG-Main#{$value} {
|
||||
background-color: var(--ui-BG-Main#{$value}) !important;
|
||||
color: var(--ui-BG-Main-TC) !important;
|
||||
}
|
||||
// 主题色渐变,横向
|
||||
.ui-BG-Main-Gradient {
|
||||
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)) !important;
|
||||
color: var(--ui-BG-Main-TC) !important;
|
||||
}
|
||||
// 主题色文字
|
||||
.ui-TC-Main#{$value} {
|
||||
color: var(--ui-BG-Main#{$value}) !important;
|
||||
}
|
||||
// 主题色阴影
|
||||
.ui-Shadow-Main {
|
||||
box-shadow: var(--ui-Main-box-shadow) !important;
|
||||
}
|
||||
.ui-BG-Main-light {
|
||||
background: var(----ui-BG-Main-light) !important;
|
||||
color: var(--ui-BG-Main#{$value}) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $colors {
|
||||
.main-#{$color} {
|
||||
--ui-BG-Main: #{$value};
|
||||
|
|
|
@ -1,182 +1,181 @@
|
|||
import { ref } from "vue";
|
||||
import { defineStore } from "pinia";
|
||||
import $platform from "@/peach/platform";
|
||||
import $router from "@/peach/router";
|
||||
import useSysStore from "./sys";
|
||||
import { ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import $platform from '@/peach/platform'
|
||||
import $router from '@/peach/router'
|
||||
import useSysStore from './sys'
|
||||
|
||||
const useAppStore = defineStore(
|
||||
"app",
|
||||
() => {
|
||||
/**
|
||||
* @description 应用信息
|
||||
* @param string name 应用名称
|
||||
* @param string logo 应用logo
|
||||
* @param string version 应用版本
|
||||
* @param string copyright 版权信息
|
||||
* @param string copyrightTime 版权时间
|
||||
* @param string cdnurl 静态资源域名
|
||||
* @param string filesystem 文件系统
|
||||
*/
|
||||
const info = ref({
|
||||
name: "",
|
||||
logo: "",
|
||||
version: "",
|
||||
copyright: "",
|
||||
copytime: "",
|
||||
cdnurl: "",
|
||||
filesystem: "",
|
||||
});
|
||||
'app',
|
||||
() => {
|
||||
/**
|
||||
* @description 应用信息
|
||||
* @param string name 应用名称
|
||||
* @param string logo 应用logo
|
||||
* @param string version 应用版本
|
||||
* @param string copyright 版权信息
|
||||
* @param string copyrightTime 版权时间
|
||||
* @param string cdnurl 静态资源域名
|
||||
* @param string filesystem 文件系统
|
||||
*/
|
||||
const info = ref({
|
||||
name: '',
|
||||
logo: '',
|
||||
version: '',
|
||||
copyright: '',
|
||||
copytime: '',
|
||||
cdnurl: '',
|
||||
filesystem: '',
|
||||
})
|
||||
|
||||
/**
|
||||
* @description 平台信息
|
||||
* @param Array share.methods 分享方式
|
||||
* @param Object share.forwardInfo 转发信息
|
||||
* @param Object share.posterInfo 海报信息
|
||||
* @param string share.linkAddress 分享链接地址
|
||||
* @param number bindMobile 绑定手机号提醒 0: 提醒 1: 不提醒
|
||||
*/
|
||||
const platform = ref({
|
||||
share: {
|
||||
methods: [],
|
||||
forwardInfo: {},
|
||||
posterInfo: {},
|
||||
linkAddress: "",
|
||||
},
|
||||
bindMobile: 0,
|
||||
});
|
||||
|
||||
const chat = ref({});
|
||||
|
||||
/**
|
||||
* @description 模板信息
|
||||
* @param Object basic 基础模板
|
||||
* @param Object tabbar 底部导航模板
|
||||
*/
|
||||
const template = ref({
|
||||
basic: {
|
||||
tabbar: {
|
||||
items: [
|
||||
{
|
||||
activeIconUrl: "/static/a-index.png",
|
||||
iconUrl: "/static/index.png",
|
||||
text: "首页",
|
||||
url: "/pages/index/index",
|
||||
/**
|
||||
* @description 平台信息
|
||||
* @param Array share.methods 分享方式
|
||||
* @param Object share.forwardInfo 转发信息
|
||||
* @param Object share.posterInfo 海报信息
|
||||
* @param string share.linkAddress 分享链接地址
|
||||
* @param number bindMobile 绑定手机号提醒 0: 提醒 1: 不提醒
|
||||
*/
|
||||
const platform = ref({
|
||||
share: {
|
||||
methods: [],
|
||||
forwardInfo: {},
|
||||
posterInfo: {},
|
||||
linkAddress: '',
|
||||
},
|
||||
{
|
||||
activeIconUrl: "/static/a-product.png",
|
||||
iconUrl: "/static/product.png",
|
||||
text: "产品",
|
||||
url: "/pages/index/product",
|
||||
bindMobile: 0,
|
||||
})
|
||||
|
||||
const chat = ref({})
|
||||
|
||||
/**
|
||||
* @description 模板信息
|
||||
* @param Object basic 基础模板
|
||||
* @param Object tabbar 底部导航模板
|
||||
*/
|
||||
const template = ref({
|
||||
basic: {
|
||||
tabbar: {
|
||||
items: [
|
||||
{
|
||||
activeIconUrl: '/static/a-index.png',
|
||||
iconUrl: '/static/index.png',
|
||||
text: '首页',
|
||||
url: '/pages/index/index',
|
||||
},
|
||||
{
|
||||
activeIconUrl: '/static/a-product.png',
|
||||
iconUrl: '/static/product.png',
|
||||
text: '产品',
|
||||
url: '/pages/index/product',
|
||||
},
|
||||
{
|
||||
activeIconUrl: '/static/a-order.png',
|
||||
iconUrl: '/static/order.png',
|
||||
text: '订单',
|
||||
url: '/pages/index/order',
|
||||
},
|
||||
{
|
||||
activeIconUrl: '/static/a-my.png',
|
||||
iconUrl: '/static/my.png',
|
||||
text: '我的',
|
||||
url: '/pages/index/my',
|
||||
},
|
||||
{
|
||||
activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-002.png',
|
||||
iconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-001.png',
|
||||
text: 'icons',
|
||||
url: '/pages/index/icons',
|
||||
},
|
||||
],
|
||||
style: {
|
||||
activeColor: '#fc4141',
|
||||
bgColor: '#fff',
|
||||
bgType: 'color',
|
||||
color: '#282828',
|
||||
},
|
||||
theme: 'red',
|
||||
},
|
||||
},
|
||||
{
|
||||
activeIconUrl: "/static/a-order.png",
|
||||
iconUrl: "/static/order.png",
|
||||
text: "订单",
|
||||
url: "/pages/order/list",
|
||||
},
|
||||
{
|
||||
activeIconUrl: "/static/a-my.png",
|
||||
iconUrl: "/static/my.png",
|
||||
text: "我的",
|
||||
url: "/pages/index/my",
|
||||
},
|
||||
{
|
||||
activeIconUrl:
|
||||
"http://mall.yudao.iocoder.cn/static/images/4-002.png",
|
||||
iconUrl: "http://mall.yudao.iocoder.cn/static/images/4-001.png",
|
||||
text: "icons",
|
||||
url: "/pages/index/icons",
|
||||
},
|
||||
],
|
||||
style: {
|
||||
activeColor: "#fc4141",
|
||||
bgColor: "#fff",
|
||||
bgType: "color",
|
||||
color: "#282828",
|
||||
},
|
||||
theme: "red",
|
||||
},
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
// 全局分享信息
|
||||
const shareInfo = ref({});
|
||||
// 全局分享信息
|
||||
const shareInfo = ref({})
|
||||
|
||||
// 小程序发货信息管理 0: 没有 1:有
|
||||
const hasWechatTradeManaged = ref(0);
|
||||
// 小程序发货信息管理 0: 没有 1:有
|
||||
const hasWechatTradeManaged = ref(0)
|
||||
|
||||
/**
|
||||
* @author Ankkaya
|
||||
* @description 小程序初始化
|
||||
* @param {Type} -
|
||||
* @returns {Type}
|
||||
*/
|
||||
async function init() {
|
||||
// 检查网络
|
||||
const networkStatus = await $platform.checkNetwork();
|
||||
if (!networkStatus) {
|
||||
$router.error("NetworkError");
|
||||
}
|
||||
/**
|
||||
* @author Ankkaya
|
||||
* @description 小程序初始化
|
||||
* @param {Type} -
|
||||
* @returns {Type}
|
||||
*/
|
||||
async function init() {
|
||||
// 检查网络
|
||||
const networkStatus = await $platform.checkNetwork()
|
||||
if (!networkStatus) {
|
||||
$router.error('NetworkError')
|
||||
}
|
||||
|
||||
if (true) {
|
||||
this.info = {
|
||||
name: "🍑商城",
|
||||
logo: "https://static.iocoder.cn/ruoyi-vue-pro-logo.png",
|
||||
version: "1.0.0",
|
||||
copyright: "全部开源,个人与企业可 100% 免费使用",
|
||||
copytime: "Copyright© 2018-2024",
|
||||
if (true) {
|
||||
this.info = {
|
||||
name: '🍑商城',
|
||||
logo: 'https://static.iocoder.cn/ruoyi-vue-pro-logo.png',
|
||||
version: '1.0.0',
|
||||
copyright: '全部开源,个人与企业可 100% 免费使用',
|
||||
copytime: 'Copyright© 2018-2024',
|
||||
|
||||
cdnurl: "https://file.sheepjs.com", // 云存储域名
|
||||
filesystem: "qcloud", // 云存储平台
|
||||
};
|
||||
this.platform = {
|
||||
share: {
|
||||
methods: ["poster", "link"],
|
||||
linkAddress: "https://shopro.sheepjs.com/#/",
|
||||
posterInfo: {
|
||||
user_bg: "/static/img/shop/config/user-poster-bg.png",
|
||||
goods_bg: "/static/img/shop/config/goods-poster-bg.png",
|
||||
groupon_bg: "/static/img/shop/config/groupon-poster-bg.png",
|
||||
},
|
||||
},
|
||||
bind_mobile: 0,
|
||||
};
|
||||
this.chat = {
|
||||
chat_domain: "https://api.shopro.sheepjs.com/chat",
|
||||
room_id: "admin",
|
||||
};
|
||||
this.has_wechat_trade_managed = 0;
|
||||
cdnurl: 'https://file.sheepjs.com', // 云存储域名
|
||||
filesystem: 'qcloud', // 云存储平台
|
||||
}
|
||||
this.platform = {
|
||||
share: {
|
||||
methods: ['poster', 'link'],
|
||||
linkAddress: 'https://shopro.sheepjs.com/#/',
|
||||
posterInfo: {
|
||||
user_bg: '/static/img/shop/config/user-poster-bg.png',
|
||||
goods_bg: '/static/img/shop/config/goods-poster-bg.png',
|
||||
groupon_bg: '/static/img/shop/config/groupon-poster-bg.png',
|
||||
},
|
||||
},
|
||||
bind_mobile: 0,
|
||||
}
|
||||
this.chat = {
|
||||
chat_domain: 'https://api.shopro.sheepjs.com/chat',
|
||||
room_id: 'admin',
|
||||
}
|
||||
this.has_wechat_trade_managed = 0
|
||||
|
||||
// 加载主题
|
||||
const sysStore = useSysStore();
|
||||
sysStore.setTheme();
|
||||
// 加载主题
|
||||
const sysStore = useSysStore()
|
||||
sysStore.setTheme()
|
||||
|
||||
return Promise.resolve(true);
|
||||
} else {
|
||||
$router.error("InitError", res.msg || "加载失败");
|
||||
}
|
||||
}
|
||||
return Promise.resolve(true)
|
||||
} else {
|
||||
$router.error('InitError', res.msg || '加载失败')
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
info,
|
||||
platform,
|
||||
chat,
|
||||
template,
|
||||
shareInfo,
|
||||
hasWechatTradeManaged,
|
||||
init,
|
||||
};
|
||||
},
|
||||
{
|
||||
persist: {
|
||||
enabled: true,
|
||||
strategies: [
|
||||
{
|
||||
key: "app-store",
|
||||
},
|
||||
],
|
||||
return {
|
||||
info,
|
||||
platform,
|
||||
chat,
|
||||
template,
|
||||
shareInfo,
|
||||
hasWechatTradeManaged,
|
||||
init,
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
{
|
||||
persist: {
|
||||
enabled: true,
|
||||
strategies: [
|
||||
{
|
||||
key: 'app-store',
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
export default useAppStore;
|
||||
export default useAppStore
|
||||
|
|
|
@ -1,5 +1,30 @@
|
|||
import dayjs from 'dayjs'
|
||||
|
||||
export function resetPagination(pagination) {
|
||||
pagination.list = []
|
||||
pagination.total = 0
|
||||
pagination.pageNo = 1
|
||||
}
|
||||
|
||||
/**
|
||||
* 时间日期转换
|
||||
* @param {dayjs.ConfigType} date 当前时间,new Date() 格式
|
||||
* @param {string} format 需要转换的时间格式字符串
|
||||
* @description format 字符串随意,如 `YYYY-mm、YYYY-mm-dd`
|
||||
* @description format 季度:"YYYY-mm-dd HH:MM:SS QQQQ"
|
||||
* @description format 星期:"YYYY-mm-dd HH:MM:SS WWW"
|
||||
* @description format 几周:"YYYY-mm-dd HH:MM:SS ZZZ"
|
||||
* @description format 季度 + 星期 + 几周:"YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
|
||||
* @returns {string} 返回拼接后的时间字符串
|
||||
*/
|
||||
export function formatDate(date, format) {
|
||||
// 日期不存在,则返回空
|
||||
if (!date) {
|
||||
return ''
|
||||
}
|
||||
// 日期存在,则进行格式化
|
||||
if (format === undefined) {
|
||||
format = 'YYYY-MM-DD HH:mm:ss'
|
||||
}
|
||||
return dayjs(date).format(format)
|
||||
}
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 22 KiB |
Loading…
Reference in New Issue