VAVABUY/pages/dashboard/pack.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar title="打包" fixed border>
        <template #right>
          <navMenu :options="{ icon: 'icon-home', text: '主页' }" />
        </template>
      </Navbar>
      <view class="content">
        <view class="cont">
          <addressModel @confirm="addressConfirm" />

          <view class="logistics">
            <view class="logistics_item" @click="toLogistics">
              <logisticsList
                :item="logistics"
                :isShowBottom="false"
                v-if="islogistics"
              >
              </logisticsList>
              <view class="logistics_empty" v-else>
                <trans _t="请选择物流路线" />
                <up-icon name="arrow-right"></up-icon>
              </view>
            </view>
          </view>
          <view class="card_wrapper">
            <view class="card_item">
              <view
                class="card_item_wrapper"
                v-for="(item, index) in orderList"
                :key="index"
              >
                <view class="item_top">
                  <view class="item_left">
                    <image :src="item.pic_url" class="item_img"></image>
                  </view>
                  <view class="item_middle">
                    <view class="title">{{ item.goodTitle }}</view>
                    <view class="desc">{{ item.sku_desc }}</view>
                  </view>
                  <view class="item_right">
                    <view class="price">
                      <text>{{ symbol.symbol }}</text>
                      <text>{{ item.price }}</text>
                    </view>
                    <view class="total_num">X {{ item.total }}</view>
                  </view>
                </view>
                <view class="order_status">
                  <text>{{ item.status_txt }}&nbsp;</text>
                  <!-- <i class="icon-font icon-question2"></i> -->
                </view>
                <view class="text_box">
                  <trans class="title" _t="体积"></trans>
                  <text>{{ item?.volume }}m³</text>
                </view>
                <view class="text_box">
                  <trans class="title" _t="重量"></trans>
                  <text>{{ item?.weight }}kg</text>
                </view>
              </view>
              <!-- <view class="card_footer">
                <up-collapse :border="false" :value="collapseValue">
                  <up-collapse-item :name="item.seller_id" :border="false">
                    <template #title>
                      <view class="collapse_title">
                        <trans _t="店铺总数" />:
                      </view>
                    </template>
                    <template #value>
                      <view class="collapse_value">
                        <text>{{ symbol.symbol }} </text>
                        <text class="item_num">{{ item.allAmt }}</text>
                      </view>
                    </template>
                    <view class="card_footer_item" style="padding-top: 24rpx;">
                      <view class="item_label">
                        <trans _t="总价" />:
                      </view>
                      <view class="item_value">
                        <text>{{ symbol.symbol }} </text>
                        <text class="item_num">{{ item.allAmt }}</text>
                      </view>
                    </view>
                    <view class="card_footer_item">
                      <view class="item_label">
                        <trans _t="运费到仓库" />:
                      </view>
                      <view class="item_value">
                        <text>{{ symbol.symbol }}</text>
                        <text class="item_num">{{ item.postAmt }}</text>
                      </view>
                    </view>
                    <view class="card_footer_item">
                      <view class="item_label">
                        <trans _t="折扣" />:
                      </view>
                      <view class="item_value" style="color:var(--primary)">
                        <text>-{{ symbol.symbol }}</text>
                        <text class="item_num">{{ item.disAMt }}</text>
                      </view>
                    </view>
                  </up-collapse-item>
                </up-collapse>
              </view> -->
            </view>
          </view>
          <view class="friendly_reminder">
            <trans class="reminder_title" _t="温馨提示" />
            <view class="reminder_desc">
              <trans _t="提示内容" />
            </view>
          </view>
        </view>
        <view class="footer">
          <view class="footer_confirm">
            <view class="total_info">
              <view class="price_num">
                <text>{{ symbol.symbol }}</text>
                <text class="num">{{ deatil.money }}</text>
                <i
                  class="icon-font icon-question2 question-icon"
                  @click="openpack"
                ></i>
              </view>
            </view>
            <view class="total_btn" @click="submit">
              <trans _t="提交" />
            </view>
          </view>
        </view>
      </view>
    </view>

    <successModel ref="successModels" />
    <packModel ref="packModelRef" :deatil="deatil" />
  </Theme>
</template>
<script setup>
import Navbar from "@/components/navbar";
import navMenu from "@/components/nav_menu";
import Address from "@/components/address";
import { onLoad } from "@dcloudio/uni-app";
import popup from "@/components/popup";
import { ref, nextTick, computed, watch, onMounted } from "vue";
import { SHOP_PACKAGES_SUBMIT, SHOP_PACKAGES_CREATED } from "@/api";
import { Toast } from "@/utils";
import { useSystemStore, useTabbarStore, useShopStore } from "@/store";
import Tip from "@/components/tooltip";
import { t } from "@/locale";
import logisticsList from "./components/logistics_list";
import successModel from "./components/successModel";
import packModel from "./components/packModel";
import addressModel from "@/pages/address/components/addressModel";

const packModelRef = ref(null);
const successModels = ref(null);
const popRef = ref(null);
const addressRef = ref(null);
const useSystem = useSystemStore();
const useTabbar = useTabbarStore();
const useShop = useShopStore();
const symbol = computed(() => useSystem.getSymbol);
const confirmId = ref("");
const totalAmount = ref(0);
const selectAllChecked = ref(false);
const orderList = ref([]);
const address_id = ref("");
const couponId = ref("");
const isPage = ref("");
const tipShow = ref(false);
const deatil = ref({});

watch(selectAllChecked, (newVal) => {
  if (newVal) tipShow.value = false;
});

const logistics = computed(() => useShop.getLogistics);
const islogistics = computed(() => Object.keys(logistics.value).length > 0);

watch(
  () => logistics.value.id,
  (newId) => {
    if (newId && confirmId.value) {
      buyCart();
    }
  },
  { immediate: true }
);

const selectItem = ref(null);

const addressConfirm = (item) => {
  selectItem.value = item;
};
const openpack = () => {
  packModelRef.value && packModelRef.value.open();
};

const submit = () => {
  // if (!selectAllChecked.value) return tipShow.value = true;
  if (!selectItem.value.id) return Toast(t("请先添加收件地址"));
  if (!logistics.value.id) return Toast(t("请选择物流路线"));
  shopConfirm();
};
const toLogistics = () => {
  uni.navigateTo({ url: "/pages/dashboard/logistics" });
};
onLoad((options) => {
  confirmId.value = options.ids;
  nextTick(() => {
    buyCart();
  });
});

const shopConfirm = async () => {
  try {
    const res = await SHOP_PACKAGES_CREATED({
      ids: confirmId.value,
      address_id: selectItem.value.id,
      couponId: couponId.value,
      templateId: logistics.value.id,
    });
    successModels.value && successModels.value.open(res.data.id);
    // uni.switchTab({ url: '/pages/order/index' });
    // useTabbar.getPageCur('order')
    // uni.navigateTo({ url: `/pages/shop/payment?oid=${res.data.id}&type=package&money=${logistics.value?.first_price}` })
  } catch (error) {
    Toast(error.msg);
  }
};

const buyCart = async () => {
  try {
    const res = await SHOP_PACKAGES_SUBMIT({
      ids: confirmId.value,
      templateId: logistics.value.id,
    });
    deatil.value = res.data || {};
    orderList.value = res.data.lists || [];
  } catch (error) {
    Toast(error.msg);
  }
};
onMounted(() => {
  nextTick(() => {
    useShop.setAddressList();
  });
});
</script>
<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  background-color: var(--bg);
  .flex();
  flex-direction: column;
  overflow: hidden;
  max-height: 100vh;
  .content {
    flex-grow: 1;
    height: calc(100vh - 44px);
    overflow: hidden scroll;
    .flex();
    flex-direction: column;

    .cont {
      padding: 0 24rpx 48rpx;
      flex-grow: 1;
      overflow: hidden scroll;

      .logistics {
        margin-top: 24rpx;
        border: var(--bor);
        border-radius: 16rpx;

        &_item {
          padding: 10rpx 20rpx;
          border: var(--bor);
          border-radius: 16rpx;
          color: var(--text-01);

          .logistics_empty {
            height: inherit;
            flex: 1;
            .flex_position(space-between);
            color: var(--text-01);
            line-height: 60rpx;
            .size(28rpx);

            .icon-left {
              .size(36rpx);
              transform: rotate(180deg);
            }
          }
        }
      }

      .card_wrapper {
        padding: 16rpx 0;
        background-color: var(--light);
        margin-top: 24rpx;
        border-radius: 16rpx;

        .card_item {
          &_wrapper {
            border-top: 1px solid var(--bg);
            padding: 0 32rpx;
            padding-top: 16rpx;

            .item_top {
              .flex();
              column-gap: 16rpx;
              padding-bottom: 16rpx;

              .item_left {
                width: 128rpx;
                height: 128rpx;

                .item_img {
                  width: inherit;
                  height: inherit;
                  border-radius: 16rpx;
                }
              }

              .item_middle {
                flex: 1;

                .title {
                  color: var(--text);
                  .size(24rpx);
                  line-height: 48rpx;
                  font-weight: 700;
                  .ellipsis(2);
                }

                .desc {
                  color: var(--text-01);
                  .size(24rpx);
                  font-weight: 400;
                  line-height: 40rpx;
                  margin-top: 8rpx;
                }
              }

              .item_right {
                flex: 0 0 180rpx;
                text-align: right;

                .price {
                  .size(24rpx);
                  color: var(--text);
                  font-weight: 700;
                  line-height: 60rpx;
                }

                .total_num {
                  color: #7d8fb3;
                  .size(24rpx);
                  font-weight: 400;
                  line-height: 40rpx;
                }
              }
            }

            &:first-child {
              border-top: none;
            }

            .text_box {
              .flex_position(space-between, flex-end);
              margin: 8rpx 0;
              .size(24rpx);

              .title {
                color: var(--text-01);
              }

              .currency,
              .texts {
                color: var(--red);
                .size(28rpx);
                font-weight: 500;
              }

              .right_value {
                .flex();
              }
            }
          }

          .card_footer {
            /deep/ .u-collapse {
              .u-cell--clickable {
                background-color: transparent;
              }

              .u-cell__body {
                padding: 0 40rpx;
                height: 48rpx;
                margin-top: 4rpx;

                .u-cell__left-icon-wrap {
                  margin-right: 0;
                }
              }

              // .u-collapse-item__content{
              //   padding-top: 24rpx;
              // }
              .u-collapse-item__content__text {
                padding: 0 40rpx;
              }

              .uicon-arrow-right {
                color: var(--black) !important;
                .size() !important;
                font-weight: 700 !important;
              }
            }

            .collapse_title {
              .size(24rpx);
              color: var(--text);
              font-weight: 500;
            }

            .collapse_value {
              color: var(--primary);
              font-weight: 700;
              .size();

              .item_num {
                display: inline-block;
                margin-left: 8rpx;
              }
            }

            .card_footer_item {
              color: var(--text-01);
              .size(24rpx);
              height: 40rpx;
              .flex_position(space-between);
              box-sizing: content-box;

              .item_value {
                .item_num {
                  // .blocked();
                  display: inline-block;
                  margin-left: 8rpx;
                }
              }
            }
          }
        }
      }

      .friendly_reminder {
        padding: 16rpx 24rpx 24rpx;
        background-color: var(--light);
        margin-top: 20rpx;
        border-radius: 16rpx;
        color: #346;
        .size(24rpx);
        min-height: 260rpx;

        .reminder_title {
          font-weight: 700;
          color: var(--text);
          .size(28rpx);
          line-height: 60rpx;
        }
      }
    }

    .footer {
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      &_protocol {
        background-color: #fff3ea;
        padding: 16rpx 24rpx;

        .protocol {
          .flex_position(flex-end);
          flex-wrap: wrap;

          &_item {
            text-wrap: nowrap;
            color: var(--primary);
            .size(24rpx);
            margin-left: 8rpx;
          }
        }

        .agreed_protocol {
          .flex_position(flex-end);
          height: 60rpx;

          .text {
            .size(28rpx);
            color: var(--primary);
          }
        }
      }

      &_confirm {
        background-color: var(--light);
        border-top: var(--bor);
        height: 120rpx;
        .flex_position(flex-end);
        padding: 0 24rpx;

        .total_info {
          .ver(flex-end);
          flex-direction: column;

          .price_num {
            .hor();
            color: var(--red);
            .size();
            font-weight: 700;
            line-height: 48rpx;

            .num {
              display: inline-block;
              margin-left: 8rpx;
            }

            .icon-question2 {
              color: var(--text-01);
              font-weight: 400;
              .size(40rpx);
              margin-left: 8rpx;
            }
          }

          .price_text {
            color: var(--text-01);
            .size(24rpx);
            line-height: 40rpx;
          }
        }

        .total_btn {
          background-color: var(--black);
          color: var(--light);
          height: 76rpx;
          .size(28rpx);
          font-weight: 700;
          min-width: 180rpx;
          margin-left: 24rpx;
          border-radius: 16rpx;
          .flex_center();
          padding: 16rpx 30rpx;
        }
      }
    }
  }
}
</style>