增加群聊功能
This commit is contained in:
184
pageChat/coupon-activity/detail.vue
Normal file
184
pageChat/coupon-activity/detail.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<view class="min-page bg-f7 u-font-28 color-333 u-p-t-32">
|
||||
<view class="bg-fff">
|
||||
<view class="default-box u-flex u-row-between border-bottom">
|
||||
<text class="font-bold">优惠券名称</text>
|
||||
<text>{{ couponActivity.couponJson.couponName }}</text>
|
||||
</view>
|
||||
<view class="default-box u-flex u-row-between border-bottom">
|
||||
<text class="font-bold">发放数量</text>
|
||||
<text>{{ couponActivity.giveNum }}</text>
|
||||
</view>
|
||||
<view class="default-box u-flex u-row-between border-bottom">
|
||||
<text class="font-bold">已领取数量</text>
|
||||
<text>{{ couponActivity.giveNum - couponActivity.leftNum }}</text>
|
||||
</view>
|
||||
<view class="default-box u-flex u-row-between border-bottom">
|
||||
<text class="font-bold">剩余数量</text>
|
||||
<text>{{ couponActivity.leftNum }}</text>
|
||||
</view>
|
||||
<view class="default-box u-flex u-row-between border-bottom">
|
||||
<text class="font-bold">已使用数量</text>
|
||||
<text>{{ couponActivity.useNum }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-row-right default-box u-p-r-32 bg-fff">
|
||||
<up-select
|
||||
:options="statusOptions"
|
||||
@select="selectItem"
|
||||
labelName="label"
|
||||
>
|
||||
<template #text>
|
||||
<view class="select">
|
||||
<text v-if="selStatus">{{ selStatus.label }}</text>
|
||||
<text v-else class="color-999">请选择状态</text>
|
||||
<up-icon name="arrow-down"></up-icon>
|
||||
</view>
|
||||
</template>
|
||||
<template #icon> <view></view></template>
|
||||
</up-select>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-32 table bg-fff">
|
||||
<view class="header">
|
||||
<view class="user">用户</view>
|
||||
<view class="gettime">领取时间</view>
|
||||
<view class="usetime">使用时间</view>
|
||||
<view class="status">状态</view>
|
||||
<view class="operation">操作</view>
|
||||
</view>
|
||||
<view class="body">
|
||||
<view class="item" v-for="(item,index) in 10" :key="index">
|
||||
<view class="user">用户昵称（40239）</view>
|
||||
<view class="gettime">2025/06/27 20:07:18）</view>
|
||||
<view class="usetime">2025/01/15 08:02:38</view>
|
||||
<view class="status">已使用</view>
|
||||
<view class="operation status3">失效</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<up-loadmore :status="isEnd ? 'nomore' : 'loading'"></up-loadmore>
|
||||
<view style="height: 40px"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onReachBottom, onLoad } from "@dcloudio/uni-app";
|
||||
import { reactive, ref, watch } from "vue";
|
||||
import { onShow } from "@dcloudio/uni-app";
|
||||
import go from "@/commons/utils/go.js";
|
||||
import * as chatCouponApi from "@/http/api/market/chat";
|
||||
const statusOptions = ref([
|
||||
{ label: "全部", value: "" },
|
||||
{ label: "未使用", value: 0 },
|
||||
{ label: "已使用", value: 1 },
|
||||
{ label: "已过期", value: 2 },
|
||||
]);
|
||||
const selStatus = ref("");
|
||||
const query = reactive({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
status: "",
|
||||
});
|
||||
const options = reactive({
|
||||
id: "",
|
||||
});
|
||||
|
||||
function selectItem(item) {
|
||||
selStatus.value = item;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => selStatus.value,
|
||||
(newVal, oldVal) => {
|
||||
query.status = newVal.value;
|
||||
refresh();
|
||||
}
|
||||
);
|
||||
|
||||
function refresh() {
|
||||
query.page = 1;
|
||||
isEnd.value = false;
|
||||
getList();
|
||||
}
|
||||
|
||||
const couponActivity = ref({});
|
||||
|
||||
const list = ref([]);
|
||||
const isEnd = ref(false);
|
||||
function getList() {
|
||||
chatCouponApi.chatCouponRecord({ ...query, id: options.id }).then((res) => {
|
||||
if (query.page == 1) {
|
||||
list.value = res.records;
|
||||
} else {
|
||||
list.value.push(...res.records);
|
||||
}
|
||||
isEnd.value = query.page >= res.totalPage * 1;
|
||||
});
|
||||
}
|
||||
|
||||
onReachBottom(() => {
|
||||
if (!isEnd.value) {
|
||||
query.page++;
|
||||
getList();
|
||||
}
|
||||
});
|
||||
onLoad((opt) => {
|
||||
Object.assign(options, opt);
|
||||
const item = uni.getStorageSync("cach_couponActivity");
|
||||
couponActivity.value = item || {};
|
||||
console.log(item);
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.default-box {
|
||||
padding: 24rpx 28rpx;
|
||||
}
|
||||
.select {
|
||||
padding: 20rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #d9d9d9;
|
||||
min-width: 322rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.table{
|
||||
.user{
|
||||
width: 142rpx;
|
||||
}
|
||||
.gettime{
|
||||
width: 172rpx;
|
||||
}
|
||||
.usetime{
|
||||
width: 158rpx;
|
||||
}
|
||||
.status{
|
||||
width: 84rpx;
|
||||
}
|
||||
.operation{
|
||||
width: 56rpx;
|
||||
&.status3{
|
||||
color: #FF383C;
|
||||
}
|
||||
}
|
||||
.header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 16rpx;
|
||||
color: #666;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
}
|
||||
.body{
|
||||
.item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 16rpx;
|
||||
border-bottom: 1px solid #E5E5E5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
252
pageChat/coupon-activity/index.vue
Normal file
252
pageChat/coupon-activity/index.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<view class="min-page bg-f7">
|
||||
<up-sticky>
|
||||
<view class="top">
|
||||
<my-tabs
|
||||
:list="tabs.list"
|
||||
v-model="tabs.selIndex"
|
||||
@change="tabsChange"
|
||||
textKey="label"
|
||||
></my-tabs>
|
||||
</view>
|
||||
</up-sticky>
|
||||
|
||||
<view class="list">
|
||||
<view class="item" v-for="(item, index) in list" :key="index">
|
||||
<view class="u-flex u-row-between">
|
||||
<view>{{ item.couponJson.couponName }}</view>
|
||||
|
||||
<view class="u-flex">
|
||||
<view class="status" :class="['status' + item.status]">{{
|
||||
returnStateText(item)
|
||||
}}</view>
|
||||
<view class="Id">ID:{{ item.id }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-28 desc">
|
||||
<view class="u-flex">
|
||||
<text class="color-666 text-right u-m-r-48" style="min-width: 96rpx"
|
||||
>使用门槛</text
|
||||
>
|
||||
<text class="color-333"
|
||||
>满{{ item.couponJson.fullAmount }}元可用</text
|
||||
>
|
||||
</view>
|
||||
<view class="u-flex u-m-t-16">
|
||||
<text class="color-666 text-right u-m-r-48" style="min-width: 96rpx"
|
||||
>有效期</text
|
||||
>
|
||||
<text class="color-333"
|
||||
>领券后{{ item.couponJson.validDays }}天过期</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-m-t-24">
|
||||
<view
|
||||
class="u-flex u-flex-col u-row-center u-font-24 u-col-center text-center"
|
||||
>
|
||||
<view class="color-333 font-bold">{{ item.giveNum }}</view>
|
||||
<view class="color-666 u-m-t-16">发放数量</view>
|
||||
</view>
|
||||
<view
|
||||
class="u-flex u-flex-col u-row-center u-font-24 u-col-center text-center"
|
||||
>
|
||||
<view class="color-333 font-bold">{{
|
||||
item.giveNum - item.leftNum
|
||||
}}</view>
|
||||
<view class="color-666 u-m-t-16">已领取</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="u-flex u-flex-col u-row-center u-font-24 u-col-center text-center"
|
||||
>
|
||||
<view class="color-333 font-bold">{{ item.leftNum }}</view>
|
||||
<view class="color-666 u-m-t-16">剩余</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="u-flex u-flex-col u-row-center u-font-24 u-col-center text-center"
|
||||
>
|
||||
<view class="color-333 font-bold">{{ item.useNum }}</view>
|
||||
<view class="color-666 u-m-t-16">已使用</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-16 u-flex u-row-right" style="gap: 16rpx">
|
||||
<view class="btn cancel" @click="cancel(item)">失效</view>
|
||||
<view class="btn primary" @click="toDetail(item)"> 查看</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<up-loadmore :status="isEnd ? 'nomore' : 'loading'"></up-loadmore>
|
||||
<view style="height: 40px"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onReachBottom } from "@dcloudio/uni-app";
|
||||
import { reactive, ref, watch } from "vue";
|
||||
import { onShow } from "@dcloudio/uni-app";
|
||||
import go from "@/commons/utils/go.js";
|
||||
import * as chatCouponApi from "@/http/api/market/chat";
|
||||
function toDetail(item) {
|
||||
uni.setStorageSync("cach_couponActivity", item);
|
||||
go.to("PAGES_CHAT_COUPON_ACTIVITY_DETAIL", {
|
||||
id: item.id,
|
||||
});
|
||||
}
|
||||
const tabs = reactive({
|
||||
list: [
|
||||
{
|
||||
label: "全部",
|
||||
value: "",
|
||||
},
|
||||
{
|
||||
label: "发放中",
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: "已失效",
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
selIndex: 0,
|
||||
});
|
||||
|
||||
const query = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
});
|
||||
function cancelChatCoupon(item) {
|
||||
chatCouponApi.chatCouponExpired(item.id).then((res) => {
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: "操作成功",
|
||||
icon: "none",
|
||||
});
|
||||
refresh();
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "取消失败",
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
function cancel(item) {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "确定取消该优惠券吗？",
|
||||
confirmText: "确定",
|
||||
cancelText: "取消",
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
cancelChatCoupon(item);
|
||||
} else if (res.cancel) {
|
||||
console.log("用户点击取消");
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
function returnStateText(item) {
|
||||
if (item.status == 1) {
|
||||
return "发放中";
|
||||
} else if (item.status == 3) {
|
||||
return "已失效";
|
||||
}
|
||||
}
|
||||
function tabsChange(e) {
|
||||
tabs.selIndex = e;
|
||||
refresh();
|
||||
}
|
||||
function refresh() {
|
||||
query.page = 1;
|
||||
isEnd.value = false;
|
||||
init();
|
||||
}
|
||||
const list = ref([]);
|
||||
|
||||
const isEnd = ref(false);
|
||||
function init() {
|
||||
chatCouponApi
|
||||
.chatCouponPage({ ...query, status: tabs.list[tabs.selIndex].value })
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
const arr = (res.records || []).map((v) => {
|
||||
return {
|
||||
...v,
|
||||
couponJson: JSON.parse(v.couponJson),
|
||||
};
|
||||
});
|
||||
if (query.page == 1) {
|
||||
list.value = arr;
|
||||
} else {
|
||||
list.value.push(...arr);
|
||||
}
|
||||
console.log(list.value);
|
||||
isEnd.value = query.page >= res.totalPage * 1;
|
||||
});
|
||||
}
|
||||
onReachBottom(() => {
|
||||
if (!isEnd.value) {
|
||||
query.page++;
|
||||
init();
|
||||
}
|
||||
});
|
||||
onShow(init);
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.top {
|
||||
padding: 20rpx 62rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
.list {
|
||||
padding: 32rpx 28rpx;
|
||||
.item {
|
||||
padding: 32rpx;
|
||||
background-color: #fff;
|
||||
margin-bottom: 28rpx;
|
||||
.desc {
|
||||
padding: 32rpx 28rpx;
|
||||
background: #f8f8f8;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.status {
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
&.status1 {
|
||||
color: rgba(52, 199, 89, 1);
|
||||
background-color: rgba(52, 199, 89, 0.15);
|
||||
}
|
||||
&.status3 {
|
||||
color: #999999;
|
||||
background-color: rgba(153, 153, 153, 0.15);
|
||||
}
|
||||
}
|
||||
.Id {
|
||||
padding: 8rpx 6rpx;
|
||||
margin-left: 36rpx;
|
||||
font-size: 18rpx;
|
||||
color: #999;
|
||||
border-radius: 4rpx;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
padding: 8rpx 42rpx;
|
||||
border-radius: 100rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
&.cancel {
|
||||
background-color: #f8f8f8;
|
||||
color: #999999;
|
||||
}
|
||||
&.primary {
|
||||
background-color: $my-main-color;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user