增加聊天功能

pageChat/coupon-activity/detail.vue

@@ -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>