|
|
<template> <view> <mescroll-uni ref="mescrollRef" @init="mescrollInit" height="100%" top="0" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback"> <!-- 数据列表 --> <view> <block v-for="(item, index) in assetsFlow" :key="index"> <view class="margin-top bg-white"> <view class="flex justify-between align-start solid-bottom padding-tb-sm padding-lr" @tap="goDetails(item)"> <!-- <image src="@/static/tu.png" mode="aspectFill" style="width: 150rpx; height: 150rpx;"></image> --> <view class='cu-avatar xxl radius' :style="{'background-image':'url('+item.goods.cover+')'}"> <view class='cu-tag badge padding' :style="{'background-color':item.state_text.bg_color,'color':item.state_text.color}">{{item.state_text.text}}</view> </view> <view class="flex-sub padding-left-sm"> <view class="bref-box margin-top-xs"> {{item.goods.name}} </view> <text class="block margin-top-sm text-gray text-sm">数量 <text class="margin-left margin-right-xs text-gray">x</text>{{item.number}}</text> <view class="flex justify-between margin-top-sm"> <view class="text-red text-price text-lg"> <amount :value="Number(item.selling_price || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount> </view> <view> <button v-if="item.state==1" class="cu-btn bg-orange round margin-left-sm" @tap.stop="$routerGo('/pages/order/confirm-order?goods_id='+item.goods_id+'&goods_specs_id='+item.goods_specs_id)">立即付款</button> <button v-if="item.state==2" class="cu-btn bg-green round margin-left-sm" @tap="$routerGo('/pages/order/order-details?orderid='+item.id)">立即使用</button> <!-- <button v-if="item.state==2" class="cu-btn line-black round margin-left-sm" @tap="orderClick(item,'modalShowConfirm')">确认收货</button> --> </view> </view> </view> </view> <view class="padding-lr padding-tb-sm order-bottom"> <text class="cuIcon-fold bg-white order-ico"></text> <view class="flex justify-between align-center"> <view style="color: #777777;">{{item.created_at_text}}</view> <view class="flex align-center justify-end"> 实付： <view class="text-price text-red text-xl"> <amount :value="Number(item.amount || 0)" :is-round-up="false" :precision="2" :duration="800" transition></amount> </view> </view> </view> </view> </view> </block> </view>
</mescroll-uni>
<!-- 取消订单 --> <my-uni-modal title="取消订单" content="您确定要取消该订单吗？" btnText="取消订单" :modalShow="modalShowCancel" @determine="cancelDetermine" @hideModal="modalShowCancel=false" />
<!-- 删除订单 --> <my-uni-modal title="删除订单" content="您确定要删除该订单吗？" btnText="删除订单" :modalShow="modalShowDel" @determine="delDetermine" @hideModal="modalShowDel=false" />
<!-- 确认收货 --> <my-uni-modal title="确认收货" content="请确认您已经收到商品在点击确认收货,以免造成损失." btnText="确认收货" :modalShow="modalShowConfirm" @determine="confirmDetermine" @hideModal="modalShowConfirm=false" /> </view></template>
<script> import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js"; export default { mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
data() { return { modalShowCancel: false, //取消订单
modalShowDel: false, //删除订单
modalShowConfirm: false, //确认收货
orderItem: {},
downOption: { auto: false }, upOption: { auto: false }, assetsFlow: [], page: 1 } }, props: { i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
type: Number, default () { return 0 } }, tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
type: Array, default () { return [] } } }, methods: { goDetails(item) { if(item.state==1) { this.$routerGo('/pages/order/unpay-details?orderid='+item.id) }else { this.$routerGo('/pages/order/order-details?orderid='+item.id) } }, getUserOrder(pagenum) { this.$http(this.API.API_USERORDER, {state: this.tabs[this.index].type,page: pagenum,per_page: 20}).then(res => { if(res.code == 0) { if(pagenum == 1) this.assetsFlow = [] this.mescroll.endSuccess(res.data.items.length, res.data.has_more_page); this.assetsFlow=this.assetsFlow.concat(res.data.items); console.log(this.assetsFlow) } }).catch(err => { this.mescroll.endErr(); }); }, orderClick(item, type) { this.orderItem = item this[type] = true },
//取消订单
cancelDetermine() {
},
//删除订单
delDetermine() {
},
//确认收货
confirmDetermine() { this.$toast('已成功收货') },
/*下拉刷新的回调 */ downCallback() { // 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
this.mescroll.resetUpScroll() }, /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */ upCallback(page) { this.getUserOrder(page.num) } }, created() { this.getUserOrder() } }</script>
<style lang="scss" scoped> .bref-box { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.order-bottom { position: relative;
.order-ico { position: absolute; right: 50rpx; top: -19rpx; color: rgba(0, 0, 0, 0.1) } } </style>
|
