123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976 |
- <template>
- <view class="container">
- <view class="title-box">
- <view class="title-img">
- <image :src="userInfo.avatar" mode=""></image>
- </view>
- <view class="title-tit">
- <view class="title-top">
- {{userInfo.nickname || '游客'}}
- </view>
- <view class="title-bottom">
- <text class="padding-r-10">{{userInfo.phone}}</text>
- <text v-if="userInfo.is_company==1">分公司</text>
- <text v-else>
- {{userInfo.is_partner==1?'分销商':''}}
- </text>
- </view>
- </view>
- </view>
- <view class="main-box">
- <view class="title flex" @click="navTo('/pages/order/order?state=0')">
- <view class="title-left">
- <!-- <image class="title-icon" src="../../static/user/user5.png" mode=""></image> -->
- <view class="title-font">我的订单</view>
- </view>
- <image class="title-right" src="../../static/user/back.png" mode=""></image>
- </view>
- <view class="main flex">
- <view class="oitem" @click="navTo('/pages/order/order?state=0')">
- <image class="oitem-image" src="../../static/user/dfk.png" mode=""></image>
- <view class="oitem-font">待付款</view>
- </view>
- <view class="oitem" @click="navTo('/pages/order/order?state=1')">
- <image class="oitem-image" src="../../static/user/dfh.png" mode=""></image>
- <view class="oitem-font">待发货</view>
- </view>
- <view class="oitem" @click="navTo('/pages/order/order?state=2')">
- <image class="oitem-image" src="../../static/user/dsh.png" mode=""></image>
- <view class="oitem-font">待收货</view>
- </view>
- <view class="oitem" @click="navTo('/pages/order/order?state=3')">
- <image class="oitem-image" src="../../static/user/dfk.png" mode=""></image>
- <view class="oitem-font">已完成</view>
- </view>
- </view>
- </view>
- <view class="manage-box">
- <view class="manage" @click="navTo('/pages/order/orderSC')">
- <view class="flex-center">
- <image src="../../static/user/user13.png" mode="widthFix"></image>
- </view>
- <view class="manage-title">
- 市场未付
- </view>
- </view>
- <view class="manage" @click="navTo('/pages/money/wallet')">
- <view class="flex-center">
- <image src="../../static/user/user06.png" mode="widthFix"></image>
- </view>
- <view class="manage-title">
- 钱包
- </view>
- </view>
- <view class="manage" @click="navTo('/pages/user/myvip')">
- <view class="flex-center">
- <image src="../../static/user/user12.png" mode="widthFix"></image>
- </view>
- <view class="manage-title">
- 加盟
- </view>
- </view>
- <view class="manage" @click="navTo('/pages/user/personal')">
- <view class="flex-center">
- <image src="../../static/user/user08.png" mode="widthFix"></image>
- </view>
- <view class="manage-title">
- 实名认证
- </view>
- </view>
- <view class="manage" @click="navTo('/pages/user/shareQrCode')">
- <view class="flex-center">
- <image src="../../static/user/user05.png" mode="widthFix"></image>
- </view>
- <view class="manage-title">
- 邀请好友
- </view>
- </view>
- <view class="manage" @click="kfOpen()">
- <view class="flex-center">
- <image src="../../static/user/kf.png" mode="widthFix"></image>
- </view>
- <view class="manage-title">
- 联系客服
- </view>
- </view>
- <view class="manage" @click="navTo('/pages/user/feedback')">
- <view class="flex-center">
- <image src="../../static/user/user09.png" mode="widthFix"></image>
- </view>
- <view class="manage-title">
- 提交意见
- </view>
- </view>
- <view class="manage" @click="navTo('/pages/set/set')">
- <view class="flex-center">
- <image src="../../static/user/user07.png" mode="widthFix"></image>
- </view>
- <view class="manage-title">
- 设置
- </view>
- </view>
- <!-- <view class="manage" @click="navTo('/pages/user/about')">
- <view class="flex-center">
- <image src="../../static/user/user09.png" mode="widthFix"></image>
- </view>
- <view class="manage-title">
- 关于我们
- </view>
- </view> -->
- </view>
- <view class="navbar">
- <view class="nav-item" v-for="(item,index) in navList" :class="{current:tabCurrentIndex===index}"
- @click="navGet(index)">
- {{item.text}}
- </view>
- </view>
- <view v-for="(navitem,key) in navList" v-if="key==tabCurrentIndex">
- <scroll-view scroll-y="true" class="uni-scroll-view-content ">
- <u-empty v-if="navitem.orderList && navitem.orderList.length == 0 && navitem.loaded"></u-empty>
- <view class="flex dy-list">
- <view class="box-content" v-for="item in navitem.orderList">
- <view class="img">
- <image :src="item.class_info.uri" mode=""></image>
- </view>
- <view class="content-title">
- <view class="title">
- <view class="text clamp">
- {{item.class_info.name}}
- </view>
- <view class="zm" v-if="item.hang!=null">
- 转卖中
- </view>
- </view>
- <view class="content-price">
- <view class="price">
- ¥{{item.price}}
- <!-- ¥{{item.class_info.name}} -->
- </view>
- <view class="" v-show="tabCurrentIndex!=1">
- <view class="button" @click="navPop(item)" v-if="item.hang==null ">
- 卖出
- </view>
- <view class="button" @click="qxMai(item.hang.id)" v-else>
- 取消卖出
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- <uni-load-more :status="navitem.loadingType" v-if="!(navitem.orderList.length == 0 && navitem.loaded)">
- </uni-load-more>
- </scroll-view>
- </view>
- <!-- 客服 -->
- <uni-popup ref="popupkf" type="center">
- <view class="popup-box">
- <view class="img">
- <image src="../../static/img/img009.png" mode=""></image>
- </view>
- <view class="mian">
- <view class="delivery">
- <view class="title">已经为您定制专属客服</view>
- <image src="../../static/img/img010.png" mode=""></image>
- </view>
- <view class="nocancel">客服VX:{{ kfWX }}</view>
- <view class="comfirm-box">
- <view class="cancel" @click="kfClose()">取消</view>
- <view class="comfirm" @click="uniCopy(kfWX)">复制微信</view>
- </view>
- </view>
- </view>
- </uni-popup>
- <uni-popup ref="maipop" type="center">
- <view class="mai-box">
- <view class="mai-title">
- 卖出价格
- </view>
- <input type="number" v-model="money" placeholder="请输入">
- <view class="mai-button">
- <view class="button-left" @click="maiClose()">
- 取消
- </view>
- <view class="button-right" @click="buy()">
- 确定
- </view>
- </view>
- </view>
- </uni-popup>
- <uni-popup ref="qumaipop" type="center">
- <view class="mai-box">
- <view class="mai-title">
- 提示
- </view>
- <view class="mai-title">
- 您正在转卖这件藏品确认取消卖出?
- </view>
- <view class="mai-button">
- <view class="button-left" @click="maiClose()">
- 取消
- </view>
- <view class="button-right" @click="quxbuy(item)">
- 确定
- </view>
- </view>
- </view>
- </uni-popup>
- </view>
- </template>
- <script>
- import {
- sell,
- qxgd
- } from '@/api/order.js'
- import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
- import uEmpty from '@/uview-ui/components/u-empty/u-empty.vue'
- import {
- mapState,
- mapMutations
- } from 'vuex';
- import uniList from '@/components/uni-list/uni-list.vue';
- import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
- import {
- orderData,
- getUserInfo,
- getMyNft,
- myGdList
- } from '@/api/user.js';
- import {
- saveUrl,
- interceptor
- } from '@/utils/loginUtils.js';
- export default {
- components: {
- uniList,
- uniListItem,
- uEmpty
- },
- data() {
- return {
- id: 0,
- item: '', //当前选中要操作卖出商品的数据
- money: '', //卖出价格
- kfWX: 'liuniu', //客服微信
- // 头部图高度
- tabCurrentIndex: 0,
- navList: [{
- state: 0,
- text: '我拥有的',
- loadingType: 'more',
- orderList: [],
- page: 1,
- limit: 10,
- loaded: false
- }, {
- state: 1,
- text: '我卖出的',
- loadingType: 'more',
- orderList: [],
- page: 1,
- limit: 10,
- loaded: false
- }],
- };
- },
- onShow() {
- if (this.hasLogin) {
- this.loadBaseData();
- // 返回页面刷新我的挂单数据
- this.navList = [{
- state: 0,
- text: '我拥有的',
- loadingType: 'more',
- orderList: [],
- page: 1,
- limit: 10,
- loaded: false
- }, {
- state: 1,
- text: '我卖出的',
- loadingType: 'more',
- orderList: [],
- page: 1,
- limit: 10,
- loaded: false
- }]
- // 获取我的挂单
- this.getMyNft()
- } else {
- this.loadBaseData();
- }
- },
- onReady() {},
- computed: {
- ...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
- },
- methods: {
- ...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
- loadBaseData() {
- getUserInfo({})
- .then(({
- data
- }) => {
- this.setUserInfo(data);
- // 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
- orderData({})
- .then(({
- data
- }) => {
- this.setOrderInfo(data);
- })
- .catch(e => {
- this.setOrderInfo({
- complete_count: 0, //完成
- received_count: 0, //待收货
- unshipped_count: 0, //待发货
- order_count: 0, //订单总数
- unpaid_count: 0 //待付款
- });
- });
- })
- .catch(e => {
- console.log(e);
- });
- },
- navPop(item) {
- this.item = item
- this.$refs.maipop.open()
- },
- buy() {
- let obj = this
- console.log(obj.item, 'item');
- if (obj.price == '') {
- obj.$api.msg('请输入价格')
- return
- }
- sell({
- price: obj.money
- }, obj.item.id).then(res => {
- console.log(res, 'res');
- uni.showModal({
- title: '成功',
- content: '挂售成功!',
- showCancel: false,
- });
- obj.$refs.maipop.close()
- })
- },
- //取消卖出弹窗
- qxMai(item) {
- this.$refs.qumaipop.open()
- console.log(item, 'id');
- this.id = item
- },
- // 取消挂单
- quxbuy() {
- qxgd({}, this.id).then(res => {
- console.log(res, "取消挂单");
- this.$refs.qumaipop.close()
- uni.showModal({
- title: '成功',
- content: '已成功取消挂单',
- showCancel: false,
- });
- })
- },
- navGet(index) {
- this.tabCurrentIndex = index
- this.getMyNft('tab')
- },
- //swiper切换
- changeTab(e) {
- this.tabCurrentIndex = e.target.current
- this.getMyNft('tab')
- },
- async loadData(sourse) {},
- navTo(url) {
- if (url == '') {
- this.$api.msg('敬请期待');
- }
- //判断是否登录了,没有等去,请去登录
- if (!this.hasLogin) {
- //保存地址
- saveUrl();
- // 登录拦截
- interceptor();
- // uni.showModal({
- // title:'去登录'
- // })
- // uni.navigateTo({
- // url,
- // fail() {
- // uni.switchTab({
- // url
- // });
- // }
- // });
- } else {
- uni.navigateTo({
- url,
- fail() {
- uni.switchTab({
- url
- });
- }
- });
- }
- },
- // 客服打开
- kfOpen() {
- this.$refs.popupkf.open();
- },
- // 客服关闭
- kfClose() {
- this.$refs.popupkf.close();
- },
- // 赋值客服
- uniCopy(text) {
- this.$refs.popupkf.close();
- const a = uniCopy(text)
- if (a) {
- uni.showModal({
- title: '提示',
- content: '复制成功',
- showCancel: false,
- });
- }
- },
- maiClose() {
- this.$refs.maipop.close();
- this.$refs.qumaipop.close();
- },
- getMyNft(type) {
- let obj = this
- let index = obj.tabCurrentIndex
- let navitem = obj.navList[index]
- if (type == 'tab' && navitem.loaded) {
- return
- }
- if (navitem.loadingType == 'loading' || navitem.loadingType == 'noMore') {
- return
- }
- navitem.loadingType = 'loading'
- if (index == 0) {
- getMyNft({
- page: navitem.page,
- limit: navitem.limit
- }).then(res => {
- // console.log(res, 'res');
- navitem.orderList = navitem.orderList.concat(res.data.list)
- navitem.page++
- if (res.data.list.length == navitem.limit) {
- navitem.loadingType = 'more'
- } else {
- navitem.loadingType = 'noMore'
- }
- obj.$set(navitem, 'loaded', true)
- })
- }
- if (index == 1) {
- console.log('get22')
- myGdList({
- page: navitem.page,
- limit: navitem.limit,
- status: 2,
- }).then(res => {
- navitem.orderList = navitem.orderList.concat(res.data.list)
- console.log(navitem.orderList, 'navitem.orderList');
- navitem.page++
- if (res.data.list.length == navitem.limit) {
- navitem.loadingType = 'more'
- } else {
- navitem.loadingType = 'noMore'
- }
- obj.$set(navitem, 'loaded', true)
- })
- }
- }
- }
- };
- </script>
- <style lang="scss">
- page,
- .container {
- width: 750rpx;
- height: 100%;
- background: #111111;
- }
- .mai-box {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: space-around;
- width: 582rpx;
- height: 377rpx;
- background: #FFFFFF;
- border-radius: 20rpx;
- .mai-title {
- margin: 0 60rpx;
- font-size: 42rpx;
- font-weight: 500;
- color: #0C1732;
- line-height: 56rpx;
- }
- input {
- width: 494rpx;
- height: 90rpx;
- font-size: 40rpx;
- background: rgba(199, 212, 255, 0.3500);
- border-radius: 10rpx;
- text-align: center;
- }
- .mai-button {
- display: flex;
- width: 90%;
- justify-content: space-between;
- .button-left {
- text-align: center;
- width: 248rpx;
- height: 78rpx;
- border: 2rpx solid #A581FF;
- border-radius: 10rpx;
- font-size: 34rpx;
- font-weight: 500;
- color: #A581FF;
- line-height: 78rpx;
- }
- .button-right {
- text-align: center;
- width: 248rpx;
- height: 78rpx;
- background: linear-gradient(270deg, #6E8DF7, #9977F6);
- border-radius: 10rpx;
- font-size: 34rpx;
- font-weight: 500;
- color: #FFFFFF;
- line-height: 78rpx;
- }
- }
- }
- .title-box {
- margin: 80rpx 0 40rpx 0;
- display: flex;
- align-items: center;
- .title-img {
- width: 100rpx;
- height: 100rpx;
- border-radius: 50%;
- overflow: hidden;
- image {
- width: 100%;
- height: 100%;
- }
- }
- .title-tit {
- margin-left: 30rpx;
- flex-grow: 1;
- .title-top {
- font-size: 36rpx;
- font-weight: 500;
- color: #FFFFFF;
- line-height: 50rpx;
- }
- .title-bottom {
- font-size: 22rpx;
- font-weight: 500;
- color: #FFFFFF;
- line-height: 40rpx;
- }
- }
- }
- .address-box {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin: 0 30rpx;
- height: 60rpx;
- background: #181818;
- border: 2rpx solid #7D5FA4;
- border-radius: 8rpx;
- font-size: 20rpx;
- font-weight: 500;
- line-height: 61rpx;
- color: #5C5EE5;
- .address-text {
- margin: 0 25rpx;
- width: 520rpx;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- .fuzhi {
- width: 86rpx;
- height: 40rpx;
- border-radius: 10rpx;
- border: 2px solid #7D5FA4;
- text-align: center;
- line-height: 32rpx;
- margin-right: 40rpx;
- }
- }
- .manage-box {
- margin: 30rpx auto;
- width: 690rpx;
- display: flex;
- justify-content: left;
- background: #181818;
- border-radius: 30rpx;
- flex-wrap: wrap;
- .manage {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin: 30rpx 0 20rpx;
- width: 25%;
- .flex-center {
- min-height: 60rpx;
- }
- image {
- width: 42rpx;
- margin-bottom: 15rpx;
- }
- .manage-title {
- font-size: 24rpx;
- font-weight: 500;
- color: #FFFFFF;
- line-height: 42rpx;
- }
- }
- }
- .vheigh {
- height: var(--status-bar-height);
- }
- .navbar {
- margin-top: 30rpx;
- display: flex;
- justify-content: space-around;
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #999999;
- line-height: 42rpx;
- .current {
- color: #5C5EE5;
- }
- }
- .uni-scroll-view-content {
- height: 100%;
- flex-wrap: wrap;
- }
- .box {
- display: flex;
- // justify-content: space-around;
- flex-wrap: wrap;
- width: 750rpx
- }
- .box-content {
- width: 330rpx;
- height: 415rpx;
- // margin:0 15rpx 50rpx ;
- .img {
- width: 330rpx;
- height: 280rpx;
- image {
- width: 100%;
- height: 100%;
- }
- }
- .content-title {
- z-index: 99;
- display: flex;
- margin-top: -10rpx;
- padding: 20rpx;
- flex-direction: column;
- border-bottom-left-radius: 10rpx;
- border-bottom-right-radius: 10rpx;
- border: 2rpx solid #533A6A;
- // box-shadow: 0px 0px 20rpx 0px rgba(79,59,103,0.0600);
- .title {
- display: flex;
- align-items: center;
- // font-size: 39rpx;
- // font-weight: bold;
- // color: #FFFFFF;
- // margin-bottom: 20rpx;
- }
- .zm {
- flex-shrink: 0;
- // margin: 10rpx;
- // width: 63rpx;
- display: inline-block;
- // padding: 2rpx;
- // height: 30rpx;
- // border: 1rpx solid #5C5EE5;
- margin-left: 10rpx;
- border-radius: 5rpx;
- font-size: 16rpx;
- font-weight: 500;
- color: #5C5EE5;
- // line-height: 30rpx;
- text-align: center;
- }
- .text {
- color: #FFFFFF;
- font-size: 24rpx;
- margin: 10rpx 0;
- }
- }
- .content-price {
- display: flex;
- justify-content: space-between;
- .price {
- font-size: 30rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #FFFFFF;
- }
- .button {
- width: 104rpx;
- height: 35rpx;
- background: linear-gradient(270deg, #6E8DF7, #9977F6);
- border-radius: 18rpx;
- font-size: 20rpx;
- font-weight: 500;
- color: #FFFFFF;
- line-height: 35rpx;
- text-align: center;
- }
- }
- }
- .popup-box {
- width: 522rpx;
- height: 605rpx;
- background-color: #ffffff;
- border-radius: 20rpx;
- position: relative;
- .img {
- position: relative;
- top: -56rpx;
- left: 0;
- width: 522rpx;
- height: 132rpx;
- display: flex;
- justify-content: center;
- image {
- border-radius: 20rpx 20rpx 0 0;
- width: 450rpx;
- height: 132rpx;
- }
- }
- .mian {
- margin-top: -44rpx;
- display: flex;
- flex-direction: column;
- align-items: center;
- // padding: 32rpx 32rpx;
- background-color: #ffffff;
- border-radius: 0 0 20rpx 20rpx;
- text-align: center;
- .delivery {
- font-size: 40rpx;
- color: #333333;
- display: flex;
- align-items: center;
- flex-direction: column;
- .title {}
- image {
- margin-top: 48rpx;
- width: 172rpx;
- height: 160rpx;
- }
- }
- .nocancel {
- font-size: 32rpx;
- color: #333333;
- margin-top: 14rpx;
- }
- .comfirm-box {
- margin-top: 52rpx;
- display: flex;
- // margin-bottom: 32rpx;
- // justify-content: space-around;
- .cancel {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 197rpx;
- height: 74rpx;
- border: 1px solid #dcc786;
- border-radius: 38rpx;
- font-size: 32rpx;
- color: #605128;
- }
- .comfirm {
- margin-left: 32rpx;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 197rpx;
- height: 74rpx;
- background: linear-gradient(-90deg, #d1ba77 0%, #f7e8ad 100%);
- border-radius: 38px;
- font-size: 32rpx;
- color: #605128;
- }
- }
- }
- }
- .main-box {
- margin: 30rpx auto;
- width: 690rpx;
- background: #181818;
- // box-shadow: 0px 4rpx 14rpx 0px rgba(229, 229, 229, 0.46);
- border-radius: 20rpx;
- .title {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 24rpx;
- border-bottom: 1px solid #2f2f2f;
- .title-left {
- display: flex;
- align-items: center;
- .title-icon {
- width: 32rpx;
- height: 32rpx;
- }
- .title-font {
- margin-left: 20rpx;
- font-size: 28rpx;
- font-family: PingFang SC;
- font-weight: bold;
- color: #fff;
- }
- }
- .title-right {
- width: 14rpx;
- height: 24rpx;
- }
- }
- .main {
- padding: 50rpx 0 30rpx;
- .jg {
- width: 1px;
- height: 100rpx;
- background: #EEEEEE;
- }
- .item {
- padding-bottom: 20rpx;
- width: 25%;
- display: flex;
- flex-direction: column;
- align-items: center;
- .item-num {
- font-size: 36rpx;
- font-family: PingFang SC;
- font-weight: bold;
- color: #333333;
- }
- .item-font {
- margin-top: 18rpx;
- font-size: 22rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #666666;
- }
- }
- .oitem {
- width: 25%;
- display: flex;
- flex-direction: column;
- align-items: center;
- .oitem-image {
- height: 50rpx;
- width: 48rpx;
- }
- .oitem-font {
- margin-top: 20rpx;
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #fff;
- }
- }
- }
- }
- .dy-list {
- flex-wrap: wrap;
- padding: 30rpx;
- }
- </style>
|