<template> <view class="content"> <view class="sscanCode" style="margin-bottom: 30rpx;"> <view class="sscanCodeTitle"> <u-icon size='24' name="http://amy.yyinhong.cn/uploads/wximg/dp.png"></u-icon> <span style="margin-left: 20rpx;">{{userInfo.store_name}}</span> </view> </view> <view class="bindingUser" v-for="(item,index) in userList" :key="index"> <view class="bindingUserImg"> <image :src="item.avatar" style="width: 100%;height: 100%;" mode=""></image> </view> <view class="bindingUserInfo"> <view class="bindingUserInfoName"> {{item.name}} </view> <view class="bindingUserInfoTime"> {{item.created_at}} </view> </view> </view> <u-sticky bgColor="#fff"> <u-tabs :list="list" :current="current" :scrollable="false" @click="changeTab"></u-tabs> </u-sticky> <u-empty :show="total == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty> <u-list @scrolltolower="scrolltolower"> <u-list-item v-for="(item, index) in pageList" :key="index"> <view class="orderModel"> <view class="orderTop" @click="gotoDetail(item.order_id)"> <view class="orderTime"> {{item.created_at}} </view> <view class="orderStatus"> {{item.status_txt}} </view> </view> <view class="orderBaseInfo" @click="gotoDetail(item.order_id)" v-for="(jtem,jndex) in item.order_goods" :key="jndex"> <view class="orderImg"> <image class="init_image" :src="jtem.goods_img" mode=""></image> </view> <view class="orderInfo"> <view class="orderName"> {{jtem.goods_name}} </view> <view class="orderNorms"> <span>{{jtem.goods_attr}}</span> <span>x{{jtem.goods_number}}</span> </view> <view class="orderPrice"> <span>¥</span>{{jtem.goods_price}} </view> </view> </view> </view> </u-list-item> </u-list> <u-toast ref="uToast"></u-toast> </view> </template> <script> export default { data() { return { verificationCode: '', userInfo: {}, ShopInfo: { current: null, last: null }, role_id: null, userList: [], pageList: [], pageNum: 1, list: [{ name: '全部' }, { name: '待付款' }, { name: '待到货' }, { name: '待领取' }, { name: '待评价' }], nowStatus: "-1", totalPage: 0, current: 0, total: 0, userid: "" } }, onLoad(options) { this.userid = options.id this.getUserInfo() }, methods: { //获取用户信息 getUserInfo() { this.$request('/merchant-info', 'GET', {}).then(res => { console.log(res) this.userInfo = res.data; this.verificationCode = this.userInfo.buycode; this.role_id = this.userInfo.role_id; if (this.role_id == 3) { this.pageType() } }).catch(err => { uni.showToast({ icon: 'error', title: '' + err.message }) }) }, goCode(code) { uni.navigateTo({ url: '/pageSub-pc/pages/orderCode/orderCode?code=' + code }) }, payMthods(order_id) { this.$utils.payOrder(order_id) }, pageType() { this.pageList = []; if (this.nowStatus == '-1' || this.nowStatus == undefined) { this.pageNum = 1; this.getOrderList(); this.current = 0 } if (this.nowStatus == '0') { this.pageNum = 1; this.getOrderList(); this.current = 1 } if (this.nowStatus == '1') { this.pageNum = 1; this.getOrderList(); this.current = 2 } if (this.nowStatus == '2') { this.pageNum = 1; this.getOrderList(); this.current = 3 } if (this.nowStatus == '3') { this.pageNum = 1; this.getOrderList(); this.current = 4 } }, del_order(id) { this.$request('/cance-order', 'POST', { order_id: id }).then(res => { console.log(res.data) this.$refs.uToast.show({ type: 'success', message: "订单取消成功!", iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png', complete() {} }) this.pageType() }).catch(err => { uni.showToast({ icon: 'error', title: '' + err.message }) }) }, scrolltolower() { if (this.totalPage == this.pageNum) { return } this.pageNum += 1; this.getOrderList(); }, //获取我的订单 getOrderList() { this.$request('/order-list', 'GET', { order_status: this.nowStatus, page: this.pageNum, user_id: this.userid }).then(res => { console.log(res.data) this.pageList = [...this.pageList, ...res.data.list]; this.total = res.data.total; this.totalPage = res.data.total_page; }).catch(err => { // uni.showToast({ // icon: 'error', // title: '1111' + err.message // }) }) }, changeTab(item) { this.pageList = [] console.log('item', item); if (item.name == '全部') { this.pageNum = 1; this.nowStatus = "-1"; this.getOrderList(); } if (item.name == '待付款') { this.pageNum = 1; this.nowStatus = "0"; this.getOrderList(); } if (item.name == '待到货') { this.pageNum = 1; this.nowStatus = "1"; this.getOrderList(); } if (item.name == '待领取') { this.pageNum = 1; this.nowStatus = "2"; this.getOrderList(); } if (item.name == '待评价') { this.pageNum = 1; this.nowStatus = "3"; this.getOrderList(); } }, gotoDetail(id) { uni.navigateTo({ url: '/pageSub/pages/orderDetail/orderDetail?id=' + id }) } } } </script> <style lang="scss"> .content { width: 100vw; height: 100vh; padding-top: 30rpx; background: linear-gradient(to bottom, #f3d4d7, #f8f8f8, #f8f8f8); } .headInfo { width: calc(100% - 120rpx); margin: 0 30rpx; padding: 30rpx; background-color: #ffffff; border-radius: 24rpx; display: flex; flex-direction: row; align-items: center; font-size: 30rpx; position: relative; .copyIcon { position: absolute; right: 30rpx; } } .topModel { width: 100%; height: 200rpx; text-align: center; line-height: 300rpx; font-size: 40rpx; font-weight: 600; color: #111827; } .sscanCode { width: calc(100% - 120rpx); min-height: 120rpx; padding: 0 30rpx; margin: 0 30rpx; margin-top: 0rpx; border-radius: 24rpx; background-color: #ffffff; display: flex; flex-direction: row; align-items: center; } .bindingUserImg { width: 92rpx; height: 92rpx; border-radius: 50%; background-color: #D3195E; } .bindingUserInfo { width: calc(100% - 120rpx - 180rpx); height: 120rpx; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 32rpx; color: #000; margin-left: 20rpx; } .bindingUserInfoName { width: 100%; color: #000; font-size: 28rpx; } .bindingUserInfoTime { width: 100%; font-size: 24rpx; color: #718096; } .bindingUser { width: calc(100% - 120rpx); min-height: 120rpx; padding: 0 30rpx; margin: 0 30rpx; margin-top: 20rpx; border-radius: 24rpx; background-color: #ffffff; display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .bindingUserBtn { width: 160rpx; height: 60rpx; background-color: #D3195E; border-radius: 30rpx; text-align: center; line-height: 60rpx; color: #ffffff; font-size: 24rpx; } .sscanCodeTitle { display: flex; flex-direction: row; align-items: center; width: 100%; height: 60rpx; font-size: 32rpx; color: #000000; } .orderModel { width: calc(100% - 120rpx); margin: 30rpx; padding: 30rpx; margin-bottom: 0rpx; background-color: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: space-between; border-radius: 20rpx; } .orderTop { width: 100%; height: 70rpx; line-height: 70rpx; display: flex; flex-direction: row; align-items: center; justify-content: space-between; border-bottom: 1px solid #ECECEC; margin-bottom: 20rpx; .orderTime { width: 50%; font-size: 24rpx; color: #666666; } .orderStatus { width: 50%; font-size: 24rpx; color: #333333; text-align: right; } } .orderBtnList { width: 100%; height: 60rpx; padding-top: 20rpx; line-height: 60rpx; display: flex; flex-direction: row-reverse; align-items: center; } .orderBtn { height: 58rpx; width: 160rpx; text-align: center; border-radius: 58rpx; border: 1rpx solid #E9799F; background-color: #E9799F; color: #ffffff; margin-left: 20rpx; font-size: 28rpx; } .orderOtherBtn { height: 58rpx; line-height: 58rpx; width: 160rpx; text-align: center; border-radius: 58rpx; border: 1rpx solid #777777; background-color: #ffffff; color: #777777; margin-left: 20rpx; font-size: 28rpx; } .orderBaseInfo { width: 100%; background-color: #ffffff; display: flex; flex-direction: row; align-items: center; justify-content: space-between; border-radius: 20rpx; } .orderImg { background-color: #f3d4d7; width: 180rpx; height: 180rpx; margin-right: 30rpx; overflow: hidden; border-radius: 8rpx; } .orderInfo { height: 180rpx; flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .orderName { font-size: 30rpx; color: #333333; line-height: 36rpx; display: -webkit-box; /* 使用弹性盒模型 */ -webkit-box-orient: vertical; /* 垂直方向的弹性盒 */ -webkit-line-clamp: 2; /* 显示两行 */ overflow: hidden; /* 隐藏超出部分 */ text-overflow: ellipsis; /* 使用省略号 */ } .orderNorms { line-height: 58rpx; display: flex; flex-direction: row; align-items: center; justify-content: space-between; color: #999999; font-size: 24rpx; } .orderPrice { height: 50rpx; display: flex; flex-direction: row; align-items: baseline; color: #D61A62; font-size: 36rpx; span { font-size: 24rpx; margin-right: 10rpx; } } </style>