You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
377 lines
11 KiB
377 lines
11 KiB
<template>
|
|
<refresh @interrupt="interrupt" @pushToInterrupt="to" @backToInterrupt="back" @finished="finished" >
|
|
<view slot="top">
|
|
<!-- 带文字式 -->
|
|
<view :style="'position: absolute;bottom: 0rpx;height: ' + 60 + 'rpx;line-height:' + 60 + 'rpx;width: 100%;text-align: center; z-index:99'">
|
|
<view class="ing2_ref" v-if="refresh_show == '1'">
|
|
<image src="../../static/images/icn_ref.png" class="ing2_ref_pic"></image>
|
|
<text class="ref_ing">{{tip}}</text>
|
|
</view>
|
|
<view class="ing2_ref" v-if="refresh_show == '2'">
|
|
<image src="../../static/images/icn_ref.png" class="ing2_ref_pic ing2_icn_ref2"></image>
|
|
<text class="ref_ing">{{tip}}</text>
|
|
</view>
|
|
<view class="ing2_ref" v-if="refresh_show == '3'">
|
|
<image src="../../static/images/loading-icon.png" class="ing2_ref_pic icn_ref2"></image>
|
|
<text class="ref_ing">{{tip}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<template slot="vue-mes">
|
|
<view class="container999"><!-- TODO @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd" -->
|
|
<!-- 刷新事件isRefresh需要异步操作返回resolve -->
|
|
<!-- TODO <refresh ref="refresh" @isRefresh='isRefresh'></refresh> -->
|
|
<view class="navContainer">
|
|
<scroll-view class="uni-slidingMenu" :scroll-into-view="'titleid_'+titleIndex" :style="{ background: color }" scroll-x="true" >
|
|
<view :id="'titleid_'+index" :class="['slidingMenuList', currentTab == index ? 'active' : '']" v-for="(item, index) in filterData" :key="index"
|
|
@click="getActive(index,item.value,1,false)" v-cloak>
|
|
{{ item.name }}
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<!-- 公共暂无内容 显示 -->
|
|
<view :class="dataState?'show hb-noCon':'hide hb-noCon'">
|
|
<view class="noImg"></view>
|
|
<view class="noText">{{mes}}</view>
|
|
</view>
|
|
<view class="mode_com">
|
|
<!-- 旅游产品展示 -->
|
|
<view class="order-goods">
|
|
<view class="goods-order">
|
|
<view class="order-item" v-for="(item,index) in goodsData" :key="index">
|
|
<navigator :url="'/pages/order/orderdetail/orderdetail?orderid='+item.orderid">
|
|
<view class="item-top">
|
|
<text>订单时间：{{item.addtime}}</text>
|
|
<text class='lable'>{{item.status}}</text>
|
|
</view>
|
|
<view class='item-con'>
|
|
<view class="item-img">
|
|
<image :style='"background: url("+item.litpic+");background-size:cover;"' />
|
|
</view>
|
|
<view class="item-info">
|
|
<view class="name">{{item.productname}}</view>
|
|
<view class="time">
|
|
数量：1张
|
|
</view>
|
|
<view class="price">
|
|
<text class="sym">¥</text>
|
|
<text class="cur">{{item.price}}</text>
|
|
<text class="txt">起</text>
|
|
</view>
|
|
</view>
|
|
<view class="item-btn">
|
|
<button v-if="item.status == '待付款'" class="payBtn">去支付</button>
|
|
<button v-if="item.status == '交易完成'" class="payBtn">去评论</button>
|
|
</view>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
<view style="color: gray;text-align: center;" v-if="!isData">没有更多的数据了</view>
|
|
<button style="color: gray;text-align: center;width: 180rpx;height: 60rpx;font-size: 12px;" @click="getActive(currentTab,type,page,true,1)" v-if="isData">+加载更多</button>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</refresh>
|
|
</template>
|
|
|
|
<script>
|
|
const util = require('../../pages/travel/quote/util.js');
|
|
//TODO import refresh from '../../pages/travel/quote/refresh.vue';
|
|
import refresh from '@/components/refresh_3.1.vue';
|
|
import aes from "@/common/aes.js";
|
|
export default {
|
|
components: {
|
|
refresh
|
|
},
|
|
data() {
|
|
return {
|
|
item:{},
|
|
/** * 筛选 数据 */
|
|
filterData: [{
|
|
name: '全部',
|
|
value: "-1"
|
|
},
|
|
{
|
|
name: '待付款',
|
|
value: "0"
|
|
},
|
|
{
|
|
name: '待使用',
|
|
value: "1"
|
|
},
|
|
{
|
|
name: '待评价',
|
|
value: "2"
|
|
},
|
|
{
|
|
name: '退款订单',
|
|
value: "3"
|
|
},
|
|
],
|
|
goodsData:[],
|
|
currentTab:0,
|
|
dataState: false,
|
|
titleIndex:0,
|
|
page:1,
|
|
type:-1,
|
|
isRefreshData:false,
|
|
isData: false,
|
|
mes:"暂无订单",
|
|
tip: '下拉刷新',
|
|
refresh_show: '1',
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.type = option.type;
|
|
var type = option.type;
|
|
var index = 0;
|
|
if(type == -1){
|
|
index = 0;
|
|
}else if(type == 0){
|
|
index = 1;
|
|
}else if(type == 1){
|
|
index = 2;
|
|
}else if(type == 2){
|
|
index = 3;
|
|
}else if(type == 3){
|
|
index = 4;
|
|
}
|
|
this.getActive(index,this.type,this.page,false);
|
|
},
|
|
methods: {
|
|
getActive(index, type,page,refreshData,more) {
|
|
if(this.refresh_show == "3"){
|
|
return;
|
|
}
|
|
uni.showLoading({
|
|
title:"加载中",
|
|
mask:true
|
|
})
|
|
if(more == null || more == '' || more == undefined){ //如果是刷新或者点击选项卡
|
|
this.page = 1;
|
|
this.goodsData = [];
|
|
this.isData = false;
|
|
this.dataState = false;
|
|
}
|
|
this.currentTab = index;
|
|
this.$emit('changes', this.currentTab);
|
|
var method = "getUserOrder";
|
|
var sendData = {
|
|
"api_token":this.$md5.hexMD5("API"+method+"lvyou"),
|
|
"user_token":aes.aesDecrypt(uni.getStorageSync("user_token")),
|
|
"mid":uni.getStorageSync("user_info").mid,
|
|
"type":type,
|
|
"page":page
|
|
}
|
|
var data = {
|
|
"data":JSON.stringify(sendData),
|
|
"url": this.$config.getUserOrder
|
|
}
|
|
this.$Request.post(this.$config.getAittoData,data).then(res => {
|
|
if(res.code == 0){
|
|
var list = res.data.list;
|
|
if(refreshData){ //加载更多
|
|
for(var i = 0;i < list.length; i++){
|
|
this.goodsData.push(list[i]);
|
|
}
|
|
}else{
|
|
this.goodsData = list;
|
|
}
|
|
this.page = res.data.page;
|
|
if(res.data.list.length <= 0){
|
|
this.dataState = true;
|
|
}else{
|
|
this.isData = true;
|
|
}
|
|
if(this.page == -1){
|
|
this.isData = false;
|
|
}
|
|
this.titleIndex = index;
|
|
this.type = type;
|
|
uni.hideLoading();
|
|
}else if(res.code == 102){
|
|
var that = this;
|
|
this.$util.getUserInfo(that,aes.aesDecrypt(uni.getStorageSync("unionid")),function(){
|
|
this.getActive(this.currentTab,this.type,this.page,false);
|
|
})
|
|
}else{
|
|
this.mes = res.msg;
|
|
uni.hideLoading();
|
|
// uni.showToast({
|
|
// icon: "none",
|
|
// title: res.msg
|
|
// })
|
|
}
|
|
})
|
|
},
|
|
/* 第二种刷新 */
|
|
interrupt(e) {
|
|
this.tip = "刷新中";
|
|
this.refresh_show = '3';
|
|
setTimeout(()=>{
|
|
//如果页面有计算比例的需要重新初始化否则会累加计算，动态数据使用push的需要重新初始化
|
|
this.getActive(this.currentTab,this.type,1)
|
|
this.page = 1;
|
|
this.tip = '刷新成功';
|
|
this.refresh_show = '1';
|
|
e();
|
|
}, 1000);
|
|
},
|
|
to(){
|
|
this.tip = '释放刷新';
|
|
this.refresh_show = '2';
|
|
},
|
|
back(){
|
|
this.tip = "下拉刷新"
|
|
this.refresh_show = '1';
|
|
},
|
|
finished() {
|
|
this.tip = '下拉刷新';
|
|
this.refresh_show = '1';
|
|
},
|
|
/* 第一种刷新 */
|
|
// 刷新touch监听
|
|
refreshStart(e) {
|
|
this.$refs.refresh.refreshStart(e);
|
|
},
|
|
refreshMove(e){
|
|
this.$refs.refresh.refreshMove(e);
|
|
},
|
|
refreshEnd(e) {
|
|
this.$refs.refresh.refreshEnd(e);
|
|
},
|
|
isRefresh(){
|
|
setTimeout(() => {
|
|
this.getActive(this.currentTab,this.type,1)
|
|
this.page = 1;
|
|
uni.showToast({
|
|
icon: 'success',
|
|
title: '刷新成功'
|
|
})
|
|
this.$refs.refresh.endAfter() //刷新结束调用
|
|
}, 1000)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* pages/product/product.wxss */
|
|
@import url("../../static/css/common.css");
|
|
page{ background: #f2f2f2;}
|
|
.mode_com{ padding: 0 30rpx;}
|
|
.filter-top{ background: #fff;}
|
|
/* 订单列表 */
|
|
.order-goods{padding:0 0 20rpx 0; }
|
|
.order-goods .goods-order{padding-top:20rpx; font-size: 24rpx;}
|
|
.order-goods .order-item{position:relative; margin-bottom:30rpx; padding:20rpx 30rpx 30rpx 30rpx; background:#fff; border-radius:20rpx; }
|
|
.order-goods .order-item:before{ content: ''; display: block; width: 8rpx; height: 30rpx; border-radius: 8rpx; background: #00ceb9; position: absolute; left: 0; top:36rpx}
|
|
.order-goods .order-item:last-child{margin:0; }
|
|
.order-goods .order-item .item-top{position:relative; margin-bottom:20rpx; padding:15rpx 0; border-bottom:1px solid #ededed; }
|
|
.order-goods .order-item .item-top text{color:#666; font-size:24rpx; }
|
|
.order-goods .order-item .item-top text.lable{position:absolute; top:0rpx; right:0px; color:#999; display: inline-block; border:1px solid #eee; padding: 5px 15rpx; border-radius: 5rpx; }
|
|
.order-goods .order-item .item-con{display:flex; }
|
|
.order-goods .order-item .item-img image{width:200rpx; height:160rpx; }
|
|
.order-goods .order-item .item-info{padding-left:30rpx; }
|
|
.order-goods .order-item .item-info .name{margin-bottom:15rpx; font-size:36rpx; padding-bottom: 15rpx; }
|
|
.order-goods .order-item .item-info .time{margin-bottom:15rpx; color:#666; font-size:28rpx; }
|
|
.order-goods .order-item .item-info .price .sym{color:#f60; font-size:24rpx; }
|
|
.order-goods .order-item .item-info .price .cur{margin:0 1rpx; color:#f60; font-weight:700; font-size: 32rpx; }
|
|
.order-goods .order-item .item-info .price .txt{color:#666; font-size:24rpx; }
|
|
.order-goods .order-item .item-btn{position:absolute; bottom:10rpx; right:20rpx; }
|
|
.order-goods .order-item .item-btn button{display:inline-block; margin-left:15rpx; padding:15rpx 30rpx; font-size:28rpx; line-height:24rpx; border-radius:30rpx; }
|
|
.order-goods .order-item .item-btn .cancelBtn{color:#999; background:#fff; }
|
|
.order-goods .order-item .item-btn .payBtn{color:#fff; background:#00ceb9; }
|
|
/* 公共信息 无内容显示 */
|
|
.hb-noCon{display: none; /* margin-top: 20rpx; */ padding: 80rpx 0;background: #fff;}
|
|
.hb-noCon .noImg{width: 250rpx;height: 250rpx;margin: 0 auto;background: url(https://www.aitto.net/phone/public/images/2019spot/icon_noOrder.png) no-repeat;background-size: 250rpx;}
|
|
.hb-noCon .noText{color: #666;font-size: 28rpx;text-align: center;}
|
|
.hide{display: none;}
|
|
.show{display: block;}
|
|
.navContainer {
|
|
width: 100%;
|
|
height: 90rpx;
|
|
background: #fec901;
|
|
}
|
|
|
|
/* 滑动菜单栏的总内容区域 */
|
|
.uni-slidingMenu {
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
height: 90rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
/* 循环显示的菜单栏 */
|
|
.slidingMenuList {
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
display: inline-block;
|
|
font-size: 32rpx;
|
|
margin-left: 60rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.slidingMenuList:last-child {
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
/* 点击选中菜单栏时的样式 */
|
|
.active {
|
|
font-weight: 600;
|
|
font-size: 36rpx;
|
|
margin-left: 40rpx;
|
|
border-bottom: 5rpx solid #00ceb9;
|
|
box-sizing: border-box;
|
|
color: #00B8A5;
|
|
}
|
|
|
|
.swiper {
|
|
width: 750upx;
|
|
text-align: center;
|
|
}
|
|
|
|
.swiper-container {
|
|
display: flex;
|
|
/* align-items: center; */
|
|
margin-top: 16rpx;
|
|
}
|
|
|
|
.swiper-item {
|
|
position: relative;
|
|
margin-top: 0.635rem;
|
|
height: 87%;
|
|
background: #fff;
|
|
-webkit-box-shadow: 0 0.24rem 0.3rem 0 rgba(0, 0, 0, 0.08);
|
|
box-shadow: 0 0.24rem 0.3rem 0 rgba(0, 0, 0, 0.08);
|
|
border-radius: 0.2rem;
|
|
overflow: hidden;
|
|
-webkit-animation-name: fadeOut;
|
|
animation-name: fadeOut;
|
|
-webkit-animation-duration: 0.5s;
|
|
animation-duration: 0.5s;
|
|
-webkit-animation-timing-function: ease;
|
|
animation-timing-function: ease;
|
|
border: 8rpx solid #fec901;
|
|
border-top: 10rpx solid #fec901;
|
|
}
|
|
|
|
.swiper-item .level {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 48upx;
|
|
height: 360upx;
|
|
line-height: 48upx;
|
|
padding: 8upx 8upx 0px 28upx;
|
|
background: #fec901;
|
|
border-radius: 0upx 0 80upx 0upx;
|
|
font-size: 36upx;
|
|
color: #fff;
|
|
z-index: 10;
|
|
word-break: break-all;
|
|
}
|
|
</style>
|
|
|