<template> <view class="content"> <view class="container"> <!-- 顶部区域 --> <view class="tap-box"> <view class="box-tap" :class="{ 'act' :actinput == index }" v-for="(item,index) in taplist" :key="index" @click="getindex(index)"> <view class="">{{item.title }}</view> <!-- <view class="gang" v-if="actinput == index"></view> --> </view> </view> <u-empty text="您当前没有订单~" style="margin-top: 25px;" v-if="orderList.length == 0" icon="http://47.94.122.58:83/queshengye.png"> </u-empty> <view class="box_f" @click="goDetails()"> <view class="box_top"> <view class="">订单号:xxxxxxxxxxxxxxxxxxxx</view> <view class="">未使用</view> </view> <view class="box_cont"> <view class=""> <image src="../../static/logo.png" style="width: 60px; height: 60px; "></image> </view> <view class="r-bas"> <view style="font-size: 16px;color: #333333;">虚拟产品</view> <view class="">x1</view> <view class="b-bs"> <view class="size1">实付: <text style="color: #E02020;">100积分</text> </view> <view class="anniu">立即使用</view> </view> </view> </view> </view> <!-- <view class="goods-box" v-for="(item,index) in orderList" :key="item.id" @click="orderDetails(item)"> <view class="goods-top"> <view class="goods-img"> <image :src="baseUrl+item.coverImage" mode="aspectFit"></image> </view> <view class="nr-tip"> <view class="title-s">{{item.giftName}}</view> <view class="hui-s">{{item.createTime}} {{item.orderType==0?"(商城兑换)":"(积分兑换)"}}</view> <view class="right-size"> <view class="jg"> {{item.amount?"¥"+item.amount:''}} {{item.amount && item.integral ? '+':''}} {{item.integral?item.integral+'积分':''}} </view> <view class="">X{{item.exchangeQuantity}}</view> </view> </view> </view> <view class="goods-bottom" v-if="actinput == 1 "> <view class="sh-anniu" @click="confirmTheReceipt(item.id)"> <text>确认收货</text> </view> </view> </view> --> <u-empty v-if="arrList.length == 0" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"> </u-empty> </view> </view> </template> <script> import config from '@/config' import request from '../../utils/request' export default { data() { return { title: '', orderList: [], baseUrl: config.baseUrl, query: { orderStatus: '', chainStoreId: uni.getStorageSync('chainStoreId'), storeId: uni.getStorageSync('storeId') }, taplist: [{ title: '全部' }, { title: '未使用' }, { title: '已完成' }, ], arrList: ["1"], actinput: 0, } }, components: { }, onShow() { // this.getIntegralOrderList() }, methods: { goDetails() { uni.navigateTo({ url: '/pagesHome/myPointsOrder/details' }) }, getindex(index) { this.actinput = index if (index != 0) { this.query.orderStatus = index // if (index == 1) { // this.query.orderStatus = '已发货' // }else { // this.query.orderStatus = this.taplist[index].title // } } else { this.query.orderStatus = '' } this.getIntegralOrderList() }, goback() { uni.navigateBack() }, // 查询我的积分明细 getIntegralOrderList() { request({ url: 'business/integral/integralOrders/queryByPageUni', method: 'get', params: this.query }).then((res) => { if (res.code == 200) { this.orderList = res.data.records } }) }, // 订单详情 orderDetails(data) { console.log("dara", data) uni.$on('pointsGoodsDetailsUn', function() { uni.$emit('pointsGoodsDetails', data) }) uni.navigateTo({ url: '/pagesHome/PointsGoodsDetails/PointsGoodsDetails', }) }, confirmTheReceipt(data) { let params = { id: data, orderStatus: '已完成' } request({ url: 'business/integral/integralOrders/editUni', method: 'put', data: params }).then((res) => { if (res.code == 200) { this.orderList = res.data.records this.getIntegralOrderList() } }) }, refund(data) { }, payment(data) { }, } } </script> <style scoped lang="scss"> .content { background: #f4f5f6; } .container { width: 100%; height: 100vh; box-sizing: border-box; background: #f4f5f6; } .tap-box { width: 100%; height: 30px; display: flex; align-items: center; justify-content: space-around; background-color: #ffffff; } .box-tap { width: 15%; text-align: center; height: 100%; border-bottom: 2px solid transparent; } .act { color: #FA6400; border-bottom: 2px solid #FA6400 !important; font-weight: bold; } .gang { width: 25px; height: 5px; background-color: #FA6400; border-radius: 8px; margin: 2px auto; } .goods-box { width: 95%; border-radius: 8px; margin: 10px auto; background: #ffffff; box-sizing: border-box; padding: 10px; } .goods-top { display: flex; justify-content: space-between; } .goods-img { width: 175rpx; height: 175rpx; border-radius: 8px; overflow: hidden; image { width: 100%; height: 100%; } } .nr-tip { width: 70%; } .title-s { font-size: 18px; font-weight: bold; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hui-s { font-size: 14px; color: #999999; margin: 5px auto; } .right-size { width: 100%; display: flex; align-items: center; justify-content: space-between; font-weight: bold; color: #333; } .jg { font-weight: bold; color: #FF1800 !important; } .goods-bottom { box-sizing: border-box; padding: 5px 0px; border-top: 1px solid #F4F4F4; display: flex; align-items: center; justify-content: flex-end; margin-top: 15px; } .sh-anniu { box-sizing: border-box; padding: 5px 10px; border-radius: 50px; border: 1px solid #FA6400; color: #FA6400; } .box_f { width: 95%; border-radius: 8px; background: #ffffff; margin: 15px auto; } .box_top { width: 100%; box-sizing: border-box; padding: 10px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; border-bottom: 1px; border-bottom: 1px dashed #eee; } .box_cont { width: 100%; box-sizing: border-box; padding: 10px; display: flex; align-items: center; justify-content: space-between; } .r-bas { width: 80%; font-size: 12px; } .b-bs { display: flex; align-items: center; justify-content: space-between; } .anniu { width: 80px; height: 25px; background: #FF9655; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; border-radius: 50px; } </style>