|
|
@@ -0,0 +1,544 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <view class="content">
|
|
|
+ <view class="tabs2 tabw">
|
|
|
+ <image
|
|
|
+ class="tabs2_bk"
|
|
|
+ style="width: 100%; height: 30px"
|
|
|
+ :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/knapsack/tabBk2.png'"
|
|
|
+ mode=""
|
|
|
+ ></image>
|
|
|
+ <view class="tabs2_info">
|
|
|
+ <view :class="['tabItem', tab2Active == 1 ? 'active' : '']" @click="tabs2Click(1)">待付款</view>
|
|
|
+ <view :class="['tabItem', tab2Active == 2 ? 'active' : '']" @click="tabs2Click(2)">待发货</view>
|
|
|
+ <view :class="['tabItem', tab2Active == 3 ? 'active' : '']" @click="tabs2Click(3)">待收货</view>
|
|
|
+ <view :class="['tabItem', tab2Active == 4 ? 'active' : '']" @click="tabs2Click(4)">全部</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="list">
|
|
|
+ <view class="card" style="position: relative" v-for="(item, index) in list2">
|
|
|
+ <view class="row text" style="font-weight: 600">
|
|
|
+ {{ item.order.addTime }}
|
|
|
+ <view class="status2 type1" v-if="item.order.orderStatus == 101">待付款</view>
|
|
|
+ <view class="status2 type5" v-if="item.order.orderStatus == 103">已取消</view>
|
|
|
+ <view class="status2 type2" v-if="item.order.orderStatus == 201">待发货</view>
|
|
|
+ <view class="status2 type3" v-if="item.order.orderStatus == 301">待收货</view>
|
|
|
+ <view class="status2 type4" v-if="item.order.orderStatus == 401">已完成</view>
|
|
|
+ </view>
|
|
|
+ <view class="row text" style="font-size: 12px">订单ID：{{ item.order.orderSn }}</view>
|
|
|
+ <view class="row" style="margin-top: 10px" v-for="(item2, index2) in item.prizeList">
|
|
|
+ <view class="left">
|
|
|
+ <image class="img2" :src="item2.prizeIcon" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="right" style="font-size: 14px">
|
|
|
+ <view class="row" style="font-size: 12px">
|
|
|
+ {{ item2.prizeName }}
|
|
|
+ </view>
|
|
|
+ <view class="row" style="font-weight: 600; color: #ff2c43">
|
|
|
+ ￥：9.9
|
|
|
+ <span style="color: #000">× {{ item2.prizeNum }}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row button" style="font-size: 14px">
|
|
|
+ <span></span>
|
|
|
+ <span>
|
|
|
+ 实付金额:
|
|
|
+ <span style="font-weight: 600; color: #ff2c43">
|
|
|
+ ￥
|
|
|
+ <span style="font-size: 18px">{{ item.order.actualPrice }}</span>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </view>
|
|
|
+ <view class="row cardButtons" v-if="item.order.orderStatus == 101">
|
|
|
+ <view class="button button1" @click="cancelOrder(item)">取消订单</view>
|
|
|
+ <view class="button button2" @click="reOrder(item)">去支付</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <noData v-if="list2.length == 0" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import noData from '@/component/noData.vue'
|
|
|
+import {
|
|
|
+ packagePrizeListApi,
|
|
|
+ packageOrderListApi,
|
|
|
+ prizerRecoverApi,
|
|
|
+ cancelOrderApi,
|
|
|
+ reOrderApi,
|
|
|
+} from '@/api/knapsack.js'
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ noData,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [],
|
|
|
+ allCheck: false,
|
|
|
+ params: {
|
|
|
+ limit: 999,
|
|
|
+ page: 1,
|
|
|
+ status: 0,
|
|
|
+ sort: null,
|
|
|
+ },
|
|
|
+ list2: [],
|
|
|
+ params2: {
|
|
|
+ limit: 999,
|
|
|
+ page: 1,
|
|
|
+ },
|
|
|
+ selectIndex: [],
|
|
|
+ sortList: [
|
|
|
+ {
|
|
|
+ value: 0,
|
|
|
+ text: '按时间排序',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tab2Active: 4,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.selectIndex = []
|
|
|
+ },
|
|
|
+ onReady() {},
|
|
|
+ onLoad(option) {
|
|
|
+ this.tabs2Click(option.type)
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ list: {
|
|
|
+ deep: true,
|
|
|
+ handler(newValue, oldValue) {
|
|
|
+ // console.log(newValue, 'newValue')
|
|
|
+ let bool = true
|
|
|
+ for (var i = 0; i < newValue.length; i++) {
|
|
|
+ if (!newValue[i].check) {
|
|
|
+ bool = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.allCheck = bool
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ tabs2Click(index) {
|
|
|
+ this.tab2Active = index
|
|
|
+ let type = null
|
|
|
+ switch (index) {
|
|
|
+ case 1:
|
|
|
+ type = 101
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ type = 201
|
|
|
+ break
|
|
|
+ case 3:
|
|
|
+ type = 301
|
|
|
+ break
|
|
|
+ case 4:
|
|
|
+ type = null
|
|
|
+ break
|
|
|
+ }
|
|
|
+ this.getList2(type)
|
|
|
+ },
|
|
|
+
|
|
|
+ getList2(type) {
|
|
|
+ console.log(type)
|
|
|
+ // 获取商城订单列表
|
|
|
+ if (type) {
|
|
|
+ this.params2.status = type
|
|
|
+ } else {
|
|
|
+ this.params2.status = ''
|
|
|
+ }
|
|
|
+ packageOrderListApi(this.params2).then(res => {
|
|
|
+ console.log(res, '商城订单列表')
|
|
|
+ this.list2 = res.data.list
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 取消订单
|
|
|
+ cancelOrder(item) {
|
|
|
+ console.log(item, 'item')
|
|
|
+ let _this = this
|
|
|
+ wx.showModal({
|
|
|
+ title: '取消订单',
|
|
|
+ content: '确认取消此订单？',
|
|
|
+ success(res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ let params = {
|
|
|
+ orderId: item.order.id,
|
|
|
+ }
|
|
|
+ cancelOrderApi(params).then(res => {
|
|
|
+ console.log(res, 'res')
|
|
|
+ _this.tabs2Click(_this.tab2Active)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ })
|
|
|
+ },
|
|
|
+ reOrder(item) {
|
|
|
+ console.log(item, 'item')
|
|
|
+ // let prizeList = item.prizeList
|
|
|
+ // let ids = []
|
|
|
+ // for (var i = 0; i < prizeList.length; i++) {
|
|
|
+ // ids.push(prizeList[i].id)
|
|
|
+ // }
|
|
|
+ // getApp().globalData.orderConfirmIds = ids
|
|
|
+ // getApp().globalData.selectAddrss = null
|
|
|
+ // this.$navigateTo('/pages/orderConfirm/orderConfirm')
|
|
|
+ let params = {
|
|
|
+ orderId: item.order.id,
|
|
|
+ }
|
|
|
+ reOrderApi(params).then(res => {
|
|
|
+ console.log(res, 'res')
|
|
|
+ // _this.tabs2Click(_this.tab2Active)
|
|
|
+ this.wxPayment(res.data)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ wxPayment(data) {
|
|
|
+ let _this = this
|
|
|
+ wx.requestPayment({
|
|
|
+ timeStamp: data.timeStamp,
|
|
|
+ nonceStr: data.nonceStr,
|
|
|
+ package: data.packageValue,
|
|
|
+ signType: data.signType,
|
|
|
+ paySign: data.paySign,
|
|
|
+ success: function (res) {
|
|
|
+ console.log(res, '支付过程成功')
|
|
|
+ wx.showToast({
|
|
|
+ title: '支付成功。',
|
|
|
+ icon: 'success',
|
|
|
+ })
|
|
|
+ _this.tabs2Click(_this.tab2Active)
|
|
|
+ },
|
|
|
+ fail: function (res) {
|
|
|
+ console.log('支付过程失败')
|
|
|
+ // util.showErrorToast('支付失败');
|
|
|
+ },
|
|
|
+ complete: function (res) {
|
|
|
+ console.log('支付过程结束')
|
|
|
+ },
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.container {
|
|
|
+ background: #9ec8f9;
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ .tabs {
|
|
|
+ width: 240px;
|
|
|
+ height: 44px;
|
|
|
+ border-radius: 22px;
|
|
|
+ background: rgba(255, 255, 255, 0.8);
|
|
|
+ margin: 20px auto 10px auto;
|
|
|
+ color: #005ecc;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .tabsTransition {
|
|
|
+ width: 50%;
|
|
|
+ height: 44px;
|
|
|
+ position: absolute;
|
|
|
+
|
|
|
+ .tabsBk {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab {
|
|
|
+ width: 50%;
|
|
|
+ height: 44px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 44px;
|
|
|
+ z-index: 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabs2 {
|
|
|
+ width: 240px;
|
|
|
+ margin: 0 auto;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .tabs2_bk {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabs2_info {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 12px;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select {
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabw {
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ .tabs2_info {
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .tabItem {
|
|
|
+ color: #fff;
|
|
|
+ padding: 5px 0;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ color: #8ef1ff !important;
|
|
|
+ border-bottom: solid 2px #8ef1ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ padding: 10px;
|
|
|
+ padding-bottom: 70px;
|
|
|
+
|
|
|
+ .swipeLeft {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 40px;
|
|
|
+
|
|
|
+ .radio {
|
|
|
+ transform: scale(0.8);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #fff;
|
|
|
+ padding: 10px;
|
|
|
+
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .status2 {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ width: 44px;
|
|
|
+ height: 16px;
|
|
|
+ font-size: 12px;
|
|
|
+ border-radius: 2px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 2px 5px;
|
|
|
+ }
|
|
|
+ .type1 {
|
|
|
+ background: #ffe4e7;
|
|
|
+ color: #ff2c43;
|
|
|
+ }
|
|
|
+ .type2 {
|
|
|
+ background: #e2edfb;
|
|
|
+ color: #005ecc;
|
|
|
+ }
|
|
|
+ .type3 {
|
|
|
+ background: #00bcc8;
|
|
|
+ color: #00c537;
|
|
|
+ }
|
|
|
+ .type4 {
|
|
|
+ background: #def2e4;
|
|
|
+ color: #00bcc8;
|
|
|
+ }
|
|
|
+ .type5 {
|
|
|
+ background: #dedede;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .photo {
|
|
|
+ margin-right: 5px;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ border-radius: 2px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .img2 {
|
|
|
+ width: 75px;
|
|
|
+ height: 75px;
|
|
|
+ border-radius: 2px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .row {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text1 {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cardButtons {
|
|
|
+ padding-top: 10px;
|
|
|
+ border-top: solid 1px #eaeaea;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ .button {
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 10px;
|
|
|
+ padding: 4px 0;
|
|
|
+ width: 60px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ .button1 {
|
|
|
+ color: #ff7d12;
|
|
|
+ border: solid 1px #ff7d12;
|
|
|
+ }
|
|
|
+ .button2 {
|
|
|
+ color: #fff;
|
|
|
+ background: linear-gradient(180deg, #ffad3d 0%, #ff740a 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .buttons {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px 0;
|
|
|
+ margin-bottom: 30px;
|
|
|
+
|
|
|
+ image {
|
|
|
+ height: 42px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ background: #fff;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ padding: 10px;
|
|
|
+
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ color: #999;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .radio1 {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .radio2 {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .button {
|
|
|
+ height: 30px;
|
|
|
+ padding: 0 20px;
|
|
|
+ border-radius: 15px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 30px;
|
|
|
+ margin-left: 15px;
|
|
|
+ }
|
|
|
+ .button1 {
|
|
|
+ height: 28px;
|
|
|
+ border: solid 1px #ff8015;
|
|
|
+ color: #ff8015;
|
|
|
+ }
|
|
|
+ .button2 {
|
|
|
+ // border: solid 1px #FF8015;
|
|
|
+ background: linear-gradient(180deg, #ffad3d 0%, #ff740a 100%);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.tabs2_info >>> .uni-stat__select {
|
|
|
+ background: none;
|
|
|
+}
|
|
|
+
|
|
|
+.tabs2_info >>> .uni-select {
|
|
|
+ border: none !important;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.tabs2_info >>> .uni-icons {
|
|
|
+ font-size: 20px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.tabs2_info >>> .uni-select__input-text {
|
|
|
+ color: #8ef1ff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.tabs2_info >>> .uni-icons {
|
|
|
+ color: #8ef1ff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.tabs2_info >>> .uni-select__selector {
|
|
|
+ width: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+.tabs2_info >>> .uni-select__selector-item {
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+</style>
|
chenrong