寄售+求购

src/api/home.js

@@ -952,4 +952,202 @@ export default {
       data
     })
   },
+  // 寄售分类
+  getPopularType(data) {
+    return request.request({
+      url: '/Product/getPopularType',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 我的关注
+  getTransferCollectList(data) {
+    return request.request({
+      url: '/product/getTransferCollectList',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 寄售详情
+  getTransferDetail(data) {
+    return request.request({
+      url: '/Product/getTransferDetail',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 收藏
+  collect(data) {
+    return request.request({
+      url: '/market/collect',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 寄售公告
+  marketAnnouncement(data) {
+    return request.request({
+      url: '/market/announcement',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 发布求购
+  setBuying(data) {
+    return request.request({
+      url: '/market/setBuying',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 求购列表
+  getBuyingList(data) {
+    return request.request({
+      url: '/market/buyingList',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 出售求购
+  sellBuying(data) {
+    return request.request({
+      url: '/market/sellBuying',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 持有订单
+  getHoldProductOrderList(data) {
+    return request.request({
+      url: '/Product/getHoldProductOrderList',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 求购详情
+  getBuyingDetail(data) {
+    return request.request({
+      url: '/market/getBuyingDetail',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 取消求购
+  cancelBuying(data) {
+    return request.request({
+      url: '/market/cancelBuying',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 配置信息
+  getMarketConfig(data) {
+    return request.request({
+      url: '/market/getMarketConfig',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 产品最大价
+  getBuyingMaxPrice(data) {
+    return request.request({
+      url: '/market/getBuyingMaxPrice',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 锁单
+  setTransferLock(data) {
+    return request.request({
+      url: '/market/setTransferLock',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 获取待支付数量
+  getWaitPayOrderCount(data) {
+    return request.request({
+      url: '/user/getWaitPayOrderCount',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 取消待支付
+  setCancelWaitPayOrder(data) {
+    return request.request({
+      url: '/user/setCancelWaitPayOrder',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 待支付列表
+  getWaitPayOrderList(data) {
+    return request.request({
+      url: '/user/getWaitPayOrderList',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
+  // 我的求购列表
+  getMyBuyingList(data) {
+    return request.request({
+      url: '/user/getBuyingList',
+      method: "post",
+      headers: {
+        'Accept-Language': localStorage.getItem('language') || 'zh-cn',
+      },
+      data
+    })
+  },
 }

src/language/en.json

@@ -339,5 +339,70 @@
   "lang338": "Current balance of Marked Tea Treasure",
   "lang339": "Marked Tea Treasure",
   "lang340": "Are you sure to transfer Marked Tea Treasure?",
-  "lang341": "Floor price:"
+  "lang341": "Floor price:",
+  "lang342": "Transaction volume",
+  "lang343": "Market price",
+  "lang344": "Related announcements",
+  "lang345": "Purchase",
+  "lang346": "Number",
+  "lang347": "Locked",
+  "lang348": "Buy in bulk",
+  "lang349": "Initiate purchase",
+  "lang350": "Payment wallet: Chabao account",
+  "lang351": "Chaquan information",
+  "lang352": "Buy now",
+  "lang353": "Market list",
+  "lang354": "Confirm order",
+  "lang355": "Sell at purchase price",
+  "lang356": "Service instructions",
+  "lang357": "I have agreed to RWACHA",
+  "lang358": "《Service Agreement》",
+  "lang359": "Purchase instructions",
+  "lang360": "Please do not lock orders frequently, otherwise it will trigger the ladder ban rule",
+  "lang361": "Amount payable",
+  "lang362": "Balance",
+  "lang363": "Chabao account",
+  "lang364": "Payment method",
+  "lang365": "Payment method",
+  "lang366": "Expected income",
+  "lang367": "Comprehensive service fee",
+  "lang368": "Select sales number",
+  "lang369": "Confirm transaction",
+  "lang370": "Purchase quantity",
+  "lang371": "Purchase price",
+  "lang372": "Prepayment",
+  "lang373": "Please select the product to purchase",
+  "lang374": "Are you sure to sell?",
+  "lang375": "Congratulations, the sale was successful",
+  "lang376": "Do you confirm to prepay CCXX to initiate purchase?",
+  "lang377": "Please enter the purchase price",
+  "lang378": "No data",
+  "lang379": "(Single transaction only)",
+  "lang380": "Quantity owned:",
+  "lang381": "Purchase price",
+  "lang382": "Total price",
+  "lang383": "Current highest purchase price",
+  "lang384": "Purchase price must not be lower than",
+  "lang385": "No lower than",
+  "lang386": "Chabao account supports a maximum of XX purchases",
+  "lang387": "Purchase XX items",
+  "lang388": "Purchase successful",
+  "lang389": "Order list",
+  "lang390": "Purchase list",
+  "lang391": "Cancel purchase",
+  "lang392": "Purchase in progress",
+  "lang393": "Purchase quantity:",
+  "lang394": "Completed quantity:",
+  "lang395": "Purchase price:",
+  "lang396": "To be paid",
+  "lang397": "Price:",
+  "lang398": "Service fee:",
+  "lang399": "Payment countdown:",
+  "lang400": "Payment",
+  "lang401": "Are you sure you want to cancel the order?",
+  "lang402": "Refresh successful",
+  "lang403": "Purchasing",
+  "lang404": "Are you sure you want to cancel the purchase?",
+  "lang405": "Are you sure you will pay CCXX to purchase the tea rights?",
+  "lang406": "You have no sales orders"
 }

src/language/zh.json

@@ -340,34 +340,99 @@
   "lang339": "标记茶宝",
   "lang340": "是否确定转账标记茶宝？",
   "lang341": "地板价：",
-  "lang342": "",
-  "lang343": "",
-  "lang344": "",
-  "lang345": "",
-  "lang346": "",
-  "lang347": "",
-  "lang348": "",
-  "lang349": "",
-  "lang350": "",
-  "lang351": "",
-  "lang352": "",
-  "lang353": "",
-  "lang354": "",
-  "lang355": "",
-  "lang356": "",
-  "lang357": "",
-  "lang358": "",
-  "lang359": "",
-  "lang360": "",
-  "lang361": "",
-  "lang362": "",
-  "lang363": "",
-  "lang364": "",
-  "lang365": "",
-  "lang366": "",
-  "lang367": "",
-  "lang368": "",
-  "lang369": "",
-  "lang370": "",
-  "lang371": ""
+  "lang342": "成交量",
+  "lang343": "市场价格",
+  "lang344": "相关公告",
+  "lang345": "求购",
+  "lang346": "编号",
+  "lang347": "锁定中",
+  "lang348": "批量购买",
+  "lang349": "发起求购",
+  "lang350": "支付钱包: 茶宝账户",
+  "lang351": "茶权信息",
+  "lang352": "立即购买",
+  "lang353": "市场列表",
+  "lang354": "确认订单",
+  "lang355": "以求购价售出",
+  "lang356": "服务须知",
+  "lang357": "我已同意RWACHA",
+  "lang358": "《服务协议》",
+  "lang359": "求购说明",
+  "lang360": "请不要频繁锁单，否则会触发阶梯禁购规则",
+  "lang361": "应付金额",
+  "lang362": "余额",
+  "lang363": "茶宝账户",
+  "lang364": "支付方式",
+  "lang365": "收款方式",
+  "lang366": "预计收入",
+  "lang367": "综合服务费",
+  "lang368": "选择售出编号",
+  "lang369": "确认成交",
+  "lang370": "求购数量",
+  "lang371": "求购价格",
+  "lang372": "预付",
+  "lang373": "请选择要购买的产品",
+  "lang374": "是否确定售出？",
+  "lang375": "恭喜，出售成功",
+  "lang376": "您确认预付CCXX发起求购吗？",
+  "lang377": "请输入求购价格",
+  "lang378": "无数据",
+  "lang379": "（仅支持单笔）",
+  "lang380": "拥有数量：",
+  "lang381": "求购价",
+  "lang382": "总售价",
+  "lang383": "当前最高求购价",
+  "lang384": "求购价格不得低于",
+  "lang385": "不得低于",
+  "lang386": "茶宝账户最大支持XX笔求购",
+  "lang387": "求购XX件",
+  "lang388": "购买成功",
+  "lang389": "订单列表",
+  "lang390": "求购列表",
+  "lang391": "取消求购",
+  "lang392": "求购中",
+  "lang393": "求购量：",
+  "lang394": "完成量：",
+  "lang395": "求购价格：",
+  "lang396": "待支付",
+  "lang397": "价格：",
+  "lang398": "服务费：",
+  "lang399": "支付倒计时：",
+  "lang400": "支付",
+  "lang401": "是否确定取消订单？",
+  "lang402": "刷新成功",
+  "lang403": "求购中",
+  "lang404": "是否确定取消求购？",
+  "lang405": "您确认支付CCXX购买该茶权吗？",
+  "lang406": "您无可出售订单",
+  "lang407": "",
+  "lang408": "",
+  "lang409": "",
+  "lang410": "",
+  "lang411": "",
+  "lang412": "",
+  "lang413": "",
+  "lang414": "",
+  "lang415": "",
+  "lang416": "",
+  "lang417": "",
+  "lang418": "",
+  "lang419": "",
+  "lang420": "",
+  "lang421": "",
+  "lang422": "",
+  "lang423": "",
+  "lang424": "",
+  "lang425": "",
+  "lang426": "",
+  "lang427": "",
+  "lang428": "",
+  "lang429": "",
+  "lang430": "",
+  "lang431": "",
+  "lang432": "",
+  "lang433": "",
+  "lang434": "",
+  "lang435": "",
+  "lang436": ""
 }

src/router/index.js

@@ -11,6 +11,7 @@ import orders from '../views/trade/orders.vue';  //订单页面
 
 import bulletin from '../views/bulletin/index.vue'; //公告
 import bulletinDetail from '../views/bulletin/details.vue'; //公告详情
+import service from '../views/bulletin/service.vue'; //服务协议
 
 import mine from '../views/mine/index.vue';  //我的
 import invite from '../views/mine/invite.vue';  //邀请
@@ -22,14 +23,20 @@ import assets from '../views/mine/assets.vue';  //我的资产
 // import introduce from '../views/introduce/index.vue';  //平台介绍
 // import datainfo from '../views/datainfo/index.vue';  //首页数据页面
 import assetDetails from '../views/mine/assetDetails.vue';  //资产明细页面
-import transfer from '../views/mine/transfer.vue';  //寄售
+import transfer from '../views/transfer/list.vue';  //寄售
+import typeDetail from '../views/transfer/typeDetail.vue';  //寄售分类详情
+import TransferDetail from '../views/transfer/detail.vue';  //寄售详情
+import TransferOrder from '../views/transfer/order.vue';  //寄售确认订单
+import initiatePurchase from '../views/transfer/initiatePurchase.vue';  //发起求购
+import soldConsignment from '../views/transfer/soldConsignment.vue';  //售出求购
+import waitPay from '../views/mine/waitPay.vue';  //待支付
 import personal from '../views/mine/personal.vue';  //个人中心页面
 import share from '../views/mine/share.vue';  //分享奖励
 import language from '../views/mine/language.vue';  //分享奖励
 import GoodsDetail from '../views/trade/detail.vue'; //详情
 import myTeaFriends from '../views/mine/myTeaFriends.vue';  //我的资产
 import setting from '../views/mine/setting.vue';  //设置
-import TransferDetail from '../views/mine/TransferDetail.vue'; //详情
+// import TransferDetail from '../views/mine/TransferDetail.vue'; //寄售详情
 import recharge from '../views/mine/recharge.vue'; //充值
 import rechargeRecord from '../views/mine/rechargeRecord.vue'; //充值记录
 import sendChaBao from '../views/mine/sendChaBao.vue'; //转账茶宝
@@ -323,6 +330,54 @@ const routes = [
           requiresAuth: true
         }
       },
+      {
+        path: 'typeDetail',
+        name: 'typeDetail',
+        component: typeDetail,
+        meta: {
+          requiresAuth: true
+        }
+      },
+      {
+        path: 'TransferOrder',
+        name: 'TransferOrder',
+        component: TransferOrder,
+        meta: {
+          requiresAuth: true
+        }
+      },
+      {
+        path: 'initiatePurchase',
+        name: 'initiatePurchase',
+        component: initiatePurchase,
+        meta: {
+          requiresAuth: true
+        }
+      },
+      {
+        path: 'soldConsignment',
+        name: 'soldConsignment',
+        component: soldConsignment,
+        meta: {
+          requiresAuth: true
+        }
+      },
+      {
+        path: 'waitPay',
+        name: 'waitPay',
+        component: waitPay,
+        meta: {
+          requiresAuth: true
+        }
+      },
+      {
+        path: 'service',
+        name: 'service',
+        component: service,
+        meta: {
+          requiresAuth: true
+        }
+      },
     ],
   },
 ];

src/views/bulletin/service.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="invite">
+    <div class="head">
+      <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
+      <span>{{ dataObj.title }}</span>
+    </div>
+    <div class="box">
+      <div class="title">
+        <span> {{ dataObj.title }} </span>
+      </div>
+      <div class="time">
+        <span>{{ dateFormatFn(dataObj.createtime) }}</span>
+      </div>
+      <div class="content">
+        <div v-if="dataObj.img_url">
+          <img :src="dataObj.img_url" class="image" alt="" />
+        </div>
+        <div class="">
+          <span v-html="dataObj.body"></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+  
+<script>
+import { homeApi } from '@/api/index';
+import { dateFormat } from '@/utils/formatTool.js';
+export default {
+  data() {
+    return {
+      dataObj: {
+        title: undefined,
+        create_time: undefined,
+        body: undefined,
+      },
+    };
+  },
+  mounted() {
+    // this.dataObj = ;
+    this.getData(this.$route.query.id);
+  },
+  methods: {
+    //返回上一页
+    back() {
+      this.$router.back();
+    },
+    dateFormatFn(date) {
+      if (date) {
+        return dateFormat(new Date(date * 1000), 'yyyy-MM-dd');
+      }
+    },
+    getData(id) {
+      let params = {
+        id,
+      };
+      homeApi.getAnnouncementDetail(params).then(res => {
+        if (res.code == 200) {
+          this.dataObj = res.data;
+        }
+      });
+    },
+  },
+};
+</script>
+  
+<style lang="less" scoped>
+.invite {
+  min-height: 100vh;
+  padding-top: 50px;
+  .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: 14px 0;
+    .arrow_img {
+      position: absolute;
+      left: 20px;
+      width: 10px;
+      height: 16px;
+    }
+  }
+  .box {
+    border-radius: 16px;
+    margin: 16px;
+    color: #000;
+    font-size: 13px;
+    padding: 16px;
+    box-shadow: 4px 4px 15px 0px rgba(180, 212, 212, 0.59);
+    background-color: rgba(255, 255, 255, 1);
+    // .flex {
+    //   display: flex;
+    //   align-items: center;
+    //   justify-content: space-between;
+    // }
+
+    .title {
+      font-weight: 550;
+      // text-align: center;
+      color: rgba(#000, 0.86);
+      font-size: 16px;
+      padding-bottom: 16px;
+    }
+    .time {
+      text-align: right;
+      padding-bottom: 16px;
+    }
+    .content {
+      font-size: 13px;
+      color: #2e2e2e;
+      line-height: 200%;
+      padding-top: 16px;
+      border-top: 1px solid rgba(232, 240, 247, 1);
+      .image {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>

src/views/index/index.vue

@@ -21,7 +21,7 @@
           </div>
           <van-notice-bar class="notice" color="#000" background="#ffffff" :scrollable="false">
             <div slot="left-icon" class="notice-ico">{{ $t('lang3') }}</div>
-            <van-swipe vertical class="notice-swipe" style="height: 24px;" :autoplay="3000" :show-indicators="false">
+            <van-swipe vertical class="notice-swipe" style="height: 24px" :autoplay="3000" :show-indicators="false">
               <van-swipe-item v-for="(item, index) in indexinfo.notice_list" :key="index" @click="navigatorToPage('bulletinDetail', indexinfo.notice_list[0].id)">{{ item.title }}</van-swipe-item>
             </van-swipe>
             <div slot="right-icon" style="padding-left: 10px" @click="navigatorTo('bulletin')"><van-icon name="wap-nav" size="20" color="#29b286" /></div>
@@ -57,9 +57,23 @@
             <span class="ellipsis" v-if="$i18n.locale == 'en'">{{ item.products_list.en_name }}</span>
             <span class="ellipsis" v-else>{{ item.products_list.zh_name }}</span>
             <div class="cen">
-              <span class="money"
-                >{{ item.price }}<span class="ssm">{{ $t('lang174') }}</span></span
-              >
+              <span class="money flex">
+                <svg width="12" height="22" viewBox="32 -2 50 96" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                    fill="none"
+                    stroke="red"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                  />
+                  <line x1="52" y1="29" x2="52" y2="73" stroke="red" stroke-width="5.2" stroke-linecap="round" />
+                  <line x1="63" y1="29" x2="63" y2="73" stroke="red" stroke-width="5.2" stroke-linecap="round" />
+                </svg>
+                {{ item.price }}
+                <!-- <span class="ssm">{{ $t('lang174') }}</span> -->
+              </span>
             </div>
             <!-- <span class="time_text">{{ $t('lang6') }} {{ item.cost_price }}{{ $t('lang174') }}</span> -->
             <div class="yel" v-if="item.status == 1">

src/views/mine/index.vue

@@ -105,7 +105,17 @@
     </div>
     <div>
       <van-tabs @click="onClick" color="#29B286" title-active-color="#29B286">
-        <van-tab v-for="(item, index) in statusList" :key="index" :title="item.key"> </van-tab>
+        <!-- <van-tab v-for="(item, index) in statusList" :key="index" :name="item.value" :title="item.key"> </van-tab> -->
+        <van-tab v-for="(item, index) in statusList" :key="index" :name="item.value">
+          <template #title>
+            <van-badge v-if="item.value === 6" :content="waitCount" max="10">
+              <span>{{ item.key }}</span>
+            </van-badge>
+            <template v-else>
+              {{ item.key }}
+            </template>
+          </template>
+        </van-tab>
       </van-tabs>
     </div>
     <div class="list_box">
@@ -228,6 +238,10 @@ export default {
           key: this.$t('lang222'),
           value: 3,
         },
+        {
+          key: this.$t('lang396'),
+          value: 6,
+        },
         {
           key: this.$t('lang193'),
           value: 4,
@@ -253,6 +267,7 @@ export default {
       radio: '',
       selectedFile: null, // 存储选中的文件
       imageUrl: null, // 存储图片预览的URL
+      waitCount: 0,
     };
   },
   created() {
@@ -268,6 +283,7 @@ export default {
         this.userinfo.addressEncrypt = this.userinfo.address.substring(0, 5) + '****' + this.userinfo.address.substring(this.userinfo.address.length - 5, this.userinfo.address.length);
         this.getUserInfo();
         this.getNftList();
+        this.getWaitPayOrderCount();
       }
     },
     afterRead(file) {
@@ -282,9 +298,11 @@ export default {
     },
     submit() {},
     onClick(status) {
-      // console.log(status);
+      console.log(status);
       if (status == 3) {
         this.$router.push({ name: 'storing' });
+      } else if (status == 6) {
+        this.$router.push({ name: 'waitPay' });
       } else {
         this.chooseStatus = status;
         this.page = 1;
@@ -360,6 +378,13 @@ export default {
         }
       });
     },
+    getWaitPayOrderCount() {
+      homeApi.getWaitPayOrderCount({}).then(res => {
+        if (res.code == 200) {
+          this.waitCount = res.data;
+        }
+      });
+    },
     handleScroll(event) {
       const container = event.target;
       const scrollTop = container.scrollTop; // 滚动距离
@@ -745,7 +770,9 @@ export default {
       }
     }
   }
-
+  /deep/.van-badge {
+    font-size: 10px !important;
+  }
   .list_box {
     padding: 14px;
     background-color: #fff;

src/views/mine/operationLog.vue

@@ -2,11 +2,15 @@
   <div class="assets" @scroll="handleScroll">
     <div class="head">
       <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
-      <span>{{ $t('lang227') }}</span>
+      <span>{{ $t('lang251') }}</span>
     </div>
 
     <div class="pd">
-      <div class="top_box">
+      <van-tabs v-model="navActive" color="#29B286" title-active-color="#29B286" title-inactive-color="#c8c9cc" class="van-tabs" @change="changeTab">
+        <van-tab :title="$t('lang389')"></van-tab>
+        <van-tab :title="$t('lang390')"></van-tab>
+      </van-tabs>
+      <div class="top_box" v-if="navActive == 0">
         <van-popover v-model="showPopover" trigger="click" :actions="actions" @select="onSelect">
           <template #reference>
             <div class="btn" type="primary">{{ action.text }}</div>
@@ -14,31 +18,7 @@
         </van-popover>
         <van-field v-model="areaId" :placeholder="$t('lang228')" class="input" right-icon="search" @click-right-icon="search" />
       </div>
-      <div class="">
-        <!-- <div class="total_box">
-          <div>
-            <span class="text">{{ $t('lang112') }}</span>
-          </div>
-          <div class="f-sa">
-            <div class="item">
-              <span class="total">{{ Math.floor(totalReward * 100) / 100 || 0 }}</span>
-              <span>{{ $t('lang174') }}</span>
-            </div>
-          </div>
-          <div class="buy buy1" @click="navigation('recharge')">
-            <van-button class="buy_btn" type="primary">
-              <van-icon name="pending-payment" size="18" />
-              {{ $t('lang138') }}
-            </van-button>
-          </div>
-          <div class="buy" @click="navigation('withdraw')">
-            <van-button class="buy_btn" type="primary">
-              <van-icon name="paid" size="18" />
-              {{ $t('lang113') }}
-            </van-button>
-          </div>
-        </div> -->
-
+      <div class="" v-if="navActive == 0">
         <div class="bare" v-if="total <= 0">
           <span>{{ $t('lang60') }}</span>
         </div>
@@ -76,13 +56,62 @@
           </div>
         </div>
       </div>
+      <div v-else-if="navActive == 1">
+        <div class="pd1 goods_box" v-if="nft_list.length > 0">
+          <div class="goods_list" v-for="(item, index) in nft_list" :key="index">
+            <!-- <div class="tags3" v-if="item.type_id == 2 && item.status != 2 && item.status != 3">❤️</div> -->
+            <div class="tags tags4" v-if="item.status == 0">{{ $t('lang192') }}</div>
+            <div class="tags1" v-if="item.status == 1">{{ $t('lang403') }}</div>
+            <div class="tags tags2" v-if="item.status == 2">{{ $t('lang146') }}</div>
+            
+            <div class="f">
+              <van-image class="goods_list_img" radius="10" :src="item.thum" />
+              <div class="right" style="flex: 2">
+                <span class="title">{{ item.name }}</span>
+                <!-- <div style="font-size: 11px">{{ $t('lang395') + 111 }}</div> -->
+                <div class="cen">
+                  <span class="f" v-if="item.price > 0">
+                    <svg width="24" height="24" viewBox="22 0 96 100" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M70,35 C56,28 38,40 40,54 C40,64 50,74 70,66" fill="none" stroke="black" stroke-width="6" stroke-linecap="round" />
+                      <line x1="52" y1="29" x2="52" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+                      <line x1="63" y1="29" x2="63" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+                    </svg>
+                    <span class="money">{{ item.price }}</span>
+                  </span>
+                </div>
+                <div style="font-size: 11px">{{ $t('lang393') + item.stock }}</div>
+                <div style="font-size: 11px">{{ $t('lang394') + item.num }}</div>
+
+                <div style="font-size: 13px">
+                  <span>{{ dateFormatFn(item.create_time) }}</span>
+                </div>
+              </div>
+            </div>
+
+            <div class="btn_box" v-if="item.status == 1">
+              <div class="buy">
+                <van-button class="buy_btn btn1" type="primary" @click="cancelBuying(item)">{{ $t('lang391') }}</van-button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="bare" v-if="nft_list.length <= 0">
+          <span>{{ $t('lang82') }}</span>
+        </div>
+      </div>
     </div>
+    <van-overlay :show="loading">
+      <div class="wrapper" @click.stop>
+        <van-loading type="spinner" class="loading" />
+      </div>
+    </van-overlay>
   </div>
 </template>
 
 <script>
 import { homeApi } from '@/api/index';
 import { dateFormat } from '@/utils/formatTool.js';
+import { Dialog, Notify, Toast } from 'vant';
 export default {
   data() {
     return {
@@ -93,17 +122,8 @@ export default {
       nickname: '',
       assets: 0,
       list: [],
-      navIndex: 0,
-      navList: [
-        // {
-        //   key: this.$t('lang115'),
-        //   value: 0,
-        // },
-        {
-          key: this.$t('lang114'),
-          value: 1,
-        },
-      ],
+      navActive: [],
+      navActive: 0,
       nft_list: [],
       statusList: [],
       totalReward: 0,
@@ -122,15 +142,9 @@ export default {
     back() {
       this.$router.back();
     },
-    dateFormatFn(date) {
-      return dateFormat(new Date(date * 1000), 'yyyy-MM-dd hh:mm:ss');
-    },
     navigation(name) {
       this.$router.push({ name });
     },
-    changeNav(item, index) {
-      this.navIndex = index;
-    },
     dateFormatFn(date) {
       return dateFormat(new Date(date * 1000), 'yyyy-MM-dd hh:mm:ss');
     },
@@ -143,7 +157,11 @@ export default {
       if (scrollTop + clientHeight >= scrollHeight - 10) {
         if (this.page != -1) {
           this.page++; // 页数加 1
-          this.getOperateLog(); // 触发加载更多
+          if (this.navActive == 0) {
+            this.getOperateLog(); // 触发加载更多
+          } else {
+            this.getMyBuyingList(); // 触发加载更多
+          }
         }
       }
     },
@@ -157,6 +175,23 @@ export default {
       this.list = []; // 重置列表数据
       this.getOperateLog(); // 触发重新获取列表数据
     },
+    getMyBuyingList() {
+      homeApi.getMyBuyingList({ page: this.page, product_id: this.$route.query.product_id, type_id: this.$route.query.type_id }).then(res => {
+        if (res.code == 200) {
+          this.total = res.data.total;
+          if (this.nft_list.length >= res.data.total) {
+            this.page = -1; // 重置为 -1，表示没有更多数据
+          } else {
+            this.nft_list = [...this.nft_list, ...res.data.data];
+            // console.log(this.nft_list.length);
+            if (this.nft_list.length >= res.data.total) {
+              this.page = -1; // 重置为 -1，表示没有更多数据
+            }
+          }
+        } else {
+        }
+      });
+    },
     getOperateLog() {
       let params = {
         page: this.page,
@@ -176,7 +211,6 @@ export default {
             };
           });
           this.actions.unshift({ text: this.$t('lang201'), type_id: -1, status: -1 });
-          console.log(this.actions);
 
           if (this.list.length >= res.data.data.total) {
             this.page = -1; // 重置为 -1，表示没有更多数据
@@ -190,6 +224,47 @@ export default {
         }
       });
     },
+    changeTab() {
+      this.page = 1;
+      this.list = []; // 重置列表数据
+      if (this.navActive == 0) {
+        this.getOperateLog(); // 触发重新获取列表数据
+      } else {
+        this.getMyBuyingList(); // 触发重新获取列表数据
+      }
+    },
+    cancelBuying(item) {
+      let _this = this;
+      Dialog.confirm({
+        title: _this.$t('lang136'),
+        message: _this.$t('lang404'),
+        confirmButtonText: _this.$t('lang111'),
+        cancelButtonText: _this.$t('lang135'),
+      })
+        .then(() => {
+          this.loading = true;
+          homeApi
+            .cancelBuying({ buying_id: item.id })
+            .then(res => {
+              if (res.code == 200) {
+                this.loading = false;
+                _this.page = 1;
+                _this.nft_list = [];
+                _this.getMyBuyingList();
+                Notify({ type: 'success', message: _this.$t('lang150') });
+              } else {
+                this.loading = false;
+                _this.$toast(res.msg);
+              }
+            })
+            .catch(err => {
+              this.loading = false;
+            });
+        })
+        .catch(() => {
+          // on cancel
+        });
+    },
   },
 };
 </script>
@@ -245,6 +320,12 @@ export default {
   overflow: auto;
   padding: 50px 0 0;
   // background-color: #fafbfc;
+  .van-tabs {
+    // position: fixed;
+    // top: 0;
+    width: 100%;
+    // z-index: 99;
+  }
   .top {
     color: #000;
     padding-bottom: 16px;
@@ -423,4 +504,317 @@ export default {
   text-overflow: ellipsis; /* 使用省略号表示文本超出 */
   max-width: 60%;
 }
+.goods_box {
+  // margin: 14px;
+  border-radius: 14px;
+  .good_icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 5px;
+  }
+}
+.pd1 {
+  padding: 16px 14px 14px;
+  // height: auto;
+}
+.goods_list {
+  position: relative;
+  // display: flex;
+  // align-items: center;
+  // justify-content: space-between;
+  color: #000;
+  padding: 14px;
+  border-radius: 6px;
+  // box-shadow: 0 4px 16px 0 rgba(53, 73, 93, 0.15);
+  margin-bottom: 16px;
+  // box-shadow: 4px 4px 15px 0px rgba(180, 212, 212, 0.29);
+  background-color: #fff;
+  // background-image: linear-gradient(90deg, rgba(217, 239, 239, 0.3) 0, rgba(217, 239, 239, 0.3) 0, rgba(225, 240, 242, 0.3) 100%, rgba(225, 240, 242, 0.3) 100%);
+
+  .tags {
+    position: absolute;
+    right: 0;
+    top: 0;
+    font-size: 10px;
+    color: #fff;
+    padding: 4px 14px;
+    z-index: 99;
+    background-color: #29b2b0;
+    border-radius: 0 6px 0 6px;
+  }
+  .tags1 {
+    position: absolute;
+    right: 0;
+    top: 0;
+    font-size: 10px;
+    color: #fff;
+    padding: 4px 14px;
+    z-index: 99;
+    background-color: #29b286;
+    border-radius: 0 6px 0 6px;
+  }
+  .tags3 {
+    position: absolute;
+    left: 3px;
+    top: 3px;
+    z-index: 99;
+    font-size: 15px;
+  }
+  .tags2 {
+    background-color: #1e8df4;
+  }
+  .tags4 {
+    background-color: #cccccc;
+  }
+  &_img {
+    width: 105px;
+    height: 105px;
+    border-radius: 10px;
+    margin-right: 10px;
+  }
+
+  .right {
+    width: calc(100% - 115px);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    font-size: 13px;
+    box-sizing: border-box;
+    padding: 6px 0;
+    .title {
+      width: 100%;
+      overflow: hidden; /* 确保超出容器的文本被裁剪 */
+      white-space: nowrap; /* 确保文本在一行内显示 */
+      text-overflow: ellipsis; /* 使用省略号表示文本超出 */
+    }
+
+    .time_text {
+      color: #7f7f7f;
+      font-weight: normal;
+      font-size: 10px;
+      text-decoration: line-through;
+    }
+    .cen {
+      color: #000;
+
+      font-size: 12px;
+    }
+    .money {
+      font-size: 15px;
+      color: #29b286;
+      margin-left: -8px;
+    }
+    .ssm {
+      font-size: 10px;
+      font-weight: normal;
+    }
+    .mon_t {
+      color: #3d3d3d;
+      font-weight: normal;
+    }
+    .yel {
+      background-color: #f9f6e5;
+      font-weight: normal;
+      margin-left: 8px;
+      padding: 0px 8px;
+      border-radius: 16px;
+      white-space: nowrap;
+      .count {
+        color: #f7c35d;
+        font-size: 9px;
+      }
+    }
+    .green {
+      width: fit-content;
+      color: #29b286;
+      background-color: #ddf2e7;
+      font-size: 10px;
+      font-weight: normal;
+      padding: 2px 6px;
+      border-radius: 6px;
+    }
+    .t2 {
+      text-decoration: none;
+    }
+  }
+  .buy {
+    display: flex;
+    // align-items: flex-end;
+    // justify-content: flex-end;
+    &_btn {
+      height: 32px;
+      width: 100%;
+      text-align: center;
+      line-height: 32px;
+      font-size: 12px;
+      border: none;
+      // padding: 0 20px;
+      white-space: nowrap;
+      border-radius: 30px;
+      box-sizing: border-box;
+      // padding: 0 10px;
+      // overflow: hidden; /* 确保超出容器的文本被裁剪 */
+      // white-space: nowrap; /* 确保文本在一行内显示 */
+      // text-overflow: ellipsis; /* 使用省略号表示文本超出 */
+      border: 1px solid #29b286;
+      background-color: #29b286;
+    }
+    .btn1 {
+      color: #29b286;
+      background-color: #fff;
+    }
+    .btn3 {
+      width: 98px;
+      color: #b9b9b9;
+      padding: 0 20px;
+      border: 1px solid #b9b9b9;
+      background-color: #fff;
+    }
+    .btn4 {
+      width: 96px;
+    }
+  }
+  .buy1 {
+    justify-content: flex-end;
+  }
+}
+.area {
+  color: #363636;
+  font-size: 13px;
+  padding: 20px 30px;
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+
+  .title {
+    color: #000;
+    font-size: 15px;
+    text-align: center;
+    font-weight: bold;
+    // padding: 0 0 14px;
+  }
+  .vanlist {
+    max-height: 350px;
+    overflow: auto;
+    box-sizing: border-box;
+    margin: 20px 0;
+    border: none !important;
+
+    .item {
+      padding: 12px 0 !important;
+      border-bottom: 0.5px solid rgba(190, 190, 190, 0.15);
+    }
+  }
+  .box {
+    margin: 20px 0;
+    .f-r,
+    .f-s {
+      padding: 6px 0;
+    }
+    .f-r span:first-child,
+    .f-s span:first-child {
+      padding-right: 8px;
+      white-space: nowrap;
+    }
+    .d {
+      display: flex;
+      align-items: flex-end;
+    }
+    .input {
+      // width: 100%;
+      // border: 1px solid #29b286;
+      // border-radius: 20px;
+      width: 150px;
+      border-bottom: 0.5px solid rgba(27, 27, 27, 0.15);
+    }
+    .k {
+      padding-top: 6px;
+    }
+    .input1 {
+      width: 100%;
+      border-bottom: 0.5px solid rgba(27, 27, 27, 0.15);
+      // ::v-deep .van-field__body,
+      // ::v-deep .van-field__control {
+      //   height: 32px !important;
+      // }
+    }
+
+    .van-cell {
+      padding: 0 !important;
+    }
+    .s {
+      font-size: 11px;
+      color: #999999;
+      width: 70%;
+    }
+  }
+  .submit {
+    width: 100%;
+    // position: fixed;
+    bottom: 30px;
+    box-sizing: border-box;
+    &_btn {
+      width: 100%;
+      height: 40px;
+      line-height: 40px;
+      font-size: 14px;
+      background-color: #29b286;
+      border: none;
+      white-space: nowrap;
+      border-radius: 30px;
+    }
+  }
+
+  ::v-deep .van-field__control {
+    padding: 0 12px 0;
+    font-size: 12px;
+  }
+
+  ::v-deep .van-hairline--top-bottom::after,
+  ::v-deep.van-hairline-unset--top-bottom::after {
+    border: none;
+  }
+}
+.btn_box {
+  padding-top: 14px;
+}
+.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-r {
+  display: flex;
+  align-items: center;
+}
+.f {
+  display: flex;
+}
+.f-s {
+  display: flex;
+  align-items: flex-start;
+}
+.wrapper {
+  // display: flex;
+  // justify-content: center;
+  .loading {
+    position: absolute;
+    left: 46%;
+    top: 46%;
+  }
+}
 </style>

src/views/mine/rechargeRecord.vue

@@ -26,7 +26,23 @@
                   <!-- <span class="key">{{ item.note }}</span> -->
                   <div class="f-c">
                     <span class="num">{{ item.create_time_text }}</span>
-                    <span class="num"> {{ $t('lang85') }}：{{ item.cha_bao }}{{ $t('lang174') }} </span>
+                    <span class="num f">
+                      {{ $t('lang85') }}：
+                      <svg width="11" height="20" viewBox="38 0 50 96" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                          d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                          fill="none"
+                          stroke="#aaaaaa"
+                          stroke-width="6"
+                          stroke-linecap="round"
+                        />
+                        <line x1="52" y1="29" x2="52" y2="73" stroke="#aaaaaa" stroke-width="5.2" stroke-linecap="round" />
+                        <line x1="63" y1="29" x2="63" y2="73" stroke="#aaaaaa" stroke-width="5.2" stroke-linecap="round" />
+                      </svg>
+                      {{ item.cha_bao }}
+                    </span>
                   </div>
                 </div>
               </div>
@@ -172,6 +188,10 @@ export default {
   display: flex;
   flex-direction: column;
 }
+.f {
+  display: flex;
+  align-items: center;
+}
 .assets {
   height: 100vh;
   overflow: auto;

src/views/mine/share.vue

@@ -37,7 +37,23 @@
         <div class="bg">
           <div class="total_box" v-if="coin_type == 'token'">
             <div>
-              <span class="text">{{ $t('lang80') }}({{ $t('lang174') }})</span>
+              <span class="text f">
+                {{ $t('lang80') }}(
+                <svg width="12" height="22" viewBox="30 0 50 96" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                    fill="none"
+                    stroke="rgba(255, 255, 255, 0.8)"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                  />
+                  <line x1="52" y1="29" x2="52" y2="73" stroke="rgba(255, 255, 255, 0.8)" stroke-width="5.2" stroke-linecap="round" />
+                  <line x1="63" y1="29" x2="63" y2="73" stroke="rgba(255, 255, 255, 0.8)" stroke-width="5.2" stroke-linecap="round" />
+                </svg>
+                )
+              </span>
             </div>
             <div class="total">
               <span>{{ Math.floor(balance * 100) / 100 || 0 }}</span>
@@ -112,7 +128,21 @@
                     <span class="num">{{ dateFormatFn(item.create_time) }}</span>
                     <span class="amount">
                       {{ item.change_amount >= 0 ? '+' + Number(item.change_amount) : Number(item.change_amount) }}
-                      <span class="ssm" v-if="coin_type == 'token'">{{ $t('lang174') }}</span>
+                      <span class="ssm" v-if="coin_type == 'token'">
+                        <svg width="14" height="26" viewBox="30 -16 50 96" xmlns="http://www.w3.org/2000/svg">
+                          <path
+                            d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                            fill="none"
+                            stroke="#29b286"
+                            stroke-width="6"
+                            stroke-linecap="round"
+                          />
+                          <line x1="52" y1="29" x2="52" y2="73" stroke="#29b286" stroke-width="5.2" stroke-linecap="round" />
+                          <line x1="63" y1="29" x2="63" y2="73" stroke="#29b286" stroke-width="5.2" stroke-linecap="round" />
+                        </svg>
+                      </span>
                       <span class="ssm" v-else-if="coin_type == 'teac'">TeaC</span>
                       <span class="ssm" v-else-if="coin_type == 'frozen'">{{ $t('lang339') }}</span>
                     </span>
@@ -317,6 +347,10 @@ export default {
   display: flex;
   flex-direction: column;
 }
+.f {
+  display: flex;
+  align-items: center;
+}
 .assets {
   height: 100vh;
   overflow: auto;

src/views/mine/teaRights.vue

@@ -31,20 +31,65 @@
               <div style="font-size: 11px">{{ $t('lang290') }}{{ item.order_no }}</div>
               <div class="green">{{ item.title }}</div>
               <div class="cen">
-                <span class="money" v-if="item.price > 0">
-                  {{ item.price }}<span class="ssm">{{ $t('lang174') }}</span>
+                <span class="money f-r" v-if="item.price > 0">
+                  <svg width="18" height="22" viewBox="20 -2 50 96" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                      fill="none"
+                      stroke="black"
+                      stroke-width="6"
+                      stroke-linecap="round"
+                    />
+                    <line x1="52" y1="29" x2="52" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+                    <line x1="63" y1="29" x2="63" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+                  </svg>
+                  {{ item.price }}
                 </span>
-                <span class="money" v-else-if="item.price <= 0 && item.floor_price > 0">
+                <span class="money f-r" v-else-if="item.price <= 0 && item.floor_price > 0">
                   <span style="font-size: 13px">{{ $t('lang341') }}</span>
-                  {{ item.floor_price }}<span class="ssm">{{ $t('lang174') }}</span>
+                  <svg width="12" height="22" viewBox="26 -2 56 96" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                      fill="none"
+                      stroke="black"
+                      stroke-width="6"
+                      stroke-linecap="round"
+                    />
+                    <line x1="52" y1="29" x2="52" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+                    <line x1="63" y1="29" x2="63" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+                  </svg>
+                  {{ item.floor_price }}
                 </span>
-                <span class="money" v-else-if="item.price <= 0 && item.floor_price <= 0">
-                  --<span class="ssm">{{ $t('lang174') }}</span>
+                <span class="money f-r" v-else-if="item.price <= 0 && item.floor_price <= 0">
+                  <svg width="12" height="22" viewBox="26 -2 56 96" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                      fill="none"
+                      stroke="black"
+                      stroke-width="6"
+                      stroke-linecap="round"
+                    />
+                    <line x1="52" y1="29" x2="52" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+                    <line x1="63" y1="29" x2="63" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+                  </svg>
+                  --
                 </span>
               </div>
               <div class="cen" v-if="item.status == 2">
-                <span class="money" style="color: #29b286; font-size: 13px">
-                  {{ $t('lang206') }}{{ item.transfer_price || 0 }}<span class="ssm">{{ $t('lang174') }}</span>
+                <span class="money f-r" style="color: #29b286; font-size: 13px">
+                  <span>{{ $t('lang206') }}</span>
+                  <svg width="12" height="22" viewBox="30 0 50 96" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M70,35 C56,28 38,40 40,54 C40,64 50,74 70,66" fill="none" stroke="#29b286" stroke-width="6" stroke-linecap="round" />
+                    <line x1="52" y1="29" x2="52" y2="73" stroke="#29b286" stroke-width="5.2" stroke-linecap="round" />
+                    <line x1="63" y1="29" x2="63" y2="73" stroke="#29b286" stroke-width="5.2" stroke-linecap="round" />
+                  </svg>
+                  {{ item.transfer_price || 0 }}
                 </span>
               </div>
               <div style="font-size: 13px">
@@ -106,12 +151,39 @@
             <span> {{ $t('lang89') }} </span>
             <div class="d">
               <van-field v-model="price" :placeholder="$t('lang93')" type="number" class="input" />
-              <span class="s">{{ $t('lang174') }}</span>
+              <svg width="14" height="26" viewBox="35 -2 50 96" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                  fill="none"
+                  stroke="#999999"
+                  stroke-width="6"
+                  stroke-linecap="round"
+                />
+                <line x1="52" y1="29" x2="52" y2="73" stroke="#999999" stroke-width="5.2" stroke-linecap="round" />
+                <line x1="63" y1="29" x2="63" y2="73" stroke="#999999" stroke-width="5.2" stroke-linecap="round" />
+              </svg>
             </div>
           </div>
           <div class="f-r">
             <span> {{ $t('lang90') }} </span>
-            <span class="s">{{ Math.floor(price * Number(transfes_fee) * 100) / 100 }} {{ $t('lang174') }}</span>
+            <span class="s f-r">
+              <svg width="15" height="20" viewBox="40 0 50 96" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                  fill="none"
+                  stroke="#999999"
+                  stroke-width="6"
+                  stroke-linecap="round"
+                />
+                <line x1="52" y1="29" x2="52" y2="73" stroke="#999999" stroke-width="5.2" stroke-linecap="round" />
+                <line x1="63" y1="29" x2="63" y2="73" stroke="#999999" stroke-width="5.2" stroke-linecap="round" />
+              </svg>
+              {{ Math.floor(price * Number(transfes_fee) * 100) / 100 }}
+            </span>
           </div>
           <div class="f-s">
             <span> {{ $t('lang91') }} </span>
@@ -145,7 +217,22 @@
           </div>
           <div class="f-r">
             <span> {{ $t('lang190') }} </span>
-            <span class="s">{{ Math.floor(item.price * Number(item.gift_fee / 100) * 100) / 100 }} {{ $t('lang174') }}</span>
+            <span class="s f-r">
+              <svg width="11" height="20" viewBox="40 0 50 96" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                  fill="none"
+                  stroke="#999999"
+                  stroke-width="6"
+                  stroke-linecap="round"
+                />
+                <line x1="52" y1="29" x2="52" y2="73" stroke="#999999" stroke-width="5.2" stroke-linecap="round" />
+                <line x1="63" y1="29" x2="63" y2="73" stroke="#999999" stroke-width="5.2" stroke-linecap="round" />
+              </svg>
+              {{ Math.floor(item.price * Number(item.gift_fee / 100) * 100) / 100 }}
+            </span>
           </div>
           <div class="f-s">
             <span> {{ $t('lang91') }} </span>

src/views/mine/transfer.vue

@@ -1,508 +0,0 @@
-<template>
-  <div>
-    <!-- <Header :logoImg="indexinfo.system_logo" style="margin-top: 20px"></Header> -->
-    <!-- <div class="head">
-      <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
-      <span>{{ $t('lang216') }}</span>
-    </div> -->
-    <van-tabs v-model="navActive" color="#29B286" title-active-color="#29B286" @disabled="onClickDisabled">
-      <van-tab :title="$t('lang216')"></van-tab>
-      <van-tab :title="$t('lang245')" disabled></van-tab>
-      <van-tab :title="$t('lang246')" disabled></van-tab>
-    </van-tabs>
-    <div class="home_page" @scroll="handleScroll">
-      <div class="pd1">
-        <van-field v-model="key" :placeholder="$t('lang4')" class="input" right-icon="search" @click-right-icon="search" />
-        <!-- <div class="banner">
-          <van-swipe :autoplay="3000" class="my-swipe" ref="swipeRef">
-            <van-swipe-item class="swipe-item" v-for="(item, index) in indexinfo.banner_list" :key="index">
-              <van-image style="width: 100%; height: 100%" radius="12" :src="item.img_url" />
-            </van-swipe-item>
-          </van-swipe>
-        </div> -->
-        <div class="sort flex jsb">
-          <span>{{ $t('lang244') }}</span>
-
-          <div class="flex">
-            <div class="flex" @click="handlePriceSort">
-              <span>{{ $t('lang247') }}</span>
-              <img src="@/assets/images/index/j0.png" alt="" style="width: 16px" v-if="sort == 0" />
-              <img src="@/assets/images/index/j2.png" alt="" style="width: 16px" v-else-if="sort == 1" />
-              <img src="@/assets/images/index/j1.png" alt="" style="width: 16px" v-else-if="sort == 2" />
-            </div>
-            <van-dropdown-menu active-color="#3d3d3d">
-              <!-- <van-dropdown-item v-model="sort" :options="option1" @change="search" /> -->
-              <van-dropdown-item v-model="type_id" :options="indexinfo.type_list" @change="search" />
-            </van-dropdown-menu>
-          </div>
-        </div>
-      </div>
-      <div class="pd goods_box">
-        <div class="goods_list jsb" v-for="(item, index) in list" :key="index">
-          <van-image class="goods_list_img" radius="10" :src="item.img_url" />
-          <div class="right" style="flex: 1">
-            <span class="ellipsis">{{ item.name }}</span>
-            <div class="green">{{ item.title }}</div>
-            <span class="time_text t2">{{ $t('lang15') }}{{ item.nickname }}</span>
-            <span class="time_text t2">{{ item.address }}</span>
-            <div class="flex jsb">
-              <div class="cen">
-                <span class="mon_t">{{ $t('lang16') }}: </span>
-                <span class="money"
-                  >{{ Math.floor(item.price * 100) / 100 }}<span class="ssm">{{ $t('lang174') }}</span></span
-                >
-              </div>
-              <div class="buy" @click="navigatorToPage('TransferDetail', item.id)">
-                <van-button class="buy_btn" type="primary">{{ $t('lang17') }}</van-button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <BottomNavigation></BottomNavigation>
-  </div>
-</template>
-
-<script>
-import Header from '@/components/Header.vue';
-import { mapState } from 'vuex';
-import { homeApi } from '@/api/index';
-import BottomNavigation from '@/components/BottomNavigation.vue';
-import { Notify } from 'vant';
-import { dateFormat } from '@/utils/formatTool.js';
-export default {
-  data() {
-    return {
-      show: false, //弹窗状态
-      address: '', //上级地址
-      noticeText: '', //公告
-      indexinfo: {
-        system_name: '',
-        system_logo: '',
-        banner_list: [],
-        notice_list: [],
-      },
-      inviteCode: undefined,
-      userinfo: {
-        power: undefined,
-        token: undefined,
-        usdt: undefined,
-        team_poser: undefined,
-      },
-      bindShow: false,
-      time: 30 * 60 * 60 * 1000,
-      showLoading: true,
-      key: '',
-      sort: 0,
-      type_id: 0,
-      option1: [
-        { text: this.$t('lang31'), value: 0 },
-        { text: this.$t('lang32'), value: 1 },
-        { text: this.$t('lang33'), value: 2 },
-      ],
-      option2: [
-        { text: this.$t('lang34'), value: 0 },
-        { text: this.$t('lang28'), value: 1 },
-        { text: this.$t('lang29'), value: 2 },
-        { text: this.$t('lang30'), value: 3 },
-      ],
-      list: [],
-      page: 1,
-      navActive: 0,
-    };
-  },
-  created() {
-    this.inviteCode = this.$route.query.inviteCode;
-    if (this.inviteCode) {
-      localStorage.setItem('inviteCode', this.inviteCode);
-    }
-
-    // this.getUserInfo();
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    //返回上一页
-    back() {
-      this.$router.back();
-    },
-    init() {
-      this.getIndexInfo();
-      this.getTransferList();
-    },
-    dateFormatFn(date) {
-      return dateFormat(new Date(date * 1000), 'yyyy-MM-dd');
-    },
-    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');
-        if (this.page != -1) {
-          this.page++; // 页数加 1
-          this.getTransferList(); // 触发加载更多
-        }
-      }
-    },
-    search() {
-      this.page = 1;
-      this.list = []; // 重置列表数据
-      this.getTransferList(); // 触发重新获取列表数据
-    },
-    getTransferList() {
-      homeApi.getTransferList({ sort: this.sort, type_id: this.type_id, key_val: this.key, page: this.page }).then(res => {
-        if (res.code == 200) {
-          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 {
-        }
-      });
-    },
-
-    navigatorToPage(name, id) {
-      this.$router.push({ name, query: { id: id } });
-    },
-    getIndexInfo() {
-      homeApi.getIndexBaseInfo().then(res => {
-        if (res.code == 200) {
-          this.showLoading = false;
-          this.indexinfo = res.data;
-          this.indexinfo.type_list = res.data.type_list.map(item => {
-            return { text: item.title, value: item.id };
-          });
-          this.indexinfo.type_list.unshift({ text: this.$t('lang34'), value: 0 });
-        } else {
-          this.showLoading = false;
-        }
-      });
-    },
-
-    handleExpand() {
-      this.isExpand = !this.isExpand;
-    },
-    handlePriceSort() {
-      console.log(this.sort);
-
-      if (this.sort == 0) {
-        this.sort = 1;
-      } else if (this.sort == 1) {
-        this.sort = 2;
-      } else if (this.sort == 2) {
-        this.sort = 1;
-      }
-      this.search();
-    },
-    onClickDisabled(name, title) {
-      this.$toast(this.$t("lang2"))
-    },
-  },
-  computed: {
-    ...mapState(['account']),
-  },
-  watch: {
-    account(e) {
-      // this.init();
-      // this.bind();
-    },
-  },
-  components: {
-    Header,
-    BottomNavigation,
-  },
-};
-</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: 14px 0;
-  z-index: 99;
-  .arrow_img {
-    position: absolute;
-    left: 20px;
-    width: 10px;
-    height: 16px;
-    // transform: translate(0, -50%);
-  }
-}
-.home_page {
-  padding: 2px 0 100px;
-  height: 100vh;
-  overflow: auto;
-
-  .pd {
-    padding: 14px;
-    // background-color: #fff;
-  }
-  .pd1 {
-    padding: 14px 14px 0;
-    background-color: #fff;
-    .input {
-      width: 100%;
-      // height: 35px;
-      // line-height: 35px;
-      border: 1px solid #29b286;
-      border-radius: 20px;
-      margin: 10px 0 0px;
-      ::v-deep .van-field__control {
-        padding: 6px 12px;
-      }
-      ::v-deep .van-icon-search {
-        font-size: 22px;
-        color: #29b286;
-        font-weight: bold;
-        margin-right: 10px;
-      }
-    }
-    ::v-deep .van-popup {
-      padding: 10px 20px 30px;
-    }
-    ::v-deep .van-dropdown-item__option {
-      border-bottom: 1px solid rgba(#adadad, 0.2);
-      padding: 10px 0 !important;
-    }
-    ::v-deep .van-dropdown-menu__bar {
-      box-shadow: none;
-    }
-    ::v-deep .van-dropdown-item__option {
-      color: #aaaaaa;
-    }
-    ::v-deep .van-ellipsis {
-      color: #3d3d3d;
-      font-size: 14px;
-    }
-  }
-  .top {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .cha {
-      width: 100px;
-    }
-
-    .input {
-      width: calc(100% - 110px);
-      border: 1px solid #29b286;
-      border-radius: 20px;
-    }
-    ::v-deep .van-field__control {
-      padding: 6px 12px;
-    }
-    ::v-deep .van-icon-search {
-      font-size: 20px;
-      color: #29b286;
-      font-weight: bold;
-      margin-right: 10px;
-    }
-  }
-  .notice {
-    font-size: 13px;
-    margin: 8px 0;
-    .notice-ico {
-      padding: 0 8px;
-      border-radius: 20px;
-      margin-right: 10px;
-      background-color: #e8e8e8;
-    }
-  }
-  ::v-deep .van-notice-bar {
-    padding: 0 !important;
-  }
-  .banner {
-    height: 160px;
-    color: #fff;
-    font-size: 22px;
-    border-radius: 12px;
-    .my-swipe {
-      width: 100%;
-      height: 100%;
-      border-radius: 12px;
-    }
-  }
-
-  .jsb {
-    justify-content: space-between;
-  }
-
-  .goods_box {
-    // margin: 14px;
-    border-radius: 14px;
-    .good_icon {
-      width: 16px;
-      height: 16px;
-      margin-right: 5px;
-    }
-  }
-  .sort {
-    color: #3d3d3d;
-    font-size: 14px;
-  }
-  .goods_list {
-    display: flex;
-    // align-items: center;
-    // justify-content: space-between;
-    color: #000;
-    padding: 14px;
-    border-radius: 10px;
-    // box-shadow: 0 4px 16px 0 rgba(53, 73, 93, 0.15);
-    margin-bottom: 16px;
-    // box-shadow: 4px 4px 15px 0px rgba(180, 212, 212, 0.29);
-    background-color: #fff;
-    // background-image: linear-gradient(90deg, rgba(217, 239, 239, 0.3) 0, rgba(217, 239, 239, 0.3) 0, rgba(225, 240, 242, 0.3) 100%, rgba(225, 240, 242, 0.3) 100%);
-    &_img {
-      width: 90px;
-      height: 90px;
-      border-radius: 10px;
-      margin-right: 10px;
-    }
-
-    .right {
-      width: calc(100% - 100px);
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      font-size: 13px;
-      box-sizing: border-box;
-      // padding: 6px 0;
-
-      .time_text {
-        color: #7f7f7f;
-        font-weight: normal;
-        font-size: 10px;
-        text-decoration: line-through;
-      }
-      .cen {
-        color: red;
-
-        font-size: 12px;
-      }
-      .money {
-        font-size: 15px;
-      }
-      .ssm {
-        font-size: 10px;
-        font-weight: normal;
-      }
-      .mon_t {
-        color: #3d3d3d;
-        font-weight: normal;
-      }
-      .yel {
-        background-color: #f9f6e5;
-        font-weight: normal;
-        margin-left: 8px;
-        padding: 0px 8px;
-        border-radius: 16px;
-        .count {
-          color: #f7c35d;
-          font-size: 9px;
-        }
-      }
-      .green {
-        width: fit-content;
-        color: #29b286;
-        background-color: #ddf2e7;
-        font-size: 10px;
-        font-weight: normal;
-        padding: 2px 6px;
-        border-radius: 6px;
-        margin: 3px 0;
-      }
-      .t2 {
-        text-decoration: none;
-        white-space: nowrap;
-        padding: 2px 0;
-      }
-    }
-    .buy {
-      display: flex;
-      align-items: flex-end;
-      &_btn {
-        height: 26px;
-        line-height: 26px;
-        font-size: 10px;
-        background-color: #29b286;
-        border: none;
-        padding: 0 10px;
-        white-space: nowrap;
-        border-radius: 30px;
-      }
-    }
-  }
-}
-.goods_list1 {
-  flex-wrap: wrap;
-  &_img {
-    width: 100%;
-    height: 70px;
-    border-radius: 10px;
-    margin-right: 10px;
-  }
-  .item {
-    width: 45%;
-    margin-bottom: 10px;
-    .cen {
-      padding-top: 4px;
-      .mon_t {
-        font-size: 11px;
-        color: #7f7f7f;
-      }
-      .money::after {
-        content: 'CHA/年';
-      }
-    }
-  }
-}
-.bind_box {
-  color: #000;
-  padding: 20px 20px 30px;
-  .address_field {
-    border-bottom: 1px solid #cccccc9d;
-    padding: 10px 0;
-    margin: 20px 10px 20px;
-  }
-  .bind_button {
-    color: #fff;
-    text-align: center;
-    background: #7938cf;
-    border-radius: 20px;
-    padding: 10px 0;
-  }
-}
-.flex {
-  display: flex;
-  align-items: center;
-}
-.flex_end {
-  align-items: flex-end;
-}
-::v-deep .van-cascader__option {
-  color: #000;
-}
-.ellipsis {
-  overflow: hidden; /* 确保超出容器的文本被裁剪 */
-  white-space: nowrap; /* 确保文本在一行内显示 */
-  text-overflow: ellipsis; /* 使用省略号表示文本超出 */
-}
-</style>

src/views/mine/waitPay.vue

@@ -0,0 +1,785 @@
+<template>
+  <div class="assets" @scroll="handleScroll">
+    <div class="head">
+      <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
+      <span>{{ $t('lang396') }}</span>
+    </div>
+    <div class="total_box">
+      <div class="total">
+        {{ $t('lang224') }}<span>{{ total || 0 }}</span> {{ $t('lang225') }}
+      </div>
+      <div @click="navigation('operationLog')" class="mx">{{ $t('lang227') }}</div>
+    </div>
+
+    <!-- 资产 -->
+    <div class="">
+      <div class="pd1 goods_box" v-if="nft_list.length > 0">
+        <div class="goods_list" v-for="(item, index) in nft_list" :key="index">
+          <!-- <div class="tags3" v-if="item.type_id == 2 && item.status != 2 && item.status != 3">❤️</div> -->
+          <!-- <div class="tags" v-if="item.status == 2">{{ $t('lang141') }}</div>
+          <div class="tags1" v-if="item.status == 3">{{ $t('lang142') }}</div> -->
+          <div class="f">
+            <van-image class="goods_list_img" radius="10" :src="item.thum" />
+            <div class="right" style="flex: 2">
+              <span class="title">{{ item.name }}</span>
+              <div style="font-size: 11px" class="f-r">{{ $t('lang399') }}<van-count-down :time="(item.lock_time * 1000 + 1000 * 60 * 3 - new Date().getTime()).toFixed()" /></div>
+              <div class="cen f-r">
+                <span style="font-size: 11px">{{ $t('lang396') + '：' }}</span>
+                <span class="money f-r">
+                  <svg width="18" height="22" viewBox="20 -4 50 96" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                      fill="none"
+                      stroke="#29b286"
+                      stroke-width="6"
+                      stroke-linecap="round"
+                    />
+                    <line x1="52" y1="29" x2="52" y2="73" stroke="#29b286" stroke-width="5.2" stroke-linecap="round" />
+                    <line x1="63" y1="29" x2="63" y2="73" stroke="#29b286" stroke-width="5.2" stroke-linecap="round" />
+                  </svg>
+                  {{ item.price }}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div class="btn_box">
+            <!-- 按钮 -->
+            <div class="f-sa">
+              <div class="buy" @click="cancel(item)">
+                <van-button class="buy_btn btn1" type="primary">{{ $t('lang135') }}</van-button>
+              </div>
+              <div class="buy" @click="pay(item)">
+                <van-button class="buy_btn" type="primary">{{ $t('lang400') }}</van-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bare" v-if="nft_list.length <= 0">
+        <span>{{ $t('lang82') }}</span>
+      </div>
+    </div>
+    <van-overlay :show="loading">
+      <div class="wrapper" @click.stop>
+        <van-loading type="spinner" class="loading" />
+      </div>
+    </van-overlay>
+  </div>
+</template>
+
+<script>
+import { homeApi } from '@/api/index';
+import { dateFormat } from '@/utils/formatTool.js';
+import { areaList } from '@vant/area-data';
+import { Dialog, Notify, Toast } from 'vant';
+export default {
+  data() {
+    return {
+      loading: false,
+      total: 0,
+      coinList: [],
+      nft_list: [],
+      searchResult: [],
+      page: 1,
+      item: {},
+    };
+  },
+  mounted() {
+    this.getWaitPayOrderList();
+  },
+  methods: {
+    //返回上一页
+    back() {
+      this.$router.back();
+    },
+
+    navigation(name) {
+      this.$router.push({ name });
+    },
+
+    onClick(status) {
+      // console.log(status);
+      this.chooseStatus = status;
+      this.page = 1;
+      this.nft_list = [];
+      this.getWaitPayOrderList();
+    },
+    getWaitPayOrderList() {
+      homeApi.getWaitPayOrderList({ page: this.page }).then(res => {
+        if (res.code == 200) {
+          this.total = res.data.total;
+          if (this.nft_list.length >= res.data.total) {
+            this.page = -1; // 重置为 -1，表示没有更多数据
+          } else {
+            this.nft_list = [...this.nft_list, ...res.data.data];
+            // console.log(this.nft_list.length);
+            if (this.nft_list.length >= res.data.total) {
+              this.page = -1; // 重置为 -1，表示没有更多数据
+            }
+          }
+        } else {
+        }
+      });
+    },
+
+    // 取消支付
+    cancel(item) {
+      let _this = this;
+      Dialog.confirm({
+        title: _this.$t('lang136'),
+        message: _this.$t('lang401'),
+        confirmButtonText: _this.$t('lang111'),
+        cancelButtonText: _this.$t('lang135'),
+      })
+        .then(() => {
+          this.loading = true;
+          homeApi
+            .setCancelWaitPayOrder({ transfer_id: item.id })
+            .then(res => {
+              if (res.code == 200) {
+                this.loading = false;
+                _this.page = 1;
+                _this.nft_list = [];
+                _this.getWaitPayOrderList();
+                Notify({ type: 'success', message: _this.$t('lang150') });
+              } else {
+                this.loading = false;
+                _this.$toast(res.msg);
+              }
+            })
+            .catch(err => {
+              this.loading = false;
+            });
+        })
+        .catch(() => {
+          // on cancel
+        });
+    },
+    pay(item) {
+      let _this = this;
+      // let params = this.checkOrder.map(i => i.id);
+      Dialog.confirm({
+        title: _this.$t('lang136'),
+        message: _this
+          .$t('lang405')
+          .replace('XX', item.price)
+          .replace(
+            'CC',
+            `<svg width="12" height="22" viewBox="28 -20 50 96" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                    fill="none"
+                    stroke="#646566"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                  />
+                  <line x1="52" y1="29" x2="52" y2="73" stroke="#646566" stroke-width="5.2" stroke-linecap="round" />
+                  <line x1="63" y1="29" x2="63" y2="73" stroke="#646566" stroke-width="5.2" stroke-linecap="round" />
+                </svg>`
+          ),
+        confirmButtonText: _this.$t('lang111'),
+        cancelButtonText: _this.$t('lang135'),
+      })
+        .then(() => {
+          this.loading = true;
+          homeApi.transferOrder({ order_id: item.id }).then(res => {
+            if (res.code == 200) {
+              _this.loading = false;
+              Toast({ message: _this.$t('lang388') });
+              _this.page = 1;
+              _this.nft_list = [];
+              _this.getWaitPayOrderList();
+            } else if (res.code == 15001) {
+              _this.loading = false;
+              setTimeout(() => {
+                _this.$router.push('recharge');
+              }, 300);
+            } else {
+              _this.loading = false;
+            }
+          });
+        })
+        .catch(() => {
+          // on cancel
+        });
+    },
+    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(this.page);
+        // console.log('到底部');
+
+        if (this.page != -1) {
+          this.page++; // 页数加 1
+          this.getWaitPayOrderList(); // 触发加载更多
+        }
+      }
+    },
+  },
+};
+</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.2px;
+  font-weight: 550;
+  background: #fff;
+  padding: 14px 0;
+  height: 50px;
+  z-index: 999;
+  .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-r {
+  display: flex;
+  align-items: center;
+}
+.f {
+  display: flex;
+}
+.f-s {
+  display: flex;
+  align-items: flex-start;
+}
+.btn_box {
+  padding-top: 14px;
+}
+.assets {
+  height: 100vh;
+  padding: 50px 0 0;
+  overflow: scroll;
+  // background-color: #fafbfc;
+  .top {
+    color: #000;
+    padding-bottom: 16px;
+    margin: 0 6px;
+  }
+  .navbar {
+    position: fixed;
+    top: 50px;
+    z-index: 999;
+    width: 100%;
+    color: #000;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #fff;
+    span {
+      color: #aaaaaa;
+      width: 50%;
+      font-size: 14px;
+      text-align: center;
+      line-height: 50px;
+    }
+  }
+  .pd {
+    min-height: 100vh;
+    padding: 4px;
+    margin-top: 54px;
+    background-color: #fff;
+  }
+  .total_box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    // position: relative;
+    color: #fff;
+    height: 80px;
+    // border-radius: 16px;
+    padding: 20px;
+    box-sizing: border-box;
+    // border-radius: 10px;
+    // margin: 10px;
+    background: linear-gradient(to right, #1ab986, #25d7bb);
+
+    .total {
+      font-size: 16px;
+      text-align: center;
+      padding-top: 10px;
+      font-weight: 600;
+    }
+    .text {
+      color: rgba(#fff, 0.8);
+    }
+    .buy_box {
+      position: absolute;
+      bottom: 14px;
+      display: flex;
+      width: 100%;
+      padding: 0 14px;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .buy {
+      &_btn {
+        color: #29b286;
+        height: 30px;
+        line-height: 30px;
+        font-size: 14px;
+        background-color: #ffffff;
+        border: none;
+        padding: 0 16px;
+        white-space: nowrap;
+        border-radius: 30px;
+      }
+    }
+    .mx {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+      width: fit-content;
+      font-size: 11px;
+      color: rgba(#f7f7f7, 0.9);
+      padding: 2px 12px;
+      border-radius: 10px;
+      background-color: rgba(#000, 0.1);
+    }
+  }
+  .balance_box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 16px;
+    margin: 0 6px;
+    border-radius: 20px;
+    background-color: #ffffff;
+    box-shadow: 4px 4px 15px 0px rgba(180, 212, 212, 0.29);
+    .balance_li {
+      color: #510fa8;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      width: 48%;
+      font-size: 13px;
+      border-radius: 16px;
+      padding: 16px 0;
+      // box-shadow: 4px 4px 15px 0px rgba(180, 212, 212, 0.59);
+      // background-color: rgba(255, 255, 255, 0.3);
+
+      .icon {
+        width: 20px;
+        height: 20px;
+        margin-bottom: 10px;
+      }
+    }
+  }
+
+  .bare {
+    text-align: center;
+    font-size: 14px;
+    padding: 110px 14px 60px;
+    color: #aaa;
+  }
+  .list {
+    border-radius: 20px;
+    padding: 0 8px;
+    margin-top: 16px;
+    background-color: #fff;
+    margin: 16px 6px;
+    .li {
+      // display: flex;
+      // align-items: center;
+      // justify-content: space-between;
+      font-size: 14px;
+      color: rgba(51, 51, 51, 1);
+      padding: 14px 0;
+
+      .li_left {
+        // display: flex;
+        // align-items: center;
+        .imgbox {
+          width: 40px;
+          height: 40px;
+          border-radius: 15px;
+          background-color: #f1f1f1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 6px;
+        }
+        .li_img {
+          display: block;
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+        }
+        .title {
+          color: #29b286;
+          font-size: 14px;
+          font-weight: bold;
+        }
+      }
+      .box {
+        padding-top: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        &_item {
+          width: 33%;
+          display: flex;
+          flex-direction: column;
+          .key {
+            color: #aaa;
+            font-size: 12px;
+          }
+          .num {
+            font-size: 14px;
+            color: #000;
+            padding-top: 2px;
+          }
+        }
+        .box_item:last-child {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  .goods_box {
+    // margin: 14px;
+    height: 100vh;
+    overflow: auto;
+    border-radius: 14px;
+    .good_icon {
+      width: 16px;
+      height: 16px;
+      margin-right: 5px;
+    }
+  }
+  .pd1 {
+    padding: 16px 14px 14px;
+    height: auto;
+  }
+  .goods_list {
+    position: relative;
+    // display: flex;
+    // align-items: center;
+    // justify-content: space-between;
+    color: #000;
+    padding: 14px;
+    border-radius: 6px;
+    // box-shadow: 0 4px 16px 0 rgba(53, 73, 93, 0.15);
+    margin-bottom: 16px;
+    // box-shadow: 4px 4px 15px 0px rgba(180, 212, 212, 0.29);
+    background-color: #fff;
+    // background-image: linear-gradient(90deg, rgba(217, 239, 239, 0.3) 0, rgba(217, 239, 239, 0.3) 0, rgba(225, 240, 242, 0.3) 100%, rgba(225, 240, 242, 0.3) 100%);
+
+    .tags {
+      position: absolute;
+      left: 0;
+      top: 0;
+      font-size: 10px;
+      color: #fff;
+      padding: 4px 14px;
+      z-index: 99;
+      background-color: #29b2b0;
+      border-radius: 6px 0 6px 0;
+    }
+    .tags1 {
+      position: absolute;
+      left: 0;
+      top: 0;
+      font-size: 10px;
+      color: #fff;
+      padding: 4px 14px;
+      z-index: 99;
+      background-color: #f4ab1e;
+      border-radius: 6px 0 6px 0;
+    }
+    .tags3 {
+      position: absolute;
+      left: 3px;
+      top: 3px;
+      z-index: 99;
+      font-size: 15px;
+    }
+    .tags2 {
+      background-color: #1e8df4;
+    }
+    &_img {
+      width: 105px;
+      height: 105px;
+      border-radius: 10px;
+      margin-right: 10px;
+    }
+
+    .right {
+      width: calc(100% - 115px);
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      font-size: 13px;
+      box-sizing: border-box;
+      padding: 15px 0;
+      .title {
+        width: 100%;
+        overflow: hidden; /* 确保超出容器的文本被裁剪 */
+        white-space: nowrap; /* 确保文本在一行内显示 */
+        text-overflow: ellipsis; /* 使用省略号表示文本超出 */
+      }
+
+      .time_text {
+        color: #7f7f7f;
+        font-weight: normal;
+        font-size: 10px;
+        text-decoration: line-through;
+      }
+      .cen {
+        color: #000;
+
+        font-size: 12px;
+      }
+      .money {
+        color: #29b286;
+        font-size: 15px;
+      }
+      .ssm {
+        font-size: 10px;
+        font-weight: normal;
+      }
+      .mon_t {
+        color: #3d3d3d;
+        font-weight: normal;
+      }
+      .yel {
+        background-color: #f9f6e5;
+        font-weight: normal;
+        margin-left: 8px;
+        padding: 0px 8px;
+        border-radius: 16px;
+        white-space: nowrap;
+        .count {
+          color: #f7c35d;
+          font-size: 9px;
+        }
+      }
+      .green {
+        width: fit-content;
+        color: #29b286;
+        background-color: #ddf2e7;
+        font-size: 10px;
+        font-weight: normal;
+        padding: 2px 6px;
+        border-radius: 6px;
+      }
+      .t2 {
+        text-decoration: none;
+      }
+    }
+    .buy {
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-end;
+      &_btn {
+        height: 32px;
+        width: 126px;
+        text-align: center;
+        line-height: 32px;
+        font-size: 12px;
+        border: none;
+        // padding: 0 20px;
+        white-space: nowrap;
+        border-radius: 30px;
+        box-sizing: border-box;
+        // padding: 0 10px;
+        // overflow: hidden; /* 确保超出容器的文本被裁剪 */
+        // white-space: nowrap; /* 确保文本在一行内显示 */
+        // text-overflow: ellipsis; /* 使用省略号表示文本超出 */
+        border: 1px solid #29b286;
+        background-color: #29b286;
+      }
+      .btn1 {
+        color: #29b286;
+        background-color: #fff;
+      }
+      .btn3 {
+        width: 98px;
+        color: #b9b9b9;
+        padding: 0 20px;
+        border: 1px solid #b9b9b9;
+        background-color: #fff;
+      }
+      .btn4 {
+        width: 96px;
+      }
+    }
+    .buy1 {
+      justify-content: flex-end;
+    }
+  }
+  .area {
+    color: #363636;
+    font-size: 13px;
+    padding: 20px 30px;
+    width: 100%;
+    box-sizing: border-box;
+    position: relative;
+
+    .title {
+      color: #000;
+      font-size: 15px;
+      text-align: center;
+      font-weight: bold;
+      // padding: 0 0 14px;
+    }
+    .vanlist {
+      max-height: 350px;
+      overflow: auto;
+      box-sizing: border-box;
+      margin: 20px 0;
+      border: none !important;
+
+      .item {
+        padding: 12px 0 !important;
+        border-bottom: 0.5px solid rgba(190, 190, 190, 0.15);
+      }
+    }
+    .box {
+      margin: 20px 0;
+      .f-r,
+      .f-s {
+        padding: 6px 0;
+      }
+      .f-r span:first-child,
+      .f-s span:first-child {
+        padding-right: 8px;
+        white-space: nowrap;
+      }
+      .d {
+        display: flex;
+        align-items: flex-end;
+      }
+      .input {
+        // width: 100%;
+        // border: 1px solid #29b286;
+        // border-radius: 20px;
+        width: 150px;
+        border-bottom: 0.5px solid rgba(27, 27, 27, 0.15);
+      }
+      .k {
+        padding-top: 6px;
+      }
+      .input1 {
+        width: 100%;
+        border-bottom: 0.5px solid rgba(27, 27, 27, 0.15);
+        // ::v-deep .van-field__body,
+        // ::v-deep .van-field__control {
+        //   height: 32px !important;
+        // }
+      }
+
+      .van-cell {
+        padding: 0 !important;
+      }
+      .s {
+        font-size: 11px;
+        color: #999999;
+        width: 70%;
+      }
+    }
+    .submit {
+      width: 100%;
+      // position: fixed;
+      bottom: 30px;
+      box-sizing: border-box;
+      &_btn {
+        width: 100%;
+        height: 40px;
+        line-height: 40px;
+        font-size: 14px;
+        background-color: #29b286;
+        border: none;
+        white-space: nowrap;
+        border-radius: 30px;
+      }
+    }
+
+    ::v-deep .van-field__control {
+      padding: 0 12px 0;
+      font-size: 12px;
+    }
+
+    ::v-deep .van-hairline--top-bottom::after,
+    ::v-deep.van-hairline-unset--top-bottom::after {
+      border: none;
+    }
+  }
+}
+::v-deep .van-cell {
+  padding: 10px 0 !important;
+}
+::v-deep .van-button--danger {
+  background-color: #29b286;
+  border-color: #29b286;
+}
+::v-deep .van-address-edit {
+  padding: 10px 0;
+}
+::v-deep .van-ellipsis {
+  font-size: 10px !important;
+}
+::v-deep .van-overlay {
+  background-color: rgba(#000, 0.3);
+}
+::v-deep van-hairline-unset--top-bottom,
+::v-deep .van-picker__frame {
+  border: 1px solid #fff !important;
+}
+::v-deep .van-address-edit__buttons {
+  padding-bottom: 10px !important;
+  padding-top: 10px !important;
+}
+.wrapper {
+  // display: flex;
+  // justify-content: center;
+  .loading {
+    position: absolute;
+    left: 46%;
+    top: 46%;
+  }
+}
+</style>

src/views/mine/withdraw.vue

@@ -9,7 +9,22 @@
         <div class="total_box">
           <div>
             <!-- <span v-if="type == 1" class="text">{{ $t('lang161') }}(USDT)</span> -->
-            <span class="text">{{ $t('lang161') }}({{ $t('lang174') }})</span>
+            <span class="text f"
+              >{{ $t('lang161') }}(<svg width="12" height="22" viewBox="30 0 50 96" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                  fill="none"
+                  stroke="rgba(255, 255, 255, 0.8)"
+                  stroke-width="6"
+                  stroke-linecap="round"
+                />
+                <line x1="52" y1="29" x2="52" y2="73" stroke="rgba(255, 255, 255, 0.8)" stroke-width="5.2" stroke-linecap="round" />
+                <line x1="63" y1="29" x2="63" y2="73" stroke="rgba(255, 255, 255, 0.8)" stroke-width="5.2" stroke-linecap="round" />
+              </svg>
+              )
+            </span>
           </div>
           <div class="total">
             <span>{{ Math.floor(assets * 100) / 100 || 0 }}</span>
@@ -211,6 +226,10 @@ export default {
   display: flex;
   flex-direction: column;
 }
+.f {
+  display: flex;
+  align-items: center;
+}
 .assets {
   min-height: 100vh;
   padding: 50px 0 0;

src/views/trade/detail.vue

@@ -19,8 +19,36 @@
         <div class="left">
           <div class="price">
             <span>{{ product.info.price }}</span>
-            <span class="small">{{ $t('lang174') }}</span>
-            <span class="small">{{ product.info.cost_price }}{{ $t('lang174') }}</span>
+            <!-- <span class="small">{{ $t('lang174') }}</span> -->
+            <svg width="12" height="22" viewBox="35 -20 50 96" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                fill="none"
+                stroke="#e7e7e7"
+                stroke-width="6"
+                stroke-linecap="round"
+              />
+              <line x1="52" y1="29" x2="52" y2="73" stroke="#e7e7e7" stroke-width="5.2" stroke-linecap="round" />
+              <line x1="63" y1="29" x2="63" y2="73" stroke="#e7e7e7" stroke-width="5.2" stroke-linecap="round" />
+            </svg>
+            <span class="small">
+              <span style="margin-right: -5px">{{ product.info.cost_price }}</span>
+              <svg width="16" height="19" viewBox="40 -22 50 96" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                  fill="none"
+                  stroke="#e7e7e7"
+                  stroke-width="6"
+                  stroke-linecap="round"
+                />
+                <line x1="52" y1="29" x2="52" y2="73" stroke="#e7e7e7" stroke-width="5.2" stroke-linecap="round" />
+                <line x1="63" y1="29" x2="63" y2="73" stroke="#e7e7e7" stroke-width="5.2" stroke-linecap="round" />
+              </svg>
+            </span>
           </div>
           <div class="tags">
             <van-tag class="tag" type="info">{{ $t('lang53') }}</van-tag>
@@ -60,8 +88,21 @@
         <div class="flex jsb">
           <span>{{ item.title }}</span>
           <span> {{ item.start_time_text.split(' ')[0] }}~{{ item.end_time_text.split(' ')[0] }} </span>
-          <span class="red">
-            {{ item.price }}<span class="ssm">{{ $t('lang174') }}</span>
+          <span class="red flex">
+            <svg width="12" height="22" viewBox="35 2 50 96" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                fill="none"
+                stroke="red"
+                stroke-width="6"
+                stroke-linecap="round"
+              />
+              <line x1="52" y1="29" x2="52" y2="73" stroke="red" stroke-width="5.2" stroke-linecap="round" />
+              <line x1="63" y1="29" x2="63" y2="73" stroke="red" stroke-width="5.2" stroke-linecap="round" />
+            </svg>
+            {{ item.price }}
           </span>
           <span class="tag">{{ statusFn(item.status) }}</span>
         </div>

src/views/trade/index.vue

@@ -35,9 +35,22 @@
             <div class="right">
               <span class="ellipsis">{{ item1.name }}</span>
               <div class="cen">
-                <span class="money"
-                  >{{ item1.pro.price }}<span class="ssm">{{ $t('lang174') }}</span></span
-                >
+                <span class="money flex">
+                  {{ item1.pro.price }}
+                  <svg width="12" height="22" viewBox="35 -2 50 96" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                      fill="none"
+                      stroke="red"
+                      stroke-width="6"
+                      stroke-linecap="round"
+                    />
+                    <line x1="52" y1="29" x2="52" y2="73" stroke="red" stroke-width="5.2" stroke-linecap="round" />
+                    <line x1="63" y1="29" x2="63" y2="73" stroke="red" stroke-width="5.2" stroke-linecap="round" />
+                  </svg>
+                </span>
                 <div class="yel" v-if="item1.pro.status == 1">
                   <van-count-down
                     class="count"
@@ -51,7 +64,22 @@
               </div>
               <div class="flex jsb flex_end">
                 <div>
-                  <span class="time_text">{{ $t('lang6') }} {{ item1.pro.cost_price }}{{ $t('lang174') }}</span>
+                  <span class="time_text flex">
+                    {{ $t('lang6') }} {{ item1.pro.cost_price }}
+                    <svg width="8" height="15" viewBox="35 0 50 96" xmlns="http://www.w3.org/2000/svg">
+                      <path
+                        d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                        fill="none"
+                        stroke="#7f7f7f"
+                        stroke-width="6"
+                        stroke-linecap="round"
+                      />
+                      <line x1="52" y1="29" x2="52" y2="73" stroke="#7f7f7f" stroke-width="5.2" stroke-linecap="round" />
+                      <line x1="63" y1="29" x2="63" y2="73" stroke="#7f7f7f" stroke-width="5.2" stroke-linecap="round" />
+                    </svg>
+                  </span>
                   <div class="progress">
                     <van-progress :percentage="(item1.pro.num / item1.pro.stock) * 100 || 0" class="pro" color="#29b286" track-color="#9DDAC6" stroke-width="10" :show-pivot="false"> </van-progress>
                     <span class="p_text">{{ $t('lang26') }}{{ (Math.floor((item1.pro.num / item1.pro.stock) * 100) * 100) / 100 || 0 }}%</span>

src/views/transfer/detail.vue

@@ -0,0 +1,460 @@
+<template>
+  <div class="page" @scroll="handleScroll">
+    <!-- 顶部返回按钮 -->
+    <div class="head">
+      <div class="back" @click="back">
+        <van-icon name="arrow-left" size="18" />
+      </div>
+      <div @click="changeStar">
+        <svg t="1746761208974" class="icon" viewBox="0 0 1058 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1116" width="22" height="22" v-if="product.collect == null">
+          <path
+            d="M274.72727305 953.81818174c-5.4545458 0-10.90909073 0-16.36363653-2.72727247-13.63636406-5.4545458-24.54545479-13.63636406-32.72727305-27.27272724-5.4545458-10.90909073-8.18181826-21.81818145-5.45454492-35.45454551L263.81818144 634.72727305 81.09090898 454.72727305c-21.81818145-21.81818145-21.81818145-54.54545449 0-76.36363682 8.18181826-8.18181826 19.09090898-13.63636406 29.99999971-16.36363652l253.63636436-38.18181797 114.5454539-229.09090869c5.4545458-13.63636406 16.36363653-21.81818145 32.72727305-27.27272725 13.63636406-5.4545458 27.27272724-2.72727247 40.90909131 2.72727246 10.90909073 5.4545458 19.09090898 13.63636406 24.5454539 24.54545479l114.54545479 229.09090869 253.63636347 38.18181797c29.99999971 5.4545458 49.09090869 32.72727305 46.36363624 62.72727275-2.72727247 10.90909073-8.18181826 21.81818145-16.36363565 30.00000059L792.90909072 634.72727305l43.63636377 253.63636348c2.72727247 13.63636406 0 29.99999971-8.18181826 40.90909042s-21.81818145 19.09090898-35.4545455 21.81818233c-10.90909073 2.72727247-24.54545479 0-35.45454552-5.45454581L525.63636406 828.36363623l-226.36363711 119.99999971c-8.18181826 5.4545458-16.36363653 5.4545458-24.5454539 5.4545458zM525.63636406 124.72727276l-125.4545455 256.36363593L116.5454545 419.27272754l204.54545477 199.09090899-49.09090956 280.90909071 253.63636435-133.63636377 253.63636348 133.63636377-49.09090957-280.90909072 204.54545479-199.09090898-280.90909073-40.90909131L525.63636406 124.72727276z"
+            fill="#ffffff"
+            p-id="1117"
+          ></path>
+        </svg>
+        <svg t="1746757109445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1562" width="22" height="22" v-if="product.collect != null">
+          <path
+            d="M547.978 84.41l114.854 232.476c5.536 11.07 16.606 19.373 30.444 22.141l256 37.362c31.827 4.152 45.665 44.281 22.14 67.806l-186.81 179.891c-9.687 9.687-13.838 22.141-11.07 34.595l42.896 256c5.536 31.827-29.059 56.735-58.118 41.514l-229.709-120.39c-11.07-5.535-24.908-5.535-37.362 0l-229.708 120.39c-29.06 15.221-63.654-9.687-58.119-41.514l44.281-254.616c2.768-12.454-1.383-26.292-11.07-34.595L53.967 444.195c-23.524-23.525-11.07-62.27 22.141-67.806l256-37.362c12.454-1.384 23.524-9.686 30.443-22.14L477.405 84.41c13.838-29.06 55.352-29.06 70.573 0z m0 0"
+            fill="#FFBE11"
+            p-id="1563"
+          ></path>
+        </svg>
+      </div>
+    </div>
+    <div class="box">
+      <div class="bg" :style="{ backgroundImage: `url(${product.products.thum})` }"></div>
+      <div class="content">
+        <!-- <div class="mb">
+            <span>{{ $t('lang300') }}</span>
+          </div> -->
+        <img :src="product.products.thum" alt="" class="pic" />
+
+        <span class="name">{{ product.products.name }}</span>
+        <div class="num">
+          <div class="num_box">
+            <div class="left">{{ $t('lang301') }}</div>
+            <div class="right">{{ product.issue }}{{ $t('lang7') }}</div>
+          </div>
+          <div class="num_box">
+            <div class="left">{{ $t('lang302') }}</div>
+            <div class="right">{{ product.circulation }}{{ $t('lang7') }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="bottom">
+      <van-tabs v-model="navActive" color="#29B286" title-active-color="#000" class="van-tabs">
+        <van-tab :title="$t('lang351')"></van-tab>
+        <van-tab :title="$t('lang344')"></van-tab>
+      </van-tabs>
+      <div v-if="navActive == 0" v-html="product.products.details"></div>
+      <div v-if="navActive == 1">
+        <div class="announcement" v-if="announcement.length > 0">
+          <div class="announcement_item" v-for="(item1, index1) in announcement" :key="index1">
+            {{ item1.title }}
+          </div>
+        </div>
+        <div class="bare" v-else>
+          <span>{{ $t('lang60') }}</span>
+        </div>
+      </div>
+
+      <div class="btn_box flex sb">
+        <div class="left">
+          <div class="flex">
+            <svg width="28" height="28" viewBox="28 2 100 96" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                fill="none"
+                stroke="black"
+                stroke-width="6"
+                stroke-linecap="round"
+              />
+              <line x1="52" y1="29" x2="52" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+              <line x1="63" y1="29" x2="63" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+            </svg>
+            <span class="price"> {{ this.product.producttransfer[0]?.price }} </span>
+          </div>
+          <div @click="navigatorTo('transfer')">{{ $t('lang353') }}<van-icon name="arrow" size="14" color="#c5c5c5" /></div>
+        </div>
+        <div class="btn" @click="navigatorTo('TransferOrder')">{{ $t('lang352') }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+    <script>
+import { homeApi } from '@/api/index';
+import { Dialog, Notify, Toast } from 'vant';
+export default {
+  data() {
+    return {
+      loading: false,
+      number: 1,
+      product: {
+        products: {
+          thum: '',
+        },
+        producttransfer: [],
+      },
+      navActive: 0,
+      smallNav: [
+        {
+          key: this.$t('lang49'),
+          value: 0,
+        },
+        {
+          key: this.$t('lang345'),
+          value: 1,
+        },
+      ],
+      smallNavIndex: 0,
+      sort: 0,
+      volume: 0,
+      announcement: [],
+      page: 1,
+      price: 0,
+    };
+  },
+  mounted() {
+    this.getTransferDetail();
+  },
+  methods: {
+    back() {
+      this.$router.back();
+    },
+    changeStar() {
+      if (this.product.collect == null) {
+        this.product.collect = 1;
+      } else {
+        this.product.collect = null;
+      }
+      homeApi.collect({ market_id: this.product.id }).then(res => {
+        if (res.code == 200) {
+        } else {
+          this.$toast(res.msg);
+          this.product.collect = null;
+        }
+      });
+    },
+    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');
+        if (this.page != -1) {
+          this.page++; // 页数加 1
+          if (this.navActive == 1) {
+            this.marketAnnouncement();
+          }
+        }
+      }
+    },
+    getTransferDetail() {
+      homeApi.getTransferDetail({ ids: this.$route.query.id, transfer_id: this.$route.query.transfer_id }).then(res => {
+        if (res.code == 200) {
+          this.product = res.data;
+        //   this.price = this.product.producttransfer.filter(i => {
+        //     return i.id == this.$route.query.transfer_id;
+        //   })[0].price;
+          this.marketAnnouncement();
+        } else {
+        }
+      });
+    },
+    marketAnnouncement() {
+      homeApi.marketAnnouncement({ product_id: this.product.product_id, page: this.page }).then(res => {
+        if (res.code == 200) {
+          if (this.announcement.length >= res.data.total) {
+            this.page = -1; // 重置为 -1，表示没有更多数据
+          } else {
+            this.announcement = [...this.announcement, ...res.data.data];
+            if (this.announcement.length >= res.data.total) {
+              this.page = -1; // 重置为 -1，表示没有更多数据
+            }
+          }
+        } else {
+        }
+      });
+    },
+    submit() {
+      let _this = this;
+      let params = {
+        id: this.$route.query.id,
+        num: this.number,
+        product_list: {},
+      };
+      this.loading = true;
+      homeApi.synthesisCreate(params).then(res => {
+        if (res.code == 200) {
+          _this.loading = false;
+          Toast({ message: _this.$t('lang318') });
+          _this.$router.push('mine');
+        } else if (res.code == 15001) {
+          _this.loading = false;
+          setTimeout(() => {
+            _this.$router.push('recharge');
+          }, 300);
+        } else {
+          _this.loading = false;
+        }
+      });
+    },
+    navigatorTo(name, query) {
+      if (name == 'TransferOrder') {
+        query = {
+          product: JSON.stringify(this.product.products),
+          checkOrder: JSON.stringify(this.product.producttransfer),
+        };
+      }
+      this.$router.push({ name, query });
+    },
+    handlePriceSort() {
+      console.log(this.sort);
+
+      if (this.sort == 0) {
+        this.sort = 1;
+      } else if (this.sort == 1) {
+        this.sort = 2;
+      } else if (this.sort == 2) {
+        this.sort = 1;
+      }
+      this.search();
+    },
+    handleVolumeSort() {
+      console.log(this.volume);
+
+      if (this.volume == 0) {
+        this.volume = 1;
+      } else if (this.volume == 1) {
+        this.volume = 2;
+      } else if (this.volume == 2) {
+        this.volume = 1;
+      }
+      this.search();
+    },
+  },
+};
+</script>
+  <style lang="less" scoped>
+.head {
+  position: fixed;
+  top: 14px;
+  left: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  color: rgba(#000, 0.8);
+  letter-spacing: 1.5px;
+  padding: 14px 20px;
+  z-index: 99;
+  .arrow_img {
+    // position: absolute;
+    width: 10px;
+    height: 16px;
+    // transform: translate(0, -50%);
+  }
+  .back {
+    color: #acacac;
+    box-sizing: border-box;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: rgba(#000, 0.3);
+  }
+}
+.page {
+  height: 100vh;
+  overflow: auto;
+}
+.box {
+  position: relative;
+  width: 100%;
+  height: 620px;
+  color: #000;
+  font-size: 13px;
+  padding-top: 50px;
+  box-sizing: border-box;
+  //   background-color: #fff;
+
+  .bg {
+    width: 100%;
+    position: absolute;
+    inset: 0;
+    background-size: 200% 790px;
+    background-repeat: no-repeat;
+    background-position: center -50px;
+    filter: blur(16px);
+    // transform: scale(1.1); /* 防止边缘模糊 */
+    z-index: 1;
+    pointer-events: none; /* 不阻挡点击事件 */
+  }
+  .content {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    padding: 80px 0 16px;
+    .pic {
+      width: 300px;
+      height: 300px;
+      border-radius: 12px;
+      border: 8px solid #c0c0c0;
+    }
+    .name {
+      color: #fff;
+      font-size: 19px;
+      letter-spacing: 2px;
+      font-weight: 600;
+      padding: 16px 0;
+    }
+
+    .num {
+      display: flex;
+      align-items: center;
+
+      &_box {
+        display: flex;
+        align-items: center;
+        font-size: 8px;
+        letter-spacing: 1px;
+        margin: 0 5px;
+        .left {
+          color: #000;
+          padding: 0px 3px;
+          // border: 0.5px solid #ffe493;
+          background: linear-gradient(to right, #ddb54e, #f9eca9);
+        }
+        .right {
+          color: #000;
+          padding: 0 3px;
+          background-color: rgba(#fbf8de, 0.5);
+        }
+      }
+    }
+  }
+}
+.flex {
+  display: flex;
+  align-items: center;
+}
+.sb {
+  justify-content: space-between;
+}
+.bottom {
+  padding: 14px 14px 120px;
+  background-color: #fff;
+
+  .small_nav {
+    width: fit-content;
+    font-size: 11px;
+    padding: 2px;
+    border-radius: 20px;
+
+    background-color: #f5f5f5;
+    &_item {
+      color: #8b8b8b;
+      display: block;
+      text-align: center;
+      min-width: 26px;
+      padding: 2px 6px;
+      margin: 1px;
+      border-radius: 20px;
+      overflow: hidden; //超出的文本隐藏
+      text-overflow: ellipsis; //溢出用省略号显示
+      white-space: nowrap; //溢出不换行
+    }
+  }
+
+  .nav_active {
+    color: #29b286;
+    background-color: #fff !important;
+  }
+
+  .sort {
+    color: #8b8b8b;
+    font-size: 11px;
+    .flex {
+      padding-left: 14px;
+    }
+  }
+  .announcement {
+    padding-top: 10px;
+    &_item {
+      color: #000;
+      font-size: 13px;
+      padding: 10px 0;
+      border-bottom: 1px solid rgba(#c7c7c7, 0.3);
+      margin-bottom: 8px;
+    }
+  }
+
+  /deep/.van-tab {
+    flex: none;
+    font-weight: 600;
+    color: #c5c5c5;
+    font-size: 13px;
+    letter-spacing: 0.5px;
+    margin-right: 10px;
+  }
+
+  /deep/.van-tabs__nav--line {
+    padding-bottom: 10px;
+  }
+}
+.btn_box {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 75px;
+  z-index: 99;
+  padding: 16px 20px;
+  border-top: 1px solid rgba(#c7c7c7, 0.3);
+  background-color: #fff;
+  .btn {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    width: 68%;
+    height: 100%;
+    box-sizing: border-box;
+    color: #fff;
+    font-size: 15px;
+    text-align: center;
+    font-weight: 600;
+    letter-spacing: 1px;
+    padding: 12px 10px;
+    border-radius: 22px;
+    background-color: #29b286;
+  }
+  .submit {
+    width: 58%;
+    background-color: #17ab79;
+  }
+  .left {
+    color: #000;
+    font-size: 14px;
+    .price {
+      font-size: 18px;
+      font-weight: 600;
+      margin-left: -10px;
+    }
+  }
+}
+</style>
+    
+    

src/views/transfer/initiatePurchase.vue

@@ -0,0 +1,588 @@
+<template>
+  <div class="product-detail-page">
+    <!-- 顶部返回按钮 -->
+    <div class="head">
+      <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
+      <span>{{ $t('lang349') }}</span>
+    </div>
+    <div class="box">
+      <div class="box_item">
+        <div class="flex">
+          <img :src="product.thum" alt="" class="pic" />
+
+          <div class="right">
+            <div class="name_box">
+              <div class="name">{{ product.name }}</div>
+              <div class="flex sb reflash">
+                <span class="flex">
+                  {{ $t('lang383') }}
+                  <svg width="18" height="20" viewBox="16 -8 100 100" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M70,35
+             C56,28 38,40 40,54
+             C40,64 50,74 70,66"
+                      fill="none"
+                      stroke="black"
+                      stroke-width="6"
+                      stroke-linecap="round"
+                    />
+                    <line x1="52" y1="29" x2="52" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+                    <line x1="63" y1="29" x2="63" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+                  </svg>
+                  <span class="reflash_price">{{ maxPrice }}</span>
+                </span>
+                <van-icon name="replay" size="14px" color="#808080" @click="getBuyingMaxPrice(0)" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="pt">
+          <div class="title">{{ $t('lang371') }}</div>
+          <div class="flex grey">{{ $t('lang384') + configInfo.min_buy_price }}</div>
+          <div class="flex">
+            <svg width="43" height="43" viewBox="25 0 100 100" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M70,35
+             C56,28 38,40 40,54
+             C40,64 50,74 70,66"
+                fill="none"
+                stroke="black"
+                stroke-width="6"
+                stroke-linecap="round"
+              />
+              <line x1="52" y1="29" x2="52" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+              <line x1="63" y1="29" x2="63" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+            </svg>
+            <van-field v-model="qiuPrice" :placeholder="$t('lang385') + configInfo.min_buy_price" type="number" />
+          </div>
+        </div>
+      </div>
+
+      <div class="box_item">
+        <div class="title flex sb">
+          {{ $t('lang370') }}
+          <van-stepper v-model="qiuNumber" min="1" :max="maxCount" />
+        </div>
+        <div class="flex grey">{{ $t('lang386').replace('XX', maxCount) }}</div>
+      </div>
+      <div class="box_item">
+        <div class="title">{{ $t('lang364') }}</div>
+        <div class="flex grey">
+          {{ $t('lang363') + '(' + $t('lang362') }}：
+          <svg width="12" height="22" viewBox="32 0 50 96" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+              fill="none"
+              stroke="black"
+              stroke-width="6"
+              stroke-linecap="round"
+            />
+            <line x1="52" y1="29" x2="52" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+            <line x1="63" y1="29" x2="63" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+          </svg>
+          {{ balance }})
+        </div>
+      </div>
+      <div class="box_item">
+        <div class="title">{{ $t('lang356') }}</div>
+        <div class="flex">
+          <van-checkbox v-model="checked" class="black" shape="square" checked-color="#29b286" icon-size="16px"
+            >{{ $t('lang357') }} <span class="green" @click.stop="navigatorTo('service')">{{ $t('lang358') }}</span></van-checkbox
+          >
+        </div>
+      </div>
+      <div class="box_item">
+        <div class="title">{{ $t('lang359') }}</div>
+        <div class="flex grey desc" v-html="configInfo.serve_desc"></div>
+      </div>
+    </div>
+
+    <div class="btn_box flex sb">
+      <div class="left">
+        <div class="flex">
+          <svg width="28" height="28" viewBox="28 -4 100 96" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M70,35
+             C56,28 38,40 40,54
+             C40,64 50,74 70,66"
+              fill="none"
+              stroke="black"
+              stroke-width="6"
+              stroke-linecap="round"
+            />
+            <line x1="52" y1="29" x2="52" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+            <line x1="63" y1="29" x2="63" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+          </svg>
+          <span class="price"> {{ Math.floor(qiuNumber * qiuPrice * 100) / 100 || '--' }} </span>
+        </div>
+        <span class="font">{{ $t('lang387').replace('XX', qiuNumber) }}</span>
+      </div>
+      <!-- <div class="btn" style="width: 70%">{{ $t('lang372') }}</div> -->
+      <van-button class="btn" style="width: 70%" :disabled="!checked" type="primary" @click="submit">{{ $t('lang372') }}</van-button>
+    </div>
+    <van-overlay :show="loading">
+      <div class="wrapper" @click.stop>
+        <van-loading type="spinner" class="loading" />
+      </div>
+    </van-overlay>
+  </div>
+</template>
+<script>
+import { homeApi } from '@/api/index';
+import { Dialog, Notify, Toast } from 'vant';
+export default {
+  data() {
+    return {
+      loading: false,
+      submitPopop: false,
+      number: 1,
+      product: {},
+      type: 0, // 1确认订单  2以求购价售出  3发起求购
+      checked: false,
+      qiuNumber: 1,
+      qiuPrice: '',
+      configInfo: {
+        lock_time: 0,
+        min_buy_price: 0,
+        serve_desc: '',
+        serve_fee: 0,
+        max_buying_count: 0,
+        zh_serve_agree: '',
+        en_serve_agree: '',
+      },
+      balance: 0,
+      maxPrice: 0,
+      maxCount: 0,
+    };
+  },
+  watch: {
+    qiuPrice(val) {
+      if (val) {
+        this.maxCount = Math.floor(this.balance / val);
+      }
+    },
+  },
+  mounted() {
+    this.product = JSON.parse(this.$route.query.product);
+    this.init();
+  },
+  methods: {
+    init() {
+      this.getHoldProductOrderList();
+      this.getMarketConfig();
+      this.getBuyingMaxPrice(1);
+      this.getUserInfo();
+    },
+    back() {
+      this.$router.back();
+    },
+    getHoldProductOrderList() {
+      homeApi.getHoldProductOrderList({ product_id: this.product.id }).then(res => {
+        if (res.code == 200) {
+          this.orderlist = res.data;
+        } else {
+        }
+      });
+    },
+    getMarketConfig() {
+      homeApi.getMarketConfig({}).then(res => {
+        if (res.code == 200) {
+          this.configInfo = res.data;
+        } else {
+        }
+      });
+    },
+    getBuyingMaxPrice(index) {
+      homeApi.getBuyingMaxPrice({ product_id: this.product.id }).then(res => {
+        if (res.code == 200) {
+          this.maxPrice = res.data;
+          if (!index) {
+            this.$toast(this.$t('lang402'));
+          }
+        } else {
+        }
+      });
+    },
+    getUserInfo() {
+      homeApi.getUserInfo({}).then(res => {
+        if (res.code == 200) {
+          this.balance = res.data.balance;
+        } else {
+        }
+      });
+    },
+    submit() {
+      if (!this.qiuPrice) {
+        return this.$toast(this.$t('lang377'));
+      }
+      let _this = this;
+      let params = {
+        product_id: this.product.id,
+        min_price: this.qiuPrice,
+        stock: this.qiuNumber,
+      };
+      Dialog.confirm({
+        title: _this.$t('lang136'),
+        message: _this
+          .$t('lang376')
+          .replace('XX', Math.floor(_this.qiuNumber * _this.qiuPrice * 100) / 100)
+          .replace(
+            'CC',
+            `<svg width="12" height="22" viewBox="28 -20 50 96" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                    fill="none"
+                    stroke="#646566"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                  />
+                  <line x1="52" y1="29" x2="52" y2="73" stroke="#646566" stroke-width="5.2" stroke-linecap="round" />
+                  <line x1="63" y1="29" x2="63" y2="73" stroke="#646566" stroke-width="5.2" stroke-linecap="round" />
+                </svg>`
+          ),
+        confirmButtonText: _this.$t('lang111'),
+        cancelButtonText: _this.$t('lang135'),
+      })
+        .then(() => {
+          this.loading = true;
+          homeApi.setBuying(params).then(res => {
+            if (res.code == 200) {
+              _this.loading = false;
+              Toast({ message: _this.$t('lang152') });
+              _this.$router.back();
+            } else if (res.code == 15001) {
+              _this.loading = false;
+              setTimeout(() => {
+                _this.$router.push('recharge');
+              }, 300);
+            } else {
+              _this.loading = false;
+            }
+          });
+        })
+        .catch(() => {
+          // on cancel
+        });
+    },
+    navigatorTo(name, id) {
+      if (name == 'service') {
+        console.log(this.$i18n.locale);
+        if (this.$i18n.locale == 'zh-cn') {
+          this.$router.push({ name, query: { id: this.configInfo.zh_serve_agree } });
+        } else if (this.$i18n.locale == 'en') {
+          this.$router.push({ name, query: { id: this.configInfo.en_serve_agree } });
+        }
+      } else {
+        this.$router.push({ name, query: { id: id } });
+      }
+    },
+  },
+};
+</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: 14px 0;
+  z-index: 99;
+  .arrow_img {
+    position: absolute;
+    left: 20px;
+    width: 10px;
+    height: 16px;
+    // transform: translate(0, -50%);
+  }
+}
+.box {
+  width: 100%;
+  // height: 100vh;
+  color: #000;
+  font-size: 13px;
+  padding: 64px 14px 120px;
+  box-sizing: border-box;
+  //   background-color: #fff;
+  .grey {
+    color: #535353;
+  }
+  .black {
+    color: #000;
+  }
+  .grey-8 {
+    color: #535353;
+  }
+
+  &_item {
+    font-size: 12px;
+    letter-spacing: 1px;
+    padding: 10px;
+    border-radius: 12px;
+    margin-bottom: 10px;
+    background-color: #fff;
+    .pic {
+      width: 80px;
+      height: 80px;
+      border-radius: 8px;
+    }
+
+    .right {
+      padding-left: 14px;
+      .name_box {
+        color: #808080;
+        font-size: 13px;
+
+        .name {
+          color: #000;
+          font-size: 16px;
+          font-weight: 600;
+          line-height: 160%;
+        }
+      }
+      .qiu {
+        padding-top: 8px;
+        &_price {
+          font-size: 17px;
+          font-weight: 600;
+          // margin-left: -2px;
+          margin-top: -3px;
+        }
+      }
+    }
+    .title {
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 160%;
+      padding-bottom: 8px;
+    }
+    .price {
+      font-size: 13px;
+      font-weight: 600;
+      margin-left: -2px;
+    }
+    .green {
+      color: #29b286;
+    }
+    .van-checkbox {
+      padding-top: 6px;
+    }
+    .desc {
+      font-size: 11px;
+      line-height: 150%;
+      padding-top: 3px;
+    }
+    .yuji {
+      width: 100%;
+      // padding-top: 8px;
+    }
+    .font {
+      color: #808080;
+      font-size: 11px;
+    }
+    .snlist {
+      flex-wrap: wrap;
+      // justify-content: space-around;
+      justify-content: flex-start;
+      gap: 10px; /* 横向和纵向间距 */
+      padding-top: 8px;
+      &_item {
+        font-size: 11px;
+        text-align: center;
+        padding: 4px 6px;
+        border-radius: 4px;
+        // margin: 0 10px 10px 0;
+        width: calc((100% - 20px) / 3); /* 3列，减去两个gap */
+        background-color: #f5f5f5;
+      }
+      .snlist_item_active {
+        position: relative;
+        color: #29b286;
+        background-color: #cfe9e0;
+        svg {
+          position: absolute;
+          bottom: -6px;
+          right: -7px;
+          font-size: 1px;
+          width: 8px;
+          z-index: 100;
+          fill: #fff;
+        }
+      }
+      .snlist_item_active_tag {
+        bottom: 0px;
+        right: 0px;
+        width: 0;
+        height: 0;
+        z-index: 9;
+        position: absolute;
+        border-width: 8px 8px;
+        border-color: rgba(0, 0, 0, 0) #29b286 #29b286 rgba(0, 0, 0, 0);
+        border-style: solid;
+        border-radius: 4px;
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+    }
+    .reflash {
+      font-size: 10px;
+      color: #000;
+      width: calc(100vw - 150px);
+      padding: 6px 8px;
+      border-radius: 6px;
+      margin-top: 8px;
+      background-color: #f5f5f5;
+
+      &_price {
+        font-size: 16px;
+        font-weight: 600;
+        margin-left: -6px;
+      }
+    }
+    .pt {
+      padding-top: 10px;
+    }
+    /deep/ .van-checkbox__icon .van-icon {
+      border-radius: 2px;
+      border-color: #29b286 !important;
+    }
+    /deep/.van-stepper__input {
+      background-color: #fff;
+    }
+    /deep/.van-stepper__plus,
+    /deep/.van-stepper__minus {
+      transform: scale(0.9);
+      border-radius: 50%;
+    }
+    /deep/.van-field {
+      font-size: 18px;
+      font-weight: 600;
+      margin-left: -10px;
+    }
+    /deep/.van-field__control::placeholder {
+      font-size: 15px;
+      font-weight: normal;
+    }
+    /deep/.van-field__control::-webkit-input-placeholder {
+      font-size: 15px;
+      font-weight: normal;
+    }
+    /deep/.van-field__control::-moz-placeholder {
+      font-size: 15px;
+      font-weight: normal;
+    }
+    /deep/.van-field__control::-ms-input-placeholder {
+      font-size: 15px;
+      font-weight: normal;
+    }
+  }
+}
+.flex {
+  display: flex;
+  align-items: center;
+}
+.sb {
+  justify-content: space-between;
+}
+.bottom {
+  padding: 14px 14px;
+  background-color: #fff;
+
+  /deep/.van-tab {
+    flex: none;
+    font-weight: 600;
+    color: #c5c5c5;
+    font-size: 13px;
+    letter-spacing: 0.5px;
+    margin-right: 10px;
+  }
+
+  /deep/.van-tabs__nav--line {
+    padding-bottom: 10px;
+  }
+}
+.warn {
+  position: fixed;
+  bottom: 75px;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  padding: 4px 0;
+  font-size: 11px;
+  color: #fc9611;
+  font-weight: 600;
+
+  background-color: #f8efe0;
+}
+.btn_box {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 68px;
+  padding: 10px 14px;
+  border-top: 1px solid rgba(#c7c7c7, 0.3);
+  background-color: #fff;
+  .btn {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    color: #fff;
+    font-size: 15px;
+    text-align: center;
+    font-weight: 600;
+    letter-spacing: 1px;
+    padding: 12px 10px;
+    border-radius: 22px;
+    border: none;
+    background-color: #29b286;
+  }
+  .submit {
+    width: 58%;
+    background-color: #17ab79;
+  }
+  .left {
+    color: #000;
+    font-size: 14px;
+    flex-direction: column;
+    .price {
+      font-size: 18px;
+      font-weight: 600;
+      margin-left: -10px;
+      // margin-top: -3px;
+    }
+    .font {
+      font-size: 12px;
+    }
+  }
+}
+/deep/.van-button--disabled {
+  opacity: 0.6;
+}
+.wrapper {
+  // display: flex;
+  // justify-content: center;
+  .loading {
+    position: absolute;
+    left: 46%;
+    top: 46%;
+  }
+}
+</style>
+      
+      

src/views/transfer/list.vue

@@ -0,0 +1,605 @@
+<template>
+  <div>
+    <!-- <Header :logoImg="indexinfo.system_logo" style="margin-top: 20px"></Header> -->
+    <!-- <div class="head">
+      <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
+      <span>{{ $t('lang216') }}</span>
+    </div> -->
+    <van-tabs v-model="navActive" color="#29B286" title-active-color="#29B286" title-inactive-color="#c8c9cc" class="van-tabs" @disabled="onClickDisabled" @change="changeTab">
+      <van-tab :title="$t('lang245')"></van-tab>
+      <van-tab :title="$t('lang216')" disabled></van-tab>
+      <van-tab :title="$t('lang246')"></van-tab>
+    </van-tabs>
+    <div class="home_page" @scroll="handleScroll">
+      <div class="pd1">
+        <div class="btn_box">
+          <van-button v-for="(item, index) in typeList" :key="index" :class="[typeIndex == index ? 'cc_btn cc_active' : 'cc_btn']" @click="changeType(item, index)"> {{ item.title }}</van-button>
+        </div>
+        <van-field v-model="key" :placeholder="$t('lang4')" class="input" right-icon="search" @click-right-icon="search" />
+
+        <div class="sort flex jsb">
+          <span class="w1">{{ $t('lang244') }}</span>
+
+          <!-- <div class="flex"> -->
+          <div class="flex w2" @click="handlePriceSort">
+            <span>{{ $t('lang247') }}</span>
+            <img src="@/assets/images/index/j0.png" alt="" style="width: 14px" v-if="sort == 0" />
+            <img src="@/assets/images/index/j2.png" alt="" style="width: 14px" v-else-if="sort == 1" />
+            <img src="@/assets/images/index/j1.png" alt="" style="width: 14px" v-else-if="sort == 2" />
+          </div>
+          <!-- <div class="flex w3" @click="handleVolumeSort">
+            <span>{{ $t('lang342') }}</span>
+            <img src="@/assets/images/index/j0.png" alt="" style="width: 14px" v-if="volume == 0" />
+            <img src="@/assets/images/index/j2.png" alt="" style="width: 14px" v-else-if="volume == 1" />
+            <img src="@/assets/images/index/j1.png" alt="" style="width: 14px" v-else-if="volume == 2" />
+          </div> -->
+          <!-- <van-dropdown-menu active-color="#3d3d3d">
+              <van-dropdown-item v-model="type_id" :options="indexinfo.type_list" @change="search" />
+            </van-dropdown-menu> -->
+          <!-- <svg width="30" height="30" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                fill="none"
+                stroke="black"
+                stroke-width="6"
+                stroke-linecap="round"
+              />
+              <line x1="52" y1="29" x2="52" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+              <line x1="63" y1="29" x2="63" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+            </svg> -->
+          <!-- </div> -->
+        </div>
+      </div>
+      <div class="goods_box" v-if="list.length > 0">
+        <div class="goods_list jsb" v-for="(item, index) in list" :key="index" @click="navigatorToPage('typeDetail', item.id)">
+          <div class="info">
+            <van-image class="goods_list_img" radius="10" :src="item.img_url" />
+            <div class="name_box">
+              <span class="name ellipsis">{{ item.name }}</span>
+              <span class="time_text t2 ellipsis">{{ $t('lang301') + item.issue }}{{ $t('lang7') + '/' + $t('lang302') }}{{ item.issue }}{{ $t('lang7') }}</span>
+            </div>
+            <div @click.stop="changeStar(item, index)" class="star">
+              <span v-if="item.collect == 0">
+                <svg t="1746757181645" class="icon" viewBox="0 0 1058 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2027" width="15" height="15">
+                  <path
+                    d="M274.72727305 953.81818174c-5.4545458 0-10.90909073 0-16.36363653-2.72727247-13.63636406-5.4545458-24.54545479-13.63636406-32.72727305-27.27272724-5.4545458-10.90909073-8.18181826-21.81818145-5.45454492-35.45454551L263.81818144 634.72727305 81.09090898 454.72727305c-21.81818145-21.81818145-21.81818145-54.54545449 0-76.36363682 8.18181826-8.18181826 19.09090898-13.63636406 29.99999971-16.36363652l253.63636436-38.18181797 114.5454539-229.09090869c5.4545458-13.63636406 16.36363653-21.81818145 32.72727305-27.27272725 13.63636406-5.4545458 27.27272724-2.72727247 40.90909131 2.72727246 10.90909073 5.4545458 19.09090898 13.63636406 24.5454539 24.54545479l114.54545479 229.09090869 253.63636347 38.18181797c29.99999971 5.4545458 49.09090869 32.72727305 46.36363624 62.72727275-2.72727247 10.90909073-8.18181826 21.81818145-16.36363565 30.00000059L792.90909072 634.72727305l43.63636377 253.63636348c2.72727247 13.63636406 0 29.99999971-8.18181826 40.90909042s-21.81818145 19.09090898-35.4545455 21.81818233c-10.90909073 2.72727247-24.54545479 0-35.45454552-5.45454581L525.63636406 828.36363623l-226.36363711 119.99999971c-8.18181826 5.4545458-16.36363653 5.4545458-24.5454539 5.4545458zM525.63636406 124.72727276l-125.4545455 256.36363593L116.5454545 419.27272754l204.54545477 199.09090899-49.09090956 280.90909071 253.63636435-133.63636377 253.63636348 133.63636377-49.09090957-280.90909072 204.54545479-199.09090898-280.90909073-40.90909131L525.63636406 124.72727276z"
+                    fill="#919090"
+                    p-id="2028"
+                  ></path>
+                </svg>
+              </span>
+              <span v-else>
+                <svg t="1746757109445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1562" width="15" height="15">
+                  <path
+                    d="M547.978 84.41l114.854 232.476c5.536 11.07 16.606 19.373 30.444 22.141l256 37.362c31.827 4.152 45.665 44.281 22.14 67.806l-186.81 179.891c-9.687 9.687-13.838 22.141-11.07 34.595l42.896 256c5.536 31.827-29.059 56.735-58.118 41.514l-229.709-120.39c-11.07-5.535-24.908-5.535-37.362 0l-229.708 120.39c-29.06 15.221-63.654-9.687-58.119-41.514l44.281-254.616c2.768-12.454-1.383-26.292-11.07-34.595L53.967 444.195c-23.524-23.525-11.07-62.27 22.141-67.806l256-37.362c12.454-1.384 23.524-9.686 30.443-22.14L477.405 84.41c13.838-29.06 55.352-29.06 70.573 0z m0 0"
+                    fill="#FFBE11"
+                    p-id="1563"
+                  ></path>
+                </svg>
+              </span>
+            </div>
+          </div>
+          <div class="w2">
+            <span class="fw">{{ item.price || '--' }}</span>
+          </div>
+          <!-- <div class="w3">
+            <span class="fw">88</span>
+          </div> -->
+        </div>
+      </div>
+      <div class="bare" v-else>
+        <span>{{ $t('lang60') }}</span>
+      </div>
+    </div>
+    <BottomNavigation></BottomNavigation>
+  </div>
+</template>
+
+<script>
+import Header from '@/components/Header.vue';
+import { mapState } from 'vuex';
+import { homeApi } from '@/api/index';
+import BottomNavigation from '@/components/BottomNavigation.vue';
+import { Notify } from 'vant';
+import { dateFormat } from '@/utils/formatTool.js';
+export default {
+  data() {
+    return {
+      key: '',
+      sort: 0,
+      volume: 0,
+      type_id: 0,
+      list: [],
+      page: 1,
+      navActive: 0,
+      typeList: [],
+      typeIndex: 0,
+      starValue: 0,
+    };
+  },
+
+  mounted() {
+    this.init();
+  },
+  methods: {
+    //返回上一页
+    back() {
+      this.$router.back();
+    },
+    init() {
+      this.getPopularType();
+      this.getTransferList();
+    },
+
+    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');
+        if (this.page != -1) {
+          this.page++; // 页数加 1
+          if (this.navActive == 0) {
+            this.getTransferList(); // 触发加载更多
+          } else if (this.navActive == 2) {
+            this.getTransferCollectList();
+          }
+        }
+      }
+    },
+    search() {
+      this.page = 1;
+      this.list = []; // 重置列表数据
+      // this.getTransferList(); // 触发重新获取列表数据
+      if (this.navActive == 0) {
+        this.getTransferList();
+      } else if (this.navActive == 2) {
+        this.getTransferCollectList();
+      }
+    },
+    getPopularType() {
+      homeApi.getPopularType({}).then(res => {
+        if (res.code == 200) {
+          this.typeList = res.data;
+        } else {
+        }
+      });
+    },
+    getTransferList() {
+      homeApi.getTransferList({ sort: this.sort, type_id: this.type_id, key_val: this.key, page: this.page }).then(res => {
+        if (res.code == 200) {
+          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 {
+        }
+      });
+    },
+    getTransferCollectList() {
+      homeApi.getTransferCollectList({ sort: this.sort, type_id: this.type_id, key_val: this.key, page: this.page }).then(res => {
+        if (res.code == 200) {
+          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 {
+        }
+      });
+    },
+
+    navigatorToPage(name, id) {
+      this.$router.push({ name, query: { id: id } });
+    },
+
+    handlePriceSort() {
+      console.log(this.sort);
+
+      if (this.sort == 0) {
+        this.sort = 1;
+      } else if (this.sort == 1) {
+        this.sort = 2;
+      } else if (this.sort == 2) {
+        this.sort = 1;
+      }
+      this.search();
+    },
+    handleVolumeSort() {
+      console.log(this.volume);
+
+      if (this.volume == 0) {
+        this.volume = 1;
+      } else if (this.volume == 1) {
+        this.volume = 2;
+      } else if (this.volume == 2) {
+        this.volume = 1;
+      }
+      this.search();
+    },
+    onClickDisabled(name, title) {
+      this.$toast(this.$t('lang2'));
+    },
+    changeStar(item, index) {
+      if (this.list[index].collect == 0) {
+        // this.list[index].collect = 1;
+        this.$set(this.list[index], 'collect', 1)
+      } else {
+        // this.list[index].collect = 0;
+        this.$set(this.list[index], 'collect', 0)
+      }
+      homeApi.collect({ market_id: item.id }).then(res => {
+        if (res.code == 200) {
+        } else {
+          this.$toast(res.msg);
+          // this.list[index].collect = 0;
+          this.$set(this.list[index], 'collect', 0)
+        }
+      });
+    },
+    changeType(item, index) {
+      this.typeIndex = index;
+      this.type_id = item.id;
+      this.page = 1;
+      this.list = [];
+      if (this.navActive == 0) {
+        this.getTransferList();
+      } else if (this.navActive == 2) {
+        this.getTransferCollectList();
+      }
+    },
+    changeTab(item) {
+      console.log(item);
+      this.page = 1;
+      this.list = [];
+      if (item == 0) {
+        this.getTransferList();
+      } else if (item == 2) {
+        this.getTransferCollectList();
+      }
+    },
+  },
+  computed: {
+    ...mapState(['account']),
+  },
+  watch: {},
+  components: {
+    Header,
+    BottomNavigation,
+  },
+};
+</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: 14px 0;
+  z-index: 99;
+  .arrow_img {
+    position: absolute;
+    left: 20px;
+    width: 10px;
+    height: 16px;
+    // transform: translate(0, -50%);
+  }
+}
+.bare {
+  text-align: center;
+  font-size: 14px;
+  padding: 60px 14px;
+  color: #888;
+}
+.van-tabs {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 99;
+}
+.home_page {
+  padding: 46px 0 100px;
+  height: 100vh;
+  overflow: auto;
+  background-color: #fff;
+
+  .pd {
+    padding: 14px;
+    // background-color: #fff;
+  }
+  .pd1 {
+    padding: 14px 13px 0;
+    background-color: #fff;
+    .input {
+      width: 100%;
+      // height: 35px;
+      // line-height: 35px;
+      border: 1px solid #29b286;
+      border-radius: 20px;
+      margin: 10px 0 0px;
+      ::v-deep .van-field__control {
+        padding: 6px 12px;
+      }
+      ::v-deep .van-icon-search {
+        font-size: 22px;
+        color: #29b286;
+        font-weight: bold;
+        margin-right: 10px;
+      }
+    }
+    ::v-deep .van-popup {
+      padding: 10px 20px 30px;
+    }
+    ::v-deep .van-dropdown-item__option {
+      border-bottom: 1px solid rgba(#adadad, 0.2);
+      padding: 10px 0 !important;
+    }
+    ::v-deep .van-dropdown-menu__bar {
+      box-shadow: none;
+    }
+    ::v-deep .van-dropdown-item__option {
+      color: #aaaaaa;
+    }
+    ::v-deep .van-ellipsis {
+      color: #3d3d3d;
+      font-size: 14px;
+    }
+  }
+  .top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .cha {
+      width: 100px;
+    }
+
+    .input {
+      width: calc(100% - 110px);
+      border: 1px solid #29b286;
+      border-radius: 20px;
+    }
+    ::v-deep .van-field__control {
+      padding: 6px 12px;
+    }
+    ::v-deep .van-icon-search {
+      font-size: 20px;
+      color: #29b286;
+      font-weight: bold;
+      margin-right: 10px;
+    }
+  }
+  .notice {
+    font-size: 13px;
+    margin: 8px 0;
+    .notice-ico {
+      padding: 0 8px;
+      border-radius: 20px;
+      margin-right: 10px;
+      background-color: #e8e8e8;
+    }
+  }
+  ::v-deep .van-notice-bar {
+    padding: 0 !important;
+  }
+  .banner {
+    height: 160px;
+    color: #fff;
+    font-size: 22px;
+    border-radius: 12px;
+    .my-swipe {
+      width: 100%;
+      height: 100%;
+      border-radius: 12px;
+    }
+  }
+
+  .jsb {
+    justify-content: space-between;
+  }
+
+  .goods_box {
+    // margin: 14px;
+    // border-radius: 14px;
+    padding: 0 13px 14px;
+    background-color: #fff;
+    .good_icon {
+      width: 16px;
+      height: 16px;
+      margin-right: 5px;
+    }
+  }
+  .sort {
+    color: #9d9d9d;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 14px 0;
+    .w1 {
+      width: 66%;
+    }
+
+    /deep/.van-ellipsis {
+      color: #9d9d9d;
+      font-size: 12px !important;
+    }
+  }
+  .w2 {
+    width: 24%;
+    text-align: right;
+    white-space: nowrap;
+    justify-content: flex-end;
+  }
+  .w3 {
+    width: 18%;
+    text-align: center;
+    white-space: nowrap;
+    justify-content: flex-end;
+  }
+  .fw {
+    font-weight: 600;
+    font-size: 15px;
+    padding-right: 10px;
+  }
+  .goods_list {
+    display: flex;
+    align-items: center;
+    color: #000;
+    margin-bottom: 16px;
+    &_img {
+      width: 68px;
+      height: 68px;
+      border-radius: 10px;
+    }
+    .info {
+      display: flex;
+      align-items: center;
+      width: 70%;
+
+      .name_box {
+        width: calc(100% - 90px);
+        display: flex;
+        flex-direction: column;
+        line-height: 180%;
+        font-size: 13px;
+        box-sizing: border-box;
+        padding: 0 6px;
+        // padding: 6px 0;
+        .name {
+          font-weight: 600;
+        }
+
+        .time_text {
+          color: #7f7f7f;
+          font-weight: normal;
+          font-size: 11px;
+          white-space: nowrap;
+          padding: 2px 0;
+        }
+      }
+      .star {
+      }
+    }
+
+    .buy {
+      display: flex;
+      align-items: flex-end;
+      &_btn {
+        height: 26px;
+        line-height: 26px;
+        font-size: 10px;
+        background-color: #29b286;
+        border: none;
+        padding: 0 10px;
+        white-space: nowrap;
+        border-radius: 30px;
+      }
+    }
+  }
+  .btn_box {
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    overflow: auto;
+    // padding: 10px 0;
+    background-color: #fff;
+    .cc_btn {
+      min-width: 100px;
+      height: 38px;
+      color: #29b286;
+      line-height: 38px;
+      font-size: 12px;
+      text-align: center;
+      white-space: nowrap;
+      padding: 0 10px;
+      border: none;
+      border-radius: 4px;
+      margin-right: 8px;
+      background-color: #f3f3f3;
+      .van-button__text {
+        overflow: hidden; //超出的文本隐藏
+        text-overflow: ellipsis; //溢出用省略号显示
+        white-space: nowrap; //溢出不换行
+      }
+    }
+    .cc_active {
+      color: #fff;
+      background-color: #29b286;
+    }
+  }
+}
+.goods_list1 {
+  flex-wrap: wrap;
+  &_img {
+    width: 100%;
+    height: 70px;
+    border-radius: 10px;
+    margin-right: 10px;
+  }
+  .item {
+    width: 45%;
+    margin-bottom: 10px;
+    .cen {
+      padding-top: 4px;
+      .mon_t {
+        font-size: 11px;
+        color: #7f7f7f;
+      }
+      .money::after {
+        content: 'CHA/年';
+      }
+    }
+  }
+}
+.bind_box {
+  color: #000;
+  padding: 20px 20px 30px;
+  .address_field {
+    border-bottom: 1px solid #cccccc9d;
+    padding: 10px 0;
+    margin: 20px 10px 20px;
+  }
+  .bind_button {
+    color: #fff;
+    text-align: center;
+    background: #7938cf;
+    border-radius: 20px;
+    padding: 10px 0;
+  }
+}
+.flex {
+  display: flex;
+  align-items: center;
+}
+.flex_end {
+  align-items: flex-end;
+}
+::v-deep .van-cascader__option {
+  color: #000;
+}
+.ellipsis {
+  overflow: hidden; /* 确保超出容器的文本被裁剪 */
+  white-space: nowrap; /* 确保文本在一行内显示 */
+  text-overflow: ellipsis; /* 使用省略号表示文本超出 */
+}
+</style>

src/views/transfer/order.vue

@@ -0,0 +1,544 @@
+<template>
+  <div class="product-detail-page">
+    <!-- 顶部返回按钮 -->
+    <div class="head">
+      <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
+      <span>{{ $t('lang354') }}</span>
+    </div>
+    <div class="box">
+      <div class="box_item">
+        <div class="flex">
+          <img :src="product.thum" alt="" class="pic" />
+
+          <div class="right">
+            <div class="name_box">
+              <div class="name">{{ product.name }}</div>
+              <div class="flex">
+                <span v-for="(item, index) in checkOrder" :key="index">{{ item.order_no.substring(0, 3) + '****' + item.order_no.substring(item.order_no.length - 5, item.order_no.length) }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="box_item">
+        <div class="title">{{ $t('lang364') }}</div>
+        <div class="flex grey">
+          {{ $t('lang363') + '(' + $t('lang362') }}:
+          <svg width="16" height="26" viewBox="0 0 80 100" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M70,35
+             C56,28 38,40 40,54
+             C40,64 50,74 70,66"
+              fill="none"
+              stroke="black"
+              stroke-width="6"
+              stroke-linecap="round"
+            />
+            <line x1="52" y1="29" x2="52" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+            <line x1="63" y1="29" x2="63" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+          </svg>
+          {{ balance }})
+        </div>
+      </div>
+
+      <div class="box_item">
+        <div class="flex grey-8 sb">
+          <span>{{ $t('lang361') }}</span>
+          <div class="flex black">
+            <svg width="24" height="26" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+              <path
+                d="M70,35
+             C56,28 38,40 40,54
+             C40,64 50,74 70,66"
+                fill="none"
+                stroke="black"
+                stroke-width="6"
+                stroke-linecap="round"
+              />
+              <line x1="52" y1="29" x2="52" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+              <line x1="63" y1="29" x2="63" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+            </svg>
+            <span class="price">{{ sum }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="box_item">
+        <div class="title">{{ $t('lang356') }}</div>
+        <div class="flex">
+          <van-checkbox v-model="checked" class="black" shape="square" checked-color="#29b286" icon-size="16px"
+            >{{ $t('lang357') }} <span class="green" @click.stop="navigatorTo('service')">{{ $t('lang358') }}</span></van-checkbox
+          >
+        </div>
+      </div>
+    </div>
+    <div class="warn">
+      <span>※ {{ $t('lang360') }}</span>
+    </div>
+    <div class="btn_box flex sb">
+      <div class="left">
+        <div class="flex">
+          <svg width="16" height="28" viewBox="36 -2 30 100" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M70,35
+             C56,28 38,40 40,54
+             C40,64 50,74 70,66"
+              fill="none"
+              stroke="black"
+              stroke-width="6"
+              stroke-linecap="round"
+            />
+            <line x1="52" y1="29" x2="52" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+            <line x1="63" y1="29" x2="63" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+          </svg>
+          <span class="price"> {{ sum }} </span>
+        </div>
+      </div>
+      <!-- <div class="btn" style="width: 70%">{{ $t('lang352') }}</div> -->
+      <van-button class="btn" :disabled="!checked" style="width: 76%" type="primary" @click="submit">{{ $t('lang352') }}</van-button>
+    </div>
+    <van-overlay :show="loading">
+      <div class="wrapper" @click.stop>
+        <van-loading type="spinner" class="loading" />
+      </div>
+    </van-overlay>
+  </div>
+</template>
+<script>
+import { homeApi } from '@/api/index';
+import { Dialog, Notify, Toast } from 'vant';
+export default {
+  data() {
+    return {
+      loading: false,
+      number: 1,
+      product: {},
+      checkOrder: [],
+      type: 0, // 1确认订单  2以求购价售出  3发起求购
+      checked: false,
+      qiuNumber: 1,
+      qiuPrice: '',
+      sum: 0,
+      balance: 0,
+      configInfo: {
+        lock_time: 0,
+        min_buy_price: 0,
+        serve_desc: '',
+        serve_fee: 0,
+        max_buying_count: 0,
+        zh_serve_agree: '',
+        en_serve_agree: '',
+      },
+    };
+  },
+  mounted() {
+    this.product = JSON.parse(this.$route.query.product);
+    this.checkOrder = JSON.parse(this.$route.query.checkOrder);
+    this.sum = this.checkOrder.map(i => i.price).reduce((a, b) => Number(a) + Number(b), 0);
+    this.setTransferLock();
+    this.getUserInfo();
+    this.getMarketConfig();
+  },
+  methods: {
+    back() {
+      this.$router.back();
+    },
+    setTransferLock() {
+      let params = this.checkOrder.map(i => i.id);
+      homeApi.setTransferLock({ transfer_id: params.join(',') }).then(res => {
+        if (res.code == 200) {
+          // this.product = res.data;
+        } else {
+          this.$toast(res.msg);
+        }
+      });
+    },
+    getMarketConfig() {
+      homeApi.getMarketConfig({}).then(res => {
+        if (res.code == 200) {
+          this.configInfo = res.data;
+        } else {
+        }
+      });
+    },
+    getUserInfo() {
+      homeApi.getUserInfo({}).then(res => {
+        if (res.code == 200) {
+          this.balance = res.data.balance;
+        } else {
+        }
+      });
+    },
+    submit() {
+      let _this = this;
+      let params = this.checkOrder.map(i => i.id);
+      Dialog.confirm({
+        title: _this.$t('lang136'),
+        message: _this
+          .$t('lang405')
+          .replace('XX', _this.sum)
+          .replace(
+            'CC',
+            `<svg width="12" height="22" viewBox="28 -20 50 96" xmlns="http://www.w3.org/2000/svg">
+                  <path
+                    d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                    fill="none"
+                    stroke="#646566"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                  />
+                  <line x1="52" y1="29" x2="52" y2="73" stroke="#646566" stroke-width="5.2" stroke-linecap="round" />
+                  <line x1="63" y1="29" x2="63" y2="73" stroke="#646566" stroke-width="5.2" stroke-linecap="round" />
+                </svg>`
+          ),
+        confirmButtonText: _this.$t('lang111'),
+        cancelButtonText: _this.$t('lang135'),
+      })
+        .then(() => {
+          this.loading = true;
+          homeApi.transferOrder({ order_id: params.join(',') }).then(res => {
+            if (res.code == 200) {
+              _this.loading = false;
+              Toast({ message: _this.$t('lang388') });
+              _this.$router.push('mine');
+            } else if (res.code == 15001) {
+              _this.loading = false;
+              setTimeout(() => {
+                _this.$router.push('recharge');
+              }, 300);
+            } else {
+              _this.loading = false;
+            }
+          });
+        })
+        .catch(() => {
+          // on cancel
+        });
+    },
+    navigatorTo(name, id) {
+      if (name == 'service') {
+        console.log(this.$i18n.locale);
+        if (this.$i18n.locale == 'zh-cn') {
+          this.$router.push({ name, query: { id: this.configInfo.zh_serve_agree } });
+        } else if (this.$i18n.locale == 'en') {
+          this.$router.push({ name, query: { id: this.configInfo.en_serve_agree } });
+        }
+      } else {
+        this.$router.push({ name, query: { id: id } });
+      }
+    },
+  },
+};
+</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: 14px 0;
+  z-index: 99;
+  .arrow_img {
+    position: absolute;
+    left: 20px;
+    width: 10px;
+    height: 16px;
+    // transform: translate(0, -50%);
+  }
+}
+.box {
+  width: 100%;
+  height: 100vh;
+  color: #000;
+  font-size: 13px;
+  padding: 64px 14px;
+  box-sizing: border-box;
+  //   background-color: #fff;
+  .grey {
+    color: #535353;
+  }
+  .black {
+    color: #000;
+  }
+  .grey-8 {
+    color: #535353;
+  }
+
+  &_item {
+    font-size: 12px;
+    letter-spacing: 1px;
+    padding: 10px;
+    border-radius: 12px;
+    margin-bottom: 10px;
+    background-color: #fff;
+    .pic {
+      width: 80px;
+      height: 80px;
+      border-radius: 8px;
+    }
+
+    .right {
+      padding-left: 14px;
+      .name_box {
+        color: #808080;
+        font-size: 12px;
+
+        .name {
+          color: #000;
+          font-size: 16px;
+          font-weight: 600;
+          line-height: 160%;
+        }
+        .flex {
+          width: 100%;
+          flex-wrap: wrap;
+          span {
+            padding-right: 6px;
+          }
+        }
+      }
+      .qiu {
+        padding-top: 8px;
+        &_price {
+          font-size: 17px;
+          font-weight: 600;
+          margin-left: -2px;
+          margin-top: -3px;
+        }
+      }
+    }
+    .title {
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 160%;
+      padding-bottom: 8px;
+    }
+    .price {
+      font-size: 13px;
+      font-weight: 600;
+      margin-left: -2px;
+    }
+    .green {
+      color: #29b286;
+    }
+    .van-checkbox {
+      padding-top: 6px;
+    }
+    .desc {
+      font-size: 11px;
+      line-height: 150%;
+      padding-top: 3px;
+    }
+    .yuji {
+      width: 100%;
+      // padding-top: 8px;
+    }
+    .font {
+      color: #808080;
+      font-size: 11px;
+    }
+    .snlist {
+      flex-wrap: wrap;
+      // justify-content: space-around;
+      justify-content: flex-start;
+      gap: 10px; /* 横向和纵向间距 */
+      padding-top: 8px;
+      &_item {
+        font-size: 11px;
+        text-align: center;
+        padding: 4px 6px;
+        border-radius: 4px;
+        // margin: 0 10px 10px 0;
+        width: calc((100% - 20px) / 3); /* 3列，减去两个gap */
+        background-color: #f5f5f5;
+      }
+      .snlist_item_active {
+        position: relative;
+        color: #29b286;
+        background-color: #cfe9e0;
+        svg {
+          position: absolute;
+          bottom: -6px;
+          right: -7px;
+          font-size: 1px;
+          width: 8px;
+          z-index: 100;
+          fill: #fff;
+        }
+      }
+      .snlist_item_active_tag {
+        bottom: 0px;
+        right: 0px;
+        width: 0;
+        height: 0;
+        z-index: 9;
+        position: absolute;
+        border-width: 8px 8px;
+        border-color: rgba(0, 0, 0, 0) #29b286 #29b286 rgba(0, 0, 0, 0);
+        border-style: solid;
+        border-radius: 4px;
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+    }
+    .reflash {
+      font-size: 10px;
+      color: #000;
+      width: calc(100vw - 150px);
+      padding: 8px;
+      border-radius: 6px;
+      margin-top: 8px;
+      background-color: #f5f5f5;
+
+      &_price {
+        font-size: 16px;
+        font-weight: 600;
+        margin-left: -6px;
+      }
+    }
+    .pt {
+      padding-top: 10px;
+    }
+    /deep/ .van-checkbox__icon .van-icon {
+      border-radius: 2px;
+      border-color: #29b286 !important;
+    }
+    /deep/.van-stepper__input {
+      background-color: #fff;
+    }
+    /deep/.van-stepper__plus,
+    /deep/.van-stepper__minus {
+      transform: scale(0.9);
+      border-radius: 50%;
+    }
+    /deep/.van-field {
+      font-size: 18px;
+      font-weight: 600;
+      margin-left: -10px;
+    }
+    /deep/.van-field__control::placeholder {
+      font-size: 15px;
+      font-weight: normal;
+    }
+    /deep/.van-field__control::-webkit-input-placeholder {
+      font-size: 15px;
+      font-weight: normal;
+    }
+    /deep/.van-field__control::-moz-placeholder {
+      font-size: 15px;
+      font-weight: normal;
+    }
+    /deep/.van-field__control::-ms-input-placeholder {
+      font-size: 15px;
+      font-weight: normal;
+    }
+  }
+}
+.flex {
+  display: flex;
+  align-items: center;
+}
+.sb {
+  justify-content: space-between;
+}
+.bottom {
+  padding: 14px 14px;
+  background-color: #fff;
+
+  /deep/.van-tab {
+    flex: none;
+    font-weight: 600;
+    color: #c5c5c5;
+    font-size: 13px;
+    letter-spacing: 0.5px;
+    margin-right: 10px;
+  }
+
+  /deep/.van-tabs__nav--line {
+    padding-bottom: 10px;
+  }
+}
+.warn {
+  position: fixed;
+  bottom: 75px;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  padding: 4px 0;
+  font-size: 11px;
+  color: #fc9611;
+  font-weight: 600;
+
+  background-color: #f8efe0;
+}
+.btn_box {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 75px;
+  padding: 16px 14px;
+  border-top: 1px solid rgba(#c7c7c7, 0.3);
+  background-color: #fff;
+  .btn {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    color: #fff;
+    font-size: 15px;
+    text-align: center;
+    font-weight: 600;
+    letter-spacing: 1px;
+    padding: 12px 10px;
+    border-radius: 22px;
+    border: none;
+    background-color: #29b286;
+  }
+  .submit {
+    width: 58%;
+    background-color: #17ab79;
+  }
+  .left {
+    color: #000;
+    font-size: 14px;
+    flex-direction: column;
+    .price {
+      font-size: 18px;
+      font-weight: 600;
+      // margin-left: -10px;
+      // margin-top: -3px;
+    }
+    .font {
+      font-size: 12px;
+    }
+  }
+}
+/deep/.van-button--disabled {
+  opacity: 0.6;
+}
+.wrapper {
+  // display: flex;
+  // justify-content: center;
+  .loading {
+    position: absolute;
+    left: 46%;
+    top: 46%;
+  }
+}
+</style>
+      
+      

src/views/transfer/soldConsignment.vue

@@ -0,0 +1,598 @@
+<template>
+  <div class="product-detail-page">
+    <!-- 顶部返回按钮 -->
+    <div class="head">
+      <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
+      <span>{{ $t('lang355') }}</span>
+    </div>
+    <div class="box">
+      <div class="box_item">
+        <div class="flex">
+          <img :src="product.thum" alt="" class="pic" />
+
+          <div class="right">
+            <div class="name_box">
+              <div class="name">{{ product.name }}</div>
+              <div class="font">{{ $t('lang380') + orderlist.length }}</div>
+            </div>
+            <div class="flex qiu">
+              <span>{{ $t('lang381') }}:</span>
+              <svg width="24" height="26" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M70,35
+             C56,28 38,40 40,54
+             C40,64 50,74 70,66"
+                  fill="none"
+                  stroke="black"
+                  stroke-width="6"
+                  stroke-linecap="round"
+                />
+                <line x1="52" y1="29" x2="52" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+                <line x1="63" y1="29" x2="63" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+              </svg>
+              <span class="qiu_price">{{ product.min_price }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="box_item">
+        <div class="title">
+          {{ $t('lang368') }}
+          <span class="font">{{ $t('lang379') }}</span>
+        </div>
+        <div class="flex snlist" v-if="orderlist.length > 0">
+          <div class="snlist_item" v-for="(item, index) in orderlist" :key="index" :class="[index == orderIndex ? 'snlist_item snlist_item_active' : 'snlist_item']" @click="changeOrder(item, index)">
+            {{ item.order_no.substring(0, 3) + '****' + item.order_no.substring(item.order_no.length - 5, item.order_no.length) }}
+            <div v-if="index == orderIndex" class="snlist_item_active_tag">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-testid="beast-core-icon-check">
+                <path
+                  d="M778.748 225.79c16.72-20.641 46.95-23.775 67.523-6.999 20.572 16.776 23.695 47.108 6.975 67.749l-408 503.677c-18.8 23.208-53.912 23.794-73.47 1.227l-200-230.769c-17.395-20.07-15.28-50.49 4.724-67.944 20.005-17.453 50.323-15.33 67.718 4.74l162.538 187.544 371.992-459.226z"
+                ></path>
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div v-else style="text-align: center">{{ $t('lang378') }}</div>
+      </div>
+      <div class="box_item">
+        <div class="title">{{ $t('lang365') }}</div>
+        <div class="flex grey">
+          {{ $t('lang363') + '(' + $t('lang362') }}:
+          <svg width="24" height="26" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M70,35
+             C56,28 38,40 40,54
+             C40,64 50,74 70,66"
+              fill="none"
+              stroke="#535353"
+              stroke-width="6"
+              stroke-linecap="round"
+            />
+            <line x1="52" y1="29" x2="52" y2="73" stroke="#535353" stroke-width="5.2" stroke-linecap="round" />
+            <line x1="63" y1="29" x2="63" y2="73" stroke="#535353" stroke-width="5.2" stroke-linecap="round" />
+          </svg>
+          {{ balance || 0 }})
+        </div>
+      </div>
+      <div class="box_item">
+        <div class="title">{{ $t('lang366') }}</div>
+        <div class="grey yuji">
+          <div class="flex sb yuji_item">
+            <span>{{ $t('lang382') }}</span>
+            <span class="flex">
+              <svg width="20" height="26" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M70,35
+             C56,28 38,40 40,54
+             C40,64 50,74 70,66"
+                  fill="none"
+                  stroke="#535353"
+                  stroke-width="6"
+                  stroke-linecap="round"
+                />
+                <line x1="52" y1="29" x2="52" y2="73" stroke="#535353" stroke-width="5.2" stroke-linecap="round" />
+                <line x1="63" y1="29" x2="63" y2="73" stroke="#535353" stroke-width="5.2" stroke-linecap="round" />
+              </svg>
+              {{ product.min_price || 0 }}
+            </span>
+          </div>
+          <div class="flex sb yuji_item">
+            <span>{{ $t('lang367') + '（' + configInfo.serve_fee * 100 + '%）' }}</span>
+            <span class="flex" style="color: red">
+              <svg width="20" height="26" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M70,35
+             C56,28 38,40 40,54
+             C40,64 50,74 70,66"
+                  fill="none"
+                  stroke="red"
+                  stroke-width="6"
+                  stroke-linecap="round"
+                />
+                <line x1="52" y1="29" x2="52" y2="73" stroke="red" stroke-width="5.2" stroke-linecap="round" />
+                <line x1="63" y1="29" x2="63" y2="73" stroke="red" stroke-width="5.2" stroke-linecap="round" />
+              </svg>
+              -{{ fee.toFixed(2) || 0 }}
+            </span>
+          </div>
+          <div class="flex sb yuji_item">
+            <span>{{ $t('lang366') }}</span>
+            <span class="flex">
+              <svg width="20" height="26" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M70,35
+             C56,28 38,40 40,54
+             C40,64 50,74 70,66"
+                  fill="none"
+                  stroke="#535353"
+                  stroke-width="6"
+                  stroke-linecap="round"
+                />
+                <line x1="52" y1="29" x2="52" y2="73" stroke="#535353" stroke-width="5.2" stroke-linecap="round" />
+                <line x1="63" y1="29" x2="63" y2="73" stroke="#535353" stroke-width="5.2" stroke-linecap="round" />
+              </svg>
+              {{ (product.min_price - fee).toFixed(2) || 0 }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="box_item">
+        <div class="title">{{ $t('lang356') }}</div>
+        <div class="flex">
+          <van-checkbox v-model="checked" class="black" shape="square" checked-color="#29b286" icon-size="16px"
+            >{{ $t('lang357') }} <span class="green" @click.stop="navigatorTo('service')">{{ $t('lang358') }}</span></van-checkbox
+          >
+        </div>
+      </div>
+      <div class="box_item">
+        <div class="title">{{ $t('lang359') }}</div>
+        <div class="flex grey desc" v-html="configInfo.serve_desc"></div>
+      </div>
+    </div>
+
+    <div class="btn_box flex sb">
+      <!-- <div class="btn">{{ $t('lang369') }}</div> -->
+      <van-button class="btn" :disabled="!checked" type="primary" @click="submit">{{ $t('lang369') }}</van-button>
+    </div>
+    <van-overlay :show="loading">
+      <div class="wrapper" @click.stop>
+        <van-loading type="spinner" class="loading" />
+      </div>
+    </van-overlay>
+  </div>
+</template>
+<script>
+import { homeApi } from '@/api/index';
+import { Dialog, Notify, Toast } from 'vant';
+export default {
+  data() {
+    return {
+      loading: false,
+      submitPopop: false,
+      number: 1,
+      product: {},
+      type: 0, // 1确认订单  2以求购价售出  3发起求购
+      checked: false,
+      qiuNumber: 1,
+      qiuPrice: '',
+      maxPrice: 0,
+      configInfo: {
+        lock_time: 0,
+        min_buy_price: 0,
+        serve_desc: '',
+        serve_fee: 0,
+        max_buying_count: 0,
+        zh_serve_agree: '',
+        en_serve_agree: '',
+      },
+      orderlist: [],
+      orderIndex: 0,
+      fee: 0,
+      balance: 0,
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.getBuyingDetail(this.$route.query.buying);
+      this.getUserInfo();
+      this.getHoldProductOrderList(this.$route.query.product_id);
+    },
+    back() {
+      this.$router.back();
+    },
+    changeOrder(item, index) {
+      this.orderIndex = index;
+    },
+    getBuyingDetail(buying_id) {
+      homeApi.getBuyingDetail({ buying_id }).then(res => {
+        if (res.code == 200) {
+          this.product = res.data;
+          this.getMarketConfig();
+        } else {
+        }
+      });
+    },
+    getMarketConfig() {
+      homeApi.getMarketConfig({}).then(res => {
+        if (res.code == 200) {
+          this.configInfo = res.data;
+          this.fee = this.configInfo.serve_fee * this.product.min_price;
+        } else {
+        }
+      });
+    },
+    getHoldProductOrderList(product_id) {
+      homeApi.getHoldProductOrderList({ product_id }).then(res => {
+        if (res.code == 200) {
+          this.orderlist = res.data;
+        } else {
+        }
+      });
+    },
+    getUserInfo() {
+      homeApi.getUserInfo({}).then(res => {
+        if (res.code == 200) {
+          this.balance = res.data.balance;
+        } else {
+        }
+      });
+    },
+    submit() {
+      let _this = this;
+      if (this.orderlist.length <= 0) {
+        Toast({ message: _this.$t('lang406') });
+      }
+      let params = {
+        buying_id: this.$route.query.buying,
+        order_id: this.orderlist[this.orderIndex].id,
+      };
+      Dialog.confirm({
+        title: _this.$t('lang136'),
+        message: _this.$t('lang374'),
+        confirmButtonText: _this.$t('lang111'),
+        cancelButtonText: _this.$t('lang135'),
+      })
+        .then(() => {
+          this.loading = true;
+          homeApi.sellBuying(params).then(res => {
+            if (res.code == 200) {
+              _this.loading = false;
+              Toast({ message: _this.$t('lang375') });
+              _this.$router.back();
+            } else if (res.code == 15001) {
+              _this.loading = false;
+              setTimeout(() => {
+                _this.$router.push('recharge');
+              }, 300);
+            } else {
+              _this.loading = false;
+            }
+          });
+        })
+        .catch(() => {
+          // on cancel
+        });
+    },
+    navigatorTo(name, id) {
+      if (name == 'service') {
+        console.log(this.$i18n.locale);
+        if (this.$i18n.locale == 'zh-cn') {
+          this.$router.push({ name, query: { id: this.configInfo.zh_serve_agree } });
+        } else if (this.$i18n.locale == 'en') {
+          this.$router.push({ name, query: { id: this.configInfo.en_serve_agree } });
+        }
+      } else {
+        this.$router.push({ name, query: { id: id } });
+      }
+    },
+  },
+};
+</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: 14px 0;
+  z-index: 99;
+  .arrow_img {
+    position: absolute;
+    left: 20px;
+    width: 10px;
+    height: 16px;
+    // transform: translate(0, -50%);
+  }
+}
+.box {
+  width: 100%;
+  // height: 100vh;
+  color: #000;
+  font-size: 13px;
+  padding: 64px 14px 120px;
+  box-sizing: border-box;
+  //   background-color: #fff;
+  .grey {
+    color: #535353;
+  }
+  .black {
+    color: #000;
+  }
+  .grey-8 {
+    color: #535353;
+  }
+
+  &_item {
+    font-size: 12px;
+    letter-spacing: 1px;
+    padding: 10px;
+    border-radius: 12px;
+    margin-bottom: 10px;
+    background-color: #fff;
+    .pic {
+      width: 80px;
+      height: 80px;
+      border-radius: 8px;
+    }
+
+    .right {
+      padding-left: 14px;
+      .name_box {
+        color: #808080;
+        font-size: 13px;
+
+        .name {
+          color: #000;
+          font-size: 16px;
+          font-weight: 600;
+          line-height: 160%;
+        }
+      }
+      .qiu {
+        padding-top: 8px;
+        &_price {
+          font-size: 17px;
+          font-weight: 600;
+          margin-left: -2px;
+          margin-top: -3px;
+        }
+      }
+    }
+    .title {
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 160%;
+      padding-bottom: 8px;
+    }
+    .price {
+      font-size: 13px;
+      font-weight: 600;
+      margin-left: -2px;
+    }
+    .green {
+      color: #29b286;
+    }
+    .van-checkbox {
+      padding-top: 6px;
+    }
+    .desc {
+      font-size: 11px;
+      line-height: 150%;
+      padding-top: 3px;
+    }
+    .yuji {
+      width: 100%;
+      // padding-top: 8px;
+    }
+    .font {
+      color: #808080;
+      font-size: 11px;
+    }
+    .snlist {
+      flex-wrap: wrap;
+      // justify-content: space-around;
+      justify-content: flex-start;
+      gap: 10px; /* 横向和纵向间距 */
+      padding-top: 8px;
+      &_item {
+        font-size: 11px;
+        text-align: center;
+        padding: 4px 6px;
+        border-radius: 4px;
+        // margin: 0 10px 10px 0;
+        width: calc((100% - 20px) / 3); /* 3列，减去两个gap */
+        background-color: #f5f5f5;
+      }
+      .snlist_item_active {
+        position: relative;
+        color: #29b286;
+        background-color: #cfe9e0;
+        svg {
+          position: absolute;
+          bottom: -6px;
+          right: -7px;
+          font-size: 1px;
+          width: 8px;
+          z-index: 100;
+          fill: #fff;
+        }
+      }
+      .snlist_item_active_tag {
+        bottom: 0px;
+        right: 0px;
+        width: 0;
+        height: 0;
+        z-index: 9;
+        position: absolute;
+        border-width: 8px 8px;
+        border-color: rgba(0, 0, 0, 0) #29b286 #29b286 rgba(0, 0, 0, 0);
+        border-style: solid;
+        border-radius: 4px;
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+    }
+    .reflash {
+      font-size: 10px;
+      color: #000;
+      width: calc(100vw - 150px);
+      padding: 8px;
+      border-radius: 6px;
+      margin-top: 8px;
+      background-color: #f5f5f5;
+
+      &_price {
+        font-size: 16px;
+        font-weight: 600;
+        margin-left: -6px;
+      }
+    }
+    .pt {
+      padding-top: 10px;
+    }
+    /deep/ .van-checkbox__icon .van-icon {
+      border-radius: 2px;
+      border-color: #29b286 !important;
+    }
+    /deep/.van-stepper__input {
+      background-color: #fff;
+    }
+    /deep/.van-stepper__plus,
+    /deep/.van-stepper__minus {
+      transform: scale(0.9);
+      border-radius: 50%;
+    }
+    /deep/.van-field {
+      font-size: 18px;
+      font-weight: 600;
+      margin-left: -10px;
+    }
+    /deep/.van-field__control::placeholder {
+      font-size: 15px;
+      font-weight: normal;
+    }
+    /deep/.van-field__control::-webkit-input-placeholder {
+      font-size: 15px;
+      font-weight: normal;
+    }
+    /deep/.van-field__control::-moz-placeholder {
+      font-size: 15px;
+      font-weight: normal;
+    }
+    /deep/.van-field__control::-ms-input-placeholder {
+      font-size: 15px;
+      font-weight: normal;
+    }
+  }
+}
+.flex {
+  display: flex;
+  align-items: center;
+}
+.sb {
+  justify-content: space-between;
+}
+.bottom {
+  padding: 14px 14px;
+  background-color: #fff;
+
+  /deep/.van-tab {
+    flex: none;
+    font-weight: 600;
+    color: #c5c5c5;
+    font-size: 13px;
+    letter-spacing: 0.5px;
+    margin-right: 10px;
+  }
+
+  /deep/.van-tabs__nav--line {
+    padding-bottom: 10px;
+  }
+}
+.warn {
+  position: fixed;
+  bottom: 75px;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  padding: 4px 0;
+  font-size: 11px;
+  color: #fc9611;
+  font-weight: 600;
+
+  background-color: #f8efe0;
+}
+.btn_box {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 75px;
+  padding: 16px 20px;
+  border-top: 1px solid rgba(#c7c7c7, 0.3);
+  background-color: #fff;
+  .btn {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    color: #fff;
+    font-size: 15px;
+    text-align: center;
+    font-weight: 600;
+    letter-spacing: 1px;
+    padding: 12px 10px;
+    border-radius: 22px;
+    border: none;
+    background-color: #29b286;
+  }
+  .submit {
+    width: 58%;
+    background-color: #17ab79;
+  }
+  .left {
+    color: #000;
+    font-size: 14px;
+    flex-direction: column;
+    .price {
+      font-size: 18px;
+      font-weight: 600;
+      margin-left: -10px;
+      // margin-top: -3px;
+    }
+    .font {
+      font-size: 12px;
+    }
+  }
+}
+/deep/.van-button--disabled {
+  opacity: 0.6;
+}
+.wrapper {
+  // display: flex;
+  // justify-content: center;
+  .loading {
+    position: absolute;
+    left: 46%;
+    top: 46%;
+  }
+}
+</style>
+      
+      

src/views/transfer/typeDetail.vue

@@ -0,0 +1,589 @@
+<template>
+  <div class="page">
+    <!-- 顶部返回按钮 -->
+    <div class="head">
+      <div class="back" @click="back">
+        <van-icon name="arrow-left" size="18" />
+      </div>
+      <div @click="changeStar">
+        <svg t="1746761208974" class="icon" viewBox="0 0 1058 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1116" width="22" height="22" v-if="product.collect == null">
+          <path
+            d="M274.72727305 953.81818174c-5.4545458 0-10.90909073 0-16.36363653-2.72727247-13.63636406-5.4545458-24.54545479-13.63636406-32.72727305-27.27272724-5.4545458-10.90909073-8.18181826-21.81818145-5.45454492-35.45454551L263.81818144 634.72727305 81.09090898 454.72727305c-21.81818145-21.81818145-21.81818145-54.54545449 0-76.36363682 8.18181826-8.18181826 19.09090898-13.63636406 29.99999971-16.36363652l253.63636436-38.18181797 114.5454539-229.09090869c5.4545458-13.63636406 16.36363653-21.81818145 32.72727305-27.27272725 13.63636406-5.4545458 27.27272724-2.72727247 40.90909131 2.72727246 10.90909073 5.4545458 19.09090898 13.63636406 24.5454539 24.54545479l114.54545479 229.09090869 253.63636347 38.18181797c29.99999971 5.4545458 49.09090869 32.72727305 46.36363624 62.72727275-2.72727247 10.90909073-8.18181826 21.81818145-16.36363565 30.00000059L792.90909072 634.72727305l43.63636377 253.63636348c2.72727247 13.63636406 0 29.99999971-8.18181826 40.90909042s-21.81818145 19.09090898-35.4545455 21.81818233c-10.90909073 2.72727247-24.54545479 0-35.45454552-5.45454581L525.63636406 828.36363623l-226.36363711 119.99999971c-8.18181826 5.4545458-16.36363653 5.4545458-24.5454539 5.4545458zM525.63636406 124.72727276l-125.4545455 256.36363593L116.5454545 419.27272754l204.54545477 199.09090899-49.09090956 280.90909071 253.63636435-133.63636377 253.63636348 133.63636377-49.09090957-280.90909072 204.54545479-199.09090898-280.90909073-40.90909131L525.63636406 124.72727276z"
+            fill="#ffffff"
+            p-id="1117"
+          ></path>
+        </svg>
+        <svg t="1746757109445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1562" width="22" height="22" v-if="product.collect != null">
+          <path
+            d="M547.978 84.41l114.854 232.476c5.536 11.07 16.606 19.373 30.444 22.141l256 37.362c31.827 4.152 45.665 44.281 22.14 67.806l-186.81 179.891c-9.687 9.687-13.838 22.141-11.07 34.595l42.896 256c5.536 31.827-29.059 56.735-58.118 41.514l-229.709-120.39c-11.07-5.535-24.908-5.535-37.362 0l-229.708 120.39c-29.06 15.221-63.654-9.687-58.119-41.514l44.281-254.616c2.768-12.454-1.383-26.292-11.07-34.595L53.967 444.195c-23.524-23.525-11.07-62.27 22.141-67.806l256-37.362c12.454-1.384 23.524-9.686 30.443-22.14L477.405 84.41c13.838-29.06 55.352-29.06 70.573 0z m0 0"
+            fill="#FFBE11"
+            p-id="1563"
+          ></path>
+        </svg>
+      </div>
+    </div>
+    <div class="box" @scroll="handleScroll">
+      <div class="bg" :style="{ backgroundImage: `url(${product.products.thum})` }"></div>
+      <div class="content">
+        <!-- <div class="mb">
+          <span>{{ $t('lang300') }}</span>
+        </div> -->
+        <img :src="product.products.thum" alt="" class="pic" />
+
+        <span class="name">{{ product.products.name }}</span>
+        <div class="num">
+          <div class="num_box">
+            <div class="left">{{ $t('lang301') }}</div>
+            <div class="right">{{ product.issue }}{{ $t('lang7') }}</div>
+          </div>
+          <div class="num_box">
+            <div class="left">{{ $t('lang302') }}</div>
+            <div class="right">{{ product.circulation }}{{ $t('lang7') }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="bottom">
+        <van-tabs v-model="navActive" color="#29B286" title-active-color="#000" class="van-tabs">
+          <van-tab :title="$t('lang343')"></van-tab>
+          <van-tab :title="$t('lang344')"></van-tab>
+        </van-tabs>
+        <div class="flex sb" v-if="navActive == 0">
+          <div class="small_nav flex">
+            <span :class="[index == smallNavIndex ? 'small_nav_item nav_active' : 'small_nav_item']" v-for="(item, index) in smallNav" :key="index" @click="changeType(item, index)">{{
+              item.key
+            }}</span>
+          </div>
+          <div class="flex sort" v-if="smallNavIndex == 0">
+            <div class="flex" @click="handlePriceSort">
+              <span>{{ $t('lang247') }}</span>
+              <img src="@/assets/images/index/j0.png" alt="" style="width: 14px" v-if="sort == 0" />
+              <img src="@/assets/images/index/j2.png" alt="" style="width: 14px" v-else-if="sort == 1" />
+              <img src="@/assets/images/index/j1.png" alt="" style="width: 14px" v-else-if="sort == 2" />
+            </div>
+            <!-- <div class="flex" @click="handleVolumeSort">
+              <span>{{ $t('lang346') }}</span>
+              <img src="@/assets/images/index/j0.png" alt="" style="width: 14px" v-if="volume == 0" />
+              <img src="@/assets/images/index/j2.png" alt="" style="width: 14px" v-else-if="volume == 1" />
+              <img src="@/assets/images/index/j1.png" alt="" style="width: 14px" v-else-if="volume == 2" />
+            </div> -->
+          </div>
+        </div>
+        <template v-if="navActive == 0 && smallNavIndex == 0">
+          <div class="list" v-if="product.producttransfer.length > 0">
+            <van-checkbox-group v-model="checkOrder">
+              <div class="list_item flex sb" v-for="(item, index) in product.producttransfer" :key="index">
+                <div class="flex">
+                  <van-checkbox :name="item" @click.stop shape="square" checked-color="#29b286" icon-size="16px"></van-checkbox>
+                  <div @click="navigatorTo('TransferDetail', { id: ids, transfer_id: item.id })">
+                    <div class="flex">
+                      <span class="list_item_name">{{ product.products.name }}</span>
+                      <div class="lock flex" v-if="new Date().getTime() - item.lock_time * 1000 <= 180000 && new Date().getTime() - item.lock_time * 1000 > 0">
+                        <svg t="1746769983067" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15442" width="11" height="11">
+                          <path
+                            d="M787.16806 952.268282 236.83194 952.268282c-30.395264 0-55.033407-24.638143-55.033407-55.033407L181.798533 429.449889c0-30.395264 24.638143-55.033407 55.033407-55.033407l82.550111 0 0-110.066815c0-106.379842 86.238107-192.617949 192.617949-192.617949s192.617949 86.238107 192.617949 192.617949l0 110.066815 82.550111 0c30.395264 0 55.033407 24.638143 55.033407 55.033407l0 467.784986C842.201467 927.630139 817.562301 952.268282 787.16806 952.268282zM484.483296 672.046113l0 115.121947 55.033407 0 0-115.121947c31.990598-11.373025 55.033407-41.605583 55.033407-77.496002 0-45.592384-36.957727-82.550111-82.550111-82.550111s-82.550111 36.957727-82.550111 82.550111C429.449889 630.440529 452.491675 660.673088 484.483296 672.046113zM622.066815 264.348644c0-60.787458-49.279357-110.066815-110.066815-110.066815s-110.066815 49.279357-110.066815 110.066815l0 110.066815 220.134653 0L622.067838 264.348644z"
+                            fill="#ffffff"
+                            p-id="15443"
+                          ></path>
+                        </svg>
+                        <span>{{ $t('lang347') }}</span>
+                      </div>
+                    </div>
+                    <div class="sn">{{ item.order_no }}</div>
+                  </div>
+                </div>
+                <div class="flex" @click="navigatorTo('TransferDetail', { id: ids, transfer_id: item.id })">
+                  <div class="flex">
+                    <svg width="28" height="28" viewBox="0 -3 80 96" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M70,35 C56,28 38,40 40,54 C40,64 50,74 70,66" fill="none" stroke="black" stroke-width="6" stroke-linecap="round" />
+                      <line x1="52" y1="29" x2="52" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+                      <line x1="63" y1="29" x2="63" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+                    </svg>
+                    <span class="price"> {{ item.price }} </span>
+                  </div>
+                  <van-icon name="arrow" size="18" color="#c5c5c5" />
+                </div>
+              </div>
+            </van-checkbox-group>
+          </div>
+          <div class="bare" v-else>
+            <span>{{ $t('lang60') }}</span>
+          </div>
+          <div class="btn_box" @click="navigatorTo('TransferOrder')">
+            <div class="btn">{{ $t('lang348') }}</div>
+          </div>
+        </template>
+        <template v-else-if="navActive == 0 && smallNavIndex == 1">
+          <div class="list buy" v-if="buyingList.length > 0">
+            <div class="list_item flex sb" v-for="(item, index) in buyingList" @click="navigatorTo('soldConsignment', { product_id: product.product_id, buying: item.id })" :key="index">
+              <div>
+                <div class="flex">
+                  <svg width="28" height="28" viewBox="28 2 100 96" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M70,35
+           C56,28 38,40 40,54
+           C40,64 50,74 70,66"
+                      fill="none"
+                      stroke="black"
+                      stroke-width="6"
+                      stroke-linecap="round"
+                    />
+                    <line x1="52" y1="29" x2="52" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+                    <line x1="63" y1="29" x2="63" y2="73" stroke="black" stroke-width="5.2" stroke-linecap="round" />
+                  </svg>
+                  <span class="price"> {{ item.min_price }} </span>
+                </div>
+                <div class="wallet">{{ $t('lang350') }}</div>
+              </div>
+              <div class="flex">
+                <van-icon name="arrow" size="18" color="#c5c5c5" />
+              </div>
+            </div>
+          </div>
+          <div class="bare" v-else>
+            <span>{{ $t('lang60') }}</span>
+          </div>
+          <div class="btn_box" @click="navigatorTo('initiatePurchase', { product: JSON.stringify(product.products) })">
+            <div class="btn">{{ $t('lang349') }}</div>
+          </div>
+        </template>
+        <template v-if="navActive == 1">
+          <div class="announcement" v-if="announcement.length > 0">
+            <div class="announcement_item" v-for="(item1, index1) in announcement" :key="index1">
+              {{ item1.title }}
+            </div>
+          </div>
+          <div class="bare" v-else>
+            <span>{{ $t('lang60') }}</span>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+  <script>
+import { homeApi } from '@/api/index';
+import { Dialog, Notify, Toast } from 'vant';
+export default {
+  data() {
+    return {
+      loading: false,
+      submitPopop: false,
+      number: 1,
+      product: {
+        products: {
+          thum: '',
+        },
+        producttransfer: [],
+      },
+      navActive: 0,
+      smallNav: [
+        {
+          key: this.$t('lang49'),
+          value: 0,
+        },
+        {
+          key: this.$t('lang345'),
+          value: 1,
+        },
+      ],
+      smallNavIndex: 0,
+      sort: 0,
+      volume: 0,
+      announcement: [],
+      page: 1,
+      checkOrder: [],
+      buyingList: [],
+      ids: '',
+    };
+  },
+  mounted() {
+    this.ids = this.$route.query.id;
+    this.getTransferDetail();
+  },
+  methods: {
+    back() {
+      this.$router.back();
+    },
+    getTransferDetail() {
+      homeApi.getTransferDetail({ ids: this.ids, sort: this.sort }).then(res => {
+        if (res.code == 200) {
+          this.product = res.data;
+          this.marketAnnouncement();
+          this.getBuyingList();
+        } else {
+        }
+      });
+    },
+    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');
+        if (this.page != -1) {
+          this.page++; // 页数加 1
+          if (this.navActive == 1) {
+            this.marketAnnouncement();
+          }
+        }
+      }
+    },
+    marketAnnouncement() {
+      homeApi.marketAnnouncement({ product_id: this.product.product_id, page: this.page }).then(res => {
+        if (res.code == 200) {
+          if (this.announcement.length >= res.data.total) {
+            this.page = -1; // 重置为 -1，表示没有更多数据
+          } else {
+            this.announcement = [...this.announcement, ...res.data.data];
+            if (this.announcement.length >= res.data.total) {
+              this.page = -1; // 重置为 -1，表示没有更多数据
+            }
+          }
+        } else {
+        }
+      });
+    },
+    getBuyingList() {
+      homeApi.getBuyingList({ product_id: this.product.product_id }).then(res => {
+        if (res.code == 200) {
+          this.buyingList = res.data;
+        } else {
+        }
+      });
+    },
+    submit() {
+      let _this = this;
+      let params = {
+        id: this.$route.query.id,
+        num: this.number,
+        product_list: {},
+      };
+      this.loading = true;
+      homeApi.synthesisCreate(params).then(res => {
+        if (res.code == 200) {
+          _this.loading = false;
+          Toast({ message: _this.$t('lang318') });
+          _this.$router.push('mine');
+        } else if (res.code == 15001) {
+          _this.loading = false;
+          setTimeout(() => {
+            _this.$router.push('recharge');
+          }, 300);
+        } else {
+          _this.loading = false;
+        }
+      });
+    },
+    navigatorTo(name, query) {
+      console.log(this.checkOrder);
+
+      if (name == 'TransferOrder') {
+        if (this.checkOrder.length <= 0) {
+          return this.$toast(this.$t('lang373'));
+        }
+        query = {
+          product: JSON.stringify(this.product.products),
+          checkOrder: JSON.stringify(this.checkOrder),
+        };
+      }
+      this.$router.push({ name, query });
+    },
+    handlePriceSort() {
+      if (this.sort == 0) {
+        this.sort = 1;
+      } else if (this.sort == 1) {
+        this.sort = 2;
+      } else if (this.sort == 2) {
+        this.sort = 1;
+      }
+      this.getTransferDetail();
+    },
+    changeType(item, index) {
+      this.smallNavIndex = index;
+    },
+    // changeTab(item){
+    //   console.log(item);
+
+    // },
+    changeStar() {
+      if (this.product.collect == null) {
+        this.product.collect = 1;
+      } else {
+        this.product.collect = null;
+      }
+      homeApi.collect({ market_id: this.product.id }).then(res => {
+        if (res.code == 200) {
+        } else {
+          this.$toast(res.msg);
+          this.product.collect = null;
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+// .page{
+//   height: 100vh;
+//   overflow: auto;
+//   // background-color: #fff;
+// }
+.head {
+  position: fixed;
+  top: 14px;
+  left: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  color: rgba(#000, 0.8);
+  letter-spacing: 1.5px;
+  padding: 14px 20px;
+  z-index: 99;
+  .arrow_img {
+    // position: absolute;
+    width: 10px;
+    height: 16px;
+    // transform: translate(0, -50%);
+  }
+  .back {
+    color: #acacac;
+    box-sizing: border-box;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: rgba(#000, 0.3);
+  }
+}
+.box {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow: auto;
+  color: #000;
+  font-size: 13px;
+  padding: 50px 0 120px;
+  box-sizing: border-box;
+  background-color: #fff;
+
+  .bg {
+    width: 100%;
+    position: absolute;
+    inset: 0;
+    background-size: 100% 270px;
+    background-repeat: no-repeat;
+    // background-position: center;
+    filter: blur(30px);
+    // transform: scale(1.1); /* 防止边缘模糊 */
+    z-index: 1;
+    pointer-events: none; /* 不阻挡点击事件 */
+  }
+  .content {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    padding: 50px 0 16px;
+    .pic {
+      width: 140px;
+      height: 140px;
+      border-radius: 12px;
+      border: 3px solid #c0c0c0;
+    }
+    .name {
+      font-size: 15px;
+      letter-spacing: 2px;
+      font-weight: 600;
+      padding: 16px 0;
+    }
+
+    .num {
+      display: flex;
+      align-items: center;
+
+      &_box {
+        display: flex;
+        align-items: center;
+        font-size: 8px;
+        letter-spacing: 1px;
+        margin: 0 5px;
+        .left {
+          color: #000;
+          padding: 0px 3px;
+          // border: 0.5px solid #ffe493;
+          background: linear-gradient(to right, #ddb54e, #f9eca9);
+        }
+        .right {
+          color: #000;
+          padding: 0 3px;
+          background-color: rgba(#fbf8de, 1);
+        }
+      }
+    }
+  }
+  .flex {
+    display: flex;
+    align-items: center;
+  }
+  .sb {
+    justify-content: space-between;
+  }
+  .bottom {
+    padding: 0 14px;
+
+    .small_nav {
+      width: fit-content;
+      font-size: 11px;
+      padding: 2px;
+      border-radius: 20px;
+      margin-top: 6px;
+      background-color: #f5f5f5;
+      &_item {
+        color: #8b8b8b;
+        display: block;
+        text-align: center;
+        min-width: 26px;
+        padding: 2px 6px;
+        margin: 1px;
+        border-radius: 20px;
+        overflow: hidden; //超出的文本隐藏
+        text-overflow: ellipsis; //溢出用省略号显示
+        white-space: nowrap; //溢出不换行
+      }
+    }
+
+    .nav_active {
+      color: #29b286;
+      background-color: #fff !important;
+    }
+
+    .sort {
+      color: #8b8b8b;
+      font-size: 11px;
+      .flex {
+        padding-left: 14px;
+      }
+    }
+
+    .list {
+      &_item {
+        padding: 14px 0;
+        border-bottom: 1px solid rgba(#c7c7c7, 0.3);
+        &_name {
+          font-weight: 600;
+          font-size: 15px;
+          width: 160px;
+          overflow: hidden; /* 确保超出容器的文本被裁剪 */
+          white-space: nowrap; /* 确保文本在一行内显示 */
+          text-overflow: ellipsis; /* 使用省略号表示文本超出 */
+        }
+        .lock {
+          color: #fff;
+          font-size: 9px;
+          // letter-spacing: 1px;
+          white-space: nowrap;
+          padding: 1px 2px;
+          border-radius: 2px;
+          margin-left: 8px;
+          background-color: #29b286;
+        }
+        .sn {
+          font-weight: 600;
+          font-size: 13px;
+          padding-top: 8px;
+        }
+        .price {
+          font-weight: 600;
+          font-size: 17px;
+        }
+        .van-icon {
+          margin-left: 12px;
+        }
+        /deep/ .van-checkbox__icon .van-icon {
+          margin-right: 8px;
+          border-radius: 2px;
+          border-color: #29b286 !important;
+        }
+      }
+    }
+    .buy {
+      .price {
+        margin-left: -12px;
+      }
+      .wallet {
+        font-size: 11px;
+        color: #8b8b8b;
+        padding-top: 4px;
+      }
+    }
+
+    .announcement {
+      padding-top: 10px;
+      &_item {
+        padding: 10px 0;
+        border-bottom: 1px solid rgba(#c7c7c7, 0.3);
+        margin-bottom: 8px;
+      }
+    }
+
+    /deep/.van-tab {
+      flex: none;
+      font-weight: 600;
+      color: #c5c5c5;
+      font-size: 13px;
+      letter-spacing: 0.5px;
+      margin-right: 10px;
+    }
+
+    /deep/.van-tabs__nav--line {
+      padding-bottom: 10px;
+    }
+  }
+  .btn_box {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 80px;
+    padding: 16px 20px;
+    border-top: 1px solid rgba(#c7c7c7, 0.3);
+    background-color: #fff;
+    .btn {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+      height: 100%;
+      box-sizing: border-box;
+      color: #fff;
+      font-size: 15px;
+      text-align: center;
+      font-weight: 600;
+      letter-spacing: 1px;
+      padding: 12px 10px;
+      border-radius: 22px;
+      background-color: #29b286;
+    }
+    .submit {
+      width: 58%;
+      background-color: #17ab79;
+    }
+  }
+  .bare {
+    text-align: center;
+    font-size: 14px;
+    padding: 60px 14px;
+    color: #888;
+  }
+}
+</style>
+  
+