oil-station/gasStation-uni/pagesHome/myPointsOrder/myPointsOrder.vue
2024-09-28 18:04:43 +08:00

367 lines
7.1 KiB
Vue

<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" v-for="(item,index) in orderList" :key="index" @click="goDetails(item.id)">
<view class="box_top">
<view class="">订单号:{{item.orderNumber}}</view>
<view class="">{{item.orderStatus}}</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;">{{item.giftName}}</view>
<view class="">x{{item.exchangeQuantity || 0}}</view>
<view class="b-bs">
<view class="size1">
实付: <text style="color: #E02020;">{{item.integral}}积分</text>
<text style="color: #E02020;" v-if="item.amount">+{{item.amount}}元</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(id) {
uni.navigateTo({
url: '/pagesHome/myPointsOrder/details?orderId='+id
})
},
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
console.log(res, 147);
}
})
},
// 订单详情
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>