313 lines
7.4 KiB
Vue
313 lines
7.4 KiB
Vue
<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 share"
|
|
@click="toShare(item)"
|
|
v-if="item.status == 1"
|
|
>
|
|
分享</view
|
|
>
|
|
<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 * as chatApi from "@/http/php/chat";
|
|
|
|
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";
|
|
|
|
import { useChatStore } from "@/store/chat";
|
|
|
|
const chatStore = useChatStore();
|
|
chatStore.onReceiveMsg = (msg) => {};
|
|
chatStore.connectSocket();
|
|
|
|
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 sendMsg(msg) {
|
|
chatStore.sendMessage({
|
|
to_id: groupInfo.value.id,
|
|
to_user_type: groupInfo.value.id,
|
|
chat_type: 2,
|
|
content: msg.value,
|
|
image_url: "",
|
|
order_id: "",
|
|
session_id: options.session_id,
|
|
...msg,
|
|
});
|
|
}
|
|
function toShare(item) {
|
|
const hasGet=item.couponJson.giveNum-item.couponJson.leftNum
|
|
sendMsg({
|
|
coupon: { ...item.couponJson, title: item.title,activity_id:item.id, hasGet:hasGet<=0?0:hasGet} ,
|
|
chat_coupon_id:item.id,
|
|
msg_type: 4,
|
|
});
|
|
|
|
uni.navigateBack({
|
|
delta: 2,
|
|
});
|
|
|
|
}
|
|
|
|
const options = reactive({});
|
|
const groupInfo = ref({});
|
|
onLoad((opt) => {
|
|
Object.assign(options, opt);
|
|
chatApi
|
|
.groupInfo({
|
|
group_id: options.group_id,
|
|
})
|
|
.then((res) => {
|
|
groupInfo.value = res || {};
|
|
});
|
|
});
|
|
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;
|
|
}
|
|
&.share {
|
|
background-color: #ecf5ff;
|
|
color: $my-main-color;
|
|
border: 1px solid $my-main-color;
|
|
}
|
|
}
|
|
</style>
|