增加分销页面，订单增加会员折扣
This commit is contained in:
563
distribution/income-details/index.vue
Normal file
563
distribution/income-details/index.vue
Normal file
@@ -0,0 +1,563 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="header-wrap">
|
||||
<view class="u-flex" style="justify-content: flex-end"> </view>
|
||||
<view class="search-wrap">
|
||||
<view class="input-wrap" @click="showStatus = true">
|
||||
<view class="icon right">
|
||||
<u-icon name="arrow-down" size="12"></u-icon>
|
||||
</view>
|
||||
<input
|
||||
v-model="querForm.statusName"
|
||||
class="ipt right"
|
||||
type="text"
|
||||
placeholder="全部"
|
||||
placeholder-style="font-size: 28rpx"
|
||||
disabled
|
||||
/>
|
||||
</view>
|
||||
<view class="input-wrap" @click="showTimeArea = true">
|
||||
<view class="icon right">
|
||||
<u-icon name="arrow-down" size="12"></u-icon>
|
||||
</view>
|
||||
<input
|
||||
v-model="querForm.timeArea"
|
||||
class="ipt right"
|
||||
type="text"
|
||||
placeholder="选择日期范围"
|
||||
placeholder-style="font-size: 28rpx"
|
||||
disabled
|
||||
/>
|
||||
</view>
|
||||
<view class="input-wrap" @click="show = true">
|
||||
<view class="icon right">
|
||||
<u-icon name="arrow-down" size="12"></u-icon>
|
||||
</view>
|
||||
<input
|
||||
v-model="querForm.shopName"
|
||||
class="ipt right"
|
||||
type="text"
|
||||
placeholder="全部店铺"
|
||||
placeholder-style="font-size: 28rpx"
|
||||
disabled
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="u-p-t-16 u-p-b-20 u-flex u-p-l-28 u-p-r-28 " style="align-items: baseline;justify-content: flex-end;">
|
||||
<text class="color-666 font-12"> 总计：</text>
|
||||
<text class="font-16 color-333 font-700"> 999.99</text>
|
||||
</view>
|
||||
|
||||
<view class="list">
|
||||
<view v-for="(item, index) in 3" :key="index" class="item">
|
||||
<view class="u-flex justify-between">
|
||||
<view>
|
||||
<text class="color-666 ">来源：</text>
|
||||
<text class="color-333 font-700">儿童玩具部落</text>
|
||||
</view>
|
||||
<view>
|
||||
<text class="color-666">待入账</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex justify-between u-m-t-16">
|
||||
<view>
|
||||
<text class="color-666 ">订单：</text>
|
||||
<text class="color-333 font-700">WEB1942482053783560192</text>
|
||||
</view>
|
||||
<view class="money">
|
||||
<text class="money reduce">+100</text>
|
||||
<text class="tag">(订单一级分成)</text>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex justify-between u-m-t-16">
|
||||
<view>
|
||||
<text class="color-666 ">时间：</text>
|
||||
<text class="color-333 font-700">2025/01/21 04:03</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-loadmore :status="list.status"></u-loadmore>
|
||||
<u-popup :show="show" round="20" closeable @close="show = false">
|
||||
<view class="shoplist-popup">
|
||||
<view class="title">
|
||||
<text class="t">店铺列表</text>
|
||||
</view>
|
||||
<scroll-view
|
||||
class="popup-list"
|
||||
direction="vertical"
|
||||
@scrollend="scrollBottom"
|
||||
>
|
||||
<view
|
||||
class="item"
|
||||
v-for="item in shopList"
|
||||
:key="item.shopId"
|
||||
@click="selectShopHandle(item)"
|
||||
>
|
||||
<text class="t">{{ item.shopName }}</text>
|
||||
<text class="intro">地址：{{ item.shopAddress }}</text>
|
||||
</view>
|
||||
<u-loadmore status="nomore"></u-loadmore>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<up-action-sheet
|
||||
cancelText="取消"
|
||||
:actions="statusList"
|
||||
title="选择状态"
|
||||
:show="showStatus"
|
||||
closeOnClickAction
|
||||
@close="showStatus = false"
|
||||
@select="selectStatusHandle"
|
||||
round="16"
|
||||
></up-action-sheet>
|
||||
|
||||
<dateAreaSel
|
||||
:show="showTimeArea"
|
||||
:minYear="2022"
|
||||
@close="showTimeArea = false"
|
||||
@confirm="confirmTimeArea"
|
||||
></dateAreaSel>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
import dateAreaSel from "@/components/date-range-picker/date-range-picker.vue";
|
||||
import { ref, reactive, onMounted, computed } from "vue";
|
||||
import {
|
||||
onLoad,
|
||||
onReady,
|
||||
onShow,
|
||||
onPageScroll,
|
||||
onReachBottom,
|
||||
} from "@dcloudio/uni-app";
|
||||
import {
|
||||
APIcouponfindByUserId,
|
||||
APIfindCoupon,
|
||||
getCouponShops,
|
||||
} from "@/common/api/member.js";
|
||||
|
||||
const show = ref(false);
|
||||
const showTimeArea = ref(false);
|
||||
|
||||
const querForm = ref({
|
||||
searchValue: "",
|
||||
shopId: "",
|
||||
shopName: "",
|
||||
statusActiveIndex: 0,
|
||||
status: "",
|
||||
statusName: "",
|
||||
startDate: "",
|
||||
timeArea: "",
|
||||
endDate: "",
|
||||
date: [],
|
||||
});
|
||||
|
||||
function confirmTimeArea(e) {
|
||||
console.log(e);
|
||||
querForm.value.date = e;
|
||||
querForm.value.startDate = e[0];
|
||||
querForm.value.endDate = e[1];
|
||||
querForm.value.timeArea = e[0] + "-" + e[1];
|
||||
}
|
||||
|
||||
// 状态
|
||||
const statusList = ref([
|
||||
{
|
||||
value: 0,
|
||||
name: "未使用",
|
||||
color: "#333",
|
||||
fontSize: "16",
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
name: "已使用",
|
||||
color: "#333",
|
||||
fontSize: "16",
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
name: "已失效",
|
||||
color: "#333",
|
||||
fontSize: "16",
|
||||
},
|
||||
]);
|
||||
const returnStatusName = () => {
|
||||
let name = "";
|
||||
statusList.value.forEach((item) => {
|
||||
if (item.value == querForm.value.status) {
|
||||
name = item.name;
|
||||
}
|
||||
});
|
||||
return name;
|
||||
};
|
||||
function selectStatusHandle(e) {
|
||||
console.log(e);
|
||||
querForm.value.status = e.value;
|
||||
querForm.value.statusName = returnStatusName();
|
||||
}
|
||||
const list = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
status: "loading",
|
||||
data: [],
|
||||
});
|
||||
|
||||
onReachBottom(() => {
|
||||
if (list.status != "nomore") {
|
||||
list.page++;
|
||||
}
|
||||
});
|
||||
|
||||
const showStatus = ref(false);
|
||||
const selectListItemDetails = ref([]);
|
||||
|
||||
// 切换类型
|
||||
function tabChange(index) {
|
||||
querForm.value.statusActiveIndex = index;
|
||||
list.page = 1;
|
||||
list.status = "loading";
|
||||
}
|
||||
|
||||
// 店铺列表滚动到底部了
|
||||
function scrollBottom() {
|
||||
console.log("店铺列表滚动到底部了");
|
||||
}
|
||||
|
||||
// 选择店铺
|
||||
function selectShopHandle(item) {
|
||||
querForm.value.shopId = item.shopId;
|
||||
querForm.value.shopName = item.shopName;
|
||||
list.page = 1;
|
||||
show.value = false;
|
||||
}
|
||||
// 获取当前店铺会员信息
|
||||
const shopList = ref([]);
|
||||
async function getCouponShopsAjax() {
|
||||
try {
|
||||
const res = await getCouponShops();
|
||||
shopList.value = res;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
onShow(() => {});
|
||||
|
||||
onLoad(() => {
|
||||
getCouponShopsAjax();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 130rpx 0 28upx;
|
||||
}
|
||||
.list{
|
||||
font-size: 28rpx;
|
||||
.item{
|
||||
background-color: #fff;
|
||||
padding: 32rpx 28rpx 32rpx 36rpx;
|
||||
margin-bottom: 16rpx;
|
||||
.money{
|
||||
line-height: 44rpx;
|
||||
color: #FE7E00;
|
||||
font-size: 48rpx;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
&.reduce{
|
||||
color: #FF1C1C;
|
||||
}
|
||||
.tag{
|
||||
position: absolute;
|
||||
font-weight: 400;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
font-size: 28rpx;
|
||||
white-space: nowrap;
|
||||
color: #999;
|
||||
transform: translateY(10rpx);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-wrap {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
padding: 28upx;
|
||||
.search-wrap {
|
||||
display: flex;
|
||||
gap: 20upx;
|
||||
.input-wrap {
|
||||
height: 70upx;
|
||||
border: 1px solid #ececec;
|
||||
border-radius: 8upx;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
&:nth-child(1) {
|
||||
width: 170rpx;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
flex: 1;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
width: 226rpx;
|
||||
}
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
&.left {
|
||||
left: 14upx;
|
||||
}
|
||||
&.right {
|
||||
right: 14upx;
|
||||
}
|
||||
}
|
||||
.ipt {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
&.left {
|
||||
padding-left: 68upx;
|
||||
}
|
||||
&.right {
|
||||
padding: 0 56upx 0 24upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.status-wrap {
|
||||
display: flex;
|
||||
padding-top: 28upx;
|
||||
position: relative;
|
||||
.icon-wrap {
|
||||
height: 12upx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease-in-out;
|
||||
.active-icon {
|
||||
width: 24upx;
|
||||
height: 12upx;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
.item {
|
||||
flex: 1;
|
||||
height: 80upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.t {
|
||||
font-size: 32upx;
|
||||
color: #666666;
|
||||
transition: all 0.3s ease-in-out 0.1s;
|
||||
}
|
||||
&.active {
|
||||
.t {
|
||||
color: #e3ad7f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-wrap {
|
||||
padding-top: 28upx;
|
||||
.item {
|
||||
border-radius: 18upx;
|
||||
background-color: #fff;
|
||||
padding: 28upx;
|
||||
&:not(:first-child) {
|
||||
margin-top: 28upx;
|
||||
}
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 28upx;
|
||||
.icon {
|
||||
$size: 140upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
margin-right: 28upx;
|
||||
}
|
||||
.info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 8upx;
|
||||
padding-left: 28upx;
|
||||
position: relative;
|
||||
&::after {
|
||||
$height: 100upx;
|
||||
content: "";
|
||||
height: $height;
|
||||
border-left: 1upx solid #f7f7f7;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: $height * 0.5 * -1;
|
||||
left: 0;
|
||||
}
|
||||
.view {
|
||||
flex: 1;
|
||||
&.name {
|
||||
font-size: 32upx;
|
||||
color: #333;
|
||||
}
|
||||
&.time {
|
||||
.t {
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
width: 120upx;
|
||||
height: 48upx;
|
||||
border-radius: 48upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #333;
|
||||
.t {
|
||||
font-size: 24upx;
|
||||
color: #fff;
|
||||
}
|
||||
&.disabled {
|
||||
background-color: #f8f8f8;
|
||||
.t {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 28upx 0 14upx;
|
||||
border-top: 1upx solid #f7f7f7;
|
||||
.left {
|
||||
flex: 1;
|
||||
height: 40upx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 28upx;
|
||||
justify-content: flex-end;
|
||||
.t {
|
||||
font-size: 24upx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.shoplist-popup {
|
||||
padding: 0 28upx 28upx;
|
||||
.title {
|
||||
padding: 28upx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.t {
|
||||
font-size: 32upx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.popup-list {
|
||||
max-height: 50vh;
|
||||
.item {
|
||||
padding: 28upx;
|
||||
border-radius: 12upx;
|
||||
background-color: #f7f7f7;
|
||||
margin-bottom: 28upx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 28upx;
|
||||
.t {
|
||||
font-size: 28upx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
/* 必须设置宽度 */
|
||||
width: 600upx; /* 或具体像素值 */
|
||||
|
||||
/* 关键属性 */
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1; /* 显示2行 */
|
||||
overflow: hidden;
|
||||
|
||||
/* 文本溢出省略号 */
|
||||
text-overflow: ellipsis;
|
||||
|
||||
/* 可选：防止行高度，确保计算准确 */
|
||||
line-height: 1.5;
|
||||
word-break: break-all; /* 允许在单词内换行 */
|
||||
word-wrap: break-word; /* 允许长单词或URL换行 */
|
||||
}
|
||||
.intro {
|
||||
font-size: 28upx;
|
||||
color: #999;
|
||||
/* 必须设置宽度 */
|
||||
width: 600upx; /* 或具体像素值 */
|
||||
|
||||
/* 关键属性 */
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2; /* 显示2行 */
|
||||
overflow: hidden;
|
||||
|
||||
/* 文本溢出省略号 */
|
||||
text-overflow: ellipsis;
|
||||
|
||||
/* 可选：防止行高度，确保计算准确 */
|
||||
line-height: 1.5;
|
||||
word-break: break-all; /* 允许在单词内换行 */
|
||||
word-wrap: break-word; /* 允许长单词或URL换行 */
|
||||
}
|
||||
}
|
||||
.ul {
|
||||
.li {
|
||||
color: #999;
|
||||
font-size: 28upx;
|
||||
padding: 8upx 0;
|
||||
.t {
|
||||
color: #999;
|
||||
font-size: 28upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user