增加聊天功能
This commit is contained in:
310
pageChat/coupon-activity/index.vue
Normal file
310
pageChat/coupon-activity/index.vue
Normal file
@@ -0,0 +1,310 @@
|
||||
<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) {
|
||||
sendMsg({
|
||||
coupon: { ...item.couponJson, title: item.title },
|
||||
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>
|
||||
Reference in New Issue
Block a user