增加群聊功能

pageChat/components/chat-item.vue

@@ -0,0 +1,64 @@
+<template>
+  <text class="" v-if="item.msg_type == 1">{{ item.content }}</text>
+  <image
+    v-if="item.msg_type == 2"
+    :src="item.image_url"
+    class="img"
+    mode="widthFix"
+    @click="previewImage(item.image_url)"
+  ></image>
+  <video
+    @error="videoErrorCallback"
+    v-if="item.msg_type == 5"
+    :src="item.image_url"
+    class="img"
+    mode="widthFix"
+    @click="previewVideo(item.video_url)"
+  ></video>
+  <view class="" v-if="item.msg_type == 4">
+    <view>发优惠券了！数量有限！快来领取吧！</view>
+    <view class="u-m-t-16 bg-f7 coupon u-flex">
+     <view class="left">
+        <view class="price">
+            <text class="u-font-32">¥</text>
+            <text style="font-size: 72rpx;">15</text>
+        </view>
+        <view class="u-font-24 color-999 no-wrap">满{{item.coupon.fullAmount}}可用</view>
+     </view>
+     <view class="right u-p-l-28">
+        <view class="u-font-32 ">优惠券名称叫什么</view>
+        <view class="u-font-24 color-999 u-m-t-8">有效期：2002.1.22-2022.1.22</view>
+     </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: {
+    type: Object,
+    default: () => {},
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+  .img {
+    width: 50vw;
+  }
+  .coupon{
+    padding: 16rpx 10rpx;
+    border-radius: 16rpx;
+    .price{
+        color: #FF1C1C;
+        font-weight: 700;
+    }
+    .left{
+        padding-right: 26rpx;
+        border-right: 1rpx solid #EDEDED;
+    }
+    .right{
+
+    }
+  }
+</style>

pageChat/components/choose-coupon.vue

@@ -0,0 +1,201 @@
+<template>
+  <view class="">
+    <up-popup :show="show" mode="bottom">
+      <view class="">
+        <view class="top u-flex u-row-between">
+          <text class="font-bold u-font-32 color-333">{{ title }}</text>
+          <up-icon size="18" name="close" @click="show = false"></up-icon>
+        </view>
+        <scroll-view
+          ref="couponScroll"
+          :scroll-y="true"
+          style="max-height: 50vh"
+          @scroll="scroll"
+          :scroll-top="scrollTop"
+        >
+          <view
+            v-for="(item, index) in list"
+            :key="index"
+            class="item"
+            @click="itemClick(item)"
+            :class="[selGoods && selGoods.id == item.id ? 'selected' : '']"
+          >
+            <view class="u-flex u-row-between">
+              <view class="u-flex gap-20">
+                <!-- <view class="u-flex" @click.stop="preview(item)">
+                  <up-image
+                    :src="item.coverImg"
+                    width="80rpx"
+                    height="80rpx"
+                  ></up-image>
+                </view> -->
+
+                <text class="u-font-32 color-333">{{ item.title }}</text>
+              </view>
+              <text class="u-font-32 color-red u-p-l-30"
+                ></text
+              >
+            </view>
+          </view>
+          <up-empty v-if="list.length == 0" class="u-p-30" text="暂无数据"></up-empty>
+        </scroll-view>
+        <view class="bottom">
+          <view class="btn cancel" @click="close">{{ cancelText }}</view>
+          <view class="btn success" @click="confirm">{{ confirmText }}</view>
+        </view>
+      </view>
+    </up-popup>
+  </view>
+</template>
+<script setup>
+import { ref, onMounted, watch } from "vue";
+const modelValue = defineModel({
+  type: String,
+  default: "",
+});
+const show = defineModel("show", {
+  type: String,
+  default: "",
+});
+const couponName = defineModel("couponName", {
+  type: String,
+  default: "",
+});
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "选择优惠券",
+  },
+  confirmText: {
+    type: String,
+    default: "确认",
+  },
+  cancelText: {
+    type: String,
+    default: "取消",
+  },
+  list: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const selGoods = ref("");
+function itemClick(item) {
+  if (selGoods.value && selGoods.value.id == item.id) {
+    selGoods.value = "";
+    return;
+  }
+  selGoods.value = item;
+}
+
+const scrollTop = ref(0);
+function scroll(e) {
+  scrollTop.value = e.detail.scrollTop;
+}
+function preview(item) {
+  uni.previewImage({
+    urls: item.images || [item.coverImg],
+  });
+}
+watch(
+  () => modelValue.value,
+  (newVal, oldVal) => {
+    console.log(newVal, oldVal);
+    selGoods.value = props.list.find((item) => item.id == newVal);
+    console.log(selGoods.value);
+    if (selGoods.value) {
+      couponName.value = selGoods.value.title;
+    }
+  }
+);
+
+watch(
+  () => props.list.length,
+  (newVal, oldVal) => {
+    selGoods.value = props.list.find((item) => item.id == modelValue.value);
+    console.log(selGoods.value);
+    if (selGoods.value) {
+      modelValue.value = selGoods.value.id;
+      couponName.value = selGoods.value.title;
+    }
+  }
+);
+
+function close() {
+  show.value = false;
+}
+
+const emit = defineEmits(["confirm"]);
+function confirm() {
+  if (!selGoods.value) {
+    uni.showToast({
+      title: "请选择优惠券",
+      icon: "none",
+    });
+    return;
+  }
+  modelValue.value = selGoods.value.id;
+  show.value = false;
+  emit("confirm", selGoods.value);
+}
+
+</script>
+
+<style lang="scss">
+.popup-content {
+  background: #fff;
+  width: 640rpx;
+  border-radius: 18rpx;
+}
+.top {
+  padding: 40rpx 48rpx;
+  border-bottom: 1px solid #d9d9d9;
+}
+.bottom {
+  padding: 48rpx 52rpx;
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid #d9d9d9;
+  gap: 50rpx;
+  .btn {
+    flex: 1;
+    text-align: center;
+    padding: 18rpx 60rpx;
+    border-radius: 100rpx;
+    font-size: 32rpx;
+    border: 2rpx solid transparent;
+    &.success {
+      background-color: $my-main-color;
+      color: #fff;
+    }
+    &.cancel {
+      border-color: #d9d9d9;
+      box-shadow: 0 4rpx 0 0 #00000005;
+    }
+  }
+}
+.item {
+  padding: 10rpx 30rpx;
+  border: 1px solid #d9d9d9;
+  margin: 10rpx;
+  border-radius: 8rpx;
+  transition: all 0.3s ease-in-out;
+  box-shadow: 0 0 10px transparent;
+  &.selected {
+    border-color: $my-main-color;
+    box-shadow: 0 0 10px $my-main-color;
+  }
+}
+.choose-goods {
+  display: flex;
+  padding: 24rpx;
+  align-items: center;
+  border-radius: 8rpx;
+  border: 2rpx solid #d9d9d9;
+  background: #fff;
+  font-size: 28rpx;
+  font-weight: 400;
+}
+</style>

pageChat/components/choose-goods.vue

@@ -0,0 +1,198 @@
+<template>
+  <view class="">
+    <view @click="show = true">
+      <slot v-if="$slots.default"> </slot>
+      <view v-else class="choose-goods u-flex u-row-between">
+        <text class="color-999" v-if="!modelValue">请选择商品</text>
+        <text class="color-333 u-m-r-32 u-line-1" v-else>{{ goodsName }}</text>
+        <up-icon size="14" name="arrow-down"></up-icon>
+      </view>
+    </view>
+
+    <up-popup :show="show" mode="bottom">
+      <view class="">
+        <view class="top u-flex u-row-between">
+          <text class="font-bold u-font-32 color-333">{{ title }}</text>
+          <up-icon size="18" name="close" @click="show = false"></up-icon>
+        </view>
+        <scroll-view :scroll-y="true" style="max-height: 50vh" @scroll="scroll" :scroll-top="scrollTop">
+          <view
+            v-for="(item, index) in list"
+            :key="index"
+            class="item"
+            @click="itemClick(item)"
+            :class="[selGoods&&selGoods.id == item.id ? 'selected' : '']"
+          >
+            <view class="u-flex u-row-between">
+              <view class="u-flex gap-20">
+                <view class="u-flex" @click.stop="preview(item)">
+                  <up-image
+                    :src="item.coverImg"
+                    width="80rpx"
+                    height="80rpx"
+                  ></up-image>
+                </view>
+
+                <text class="u-font-32 color-333">{{ item.name }}</text>
+              </view>
+              <text class="u-font-32 color-red u-p-l-30"
+                >¥{{ item.lowPrice }}</text
+              >
+            </view>
+          </view>
+        </scroll-view>
+        <view class="bottom">
+          <view class="btn cancel" @click="close">{{ cancelText }}</view>
+          <view class="btn success" @click="confirm">{{ confirmText }}</view>
+        </view>
+      </view>
+    </up-popup>
+  </view>
+</template>
+<script setup>
+import { ref, onMounted, watch } from "vue";
+import { getProductList } from "@/http/api/product.js";
+const show = ref(false);
+const modelValue = defineModel({
+  type: String,
+  default: "",
+});
+
+const goodsName = defineModel("goodsName", {
+  type: String,
+  default: "",
+});
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "选择商品",
+  },
+  confirmText: {
+    type: String,
+    default: "确认",
+  },
+  cancelText: {
+    type: String,
+    default: "取消",
+  },
+});
+
+const selGoods = ref("");
+function itemClick(item) {
+  if (selGoods.value&& selGoods.value.id == item.id) {
+    selGoods.value = "";
+    return;
+  }
+  selGoods.value = item;
+}
+const list = ref([]);
+
+const scrollTop = ref(0);
+function scroll(e) {
+  scrollTop.value = e.detail.scrollTop;
+}
+function preview(item) {
+  uni.previewImage({
+    urls: item.images || [item.coverImg],
+  });
+}
+watch(
+  () => modelValue.value,
+  (newVal, oldVal) => {
+    console.log(newVal, oldVal);
+    selGoods.value = list.value.find((item) => item.id == newVal);
+    console.log(selGoods.value);
+    if(selGoods.value){
+        goodsName.value = selGoods.value.name;
+    }
+  }
+);
+
+watch(()=>list.value.length,(newVal,oldVal)=>{
+    selGoods.value = list.value.find((item) => item.id == modelValue.value);
+    console.log(selGoods.value);
+    if(selGoods.value){
+        modelValue.value = selGoods.value.id;
+        goodsName.value = selGoods.value.name;
+
+    }
+})
+
+function close() {
+  show.value = false;
+}
+function confirm() {
+  if (!selGoods.value) {
+    uni.showToast({
+      title: "请选择商品",
+      icon: "none",
+    });
+    return;
+  }
+  modelValue.value = selGoods.value.id;
+  show.value = false;
+}
+onMounted(() => {
+  getProductList().then((res) => {
+    list.value = res;
+  });
+});
+</script>
+
+<style lang="scss">
+.popup-content {
+  background: #fff;
+  width: 640rpx;
+  border-radius: 18rpx;
+}
+.top {
+  padding: 40rpx 48rpx;
+  border-bottom: 1px solid #d9d9d9;
+}
+.bottom {
+  padding: 48rpx 52rpx;
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid #d9d9d9;
+  gap: 50rpx;
+  .btn {
+    flex: 1;
+    text-align: center;
+    padding: 18rpx 60rpx;
+    border-radius: 100rpx;
+    font-size: 32rpx;
+    border: 2rpx solid transparent;
+    &.success {
+      background-color: $my-main-color;
+      color: #fff;
+    }
+    &.cancel {
+      border-color: #d9d9d9;
+      box-shadow: 0 4rpx 0 0 #00000005;
+    }
+  }
+}
+.item {
+  padding: 10rpx 30rpx;
+  border: 1px solid #d9d9d9;
+  margin: 10rpx;
+  border-radius: 8rpx;
+  transition: all 0.3s ease-in-out;
+  box-shadow: 0 0 10px transparent;
+  &.selected {
+    border-color: $my-main-color;
+    box-shadow: 0 0 10px $my-main-color;
+  }
+}
+.choose-goods {
+  display: flex;
+  padding: 24rpx;
+  align-items: center;
+  border-radius: 8rpx;
+  border: 2rpx solid #d9d9d9;
+  background: #fff;
+  font-size: 28rpx;
+  font-weight: 400;
+}
+</style>

pageChat/components/coupon-list.vue

@@ -0,0 +1,92 @@
+<template>
+  <view>
+    <view
+      class="u-flex u-row-between u-m-b-24"
+      style="gap: 40rpx"
+      v-for="(item, index) in modelValue"
+      :key="index"
+    >
+      <view
+        class="choose-coupon u-flex-1 u-flex u-row-between"
+        @click="showCoupon(item, index)"
+      >
+        <template v-if="item.title">
+          <text>{{ item.title }}</text>
+          <view class="u-flex" @click.stop="item.title = ''">
+            <up-icon name="close" size="14"></up-icon>
+          </view>
+        </template>
+
+        <template v-else>
+          <text class="color-999">选择赠送券</text>
+          <up-icon name="arrow-down" size="14"></up-icon>
+        </template>
+      </view>
+      <view class="u-flex-1 u-flex">
+        <view class="u-flex-1 choose-coupon u-flex">
+        <input
+          class="u-flex-1"
+          placeholder=""
+          type="number"
+          v-model="item.num"
+          placeholder-class="color-999 u-font-28"
+        />
+        <text class="no-wrap color-999">张/1个码</text>
+      </view>
+      <view class="u-m-l-20">
+        <up-icon name="minus-circle-fill" color="#EB4F4F" size="18" @click="removeCoupon(index)"></up-icon>
+      </view>
+      </view>
+     
+    </view>
+    <chooseCoupon
+      v-model="chooseCouponData.couponId"
+      v-model:show="chooseCouponData.show"
+      @confirm="confirmCoupon"
+      :list="couponList"
+    ></chooseCoupon>
+  </view>
+</template>
+
+<script setup>
+import { reactive, ref, onMounted } from "vue";
+import chooseCoupon from "./choose-coupon.vue";
+import { couponPage } from "@/http/api/market/index.js";
+
+const chooseCouponData = reactive({
+  couponId: "",
+  show: false,
+  index: -1,
+  item: null,
+});
+const modelValue = defineModel({
+  type: Array,
+  default: () => [],
+});
+const couponList = ref([]);
+function showCoupon(item, index) {
+  chooseCouponData.couponId = item ? item.id : "";
+  chooseCouponData.show = true;
+  chooseCouponData.index = index;
+  chooseCouponData.item = item;
+}
+function confirmCoupon(e) {
+  modelValue.value[chooseCouponData.index].id = e.id;
+  modelValue.value[chooseCouponData.index].title = e.title;
+}
+function removeCoupon(index) {
+  modelValue.value.splice(index, 1);
+}
+onMounted(() => {
+  couponPage({ size: 999 }).then((res) => {
+    couponList.value = res.records;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.choose-coupon {
+  padding: 10rpx 20rpx;
+  border-radius: 8rpx;
+  border: 1px solid #d9d9d9;
+}
+</style>

pageChat/components/coupon.vue

@@ -0,0 +1,75 @@
+<template>
+  <view>
+    <view class="u-flex u-row-between u-m-b-24" style="gap: 40rpx">
+      <view
+        class="choose-coupon u-flex-1 u-flex u-row-between"
+        @click="showCoupon(item, index)"
+      >
+        <template v-if="couponName">
+          <text>{{ couponName }}</text>
+          <view class="u-flex" @click.stop="modelValue = ''">
+            <up-icon name="close" size="14"></up-icon>
+          </view>
+        </template>
+
+        <template v-else>
+          <text class="color-999">选择赠送券</text>
+          <up-icon name="arrow-down" size="14"></up-icon>
+        </template>
+      </view>
+    </view>
+    <chooseCoupon
+      v-model="chooseCouponData.couponId"
+      v-model:show="chooseCouponData.show"
+      @confirm="confirmCoupon"
+      :list="couponList"
+    ></chooseCoupon>
+  </view>
+</template>
+
+<script setup>
+import { reactive, ref, onMounted, computed } from "vue";
+import chooseCoupon from "./choose-coupon.vue";
+import { chatCoupon } from "@/http/api/market/chatCoupon.js";
+
+const chooseCouponData = reactive({
+  couponId: "",
+  show: false,
+  index: -1,
+  item: null,
+});
+const modelValue = defineModel({
+  default: "",
+});
+
+const couponName = computed(() => {
+  if (modelValue.value) {
+    const item = couponList.value.find((item) => item.id === modelValue.value);
+    return item?.title || "";
+  }
+  return "";
+});
+const couponList = ref([]);
+function showCoupon(item, index) {
+  chooseCouponData.couponId = modelValue.value;
+  chooseCouponData.show = true;
+}
+function confirmCoupon(e) {
+    modelValue.value=e.id
+}
+function removeCoupon(index) {
+  modelValue.value.splice(index, 1);
+}
+onMounted(() => {
+  chatCoupon({ size: 999 }).then((res) => {
+    couponList.value = res.records;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.choose-coupon {
+  padding: 10rpx 20rpx;
+  border-radius: 8rpx;
+  border: 1px solid #d9d9d9;
+}
+</style>

pageChat/components/date-time-picker.vue

@@ -0,0 +1,108 @@
+<template>
+  <view>
+    <view @click="open">
+      <slot v-if="$slots.default"> </slot>
+      <view v-else class="choose-goods u-flex u-row-between">
+        <text class="color-999" v-if="!startTime && !endTime"
+          >请选择日期范围</text
+        >
+        <text class="color-333 u-font-24 u-m-r-32 " v-else
+          >{{ startTime }} - {{ endTime }}</text
+        >
+        <view class="u-flex" v-if="startTime&&endTime" @click.stop="clear">
+          <up-icon name="close" size="14"></up-icon>
+        </view>
+        <up-icon size="14" name="arrow-right" v-else ></up-icon>
+
+      </view>
+    </view>
+    <my-date-pickerview
+      @confirm="datePickerConfirm"
+      mode="all"
+      ref="datePicker"
+    ></my-date-pickerview>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const datePicker = ref(null);
+const startTime = defineModel("startTime", {
+  default: () => "",
+  type: String,
+});
+const endTime = defineModel("endTime", {
+  default: () => "",
+  type: String,
+});
+
+function clear(){
+  startTime.value = "";
+  endTime.value = "";
+}
+function open() {
+  datePicker.value.toggle();
+}
+function datePickerConfirm(e) {
+  startTime.value = e.start;
+  endTime.value = e.end;
+  console.log(e);
+}
+</script>
+<style lang="scss">
+.popup-content {
+  background: #fff;
+  width: 640rpx;
+  border-radius: 18rpx;
+}
+.top {
+  padding: 40rpx 48rpx;
+  border-bottom: 1px solid #d9d9d9;
+}
+.bottom {
+  padding: 48rpx 52rpx;
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid #d9d9d9;
+  gap: 50rpx;
+  .btn {
+    flex: 1;
+    text-align: center;
+    padding: 18rpx 60rpx;
+    border-radius: 100rpx;
+    font-size: 32rpx;
+    border: 2rpx solid transparent;
+    &.success {
+      background-color: $my-main-color;
+      color: #fff;
+    }
+    &.cancel {
+      border-color: #d9d9d9;
+      box-shadow: 0 4rpx 0 0 #00000005;
+    }
+  }
+}
+.item {
+  padding: 10rpx 30rpx;
+  border: 1px solid #d9d9d9;
+  margin: 10rpx;
+  border-radius: 8rpx;
+  transition: all 0.3s ease-in-out;
+  box-shadow: 0 0 10px transparent;
+  &.selected {
+    border-color: $my-main-color;
+    box-shadow: 0 0 10px $my-main-color;
+  }
+}
+.choose-goods {
+  display: flex;
+  padding: 24rpx;
+  align-items: center;
+  border-radius: 8rpx;
+  border: 2rpx solid #d9d9d9;
+  background: #fff;
+  font-size: 28rpx;
+  font-weight: 400;
+  min-height: 90rpx;
+}
+</style>

pageChat/components/modal.vue

@@ -0,0 +1,85 @@
+<template>
+  <view>
+    <up-popup :show="show" mode="center">
+      <view class="popup-content">
+        <view class="top u-flex u-row-between">
+          <text class="font-bold u-font-32 color-333">{{ title }}</text>
+          <up-icon size="18" name="close" @click="close"></up-icon>
+        </view>
+        <up-line></up-line>
+        <scroll-view style="max-height: 50vh" :scroll-y="true">
+          <slot></slot>
+        </scroll-view>
+        <up-line></up-line>
+
+        <view class="bottom">
+          <view class="btn cancel" @click="close">{{ cancelText }}</view>
+          <view class="btn success" @click="confirm">{{ confirmText }}</view>
+        </view>
+      </view>
+    </up-popup>
+  </view>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  title: {
+    type: String,
+    default: "标题",
+  },
+  confirmText: {
+    type: String,
+    default: "保存",
+  },
+  cancelText: {
+    type: String,
+    default: "取消",
+  },
+});
+const show = defineModel({
+  type: Boolean,
+  default: false,
+});
+const emits = defineEmits(["close", "confirm"]);
+function close() {
+  show.value = false;
+  emits("close");
+}
+function confirm() {
+  emits("confirm");
+}
+</script>
+<style lang="scss">
+.popup-content {
+  background: #fff;
+  width: 640rpx;
+  border-radius: 18rpx;
+}
+.top {
+  padding: 40rpx 48rpx;
+}
+.bottom {
+  padding: 48rpx 52rpx;
+  display: flex;
+  justify-content: space-between;
+  gap: 50rpx;
+  .btn {
+    flex: 1;
+    text-align: center;
+    padding: 18rpx 60rpx;
+    border-radius: 100rpx;
+    font-size: 32rpx;
+    border: 2rpx solid transparent;
+    white-space: nowrap;
+    &.success {
+      background-color: $my-main-color;
+      color: #fff;
+    }
+    &.cancel {
+      border-color: #d9d9d9;
+      box-shadow: 0 4rpx 0 0 #00000005;
+    }
+  }
+}
+</style>

pageChat/components/shop-sel-action-sheet.vue

@@ -0,0 +1,49 @@
+<template>
+  <view>
+    <up-action-sheet
+    :round="14"
+      :actions="list"
+      :title="title"
+      :show="show"
+      closeOnClickAction
+      cancelText="取消"
+      @close="close"
+      @select="sheetSelect"
+    ></up-action-sheet>
+  </view>
+</template>
+
+<script setup >
+import { ref, reactive, onMounted } from "vue";
+import { getShopList } from "@/http/api/shop.js";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "请选择",
+  },
+});
+const list = ref([]);
+const show=defineModel({
+    name: "show",
+    default: false,
+})
+function close() {
+  show.value = false;
+}
+
+const emit=defineEmits(["choose"]);
+function sheetSelect(e) {
+    console.log(e);
+    emit("choose", e);
+}
+onMounted(() => {
+  getShopList().then((res) => {
+    list.value = res.map((v) => ({
+    ...v,
+      value: v.shopId,
+      name: v.shopName,
+    }));
+  });
+});
+</script>