Client-Teapay/src/pages/integral-list/index.vue

<template>
  <view class="container">

    <!-- 积分兑换 -->
    <view class="integral">
      <view class="integral_title flex_r flex_ac">
        <view class="inte_icon"></view>
        <view class="inte_text">积分兑换</view>
      </view>
      <view class="goods flex_r" v-for="(item, index) in list" :key="index">
        <image class="goods_img" :src="item.goodsThumbnailUrl" mode=""></image>
        <view class="goods_info flex_c flex_jc">
          <view class="goods_name ellipsis">{{ item.goodsName }}</view>
          <view class="msg">{{ item.integral }}消费金</view>
          <view
            class="info_btn flex_r flex_ac flex_jc"
            @tap="openConversion(item.goodsId)"
            >立即兑换</view
          >
        </view>
      </view>
    </view>
    <!-- 积分兑换-end -->

    <!-- 兑换弹窗 -->
    <uni-popup type="center" ref="conversion">
      <view class="const_con">
        <image
          class="closePopup"
          src="/static/f_close.png"
          mode=""
          @tap="closePopup"
        ></image>
        <view class="const_head flex_r flex_ac flex_jc">请选择兑换方式</view>
        <view class="const_info">
          <view class="frist_info flex_r flex_wrap">
            <view
              class="frist_list flex_c mar_b30"
              v-for="(item, index) in way_list"
              :key="index"
              @tap="setCurrent(index)"
            >
              <view class="flex_r flex_ac">
                <image
                  class="frist_img"
                  :src="
                    currrent == index
                      ? '/static/img/xuanzhong_icon.png'
                      : '/static/img/weixuanzhong_icon.png'
                  "
                  mode=""
                ></image>
                <view class="frist_text">{{ item.name }}</view>
              </view>
              <view class="surplus">剩余({{ item.Integral }}积分)</view>
            </view>
          </view>
          <view class="hint" v-if="isShow">积分不足请用余额或现金支付</view>
          <view class="pay_way flex_r flex_ac flex_wrap mar_t30" v-if="isShow">
            <view class="frist_list flex_c">
              <view class="flex_r flex_ac" @tap="setPayWay(0)">
                <image
                  class="frist_img"
                  :src="
                    pay_way == 0
                      ? '/static/img/xuanzhong_icon.png'
                      : '/static/img/weixuanzhong_icon.png'
                  "
                  mode=""
                ></image>
                <view class="frist_text">余额</view>
              </view>
            </view>
            <view class="frist_list flex_c">
              <view class="flex_r flex_ac" @tap="setPayWay(1)">
                <image
                  class="frist_img"
                  :src="
                    pay_way == 1
                      ? '/static/img/xuanzhong_icon.png'
                      : '/static/img/weixuanzhong_icon.png'
                  "
                  mode=""
                ></image>
                <view class="frist_text">现金</view>
              </view>
            </view>
          </view>
          <checkbox-group
            class="flex_r flex_ac flex_jc"
            @change="checkboxChange"
          >
            <label class="option_box mar_t30">
              <checkbox
                value="1"
                :checked="checked"
                color="#2DB389"
                style="transform: scale(0.7)"
              />
              我已阅读同意<text @tap.stop="getProPage">《购买协议》</text>
            </label>
          </checkbox-group>
          <view class="conversion flex_r flex_ac flex_jc" @tap="confimConver"
            >确认兑换</view
          >
        </view>
      </view>
    </uni-popup>
    <!-- 兑换弹窗-end -->
  </view>
</template>

<script>
let page = 1;
let app = getApp();
var appEv = app.$vm.$options;
import uniPopup from "@/components/uni-popup/uni-popup.vue";
export default {
  components: { uniPopup },
  data() {
    return {
      list: [], // 积分商品
      checked: false, //是否选中协议
      currrent: 0, // 选中的兑换方式
      pay_way: 0, //选中的支付方式
      isShow: false, // 是否显示现金支付
      goodsId: "", // 选中的商品Id
    };
  },
  onShow: function () {
    page = 1;
    this.list = [];
    this.loadData();
  },
  methods: {
    loadData: function () {
      this.loadGoods();
      this.integralMethodChange();
    },
    // 获取轮播图
    loadBacnner: function () {
      let that = this;
      const info = reqApi.integralLunBo();
      if (info) {
        info.then((res) => {
          if (res.data.status == 200) {
            that.imgArr = res.data.list;
          }
        });
      }
    },
    // 获取积分专区商品列表
    loadGoods: function () {
      let that = this;
      let data = {
        page: page,
        limit: 10,
      };
      const info = reqApi.getInteGoods(data);
      if (info) {
        info.then((res) => {
          if (res.data.status == 200) {
            let obj = res.data.goods;
            if (obj.length > 0) {
              for (var i in obj) {
                that.list.push(obj[i]);
              }
            } else {
              if (page == 1) {
                that.haveGoods = true;
                page = -1;
              } else {
                page = -1;
                appEv.errTips("暂无更多");
              }
            }
          } else {
            if (page == 1) {
              that.haveGoods = true;
              page = -1;
            } else {
              page = -1;
              appEv.errTips("暂无更多");
            }
          }
        });
      }
    },
    // 获取兑换方式
    integralMethodChange: function () {
      let that = this;
      const info = reqApi.integralMethodChange();
      if (info) {
        info.then((res) => {
          if (res.data.status == 200) {
            that.way_list = res.data.data;
          }
        });
      }
    },
    // 更改方式
    setCurrent: function (e) {
      this.currrent = e;
      this.pay_way = "";
      this.isShow = false;
    },
    // 更改支付方式
    setPayWay: function (e) {
      this.pay_way = e;
    },
    // 确认兑换
    confimConver: function () {
      let that = this;
      let isShow = this.isShow;
      let pay_way = this.pay_way;
      let checked = this.checked;
      let currrent = this.currrent;
      if (currrent === "") {
        appEv.errTips("请选择兑换方式");
        return false;
      }
      if (isShow && pay_way === "") {
        appEv.errTips("请选择支付方式");
        return false;
      }
      if (!checked) {
        appEv.errTips("请阅读并同意购买协议");
        return false;
      }
      let data = {
        goodsId: this.goodsId,
        xyType: 1,
        integralType: this.way_list[this.currrent].type,
        count: 1,
      };
      if (isShow) {
        data.jeType = this.pay_way == 0 ? 4 : 5;
      } else {
        data.jeType = 3;
      }

      const info = reqApi.integralClickExchange(data);
      if (info) {
        info.then((res) => {
          if (res.data.status == 200) {
            appEv.errTips(res.data.msg);
            let goodsId = that.goodsId;
            let count = 1;
            let goodsType = 5;
            let ojsType = 1;
            let payType = !isShow
              ? 3
              : isShow && pay_way == 0
              ? 4
              : isShow && pay_way == 1
              ? 5
              : isShow && that.way_list[that.currrent].Integral == 0
              ? 6
              : "";
            setTimeout(() => {
              uni.navigateTo({
                url:
                  "/pages/to-pay-list/index?goodsId=" +
                  goodsId +
                  "&count=" +
                  count +
                  "&goodsType=" +
                  goodsType +
                  "&ojsType=" +
                  ojsType +
                  "&payType=" +
                  payType,
              });
            }, 800);
          } else {
            appEv.errTips(res.data.msg);
            that.isShow = true;
          }
        });
      }
    },
    // 更改协议选中情况
    checkboxChange: function (e) {
      let index = e.detail.value.indexOf("1");
      if (index != -1) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    // 点击立即兑换打开弹窗
    openConversion: function (e) {
      this.goodsId = e;
      this.$refs.conversion.open();
    },
    // 关闭立即兑换弹窗
    closePopup: function () {
      this.$refs.conversion.close();
    },
    getProPage: function () {
      uni.navigateTo({
        url: "/pages/protocol/index?type=" + 4,
      });
    },
  },
  onShareAppMessage: function () {
    var path = "/pages/integral-list/index?agentId=1";
    if (app.globalData.systemUserInfo && app.globalData.systemUserInfo.userId) {
      path = path + "?agentId=" + app.globalData.systemUserInfo.userId;
    }

    var title = `让数字经济赋能美好生活！`;
    return {
      title: title,
      path: path,
    };
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (page != -1) {
      var that = this;
      setTimeout(function () {
        ++page;
        that.loadData();
      }, 800);
    }
  },
};
</script>

<style lang="scss" scoped>
// 页面配置
page {
  background: #f4f4f4;
}
.container {
  padding: 30rpx;
  box-sizing: border-box;
}
// 页面配置-end

// 顶部广告图
.banner_top {
  width: 100%;
  height: 360rpx;
}
// 顶部广告图-end

// 积分兑换
.integral {
  width: 100%;
  overflow: hidden;
}
.integral_title {
  width: 100%;
  overflow: hidden;
  padding: 30rpx 0;
}
.goods_info {
  width: calc(100% - 300rpx - 40rpx);
  overflow: hidden;
}
.goods_img {
  width: 300rpx;
  height: 208rpx;
  border-radius: 12rpx;
  margin-right: 40rpx;
}
.inte_icon {
  width: 22rpx;
  height: 22rpx;
  border-radius: 50%;
  border: 3rpx solid #1bbd89;
  box-sizing: border-box;
}
.goods_name {
  width: 100%;
  overflow: hidden;
  font-family: "SourceHanSansCN-Bold";
  font-size: 28rpx;
  color: #1a1a1a;
}
.inte_text {
  font-size: 32rpx;
  color: #232323;
  font-family: "SourceHanSansCN-Medium";
  font-weight: 500;
  line-height: 1;
  margin-left: 20rpx;
}
.msg {
  width: 100%;
  overflow: hidden;
  color: #18ba87;
  font-size: 26rpx;
  margin-top: 16rpx;
  margin-bottom: 22rpx;
  font-family: "SourceHanSansCN-Medium";
}
.goods {
  width: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 18rpx;
  padding: 18rpx;
  box-sizing: border-box;
  align-items: initial;
}
.info_btn {
  width: 124rpx;
  height: 40rpx;
  background-color: #1bbd89;
  border-radius: 8rpx;
  color: #fff;
  font-size: 22rpx;
  font-family: "SourceHanSansCN-Bold";
  font-weight: bold;
}
// 积分兑换-end

// 兑换弹窗
.option_box {
  font-size: 26rpx;
}
.option_box text {
  color: #2db389;
}
.hint {
  font-size: 20rpx;
  color: #d54912;
}
.pay_way {
  width: 100%;
  overflow: hidden;
}
.frist_list {
  width: 50%;
  overflow: hidden;
}
.surplus {
  font-size: 22rpx;
  color: #a8a8a8;
}
.frist_text {
  font-size: 28rpx;
  color: #302f2f;
}
.frist_img {
  width: 35rpx;
  height: 35rpx;
  margin-right: 32rpx;
}
.frist_info {
  width: 100%;
  overflow: hidden;
  align-items: initial;
}
.closePopup {
  width: 42rpx;
  height: 42rpx;
  position: absolute;
  right: 0;
  top: -65rpx;
}
.const_con {
  width: 689rpx;
  border-radius: 10rpx;
  background: #fff;
  position: relative;
}
.const_info {
  width: 100%;
  overflow: hidden;
  padding: 30rpx 50rpx;
  box-sizing: border-box;
}
.const_head {
  width: 100%;
  height: 97rpx;
  border-bottom: 3rpx solid rgba(0, 0, 0, 0.15);
  font-size: 40rpx;
  color: #1bbd89;
  font-family: "SourceHanSansCN-Medium";
}
.conversion {
  width: 269rpx;
  height: 68rpx;
  background: #1bbe8a;
  font-family: "SourceHanSansCN-Medium";
  color: #fff;
  font-size: 32rpx;
  border-radius: 34rpx;
  margin: 40rpx auto 0;
}
// 兑换弹窗-end
</style>