首页增终滚动图片+福利兑换优化

src/api/home.js

@@ -1304,4 +1304,37 @@ export default {
       data
     })
   },
+  // 首页横幅
+  getRowBanner(data) {
+    return request.request({
+      url: '/home/getBanner',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 福利兑换列表
+  getWelfareRedeList(data) {
+    return request.request({
+      url: '/exchange/getWelfareRedeList',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 福利兑换详情
+  getWelfareRedeDetail(data) {
+    return request.request({
+      url: '/exchange/getWelfareRedeDetail',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
 }

src/language/en.json

@@ -454,5 +454,11 @@
   "lang453": "Service Agreement",
   "lang454": "Please enter the search keyword",
   "lang455": "TeaC Exchange",
-  "lang456": "Exchange Now"
+  "lang456": "Exchange Now",
+  "lang457": "Tea Friends Station",
+  "lang458": "Wanliu Exchange Tea House",
+  "lang459": "Token Quantity",
+  "lang460": "USDT Quantity",
+  "lang461": "Token Address",
+  "lang462": "USDT Address"
 }

src/language/zh.json

@@ -438,8 +438,8 @@
   "lang437": "求购中",
   "lang438": "出售中",
   "lang439": "取消出售",
-  "lang440": "请输入转代币的钱包地址",
-  "lang441": "请输入转USDT的钱包地址",
+  "lang440": "请输入转出代币的钱包地址",
+  "lang441": "请输入转出USDT的钱包地址",
   "lang442": "转入地址",
   "lang443": "代币币种",
   "lang444": "代币转账地址",
@@ -455,7 +455,10 @@
   "lang454": "请输入搜索关键词",
   "lang455": "TeaC兑换",
   "lang456": "立即兑换",
-  "lang457": "",
-  "lang458": "",
-  "lang459": ""
+  "lang457": "茶友驿站",
+  "lang458": "万流兑茶阁",
+  "lang459": "代币数量",
+  "lang460": "USDT数量",
+  "lang461": "代币地址",
+  "lang462": "USDT地址"
 }

src/router/index.js

@@ -55,7 +55,8 @@ import frozenTransfer from '../views/mine/frozenTransfer.vue'; //转账标记茶
 import C2CList from '../views/c2c/list.vue'; //c2c列表
 import teacSell from '../views/c2c/sell.vue'; //c2c出售
 import teacBuy from '../views/c2c/buy.vue'; //c2c求购
-import exchange from '../views/mine/exchange.vue';  //兑换
+import exchange from '../views/exchange/exchange.vue';  //福利兑换
+import exchangeList from '../views/exchange/index.vue';  //兑换
 import kf from '../views/index/kf.vue';  //客服
 import exList from '../views/teacEx/index.vue';  //Teac兑换
 import exDetail from '../views/teacEx/detail.vue';  //Teac兑换详情
@@ -441,6 +442,14 @@ const routes = [
           requiresAuth: true
         }
       },
+      {
+        path: 'exchangeList',
+        name: 'exchangeList',
+        component: exchangeList,
+        meta: {
+          requiresAuth: true
+        }
+      },
     ],
   },
 ];

src/views/mine/exchange.vue → src/views/exchange/exchange.vue

@@ -2,7 +2,7 @@
   <div class="assets">
     <div class="head">
       <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
-      <span>{{ dataInfo.title }}</span>
+      <span>{{ $t('lang337') }}</span>
     </div>
     <div class="pd">
       <div class="">
@@ -13,7 +13,7 @@
         <div class="list">
           <div class="box">
             <div class="box_item">
-              <span class="left black operate" v-html="dataInfo.operate_introd"></span>
+              <span class="left black operate" v-html="dataInfo.title"></span>
             </div>
             <div class="box_item">
               <span class="left black">{{ $t('lang442') }}</span>
@@ -22,18 +22,25 @@
                 <span class="copys" @click="copy" :data-clipboard-text="this.dataInfo.transfer_address">{{ $t('lang449') }}</span>
               </div>
             </div>
-            <div class="box_item">
+            <div class="box_item" v-if="dataInfo.is_token == 1">
               <span class="left">{{ $t('lang443') }}</span>
-              <van-radio-group v-model="coin" class="f-sb right">
-                <van-radio v-for="(item, index) in dataInfo.currency" :key="index" :name="item" icon-size="16" checked-color="#29b286" shape="square">{{ item }}</van-radio>
-              </van-radio-group>
+              <span class="right">{{ dataInfo.token_name }}</span>
             </div>
-            <div class="box_item">
-              <span class="left">{{ $t('lang444') }}</span>
+            <div class="box_item" v-if="dataInfo.is_token == 1">
+              <span class="left">{{ $t('lang459') }}</span>
+              <span class="right">{{ dataInfo.token_num }}</span>
+            </div>
+            <div class="box_item" v-if="dataInfo.is_token == 1">
+              <span class="left">{{ $t('lang461') }}</span>
               <van-field v-model="coin_from_address" type="textarea" :placeholder="$t('lang440')" rows="1" autosize class="input" input-align="right" />
             </div>
             <div class="box_item">
-              <span class="left">{{ $t('lang445') }}</span>
+              <span class="left">{{ $t('lang460') }}</span>
+              <span class="right">{{ dataInfo.usdt_num }}</span>
+            </div>
+            
+            <div class="box_item">
+              <span class="left">{{ $t('lang462') }}</span>
               <van-field v-model="usdt_from_address" type="textarea" :placeholder="$t('lang441')" rows="1" autosize class="input" input-align="right" />
             </div>
           </div>
@@ -92,7 +99,7 @@ export default {
     };
   },
   mounted() {
-    this.getWelfareRedeConfig();
+    this.getWelfareRedeDetail();
   },
   methods: {
     //返回上一页
@@ -106,8 +113,8 @@ export default {
       this.navIndex = index;
     },
 
-    getWelfareRedeConfig() {
-      homeApi.getWelfareRedeConfig().then(res => {
+    getWelfareRedeDetail() {
+      homeApi.getWelfareRedeDetail({ ids: this.$route.query.id }).then(res => {
         if (res.code == 200) {
           this.dataInfo = res.data;
         } else {
@@ -129,11 +136,7 @@ export default {
       }
     },
     withdrawCash() {
-      if (!this.coin) {
-        this.$toast(this.$t('lang451'));
-        return;
-      }
-      if (!this.coin_from_address) {
+      if (this.dataInfo.is_token==1 && !this.coin_from_address) {
         this.$toast(this.$t('lang440'));
         return;
       }
@@ -151,7 +154,7 @@ export default {
         .then(() => {
           _this.show = true;
           let params = {
-            coin: _this.coin,
+            ids: _this.$route.query.id,
             coin_from_address: _this.coin_from_address,
             usdt_from_address: _this.usdt_from_address,
           };
@@ -160,10 +163,9 @@ export default {
             .then(res => {
               _this.show = false;
               if (res.code == 200) {
-                _this.currency = '';
                 _this.coin_from_address = '';
                 _this.usdt_from_address = '';
-                _this.getWelfareRedeConfig();
+                _this.getWelfareRedeDetail();
                 Notify({ type: 'success', message: res.msg });
               } else {
                 // Notify({ message: res.msg });
@@ -298,6 +300,8 @@ export default {
         }
         .right {
           width: 120px;
+          text-align: right;
+          font-size: 13px;
           /deep/.van-radio__label {
             font-size: 13px;
             color: #3b3b3b;

src/views/exchange/index.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="assets" @scroll="handleScroll">
+    <div class="head">
+      <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
+      <span>{{ $t('lang458') }}</span>
+    </div>
+    <div class="total_box">
+      <img :src="item.product_image" alt="" v-for="(item, index) in list" :key="index" @click="navigation('exchange', { id: item.id })" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { homeApi } from '@/api/index';
+import { Dialog, Notify } from 'vant';
+export default {
+  data() {
+    return {
+      page: 1,
+      list: [],
+    };
+  },
+  mounted() {
+    this.getWelfareRedeList();
+  },
+  methods: {
+    //返回上一页
+    back() {
+      this.$router.back();
+    },
+    navigation(name, query) {
+      this.$router.push({ name, query });
+    },
+    handleScroll(event) {
+      const container = event.target;
+      const scrollTop = container.scrollTop; // 滚动距离
+      const scrollHeight = container.scrollHeight; // 内容总高度
+      const clientHeight = container.clientHeight; // 可视区域高度
+      // 判断是否滑动到底部
+      if (scrollTop + clientHeight >= scrollHeight - 10) {
+        console.log('Bottom', this.page);
+        if (this.page != -1) {
+          this.page++; // 页数加 1
+          this.getWelfareRedeList(); // 触发加载更多
+        }
+      }
+    },
+    getWelfareRedeList() {
+      homeApi.getWelfareRedeList({ page: this.page }).then(res => {
+        if (res.code == 200) {
+          console.log(res.data.data);
+
+          if (this.list.length >= res.data.total) {
+            this.page = -1; // 重置为 -1，表示没有更多数据
+          } else {
+            this.list = [...this.list, ...res.data.data];
+            if (this.list.length >= res.data.total) {
+              this.page = -1; // 重置为 -1，表示没有更多数据
+            }
+          }
+        } else {
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.head {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(#000, 0.8);
+  letter-spacing: 1.5px;
+  font-weight: 550;
+  background: #fff;
+  padding: 15px 0;
+  z-index: 99;
+  .arrow_img {
+    position: absolute;
+    left: 20px;
+    width: 10px;
+    height: 16px;
+    // transform: translate(0, -50%);
+  }
+}
+.f-sb {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.f-sa {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+.f-sb-n {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+.f-col {
+  display: flex;
+  flex-direction: column;
+}
+.f {
+  display: flex;
+  align-items: center;
+}
+.assets {
+  height: 100vh;
+  overflow: auto;
+  padding: 50px 0 0;
+  background-color: #f6f6f6;
+  .top {
+    color: #000;
+    padding-bottom: 16px;
+    margin: 0 6px;
+  }
+
+  .total_box {
+    font-size: 13px;
+    color: #fff;
+    // height: 140px;
+    // border-radius: 16px;
+    box-sizing: border-box;
+    border-radius: 10px;
+    margin: 14px 14px;
+    img {
+      margin-bottom: 6px;
+    }
+    img {
+      width: 100%;
+      border-radius: 10px;
+    }
+  }
+
+  .bare {
+    text-align: center;
+    font-size: 14px;
+    padding: 60px 14px;
+    color: #888;
+  }
+}
+.wrapper {
+  // display: flex;
+  // justify-content: center;
+  .loading {
+    position: absolute;
+    left: 46%;
+    top: 46%;
+  }
+}
+</style>

src/views/index/index.vue

@@ -34,6 +34,19 @@
           <span>{{ item.text }}</span>
         </div>
       </div>
+      <div class="line-box">
+        <div class="col-banner">
+          <van-swipe :autoplay="3000" class="my-swipe" ref="swipeRef">
+            <van-swipe-item class="swipe-item" v-for="(item, index) in rowBanner" :key="index" @click="navigatorToD(item.introduction)">
+              <van-image style="width: 100%; height: 100%" radius="6" :src="item.img_url" />
+            </van-swipe-item>
+          </van-swipe>
+        </div>
+        <div class="row-banner">
+          <img :src="rowBannerInfo?.line1?.img_url" alt="" @click="navigatorTo(rowBannerInfo.line1.url)" />
+          <img :src="rowBannerInfo?.line2?.img_url" alt="" @click="navigatorTo(rowBannerInfo.line2.url)" />
+        </div>
+      </div>
       <div class="split flex">
         <img src="@/assets/images/index/split.png" alt="" />
         <span>{{ $t('lang263') }}</span>
@@ -200,6 +213,8 @@ export default {
       transfer_list: [],
       product_list: [],
       mortgage_list: [],
+      rowBanner: [],
+      rowBannerInfo: {},
       navlist: [
         {
           text: this.$t('lang259'),
@@ -226,10 +241,15 @@ export default {
           icon: require('@/assets/images/index/fx.png'),
           url: 'invite',
         },
+        // {
+        //   text: this.$t('lang447'),
+        //   icon: require('@/assets/images/index/ex.png'),
+        //   url: 'exchange',
+        // },
         {
-          text: this.$t('lang447'),
-          icon: require('@/assets/images/index/ex.png'),
-          url: 'exchange',
+          text: this.$t('lang457'),
+          icon: require('@/assets/images/index/cy.png'),
+          url: '',
         },
       ],
     };
@@ -270,6 +290,8 @@ export default {
     init() {
       this.getIndexBaseInfo();
       this.getIndexGoodsInfo();
+      this.getRowBanner();
+      this.getAnnouncement();
       this.getUserInfo();
     },
     // bind() {
@@ -345,6 +367,17 @@ export default {
         this.$toast(this.$t('lang2'));
       }
     },
+    navigatorToD(router) {
+      if (router.indexOf('http') == -1) {
+        if (router.indexOf('?') == -1) {
+          this.$router.push({ name: router });
+        } else {
+          this.$router.push({ name: router.split('?')[0], query: { id: router.split('?')[1].split('=')[1] } });
+        }
+      } else {
+        window.location.href = router;
+      }
+    },
     navigatorToPage(name, id, product_id) {
       this.$router.push({ name, query: { id: id, product_id: product_id } });
     },
@@ -358,6 +391,28 @@ export default {
         }
       });
     },
+    getAnnouncement() {
+      let params = {
+        page: 1,
+        query: {},
+        type_id: 2,
+        sub_type_id: 23,
+        title: '',
+      };
+      homeApi.getAnnouncement(params).then(res => {
+        if (res.code == 200) {
+          this.rowBanner = res.data.rows;
+        } else {
+        }
+      });
+    },
+    getRowBanner() {
+      homeApi.getRowBanner().then(res => {
+        if (res.code == 200) {
+          this.rowBannerInfo = res.data;
+        }
+      });
+    },
     getIndexGoodsInfo() {
       homeApi.getIndexGoodsInfo().then(res => {
         if (res.code == 200) {
@@ -690,6 +745,46 @@ export default {
     border-top: 1px solid #cccccc9d;
   }
 }
+.line-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  margin: 16px;
+  .col-banner {
+    width: 39%;
+    box-sizing: border-box;
+    // height: 150px;
+
+    .my-swipe {
+      // width: 100%;
+      // height: 100%;
+      border-radius: 6px;
+
+      // .swipe-item {
+      //   width: 100%;
+      //   height: 100%;
+      // }
+    }
+  }
+  .row-banner {
+    display: flex;
+    flex-direction: column;
+    width: calc(100% - 39%);
+    img {
+      width: 100%;
+      border-radius: 6px;
+    }
+
+    img:first-child {
+      margin: 0 0 4px 4px;
+    }
+    img:last-child {
+      margin: 0 0 4px 4px;
+    }
+  }
+}
+
 .flex {
   display: flex;
   align-items: center;