wx-qhb/pages/shopping/shopping.vue

<template>
  <!-- 十元购 -->
  <view style="position: relative">
    <view class="back" style="z-index: -1"> </view>
    <u-navbar bgColor="#FE2E2E" :safeAreaInsetTop="true" :placeholder="true">
      <view class="u-nav-slot" slot="left">
        <image
          v-if="language == 'zh-CN'"
          src="../../static/shopping/title.png"
          style="width: 390rpx; height: 48rpx"
          mode=""
        ></image>
        <image
          v-if="language == 'en-US'"
          src="/static/shopping/title1.png"
          style="width: 390rpx; height: 48rpx"
          mode=""
        >
        </image>
        <image
          v-if="language == 'es-ES'"
          src="/static/shopping/title2.png"
          style="width: 390rpx; height: 48rpx"
          mode=""
        >
        </image>
        <image
          v-if="language == 'it-IT'"
          src="/static/shopping/title3.png"
          style="width: 390rpx; height: 48rpx"
          mode=""
        >
        </image>
      </view>
    </u-navbar>
    <view class="input u-flex u-row-between" style="margin-top: 16rpx">
      <view class="u-flex">
        <image
          src="../../static/shopping/search.png"
          style="width: 32rpx; height: 32rpx"
          mode=""
        ></image>
        <input
          v-model="keyword"
          type="text"
          :placeholder="i18n.Searchcon"
          style="width: 500rpx; margin-left: 14rpx"
        />
      </view>
      <view class="search" @click="search">{{ i18n.search }}</view>
    </view>
    <view class="content">
      <view class="">
        <!-- 	<u-tabs lineColor="#f56c6c" :activeStyle="{
            color: 'rgba(248, 53, 39, 1)',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" :list="list1" @click="click"></u-tabs> -->
        <u-tabs
          :activeStyle="{
            color: 'rgba(248, 53, 39, 1)',
            fontWeight: 'bold',
            transform: 'scale(1.05)',
          }"
          :list="list1"
          lineColor="rgba(248, 53, 39, 1)"
          @change="changetab"
        ></u-tabs>
      </view>
      <view
        class="u-flex u-row-between"
        style="margin-top: 24rpx; flex-wrap: wrap"
      >
        <view
          @click="todetail(item.id)"
          class="item"
          v-for="(item, idx) in list"
          :key="idx"
          style="margin-bottom: 20rpx"
        >
          <image
            :src="item.goods.image"
            style="width: 340rpx; height: 340rpx"
            mode=""
          ></image>
          <view class="" style="padding: 20rpx; box-sizing: border-box">
            <!-- <text class="title">可心柔 V9系列婴儿保wadhbiuawd</text> -->
            <text class="title" v-if="language == 'zh-CN'">
              {{ item.goods.name_cn }}
            </text>
            <view class="title" v-if="language == 'en-US'">
              {{ item.goods.name_en }}
            </view>
            <view class="title" v-if="language == 'es-ES'">
              {{ item.goods.name_es }}
            </view>
            <view class="title" v-if="language == 'it-IT'">
              {{ item.goods.name_ita }}
            </view>
            <view
              class="u-flex"
              style="margin-top: 12rpx; flex-wrap: wrap; column-gap: 12rpx"
            >
              <view
                class="tabsa"
                v-for="(child, idx) in item.goods.label_arr"
                :key="idx"
              >
                <text class="titl" v-if="language == 'zh-CN'">
                  {{ child.name_cn }}
                </text>
                <view class="titl" v-if="language == 'en-US'">
                  {{ child.name_en }}
                </view>
                <view class="titl" v-if="language == 'es-ES'">
                  {{ child.name_es }}
                </view>
                <view class="titl" v-if="language == 'it-IT'">
                  {{ child.name_ita }}
                </view>
              </view>
            </view>
            <!-- <view class="num">
							{{i18n.Soldout}}{{item.goods.sale_num}}{{i18n.piece}}
						</view> -->
            <view class="num">
              {{ i18n.Soldout }}{{ item.goods.sale_num }}
            </view>
            <view class="" style="margin-top: 16rpx; position: relative">
              <image
                src="/static/shopping/btn.png"
                style="
                  width: 300rpx;
                  height: 68rpx;
                  position: absolute;
                  top: 0;
                  left: 0;
                "
                mode=""
              ></image>
              <view
                class="u-flex u-row-between"
                style="
                  padding: 10rpx 20rpx 0 26rpx;
                  width: 85%;
                  position: relative;
                  z-index: 1;
                "
              >
                <view class="" style="margin-top: 10rpx">
                  <text class="money">¥</text>
                  <text class="money" style="font-size: 40rpx">{{
                    item.goods.discount_price
                  }}</text>
                </view>
                <image
                  v-if="language == 'zh-CN'"
                  src="../../static/shopping/shop.png"
                  style="width: 82rpx; height: 38rpx"
                  mode=""
                >
                </image>
                <image
                  v-if="language == 'en-US'"
                  src="/static/shopping/shop1.png"
                  style="width: 80rpx; height: 44rpx"
                  mode=""
                >
                </image>
                <image
                  v-if="language == 'es-ES'"
                  src="/static/shopping/shop2.png"
                  style="width: 74rpx; height: 20rpx"
                  mode=""
                >
                </image>
                <image
                  v-if="language == 'it-IT'"
                  src="/static/shopping/shop3.png"
                  style="width: 62rpx; height: 44rpx"
                  mode=""
                >
                </image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="" style="height: 80rpx"></view>
    <view class="" style="height: 160rpx"></view>
    <kj-tabbar :value1="1" ref="kjTabbar"></kj-tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list1: [],
      language: "zh-CN", //语言
      list: [],
      keyword: "",
      parent_id: "",
      page: 1,
      last_page: "",
    };
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  onShow() {
    if (uni.getStorageSync("language") != "") {
      this.language = uni.getStorageSync("language");
    }
    this.category();
    this.shipp();

    this.$refs.kjTabbar.getNumber();
  },
  methods: {
    onReachBottom() {
      if (this.page == this.last_page) {
        this.$u.toast(this.i18n.Nofurtherdata);
      } else {
        // if (this.current != 0) {
        this.page++;
        this.shipp();
        // }
      }
    },
    //跳转详情
    todetail(id) {
      uni.navigateTo({
        url: "/pageA/productdetails?id=" + id,
      });
    },
    //搜索
    search() {
      this.shipp(this.parent_id);
    },
    //10元购
    shipp() {
      uni.$u.http
        .post("/api/goods/ten_yuan_goods", {
          parent_id: this.parent_id,
          keyword: this.keyword,
          page: this.page,
        })
        .then((res) => {
          console.log(res);
          this.last_page = res.last_page;
          if (this.page == 1) {
            this.list = res.data;
          } else {
            this.list = this.list.concat(res.data);
          }
        })
        .catch(() => {});
    },
    //商品分类列表
    category() {
      uni.$u.http
        .get("/api/goods/category", {
          params: {
            parent_id: 0,
          },
        })
        .then((res) => {
          const categoryArr = res;
          this.list1 = [
            {
              name: "",
              category_id: "",
            },
          ];
          if (this.language == "en-US") {
            categoryArr.forEach((item) => {
              item.name = item.name_en;
            });
            this.list1[0].name = "selection";
          }
          if (this.language == "es-ES") {
            categoryArr.forEach((item) => {
              item.name = item.name_es;
            });
            this.list1[0].name = "Una selección de";
          }
          if (this.language == "it-IT") {
            categoryArr.forEach((item) => {
              item.name = item.name_ita;
            });
            this.list1[0].name = "selezionate";
          }

          if (this.language == "zh-CN") {
            categoryArr.forEach((item) => {
              item.name = item.name_cn;
            });
            this.list1[0].name = "精选";
          }
          this.list1 = this.list1.concat(categoryArr);
          console.log(this.list1);
        })
        .catch(() => {});
    },
    changetab(item) {
      this.list = [];
      this.page = 1;
      this.parent_id = item.id;
      console.log("item", item);
      this.shipp(item.id);
    },
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
  min-height: calc(100vh - 40rpx);
  background: linear-gradient(180deg, #fdfcfb 0%, #f4f4f4 100%);
  border-radius: 30rpx 30rpx 0rpx 0rpx;
  margin-top: 32rpx;
  padding: 32rpx;
  box-sizing: border-box;

  .item {
    width: 340rpx;
    // height: 592rpx;
    background: #ffffff;
    border-radius: 16rpx;

    .title {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #222222;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
      display: block;
      width: 100%;
      height: 70rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }

    .tabsa {
      // width: 96rpx;
      // height: 32rpx;
      margin-top: 10rpx;
      border-radius: 4rpx;
      border: 1rpx solid #ed0909;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #ed0909;
      // line-height: 32rpx;
      text-align: center;
      font-style: normal;
      display: inline;
      padding: 0 4rpx;
      box-sizing: border-box;
    }

    .num {
      font-family: SFPro, SFPro;
      font-weight: 400;
      font-size: 20rpx;
      color: #555555;
      line-height: 24rpx;
      text-align: left;
      font-style: normal;
      margin-top: 16rpx;
    }

    .money {
      font-family: HarmonyOS_Sans_Medium;
      font-size: 20rpx;
      color: #f83224;
      line-height: 26rpx;
      text-align: left;
      font-style: normal;
    }
  }
}

.back {
  position: absolute;
  top: 0;
  left: 0;
  width: 750rpx;
  height: 800rpx;
  background: #fe2e2e;
}

.input {
  width: 702rpx;
  height: 68rpx;
  background: #ffffff;
  border-radius: 34rpx;
  margin-left: 24rpx;
  box-sizing: border-box;
  padding: 0 8rpx 0 24rpx;

  .search {
    width: 100rpx;
    height: 56rpx;
    background: #f83224;
    border-radius: 28rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 26rpx;
    color: #ffffff;
    line-height: 56rpx;
    text-align: center;
    font-style: normal;
  }
}
</style>