|
|
@@ -0,0 +1,1015 @@
|
|
|
+<template>
|
|
|
+ <view class="container" :style="{ paddingTop: 40 + 'px' }">
|
|
|
+ <tui-skeleton
|
|
|
+ v-if="skeletonShow"
|
|
|
+ backgroundColor="#fafafa"
|
|
|
+ borderRadius="10rpx"
|
|
|
+ :isLoading="true"
|
|
|
+ :loadingType="5"
|
|
|
+ />
|
|
|
+ <template v-else>
|
|
|
+ <view class="order-section-top">
|
|
|
+ <scroll-view scroll-x scroll-with-animation class="tab-view" :scroll-left="scrollLeft">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in orderTabBar"
|
|
|
+ :key="index"
|
|
|
+ class="tab-bar-item"
|
|
|
+ :class="[currentTab == index ? 'active' : '']"
|
|
|
+ :data-current="index"
|
|
|
+ @tap.stop="onClickTab"
|
|
|
+ >
|
|
|
+ <text class="tab-bar-title">{{ item.text }}</text>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <swiper
|
|
|
+ class="tab-content"
|
|
|
+ :current="currentTab"
|
|
|
+ duration="80"
|
|
|
+ @animationfinish="onChange"
|
|
|
+ :style="{ height: winHeight + 'px' }"
|
|
|
+ >
|
|
|
+ <swiper-item v-for="(tabItem, index) in orderTabBar" :key="index" @touchmove.stop="">
|
|
|
+ <scroll-view
|
|
|
+ scroll-y
|
|
|
+ class="scoll-y tui-skeleton"
|
|
|
+ @scrolltolower="scrolltolower"
|
|
|
+ :style="{ height: winHeight + 'px' }"
|
|
|
+ >
|
|
|
+ <view :class="{ 'tui-order-list': scrollTop >= 0 }" class="tui-skeleton clearfix">
|
|
|
+ <!-- 空白页 -->
|
|
|
+ <empty
|
|
|
+ v-if="tabItem.loaded === true && tabItem.orderList.length === 0"
|
|
|
+ :typeIndex="currentTab"
|
|
|
+ :navbarHeight="navbarHeight"
|
|
|
+ />
|
|
|
+ <!-- 列表 -->
|
|
|
+ <view v-else class="tui-order-content">
|
|
|
+ <view
|
|
|
+ class="tui-order-item"
|
|
|
+ v-for="(order, orderIndex) in tabItem.orderList"
|
|
|
+ :key="orderIndex"
|
|
|
+ @click.stop="detail(order)"
|
|
|
+ >
|
|
|
+ <view class="order-title">
|
|
|
+ <view class="order-title-name">
|
|
|
+ <text>{{ order.clubName ? order.clubName : '' }}</text>
|
|
|
+ <text
|
|
|
+ class="tags"
|
|
|
+ v-if="order.svipUserFlag == 0 && order.userIdentity === 2"
|
|
|
+ >VIP</text
|
|
|
+ >
|
|
|
+ <text class="tags sv" v-if="order.svipUserFlag == 1">SVIP</text>
|
|
|
+ <view class="name" v-if="screenTab === 3"
|
|
|
+ >【 {{ order.serviceName ? order.serviceName : '' }} 】</view
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="order-title-t">
|
|
|
+ <view class="order-title-tip tui-skeleton-fillet">
|
|
|
+ {{ order.status | statusFilters }}
|
|
|
+ </view>
|
|
|
+ <view class="bage ebate" v-if="order.rebateFlag == 1">返佣</view>
|
|
|
+ <text
|
|
|
+ class="bage buss tui-skeleton-fillet"
|
|
|
+ v-if="order.orderSubmitType == 3 || order.orderSubmitType == 4"
|
|
|
+ >
|
|
|
+ 协销
|
|
|
+ </text>
|
|
|
+ <text
|
|
|
+ class="bage auto tui-skeleton-fillet"
|
|
|
+ v-if="
|
|
|
+ order.orderSubmitType == 0 ||
|
|
|
+ order.orderSubmitType == 1 ||
|
|
|
+ order.orderSubmitType == 2
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 自主
|
|
|
+ </text>
|
|
|
+ <image
|
|
|
+ class="bage-icon"
|
|
|
+ src="https://static.caimei365.com/app/img/icon/icon-type@3x.png"
|
|
|
+ mode="widthFix"
|
|
|
+ v-if="order.secondHandOrderFlag == 1"
|
|
|
+ >
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ <view class="order-title-b">
|
|
|
+ <view class="order-title-btxt num tui-skeleton-fillet">
|
|
|
+ 订单编号：{{ order.shopOrderNo }}({{ order.shopOrderId }})
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="order-title-b">
|
|
|
+ <view class="order-title-btxt tui-skeleton-fillet">
|
|
|
+ 下单时间：{{ order.orderTime }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="goods-title">
|
|
|
+ <view v-if="order.shopPromotion" class="floor-item-act">
|
|
|
+ <view class="floor-tags">{{ order.shopPromotion.name }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="title-text tui-skeleton-fillet">{{ order.shopName }}</view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="goods-item"
|
|
|
+ v-for="(pros, prosIndex) in order.orderProductList"
|
|
|
+ :key="prosIndex"
|
|
|
+ >
|
|
|
+ <view class="goods-pros-t">
|
|
|
+ <view class="pros-img tui-skeleton-fillet">
|
|
|
+ <image :src="pros.image" alt="" />
|
|
|
+ <text
|
|
|
+ class="tips"
|
|
|
+ v-if="pros.giftType == 2 || pros.giftType == 1"
|
|
|
+ >赠品</text
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="pros-product clearfix">
|
|
|
+ <view class="producttitle tui-skeleton-fillet">{{
|
|
|
+ pros.name
|
|
|
+ }}</view>
|
|
|
+ <view
|
|
|
+ class="productspec tui-skeleton-fillet"
|
|
|
+ v-if="pros.productCategory != 2"
|
|
|
+ >
|
|
|
+ 规格:{{ pros.productUnit ? pros.productUnit : '' }}
|
|
|
+ </view>
|
|
|
+ <view class="productprice">
|
|
|
+ <view
|
|
|
+ class="price tui-skeleton-fillet"
|
|
|
+ :class="
|
|
|
+ pros.svipPriceFlag == 1 ||
|
|
|
+ PromotionsFormat(pros.productPromotion)
|
|
|
+ ? 'none'
|
|
|
+ : ''
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <text>￥{{ pros.price | NumFormat }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="count tui-skeleton-fillet">
|
|
|
+ <text class="small">x</text>{{ pros.num }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="floor-item-act">
|
|
|
+ <template v-if="pros.productPromotion">
|
|
|
+ <view
|
|
|
+ v-if="PromotionsFormat(pros.productPromotion)"
|
|
|
+ class="floor-tags"
|
|
|
+ @click.stop="clickPopupShow(pros.productPromotion)"
|
|
|
+ >
|
|
|
+ {{ pros.productPromotion.name }}
|
|
|
+ <text
|
|
|
+ v-if="
|
|
|
+ pros.productPromotion != null &&
|
|
|
+ pros.productPromotion.type != 3
|
|
|
+ "
|
|
|
+ >
|
|
|
+ :￥{{
|
|
|
+ pros.productPromotion == null
|
|
|
+ ? '0.00'
|
|
|
+ : pros.productPromotion.touchPrice
|
|
|
+ | NumFormat
|
|
|
+ }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ v-else-if="pros.productPromotion.type != 3"
|
|
|
+ class="floor-tags"
|
|
|
+ @click.stop="clickPopupShow(pros.productPromotion)"
|
|
|
+ >{{ pros.productPromotion.name }}</view
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <template v-if="pros.svipPriceFlag == 1">
|
|
|
+ <view class="svip-tags">
|
|
|
+ <view class="tags">SVIP</view>
|
|
|
+ <view class="price">{{ pros.svipPriceTag }}</view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="order-footer">
|
|
|
+ <!-- <view class="order-footer-top" v-if="order.discountFee != 0"
|
|
|
+ >经理折扣：¥{{ order.discountFee | NumFormat }}</view
|
|
|
+ > -->
|
|
|
+ <view class="order-footer-bot">
|
|
|
+ <view class="count tui-skeleton-fillet"
|
|
|
+ >共{{ order.itemCount }}件商品</view
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ class="money tui-skeleton-fillet"
|
|
|
+ v-if="order.status == 31 || order.status == 32 || order.status == 33"
|
|
|
+ >
|
|
|
+ 已支付：<label style="color:#f94b4b ;"
|
|
|
+ >¥{{ order.receiptAmount | NumFormat }}</label
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="money tui-skeleton-fillet" v-else
|
|
|
+ >待付总额：<label style="color:#f94b4b ;">
|
|
|
+ ¥{{ order.obligation | NumFormat }}</label
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 底部button -->
|
|
|
+<!-- <cm-list-button
|
|
|
+ ref="orderButton"
|
|
|
+ v-if="screenTab != 3"
|
|
|
+ :status="order.status"
|
|
|
+ :order="order"
|
|
|
+ :shopOrderId="order.shopOrderId"
|
|
|
+ :rechargeGoods="order.rechargeGoods"
|
|
|
+ :userId="order.userId"
|
|
|
+ :secondHandOrderFlag="order.secondHandOrderFlag"
|
|
|
+ @buttonConfirm="handButtonConfirm"
|
|
|
+ />-->
|
|
|
+ </view>
|
|
|
+ <!--加载loadding-->
|
|
|
+ <tui-loadmore :visible="loadding" :index="3" type="black"/>
|
|
|
+ <tui-nomore
|
|
|
+ :visible="!pullUpOn"
|
|
|
+ :backgroundColor="'#ffffff'"
|
|
|
+ :text="nomoreText"
|
|
|
+ />
|
|
|
+ <!--加载loadding-->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </template>
|
|
|
+ <!-- 分享弹窗 -->
|
|
|
+ <cm-share-popup
|
|
|
+ :shopOrderId="handleShopOrderId"
|
|
|
+ :shareType="isShareType"
|
|
|
+ v-if="isShareModal"
|
|
|
+ @shareConfirm="onShareAppMessage"
|
|
|
+ />
|
|
|
+ <!-- 透明模态层 -->
|
|
|
+ <modal-layer v-if="isModalLayer" />
|
|
|
+ <view class="aganBj" v-show="showAgan">
|
|
|
+ <view class="alertAgan">
|
|
|
+ <text class="title">{{ promptitle }}</text>
|
|
|
+ <view class="goods">
|
|
|
+ <view class="list" v-for="(item, index) in failList" :key="index">
|
|
|
+ <image class="image-left" :src="item.image"></image>
|
|
|
+ <view class="name-right">{{ item.name }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="BtnAll">
|
|
|
+ <view class="closebtn btn" @click="showAgan = false">取消</view>
|
|
|
+ <view class="cancel btn" @click="handleAddAgian">确定</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 筛选抽屉 -->
|
|
|
+ <cm-orderDrawer
|
|
|
+ ref="screendrawer"
|
|
|
+ v-if="rightDrawer"
|
|
|
+ :rightDrawer="rightDrawer"
|
|
|
+ @handSearchConfirm="handSearchConfirmData"
|
|
|
+ />
|
|
|
+ <!-- 提示弹窗 -->
|
|
|
+ <tui-modal
|
|
|
+ :show="modal"
|
|
|
+ @click="handleClick"
|
|
|
+ :content="contentModalText"
|
|
|
+ :button="modalButton"
|
|
|
+ color="#333"
|
|
|
+ :size="32"
|
|
|
+ shape="circle"
|
|
|
+ :maskClosable="false"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapState, mapMutations } from 'vuex'
|
|
|
+import headerBack from '@/components/cm-module/headerNavbar/header-back' //自定义顶部导航
|
|
|
+import modalLayer from '@/components/modal-layer'
|
|
|
+import empty from '@/components/empty'
|
|
|
+import cmListButton from './components/cm-list-button' //操作按钮
|
|
|
+import cmSharePopup from './components/cm-share-popup' //分享弹窗
|
|
|
+import cmOrderDrawer from '../components/cm-order-drawer' //筛选抽屉
|
|
|
+import orderMixins from './mixins/orderMixins.js'
|
|
|
+
|
|
|
+export default {
|
|
|
+ mixins: [orderMixins],
|
|
|
+ components: {
|
|
|
+ headerBack,
|
|
|
+ empty,
|
|
|
+ modalLayer,
|
|
|
+ cmListButton,
|
|
|
+ cmSharePopup,
|
|
|
+ cmOrderDrawer
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ orderTabBar: [
|
|
|
+ { listType: 0, text: '全部订单', orderList: [] },
|
|
|
+ { listType: 1, text: '待确认', orderList: [] },
|
|
|
+ { listType: 2, text: '待付款', orderList: [] },
|
|
|
+ { listType: 3, text: '待发货', orderList: [] },
|
|
|
+ { listType: 4, text: '已发货', orderList: [] },
|
|
|
+ { listType: 5, text: '退货/款', orderList: [] }
|
|
|
+ ],
|
|
|
+ screenTabBar: [
|
|
|
+ { type: 0, text: '全部订单(我的)' },
|
|
|
+ { type: 1, text: '自主订单(我的)' },
|
|
|
+ { type: 2, text: '协销订单(我的)' }
|
|
|
+ ],
|
|
|
+ headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
|
|
|
+ systeminfo: this.setSysteminfo(), //获取设备信息
|
|
|
+ nvabarData: {
|
|
|
+ //顶部自定义导航
|
|
|
+ showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
|
|
|
+ showSearch: 1,
|
|
|
+ title: ' ' // 导航栏中间的标题
|
|
|
+ },
|
|
|
+ CustomBar: this.CustomBar, // 顶部导航栏高度
|
|
|
+ winHeight: '', //窗口高度
|
|
|
+ currentTab: 0, //预设当前项的值
|
|
|
+ screenTab: 0, //筛选预设当前项的值
|
|
|
+ scrollLeft: 0, //tab标题的滚动条位置
|
|
|
+ orderData: [],
|
|
|
+ listQuery: {
|
|
|
+ pageNum: 1, //页数
|
|
|
+ pageSize: 10, //条数
|
|
|
+ groupServiceId: 0,
|
|
|
+ serviceProviderId: 0, //协销用户ID
|
|
|
+ listType: 0,
|
|
|
+ orderSubmitType: 3
|
|
|
+ },
|
|
|
+ scrollTop: 0,
|
|
|
+ skeletonShow: true,
|
|
|
+ isClickChange: false,
|
|
|
+ isShareModal: false, //控制分享弹窗
|
|
|
+ isShareType: 2,
|
|
|
+ isModalLayer: false,
|
|
|
+ loadding: false,
|
|
|
+ pullUpOn: true,
|
|
|
+ hasNextPage: false,
|
|
|
+ pullFlag: true,
|
|
|
+ navbarHeight: '',
|
|
|
+ nomoreText: '上拉显示更多',
|
|
|
+ showAgan: false,
|
|
|
+ failList: [], // 再来一单可购买商品
|
|
|
+ promptitle: '',
|
|
|
+ userId: 0,
|
|
|
+ manager: 0,
|
|
|
+ rightDrawer: false ,//控制筛选抽屉
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.getHeaderTopHeight() //设置自定义导航高度
|
|
|
+ this.initGetStotage(option)
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['isManage'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async initGetStotage(option) {
|
|
|
+ const userInfo = await this.$api.getStorage()
|
|
|
+ this.userId = userInfo.userId ? userInfo.userId : 0
|
|
|
+ this.manager = userInfo.manager ? userInfo.manager : 0
|
|
|
+ this.listQuery.groupServiceId = option.groupServiceId
|
|
|
+ this.listQuery.serviceProviderId = userInfo.serviceProviderId
|
|
|
+ this.getOrderDatainit(this.currentTab)
|
|
|
+ },
|
|
|
+ // 滚动切换标签样式
|
|
|
+ onChange(e) {
|
|
|
+ let index = e.target.current || e.detail.current
|
|
|
+ if (this.isClickChange) {
|
|
|
+ this.currentTab = index
|
|
|
+ this.isClickChange = false
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.isClickChange = false
|
|
|
+ this.currentTab = index
|
|
|
+ this.listQuery.listType = index
|
|
|
+ this.checkCor()
|
|
|
+ this.pullUpOn = true //切换时隐藏
|
|
|
+ this.loadding = false //切换时隐藏
|
|
|
+ this.nomoreText = ''
|
|
|
+ this.getOrderDatainit(this.currentTab, 'tabChange')
|
|
|
+ },
|
|
|
+ // 点击标题切换当前页时改变样式
|
|
|
+ onClickTab(e) {
|
|
|
+ let tabIndex = e.target.dataset.current || e.currentTarget.dataset.current
|
|
|
+ if (this.currentTab === tabIndex) {
|
|
|
+ return false
|
|
|
+ } else {
|
|
|
+ this.isClickChange = true
|
|
|
+ this.currentTab = tabIndex
|
|
|
+ this.listQuery.listType = tabIndex
|
|
|
+ this.pullUpOn = true //切换时隐藏
|
|
|
+ this.loadding = false //切换时隐藏
|
|
|
+ this.getOrderDatainit(this.currentTab)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onClickScreenTab(index) {
|
|
|
+ this.screenTab = index
|
|
|
+ this.listQuery.orderSubmitType = index
|
|
|
+ this.pullUpOn = true //切换时隐藏
|
|
|
+ this.loadding = false //切换时隐藏
|
|
|
+ this.nomoreText = ''
|
|
|
+ this.getOrderDatainit(this.currentTab)
|
|
|
+ },
|
|
|
+ //判断当前滚动超过一屏时，设置tab标题滚动条。
|
|
|
+ checkCor: function() {
|
|
|
+ if (this.currentTab > 3) {
|
|
|
+ //这里距离按实际计算
|
|
|
+ this.scrollLeft = 300
|
|
|
+ } else {
|
|
|
+ this.scrollLeft = 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getOrderDatainit(index, source) {
|
|
|
+ try {
|
|
|
+ this.listQuery.pageNum = 1
|
|
|
+ let orderItem = this.orderTabBar[index]
|
|
|
+ if (source === 'tabChange' && orderItem.loaded === true) {
|
|
|
+ //tab切换只有第一次需要加载数据
|
|
|
+ return
|
|
|
+ }
|
|
|
+ //loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
|
|
|
+ const res = await this.SellerService.GetSellerOrderList(this.listQuery)
|
|
|
+ const data = res.data
|
|
|
+ if (data.list && data.list.length > 0) {
|
|
|
+ orderItem.orderList = []
|
|
|
+ data.list.forEach(item => {
|
|
|
+ orderItem.orderList.push(item)
|
|
|
+ })
|
|
|
+ this.hasNextPage = data.hasNextPage
|
|
|
+ if (this.hasNextPage) {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
+ } else {
|
|
|
+ if (orderItem.orderList.length < 2) {
|
|
|
+ this.pullUpOn = true
|
|
|
+ } else {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$set(orderItem, 'loaded', true)
|
|
|
+ orderItem.orderList = []
|
|
|
+ }
|
|
|
+ this.skeletonShow = false
|
|
|
+ } catch (error) {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //上拉加载
|
|
|
+ async getOnReachBottomData(index) {
|
|
|
+ try {
|
|
|
+ this.listQuery.pageNum += 1
|
|
|
+ const res = await this.SellerService.GetSellerOrderList(this.listQuery)
|
|
|
+ const data = res.data
|
|
|
+ const orderItem = this.orderTabBar[index]
|
|
|
+ orderItem.orderList = orderItem.orderList.concat(data.list)
|
|
|
+ this.hasNextPage = data.hasNextPage
|
|
|
+ this.pullFlag = false // 防上拉暴滑
|
|
|
+ setTimeout(() => {
|
|
|
+ this.pullFlag = true
|
|
|
+ }, 500)
|
|
|
+ if (this.hasNextPage) {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
+ } else {
|
|
|
+ this.loadding = false
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取点击
|
|
|
+ handButtonConfirm(data) {
|
|
|
+ console.log('data',data)
|
|
|
+ this.handleShopOrderId = data.shopOrderId
|
|
|
+ switch (data.type) {
|
|
|
+ case 'cancel': //取消订单
|
|
|
+ this.modal = true
|
|
|
+ this.contentModalText = '确认取消该订单吗？'
|
|
|
+ this.handleModelEven = 1
|
|
|
+ break
|
|
|
+ case 'delete': //删除订单
|
|
|
+ this.modal = true
|
|
|
+ this.contentModalText = '确认删除该订单吗？'
|
|
|
+ this.handleModelEven = 2
|
|
|
+ break
|
|
|
+ case 'confirm': // 确认订单
|
|
|
+ this.modal = true
|
|
|
+ this.contentModalText = '确认此订单吗？'
|
|
|
+ this.handleModelEven = 3
|
|
|
+ break
|
|
|
+ case 'again':
|
|
|
+ this.handOrderAgain(data.shopOrderId)
|
|
|
+ break
|
|
|
+ case 'query':
|
|
|
+ this.isModalLayer = true
|
|
|
+ this.$api.navigateTo('/pages/user/order/order-logistics?shopOrderId=' + data.shopOrderId)
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //确定筛选
|
|
|
+ handSearchConfirmData(data) {
|
|
|
+ this.listQuery.groupServiceId = data.serviceProviderId
|
|
|
+ this.getOrderDatainit(this.currentTab)
|
|
|
+ },
|
|
|
+ scrolltolower() {
|
|
|
+ if (this.hasNextPage) {
|
|
|
+ this.loadding = true
|
|
|
+ this.pullUpOn = true
|
|
|
+ this.getOnReachBottomData(this.currentTab)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ detail(order) {
|
|
|
+ //订单详情跳转
|
|
|
+ this.isModalLayer = true
|
|
|
+ this.$api.navigateTo(
|
|
|
+ `/pages/seller/order/order-team-details?listType=${this.currentTab}&shopOrderId=${
|
|
|
+ order.shopOrderId
|
|
|
+ }&userId=${order.userId}`
|
|
|
+ )
|
|
|
+ },
|
|
|
+ handlSearchPath() {
|
|
|
+ this.$api.navigateTo('/pages/seller/order/search-order')
|
|
|
+ },
|
|
|
+
|
|
|
+ PromotionsFormat(promo) {
|
|
|
+ //促销活动类型数据处理
|
|
|
+ if (promo != null) {
|
|
|
+ if (promo.type == 1 && promo.mode == 1) {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ getHeaderTopHeight() {
|
|
|
+ // 状态栏高度
|
|
|
+ let self = this
|
|
|
+ let statusBarHeight = this.systeminfo.statusBarHeight
|
|
|
+ let headerPosi = this.headerBtnPosi
|
|
|
+ let btnPosi = {
|
|
|
+ // 胶囊实际位置，坐标信息不是左上角原点
|
|
|
+ height: headerPosi.height,
|
|
|
+ width: headerPosi.width,
|
|
|
+ // 胶囊top - 状态栏高度
|
|
|
+ top: headerPosi.top - statusBarHeight,
|
|
|
+ // 胶囊bottom - 胶囊height - 状态栏height （现胶囊bottom 为距离导航栏底部的长度）
|
|
|
+ bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,
|
|
|
+ // 屏幕宽度 - 胶囊right
|
|
|
+ right: this.systeminfo.screenWidth - headerPosi.right
|
|
|
+ }
|
|
|
+ this.navbarHeight = headerPosi.bottom + btnPosi.bottom // 原胶囊bottom + 现胶囊bottom
|
|
|
+ // 高度自适应
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: function(res) {
|
|
|
+ let calc = res.windowHeight
|
|
|
+ self.winHeight = calc
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setHeaderBtnPosi() {
|
|
|
+ // 获得胶囊按钮位置信息
|
|
|
+ let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
|
|
|
+ return headerBtnPosi
|
|
|
+ },
|
|
|
+ setSysteminfo() {
|
|
|
+ let systeminfo
|
|
|
+ uni.getSystemInfo({
|
|
|
+ // 获取设备信息
|
|
|
+ success: res => {
|
|
|
+ systeminfo = res
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return systeminfo
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPageScroll(e) {
|
|
|
+ this.scrollTop = e.scrollTop
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.isModalLayer = false
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+page {
|
|
|
+ background-color: #ffffff;
|
|
|
+}
|
|
|
+/*tabbar start*/
|
|
|
+::-webkit-scrollbar {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ color: transparent;
|
|
|
+}
|
|
|
+.order-section-top {
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 99;
|
|
|
+ background: #ffffff;
|
|
|
+}
|
|
|
+.tab-view::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ border-bottom: 1rpx solid #eaeef1;
|
|
|
+ -webkit-transform: scaleY(0.5);
|
|
|
+ transform: scaleY(0.5);
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+.tab-view {
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #fff;
|
|
|
+ white-space: nowrap;
|
|
|
+ border-top: 1px solid #f7f7f7;
|
|
|
+}
|
|
|
+.tab-bar-item {
|
|
|
+ padding: 0;
|
|
|
+ height: 80rpx;
|
|
|
+ min-width: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ margin: 0 28rpx;
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ &.active {
|
|
|
+ border-bottom: 6rpx solid $color-system;
|
|
|
+ }
|
|
|
+ .tab-bar-title {
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ }
|
|
|
+ &.active .tab-bar-title {
|
|
|
+ color: $color-system !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+.container {
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
+ height: auto;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.tui-order-content {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ background-color: #F7F7F7;
|
|
|
+}
|
|
|
+.tui-order-list {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.tui-order-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 702rpx;
|
|
|
+ padding: 0rpx 24rpx 0 24rpx;
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+.order-title {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ .order-title-name {
|
|
|
+ width: 100%;
|
|
|
+ height: 72rpx;
|
|
|
+ border-bottom: 1px solid #f7f7f7;
|
|
|
+ line-height: 72rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #333333;
|
|
|
+ .tags {
|
|
|
+ display: inline-block;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ border-radius: 16rpx 0;
|
|
|
+ background: #f0cb72;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ color: #4e4539;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 32rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ &.sv {
|
|
|
+ background: #333333;
|
|
|
+ color: #f0cb72;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ float: right;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order-title-t {
|
|
|
+ width: 100%;
|
|
|
+ height: 68rpx;
|
|
|
+ float: left;
|
|
|
+ line-height: 68rpx;
|
|
|
+ position: relative;
|
|
|
+ .bage-icon {
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ right: 110rpx;
|
|
|
+ top: 12rpx;
|
|
|
+ }
|
|
|
+ .bage{
|
|
|
+ display: inline-block;
|
|
|
+ width: 72rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin: 19rpx 10rpx 0 10rpx;
|
|
|
+ border-radius: 16rpx 0;
|
|
|
+ line-height: 32rpx;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ float: left;
|
|
|
+ &.buss{
|
|
|
+ background: radial-gradient(circle, rgba(255, 39, 180, 1) 0%, rgba(193, 77, 245, 1) 100%);
|
|
|
+ }
|
|
|
+ &.auto{
|
|
|
+ background: #7fba4f;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ &.ebate{
|
|
|
+ background: #ff7a51;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order-title-tip {
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ line-height: 68rpx;
|
|
|
+ text-align: right;
|
|
|
+ color: #ff2a2a;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order-title-b {
|
|
|
+ width: 100%;
|
|
|
+ height: 40rpx;
|
|
|
+ float: left;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ .order-title-btxt {
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ line-height: 40rpx;
|
|
|
+ color: #999999;
|
|
|
+ text-align: left;
|
|
|
+ &.num{
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.goods-title {
|
|
|
+ width: 100%;
|
|
|
+ height: 56rpx;
|
|
|
+ float: left;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ .floor-item-act {
|
|
|
+ height: 56rpx;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ float: left;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ margin-right: 12rpx;
|
|
|
+ }
|
|
|
+ .title-text {
|
|
|
+ width: 400rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
+ text-align: left;
|
|
|
+ line-height: 56rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+}
|
|
|
+.goods-item {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+.goods-pros-t {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ .pros-img {
|
|
|
+ float: left;
|
|
|
+ width: 180rpx;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin: 0 20rpx 0 0;
|
|
|
+ position: relative;
|
|
|
+ .tips {
|
|
|
+ display: inline-block;
|
|
|
+ width: 80rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ background-image: linear-gradient(214deg, #ff4500 0%, #ff5800 53%, #ff4367 100%);
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #ffffff;
|
|
|
+ border-radius: 10rpx 0 10rpx 0;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ image {
|
|
|
+ width: 178rpx;
|
|
|
+ height: 178rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ border: 1px solid #f3f3f3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.pros-product {
|
|
|
+ width: 460rpx;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 36rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ position: relative;
|
|
|
+ float: left;
|
|
|
+ .producttitle {
|
|
|
+ width: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ height: auto;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+ .productspec {
|
|
|
+ height: 36rpx;
|
|
|
+ color: #999999;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .productprice {
|
|
|
+ height: 48rpx;
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ .price {
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ width: 48%;
|
|
|
+ color: #ff2a2a;
|
|
|
+ float: left;
|
|
|
+ font-weight: bold;
|
|
|
+ &.none {
|
|
|
+ text-decoration: line-through;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .count {
|
|
|
+ height: 100%;
|
|
|
+ float: right;
|
|
|
+ position: relative;
|
|
|
+ .small {
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .floor-item-act {
|
|
|
+ width: 100%;
|
|
|
+ height: 56rpx;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ float: left;
|
|
|
+ padding: 0 0 10rpx 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.order-footer {
|
|
|
+ width: 100%;
|
|
|
+ height: 78rpx;
|
|
|
+ float: left;
|
|
|
+ .order-footer-top {
|
|
|
+ width: 100%;
|
|
|
+ height: 34rpx;
|
|
|
+ line-height: 34rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #999999;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .order-footer-bot {
|
|
|
+ width: 100%;
|
|
|
+ float: left;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ font-weight: bold;
|
|
|
+ color: $text-color;
|
|
|
+ .count {
|
|
|
+ width: 50%;
|
|
|
+ float: left;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .money {
|
|
|
+ width: 50%;
|
|
|
+ float: right;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.aganBj {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ z-index: 999999;
|
|
|
+ .alertAgan {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 580rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ .title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 42rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .goods {
|
|
|
+ padding: 0 30rpx;
|
|
|
+ .list {
|
|
|
+ padding: 10px 0;
|
|
|
+ border-bottom: 1rpx solid #e1e1e1;
|
|
|
+ margin: 10rpx 0;
|
|
|
+ .image-left {
|
|
|
+ width: 86rpx;
|
|
|
+ height: 86rpx;
|
|
|
+ border: 2rpx solid #e1e1e1;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .name-right {
|
|
|
+ display: inline-block;
|
|
|
+ width: 416rpx;
|
|
|
+ margin-left: 15rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666666;
|
|
|
+ vertical-align: middle;
|
|
|
+ word-break: break-all;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-inline-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .BtnAll {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .btn {
|
|
|
+ display: inline-block;
|
|
|
+ width: 290rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ line-height: 90rpx;
|
|
|
+ text-align: center;
|
|
|
+ &.closebtn {
|
|
|
+ border-radius: 0px 0px 0px 10px;
|
|
|
+ color: #999999;
|
|
|
+ background: #efefef;
|
|
|
+ }
|
|
|
+ &.cancel {
|
|
|
+ border-radius: 0px 0px 8px 0px;
|
|
|
+ background: $btn-confirm;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
