|
|
@@ -0,0 +1,501 @@
|
|
|
+<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/xuanzhong_icon.png'
|
|
|
+ : '/static/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/xuanzhong_icon.png'
|
|
|
+ : '/static/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/xuanzhong_icon.png'
|
|
|
+ : '/static/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();
|
|
|
+// let reqApi = new ReqApi();
|
|
|
+var appEv = app.$vm.$options;
|
|
|
+// import { ReqApi } from "@/utils/reqTools.js";
|
|
|
+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>
|
DaMowang