zh_order_food_xcx/pages/index/search-record.vue

<template>
  <view class="flex-common-css iPhone-bottom box-border-box bgc-f">
    <image class="order-bg" src="@/static/img/order-food/ss-bg.png" mode=""></image>
    <newNav textName="搜索商品" class="mb-20" titleColor='#333' leftIconColor='#333'></newNav>

    <view class="plr-24 box-border-box">
      <view class="s-input box-border-box bgc-f align-items-center flex-justify-space b-rad-200 z-3">
        <view class="align-items-center flex-1 mr-16">
          <image class="wh36 mr-16 flex-shrink0" src="/static/img/order-food/ss-icon.png" mode=""></image>
          <input class="input-box fs-32" placeholder-class="fc-9" v-model="search" type="text" placeholder="请搜索商品"
            @input="clearInput">
        </view>
        <view class="align-items-center">
          <image v-if="showClearIcon" @click="clearIcon" class="qk-icon mr-24" src="@/static/img/order-food/qk-icon.png"
            mode="">
          </image>
          <view class="input-buttom fs-28 fc-f fw-500 b-rad-200 text-align-center" @click="toList()">搜索</view>
        </view>
      </view>
    </view>

    <view class="scroll-view-css bgc-f seacrh-info box-border-box p-32" v-if="goodsList.length<=0">
      <view class="flex-justify-space mb-32">
        <view class="fs-32 fw-600 fc-3">搜索历史</view>
        <view class="align-items-center" v-if="list.length > 0">
          <view @click="isOpen=!isOpen" class="">{{!isOpen?'收起':'展开'}}</view>
          <view @click="isOpen=!isOpen" :class="!isOpen?'down':'up'">
            <uni-icons type="right" size="14" color="#999"></uni-icons>
          </view>
          <view class="view-x"></view>
          <uni-icons @click="delList()" type="trash" size="18" color="#999"></uni-icons>
        </view>
      </view>
      <view id='' :class="isOpen?'hide-h':''" class="flex-wrap-wrap mb-50 search-history" v-if="list.length > 0">
        <view class="fs-28 list-item text-overflow-ellipsis-one" @click="toList(item)" v-for="(item,i) in list"
          :key="i">{{item}}</view>
      </view>
    </view>
    <scroll-view scroll-y="true" class="scroll-view-css bgc-F5F4F9 p-32 box-border-box" v-else @scrolltolower="scrolltolower">
      <!-- <view class="scroll-view-css bgc-F5F4F9 p-32 box-border-box" v-else> -->
      <view class="menu-list flex-justify-space bgc-f p-24 box-border-box b-rad-20 mb-16" v-for="(info,k) in goodsList"
        :key="k" :id="'goods_id'+ info.goods_id">
        <image class="flex-shrink0 goods_img mr-20" :src="info.goods_image" mode="scaleToFill"></image>
        <view class="menu-list-right flex-direction flex-justify-space">
          <view class="mb-8">
            <view class="mb-4 goods-name text-overflow-ellipsis fs-32 fw-600">
              {{info.goods_name}}
            </view>
            <view class="text-overflow-ellipsis-one fw-400 fc-9 fs-24 mb-2 goods-name" v-if="info.spec_type == 1">
              {{info.goods_desc?info.goods_desc:''}}
            </view>
          </view>
          <view class="flex-justify-space align-items-flex-end">
            <view class="">
              <span class="fs-24 fw-400 fc-3">￥</span>
              <span class="fs-36 fw-b fc-3">{{info.seckill_money>0?info.seckill_money:info.price}}</span>
              <span class="fs-24 fc-9">/份起</span>
            </view>
            <view class="display-flex align-items-center" v-if="info.spec_type == 1">
              <image v-show="info.num > 0" class="wh-44" @click="addred(1,info)"
                src="@/static/img/order-food/reduce-img.png" mode=""></image>
              <view v-show="info.num > 0" class="right-only-right-2 text-align-center fs-28 fw-400">
                {{info.num}}
              </view>
              <image class="wh-44" src="@/static/img/order-food/add-img.png" @click="addred(2,info)" mode=""></image>
            </view>
            <view v-else class="right-only-right text-align-center b-rad-200" @click="addred(3,info)">
              <view class="fw-500 fs-28 fc-f">
                选规格
              </view>
              <view class="selectedNum" v-if="info.num>0">
                {{info.num}}
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- </view> -->
    </scroll-view>

    <view v-if="goodsList.length>0" class="shop-buttom-money p-24 box-border-box bgc-F5F4F9" @click="openBuyCrad()">
      <view class="shop-buttom-money-1 bgc-f flex-justify-space align-items-center pl-24 box-border-box pr-8 b-rad-200">
        <view class="align-items-center">
          <image class="gwc-img mr-36" src="@/static/img/order-food/gwc-img.png" mode="scaleToFill"></image>
          <view class="shop-buttom-num bgc-FE6B2C fs-24 fc-f text-align-center">{{cartData.total_num || 0}}
          </view>
          <view class="align-items-baseline">
            <view class="fw-600 fs-28 fc-3 mr-4">￥</view>
            <view class="fw-600 fs-48 fc-3">{{cartData.total_price || 0}}</view>
          </view>
        </view>

        <view class="shop-buttom-money-2 text-align-center fc-f fs-32 fw-600 b-rad-200"
          :class="cartData.total_num>0?'':'opacity-4'" @click.stop="toConfirmOrder()">去结算
        </view>
      </view>
    </view>

    <uni-popup ref="popupBuy" type="bottom" background-color="transparent" borderRadius='20px 20rpx 0 0'>
      <view class="buy-card flex-index-css">
        <view class="buy-card-top box-border-box plr-32 flex-justify-space align-items-center b-rad-20-20-0-0">
          <view class="">
            <span class="fs-32 fc-3 mr-12">已选商品</span>
          </view>
          <view class="fs-28 fw-400 fc-9 align-items-center" @click.stop="setShopIngDel">
            <view class="">
              <uni-icons type="trash" size="18" color="#999"></uni-icons>
            </view>
            <view class="fs-28 fw-400 fc-9">清空</view>
          </view>
        </view>
        <view class="scroll-view-css bgc-ECECEC box-border-box car-scroll-box">
          <view class="buy-card-item bgc-f b-rad-20 display-flex p-20 box-border-box"
            v-for="(goods,i) in cartData.goods_list" :key="i">
            <image class="goods_img" :src="goods.goods_image" mode="scaleToFill"></image>
            <view class="flex-1 flex-direction flex-justify-space">
              <view class="">
                <view class="w-514 text-overflow-ellipsis-one fs-34 fw-600 mb-8">
                  {{goods.goods_name}}
                </view>
                <view class="fc-6">
                  {{goods.goods_attr}}
                </view>
              </view>
              <view class="flex-justify-space">
                <view class="">
                  <span class="fs-24 fc-FB3D03 fw-400">￥</span>
                  <span class="fs-40 fc-FB3D03 fw-b">{{goods.price}}</span>
                </view>
                <view class="display-flex align-items-center">
                  <image class="wh-44" @click.stop="setShoppingSave(goods,2)"
                    src="@/static/img/order-food/reduce-img.png" mode="">
                  </image>
                  <view class="right-only-right-2 text-align-center fs-28 fw-400">
                    {{goods.goods_number}}
                  </view>
                  <image class="wh-44" src="/static/img/order-food/add-img.png" @click.stop="setShoppingSave(goods,1)"
                    mode=""></image>
                </view>
              </view>
            </view>
          </view>
          <en-blank navBackgroundColor='#ECECEC' v-if="cartData.goods_list.length<=0" message="快去选购商品吧！~"></en-blank>
        </view>
        <view class="pop-shop-buttom-money box-border-box" @click="openBuyCrad()">
          <view
            class="shop-buttom-money-1 bgc-f flex-justify-space align-items-center pl-24 box-border-box pr-8 b-rad-200">
            <view class="align-items-center">
              <image class="gwc-img mr-36" src="@/static/img/order-food/gwc-img.png" mode="scaleToFill">
              </image>
              <view class="shop-buttom-num bgc-FE6B2C fs-24 fc-f text-align-center">{{cartData.total_num}}
              </view>
              <view class="align-items-baseline">
                <view class="fw-600 fs-28 fc-3 mr-4">￥</view>
                <view class="fw-600 fs-48 fc-3">{{cartData.total_price}}</view>
              </view>
            </view>

            <view class="shop-buttom-money-2 text-align-center fc-f fs-32 fw-600 b-rad-200"
              :class="cartData.total_num>0?'':'opacity-4'" @click.stop="toConfirmOrder()">去结算
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import cartStore from '@/utils/cartStore.js';
  import tools from "@/service/tools";
  import {
    getSearch,
    getSearchList,
    delSearch
  } from '@/api/goods.js';
  export default {
    data() {
      return {
        search: '',
        isOpen: false,
        showClearIcon: false,
        list: [],
        goodsList: [],
        historyType: false,
        total: '',
        page: 1,
        cartData: { // 添加购物车数据
          total_price: 0,
          total_num: 0,
          goods_list: []
        }
      }
    },
    onLoad() {
      cartStore.setShopId();
      this.getList()
    },
    onShow() {
      this.getCartData();
    },
    mounted() {},
    methods: {
      scrolltolower() {
        if (this.goodsList.length < this.total) {
          this.page += 1;
          this.getSearch(this.search);
        }
      },
      openBuyCrad() {
        this.$refs.popupBuy.open()
      },
      getCartData() {
        // 获取购物车数据
        const shopCart = cartStore.getShopCart(this.shop_id);
        if (shopCart) {
          this.cartData = {
            total_price: shopCart.total_price || 0,
            total_num: shopCart.total_num || 0,
            goods_list: shopCart.goods_list || []
          };

          // 更新商品列表中的数量显示
          this.updateGoodsNumFromCart();
        }
      },
      // 更新商品列表中的数量显示
      updateGoodsNumFromCart() {
        if (!this.goodsList.length) return;

        const shopCart = cartStore.getShopCart(this.shop_id);
        if (!shopCart) return;

        // 创建商品数量映射
        const goodsQuantityMap = {};
        shopCart.goods_list.forEach(item => {
          if (!goodsQuantityMap[item.goods_id]) {
            goodsQuantityMap[item.goods_id] = 0;
          }
          goodsQuantityMap[item.goods_id] += item.goods_number;
        });

        // 更新商品列表数量
        this.goodsList.forEach(goods => {
          goods.num = goodsQuantityMap[goods.goods_id] || 0;
        });
      },
      toList(name) {
        let search = '';
        if (name) {
          search = name;
          this.search = name
        } else {
          search = this.search;
        }
        this.page = 1
        this.goodsList = []
        this.getSearch(search)
      },
      getSearch(search) {
        // 搜索商品列表
        getSearch({
          search: search,
          page: this.page
        }).then((res) => {
          if (res.code * 1 === 1) {
            const newGoods = res.data.items || [];
            // 为每个商品添加购物车数量
            newGoods.forEach(goods => {
              goods.num = 0; // 初始化为0
            });
            this.total = res.data.total
            this.goodsList = [...this.goodsList, ...res.data.items]
            // 更新购物车数量显示
            this.updateGoodsNumFromCart();
          }
        })
      },
      addred(type, item) {
        if (type === 1) {
          // 减
          if (item.num <= 0) return;

          item.num--;
          if (item.num <= 0) {
            // 从购物车移除
            cartStore.removeFromCart(item.goods_id, item.goods_spec || []);
          } else {
            // 更新数量
            cartStore.updateQuantity(item.goods_id, item.goods_spec || [], item.num);
          }

        } else if (type === 2) {
          // 加
          item.num++;

          // 判断是否已存在购物车
          const currentQty = cartStore.getGoodsQuantity(item.goods_id, item.goods_spec || []);
          if (currentQty <= 0) {
            // 新商品，添加到购物车
            cartStore.addToCart(item, item.goods_spec || [], 1);
          } else {
            // 已存在，更新数量
            cartStore.updateQuantity(item.goods_id, item.goods_spec || [], item.num);
          }

        } else if (type === 3) {
          // 选规格
          uni.navigateTo({
            url: `/pages-takeout/new-specs-info?goods_id=${item.goods_id}&category_id=${item.category_id}`
          })
        }
        // 更新购物车数据
        this.getCartData();
      },

      setShoppingSave(item, type) {
        if (type === 1) {
          // 加
          item.goods_number = item.goods_number + 1
        } else {
          // 减
          item.goods_number = item.goods_number - 1
        }

        if (item.goods_number <= 0) {
          // 数量为0，移除商品
          cartStore.removeFromCart(item.goods_id, item.goods_spec || []);
        } else {
          // 更新商品数量
          cartStore.updateQuantity(
            item.goods_id,
            item.goods_spec || [],
            item.goods_number
          );
        }
        // 更新页面数据
        this.getShopIngList();
      },
      getShopIngList() {
        // 获取购物车列表
        const shopCart = cartStore.getShopCart(this.shop_id);
        if (shopCart) {
          this.cartData = {
            ...this.cartData,
            total_price: shopCart.total_price,
            total_num: shopCart.total_num,
            goods_list: shopCart.goods_list
          };
          // 同步更新商品列表中的数量
          this.updateGoodsNumFromCart();
        }
      },
      clearIcon() {
        this.search = '';
        this.showClearIcon = false;
      },
      clearInput(event) {
        this.search = event.detail.value;
        if (event.detail.value.length > 0) {
          this.showClearIcon = true;
        } else {
          this.showClearIcon = false;
        }
      },
      getList() {
        // 获取搜索历史内容
        getSearchList().then((res) => {
          if (res.code === 1) {
            this.list = res.data.my_search;
          }
        })
      },
      delList() {
        delSearch().then((res) => {
          if (res.code === 1) {
            tools.success('删除成功');
            this.list = [];
          }
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  .buy-card-item {
    width: 100%;
    margin-bottom: 32rpx;
  }

  .right-only-right-2 {
    min-width: 50rpx;
  }

  .pop-shop-buttom-money {
    width: 100%;
    // height: 140rpx;
    background: #ECECEC;
    padding-left: 24rpx;
    padding-right: 24rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 12rpx);
    padding-top: 22rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 5;
  }

  .goods_img {
    width: 152rpx;
    height: 152rpx;
    border-radius: 12rpx;
    margin-right: 20rpx;
  }

  .car-scroll-box {
    padding: 12rpx 24rpx calc(env(safe-area-inset-bottom) + 48rpx);
  }

  .buy-card {
    height: 60vh;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
  }

  .buy-card-top {
    width: 100%;
    height: 92rpx;
    background: #FCF5DB;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
  }

  .shop-buttom-money-1 {
    width: 100%;
    height: 96rpx;
    position: relative;
  }

  .qk-icon {
    width: 32rpx;
    height: 32rpx;
  }

  .shop-buttom-money {
    width: 100%;
    // height: 140rpx;
  }

  .shop-buttom-money-1 {
    width: 100%;
    height: 96rpx;
    position: relative;
  }

  .shop-buttom-money-2 {
    width: 200rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: linear-gradient(270deg, #FF3333 0%, #FE6122 100%);
  }

  .gwc-img {
    width: 88rpx;
    height: 88rpx;
  }

  .shop-buttom-num {
    width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    border-radius: 50%;
    position: absolute;
    top: 0rpx;
    left: 85rpx;
    border: 1rpx solid #FFFFFF;
  }

  .z-3 {
    position: relative;
    z-index: 3;
  }

  .order-bg {
    width: 100%;
    height: 17vh;
    position: fixed;
    left: 0;
    top: 0;
  }

  .hide-h {
    height: 232rpx !important;
    overflow: hidden !important;
  }

  .down {
    transform: rotate(-90deg);
    transition: all 0.5s;
  }

  .up {
    transform: rotate(90deg);
    transition: all 0.5s;
  }

  .view-x {
    width: 2rpx;
    height: 20rpx;
    background-color: #eee;
    margin: 0 24rpx;
  }

  .find-item {
    width: 48%;
    text-align: left;
  }

  .list-item {
    max-height: 688rpx;
    min-width: 10rpx;
    height: 56rpx;
    line-height: 56rpx;
    background: #F7F8FC;
    border-radius: 200rpx;
    margin: 0 8rpx 32rpx 0;
    box-sizing: border-box;
    padding: 0 24rpx;
  }

  .seacrh-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 376rpx;
    filter: blur(80rpx);
    background-image: linear-gradient(to right, #C9F7FC, #F9F6E0, #F6F5F3);
    z-index: -1;
  }

  .wh36 {
    width: 36rpx;
    height: 36rpx;
  }

  .input-box {
    width: 100%;
  }

  .input-buttom {
    width: 120rpx;
    height: 60rpx;
    background: linear-gradient(270deg, #FF3333 0%, #FE6122 100%);
    line-height: 60rpx;
  }

  .s-input {
    width: 100%;
    height: 72rpx;
    padding: 6rpx 6rpx 6rpx 24rpx;
  }

  .seacrh-info {
    margin-top: 20rpx;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
  }

  .seacrh-record-index {
    position: relative;
  }

  .wh-44 {
    width: 44rpx;
    height: 44rpx;
  }

  .menu-list {
    width: 100%;

    .goods_img {
      width: 168rpx;
      height: 168rpx;
      border-radius: 12rpx;
    }
  }

  .menu-list-right {
    flex: 1;
  }

  .right-only-right-red {
    width: 44rpx;
    height: 44rpx;
    line-height: 40rpx;
    border-radius: 12rpx;
    border: 1rpx solid #41ABF5;
    color: #41ABF5;
  }

  .right-only-right-add {
    width: 44rpx;
    height: 44rpx;
    line-height: 40rpx;
    background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
    border-radius: 12rpx;
  }

  .right-only-right {
    width: 116rpx;
    height: 44rpx;
    background: linear-gradient(270deg, #FF3333 0%, #FE6122 100%);
    line-height: 44rpx;
    position: relative;
  }

  .selectedNum {
    position: absolute;
    right: -10rpx;
    top: -22rpx;
    font-size: 24rpx;
    color: #fff;
    width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    background: #FE6B2C;
    border-radius: 50%;
    border: 1rpx solid #FFFFFF;
  }
</style>