优化

2024-03-31 18:19:26 +08:00
parent b502385272
commit 60cb832b02
10 changed files with 107 additions and 109 deletions
--- a/src/pages/mall/subs/components/coupon-dialog.vue
+++ b/src/pages/mall/subs/components/coupon-dialog.vue
@@ -3,11 +3,11 @@
    <view class='popup-content c-flex-column'>
      <view class='c-flex-row'>
        <text>优惠券</text>
-        <text @click.stop='close'>确定</text>
+        <text @click.stop='confirm'>确定</text>
      </view>

      <scroll-view scroll-y>
-        <coupon-item v-for='(item,index) in coupons' :item='item' :key='index' />
+        <coupon-item v-for='(item,index) in coupons' :item='item' :key='index' @confirm='confirmItem(index)' />
      </scroll-view>
    </view>
  </uni-popup>
@@ -15,62 +15,53 @@

 <script lang='ts' setup>
 import CouponItem from '../components/coupon-item.vue';
+import { getCompanyId } from '@/utils';
+import { getCouponList } from '@/api/user';
+import { CouponBean } from '@/api/user/types';
+import { useUserStore } from '@/store';

 const popupRef = ref();
-const coupons = ref([{
-  id: 1,
-  title: '优惠券',
-  desc: '满100减10',
-  price: 100,
-  threshold: 10,
-  priceDesc: '满100减10',
-  useTime: '2021-12-31',
-  status: 1,
-  useStatus: '未使用'
-}, {
-  id: 1,
-  title: '优惠券',
-  desc: '满100减10',
-  price: 200,
-  threshold: 80,
-  priceDesc: '满100减10',
-  useTime: '2021-01-01',
-  status: 1,
-  useStatus: '未使用'
-}, {
-  id: 1,
-  title: '优惠券',
-  desc: '满100减10',
-  price: 300,
-  threshold: 60,
-  priceDesc: '满100减10',
-  useTime: '2023-12-31',
-  status: '0',
-  useStatus: '未使用'
-}, {
-  id: 1,
-  title: '优惠券',
-  desc: '满100减10',
-  price: 50,
-  threshold: 50,
-  priceDesc: '满100减10',
-  useTime: '2021-10-31',
-  status: 0,
-  useStatus: '未使用'
-}, {
-  id: 1,
-  title: '优惠券',
-  desc: '满1000减30',
-  price: 200,
-  threshold: 30,
-  priceDesc: '满100减10',
-  useTime: '2024-12-31',
-  status: 0,
-  useStatus: '未使用'
-}]);
+
+const userStore = useUserStore();
+const { userInfo } = storeToRefs(userStore);
+
+const props = defineProps({
+  orderPrice: {
+    type: Number,
+    default: 0
+  }
+});
+const emits = defineEmits(['confirm']);
+const coupons = ref<CouponBean[]>([]);
+
+const fetchData = async (status: number) => {
+  const { list } = await getCouponList({
+    companyId: getCompanyId(),
+    memberId: userInfo.value?.id,
+    status: status,
+    pageNum: 1,
+    pageSize: 100
+  });
+  list.filter((item: CouponBean) => item.status = (props.orderPrice >= item.threshold) ? 0 : 1);
+  coupons.value = list;
+};

 const show = () => {
  popupRef.value.open();
+  fetchData(0);
+};
+
+const confirmItem = (index: number) => {
+  coupons.value.forEach(item => {
+    item.checked = false;
+  });
+  coupons.value[index].checked = !coupons.value[index].checked;
+};
+
+
+const confirm = () => {
+  close();
+  emits('confirm', coupons.value.filter(item => item.checked)[0]);
 };

 const close = () => {
--- a/src/pages/mall/subs/components/coupon-item.vue
+++ b/src/pages/mall/subs/components/coupon-item.vue
@@ -1,28 +1,35 @@
 <template>
-  <view class='coupon-content'>
-    <image v-if='item.status==0' :src='assetsUrl("bg_coupon.png")' />
-    <image v-else-if='item.status==1' :src='assetsUrl("bg_coupon_expired.png")' />
-    <view class='left-content accent-text-color' :class='{"left-content-disabled": item.status==1}'>
-      <text>{{ item.price }}</text>
-      <text>满{{ item.threshold }}元可用</text>
+  <view class='coupon-content' @click.stop='()=>{emits("confirm")}'>
+    <image v-if='item?.status==0' :src='assetsUrl("bg_coupon.png")' />
+    <image v-else-if='item?.status==1' :src='assetsUrl("bg_coupon_expired.png")' />
+    <view class='left-content accent-text-color' :class='{"left-content-disabled": item?.status==1}'>
+      <text>{{ item?.reduce }}</text>
+      <text>满{{ item?.threshold }}元可用</text>
    </view>

-    <view class='right-content accent-text-color' :class='{"right-content-disabled": item.status==1}'>
-      <text>{{ item?.title }}</text>
-      <text>有效期至{{ item.useTime }}</text>
-      <image class='checkbox' :src='assetsUrl("ic_checkbox_active.png")' />
+    <view class='right-content accent-text-color' :class='{"right-content-disabled": item?.status==1}'>
+      <text>{{ item?.name }}</text>
+      <text>有效期至{{ dayjs(item?.startTime).format('YYYY-MM-DD') }}</text>
+      <image v-if='item?.status==0' class='checkbox'
+             :src='assetsUrl(item.checked?"ic_checkbox_active.png":"ic_checkbox_normal.png")'
+      />
    </view>
  </view>

 </template>

 <script lang='ts' setup>
+import { PropType } from 'vue';

 import { assetsUrl } from '@/utils/assets';
+import { CouponBean } from '@/api/user/types';
+import dayjs from 'dayjs';

 defineProps({
-  item: Object
+  item: Object as PropType<CouponBean>
 });
+
+const emits = defineEmits(['confirm']);
 </script>

 <style lang='scss' scoped>
@@ -74,7 +81,7 @@ defineProps({
    position: relative;
    flex: 1;
    justify-content: center;
-    margin-left: 100rpx;
+    margin-left: 60rpx;

    text:nth-of-type(1) {
      font-size: 30rpx;
--- a/src/pages/mall/subs/order/order-confirm.vue
+++ b/src/pages/mall/subs/order/order-confirm.vue
@@ -67,7 +67,7 @@
        <text class='card-view-title'>优惠券
          <text style='font-size: 22rpx;color: #F32B2B;'>已选最大优惠</text>
        </text>
-        <view class='card-view-value' style='color: #F32B2B;margin: 0'>-￥20
+        <view class='card-view-value' style='color: #F32B2B;margin: 0'>-￥{{ checkedCoupon?.reduce || 0 }}
          <image :src='assetsUrl("ic_arrow_right_gray.png")' />
        </view>
      </view>
@@ -96,7 +96,7 @@
    </view>
  </view>
  <payment-dialog ref='paymentDialogRef' @change='args => paymentType=args' />
-  <coupon-dialog ref='couponDialogRef' />
+  <coupon-dialog ref='couponDialogRef' @confirm='confirmCoupon' :order-price='500' />
 </template>

 <script lang='ts' setup>
@@ -105,14 +105,16 @@ import PaymentDialog from '@/components/payment-dialog.vue';
 import CouponDialog from '@/pages/mall/subs/components/coupon-dialog.vue';
 import { goPath } from '@/utils';
 import { orderCreate } from '@/api/goods';
+import { CouponBean } from '@/api/user/types';

 const couponDialogRef = ref();
 const paymentDialogRef = ref();
 const paymentType = ref(0);
 const tabIndex = ref(0);

+const checkedCoupon = ref<CouponBean>();
+
 const changePayment = () => {
-  console.log(paymentDialogRef);
  paymentDialogRef.value.show();
 };

@@ -120,6 +122,10 @@ const showCouponDialog = () => {
  couponDialogRef.value.show();
 };

+const confirmCoupon = (item: CouponBean) => {
+  checkedCoupon.value = item;
+};
+
 const payment = async () => {
  const params = {
    'discount': 0,
--- a/src/pages/mall/subs/shoppingcart/index.vue
+++ b/src/pages/mall/subs/shoppingcart/index.vue
@@ -63,7 +63,7 @@

 import { assetsUrl } from '@/utils/assets';
 import useShoppingCartStore from '@/store/modules/shoppingcart';
-import { goPath } from '@/utils';
+import { goPath, showToast } from '@/utils';
 import { GoodsBean, StockBean } from '@/api/goods/types';
 import SkuDialog from '@/components/sku-dialog.vue';
 import { ref } from 'vue';
@@ -127,6 +127,10 @@ const countChange = (index: number, isPlus: Boolean) => {
 };

 const settlement = () => {
+  if(shoppingCartList.value.filter(res => res.checked).length == 0) {
+    showToast('请选择商品');
+    return;
+  }
  goPath('/pages/mall/subs/order/order-confirm');
 };
 </script>