sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.优惠券接口联调 

sws 2024-09-03
v1.0.0
sws 2024-09-04 09:48:45 +08:00
parent 19fbf8c2c2
commit 6190897e04
7 changed files with 163 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/api/coupon.ts Normal file
View File

@ -0,0 +1,14 @@
import request from '@/utils/request';
class CouponAPI {
/** 领取优惠券列表 */
static getCoupon(data: any) {
return request({
url: `?s=plugins/index/pluginsname/coupon/pluginscontrol/diyapi/pluginsaction/receivecouponlist`,
method: 'post',
data,
});
}
}
export default CouponAPI;

42
src/components/common/url-value/link-coupon.vue
View File

@ -3,7 +3,7 @@
<div class="container">
<div class="flex-row jc-e gap-20 mb-20">
<el-select v-model="type" class="search-w" placeholder="请选择" clearable @change="handle_search">
<el-option v-for="item in coupon_category_list" :key="item.name" :label="item.name" :value="item.name" />
<el-option v-for="item in coupon_type_list" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
<el-input v-model="search_value" placeholder="请输入搜索内容" class="search-w" @change="handle_search">
<template #suffix>
@ -19,28 +19,15 @@
<el-radio v-model="template_selection" :label="scope.$index + ''">&nbsp;</el-radio>
</template>
</el-table-column>
<el-table-column prop="id" label="ID" type="" />
<el-table-column prop="cover" label="名称">
<template #default="scope">
<div class="flex-row align-c gap-10">
<image-empty v-if="scope.row.cover" v-model="scope.row.cover" class="img"></image-empty>
<div class="flex-1">{{ scope.row.title }}</div>
</div>
</template>
</el-table-column>
<el-table-column prop="cover" label="类型">
<template #default="scope">
<div class="flex-row align-c gap-10">
<image-empty v-if="scope.row.cover" v-model="scope.row.cover" class="img"></image-empty>
<div class="flex-1">{{ scope.row.title }}</div>
</div>
</template>
</el-table-column>
<el-table-column prop="id" label="ID" width="80" type="" />
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="type_name" label="类型"></el-table-column>
<el-table-column prop="cover" label="优惠信息">
<template #default="scope">
<div class="flex-row align-c gap-10">
<image-empty v-if="scope.row.cover" v-model="scope.row.cover" class="img"></image-empty>
<div class="flex-1">{{ scope.row.title }}</div>
<div class="flex-row align-c gap-3">
<div>{{ scope.row.type == '0' ? '减' : '打' }}</div>
<div>{{ scope.row.discount_value }}</div>
<div>{{ scope.row.type_unit }}</div>
</div>
</template>
</el-table-column>
@ -55,6 +42,7 @@
</div>
</template>
<script lang="ts" setup>
import { is_obj_empty } from '@/utils';
import UrlValueAPI from '@/api/url-value';
import { commonStore } from '@/store';
const common_store = commonStore();
@ -87,19 +75,21 @@ const init = () => {
template_selection.value = '';
type.value = '';
search_value.value = '';
coupon_category_list.value = common_store.common.plugins.coupon.coupon_type_list;
if (!is_obj_empty(common_store.common.plugins) && !is_obj_empty(common_store.common.plugins.coupon) && common_store.common.plugins.coupon.coupon_type_list.length > 0) {
coupon_type_list.value = common_store.common.plugins.coupon.coupon_type_list;
}
get_list(1);
};
const handle_search = () => {
get_list(1);
};
const type = ref('');
interface articleCategory {
id: string;
interface couponType {
value: string;
name: string;
url: string;
checked?: boolean;
}
const coupon_category_list = ref<articleCategory[]>([]);
const coupon_type_list = ref<couponType[]>([]);
const template_selection = ref('');
//#region 分页 -----------------------------------------------start
// 当前页

180
src/components/model-coupon/index.vue
View File

@ -1,15 +1,16 @@
<template>
<div class="coupon-theme-container">
<div class="re" :style="style_container">
<el-scrollbar>
<el-scrollbar class="hide-scrollbar">
<template v-if="theme == '1'">
<div class="coupon-theme-1">
<div v-for="item in list" :key="item" class="item">
<div v-for="item in data_list" :key="item" class="item">
<div class="coupon-theme-1-content tc" :style="'background-image: url(' + theme_bg_img.url_1 + ');background-size: 100% 100%;'">
<div class="name">满200元使用</div>
<div class="name text-line-1">{{ item.name }}</div>
<div class="price">
<span class="symbol">¥</span>
<span class="number">30</span>
<span v-if="item.type == '0'" class="symbol">¥</span>
<span class="number">{{ item.discount_value }}</span>
<span v-if="item.type == '1'" class="symbol">折</span>
</div>
</div>
<div class="coupon-btn">立即领取</div>
@ -18,14 +19,15 @@
</template>
<template v-else-if="theme == '2'">
<div class="coupon-theme-2">
<div v-for="item in list" :key="item" class="item" :style="'background-image: url(' + theme_bg_img.url_2 + ');background-size: 100% 100%;'">
<div v-for="item in data_list" :key="item" class="item" :style="'background-image: url(' + theme_bg_img.url_2 + ');background-size: 100% 100%;'">
<div class="tc">
<div class="price">
<span class="symbol">¥</span>
<span class="number">30</span>
<span v-if="item.type == '0'" class="symbol">¥</span>
<span class="number">{{ item.discount_value }}</span>
<span v-if="item.type == '1'" class="symbol">折</span>
</div>
<div class="name">满200元使用</div>
<div class="desc">指定商品可用</div>
<div class="name text-line-1">{{ item.name }}</div>
<div class="desc text-line-1">{{ item.desc }}</div>
</div>
<div class="coupon-btn">立即领取</div>
</div>
@ -33,16 +35,17 @@
</template>
<template v-else-if="theme == '3'">
<div class="coupon-theme-3">
<div v-for="item in list" :key="item" class="item">
<div v-for="item in data_list" :key="item" class="item">
<div class="left">
<div class="price">
<span class="symbol">¥</span>
<span class="number">30</span>
<span v-if="item.type == '0'" class="symbol">¥</span>
<span class="number">{{ item.discount_value }}</span>
<span v-if="item.type == '1'" class="symbol self-e">折</span>
</div>
<div class="text">
<div class="name">满200元使用</div>
<div class="desc">指定商品可用</div>
<div class="limit">(限领一张)</div>
<div class="text pl-3 pr-8">
<div class="name text-line-1">{{ item.name }}</div>
<div class="desc text-line-1">{{ item.use_limit_type_name }}</div>
<div v-if="item.limit_send_count && item.limit_send_count > 0" class="limit text-line-1">(限领{{ item.limit_send_count }}张)</div>
</div>
</div>
<div class="right">
@ -56,22 +59,23 @@
</template>
<template v-else-if="theme == '4'">
<div class="coupon-theme-4">
<el-scrollbar>
<el-scrollbar class="hide-scrollbar">
<div class="left">
<div v-for="item in list" :key="item" class="item">
<div v-for="item in data_list" :key="item" class="item">
<div class="type">通用券</div>
<div class="price">
<span class="symbol">¥</span>
<span class="number">30</span>
<span v-if="item.type == '0'" class="symbol">¥</span>
<span class="number">{{ item.discount_value }}</span>
<span v-if="item.type == '1'" class="symbol">折</span>
</div>
<div class="name">满200元使用</div>
<div class="name text-line-1">{{ item.name }}</div>
</div>
</div>
</el-scrollbar>
<div class="right">
<div class="re z-i flex-col jc-c align-c">
<div class="title">先领券 再购物</div>
<div class="desc">领券下单·享购物优惠</div>
<div class="title text-line-1">{{ content_title }}</div>
<div class="desc text-line-1">{{ content_desc }}</div>
<div class="coupon-btn">领取全部</div>
</div>
</div>
@ -79,13 +83,14 @@
</template>
<template v-else-if="theme == '5'">
<div class="coupon-theme-5">
<div v-for="item in list" :key="item" class="item">
<div v-for="item in data_list" :key="item" class="item">
<div class="left" :style="'background-image: url(' + theme_bg_img.url_3 + ');background-size: 100% 100%;'">
<div class="price">
<span class="symbol">¥</span>
<span class="number">30</span>
<span v-if="item.type == '0'" class="symbol">¥</span>
<span class="number">{{ item.discount_value }}</span>
<span v-if="item.type == '1'" class="symbol">折</span>
</div>
<div class="name">满200元使用</div>
<div class="name text-line-1">{{ item.name }}</div>
</div>
<div class="right">
<div class="coupon-btn">领取</div>
@ -95,13 +100,14 @@
</template>
<template v-else-if="theme == '6'">
<div class="coupon-theme-6">
<div v-for="item in list" :key="item" class="item">
<div v-for="item in data_list" :key="item" class="item">
<div class="top">
<div class="price">
<span class="symbol">¥</span>
<span class="number">30</span>
<span v-if="item.type == '0'" class="symbol">¥</span>
<span class="number">{{ item.discount_value }}</span>
<span v-if="item.type == '1'" class="symbol">折</span>
</div>
<div class="name">满200元使用</div>
<div class="name text-line-1">{{ item.name }}</div>
</div>
<div class="bottom">
<div class="coupon-btn">立即领取</div>
@ -111,13 +117,14 @@
</template>
<template v-else-if="theme == '7'">
<div class="coupon-theme-7">
<div v-for="item in list" :key="item" class="item">
<div v-for="item in data_list" :key="item" class="item">
<div class="left">
<div class="price">
<span class="symbol">¥</span>
<span class="number">30</span>
<span v-if="item.type == '0'" class="symbol">¥</span>
<span class="number">{{ item.discount_value }}</span>
<span v-if="item.type == '1'" class="symbol">折</span>
</div>
<div class="name">满200元使用</div>
<div class="name text-line-1">{{ item.name }}</div>
</div>
<div class="right">
<div class="coupon-btn">立即领取</div>
@ -131,40 +138,63 @@
</template>
<script setup lang="ts">
import { common_styles_computer, gradient_computer, online_url } from '@/utils';
import { isEmpty, cloneDeep } from 'lodash';
import CouponAPI from '@/api/coupon';
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
});
const list = 10;
const form = computed(() => props.value?.content || {});
const new_style = computed(() => props.value?.style || {});
const style_container = ref('');
watch(
props.value,
(newVal, oldValue) => {
const new_content = newVal?.content || {};
const new_style = newVal?.style || {};
style_container.value = common_styles_computer(new_style.common_style);
},
{ immediate: true, deep: true }
);
// watchEffect(() => {
// if (form.value.data_type == '0') {
// if (!isEmpty(form.value.data_list)) {
// list.value = cloneDeep(form.value.data_list).map((item: any) => ({
// ...item.data,
// title: !isEmpty(item.new_title) ? item.new_title : item.data.title,
// new_cover: item.new_cover,
// }));
// } else {
// list.value = Array(4).fill(default_list);
// }
// } else {
// get_products();
// }
// });
const data_list = ref<any[]>([]);
const default_list = {
name: '满100减50',
type: '0',
discount_value: '30',
desc: '指定商品可用',
use_limit_type_name: '限领一张',
};
// 公共样式
const style_container = computed(() => {
return common_styles_computer(new_style.value.common_style);
});
// 内容标题
const content_title = computed(() => {
return form.value.title;
});
// 内容描述
const content_desc = computed(() => {
return form.value.desc;
});
const get_coupon = () => {
const { number, type } = form.value;
const params = {
number: number,
type: type.length > 0 ? type.join(',') : '',
};
// 获取商品列表
CouponAPI.getCoupon(params).then((res: any) => {
if (!isEmpty(res.data)) {
data_list.value = res.data;
} else {
data_list.value = Array(4).fill(default_list);
}
});
};
watchEffect(() => {
if (form.value.data_type == '0') {
if (!isEmpty(form.value.data_list)) {
data_list.value = cloneDeep(form.value.data_list);
} else {
data_list.value = Array(4).fill(default_list);
}
} else {
get_coupon();
}
});
const theme = computed(() => props.value?.content?.theme);
const theme_style = computed(() => {
const new_background = gradient_computer({ color_list: props.value?.style?.background, direction: props.value?.style?.direction }, false);
@ -232,7 +262,8 @@ onBeforeMount(() => {
border-radius: 1rem;
margin-top: 1rem;
.name {
padding: 0.5rem;
padding: 0.5rem 0.5rem 0 0.5rem;
margin-bottom: 0.5rem;
font-size: 1rem;
color: v-bind('theme_style.name_color');
}
@ -245,10 +276,10 @@ onBeforeMount(() => {
bottom: 0.3rem;
}
.number {
font-size: 3.8rem;
font-size: 3rem;
line-height: 2.4rem;
font-weight: 500;
padding-left: 0.4rem;
padding: 0 0.4rem;
}
}
.coupon-theme-1-content {
@ -286,6 +317,9 @@ onBeforeMount(() => {
width: 8.5rem;
height: 10rem;
padding: 0.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
.price {
color: v-bind('theme_style.price_color');
padding: 0.3rem 0;
@ -295,7 +329,7 @@ onBeforeMount(() => {
.number {
font-size: 2.6rem;
font-weight: 500;
padding-left: 0.4rem;
padding: 0 0.4rem;
}
}
.name {
@ -320,6 +354,7 @@ onBeforeMount(() => {
background: v-bind('theme_style.btn_background');
border-radius: 2.3rem;
margin-top: 0.5rem;
margin-bottom: 0.2rem;
}
}
}
@ -361,14 +396,14 @@ onBeforeMount(() => {
border-left: 0.1rem dashed v-bind('theme_3_border_style');
}
.symbol {
font-size: 2.4rem;
font-size: 1.8rem;
font-weight: 600;
}
.number {
font-size: 4.6rem;
font-size: 3.2rem;
font-weight: 600;
padding-left: 0.4rem;
line-height: 4rem;
padding: 0 0.4rem;
line-height: 3rem;
}
}
.text {
@ -377,6 +412,7 @@ onBeforeMount(() => {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
.name {
font-size: 1.8rem;
color: v-bind('theme_style.name_color');
@ -392,7 +428,6 @@ onBeforeMount(() => {
.limit {
color: v-bind('theme_style.limit_send_count');
font-size: 1.2rem;
line-height: 1.4rem;
}
}
}
@ -794,4 +829,7 @@ onBeforeMount(() => {
}
}
}
.hide-scrollbar .el-scrollbar__bar {
display: none;
}
</style>

18
src/components/model-coupon/model-coupon-content.vue
View File

@ -20,7 +20,7 @@
<div class="flex-col gap-20 w">
<drag v-if="form.data_list.length > 0" :data="form.data_list" :space-col="20" @remove="remove" @on-sort="on_sort">
<template #default="{ row }">
<div class="flex-1 cr-6 size-12">{{ row.title }}</div>
<div class="flex-1 cr-6 size-12">{{ row.name }}</div>
</template>
</drag>
<el-button class="w" @click="add">+添加</el-button>
@ -28,6 +28,11 @@
</el-form-item>
</template>
<template v-else>
<el-form-item label="文章分类">
<el-select v-model="form.type" multiple collapse-tags placeholder="请选择优惠券类型">
<el-option v-for="item in base_list.coupon_type_list" :key="item.value" :label="item.name" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="展示数量">
<slider v-model="form.number"></slider>
</el-form-item>
@ -46,7 +51,9 @@
<url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['coupon']" multiple @update:model-value="url_value_dialog_call_back"></url-value-dialog>
</template>
<script setup lang="ts">
import { online_url } from '@/utils';
import { online_url, is_obj_empty } from '@/utils';
import { commonStore } from '@/store';
const common_store = commonStore();
const props = defineProps({
value: {
type: Object,
@ -74,12 +81,19 @@ const base_list = reactive({
name: `风格${index + 1}`,
url: `${new_url.value}theme-${index + 1}.png`,
})),
coupon_type_list: [] as select_2[],
});
onMounted(async () => {
new_url.value = await online_url('/static/plugins/coupon/images/diy/').then((res) => res);
base_list.themeList.forEach((item) => {
item.url = `${new_url.value}${item.url}`;
});
nextTick(() => {
// 定时获取common_store.common.article_category的数据，直到拿到值或者关闭页面为止
if (!is_obj_empty(common_store.common.plugins) && !is_obj_empty(common_store.common.plugins.coupon) && common_store.common.plugins.coupon.coupon_type_list.length > 0) {
base_list.coupon_type_list = common_store.common.plugins.coupon.coupon_type_list;
}
});
});
const emit = defineEmits(['update:change-theme']);
const themeChange = (val: string) => {

5
src/types/global.d.ts vendored
View File

@ -7,6 +7,11 @@ declare global {
id: string | number;
name: string;
}
interface select_2 {
value: string | number;
name: string;
checked?: boolean;
}
// 可视化数据
interface commonComponentData {
src: string;

2
src/views/layout/components/main/default/coupon.ts
View File

@ -3,6 +3,7 @@ interface DefaultCoupon {
content: {
theme: string;
data_type: string;
type: string[];
number: number;
title: string;
desc: string;
@ -33,6 +34,7 @@ const defaultCoupoin: DefaultCoupon = {
content: {
theme: '1',
data_type: '0',
type: [],
number: 4,
// 只有主题4用到
title: '先领券 再购物',

2
src/views/layout/components/main/index.scss
View File

@ -153,7 +153,7 @@
position: absolute;
top: -0.2rem;
left: -0.2rem;
z-index: 1;
// z-index: 1;
border: 0.2rem solid $cr-main;
}
.plug-in-animation {