yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

✨ 优惠劵列表：接入完成

pull/29/head^2
YunaiV 2023-12-16 10:40:04 +08:00
parent 77e2719837
commit 894f57a551
5 changed files with 428 additions and 431 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

270
pages/coupon/list.vue
View File

@ -2,98 +2,105 @@
<template> <template>
<s-layout title="优惠券" :bgStyle="{ color: '#f2f2f2' }"> <s-layout title="优惠券" :bgStyle="{ color: '#f2f2f2' }">
<su-sticky bgColor="#fff"> <su-sticky bgColor="#fff">
<su-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab"></su-tabs> <su-tabs
:list="tabMaps"
:scrollable="false"
@change="onTabsChange"
:current="state.currentTab"
/>
</su-sticky> </su-sticky>
<s-empty v-if="state.pagination.total === 0" icon="/static/coupon-empty.png" text="暂无优惠券"></s-empty> <s-empty
v-if="state.pagination.total === 0"
icon="/static/coupon-empty.png"
text="暂无优惠券"
/>
<!-- 情况一：领劵中心 -->
<template v-if="state.currentTab == '0'"> <template v-if="state.currentTab == '0'">
<view v-for="item in state.pagination.list" :key="item.id"> <view v-for="item in state.pagination.list" :key="item.id">
<s-coupon-list :data="item" @tap=" <s-coupon-list
:data="item"
@tap="
sheep.$router.go('/pages/coupon/detail', { sheep.$router.go('/pages/coupon/detail', {
data: JSON.stringify(item), data: JSON.stringify(item),
})"> })
"
>
<template #default> <template #default>
<button class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center" <button
:class="item.get_status != 'can_get' ? 'border-btn' : ''" @click.stop="getBuy(item.id)" class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
:disabled="item.get_status != 'can_get'"> :class="!item.canTake ? 'border-btn' : ''"
<!-- {{ item.status_text }} --> @click.stop="getBuy(item.id)"
{{item.status_text|| '立即使用' }} :disabled="!item.canTake"
>
{{ item.canTake ? '立即领取' : '已领取' }}
</button> </button>
</template> </template>
</s-coupon-list> </s-coupon-list>
</view> </view>
</template> </template>
<!-- 情况二：我的优惠劵 -->
<template v-else> <template v-else>
<view v-for="item in state.pagination.list" :key="item.id"> <view v-for="item in state.pagination.list" :key="item.id">
<s-coupon-list :data="item" type="user" @tap=" <s-coupon-list
:data="item"
type="user"
@tap="
sheep.$router.go('/pages/coupon/detail', { sheep.$router.go('/pages/coupon/detail', {
data: JSON.stringify(item), data: JSON.stringify(item),
}) })
"> "
>
<template #default> <template #default>
<button class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center" :class=" <button
item.status == 'can_get' || item.status == 'can_use' class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
? '' :class=" item.status !== 1 ? 'disabled-btn': ''"
: item.status == 'used' || item.status == 'expired' :disabled="item.status !== 1"
? 'disabled-btn' @click.stop="
: 'border-btn'
" :disabled="item.status != 'can_get' && item.status != 'can_use'" @click.stop="
sheep.$router.go('/pages/coupon/detail', { sheep.$router.go('/pages/coupon/detail', {
id: item.coupon_id, id: item.coupon_id,
user_coupon_id: item.id, user_coupon_id: item.id,
}) })
"> "
<!-- {{ item.status_text }} --> >
{{item.status_text|| '立即使用' }} {{ item.status === 1 ? '立即使用' : item.status === 2 ? '已使用' : '已过期' }}
</button> </button>
</template> </template>
</s-coupon-list> </s-coupon-list>
</view> </view>
</template> </template>
<!-- <uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{ <uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
contentdown: '上拉加载更多', contentdown: '上拉加载更多',
}" @tap="loadmore" /> --> }" @tap="loadMore" />
</s-layout> </s-layout>
</template> </template>
<script setup> <script setup>
import sheep from '@/sheep'; import sheep from '@/sheep';
import { import { onLoad, onReachBottom } from '@dcloudio/uni-app';
onLoad, import { reactive } from 'vue';
onReachBottom
} from '@dcloudio/uni-app';
import {
computed,
reactive
} from 'vue';
import _ from 'lodash'; import _ from 'lodash';
import { resetPagination } from '@/sheep/util';
import CouponApi from '@/sheep/api/promotion/coupon';
const pagination = {
data: [],
current_page: 1,
total: 1,
last_page: 1,
};
// 数据 // 数据
const state = reactive({ const state = reactive({
currentTab: 0, currentTab: 0, // 当前 tab
type: '1',
pagination: { pagination: {
data: [], list: [],
current_page: 1, total: 0,
total: 1, pageNo: 1,
last_page: 1, pageSize: 5
}, },
loadStatus: '', loadStatus: '',
type: '1',
}); });
const tabMaps = [ const tabMaps = [
// { {
// name: '领券中心', name: '领券中心',
// value: 'all', value: 'all',
// }, },
{ {
name: '已领取', name: '已领取',
value: '1', value: '1',
@ -108,136 +115,95 @@
}, },
]; ];
// TODO yunai:
function onTabsChange(e) { function onTabsChange(e) {
state.pagination = pagination
state.currentTab = e.index; state.currentTab = e.index;
state.type = e.value; state.type = e.value;
// if (state.currentTab == 0) { resetPagination(state.pagination)
// getData(); if (state.currentTab == 0) {
// } else { getData();
} else {
getCoupon(); getCoupon();
// }
}
async function getData(page = 1, list_rows = 5) {
state.loadStatus = 'loading';
const res = await sheep.$api.coupon.list({
list_rows,
page
});
if (res.error === 0) {
let couponlist = _.concat(state.pagination.data, res.data.data);
state.pagination = {
...res.data,
data: couponlist,
};
if (state.pagination.current_page < state.pagination.last_page) {
state.loadStatus = 'more';
} else {
state.loadStatus = 'noMore';
}
} }
} }
async function getCoupon(page = 1, list_rows = 5) { // 获得优惠劵模版列表
async function getData() {
state.loadStatus = 'loading'; state.loadStatus = 'loading';
let res = await sheep.$api.coupon.userCoupon({ const { data, code } = await CouponApi.getCouponTemplatePage({
status: state.type, pageNo: state.pagination.pageNo,
pageSize: list_rows, pageSize: state.pagination.pageSize,
pageNo: page
}); });
if (res.code === 0) { if (code !== 0) {
// 拦截修改数据 return;
let obj = {
1: '可用',
2: '已用',
3: '过期'
} }
let obj2 = { state.pagination.list = _.concat(state.pagination.list, data.list);
1: '满减', state.pagination.total = data.total;
2: '折扣' state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
} }
res.data.list = res.data.list.map(item => {
return {
...item,
enough: (item.usePrice / 100).toFixed(2),
amount: (item.discountPrice / 100).toFixed(2),
use_start_time: sheep.$helper.timeFormat(item.validStartTime, 'yyyy-mm-dd hh:MM:ss'),
use_end_time: sheep.$helper.timeFormat(item.validEndTime, 'yyyy-mm-dd hh:MM:ss'),
status_text: obj[item.status],
type_text: obj2[item.discountType]
}
});
if (page >= 2) {
let couponlist = _.concat(state.pagination.data, res.data.list);
state.pagination = { // 获得我的优惠劵
...res.data, async function getCoupon() {
data: couponlist, state.loadStatus = 'loading';
}; const { data, code } = await CouponApi.getCouponPage({
console.log(state.pagination, '拿到的优惠券数据'); pageNo: state.pagination.pageNo,
} else { pageSize: state.pagination.pageSize,
state.pagination = res.data; status: state.type
console.log(state.pagination, '拿到的优惠券数据'); });
} if (code !== 0) {
// if (state.pagination.current_page < state.pagination.last_page) { return;
// state.loadStatus = 'more';
// } else {
// state.loadStatus = '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';
} }
// 领取优惠劵
async function getBuy(id) { async function getBuy(id) {
const { const { code } = await CouponApi.takeCoupon(id);
error, if (code !== 0) {
msg return;
} = await sheep.$api.coupon.get(id); }
if (error === 0) {
uni.showToast({ uni.showToast({
title: msg, title: '领取成功',
}); });
setTimeout(() => { setTimeout(() => {
state.pagination = pagination resetPagination(state.pagination);
getData(); getData();
}, 1000); }, 1000);
} }
}
// 加载更多 // 加载更多
function loadmore() { function loadMore() {
if (state.loadStatus !== 'noMore') { if (state.loadStatus === 'noMore') {
if (state.currentTab == 0) { return;
getData(state.pagination.current_page + 1); }
state.pagination.pageNo++;
if (state.currentTab === 0) {
getData();
} else { } else {
getCoupon(state.pagination.current_page + 1);
}
}
}
onLoad((Option) => {
// if (Option.type === 'all' || !Option.type) {
// getData();
// } else {
// state.type = Option.type;
// Option.type === 'geted' ?
// () :
// Option.type === 'used' ?
// (state.currentTab = 1 && state.type = 2) :
// (state.currentTab = 2 && state.type = 3);
if (Option.type == 'geted') {
state.currentTab = 0
state.type = 1
} else if (Option.type == 'used') {
state.currentTab = 1
state.type = 2
} else {
state.currentTab = 2
state.type = 3
}
getCoupon(); getCoupon();
// } }
}
onLoad((Option) => {
// 领劵中心
if (Option.type === 'all' || !Option.type) {
getData();
// 我的优惠劵
} else {
state.type = Option.type;
Option.type === 'geted'
? (state.currentTab = 1)
: Option.type === 'used'
? (state.currentTab = 2)
: (state.currentTab = 3);
getCoupon();
}
}); });
onReachBottom(() => { onReachBottom(() => {
loadmore(); loadMore();
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

8
pages/index/search.vue
View File

@ -1,3 +1,4 @@
<!-- 搜索界面 -->
<template> <template>
<s-layout class="set-wrap" title="搜索" :bgStyle="{ color: '#FFF' }"> <s-layout class="set-wrap" title="搜索" :bgStyle="{ color: '#FFF' }">
<view class="ss-p-x-24"> <view class="ss-p-x-24">
@ -33,14 +34,18 @@
import { reactive } from 'vue'; import { reactive } from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app'; import { onLoad } from '@dcloudio/uni-app';
const state = reactive({ const state = reactive({
historyList: [], historyList: [],
}); });
// 搜索 // 搜索
function onSearch(keyword) { function onSearch(keyword) {
if (!keyword) return; if (!keyword) {
return;
}
saveSearchHistory(keyword); saveSearchHistory(keyword);
// 前往商品列表（带搜索条件）
sheep.$router.go('/pages/goods/list', { keyword }); sheep.$router.go('/pages/goods/list', { keyword });
} }
@ -72,6 +77,7 @@
}, },
}); });
} }
onLoad(() => { onLoad(() => {
state.historyList = uni.getStorageSync('searchHistory') || []; state.historyList = uni.getStorageSync('searchHistory') || [];
}); });

18
sheep/api/coupon.js
View File

@ -12,18 +12,7 @@ export default {
showLoading: false, showLoading: false,
}, },
}), }),
userCoupon: (params) =>
request2({
url: 'promotion/coupon/page',
method: 'GET',
params,
}),
// userCoupon: (params) =>
// request({
// url: 'user/coupon',
// method: 'GET',
// params,
// }),
detail: (id, user_coupon_id) => detail: (id, user_coupon_id) =>
request({ request({
url: 'coupon/' + id, url: 'coupon/' + id,
@ -37,9 +26,4 @@ export default {
url: 'coupon/get/' + id, url: 'coupon/get/' + id,
method: 'POST', method: 'POST',
}), }),
listByGoods: (id) =>
request({
url: 'coupon/listByGoods/' + id,
method: 'GET',
}),
}; };

28
sheep/api/promotion/coupon.js
View File

@ -1,6 +1,6 @@
import request from '@/sheep/request'; import request from '@/sheep/request';
export default { const CouponApi = {
// 获得优惠劵模板列表 // 获得优惠劵模板列表
getCouponTemplateListByIds: (ids) => { getCouponTemplateListByIds: (ids) => {
return request({ return request({
@ -17,4 +17,30 @@ export default {
params: { spuId, productScope, count }, params: { spuId, productScope, count },
}); });
}, },
// 获得优惠劵模版分页
getCouponTemplatePage: (params) => {
return request({
url: '/app-api/promotion/coupon-template/page',
method: 'GET',
params,
});
},
// 我的优惠劵列表
getCouponPage: (params) => {
return request({
url: '/app-api/promotion/coupon/page',
method: 'GET',
params,
});
},
// 领取优惠券
takeCoupon: (templateId) => {
return request({
url: '/app-api/promotion/coupon/take',
method: 'POST',
data: { templateId },
});
},
}; };
export default CouponApi;

111
sheep/components/s-coupon-list/s-coupon-list.vue
View File

@ -1,84 +1,99 @@
<template> <template>
<view class="ss-m-20" :style="{ opacity: disabled ? '0.5' : '1' }"> <view class="ss-m-20" :style="{ opacity: disabled ? '0.5' : '1' }">
<view class="content"> <view class="content">
<!-- <view <view
class="tag ss-flex ss-row-center" class="tag ss-flex ss-row-center"
:class=" :class="isDisable ? 'disabled-bg-color' : 'info-bg-color'"
data.status == 'expired' || data.status == 'used' ? 'disabled-bg-color' : 'info-bg-color' >
" {{ data.discountType === 1 ? '满减券' : '折扣券' }}
>{{ data.type_text }}</view </view>
> -->
<view class="title ss-m-x-30 ss-p-t-18"> <view class="title ss-m-x-30 ss-p-t-18">
<view class="ss-flex ss-row-between"> <view class="ss-flex ss-row-between">
<view class="value-text ss-flex-1 ss-m-r-10" :class=" <view
data.status == 'expired' || data.status == 'used' ? 'disabled-color' : 'info-color' class="value-text ss-flex-1 ss-m-r-10"
">{{ data.name }}</view> :class="isDisable ? 'disabled-color' : 'info-color'"
>
{{ data.name }}
</view>
<view> <view>
<view class="ss-flex ss-col-bottom" :class=" <view
data.status != 'expired' && data.status != 'used' ? 'price-text' : 'disabled-color' class="ss-flex ss-col-bottom"
"> :class="isDisable ? 'disabled-color' : 'price-text'"
<view class="value-reduce ss-m-b-10" v-if="data.type === 'reduce'">￥</view> >
<view class="value-price">{{ data.amount }}</view> <view class="value-reduce ss-m-b-10" v-if="data.discountType === 1">￥</view>
<view class="value-discount ss-m-b-10 ss-m-l-4" v-if="data.type === 'discount'">折</view> <view class="value-price">
{{
data.discountType === 1
? fen2yuan(data.discountPrice)
: data.discountPercent / 10.0
}}
</view>
<view class="value-discount ss-m-b-10 ss-m-l-4" v-if="data.discountType === 2"
>折</view
>
</view> </view>
</view> </view>
</view> </view>
<view class="ss-flex ss-row-between ss-m-t-16"> <view class="ss-flex ss-row-between ss-m-t-16">
<view class="sellby-text" :class=" <view
data.status == 'expired' || data.status == 'used' class="sellby-text"
? 'disabled-color' :class=" isDisable ? 'disabled-color' : 'subtitle-color'"
: 'subtitle-color' v-if="data.validityType === 2"
"> >
{{'有效期：' + data.use_start_time.substring(0, 11) }}至 有效期：领取后 {{ data.fixedEndTerm }} 天内可用
{{ data.use_end_time.substring(0, 11) }} </view>
<!-- {{ <view
type === 'user' class="sellby-text"
? '有效期：' + data.use_start_time.substring(0, 11) :class=" isDisable ? 'disabled-color' : 'subtitle-color'"
: '领取时间：' + data.get_start_time.substring(0, 11) v-else
}}至 >
{{ 有效期: {{ sheep.$helper.timeFormat(data.validStartTime, 'yyyy-mm-dd') }} 至
type === 'user' {{ sheep.$helper.timeFormat(data.validEndTime, 'yyyy-mm-dd') }}
? data.use_end_time.substring(0, 11) </view>
: data.get_end_time.substring(0, 11) <view
}} --> class="value-enough"
:class="isDisable ? 'disabled-color' : 'subtitle-color'"
>
满 {{ fen2yuan(data.usePrice) }} 可用
</view> </view>
<view class="value-enough" :class="
data.status == 'expired' || data.status == 'used'
? 'disabled-color'
: 'subtitle-color'
">满{{ data.enough }}可用</view>
</view> </view>
</view> </view>
</view> </view>
<!-- TODO 芋艿：可优化，增加优惠劵的描述 -->
<view class="desc ss-flex ss-row-between"> <view class="desc ss-flex ss-row-between">
<view> <view>
<view class="desc-title"> <view class="desc-title">{{ data.description }}</view>
{{ data.description }}
</view>
<view> <view>
<slot name="reason"> <slot name="reason" />
</slot>
</view> </view>
</view> </view>
<view> <view>
<slot></slot> <slot />
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script setup> <script setup>
import { import { computed, reactive } from 'vue';
reactive import { fen2yuan } from '../../hooks/useGoods';
} from 'vue'; import sheep from '../../index';
import sheep from '@/sheep';
const state = reactive({ const state = reactive({
stateMap: { stateMap: {
0: '立即领取', 0: '立即领取',
1: '去使用', 1: '去使用',
}, },
}); });
const isDisable = computed(() => {
if (props.type === 'coupon') {
return false;
}
return props.data.status !== 1;
});
// 接受参数 // 接受参数
const props = defineProps({ const props = defineProps({
data: { data: {
@ -91,7 +106,7 @@
}, },
type: { type: {
type: String, type: String,
default: 'coupon', default: 'coupon', // coupon 优惠劵模版；user 用户优惠劵
}, },
}); });
</script> </script>