wx-qhb/pageD/newBulitOrder/component/recommendGoods.vue

<template>
  <view class="list">
    <view class="recommend">
      <view class="top">
        <image
          src="../../../static/images/recommend.png"
          style="width: 124rpx; height: 30rpx"
          mode="scaleToFill"
        />
      </view>
      <view class="bottom">
        <scroll-view
          scroll-x
          class="u-flex"
          style="column: gap 28rpx; display: flex"
        >
          <view class="u-flex" style="column-gap: 16rpx">
            <view
              class=""
              v-for="(item, idx) in swiptlist"
              :key="idx"
              @click="todetail(item.id)"
            >
              <image
                :src="item.image"
                style="width: 156rpx; height: 156rpx"
                mode=""
              >
              </image>
              <view class="title">
                {{ item.name_cn }}
              </view>
              <view class="title" v-if="language == 'en-US'">
                {{ item.name_en }}
              </view>
              <view class="title" v-if="language == 'es-ES'">
                {{ item.name_es }}
              </view>
              <view class="title" v-if="language == 'it-IT'">
                {{ item.name_ita }}
              </view>
              <view class="money" style="color: #f83224; font-size: 20rpx">
                <text>¥</text>
                <text style="font-size: 28rpx">{{
                  item.is_discount == 0
                    ? item.discount_price.slice(0, -3)
                    : item.price.slice(0, -3)
                }}</text>
                <text>{{
                  item.is_discount == 0
                    ? item.discount_price.slice(-3)
                    : item.price.slice(-3)
                }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    swiptlist: {
      typeof: Array,
      default: () => {
        return [];
      },
    },
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  methods: {
    //跳转商品详情
    todetail(id) {
      uni.reLaunch({
        url: "/pageA/productdetails?id=" + id,
      });
    },
  },
};
</script>
<style scoped lang="scss">
.list {
  .recommend {
    margin-top: 20rpx;

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

    .top {
      width: 702rpx;
      height: 64rpx;
      background: linear-gradient(
        180deg,
        #ffe7e3 0%,
        rgba(255, 255, 255, 1) 100%
      );
      border-radius: 16rpx 16rpx 0 0;
      padding: 24rpx 22rpx;
      box-sizing: border-box;
    }

    .bottom {
      padding: 0 20rpx 22rpx;
      box-sizing: border-box;
      background: #fff;
    }
    .money {
      font-family: HarmonyOS_Sans_Medium;
      font-size: 48rpx;
      color: #f83224;
      line-height: 38rpx;
      text-align: left;
      font-style: normal;
      // font-weight: 500;
      font-weight: bold;
    }
  }
}
</style>