|
|
@@ -0,0 +1,959 @@
|
|
|
+<template>
|
|
|
+ <div class="assets" @scroll="handleScroll">
|
|
|
+ <div class="head">
|
|
|
+ <img @click="back" src="@/assets/images/back.png" class="arrow_img" />
|
|
|
+ <span>{{ $t('lang218') }}</span>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="navbar">
|
|
|
+ <span v-for="(item, index) in navList" :key="index" @click="changeNav(item, index)" :style="{ color: navIndex == index ? '#000' : '' }">{{ item.key }}</span>
|
|
|
+ </div> -->
|
|
|
+ <div class="total_box">
|
|
|
+ <!-- <div>
|
|
|
+ <span class="text">{{ $t('lang80') }}({{ $t('lang174') }})</span>
|
|
|
+ </div> -->
|
|
|
+ <div class="total">
|
|
|
+ {{ $t('lang224') }}<span>{{ rwa_num || 0 }}</span> {{ $t('lang225') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <van-tabs @click="onClick" color="#29B286" title-active-color="#29B286">
|
|
|
+ <van-tab v-for="(item, index) in navList" :key="index" :title="item.key"> </van-tab>
|
|
|
+ </van-tabs>
|
|
|
+ <!-- 资产 -->
|
|
|
+ <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.img_url.split(',')[0]" />
|
|
|
+ <div class="right" style="flex: 2">
|
|
|
+ <span class="title">{{ item.name }}</span>
|
|
|
+ <div class="green">{{ item.title }}</div>
|
|
|
+ <div class="cen">
|
|
|
+ <span class="money"
|
|
|
+ >{{ item.price }}<span class="ssm">{{ $t('lang174') }}</span></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>
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 13px">
|
|
|
+ <span>{{ item.address }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="btn_box">
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <div class="f-sa" v-if="item.status <= 1">
|
|
|
+ <div class="buy" @click="pickup(item)">
|
|
|
+ <van-button class="buy_btn btn1" type="primary">{{ $t('lang86') }}</van-button>
|
|
|
+ </div>
|
|
|
+ <div class="buy" @click="transfer(item)">
|
|
|
+ <van-button class="buy_btn" type="primary">{{ $t('lang49') }}</van-button>
|
|
|
+ </div>
|
|
|
+ <div class="buy" @click="give(item)">
|
|
|
+ <van-button class="buy_btn btn1" type="primary">{{ $t('lang186') }}</van-button>
|
|
|
+ </div>
|
|
|
+ <div class="buy" @click="noopen()">
|
|
|
+ <van-button class="buy_btn" type="primary">{{ $t('lang220') }}</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="f-sa buy1" v-if="item.status == 3">
|
|
|
+ <div class="buy buy1">
|
|
|
+ <van-button class="buy_btn btn1 btn4" type="primary" @click="viewlogi(item)">{{ $t('lang143') }}</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="f-sa buy1" v-else>
|
|
|
+ <div class="buy">
|
|
|
+ <van-button class="buy_btn btn3" type="primary" v-if="item.status == 2" @click="cancel(item)">{{ $t('lang144') }}</van-button>
|
|
|
+ <van-button class="buy_btn btn3" type="primary" v-if="item.status == 4">{{ $t('lang145') }}</van-button>
|
|
|
+
|
|
|
+ <van-button class="buy_btn btn3" type="primary" v-if="item.status == 5 && item.type_id == 1">{{ $t('lang221') }}</van-button>
|
|
|
+ <van-button class="buy_btn btn3" type="primary" v-else-if="item.status == 5 && item.type_id == 2">{{ $t('lang193') }}</van-button>
|
|
|
+ <van-button class="buy_btn btn3" type="primary" v-else-if="item.status == 5">{{ $t('lang192') }}</van-button>
|
|
|
+ <!-- <van-button class="buy_btn btn3" type="primary" v-if="item.status == 3">{{ $t('lang223') }}</van-button> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bare" v-if="nft_list.length <= 0">
|
|
|
+ <span>{{ $t('lang82') }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 转让 -->
|
|
|
+ <van-popup v-model="transferPopop" round position="bottom">
|
|
|
+ <!-- <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="cascaderShow = false" @finish="onFinish" /> -->
|
|
|
+ <div class="area">
|
|
|
+ <div class="title">{{ $t('lang88') }}</div>
|
|
|
+ <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" class="vanlist">
|
|
|
+ <van-cell class="item" v-for="item in arealist" :key="item.id" :title="item.address" />
|
|
|
+ </van-list> -->
|
|
|
+ <div class="box">
|
|
|
+ <div class="f-r">
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="f-r">
|
|
|
+ <span> {{ $t('lang90') }} </span>
|
|
|
+ <span class="s">{{ Math.floor(price * Number(transfes_fee) * 100) / 100 }} {{ $t('lang174') }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="f-s">
|
|
|
+ <span> {{ $t('lang91') }} </span>
|
|
|
+ <span class="s">{{ transfes_txt }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="submit">
|
|
|
+ <van-button class="submit_btn" type="primary" @click="submit">{{ $t('lang71') }}</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+ <!-- 提货 -->
|
|
|
+ <van-popup v-model="addresPopop" round position="bottom">
|
|
|
+ <div class="area">
|
|
|
+ <div class="title">{{ $t('lang157') }}</div>
|
|
|
+ <van-address-edit :area-list="areaList" show-search-result :save-button-text="$t('lang111')" :area-columns-placeholder="[]" @save="onSave" />
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+ <!-- 赠送 -->
|
|
|
+ <van-popup v-model="givePopop" round position="bottom">
|
|
|
+ <div class="area">
|
|
|
+ <div class="title">{{ $t('lang187') }}</div>
|
|
|
+ <div class="box">
|
|
|
+ <div class="f-s">
|
|
|
+ <span class="k"> {{ $t('lang191') }} </span>
|
|
|
+ <div class="d" style="flex: 1">
|
|
|
+ <van-field v-model="giveAddress" type="textarea" autosize rows="1" :placeholder="$t('lang188')" class="input1" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="f-r">
|
|
|
+ <span> {{ $t('lang190') }} </span>
|
|
|
+ <span class="s">{{ Math.floor(item.price * Number(giveaway) * 100) / 100 }} {{ $t('lang174') }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="f-s">
|
|
|
+ <span> {{ $t('lang91') }} </span>
|
|
|
+ <span class="s">{{ giveaway_txt }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="submit">
|
|
|
+ <van-button class="submit_btn" type="primary" @click="giveSubmit">{{ $t('lang71') }}</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+ </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,
|
|
|
+ finished: false,
|
|
|
+ total: 1,
|
|
|
+ assets: 0,
|
|
|
+ coinList: [],
|
|
|
+ showPopover: false,
|
|
|
+ actionType: -1, //-1:全部 0:未知 1:租赁 2:直推奖励 3:团队的算力奖励 4:团队的平级算力奖励
|
|
|
+ navIndex: 0,
|
|
|
+ navList: [
|
|
|
+ //0总览 1转让中 2已转让 3存储中 4已赠送 5已提货
|
|
|
+ {
|
|
|
+ key: this.$t('lang226'),
|
|
|
+ value: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: this.$t('lang141'),
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: this.$t('lang221'),
|
|
|
+ value: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: this.$t('lang222'),
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: this.$t('lang193'),
|
|
|
+ value: 4,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: this.$t('lang223'),
|
|
|
+ value: 5,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ nft_list: [],
|
|
|
+ transferPopop: false,
|
|
|
+ givePopop: false,
|
|
|
+ price: '', // 转让金额
|
|
|
+ areaList: areaList,
|
|
|
+ searchResult: [],
|
|
|
+ addresPopop: false,
|
|
|
+ page: 1,
|
|
|
+ item: {},
|
|
|
+ transfes_fee: 0, //转让费率
|
|
|
+ transfes_txt: '', //转让手续费说明
|
|
|
+ giveAddress: '', //赠送接收人钱包地址
|
|
|
+ giveaway: 0, //赠送手续费率
|
|
|
+ giveaway_txt: '', //赠送手续费说明
|
|
|
+ chooseStatus: 0,
|
|
|
+ rwa_num: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getUserInfo();
|
|
|
+ this.getNftList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ statusFn(status) {
|
|
|
+ let result = '';
|
|
|
+ switch (status) {
|
|
|
+ case 0:
|
|
|
+ result = this.$t('lang154');
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ result = this.$t('lang155');
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ result = this.$t('lang141');
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ result = this.$t('lang156');
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ result = this.$t('lang145');
|
|
|
+ break;
|
|
|
+ case 5:
|
|
|
+ result = this.$t('lang192');
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ return result;
|
|
|
+ },
|
|
|
+ //返回上一页
|
|
|
+ back() {
|
|
|
+ this.$router.back();
|
|
|
+ },
|
|
|
+ navigatorToPage(name, query) {
|
|
|
+ this.$router.push({ name, query });
|
|
|
+ },
|
|
|
+ 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');
|
|
|
+ },
|
|
|
+ onClick(status) {
|
|
|
+ // console.log(status);
|
|
|
+ this.chooseStatus = status;
|
|
|
+ this.page = 1;
|
|
|
+ this.nft_list = [];
|
|
|
+ this.getNftList();
|
|
|
+ },
|
|
|
+ getNftList() {
|
|
|
+ homeApi.getNftList({ page: this.page, type_id: this.chooseStatus }).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 {
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getUserInfo() {
|
|
|
+ homeApi.getUserInfo().then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.rwa_num = res.data.rwa_num;
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 提货
|
|
|
+ pickup(item) {
|
|
|
+ this.item = item;
|
|
|
+ this.addresPopop = true;
|
|
|
+ },
|
|
|
+ onSave(e) {
|
|
|
+ // this.$toast('save');
|
|
|
+ homeApi.pickupOrder({ order_id: this.item.order_id, name: e.name, phone: e.tel, address: e.province + ' ' + e.city + ' ' + e.county + ' ' + e.addressDetail }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.addresPopop = false;
|
|
|
+ this.page = 1;
|
|
|
+ this.nft_list = [];
|
|
|
+ this.getNftList();
|
|
|
+ this.getUserInfo();
|
|
|
+ Notify({ type: 'success', message: this.$t('lang152') });
|
|
|
+ } else {
|
|
|
+ this.$toast(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 转让
|
|
|
+ transfer(item) {
|
|
|
+ this.transferPopop = true;
|
|
|
+ this.item = item;
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (!this.price) {
|
|
|
+ return this.$toast(this.$t('lang153'));
|
|
|
+ }
|
|
|
+ homeApi.transfer({ order_id: this.item.order_id, price: this.price }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.transferPopop = false;
|
|
|
+ this.page = 1;
|
|
|
+ this.nft_list = [];
|
|
|
+ this.getNftList();
|
|
|
+ this.price = '';
|
|
|
+ this.getUserInfo();
|
|
|
+ Notify({ type: 'success', message: this.$t('lang152') });
|
|
|
+ } else {
|
|
|
+ this.$toast(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 赠送
|
|
|
+ give(item) {
|
|
|
+ this.givePopop = true;
|
|
|
+ this.item = item;
|
|
|
+ },
|
|
|
+ giveSubmit() {
|
|
|
+ if (!this.giveAddress) {
|
|
|
+ return this.$toast(this.$t('lang188'));
|
|
|
+ }
|
|
|
+ homeApi.giveaway({ order_id: this.item.order_id, address: this.giveAddress }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.givePopop = false;
|
|
|
+ this.page = 1;
|
|
|
+ this.nft_list = [];
|
|
|
+ this.giveAddress = '';
|
|
|
+ this.getNftList();
|
|
|
+ this.getUserInfo();
|
|
|
+ Notify({ type: 'success', message: this.$t('lang152') });
|
|
|
+ } else if (res.code == 15001) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$router.push('recharge');
|
|
|
+ }, 300);
|
|
|
+ } else {
|
|
|
+ this.$toast(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ noopen() {
|
|
|
+ this.$toast(this.$t('lang2'));
|
|
|
+ },
|
|
|
+ // 取消转让
|
|
|
+ cancel(item) {
|
|
|
+ let _this = this;
|
|
|
+ Dialog.confirm({
|
|
|
+ title: _this.$t('lang136'),
|
|
|
+ message: _this.$t('lang151'),
|
|
|
+ confirmButtonText: _this.$t('lang111'),
|
|
|
+ cancelButtonText: _this.$t('lang135'),
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ // this.loading = true;
|
|
|
+ homeApi.cancel({ order_id: item.order_id }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ _this.page = 1;
|
|
|
+ _this.nft_list = [];
|
|
|
+ _this.getNftList();
|
|
|
+ Notify({ type: 'success', message: _this.$t('lang150') });
|
|
|
+ } else {
|
|
|
+ _this.$toast(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ // on cancel
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // getProductAddres() {
|
|
|
+ // homeApi.getProductAddres({ product_id: id, search: this.search }).then(res => {
|
|
|
+ // if (res.code == 200) {
|
|
|
+ // this.arealist = res.data;
|
|
|
+ // } 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(this.page);
|
|
|
+ // console.log('到底部');
|
|
|
+
|
|
|
+ if (this.page != -1) {
|
|
|
+ this.page++; // 页数加 1
|
|
|
+ this.getNftList(); // 触发加载更多
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ viewlogi(item) {
|
|
|
+ homeApi.getTracking({ order_id: item.order_id }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ window.open('https://www.kuaidi100.com/chaxun?nu=' + res.data, '_blank');
|
|
|
+ } else {
|
|
|
+ this.$toast(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .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: 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;
|
|
|
+ }
|
|
|
+ .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: 76px;
|
|
|
+ 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;
|
|
|
+}
|
|
|
+</style>
|
xiaomei