199 lines
8.7 KiB
Vue
199 lines
8.7 KiB
Vue
<template>
|
||
<view class="waper">
|
||
<u-navbar :autoBack="true" :placeholder="true" bgColor="#FBFBFB">
|
||
<view slot='center' class="navbar_title">文创订单</view>
|
||
</u-navbar>
|
||
<view class="menu">
|
||
<view v-for="(i, index) in menu" :key="index" :class="{ active: menuIndex == index }" @click="tabMenu(index)">{{i.name}}</view>
|
||
</view>
|
||
<mescroll-uni @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :fixed="true" :up="upOption" :top="paddingTop + 'px'">
|
||
<view class="list_waper">
|
||
<navigator :url="'/pages/shop/orderDetail?id=' + i.id" hover-class="none" class="list" v-for="(i, index) in list" :key="index">
|
||
<view class="top">
|
||
<view>{{i.orderItemList[0].storeName}}</view>
|
||
<view :class="{active: i.status > 0}">{{i.statusText}}</view>
|
||
</view>
|
||
<view class="center" v-for="(item, itemIndex) in i.orderItemList" :itemIndex="itemIndex">
|
||
<view class="img">
|
||
<image :src="$utils.setImgUrl(item.goodsImage)" mode=""></image>
|
||
</view>
|
||
<view class="text">
|
||
<view class="title">{{item.goodsTitle}}</view>
|
||
<view class="tag">
|
||
<view v-if="item.goodsSkuText">
|
||
<text v-for="(k, kIndex) in item.goodsSkuText.split(',')" :key="kIndex">{{k}}</text>
|
||
</view>
|
||
<view v-else></view>
|
||
<view>X{{item.goodsNum}}</view>
|
||
</view>
|
||
<view class="money">总价：￥{{item.goodsPrice}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view>查看详情</view>
|
||
<template v-if="i.status == 0">
|
||
<view @click.stop="cancelOrder(i)">取消订单</view>
|
||
<view class="active" @click.stop="payOrder(i)">立即支付</view>
|
||
</template>
|
||
</view>
|
||
</navigator>
|
||
</view>
|
||
</mescroll-uni>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
||
export default {
|
||
mixins: [MescrollMixin],
|
||
data () {
|
||
return {
|
||
paddingTop: 0,
|
||
menu: [
|
||
{ name: '全部', key: '' },
|
||
{ name: '待付款', key: '1' },
|
||
{ name: '待发货', key: '2' },
|
||
{ name: '已完成', key: '3' },
|
||
{ name: '退款', key: '4' }
|
||
],
|
||
list: [],
|
||
downOption: { auto: false },
|
||
menuIndex: 0
|
||
}
|
||
},
|
||
onLoad (oiptions) {
|
||
if (oiptions.index) this.menuIndex = Number(oiptions.index);
|
||
this.paddingTop = this.$paddingTop + uni.upx2px(94);
|
||
},
|
||
onShow () {
|
||
this.list = [];
|
||
this.mescroll && this.mescroll.resetUpScroll();
|
||
},
|
||
methods: {
|
||
async payOrder (item) {
|
||
uni.showLoading({ mask: true })
|
||
let info = await this.$shop.getWcscOrderSession({ orderId: item.id });
|
||
if (info.code == 200) {
|
||
let patInfo = JSON.parse(info.msg);
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: patInfo.timeStamp,
|
||
nonceStr: patInfo.nonceStr,
|
||
package: patInfo.packageValue,
|
||
signType: patInfo.signType,
|
||
paySign: patInfo.paySign,
|
||
success: (res) => {
|
||
uni.hideLoading();
|
||
this.showSuccess = true;
|
||
this.list = [];
|
||
this.mescroll.resetUpScroll();
|
||
},
|
||
fail: function (err) {
|
||
uni.hideLoading();
|
||
uni.showToast({ mask: true, title: '支付取消', icon: 'none' })
|
||
}
|
||
});
|
||
} else {
|
||
uni.hideLoading();
|
||
uni.showToast({ mask: true, title: info.msg, icon: 'none' });
|
||
}
|
||
},
|
||
async cancelOrder (item) {
|
||
let info = await this.$shop.cancleOrder({ orderId: item.id, storeId: item.orderItemList[0].storeId })
|
||
uni.showToast({ mask: true, title: '操作成功', icon: 'success' });
|
||
this.list = [];
|
||
this.mescroll.resetUpScroll();
|
||
},
|
||
tabMenu (index) {
|
||
this.menuIndex = index;
|
||
this.list = [];
|
||
this.mescroll.resetUpScroll();
|
||
},
|
||
async upCallback (page) {
|
||
let obj = { pageNum: page.num, pageSize: page.size };
|
||
switch (this.menuIndex) {
|
||
case 1:
|
||
obj.status = '0';
|
||
break;
|
||
case 2:
|
||
obj.status = '1';
|
||
obj.dispatchStatus = '0';
|
||
obj.refundStatus = '0';
|
||
break;
|
||
case 3:
|
||
obj.status = '2';
|
||
break;
|
||
case 4:
|
||
obj.status = '1';
|
||
obj.refundStatus = '1';
|
||
break;
|
||
}
|
||
let info = await this.$shop.getOrderList(obj);
|
||
if (page.num == 1) this.list = [];
|
||
this.list = this.list.concat(info.rows);
|
||
this.mescroll.endBySize(info.rows.length, info.total);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
|
||
.menu{
|
||
width: 100%; height: 94rpx; box-sizing: border-box; padding: 0 32rpx; display: flex; justify-content: space-between; align-items: center;
|
||
view{
|
||
font-size: 32rpx; color: rgba(0,0,0,0.85); line-height: 46rpx; height: 46rpx;
|
||
&.active{
|
||
position: relative; font-weight: 500; color: #03AE80;
|
||
&::after{ content: ""; width: 30rpx; height: 4rpx; background: #03AE80; border-radius: 12rpx; position: absolute; left: 50%; transform: translateX(-50%); top: 62rpx; }
|
||
}
|
||
}
|
||
}
|
||
.list_waper{
|
||
width: 100%; box-sizing: border-box; padding: 0 24rpx 24rpx;
|
||
.list{
|
||
width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 32rpx 24rpx; margin-bottom: 20rpx;
|
||
&:last-child{ margin-bottom: 0; }
|
||
.top{
|
||
width: 100%; height: 46rpx; box-sizing: border-box; padding-right: 90rpx; position: relative;
|
||
view{
|
||
&:nth-child(1){ color: rgba(0,0,0,0.85); font-size: 32rpx; font-weight: 500; }
|
||
&:nth-child(2){
|
||
font-size: 28rpx; color: rgba(0,0,0,0.45); position: absolute; right: 0; top: 50%; transform: translateY(-50%);
|
||
&.active{ color: #FF5833; }
|
||
}
|
||
}
|
||
}
|
||
.center{
|
||
width: 100%; margin-top: 26rpx; box-sizing: border-box; padding-left: 190rpx; min-height: 170rpx; position: relative;
|
||
.img{
|
||
width: 170rpx; height: 170rpx; position: absolute; left: 0; top: 0;
|
||
image{ border-radius: 10rpx; }
|
||
}
|
||
.text{
|
||
width: 100%;
|
||
.title{ line-height: 33rpx; color: rgba(0,0,0,0.85); font-size: 28rpx; font-weight: 500; }
|
||
.tag{
|
||
width: 100%; margin-top: 20rpx; display: flex; justify-content: space-between; align-items: center;
|
||
view{
|
||
&:nth-child(1){
|
||
display: flex; align-items: center;
|
||
text{ background: #F4F4F4; border-radius: 2rpx; height: 48rpx; line-height: 48rpx; padding: 0 24rpx; color: rgba(0,0,0,0.65); font-size: 24rpx; }
|
||
}
|
||
&:nth-child(2){ color: rgba(0,0,0,0.65); font-size: 24rpx; }
|
||
}
|
||
}
|
||
.money{ margin-top: 30rpx; text-align: right; color: rgba(0,0,0,0.85); font-size: 28rpx; line-height: 33rpx; }
|
||
}
|
||
}
|
||
.bottom{
|
||
width: 100%; margin-top: 24rpx; border-top: 1rpx solid rgba(0,0,0,0.1); padding-top: 24rpx; display: flex; align-items: center; justify-content: flex-end;
|
||
view{
|
||
width: 128rpx; height: 60rpx; border-radius: 10rpx; border: 2rpx solid #A2A2A4; line-height: 60rpx; text-align: center; color: rgba(0,0,0,0.45); font-size: 24rpx; margin-right: 32rpx;
|
||
&:last-child{ margin-right: 0; }
|
||
&.active{ border-color: #FF5833; color: #FF5833; }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |