<template>
<view class="container prohibition">
<view class="demo" :style="'height:' + demo.height + 'px;' + 'padding-top:' + demo.top + 'px;padding-bottom:10rpx'">
<view class="left" :style="'top:' + demo.top + 'px'">
<view class="iconfont icon-zuo" @tap='backleft'></view>
</view>
<view class="clr_fff">订单</view>
</view>
<view class="pd_t123">
<view class="box_fixed" :style="{ top: top_val + 'rpx'}">
<!-- 切换 -->
<view class="content_change">
<view class="operate_box">
<button class="operate_btn" v-for="(item,index) in btn_Arr" :key="index" :class="{'active':add_class==index}"
@tap="changeFn(index)">{{item.title}}</button>
</view>
</view>
<!-- 顶部导航栏 -->
<view class="horizonal-tab">
<scroll-view scroll-x="true" scroll-with-animation class="scroll-tab">
<block v-for="(item,index) in tabBars" :key="index">
<view class="scroll-tab-item" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
{{item.name}}
<view class="scroll-tab-line"></view>
</view>
</block>
</scroll-view>
</view>
</view>
<!-- 内容区 -->
<view class="">
<!-- 滑块视图 -->
<view class="content" :style="{ 'padding-top': margin_top + 'rpx'}">
<view class="items">
<view class="order_img">
<image src="https://test134.vrapp.chot.cn/mini/picture/list_none.png" mode="widthFix" v-show="isEmpty == true"></image>
</view>
<view class="item" v-for="(items,index1) in queryList" :key="index1">
<view class="orderid">
<text class="title">订单号：{{items.order_no}}</text>
<image class="sucessImg" src="https://test134.vrapp.chot.cn/mini/picture/135_57.png" mode="widthFix"></image>
<text class="statusText">{{items.status}}</text>
</view>
<view class="infor uni-flex">
<view>
<image class="orderPrdImg" mode="widthFix" @error="errImg" :src="items.goods_logo"></image>
</view>
<view class="infordt">
<view class="title">{{items.goods_title}}
<text class="num">x{{ items.number_goods }}</text>
</view>
<view class="price">¥{{ items.price_real }}元/天</view>
<view class="date">{{ items.create_at }}</view>
</view>
</view>
<view class="pay" v-show="items.status !== '待付款'">
实付款：¥{{items.price_real * items.number_goods}}
</view>
<view class="pay" v-show="items.status == '待付款'">
待付款：¥{{items.price_real * items.number_goods}}
</view>
<view class="btn">
<view class="right">
<image @tap="callKehu" class="kehu" src="https://test134.vrapp.chot.cn/mini/picture/kefu.png" mode="widthFix"></image>
<button @tap="order_detail(index1)" hover-class="active">查看订单</button>
<button hover-class="active" v-show="items.status == '已完成'" @tap="buyAgin(index1)">再次购买</button>
<button hover-class="active" v-show="items.status =='待付款' && items.mid== mid " @tap="pay_order(index1)">立即支付</button>
<button v-show="items.status == '已完成' && items.evaluate == null" hover-class="active" @tap="evaluateFn(index1)">立即评价</button>
<button v-show="items.status == '已完成' && items.evaluate !== null" hover-class="active" @tap="order_detail(index1)">查看评价</button>
</view>
</view>
<view class="assess" v-show="evaluate == true && newIdx == index1">
<view class="assess_item">
<view class="uni-flex pd_b20">
<view class="uni-rate-title">评分：</view>
<uni-rate value="3" @change="changeStarts"></uni-rate>
</view>
<view class="uni-textarea">
<textarea class="border-textarea" placeholder-style="color:#d2d2d2" placeholder="评价内容：" v-model="text_val"></textarea>
</view>
<view>
<view class="confirm">
<button class="confirm_btn" @tap="confirmFn">提交评价</button>
</view>
</view>
</view>
</view>
</view>
</view>
<uni-load-more :status="status" :content-text="contentText" />
</view>
</view>
</view>
</view>
</template>
<script>
import app from "../../App.vue"
import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue';
export default {
components: {
uniLoadMore
},
data() {
return {
token: '',
mid: '',
tabIndex: 0,
/* 选中标签栏的序列,默认显示第一个 */
page: 1,
pageSize: 10,
status: 'loading',
add_class: 1,
btn_Arr: [{
title: "预约订单"
},
{
title: "商品订单"
}
],
isEmpty: false,
contentText: {
contentdown: '上拉加载更多',
contentrefresh: '加载中.....',
contentnomore: '没有更多数据啦'
},
list_count: 0,
tabBars: [{
name: '全部',
id: 'guanzhu'
},
{
name: '待付款',
id: 'tuijian'
},
{
name: '已完成',
id: 'tiyu'
}
],
demo: {
top: 0,
height: 0
},
data: {},
queryList: [],
newArrayData: [],
statusText: '',
evaluate: false, // 是否点击评价
text_val: '',
stars: 3,
order_no: null,
newIdx: 0,
top_val: 0,
margin_top: 0,
mid: ""
}
},
onLoad() {
this.mid = uni.getStorageSync('mid');
var status = '';
this.getOrderList(status);
let mobile_phone = uni.getSystemInfoSync(); // 手机信息
if (mobile_phone.windowWidth <= 320) { // iphone5
this.top_val = (this.demo.height + this.demo.top) * 2 + 13;
this.margin_top = (this.demo.height + this.demo.top) * 3;
} else if (mobile_phone.windowHeight >= 896) { // iphone XR
this.top_val = (this.demo.height + this.demo.top) * 2 - 8;
this.margin_top = (this.demo.height + this.demo.top) * 3;
} else {
this.top_val = (this.demo.height + this.demo.top) * 2;
this.margin_top = (this.demo.height + this.demo.top) * 3;
}
},
created() {
const demo = uni.getMenuButtonBoundingClientRect()
this.demo.top = demo.top
this.demo.height = demo.height
if (app.globalData.token == undefined) {
this.token = uni.getStorageSync('token');
} else {
this.token = app.globalData.token;
}
},
onShow() {
this.tabIndex = 0;
this.add_class = 1;
},
onReachBottom(e) {
this.page++;
、 // 数据加载完后停止数据请求
if (this.status != 'more') {
return false;
}
if (this.tabIndex == 0) {
var status = '';
this.getOrderList(status);
} else if (this.tabIndex == 1) {
var status = 2;
this.statusText = "待付款";
this.getOrderList(status);
} else if (this.tabIndex == 2) {
var status = 5; // 已完成
this.statusText = "已完成";
this.getOrderList(status);
}
},
methods: {
backleft(e) {
uni.navigateBack();
},
changeFn(index) {
this.add_class = index;
if (this.add_class == 1) {
var status = '';
this.getOrderList(status);
} else if (this.add_class == 0) {
uni.switchTab({
url:"../../pages/worker/worker"
})
}
},
async callKehu() {
const res = await this.$myRequset({
url: "/api",
data: {
operate: "index.store_phone",
token: this.token
}
});
let phone_number = res.data.data.phone;
if (res.data.code == 1) {
uni.makePhoneCall({
phoneNumber: phone_number
});
}
},
order_detail(index) {
uni.setStorageSync('order_no', this.queryList[index]);
uni.navigateTo({
url: '../../pages/orderDetail/orderDetail'
})
},
evaluateFn(index) {
this.newIdx = index;
this.evaluate = !this.evaluate;
this.order_no = this.queryList[index].order_no;
},
changeStarts(num) {
this.stars = num.value;
},
errImg() {
this.queryList.forEach((val) => {
if (val.goods_logo.length == 29) { // 图片不完整路径
val.goods_logo = 'https://test134.vrapp.chot.cn/mini/picture/orderImg.png';
}
if (val.number_goods == null || val.goods_title == null || val.price_real == null) {
val.number_goods = 1;
val.price_real = 0;
val.goods_title = '居家生活料理套餐'
}
});
},
navsHandleClick(i) {
this.current = i;
},
intervalChange(e) {
this.current = e.detail.current;
},
//切换选项卡
toggleTab(index) {
this.tabIndex = index;
this.page = 1; // tab切换时page是1哦
this.isEmpty = false;
this.status = 'loading';
switch (this.tabIndex) {
case 1:
var status = 2 // 待付款
this.statusText = "待付款";
this.queryList = []; // tab选项卡切换时需要将原来已经获取的数据清空，否则就还会显示原来的数据
let len = this.getOrderList(status);
break;
case 2:
var status = 5 // 已完成
this.statusText = "已完成";
this.queryList = [];
this.getOrderList(status);
break;
default:
var status = '' // 默认显示全部列表
this.queryList = [];
this.getOrderList(status);
break;
}
},
//滑动切换swiper
tabChange(e) {
this.tabIndex = e.detail.current;
},
// 再次购买
buyAgin(index) {
let goods_id = this.queryList[index].goods_id;
uni.navigateTo({
url: "../../pages/detail/detail?id=" + goods_id
})
},
//获取订单信息
async getOrderList(status) {
let data = {
operate: 'Order.index',
token: this.token,
page: this.page,
status: status
}
const res = await this.$myRequset({
url: '/api',
method: "POST",
data: data
})
for (var i = 0; i < res.data.data.list.list.length; i++) {
this.queryList.push(res.data.data.list.list[i]); // 加载的数据追加在上一页后面（每次都循环列表长度追加即可，使用concat会new新数组，用户体验不好）
}
this.queryList.forEach((item, index) => {
if (item.status == 0) {
item.status = "已取消";
} else if (item.status == 1) {
item.status = "待付款";
} else if (item.status == 2) {
item.status = "待付款";
} else if (item.status == 3) {
item.status = "待发货";
} else if (item.status == 4) {
item.status = "待收货";
} else if (item.status == 5) {
item.status = "已完成";
}
});
this.list_count = res.data.data.list.count;
if (this.list_count !== 0) {
this.status = "more";
this.isEmpty = false;
this.contentText.contentnomore = "没有更多数据啦"
} else {
this.status = "nomore";
this.isEmpty = true;
this.contentText.contentnomore = "您暂时没有相关订单哦"
}
let pages = Math.ceil(this.list_count / this.pageSize);
if (this.page == pages) {// 说明分页数据已加载完毕
this.status = "nomore";
}
uni.clearStorageSync();
}// 支付订单
async pay_order(index) {
let order_no = this.queryList[index].order_no;
const res = await this.$myRequset({
url: "/api",
method: "POST",
data: {
token: this.token,
operate: "member.pay.wx_jsapi",
order_no: order_no
},
header: {
'content-type': 'application/form',
}
});
if (res.data.code == 1) {
let param = res.data.data;
uni.requestPayment({
provider: 'wxpay',
timeStamp: param.timeStamp,
nonceStr: param.nonceStr,
package: param.package,
signType: param.signType,
paySign: param.paySign,
success: function(res) {
console.log('success:' + JSON.stringify(res));
uni.showToast({
title: "支付成功",
icon: "loading"
});
uni.redirectTo({
url: "../order/order"
});
},
fail: function(err) {
console.log('fail:' + JSON.stringify(err));
uni.showToast({
title: "取消支付",
icon: "loading"
});
}
});
}
}
}
}
</script>
<style>
page {
background-color: #fff;
}
</style>
<style scoped lang="scss">
.box_fixed {
position: fixed;
100%;
z-index: 1;
height: 116rpx;
background-color: #fff;
}
.content {
background: #fefefe;
padding: 20rpx 0;
.item {
86%;
margin: 26rpx auto;
background: #fff;
box-shadow: 0rpx 0rpx 6rpx 6rpx #f4f4f4;
border-radius: 20rpx;
padding: 27rpx;
}
.statusText {
position: absolute;
top: 0rpx;
right: -34rpx;
display: inline-block;
122rpx;
height: 40rpx;
z-index: 0;
line-height: 40rpx;
color: #fff;
text-align: center;
}
.order_img {
display: flex;
align-items: center;
justify-content: center;
image {
150rpx;
height: 150rpx;
padding: 80rpx 80rpx 20rpx;
}
}
.orderid {
position: relative;
padding-bottom: 27rpx;
border-bottom: 1px solid #f4f4f4;
.title {
font-size: 26rpx;
color: #28292c;
}
.sucessImg {
135rpx;
height: 57rpx;
position: absolute;
top: 0;
right: -34rpx;
}
}
.infor {
padding-top: 25rpx;
.orderPrdImg {
252rpx;
height: 146rpx !important;
}
.infordt {
padding-left: 27rpx;
flex: 2;
.title {
font-size: 24rpx;
color: #28292c;
}
.price {
font-size: 28rpx;
color: #fa1c39;
}
.date {
font-size: 24rpx;
color: #a8a8a8;
}
.num {
font-size: 24rpx;
color: #a8a8a8;
float: right;
}
}
}
.pay {
font-size: 28rpx;
color: #28292c;
text-align: right;
margin-bottom: 27rpx;
font-weight: bold;
border-bottom: 1px solid #f4f4f4;
}
.btn {
text-align: right;
display: flex;
.right {
display: flex;
margin-left: auto;
button {
display: inline-block;
margin-right: 20rpx;
background: #fff;
color: #5b5a5a;
font-size: 24rpx;
border: 2px solid #f4f4f4;
border-radius: 40rpx;
align-self: center;
justify-content: flex-end;
flex-direction: row-reverse;
}
button:after {
border: none;
}
.active {
border-color: #d8d8d8;
color: #000;
}
.kehu {
display: inline-block;
50rpx;
height: 50rpx;
margin-right: 20rpx;
line-height: 50rpx;
align-self: center;
flex-direction: row-reverse;
}
}
}
}
.horizonal-tab {
background: #fff;
}
.horizonal-tab .active {
color: #23c0ba;
}
.scroll-tab {
white-space: nowrap;
/* 必要，导航栏才能横向*/
border-bottom: 1rpx solid #eee;
text-align: center;
left: 0;
top: 150rpx;
background-color: #fff;
}
.scroll-tab-item {
display: inline-block;
/* 必要，导航栏才能横向*/
25%;
text-align: center;
padding-top: 20rpx;
}
.active .scroll-tab-line {
background: #23c0ba;
90rpx;
height: 5rpx;
margin: 0 auto;
}
.demo {
display: flex;
align-items: center;
justify-content: center;
background: #23c0ba;
font-size: 26rpx;
100%;
text-align: center;
position: fixed;
top: 0;
z-index: 999;
.left {
float: left;
position: absolute;
max-content;
height: max-content;
top: 0;
bottom: 0;
left: 20rpx;
margin: auto;
}
.clr_fff {
color: #fff;
font-size: 35rpx;
}
}
.pd_t123 {
padding-top: 123rpx;
}
.kehu {
50rpx;
height: 50rpx;
margin-right: 6rpx;
line-height: 50rpx;
vertical-align: middle // margin-bottom: 10rpx;
}
uni-rate {
padding-top: 20rpx;
}
.assess {
border-top: 20rpx solid #fafafa;
background: #fefefe;
padding: 20rpx 0;
.assess_item {
padding: 20rpx;
margin: 0 auto;
border-radius: 20rpx;
}
.border-textarea {
border: 1px solid #d2d2d2;
border-radius: 10rpx;
}
.uni-rate-title {
font-size: 26rpx;
color: #4f4f4f;
}
.pd_b20 {
padding-bottom: 20rpx;
}
.confirm {
padding-top: 20rpx;
text-align: right;
.confirm_btn {
background: linear-gradient(to right, #63c8e8, #64d3e6);
border: none;
color: #fff;
font-size: 26rpx;
146rpx;
height: 47rpx;
line-height: 47rpx;
padding: 0;
display: inline-block;
}
}
}
.content_change {
100%;
padding: 20rpx 0 0;
.operate_box {
80%;
margin: 0 auto;
// padding-top: 120rpx;
.operate_btn {
50%;
height: 70rpx;
line-height: 70rpx;
font-size: 30rpx;
display: inline-block;
text-align: center;
color: #23c0ba;
border: 2px solid #23c0ba;
&::after {
border: none;
}
&:first-child {
border-right: 0;
border-radius: 10rpx 0 0 10rpx;
}
&:last-child {
border-radius: 0 10rpx 10rpx 0;
}
&.active {
background-color: #23c0ba;
color: #fff;
}
}
}
}
</style>