gift.vue

<template>
  <view class="gift">
    <view class="gift-remark">{{ $lang.lang.integral.pointsRemark }}</view>
    <view class="gift-select">
      <view class="select-list">
        <view class="list-item" v-for="(item, index) in netList" :key="index"
          >{{ item }}
          <uni-icons class="list-icon" type="right" color="#B3B3B3" size="12"></uni-icons>
        </view>
      </view>
      <view class="select-right">
        <picker
          mode="multiSelector"
          :range="pickerData"
          :value="pickerValue"
          :range-key="locale === 'zh' ? 'labelZh' : 'labelEn'"
          @change="bindPickerChange"
          @columnchange="bindColumnChange"
        >
          {{ $lang.lang.integral.outlets }}
          <uni-icons class="list-icon" type="right" color="#B3B3B3" size="12"></uni-icons>
        </picker>
      </view>
    </view>
    <view class="gift-content">
      <view class="gift-item" v-for="item in giftList" :key="item.id" @click="toMail(item.id)">
        <view class="gift-image-box">
          <image
            class="gift-image"
            mode="cover"
            :src="locale == 'zh' ? item.imgZh : item.imgEn"
          ></image>
          <view class="gift-tag">
            <view class="tags">
              <image class="tag-image" src="../../../static/img/score.png"></image>
              <view class="tag-text">{{ item.pointsRequire }}</view>
            </view>
          </view>
          <view class="foot-tag">{{ $lang.lang.integral.remainder(item.quantityRemain) }}</view>
        </view>
        <view class="gift-name">{{ locale === 'zh' ? item.titleZh : item.titleEn }}</view>
        <view class="gift-menu">
          <view class="gift-menu-text" v-for="ele in item.pickMethodList" :key="ele.id">{{
            locale === 'zh' ? ele.labelZh : ele.labelEn
          }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    userInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      giftList: [],
      data: [],
      pickerData: [[], [], []],
      pickerValue: [0, 0, 0],
      nodeId: null,
      netList: []
    }
  },
  computed: {
    locale() {
      return this.$lang.locale
    }
  },
  watch: {
    userInfo: {
      handler(val) {
        console.log(val)
        this.netList =
          this.$lang.locale === 'zh'
            ? [val.countryTitleZh, val.cityTitleZh]
            : [val.countryTitleEn, val.cityTitleEn]
      },
      immediate: true
    }
  },
  created() {
    this.getGift()
    this.getNet()
  },
  methods: {
    toMail(id) {
      uni.navigateTo({
        url: '/pages/order_mail/order_mail?id=' + id
      })
    },
    // 获取礼品列表
    async getGift() {
      try {
        const memberId = this.$store.getters.id
        const { code, data } = await this.$request.post('/app-api/ecw/reward/list', {
          memberId,
          nodeId: this.nodeId
        })
        if (code === 0) {
          this.giftList = data.list
          if (!this.nodeId) {
            if (data.city) {
              this.netList =
                this.$lang.locale === 'zh'
                  ? [this.userInfo.countryTitleZh, this.userInfo.cityTitleZh]
                  : [this.userInfo.countryTitleEn, this.userInfo.cityTitleEn]
            } else if (data.country == '130') {
              this.netList = this.$lang.locale === 'zh' ? ['中国'] : ['china']
            } else {
              this.netList =
                this.$lang.locale === 'zh'
                  ? [this.userInfo.countryTitleZh]
                  : [this.userInfo.countryTitleEn]
            }
          }
        }
        console.log('giftList', this.giftList)
      } catch (error) {
        console.log(error)
      }
    },
    // 获取网点列表
    async getNet() {
      try {
        const { code, data } = await this.$request.get(
          '/admin-api/member/score-rule/warehouse-tree-region-list'
        )
        if (code === 0) {
          this.data = data
          this.initPickerData()
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 初始化选择器数据
    initPickerData() {
      if (this.data.length === 0) return
      const countries = this.data
      const cities = this.data[0].children || []
      const areas = (this.data[0].children && this.data[0].children[0].children) || []
      this.pickerData[0] = countries
      this.pickerData[1] = cities
      this.pickerData[2] = areas
    },
    // 选择改变
    bindPickerChange(e) {
      const val = e.detail.value
      this.pickerValue = val
      this.nodeId = this.pickerData[2][val[2]].id
      this.getGift()
      this.getPickerValue(val)
    },
    // 列改变
    bindColumnChange(e) {
      const { column, value } = e.detail
      const data = {
        pickerData: this.pickerData,
        pickerValue: this.pickerValue
      }
      data.pickerValue[column] = value
      if (column === 0) {
        const selectedCountry = this.data[value]
        const cities = selectedCountry.children || []
        const areas = (cities[0] && cities[0].children) || []
        data.pickerData[1] = cities
        data.pickerData[2] = areas
        data.pickerValue[1] = 0
        data.pickerValue[2] = 0
      } else if (column === 1) {
        const selectedCountry = this.data[data.pickerValue[0]]
        const selectedCity = selectedCountry.children[value]
        const areas = selectedCity.children || []
        data.pickerData[2] = areas
        data.pickerValue[2] = 0
      }
      this.pickerData = data.pickerData
      this.pickerValue = data.pickerValue
      this.$forceUpdate()
    },
    // 选择数据显示
    getPickerValue(val) {
      const countries = this.pickerData[0][val[0]]
      const cities = this.pickerData[1][val[1]]
      const areas = this.pickerData[2][val[2]]
      this.netList =
        this.locale === 'zh'
          ? [countries.labelZh, cities.labelZh, areas.labelZh]
          : [countries.labelEn, cities.labelEn, areas.labelEn]
    }
  }
}
</script>

<style lang="scss" scoped>
.gift {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.gift-remark {
  padding: 0 32upx;
  width: 100%;
  height: 42upx;
  display: flex;
  align-items: center;
  justify-content: right;
  box-sizing: border-box;
  font-size: 20upx;
  color: red;
}

.gift-select {
  padding: 0 32upx;
  display: flex;
  width: 100%;
  height: 70upx;
  color: #b3b3b3;
  box-sizing: border-box;
  align-items: center;
  border-bottom: 2upx solid #e7e7e7;
}
.select-list {
  font-size: 20upx;
  display: flex;
  align-items: center;
}
.list-item {
  display: flex;
  align-items: center;
  margin-right: 20upx;
  &:last-child {
    margin-right: 0;
  }
}
.list-icon {
  font-weight: 600;
  margin-left: 50upx;
  &:last-child {
    margin-left: 20upx;
  }
}
.select-right {
  margin-left: auto;
  font-size: 24upx;
}
.gift-content {
  width: 100%;
  height: calc(100% - 152upx);
  padding: 32upx 32upx;
  gap: 2%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  justify-content: space-between;
}
.gift-item {
  display: flex;
  flex-direction: column;
  width: 49%;
  box-sizing: border-box;
  // background-color: red;
}
.gift-image {
  margin: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
}
.gift-name {
  margin: 0;
  display: flex;
  height: 60upx;
  font-size: 24upx;
  color: #000000;
  align-items: center;
}
.gift-menu {
  margin-bottom: 20upx;
  display: flex;
  gap: 10upx;
  flex-wrap: wrap;
  min-height: 58upx;
  font-size: 20upx;
  color: #b3b3b3;
  align-items: center;
}
.gift-menu-text {
  padding: 4upx 4upx;
  border: 2upx solid #ef8d15;
  font-size: 24upx;
  color: #ef8d15;
  border-radius: 20upx;
  margin-right: 10upx;
  &:last-child {
    margin-right: 0;
  }
}
.gift-image-box {
  position: relative;
}
.gift-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8upx;
  min-width: 80upx;
  height: 32upx;
  box-sizing: border-box;
  background: linear-gradient(#ef7e1a, #f1b009);
  transform: skewX(15deg);
  border-top-right-radius: 10upx;
  border-bottom-left-radius: 10upx;
}
.tag-image {
  width: 24upx;
  height: 24upx;
}
.tags {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: skewX(-15deg);
}
.tag-text {
  margin-left: 4upx;
  font-weight: 500;
  color: #fff;
  font-size: 24upx;
}
.foot-tag {
  position: absolute;
  padding: 0 8upx;
  bottom: 0;
  right: 0;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 110upx;
  height: 32upx;
  color: #fff;
  font-size: 22upx;
  box-sizing: border-box;
  background: linear-gradient(#ef7e1a, #f1b009);
  border-top-right-radius: 10upx;
  border-bottom-left-radius: 10upx;
}
</style>