|
@@ -1,1066 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="container" :style="{ paddingTop: navbarHeight + 82 + 'px' }">
|
|
|
- <tui-skeleton v-if="skeletonShow" loadingType="2"></tui-skeleton>
|
|
|
- <!-- 自定义返回 -->
|
|
|
- <header-order
|
|
|
- :systeminfo="systeminfo"
|
|
|
- :navbar-data="nvabarData"
|
|
|
- :headerBtnPosi="headerBtnPosi"
|
|
|
- :isDelete="isDelete"
|
|
|
- :isUsertype="1"
|
|
|
- @goSearchPath="handlSearchPath"
|
|
|
- >
|
|
|
- </header-order>
|
|
|
- <view class="order-section-top" :style="{ marginTop: navbarHeight + 'px' }">
|
|
|
- <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> <text class="line"></text>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- <view class="tab-screen">
|
|
|
- <view
|
|
|
- v-for="(item, index) in screenTabBar"
|
|
|
- :key="index"
|
|
|
- class="tab-screen-item"
|
|
|
- :class="[screenTab == index ? 'active' : '']"
|
|
|
- :data-current="index"
|
|
|
- @tap.stop="onClickScreenTab(index)"
|
|
|
- >{{ item.text }}</view
|
|
|
- >
|
|
|
- </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">
|
|
|
- <scroll-view
|
|
|
- scroll-y
|
|
|
- class="scoll-y"
|
|
|
- @scrolltolower="scrolltolower"
|
|
|
- :style="{ height: winHeight + 'px' }"
|
|
|
- >
|
|
|
- <view :class="{ 'tui-order-list': scrollTop >= 0 }" class="clearfix">
|
|
|
- <!-- 空白页 -->
|
|
|
- <empty
|
|
|
- v-if="tabItem.loaded === true && tabItem.orderList.length === 0"
|
|
|
- :typeIndex="currentTab"
|
|
|
- :navbarHeight="navbarHeight"
|
|
|
- ></empty>
|
|
|
- <!-- 列表 -->
|
|
|
- <view v-else class="tui-order-content">
|
|
|
- <view
|
|
|
- class="tui-order-item"
|
|
|
- v-for="(order, orderIndex) in tabItem.orderList"
|
|
|
- :key="orderIndex"
|
|
|
- >
|
|
|
- <view class="order-title">
|
|
|
- <view class="order-title-t">
|
|
|
- <text class="bage-text"
|
|
|
- ><text class="text">订单编号:</text>{{ order.orderNo }}</text
|
|
|
- >
|
|
|
- </view>
|
|
|
- <view class="order-title-b">
|
|
|
- <view class="order-title-btxt"
|
|
|
- ><text class="text">下单时间:</text>{{ order.orderTime }}</view
|
|
|
- >
|
|
|
- <view class="order-title-tip">{{ StateExpFormat(order.status) }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <block v-for="(shop, sindex) in order.shopOrderList" :key="sindex">
|
|
|
- <view class="goods-title">
|
|
|
- <view class="title-logo"><image :src="shop.shopLogo" mode=""></image></view>
|
|
|
- <view class="title-text">{{ shop.shopName }}</view>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="goods-item"
|
|
|
- v-for="(pros, prosIndex) in shop.orderProductList"
|
|
|
- :key="prosIndex"
|
|
|
- @click.stop="detail(order.orderId)"
|
|
|
- >
|
|
|
- <view class="goods-pros-t">
|
|
|
- <view class="pros-img"> <image :src="pros.productImage" alt="" /> </view>
|
|
|
- <view class="pros-product clearfix">
|
|
|
- <view class="producttitle">{{ pros.name }}</view>
|
|
|
- <view class="productspec" v-if="pros.productCategory != 2"
|
|
|
- >规格:{{ pros.productUnit }}</view
|
|
|
- >
|
|
|
- <view class="floor-item-act" v-if="pros.ladderPriceFlag === '1'">
|
|
|
- <text class="tag tag-01" v-if="!pros.heUserId">自营</text>
|
|
|
- <text class="tag tag-01" v-else>促销</text>
|
|
|
- <text class="tag tag-02" @click.stop="clickPopupShow(pros, 2)"
|
|
|
- >活动价</text
|
|
|
- >
|
|
|
- </view>
|
|
|
- <view class="productprice">
|
|
|
- <view class="price"
|
|
|
- ><text>¥{{ pros.price | formatPrice }}</text></view
|
|
|
- >
|
|
|
- <view class="count"
|
|
|
- ><text class="small">x</text>{{ pros.num }}</view
|
|
|
- >
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </block>
|
|
|
- <view class="order-footer">
|
|
|
- <view class="order-footer-bot">
|
|
|
- <view class="count">共{{ order.productCount }}件商品</view>
|
|
|
- <view
|
|
|
- class="money"
|
|
|
- v-if="order.status == 31 || order.status == 32 || order.status == 33"
|
|
|
- >
|
|
|
- 已支付:<text class="color">¥{{ order.receiptAmount | formatPrice }}</text>
|
|
|
- </view>
|
|
|
- <view class="money" v-else>
|
|
|
- 待付总额:<text class="color"
|
|
|
- >¥{{ order.pendingPayments | formatPrice }}</text
|
|
|
- >
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 底部button -->
|
|
|
- <order-button
|
|
|
- v-if="order.userId == userId"
|
|
|
- ref="orderButton"
|
|
|
- :status="order.status"
|
|
|
- :order="order"
|
|
|
- @buttonConfirm="handButtonConfirm"
|
|
|
- >
|
|
|
- </order-button>
|
|
|
- </view>
|
|
|
- <!--加载loadding-->
|
|
|
- <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
|
|
|
- <tui-nomore
|
|
|
- :visible="!pullUpOn"
|
|
|
- :backgroundColor="'#ffffff'"
|
|
|
- :text="nomoreText"
|
|
|
- ></tui-nomore>
|
|
|
- <!--加载loadding-->
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- <!-- 操作弹窗 -->
|
|
|
- <tui-modal
|
|
|
- :show="modal"
|
|
|
- @click="handleClick"
|
|
|
- @cancel="hideMobel(1)"
|
|
|
- :content="contentModalText"
|
|
|
- color="#333"
|
|
|
- :size="32"
|
|
|
- shape="circle"
|
|
|
- :maskClosable="false"
|
|
|
- ></tui-modal>
|
|
|
- <!-- 再次购买订单商品全部下架弹窗 -->
|
|
|
- <tui-modal
|
|
|
- :show="modal2"
|
|
|
- @click="handleClick2"
|
|
|
- @cancel="hideMobel(2)"
|
|
|
- shape="circle"
|
|
|
- content="订单内商品已全部下架,不能购买!"
|
|
|
- :button="button"
|
|
|
- ></tui-modal>
|
|
|
- <!-- 再次购买部分商品失效弹窗 -->
|
|
|
- <tui-modal :show="modal3" @cancel="hideMobel(3)" :custom="true">
|
|
|
- <view class="tui-modal-custom">
|
|
|
- <view class="tui-modal-custom-text">
|
|
|
- <view class="title">以下商品已失效,不能进行购买;是否先将其他商品加入购物车?</view>
|
|
|
- <scroll-view scroll-y class="tui-modal-custom-list">
|
|
|
- <view class="custom-list" v-for="(invalid, index) in invalidList" :key="index">
|
|
|
- <view class="custom-list-image"><image :src="invalid.productImage" mode=""></image></view>
|
|
|
- <view class="custom-list-name">{{ invalid.name }}</view>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
- </view>
|
|
|
- <view class="tui-modal-button">
|
|
|
- <button class="modal-button cancel" @click="hideMobel(3)">我再想想</button>
|
|
|
- <button class="modal-button confirm" @click="handleClick3">加入购物车</button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </tui-modal>
|
|
|
- <!-- 透明模态层 -->
|
|
|
- <modal-layer v-if="isModalLayer"></modal-layer>
|
|
|
- <cm-loading :visible="isSubLoading" :text="loadingText"></cm-loading>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import authorize from '@/common/authorize.js'
|
|
|
-import HeaderOrder from '@/components/cm-module/headerNavbar/header-order' //自定义导航
|
|
|
-import orderButton from '@/components/cm-module/orderDetails/orderListButton' //按钮
|
|
|
-import modalLayer from '@/components/cm-module/modal-layer/modal-layer'
|
|
|
-import empty from '@/components/cm-module/empty/empty'
|
|
|
-import CmLoading from '@/components/cm-module/cm-loading/cm-loading.vue'
|
|
|
-import { mapGetters } from 'vuex'
|
|
|
-import wechatPay from '@/mixins/wechatPay.js'
|
|
|
-
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- HeaderOrder,
|
|
|
- empty,
|
|
|
- orderButton,
|
|
|
- modalLayer,
|
|
|
- CmLoading
|
|
|
- },
|
|
|
- mixins: [wechatPay],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- CustomBar: this.CustomBar, // 顶部导航栏高度
|
|
|
- orderTabBar: [
|
|
|
- { state: 0, text: '全部', orderList: [] },
|
|
|
- { state: 1, text: '待付款', orderList: [] },
|
|
|
- { state: 2, text: '待发货', orderList: [] },
|
|
|
- { state: 3, text: '已发货', orderList: [] },
|
|
|
- { state: 4, 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: '我的订单' // 导航栏 中间的标题
|
|
|
- },
|
|
|
- winHeight: '', //窗口高度
|
|
|
- currentTab: 0, //预设当前项的值
|
|
|
- screenTab: 0, //筛选预设当前项的值
|
|
|
- scrollLeft: 0, //tab标题的滚动条位置
|
|
|
- btnoRderID: 0, //点击按钮传入的的订单ID
|
|
|
- pageNum: 1, //页数
|
|
|
- pageSize: 10, //条数
|
|
|
- scrollTop: 0,
|
|
|
- skeletonShow: true,
|
|
|
- isDelete: false,
|
|
|
- isClickChange: false,
|
|
|
- isModalLayer: false,
|
|
|
- loadding: false,
|
|
|
- pullUpOn: true,
|
|
|
- hasNextPage: false,
|
|
|
- pullFlag: true,
|
|
|
- navbarHeight: '',
|
|
|
- nomoreText: '上拉显示更多',
|
|
|
- isOnloadFlag: false,
|
|
|
- modal: false,
|
|
|
- modal2: false,
|
|
|
- modal3: false,
|
|
|
- OperationType: '',
|
|
|
- contentModalText: '',
|
|
|
- button: [
|
|
|
- {
|
|
|
- text: '确定',
|
|
|
- type: 'danger'
|
|
|
- }
|
|
|
- ],
|
|
|
- invalidList: [],
|
|
|
- hanldOrder: {}
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters(['userId'])
|
|
|
- },
|
|
|
- onPageScroll(e) {
|
|
|
- this.scrollTop = e.scrollTop
|
|
|
- },
|
|
|
- onLoad(e) {
|
|
|
- let self = this
|
|
|
- if (e.type === 'detele') {
|
|
|
- self.isDelete = true
|
|
|
- }
|
|
|
- self.currentTab = e.state
|
|
|
- self.isOnloadFlag = true
|
|
|
- self.getHeaderTopHeight() //设置自定义导航高度
|
|
|
- // 高度自适应
|
|
|
- uni.getSystemInfo({
|
|
|
- success: function(res) {
|
|
|
- let calc = res.windowHeight
|
|
|
- self.winHeight = calc - self.CustomBar
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- this.isModalLayer = false
|
|
|
- this.GetOrderDatainit(this.currentTab)
|
|
|
- // console.log(this.orderTabBar)
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 滚动切换标签样式
|
|
|
- onChange: function(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.checkCor()
|
|
|
- this.pageNum = 1
|
|
|
- this.pullUpOn = true //切换时隐藏
|
|
|
- this.loadding = false //切换时隐藏
|
|
|
- this.nomoreText = ''
|
|
|
- if (!this.isOnloadFlag) {
|
|
|
- this.GetOrderDatainit(this.currentTab, 'tabChange')
|
|
|
- }
|
|
|
- },
|
|
|
- // 点击标题切换当前页时改变样式
|
|
|
- onClickTab: function(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.pageNum = 1
|
|
|
- this.pullUpOn = true //切换时隐藏
|
|
|
- this.loadding = false //切换时隐藏
|
|
|
- this.GetOrderDatainit(this.currentTab)
|
|
|
- }
|
|
|
- },
|
|
|
- onClickScreenTab(index) {
|
|
|
- this.screenTab = index
|
|
|
- this.pageNum = 1
|
|
|
- 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
|
|
|
- }
|
|
|
- },
|
|
|
- GetOrderDatainit(index, source) {
|
|
|
- /**
|
|
|
- * @订单初始化加载 仅加载第一页码
|
|
|
- * @param:orderState(订单状态:0全部,1待付款,2待发货,3已发货,4退货款)
|
|
|
- * @param:userId(用户ID)
|
|
|
- * @param:pageNum(页码数)
|
|
|
- * @param:pageSize(每页条数)
|
|
|
- * @param:organizeID(全局变量组织ID)
|
|
|
- */
|
|
|
- let orderItem = this.orderTabBar[index]
|
|
|
- let state = orderItem.state
|
|
|
- if (source === 'tabChange' && orderItem.loaded === true) {
|
|
|
- //tab切换只有第一次需要加载数据
|
|
|
- return
|
|
|
- }
|
|
|
- this.OrderService.QueryOrderDealerList({
|
|
|
- orderState: index,
|
|
|
- orderType: this.screenTab,
|
|
|
- userId: this.userId,
|
|
|
- pageNum: 1,
|
|
|
- pageSize: this.pageSize
|
|
|
- })
|
|
|
- .then(response => {
|
|
|
- let data = response.data
|
|
|
- //loaded新字段用于表示数据加载完毕,如果为空可以显示空白页
|
|
|
- let orderList = data.list.filter(item => {
|
|
|
- //添加不同状态下订单的表现形式
|
|
|
- item = Object.assign(item, this.StateExpFormat(item.state))
|
|
|
- return item
|
|
|
- })
|
|
|
- orderItem.orderList = []
|
|
|
- orderList.forEach(item => {
|
|
|
- orderItem.orderList.push(item)
|
|
|
- })
|
|
|
- this.$set(orderItem, 'loaded', true)
|
|
|
- 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 = '已至底部'
|
|
|
- }
|
|
|
- }
|
|
|
- this.skeletonShow = false
|
|
|
- this.isOnloadFlag = false
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- },
|
|
|
- getOnReachBottomData(index) {
|
|
|
- //上拉加载
|
|
|
- this.pageNum += 1
|
|
|
- this.OrderService.QueryOrderDealerList({
|
|
|
- orderState: index,
|
|
|
- orderType: this.screenTab,
|
|
|
- userId: this.userId,
|
|
|
- pageNum: this.pageNum,
|
|
|
- pageSize: this.pageSize
|
|
|
- })
|
|
|
- .then(response => {
|
|
|
- let orderItem = this.orderTabBar[index]
|
|
|
- let data = response.data
|
|
|
- this.hasNextPage = data.hasNextPage
|
|
|
- orderItem.orderList = orderItem.orderList.concat(data.list)
|
|
|
- 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)
|
|
|
- })
|
|
|
- },
|
|
|
- scrolltolower() {
|
|
|
- if (this.hasNextPage) {
|
|
|
- this.loadding = true
|
|
|
- this.pullUpOn = true
|
|
|
- this.getOnReachBottomData(this.currentTab)
|
|
|
- }
|
|
|
- },
|
|
|
- detail(id) {
|
|
|
- //订单详情跳转
|
|
|
- this.isModalLayer = true
|
|
|
- this.$api.navigateTo(`/pages/user/order/order-details?state=${this.currentTab}&orderId=${id}`)
|
|
|
- },
|
|
|
- handButtonConfirm(data) {
|
|
|
- //获取点击
|
|
|
- this.hanldOrder = data
|
|
|
- this.btnoRderID = data.orderId
|
|
|
- this.OperationType = data.type
|
|
|
- this.orderInfo = data.order
|
|
|
- this.handShowAlert(data)
|
|
|
- },
|
|
|
- handShowAlert(data) {
|
|
|
- //执行
|
|
|
- switch (data.type) {
|
|
|
- case 'cancel':
|
|
|
- this.modal = true
|
|
|
- this.contentModalText = '确认取消该订单吗?'
|
|
|
- break
|
|
|
- case 'delete':
|
|
|
- this.modal = true
|
|
|
- this.contentModalText = '确认删除该订单吗?'
|
|
|
- break
|
|
|
- case 'confirm':
|
|
|
- this.modal = true
|
|
|
- this.contentModalText = '是否确认收货?'
|
|
|
- break
|
|
|
- case 'query':
|
|
|
- this.isModalLayer = true
|
|
|
- this.$api.navigateTo('/pages/user/order/order-logistics?orderId=' + data.orderId)
|
|
|
- break
|
|
|
- case 'again':
|
|
|
- this.handBuyAgainInfo()
|
|
|
- break
|
|
|
- case 'pay':
|
|
|
- this.miniWxPayFor(data.order)
|
|
|
- break
|
|
|
- }
|
|
|
- },
|
|
|
- handleClick(e) {
|
|
|
- //用户操作订单
|
|
|
- let index = e.index
|
|
|
- if (index == 1) {
|
|
|
- switch (this.OperationType) {
|
|
|
- case 'delete':
|
|
|
- this.handOrderDetele(this.btnoRderID)
|
|
|
- break
|
|
|
- case 'cancel':
|
|
|
- this.handCenceConfirm(this.btnoRderID)
|
|
|
- break
|
|
|
- case 'confirm':
|
|
|
- this.handOrderConfirm(this.btnoRderID)
|
|
|
- break
|
|
|
- }
|
|
|
- }
|
|
|
- this.modal = false
|
|
|
- },
|
|
|
- handleClick2() {
|
|
|
- this.modal2 = false
|
|
|
- },
|
|
|
- handleClick3() {
|
|
|
- this.handShoppingAgainCart()
|
|
|
- this.modal3 = false
|
|
|
- },
|
|
|
- hideMobel(index) {
|
|
|
- switch (index) {
|
|
|
- case 1:
|
|
|
- this.modal = false
|
|
|
- break
|
|
|
- case 2:
|
|
|
- this.modal2 = false
|
|
|
- break
|
|
|
- case 3:
|
|
|
- this.modal3 = false
|
|
|
- break
|
|
|
- }
|
|
|
- },
|
|
|
- handBuyAgainInfo() {
|
|
|
- //再次购买初始化查询订单商品信息
|
|
|
- this.OrderService.GetOrderBuyAgain({
|
|
|
- orderId: this.btnoRderID
|
|
|
- })
|
|
|
- .then(response => {
|
|
|
- this.handShoppingAgainCart()
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- if (error.data && error.data.length > 0) {
|
|
|
- this.modal3 = true
|
|
|
- this.invalidList = error.data
|
|
|
- } else {
|
|
|
- this.modal2 = true
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- handShoppingAgainCart() {
|
|
|
- //一键加入购物车
|
|
|
- this.ProductService.ShoppingAgainCart({
|
|
|
- orderId: this.btnoRderID
|
|
|
- })
|
|
|
- .then(response => {
|
|
|
- this.ProductService.QueryShoppingQuantity({ userId: this.userId })
|
|
|
- .then(response => {
|
|
|
- this.$api.switchTabTo('/pages/tabBar/cart/index')
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- console.log('查询购物车数量错误信息', error)
|
|
|
- })
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- },
|
|
|
- handOrderConfirm(id) {
|
|
|
- //确认收货
|
|
|
- this.OrderService.ConfirmReceipt({ orderId: id })
|
|
|
- .then(response => {
|
|
|
- this.$util.msg(response.msg, 2000, true, 'success')
|
|
|
- setTimeout(() => {
|
|
|
- this.GetOrderDatainit(this.currentTab)
|
|
|
- }, 2000)
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- },
|
|
|
- handOrderDetele(id) {
|
|
|
- //删除订单
|
|
|
- this.OrderService.DeleteOrder({ orderId: id })
|
|
|
- .then(response => {
|
|
|
- this.$util.msg(response.msg, 2000, true, 'success')
|
|
|
- setTimeout(() => {
|
|
|
- this.GetOrderDatainit(this.currentTab)
|
|
|
- }, 2000)
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- },
|
|
|
- handCenceConfirm(id) {
|
|
|
- //取消订单
|
|
|
- this.OrderService.CancelOrder({ orderId: id })
|
|
|
- .then(response => {
|
|
|
- this.$util.msg(response.msg, 2000, true, 'success')
|
|
|
- setTimeout(() => {
|
|
|
- this.GetOrderDatainit(this.currentTab)
|
|
|
- }, 2000)
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- })
|
|
|
- },
|
|
|
- handlSearchPath() {
|
|
|
- this.$api.navigateTo('/pages/user/order/search-order')
|
|
|
- },
|
|
|
- getHeaderTopHeight() {
|
|
|
- // 状态栏高度
|
|
|
- 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
|
|
|
- },
|
|
|
- setHeaderBtnPosi() {
|
|
|
- // 获得胶囊按钮位置信息
|
|
|
- let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
|
|
|
- return headerBtnPosi
|
|
|
- },
|
|
|
- setSysteminfo() {
|
|
|
- let systeminfo
|
|
|
- uni.getSystemInfo({
|
|
|
- // 获取设备信息
|
|
|
- success: res => {
|
|
|
- systeminfo = res
|
|
|
- }
|
|
|
- })
|
|
|
- return systeminfo
|
|
|
- },
|
|
|
- StateExpFormat(state) {
|
|
|
- //订单状态文字和颜色
|
|
|
- var HtmlStateText = '',
|
|
|
- stateTextObject = {
|
|
|
- 4: '交易完成',
|
|
|
- 5: '订单完成',
|
|
|
- 6: '已关闭',
|
|
|
- 7: '交易全退',
|
|
|
- 77: '交易全退',
|
|
|
- 11: '待付款待发货',
|
|
|
- 12: '待付款部分发货',
|
|
|
- 13: '待付款已发货',
|
|
|
- 21: '部分付款待发货',
|
|
|
- 22: '部分付款部分发货',
|
|
|
- 23: '部分付款已发货',
|
|
|
- 31: '已付款待发货',
|
|
|
- 32: '已付款部分发货',
|
|
|
- 33: '已付款已发货',
|
|
|
- 111: '待付款待发货'
|
|
|
- }
|
|
|
- Object.keys(stateTextObject).forEach(function(key) {
|
|
|
- if (key == state) {
|
|
|
- HtmlStateText = stateTextObject[key]
|
|
|
- }
|
|
|
- })
|
|
|
- return HtmlStateText
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</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-screen {
|
|
|
- height: 48rpx;
|
|
|
- width: 702rpx;
|
|
|
- padding: 20rpx 24rpx 30rpx 24rpx;
|
|
|
- .tab-screen-item {
|
|
|
- height: 48rpx;
|
|
|
- border-radius: 24rpx;
|
|
|
- background: #f7f7f7;
|
|
|
- margin-right: 48rpx;
|
|
|
- line-height: 48rpx;
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #333333;
|
|
|
- text-align: center;
|
|
|
- padding: 0 24rpx;
|
|
|
- float: left;
|
|
|
- &.active {
|
|
|
- color: $color-system;
|
|
|
- background-color: #fff3f7;
|
|
|
- }
|
|
|
- &:last-child {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.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;
|
|
|
-}
|
|
|
-.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;
|
|
|
- position: relative;
|
|
|
- .tab-bar-title {
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- }
|
|
|
- .line {
|
|
|
- width: 40rpx;
|
|
|
- height: 4rpx;
|
|
|
- border-radius: 2rpx;
|
|
|
- position: absolute;
|
|
|
- bottom: 8rpx;
|
|
|
- left: 50%;
|
|
|
- margin-left: -20rpx;
|
|
|
- background-color: #ffffff;
|
|
|
- }
|
|
|
- &.active {
|
|
|
- .line {
|
|
|
- background-color: $color-system;
|
|
|
- }
|
|
|
- .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;
|
|
|
-}
|
|
|
-.tui-order-list {
|
|
|
- width: 100%;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-.tui-order-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- width: 702rpx;
|
|
|
- padding: 20rpx 24rpx 0 24rpx;
|
|
|
- background: #fff;
|
|
|
- border-bottom: 20rpx solid #f7f7f7;
|
|
|
-}
|
|
|
-.order-title {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- padding-bottom: 20rpx;
|
|
|
- border-bottom: 1px solid #e1e1e1;
|
|
|
- .order-title-t {
|
|
|
- width: 100%;
|
|
|
- height: 48rpx;
|
|
|
- float: left;
|
|
|
- line-height: 48rpx;
|
|
|
- position: relative;
|
|
|
- .bage-icon {
|
|
|
- width: 50rpx;
|
|
|
- height: 50rpx;
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 9rpx;
|
|
|
- }
|
|
|
- .bage-text {
|
|
|
- display: inline-block;
|
|
|
- font-size: $font-size-28;
|
|
|
- line-height: 48rpx;
|
|
|
- text-align: left;
|
|
|
- color: $text-color;
|
|
|
- .text {
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .order-title-b {
|
|
|
- width: 100%;
|
|
|
- height: 48rpx;
|
|
|
- float: left;
|
|
|
- margin-top: 8rpx;
|
|
|
- .order-title-btxt {
|
|
|
- float: left;
|
|
|
- font-size: $font-size-28;
|
|
|
- line-height: 48rpx;
|
|
|
- color: $text-color;
|
|
|
- text-align: left;
|
|
|
- .text {
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- }
|
|
|
- .order-title-tip {
|
|
|
- float: right;
|
|
|
- font-size: $font-size-28;
|
|
|
- line-height: 48rpx;
|
|
|
- text-align: right;
|
|
|
- color: #ff457b;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.goods-title {
|
|
|
- width: 100%;
|
|
|
- height: 56rpx;
|
|
|
- float: left;
|
|
|
- margin-top: 10rpx;
|
|
|
- .title-logo {
|
|
|
- width: 56rpx;
|
|
|
- height: 56rpx;
|
|
|
- float: left;
|
|
|
- border-radius: 8rpx;
|
|
|
- border: 1px solid #e1e1e1;
|
|
|
- margin-right: 8rpx;
|
|
|
- image {
|
|
|
- border-radius: 8rpx;
|
|
|
- width: 56rpx;
|
|
|
- height: 56rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .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: 210rpx;
|
|
|
- height: 100%;
|
|
|
- border-radius: 10rpx;
|
|
|
- margin: 0 26rpx 0 0;
|
|
|
- position: relative;
|
|
|
- image {
|
|
|
- width: 210rpx;
|
|
|
- height: 210rpx;
|
|
|
- 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;
|
|
|
- margin: 10rpx 0 0 0;
|
|
|
- }
|
|
|
- .productprice {
|
|
|
- height: 48rpx;
|
|
|
- width: 100%;
|
|
|
- float: left;
|
|
|
- margin-top: 10rpx;
|
|
|
- .price {
|
|
|
- line-height: 48rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- width: 48%;
|
|
|
- color: $color-system;
|
|
|
- float: left;
|
|
|
- font-weight: bold;
|
|
|
- &.disabled {
|
|
|
- color: #999999;
|
|
|
- text-decoration: line-through;
|
|
|
- }
|
|
|
- }
|
|
|
- .count {
|
|
|
- height: 100%;
|
|
|
- float: right;
|
|
|
- position: relative;
|
|
|
- .small {
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .floor-item-act {
|
|
|
- width: 100%;
|
|
|
- height: 30rpx;
|
|
|
- margin-top: 8rpx;
|
|
|
- float: left;
|
|
|
- .tag {
|
|
|
- display: inline-block;
|
|
|
- height: 32rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- line-height: 30rpx;
|
|
|
- text-align: center;
|
|
|
- color: #f83c6c;
|
|
|
- float: left;
|
|
|
- margin-right: 10rpx;
|
|
|
- &.tag-02 {
|
|
|
- width: 80rpx;
|
|
|
- background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center no-repeat;
|
|
|
- background-size: contain;
|
|
|
- }
|
|
|
- &.tag-01 {
|
|
|
- width: 56rpx;
|
|
|
- color: #fff;
|
|
|
- background-color: #f83c6c;
|
|
|
- border-radius: 4rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.order-footer {
|
|
|
- width: 100%;
|
|
|
- height: 78rpx;
|
|
|
- float: left;
|
|
|
- margin-top: 20rpx;
|
|
|
- .order-footer-bot {
|
|
|
- width: 100%;
|
|
|
- float: left;
|
|
|
- height: 48rpx;
|
|
|
- line-height: 48rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- .count {
|
|
|
- width: 50%;
|
|
|
- float: left;
|
|
|
- text-align: left;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .money {
|
|
|
- width: 50%;
|
|
|
- float: right;
|
|
|
- text-align: right;
|
|
|
- .color {
|
|
|
- color: $color-system;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.tui-modal-custom-text {
|
|
|
- min-height: 300rpx;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- .title {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- font-size: $font-size-30;
|
|
|
- text-align: justify;
|
|
|
- color: #333333;
|
|
|
- line-height: 40rpx;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- }
|
|
|
- .tui-modal-custom-list {
|
|
|
- width: 100%;
|
|
|
- height: 350rpx;
|
|
|
- overflow: hidden;
|
|
|
- .custom-list {
|
|
|
- width: 100%;
|
|
|
- height: 117rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- float: left;
|
|
|
- padding: 15rpx 0;
|
|
|
- .custom-list-image {
|
|
|
- width: 86rpx;
|
|
|
- height: 86rpx;
|
|
|
- float: left;
|
|
|
- border-radius: 6rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- border: 1px solid #e1e1e1;
|
|
|
- image {
|
|
|
- width: 84rpx;
|
|
|
- height: 84rpx;
|
|
|
- border-radius: 6rpx;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
- .custom-list-name {
|
|
|
- width: 400rpx;
|
|
|
- height: 86rpx;
|
|
|
- float: right;
|
|
|
- line-height: 43rpx;
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #666666;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- line-clamp: 2;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.tui-modal-button {
|
|
|
- width: 100%;
|
|
|
- height: 72rpx;
|
|
|
- display: flex;
|
|
|
- .modal-button {
|
|
|
- width: 200rpx;
|
|
|
- height: 72rpx;
|
|
|
- line-height: 72rpx;
|
|
|
- border-radius: 36rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- &.cancel {
|
|
|
- border: 1px solid #b2b2b2;
|
|
|
- background: #ffffff;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- &.confirm {
|
|
|
- background: $btn-confirm;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|