|
@@ -1,924 +1,923 @@
|
|
|
<template>
|
|
|
- <view class="container" :style="{ paddingTop: navbarHeight + 'px' }">
|
|
|
- <!-- 自定义返回 -->
|
|
|
- <header-back
|
|
|
- :systeminfo="systeminfo"
|
|
|
- :navbar-data="nvabarData"
|
|
|
- :headerBtnPosi="headerBtnPosi"
|
|
|
- :isDelete="isDelete"
|
|
|
- @goSearchPath="handlSearchPath"
|
|
|
- ></header-back>
|
|
|
- <tui-skeleton
|
|
|
- v-if="skeletonShow"
|
|
|
- backgroundColor="#fafafa"
|
|
|
- borderRadius="10rpx"
|
|
|
- :isLoading="true"
|
|
|
- :loadingType="5"
|
|
|
- ></tui-skeleton>
|
|
|
- <template v-else>
|
|
|
- <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>
|
|
|
- </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">
|
|
|
- <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"
|
|
|
- ></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="container" :style="{ paddingTop: navbarHeight + 'px' }">
|
|
|
+ <!-- 自定义返回 -->
|
|
|
+ <header-back
|
|
|
+ :systeminfo="systeminfo"
|
|
|
+ :navbar-data="nvabarData"
|
|
|
+ :headerBtnPosi="headerBtnPosi"
|
|
|
+ :isDelete="isDelete"
|
|
|
+ @goSearchPath="handlSearchPath"
|
|
|
+ />
|
|
|
+ <tui-skeleton
|
|
|
+ v-if="skeletonShow"
|
|
|
+ backgroundColor="#fafafa"
|
|
|
+ borderRadius="10rpx"
|
|
|
+ :isLoading="true"
|
|
|
+ :loadingType="5"
|
|
|
+ />
|
|
|
+ <template v-else>
|
|
|
+ <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>
|
|
|
+ </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">
|
|
|
+ <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"
|
|
|
+ ></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 tui-skeleton-fillet">订单编号:{{ order.orderNo }}</text>
|
|
|
+ <view class="order-title-tip tui-skeleton-fillet">
|
|
|
+ {{ order.status | statusFilters }}
|
|
|
+ </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
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <block v-for="(shop, sindex) in order.orderProductList" :key="sindex">
|
|
|
+ <view class="goods-title">
|
|
|
+ <view class="title-text tui-skeleton-fillet">
|
|
|
+ {{ shop.shopName }} <label class="iconfont icon-jinrudianpu"></label>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="goods-item" @click.stop="detail(shop.shopOrderId, shop.orderId)">
|
|
|
+ <view class="goods-pros-t">
|
|
|
+ <view class="pros-img tui-skeleton-fillet">
|
|
|
+ <image :src="shop.image" alt="" />
|
|
|
+ </view>
|
|
|
+ <view class="pros-product clearfix">
|
|
|
+ <view class="producttitle tui-skeleton-fillet">
|
|
|
+ {{ shop.name }}
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="productspec tui-skeleton-fillet"
|
|
|
+ v-if="shop.productCategory != 2"
|
|
|
+ >
|
|
|
+ 规格:{{ shop.productUnit }}
|
|
|
+ </view>
|
|
|
+ <view class="productprice">
|
|
|
+ <view class="price tui-skeleton-fillet">
|
|
|
+ <text>¥{{ shop.price | NumFormat }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="count tui-skeleton-fillet">
|
|
|
+ <text class="small">x</text> {{ shop.num }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="order-title-b">
|
|
|
- <view class="order-title-btxt tui-skeleton-fillet"
|
|
|
- >下单时间:{{ order.orderTime }}</view
|
|
|
+ </block>
|
|
|
+ <view class="order-footer">
|
|
|
+ <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"
|
|
|
>
|
|
|
- <view class="order-title-tip tui-skeleton-fillet">{{
|
|
|
- StateExpFormat(order.status)
|
|
|
- }}</view>
|
|
|
+ 已支付:
|
|
|
+ <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> -->
|
|
|
- <block v-for="(shop, sindex) in order.orderProductList" :key="sindex">
|
|
|
- <view class="goods-title">
|
|
|
- <view class="title-text tui-skeleton-fillet">
|
|
|
- {{ shop.shopName }}
|
|
|
- <label class="iconfont icon-jinrudianpu"></label>
|
|
|
- </view>
|
|
|
- <view class="order-title-tip">{{
|
|
|
- StateExpFormat(order.status)
|
|
|
- }}</view>
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="goods-item"
|
|
|
- @click.stop="detail(shop.shopOrderId, shop.orderId)"
|
|
|
- >
|
|
|
- <view class="goods-pros-t">
|
|
|
- <view class="pros-img tui-skeleton-fillet">
|
|
|
- <image :src="shop.image" alt="" />
|
|
|
- </view>
|
|
|
- <view class="pros-product clearfix">
|
|
|
- <view class="producttitle tui-skeleton-fillet">
|
|
|
- {{ shop.name }}
|
|
|
- </view>
|
|
|
- <view
|
|
|
- class="productspec tui-skeleton-fillet"
|
|
|
- v-if="shop.productCategory != 2"
|
|
|
- >
|
|
|
- 规格:{{ shop.productUnit }}
|
|
|
- </view>
|
|
|
- <view class="productprice">
|
|
|
- <view class="price tui-skeleton-fillet">
|
|
|
- <text>¥{{ shop.price | NumFormat }}</text>
|
|
|
- </view>
|
|
|
- <view class="count tui-skeleton-fillet">
|
|
|
- <text class="small">x</text>
|
|
|
- {{ shop.num }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </block>
|
|
|
- <view class="order-footer">
|
|
|
- <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 -->
|
|
|
- <order-button
|
|
|
- ref="orderButton"
|
|
|
- :status="order.status"
|
|
|
- :order="order"
|
|
|
- @shareConfirm="handButtonShareConfirm"
|
|
|
- @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>
|
|
|
- </template>
|
|
|
- <!-- 分享弹窗 -->
|
|
|
- <share-alert v-if="isShareModal" :orderId="handleOrderId" @shareConfirm="onShareAppMessage" />
|
|
|
- <!-- 提示弹窗 -->
|
|
|
- <tui-modal
|
|
|
- :show="modal"
|
|
|
- @click="handleClick"
|
|
|
- :content="contentModalText"
|
|
|
- :button="modalButton"
|
|
|
- color="#333"
|
|
|
- :size="32"
|
|
|
- shape="circle"
|
|
|
- :maskClosable="false"
|
|
|
- ></tui-modal>
|
|
|
- <!-- 透明模态层 -->
|
|
|
- <modal-layer v-if="isModalLayer"></modal-layer>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+ <!-- 底部button -->
|
|
|
+ <cm-list-button
|
|
|
+ ref="orderButton"
|
|
|
+ :status="order.status"
|
|
|
+ :order="order"
|
|
|
+ @shareConfirm="handButtonShareConfirm"
|
|
|
+ @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 v-if="isShareModal" :shopOrderId="handleShopOrderId" @shareConfirm="onShareAppMessage" />
|
|
|
+ <!-- 提示弹窗 -->
|
|
|
+ <tui-modal
|
|
|
+ :show="modal"
|
|
|
+ @click="handleClick"
|
|
|
+ :content="contentModalText"
|
|
|
+ :button="modalButton"
|
|
|
+ color="#333"
|
|
|
+ :size="32"
|
|
|
+ shape="circle"
|
|
|
+ :maskClosable="false"
|
|
|
+ />
|
|
|
+ <!-- 透明模态层 -->
|
|
|
+ <modal-layer v-if="isModalLayer" />
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import headerBack from '@/components/cm-module/headerNavbar/header-back' //自定义导航
|
|
|
import btSearch from '@/components/uni-search/bt-search.vue' //搜索
|
|
|
-import orderButton from './components/details/orderListButton' //按钮
|
|
|
+import cmListButton from './components/cm-list-button' //按钮
|
|
|
import modalLayer from '@/components/modal-layer'
|
|
|
import empty from './components/empty'
|
|
|
-import shareAlert from '@/components/cm-module/modelAlert/shareAlert' //分享弹窗
|
|
|
+import cmSharePopup from './components/cm-share-popup' //分享弹窗
|
|
|
|
|
|
export default {
|
|
|
- components: {
|
|
|
- headerBack,
|
|
|
- empty,
|
|
|
- btSearch,
|
|
|
- orderButton,
|
|
|
- modalLayer,
|
|
|
- shareAlert
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- CustomBar: this.CustomBar, // 顶部导航栏高度
|
|
|
- headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
|
|
|
- systeminfo: this.setSysteminfo(), //获取设备信息
|
|
|
- winHeight: '', //窗口高度
|
|
|
- nvabarData: {
|
|
|
- //顶部自定义导航
|
|
|
- showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
|
|
|
- showSearch: 1,
|
|
|
- title: '我的订单' // 导航栏 中间的标题
|
|
|
- },
|
|
|
- orderTabBar: [
|
|
|
- { state: 0, text: '全部订单', orderList: [] },
|
|
|
- { state: 2, text: '待付款', orderList: [] },
|
|
|
- { state: 3, text: '待发货', orderList: [] },
|
|
|
- { state: 4, text: '已发货', orderList: [] },
|
|
|
- { state: 5, text: '退货/款', orderList: [] }
|
|
|
- ],
|
|
|
- currentTab: 0, //预设当前项的值
|
|
|
- scrollLeft: 0, //tab标题的滚动条位置
|
|
|
- listQuery: {
|
|
|
- orderState: 0,
|
|
|
- userId: 0,
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 10
|
|
|
- },
|
|
|
- orderData: [],
|
|
|
- scrollTop: 0,
|
|
|
- skeletonShow: true,
|
|
|
- isDelete: false,
|
|
|
- isClickChange: false,
|
|
|
- isShareModal: false, //控制分享弹窗
|
|
|
- isModalLayer: false,
|
|
|
- loadding: false,
|
|
|
- pullUpOn: true,
|
|
|
- hasNextPage: false,
|
|
|
- pullFlag: true,
|
|
|
- navbarHeight: '',
|
|
|
- modelType: 0,
|
|
|
- nomoreText: '上拉显示更多',
|
|
|
- isOnloadFlag: false,
|
|
|
- handleOrderId: 0, //点击按钮传入的的订单ID
|
|
|
- handleModelEven: 0,
|
|
|
- modal: false,
|
|
|
- contentModalText: '订单查询失败,请稍候重试~', //操作文字提示语句
|
|
|
- modalButton: [
|
|
|
- {
|
|
|
- text: '取消',
|
|
|
- type: 'gray',
|
|
|
- plain: true //是否空心
|
|
|
- },
|
|
|
- {
|
|
|
- text: '确定',
|
|
|
- customStyle: {
|
|
|
- color: '#fff',
|
|
|
- bgColor: '#F3B574'
|
|
|
- },
|
|
|
- plain: false
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad(e) {
|
|
|
- if (e.type === 'detele') {
|
|
|
- this.isDelete = true
|
|
|
- }
|
|
|
- const evStateMap = { 0: 0, 2: 1, 3: 2, 4: 3, 5: 4 }
|
|
|
- this.currentTab = evStateMap[e.state]
|
|
|
- console.log('currentTab', this.currentTab)
|
|
|
- this.isOnloadFlag = true
|
|
|
- this.getHeaderTopHeight() //设置自定义导航高度
|
|
|
- this.initStorage()
|
|
|
- },
|
|
|
- filters: {
|
|
|
- NumFormat(value) {
|
|
|
- //处理金额
|
|
|
- return Number(value).toFixed(2)
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async initStorage() {
|
|
|
- //初始化
|
|
|
- const usrInfo = await this.$api.getStorage()
|
|
|
- this.listQuery.userId = usrInfo.userId ? usrInfo.userId : 0
|
|
|
- this.getOrderDatainit(this.currentTab)
|
|
|
- },
|
|
|
- // 滚动切换标签样式
|
|
|
- onChange: function(e) {
|
|
|
- let tabIndex = e.target.current || e.detail.current
|
|
|
- if (this.isClickChange) {
|
|
|
- this.currentTab = tabIndex
|
|
|
- this.isClickChange = false
|
|
|
- return
|
|
|
- }
|
|
|
- this.isClickChange = false
|
|
|
- this.currentTab = tabIndex
|
|
|
- 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.listQuery.pageNum = 1
|
|
|
- this.pullUpOn = true //切换时隐藏
|
|
|
- this.loadding = false //切换时隐藏
|
|
|
- this.getOrderDatainit(this.currentTab)
|
|
|
- }
|
|
|
- },
|
|
|
- //判断当前滚动超过一屏时,设置tab标题滚动条。
|
|
|
- checkCor: function() {
|
|
|
- if (this.currentTab > 3) {
|
|
|
- //这里距离按实际计算
|
|
|
- this.scrollLeft = 300
|
|
|
- } else {
|
|
|
- this.scrollLeft = 0
|
|
|
- }
|
|
|
- },
|
|
|
- async getOrderDatainit(index, source) {
|
|
|
- let orderItem = this.orderTabBar[index]
|
|
|
- if (source === 'tabChange' && orderItem.loaded === true) {
|
|
|
- //tab切换只有第一次需要加载数据
|
|
|
- return
|
|
|
- }
|
|
|
- try {
|
|
|
- this.listQuery.orderState = this.orderTabBar[index].state
|
|
|
- const res = await this.OrderService.QueryOrderList(this.listQuery)
|
|
|
- const data = res.data
|
|
|
- const orderList = data.list.filter(item => {
|
|
|
- //添加不同状态下订单的表现形式
|
|
|
- item = Object.assign(item, this.StateExpFormat(item.status))
|
|
|
- return item
|
|
|
- })
|
|
|
- orderItem.orderList = []
|
|
|
- orderList.forEach(item => {
|
|
|
- orderItem.orderList.push(item)
|
|
|
- })
|
|
|
- //loaded新字段用于表示数据加载完毕,如果为空可以显示空白页
|
|
|
- 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)
|
|
|
- }
|
|
|
- },
|
|
|
- async getOnReachBottomData(index) {
|
|
|
- //上拉加载
|
|
|
- try {
|
|
|
- this.listQuery.pageNum += 1
|
|
|
- this.listQuery.orderState = this.orderTabBar[index].state
|
|
|
- const res = await this.OrderService.QueryOrderList(this.listQuery)
|
|
|
- const data = res.data
|
|
|
- const orderItem = this.orderTabBar[index]
|
|
|
- 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(shopOrderId, orderId) {
|
|
|
- //订单详情跳转
|
|
|
- this.isModalLayer = true
|
|
|
- this.$api.navigateTo(`/pages/user/order/order-details?state=${this.currentTab}&shopOrderId=${shopOrderId}`)
|
|
|
- },
|
|
|
- handButtonConfirm(data) {
|
|
|
- console.log(data)
|
|
|
- //获取点击
|
|
|
- this.handleOrderId = data.order.shopOrderId
|
|
|
- switch (data.type) {
|
|
|
- case 'cancel':
|
|
|
- //取消订单
|
|
|
- this.modal = true
|
|
|
- this.contentModalText = '确认取消该订单吗?'
|
|
|
- this.handleModelEven = 1
|
|
|
- break
|
|
|
- case 'query':
|
|
|
- this.$api.navigateTo('/pages/user/order/order-logistics?orderId=' + this.handleOrderId)
|
|
|
- break
|
|
|
- case 'upload':
|
|
|
- this.$api.navigateTo('/pages/user/order/order-addpay?orderId=' + this.handleOrderId)
|
|
|
- break
|
|
|
- case 'confirm':
|
|
|
- //确认收货
|
|
|
- this.modal = true
|
|
|
- this.contentModalText = '确认收货吗?'
|
|
|
- this.handleModelEven = 2
|
|
|
- break
|
|
|
- case 'pay':
|
|
|
- this.orderPaymentValidation(data)
|
|
|
- break
|
|
|
- }
|
|
|
- },
|
|
|
- async orderPaymentValidation(data) {
|
|
|
- //监听根据付款状态做操作
|
|
|
- try {
|
|
|
- const res = await this.OrderService.OrderPaymentValidation({ shopOrderId: this.handleOrderId })
|
|
|
- this.$api.navigateTo(`/pages/user/order/order-pay-list?shopOrderId=${res.data.shopOrderId}`)
|
|
|
- // if (res.data.onlinePayFlag == 1) {
|
|
|
- // // 只能线下
|
|
|
- // this.$api.navigateTo(`/pages/user/pay/card-under?orderId=${this.handleOrderId}`)
|
|
|
- // } else {
|
|
|
- // this.$api.navigateTo(`/pages/user/order/order-pay-list?orderId=${this.handleOrderId}`)
|
|
|
- // }
|
|
|
- } catch (error) {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- }
|
|
|
- },
|
|
|
- handleClick(e) {
|
|
|
- //确认操作
|
|
|
- if (e.index == 1) {
|
|
|
- switch (this.handleModelEven) {
|
|
|
- case 1: //取消订单
|
|
|
- this.cancelOrder()
|
|
|
- break
|
|
|
- case 2: //确认收货
|
|
|
- this.confirmReceipt()
|
|
|
- break
|
|
|
- }
|
|
|
- }
|
|
|
- this.modal = false
|
|
|
- },
|
|
|
- async confirmReceipt() {
|
|
|
- //确认收货
|
|
|
- try {
|
|
|
- const res = await this.OrderService.ConfirmReceipt({ shopOrderId: this.handleOrderId })
|
|
|
- this.$util.msg(res.msg, 2000, true, 'success')
|
|
|
- setTimeout(() => {
|
|
|
- this.getOrderDatainit(this.currentTab)
|
|
|
- }, 2000)
|
|
|
- } catch (error) {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- }
|
|
|
- },
|
|
|
- async cancelOrder() {
|
|
|
- //取消订单
|
|
|
- try {
|
|
|
- const res = await this.OrderService.CancelOrder({ shopOrderId: this.handleOrderId, userIdentity: 0 })
|
|
|
- this.$util.msg(res.msg, 2000, true, 'success')
|
|
|
- setTimeout(() => {
|
|
|
- this.getOrderDatainit(this.currentTab)
|
|
|
- }, 2000)
|
|
|
- } catch (error) {
|
|
|
- this.$util.msg(error.msg, 2000)
|
|
|
- }
|
|
|
- },
|
|
|
- handlSearchPath() {
|
|
|
- this.$api.navigateTo('/pages/search/search-order')
|
|
|
- },
|
|
|
- handButtonShareConfirm(data) {
|
|
|
- this.handleOrderId = data
|
|
|
- },
|
|
|
- onShareAppMessage(res) {
|
|
|
- console.log(res)
|
|
|
- //分享转发
|
|
|
- this.isShareModal = false
|
|
|
- if (res.from === 'button') {
|
|
|
- // 来自页面内转发按钮
|
|
|
- }
|
|
|
- return {
|
|
|
- title: '您有新的分享订单,快来查看吧~',
|
|
|
- path: `/pages/user/order/order-sharelogin?shopOrderId=${this.handleOrderId}&userId=${
|
|
|
- this.listQuery.userId
|
|
|
- }`,
|
|
|
- imageUrl: 'https://static.caimei365.com/app/mini-mcare/icon/icon_shareOrder@2x.png'
|
|
|
- }
|
|
|
- },
|
|
|
- orderPriceToFixed(n) {
|
|
|
- let price = ''
|
|
|
- price = n.toFixed(2)
|
|
|
- return price
|
|
|
- },
|
|
|
- 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 - self.CustomBar
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- setHeaderBtnPosi() {
|
|
|
- // 获得胶囊按钮位置信息
|
|
|
- let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
|
|
|
- return headerBtnPosi
|
|
|
- },
|
|
|
- setSysteminfo() {
|
|
|
- let systeminfo
|
|
|
- uni.getSystemInfo({
|
|
|
- // 获取设备信息
|
|
|
- success: res => {
|
|
|
- systeminfo = res
|
|
|
- }
|
|
|
- })
|
|
|
- return systeminfo
|
|
|
- },
|
|
|
- PromotionsFormat(promo) {
|
|
|
- //促销活动类型数据处理
|
|
|
- if (promo != null) {
|
|
|
- if (promo.type == 1 && promo.mode == 1) {
|
|
|
- return true
|
|
|
- } else {
|
|
|
- return false
|
|
|
- }
|
|
|
- }
|
|
|
- return false
|
|
|
- },
|
|
|
- StateExpFormat(state) {
|
|
|
- //订单状态文字和颜色
|
|
|
- var HtmlStateText = '',
|
|
|
- stateTextObject = {
|
|
|
- 0: '待确认',
|
|
|
- 2: '交易完成',
|
|
|
- 4: '已关闭',
|
|
|
- 5: '交易全退',
|
|
|
- 6: '交易全退',
|
|
|
- 11: '待付款待发货',
|
|
|
- 12: '待付款部分发货',
|
|
|
- 13: '待付款已发货',
|
|
|
- 21: '部分付款待发货',
|
|
|
- 22: '部分付款部分发货',
|
|
|
- 23: '部分付款已发货',
|
|
|
- 31: '已付款待发货',
|
|
|
- 32: '已付款部分发货',
|
|
|
- 33: '已付款已发货'
|
|
|
- }
|
|
|
- Object.keys(stateTextObject).forEach(function(key) {
|
|
|
- if (key == state) {
|
|
|
- HtmlStateText = stateTextObject[key]
|
|
|
- }
|
|
|
- })
|
|
|
- return HtmlStateText
|
|
|
- },
|
|
|
- handleBeanlClick() {
|
|
|
- //关闭采美豆弹窗
|
|
|
- this.isActivityBean = false
|
|
|
- this.getOrderDatainit(this.currentTab)
|
|
|
- }
|
|
|
- },
|
|
|
- onPageScroll(e) {
|
|
|
- this.scrollTop = e.scrollTop
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- this.isModalLayer = false
|
|
|
- }
|
|
|
+ components: {
|
|
|
+ headerBack,
|
|
|
+ empty,
|
|
|
+ btSearch,
|
|
|
+ modalLayer,
|
|
|
+ cmListButton,
|
|
|
+ cmSharePopup
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ CustomBar: this.CustomBar, // 顶部导航栏高度
|
|
|
+ headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
|
|
|
+ systeminfo: this.setSysteminfo(), //获取设备信息
|
|
|
+ winHeight: '', //窗口高度
|
|
|
+ nvabarData: {
|
|
|
+ //顶部自定义导航
|
|
|
+ showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
|
|
|
+ showSearch: 1,
|
|
|
+ title: '我的订单' // 导航栏 中间的标题
|
|
|
+ },
|
|
|
+ orderTabBar: [
|
|
|
+ { state: 0, text: '全部订单', orderList: [] },
|
|
|
+ { state: 1, text: '待确认', orderList: [] },
|
|
|
+ { state: 2, text: '待付款', orderList: [] },
|
|
|
+ { state: 3, text: '待发货', orderList: [] },
|
|
|
+ { state: 4, text: '已发货', orderList: [] },
|
|
|
+ { state: 5, text: '退货/款', orderList: [] }
|
|
|
+ ],
|
|
|
+ currentTab: 0, //预设当前项的值
|
|
|
+ scrollLeft: 0, //tab标题的滚动条位置
|
|
|
+ listQuery: {
|
|
|
+ orderState: 0,
|
|
|
+ userId: 0,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10
|
|
|
+ },
|
|
|
+ orderData: [],
|
|
|
+ scrollTop: 0,
|
|
|
+ skeletonShow: true,
|
|
|
+ isDelete: false,
|
|
|
+ isClickChange: false,
|
|
|
+ isShareModal: false, //控制分享弹窗
|
|
|
+ isModalLayer: false,
|
|
|
+ loadding: false,
|
|
|
+ pullUpOn: true,
|
|
|
+ hasNextPage: false,
|
|
|
+ pullFlag: true,
|
|
|
+ navbarHeight: '',
|
|
|
+ modelType: 0,
|
|
|
+ nomoreText: '上拉显示更多',
|
|
|
+ isOnloadFlag: false,
|
|
|
+ handleShopOrderId: 0, //点击按钮传入的的订单ID
|
|
|
+ handleModelEven: 0,
|
|
|
+ modal: false,
|
|
|
+ contentModalText: '订单查询失败,请稍候重试~', //操作文字提示语句
|
|
|
+ modalButton: [
|
|
|
+ {
|
|
|
+ text: '取消',
|
|
|
+ type: 'gray',
|
|
|
+ plain: true //是否空心
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '确定',
|
|
|
+ customStyle: {
|
|
|
+ color: '#fff',
|
|
|
+ bgColor: '#F3B574'
|
|
|
+ },
|
|
|
+ plain: false
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(e) {
|
|
|
+ if (e.type === 'detele') {
|
|
|
+ this.isDelete = true
|
|
|
+ }
|
|
|
+ this.currentTab = e.state
|
|
|
+ console.log('currentTab', this.currentTab)
|
|
|
+ this.isOnloadFlag = true
|
|
|
+ this.getHeaderTopHeight() //设置自定义导航高度
|
|
|
+ this.initStorage()
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ NumFormat(value) {
|
|
|
+ //处理金额
|
|
|
+ return Number(value).toFixed(2)
|
|
|
+ },
|
|
|
+ statusFilters(value) {
|
|
|
+ //处理订单状态显示
|
|
|
+ const map = {
|
|
|
+ 0: '待确认',
|
|
|
+ 2: '交易完成',
|
|
|
+ 4: '已关闭',
|
|
|
+ 5: '交易全退',
|
|
|
+ 6: '交易全退',
|
|
|
+ 11: '待付款待发货',
|
|
|
+ 12: '待付款部分发货',
|
|
|
+ 13: '待付款已发货',
|
|
|
+ 21: '部分付款待发货',
|
|
|
+ 22: '部分付款部分发货',
|
|
|
+ 23: '部分付款已发货',
|
|
|
+ 31: '已付款待发货',
|
|
|
+ 32: '已付款部分发货',
|
|
|
+ 33: '已付款已发货'
|
|
|
+ }
|
|
|
+ return map[value]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async initStorage() {
|
|
|
+ //初始化
|
|
|
+ const usrInfo = await this.$api.getStorage()
|
|
|
+ this.listQuery.userId = usrInfo.userId ? usrInfo.userId : 0
|
|
|
+ this.getOrderDatainit(this.currentTab)
|
|
|
+ },
|
|
|
+ // 滚动切换标签样式
|
|
|
+ onChange: function(e) {
|
|
|
+ let tabIndex = e.target.current || e.detail.current
|
|
|
+ if (this.isClickChange) {
|
|
|
+ this.currentTab = tabIndex
|
|
|
+ this.isClickChange = false
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.isClickChange = false
|
|
|
+ this.currentTab = tabIndex
|
|
|
+ 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.listQuery.pageNum = 1
|
|
|
+ this.pullUpOn = true //切换时隐藏
|
|
|
+ this.loadding = false //切换时隐藏
|
|
|
+ this.getOrderDatainit(this.currentTab)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //判断当前滚动超过一屏时,设置tab标题滚动条。
|
|
|
+ checkCor: function() {
|
|
|
+ if (this.currentTab > 3) {
|
|
|
+ //这里距离按实际计算
|
|
|
+ this.scrollLeft = 300
|
|
|
+ } else {
|
|
|
+ this.scrollLeft = 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getOrderDatainit(index, source) {
|
|
|
+ let orderItem = this.orderTabBar[index]
|
|
|
+ if (source === 'tabChange' && orderItem.loaded === true) {
|
|
|
+ //tab切换只有第一次需要加载数据
|
|
|
+ return
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ this.listQuery.pageNum = 1
|
|
|
+ this.listQuery.orderState = index
|
|
|
+ const res = await this.OrderService.QueryOrderList(this.listQuery)
|
|
|
+ const data = res.data
|
|
|
+ if (data.list.length > 0) {
|
|
|
+ const orderList = data.list
|
|
|
+ orderItem.orderList = []
|
|
|
+ orderList.forEach(item => {
|
|
|
+ orderItem.orderList.push(item)
|
|
|
+ })
|
|
|
+ //loaded新字段用于表示数据加载完毕,如果为空可以显示空白页
|
|
|
+ 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 = '已至底部'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$set(orderItem, 'loaded', true)
|
|
|
+ orderItem.orderList = []
|
|
|
+ }
|
|
|
+ this.skeletonShow = false
|
|
|
+ this.isOnloadFlag = false
|
|
|
+ } catch (error) {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getOnReachBottomData(index) {
|
|
|
+ //上拉加载
|
|
|
+ try {
|
|
|
+ this.listQuery.pageNum += 1
|
|
|
+ this.listQuery.orderState = this.orderTabBar[index].state
|
|
|
+ const res = await this.OrderService.QueryOrderList(this.listQuery)
|
|
|
+ const data = res.data
|
|
|
+ const orderItem = this.orderTabBar[index]
|
|
|
+ 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(shopOrderId, orderId) {
|
|
|
+ //订单详情跳转
|
|
|
+ this.isModalLayer = true
|
|
|
+ this.$api.navigateTo(`/pages/user/order/order-details?state=${this.currentTab}&shopOrderId=${shopOrderId}`)
|
|
|
+ },
|
|
|
+ handButtonConfirm(data) {
|
|
|
+ console.log(data)
|
|
|
+ //获取点击
|
|
|
+ this.handleShopOrderId = data.order.shopOrderId
|
|
|
+ switch (data.type) {
|
|
|
+ case 'cancel':
|
|
|
+ //取消订单
|
|
|
+ this.modal = true
|
|
|
+ this.contentModalText = '确认取消该订单吗?'
|
|
|
+ this.handleModelEven = 1
|
|
|
+ break
|
|
|
+ case 'confirm':
|
|
|
+ //确认收货
|
|
|
+ this.modal = true
|
|
|
+ this.contentModalText = '确认收货吗?'
|
|
|
+ this.handleModelEven = 2
|
|
|
+ break
|
|
|
+ case 'delete': //删除订单
|
|
|
+ this.modal = true
|
|
|
+ this.contentModalText = '确认删除该订单吗?'
|
|
|
+ this.handleModelEven = 3
|
|
|
+ break
|
|
|
+ case 'confirmation': // 确认订单
|
|
|
+ this.modal = true
|
|
|
+ this.contentModalText = '确认此订单吗?'
|
|
|
+ this.handleModelEven = 4
|
|
|
+ break
|
|
|
+ case 'pay':
|
|
|
+ this.orderPaymentValidation()
|
|
|
+ break
|
|
|
+ case 'query':
|
|
|
+ this.$api.navigateTo('/pages/user/order/order-logistics?shopOrderId=' + this.handleShopOrderId)
|
|
|
+ break
|
|
|
+ case 'upload':
|
|
|
+ this.$api.navigateTo('/pages/user/order/order-addpay?shopOrderId=' + this.handleShopOrderId)
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async orderPaymentValidation() {
|
|
|
+ //监听根据付款状态做操作
|
|
|
+ try {
|
|
|
+ const res = await this.OrderService.OrderPaymentValidation({ shopOrderId: this.handleShopOrderId })
|
|
|
+ this.$api.navigateTo(`/pages/user/order/order-pay-list?shopOrderId=${res.data.shopOrderId}`)
|
|
|
+ } catch (error) {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClick(e) {
|
|
|
+ //确认操作
|
|
|
+ if (e.index == 1) {
|
|
|
+ switch (this.handleModelEven) {
|
|
|
+ case 1: //取消订单
|
|
|
+ this.cancelOrder()
|
|
|
+ break
|
|
|
+ case 2: //确认收货
|
|
|
+ this.confirmReceipt()
|
|
|
+ break
|
|
|
+ case 3: //删除订单
|
|
|
+ this.deleteOrder()
|
|
|
+ break
|
|
|
+ case 4: //确认订单
|
|
|
+ this.affirmOrder()
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.modal = false
|
|
|
+ },
|
|
|
+ async confirmReceipt() {
|
|
|
+ //确认收货
|
|
|
+ try {
|
|
|
+ const res = await this.OrderService.ConfirmReceipt({ shopOrderId: this.handleShopOrderId })
|
|
|
+ this.$util.msg(res.msg, 2000, true, 'success')
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getOrderDatainit(this.currentTab)
|
|
|
+ }, 2000)
|
|
|
+ } catch (error) {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async cancelOrder() {
|
|
|
+ //取消订单
|
|
|
+ try {
|
|
|
+ const res = await this.OrderService.CancelOrder({ shopOrderId: this.handleShopOrderId, userIdentity: 0 })
|
|
|
+ this.$util.msg(res.msg, 2000, true, 'success')
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getOrderDatainit(this.currentTab)
|
|
|
+ }, 2000)
|
|
|
+ } catch (error) {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //删除订单
|
|
|
+ async deleteOrder() {
|
|
|
+ try {
|
|
|
+ const res = await this.OrderService.DeleteOrder({ shopOrderId: this.handleShopOrderId })
|
|
|
+ this.$util.msg(res.msg, 2000, true, 'success')
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getOrderDatainit(this.currentTab)
|
|
|
+ }, 2000)
|
|
|
+ } catch (error) {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //确认订单
|
|
|
+ async affirmOrder() {
|
|
|
+ try {
|
|
|
+ const res = await this.OrderService.AffirmOrder({ shopOrderId: this.handleShopOrderId })
|
|
|
+ this.$util.msg(res.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/order-search')
|
|
|
+ },
|
|
|
+ handButtonShareConfirm(data) {
|
|
|
+ this.handleShopOrderId = data
|
|
|
+ },
|
|
|
+ onShareAppMessage(res) {
|
|
|
+ console.log(res)
|
|
|
+ //分享转发
|
|
|
+ this.isShareModal = false
|
|
|
+ if (res.from === 'button') {
|
|
|
+ // 来自页面内转发按钮
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ title: '您有新的分享订单,快来查看吧~',
|
|
|
+ path: `/pages/user/order/order-sharelogin?shopOrderId=${this.handleShopOrderId}&userId=${
|
|
|
+ this.listQuery.userId
|
|
|
+ }`,
|
|
|
+ imageUrl: 'https://static.caimei365.com/app/mini-mcare/icon/icon_shareOrder@2x.png'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ orderPriceToFixed(n) {
|
|
|
+ let price = ''
|
|
|
+ price = n.toFixed(2)
|
|
|
+ return price
|
|
|
+ },
|
|
|
+ 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 - self.CustomBar
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ setHeaderBtnPosi() {
|
|
|
+ // 获得胶囊按钮位置信息
|
|
|
+ let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
|
|
|
+ return headerBtnPosi
|
|
|
+ },
|
|
|
+ setSysteminfo() {
|
|
|
+ let systeminfo
|
|
|
+ uni.getSystemInfo({
|
|
|
+ // 获取设备信息
|
|
|
+ success: res => {
|
|
|
+ systeminfo = res
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return systeminfo
|
|
|
+ },
|
|
|
+ PromotionsFormat(promo) {
|
|
|
+ //促销活动类型数据处理
|
|
|
+ if (promo != null) {
|
|
|
+ if (promo.type == 1 && promo.mode == 1) {
|
|
|
+ return true
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPageScroll(e) {
|
|
|
+ this.scrollTop = e.scrollTop
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.isModalLayer = false
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
/*tabbar start*/
|
|
|
::-webkit-scrollbar {
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- color: transparent;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ color: transparent;
|
|
|
}
|
|
|
.order-section-top {
|
|
|
- width: 100%;
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 99;
|
|
|
- background: #ffffff;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
+ padding: 0;
|
|
|
+ height: 80rpx;
|
|
|
+ min-width: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ margin: 0 28rpx;
|
|
|
+ display: inline-block;
|
|
|
+ text-align: center;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
.tab-bar-title {
|
|
|
- height: 80rpx;
|
|
|
- line-height: 80rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: $text-color;
|
|
|
}
|
|
|
|
|
|
.active {
|
|
|
- border-bottom: 6rpx solid $color-system;
|
|
|
+ border-bottom: 6rpx solid $color-system;
|
|
|
}
|
|
|
|
|
|
.active .tab-bar-title {
|
|
|
- color: $color-system !important;
|
|
|
+ color: $color-system !important;
|
|
|
}
|
|
|
|
|
|
/*tabbar end*/
|
|
|
.scoll-y {
|
|
|
- height: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
page {
|
|
|
- background: #f7f7f7;
|
|
|
+ background: #f7f7f7;
|
|
|
}
|
|
|
.container {
|
|
|
- padding-bottom: env(safe-area-inset-bottom);
|
|
|
- height: auto;
|
|
|
- position: relative;
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
+ height: auto;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
.tui-order-content {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
}
|
|
|
.tui-order-list {
|
|
|
- margin-top: 90rpx;
|
|
|
- width: 100%;
|
|
|
- position: relative;
|
|
|
+ margin-top: 90rpx;
|
|
|
+ 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;
|
|
|
+ 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;
|
|
|
- .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: 0;
|
|
|
- top: 9rpx;
|
|
|
- }
|
|
|
- .bage-buss {
|
|
|
- display: inline-block;
|
|
|
- width: 72rpx;
|
|
|
- height: 30rpx;
|
|
|
- background: radial-gradient(circle, rgba(255, 39, 180, 1) 0%, rgba(193, 77, 245, 1) 100%);
|
|
|
- border-radius: 4rpx;
|
|
|
- line-height: 30rpx;
|
|
|
- font-size: $font-size-22;
|
|
|
- text-align: center;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- .bage-auto {
|
|
|
- display: inline-block;
|
|
|
- width: 72rpx;
|
|
|
- height: 30rpx;
|
|
|
- background: radial-gradient(circle, rgba(255, 180, 39, 1) 0%, rgba(245, 142, 77, 1) 100%);
|
|
|
- border-radius: 4rpx;
|
|
|
- line-height: 30rpx;
|
|
|
- font-size: $font-size-22;
|
|
|
- text-align: center;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- .bage-text {
|
|
|
- display: inline-block;
|
|
|
- font-size: $font-size-28;
|
|
|
- line-height: 68rpx;
|
|
|
- text-align: left;
|
|
|
- color: $text-color;
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .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: lef;
|
|
|
- }
|
|
|
- .order-title-tip {
|
|
|
- float: right;
|
|
|
- font-size: $font-size-28;
|
|
|
- line-height: 40rpx;
|
|
|
- text-align: right;
|
|
|
- color: #ff2a2a;
|
|
|
- }
|
|
|
- }
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ .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: 4rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ float: right;
|
|
|
+ &.buss {
|
|
|
+ background: radial-gradient(circle, rgba(255, 39, 180, 1) 0%, rgba(193, 77, 245, 1) 100%);
|
|
|
+ }
|
|
|
+ &.auto {
|
|
|
+ background: radial-gradient(circle, rgba(255, 180, 39, 1) 0%, rgba(245, 142, 77, 1) 100%);
|
|
|
+ }
|
|
|
+ &.ebate {
|
|
|
+ background: #ff7a51;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order-title-tip {
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ line-height: 68rpx;
|
|
|
+ text-align: right;
|
|
|
+ color: #ff2a2a;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.goods-title {
|
|
|
- width: 100%;
|
|
|
- height: 56rpx;
|
|
|
- float: left;
|
|
|
- margin-top: 10rpx;
|
|
|
- .order-title-tip {
|
|
|
- float: right;
|
|
|
- font-size: $font-size-28;
|
|
|
- line-height: 40rpx;
|
|
|
- text-align: right;
|
|
|
- color: #ff2a2a;
|
|
|
- }
|
|
|
- .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;
|
|
|
- .iconfont {
|
|
|
- color: #999999;
|
|
|
- font-size: 28rpx;
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
- .paymenttext {
|
|
|
- color: #f9a94b;
|
|
|
- font-size: $font-size-22;
|
|
|
- margin-left: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ width: 100%;
|
|
|
+ height: 56rpx;
|
|
|
+ float: left;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ .order-title-tip {
|
|
|
+ float: right;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ line-height: 40rpx;
|
|
|
+ text-align: right;
|
|
|
+ color: #ff2a2a;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ .iconfont {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ .paymenttext {
|
|
|
+ color: #f9a94b;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.goods-item {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
+ 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;
|
|
|
- .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: 210rpx;
|
|
|
- height: 210rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- border: 1px solid #f3f3f3;
|
|
|
- }
|
|
|
- }
|
|
|
+ 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;
|
|
|
+ .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: 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: 30rpx 0;
|
|
|
- }
|
|
|
- .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;
|
|
|
- }
|
|
|
+ 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: 30rpx 0;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
- margin-top: 20rpx;
|
|
|
- .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;
|
|
|
- color: $text-color;
|
|
|
- .count {
|
|
|
- width: 50%;
|
|
|
- float: left;
|
|
|
- text-align: left;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .money {
|
|
|
- width: 50%;
|
|
|
- float: right;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- }
|
|
|
+ width: 100%;
|
|
|
+ height: 78rpx;
|
|
|
+ float: left;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ .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;
|
|
|
+ color: $text-color;
|
|
|
+ .count {
|
|
|
+ width: 50%;
|
|
|
+ float: left;
|
|
|
+ text-align: left;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .money {
|
|
|
+ width: 50%;
|
|
|
+ float: right;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|