You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
310 lines
9.5 KiB
Vue
310 lines
9.5 KiB
Vue
<template>
|
|
<view class="content bg-white">
|
|
<kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>
|
|
<!-- <view class="w-full">
|
|
<wd-navbar fixed safeAreaInsetTop :leftText="user_info?.info?.name || '商城首页'">
|
|
<template #right>
|
|
<wd-icon @click="utils.toUrl('/store/setup/index')" name="setting" size="22px"></wd-icon>
|
|
</template>
|
|
</wd-navbar>
|
|
</view> -->
|
|
|
|
<wd-tabs v-model="tab">
|
|
<block v-for="item in 1" :key="0">
|
|
<wd-tab :title="`等级列表`">
|
|
<view class="my-4 flex px-14 gap-4">
|
|
<wd-button class="flex-1" @click="utils.toUrl('/store/user/editMember')" size="small">新增等级</wd-button>
|
|
<wd-button class="flex-1" @click="utils.toUrl('/store/user/setUp')" size="small">页面配置</wd-button>
|
|
</view>
|
|
<view class="grid p-2">
|
|
<view>
|
|
<wd-swipe-action v-for="(member, index) of memberList" class="rounded-3xl overflow-hidden mb-3 relative">
|
|
<view class="overflow-hidden p-4 relative">
|
|
<div class="bg absolute inset-0 bg-cover z-10 bg-no-repeat bg-center" :class="gradients[index]">
|
|
</div>
|
|
|
|
<div class="z-20 relative">
|
|
<div class="flex items-center">
|
|
<view>
|
|
<wd-badge custom-class="badge" type="primary" :modelValue="`v${member.level}`">
|
|
<view class="border-white border-4 border-solid flex items-center justify-center"
|
|
style="border-radius: 100px;width: 68px;height: 68px;">
|
|
<image mode="aspectFill" :src="member.image" :alt="member.name"
|
|
style="width: 60px;height: 60px;min-width: 60px;border-radius: 100px; " />
|
|
</view>
|
|
</wd-badge>
|
|
</view>
|
|
<view>
|
|
<view class="ml-4 px-4 py-2 rounded-3xl mb-1 inline-flex text-white" style="font-size: 24rpx; ">
|
|
{{ member.name }} ￥{{ member.price }}
|
|
</view>
|
|
<view class="ml-4 rounded" style="font-size: 22rpx; ">
|
|
<view class="mt-2">
|
|
<wd-button class="mr-2" type="success" :round="true" size="small">消费：{{ member.money }}
|
|
元</wd-button>
|
|
<wd-button type="warning" :round="true" size="small">{{ member.growth }} 成长值</wd-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</div>
|
|
|
|
</div>
|
|
</view>
|
|
|
|
<template #right>
|
|
<view class="action">
|
|
<view class="button " :class="gradients[index]"
|
|
@click="utils.toUrl('/store/user/editMember?edit=' + JSON.stringify(member))">编辑</view>
|
|
</view>
|
|
</template>
|
|
|
|
</wd-swipe-action>
|
|
|
|
</view>
|
|
</view>
|
|
</wd-tab>
|
|
</block>
|
|
|
|
<block v-for="item in 1" :key="1">
|
|
<wd-tab :title="`会员专享`">
|
|
<view class="my-4 flex px-14 gap-4">
|
|
<wd-button class="flex-1" @click="utils.toUrl('/store/user/editGoods')" size="small">新增折扣</wd-button>
|
|
</view>
|
|
|
|
<yList v-if="!loading" class="p-2 bg-gray-50" height="86vh" ref="yListRef" :apiObj="userMembers.DiscountList"
|
|
:params="{ ...params }">
|
|
<template #default="{ list }">
|
|
<div v-for="user of list" class="rounded-md overflow-hidden ">
|
|
<wd-card class="rounded-md overflow-hidden" type="rectangle">
|
|
<template #title>
|
|
<view class="title">
|
|
<view>{{ user.name }}</view>
|
|
<view class="title-tip">
|
|
折扣 {{ user.discount }}
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<view class="bg-gray-50 p-2 mb-2 flex justify-between" style="font-size: 22rpx;">
|
|
<view>状态：
|
|
<el-tag type="primary" v-if="user.status == 1">开启</el-tag>
|
|
<el-tag v-else>关闭</el-tag>
|
|
</view>
|
|
<view>折扣商品：{{ user?.goods_list?.length || 0 }} </view>
|
|
</view>
|
|
|
|
<view class="bg-gray-50 p-2 flex justify-between" style="font-size: 22rpx;">
|
|
<view>优惠时间：
|
|
<wd-tag type="primary">{{ utils.dateFormat(user.start_time * 1000) }}</wd-tag> - <wd-tag>{{
|
|
utils.dateFormat(user.end_time * 1000) }}</wd-tag>
|
|
</view>
|
|
</view>
|
|
|
|
<template #footer>
|
|
|
|
|
|
|
|
<view class="flex justify-between items-center">
|
|
<view></view>
|
|
|
|
<view>
|
|
<!-- <wd-button @click="changeS(user)" v-if="user.status == 1" size="small" plain
|
|
style="margin-right: 8px;">关闭</wd-button>
|
|
<wd-button @click="changeS(user)" v-if="user.status !== 1" size="small" plain
|
|
style="margin-right: 8px;">
|
|
开启</wd-button> -->
|
|
<wd-button @click="utils.toUrl('/store/user/editGoods?edit=' + JSON.stringify({
|
|
...user,
|
|
goods_list: user.goods_list.map(item => {
|
|
return {
|
|
id: item.id,
|
|
pic_url: item.pic_url,
|
|
name: item.name
|
|
}
|
|
})
|
|
}))" size="small" style="margin-right: 0px;">编辑</wd-button>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
</wd-card>
|
|
</div>
|
|
</template>
|
|
</yList>
|
|
</wd-tab>
|
|
</block>
|
|
</wd-tabs>
|
|
|
|
|
|
|
|
<wd-toast />
|
|
<wd-message-box></wd-message-box>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import utils from '@/utils/utils.js';
|
|
import yList from "/components/yList/index.vue";
|
|
import kevyloading from "@/components/kevy-loading/kevy-loading";
|
|
import userMembers from '@/api/store/userMembers.js';
|
|
import { useMessage } from '@/uni_modules/wot-design-uni';
|
|
import { useToast } from '@/uni_modules/wot-design-uni'
|
|
import { useApi } from "@/hooks/useApi.js"
|
|
import {
|
|
onShow,
|
|
} from "@dcloudio/uni-app";
|
|
|
|
const gradients = [
|
|
'bg-gradient-to-t from-blue-100 to-blue-300',
|
|
'bg-gradient-to-t from-green-100 to-green-300',
|
|
'bg-gradient-to-t from-yellow-100 to-yellow-300',
|
|
'bg-gradient-to-t from-red-100 to-red-300',
|
|
'bg-gradient-to-t from-purple-100 to-purple-300',
|
|
'bg-gradient-to-t from-pink-100 to-pink-300',
|
|
'bg-gradient-to-t from-indigo-100 to-indigo-300',
|
|
'bg-gradient-to-t from-teal-100 to-teal-300',
|
|
'bg-gradient-to-t from-orange-100 to-orange-300',
|
|
'bg-gradient-to-t from-gray-100 to-gray-300',
|
|
// 添加更多的渐变类，以满足你的需求
|
|
];
|
|
|
|
const toast = useToast()
|
|
const message1 = useMessage();
|
|
|
|
const tab = ref(0);
|
|
|
|
/**
|
|
* @type {Ref<boolean>}
|
|
* 控制页面加载状态的 Ref
|
|
*/
|
|
const loading = ref(false);
|
|
|
|
/**
|
|
* 从本地存储中获取用户信息
|
|
*/
|
|
const user_info = uni.getStorageSync("user_info");
|
|
|
|
const memberList = ref({});
|
|
|
|
const changeS = async (row) => {
|
|
const { fetchData } = await useApi(userMembers.LevelShow, { loading })
|
|
|
|
fetchData({
|
|
id: row.id,
|
|
status: [1, 0][row.status],
|
|
}).then(res => {
|
|
if (result.value.code == 0) {
|
|
toast.success('操作成功')
|
|
row.status = [1, 0][row.status]
|
|
} else {
|
|
uni.showToast({
|
|
title: '出错了',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
const syncGoods = (row) => {
|
|
message1
|
|
.confirm({
|
|
title: '同步商品',
|
|
})
|
|
.then((resp) => {
|
|
toast.loading('请稍后...')
|
|
|
|
member.synchronousGoods({
|
|
id: row.id,
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
toast.success('同步成功');
|
|
} else {
|
|
toast.error('同步失败');
|
|
}
|
|
});
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
};
|
|
|
|
|
|
/**
|
|
* 获取数据的函数
|
|
*/
|
|
const getmemberList = async () => {
|
|
const { fetchData } = await useApi(userMembers.LevelShow, { loading })
|
|
|
|
fetchData().then(res => {
|
|
memberList.value = res.data;
|
|
memberList.value.ok = true;
|
|
})
|
|
};
|
|
|
|
|
|
// 初始化调用获取一行数据
|
|
onShow(() => {
|
|
getmemberList();
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.memberBox,
|
|
.title {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.memberBox {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.title {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.title-tip {
|
|
color: rgba(0, 0, 0, 0.25);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.action {
|
|
height: 100%;
|
|
|
|
.button {
|
|
display: inline-block;
|
|
padding: 0 11px;
|
|
height: 100%;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
:deep(.badge) {
|
|
.wd-badge__content {
|
|
// padding: 20rpx 20rpx;
|
|
width: auto;
|
|
display: flex;
|
|
line-height: 30rpx;
|
|
height: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-right: 20rpx;
|
|
padding-left: 20rpx;
|
|
|
|
top: 16rpx !important;
|
|
right: 20rpx !important;
|
|
border-radius: 100px !important;
|
|
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
}
|
|
</style>
|