增加聊天功能

pageChat/components/chat-item.vue

@@ -0,0 +1,152 @@
+<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>{{ item.coupon.title }}</view>
+    <view class="u-m-t-16 bg-f7 coupon u-flex" style="min-width: 500rpx;">
+      <template v-if="item.coupon.type == 1">
+        <view class="left">
+          <view class="price">
+            <text class="u-font-32">¥</text>
+            <text style="font-size: 72rpx">{{
+              item.coupon.discountAmount
+            }}</text>
+          </view>
+          <view class="u-font-24 color-999 no-wrap"
+            >满{{ item.coupon.fullAmount }}可用</view
+          >
+        </view>
+      </template>
+      <template v-if="item.coupon.type == 2">
+        <view class="left">
+          <view class="price">
+            <text class="u-font-32"
+              >商品兑换券</text
+            >
+          </view>
+          <view class="u-font-24 color-999 no-wrap"
+            >满{{ item.coupon.fullAmount }}可用</view
+          >
+        </view>
+      </template>
+
+      <template v-if="item.coupon.type == 3">
+        <view class="left">
+          <view class="price">
+            <text class="u-font-32"
+              >{{ item.coupon.discountRate / 100 }}折</text
+            >
+          </view>
+          <view class="u-font-24 color-999 no-wrap"
+            >满{{ item.coupon.fullAmount }}可用</view
+          >
+        </view>
+      </template>
+      <template v-if="item.coupon.type == 4">
+        <view class="left">
+          <view class="price">
+            <text class="u-font-32"
+              >第二件半价券</text
+            >
+          </view>
+          
+        </view>
+      </template>
+      <template v-if="item.coupon.type == 6">
+        <view class="left">
+          <view class="price">
+            <text class="u-font-32"
+              >买一送一券</text
+            >
+          </view>
+          
+        </view>
+      </template>
+
+      <view class="right u-p-l-28">
+        <view class="u-font-32">{{ item.coupon.couponName }}</view>
+        <view class="u-font-24 color-999 u-m-t-8"
+          >有效期：{{ returnTime(item.coupon) }}</view
+        >
+      </view>
+    </view>
+    <view class="u-flex u-row-center u-m-t-32">
+      <!-- <view class="lingqu hasGet" v-if="item.coupon_claim">已领取</view> -->
+      <view class="lingqu" @click="getCoupon()" >领取</view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+const props = defineProps({
+  item: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const emits = defineEmits(["getCoupon"]);
+function getCoupon() {
+  emits("getCoupon", props.item);
+}
+function previewImage(url) {
+  uni.previewImage({
+    urls: [url],
+  });
+}
+function returnTime(coupon){
+    let startTime = coupon.useStartTime;
+    let endTime = coupon.useEndTime;
+    if(startTime && endTime){
+      return startTime.split(' ')[0] + '-' + endTime.split(' ')[0]
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.img {
+  width: 50vw;
+}
+.coupon {
+  padding: 16rpx 10rpx;
+  border-radius: 16rpx;
+  .price {
+    color: #ff1c1c;
+    font-weight: 700;
+  }
+  .left {
+    width: 112rpx;
+    margin-right: 26rpx;
+  }
+  .right {
+    border-left: 1rpx solid #ededed;
+
+  }
+}
+.lingqu {
+  background-color: #e8ad7b;
+  line-height: 48rpx;
+  font-size: 28rpx;
+  padding: 6rpx 70rpx;
+  color: #fff;
+  border-radius: 140rpx;
+  &.hasGet {
+    background-color: #eee;
+    color: #999;
+  }
+}
+</style>