564 lines
13 KiB
Vue
564 lines
13 KiB
Vue
<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>
|