|
|
@@ -0,0 +1,1020 @@
|
|
|
+<template>
|
|
|
+ <view class="search-container">
|
|
|
+ <!-- <or-search :theme="themeClass" @getSearchText="getSearchText"></or-search> -->
|
|
|
+ <view class="search-main">
|
|
|
+ <view class="search">
|
|
|
+ <view class="search-input">
|
|
|
+ <text class="iconfont icon-iconfonticonfontsousuo1"></text>
|
|
|
+ <input
|
|
|
+ maxlength="20"
|
|
|
+ focus
|
|
|
+ type="text"
|
|
|
+ value=""
|
|
|
+ confirm-type="search"
|
|
|
+ @focus="onFocus"
|
|
|
+ @input="onShowClose"
|
|
|
+ @confirm="subMitSearch()"
|
|
|
+ placeholder="请输入商品关键词"
|
|
|
+ v-model.trim="listQuery.searchWord"
|
|
|
+ />
|
|
|
+ <text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
|
|
|
+ </view>
|
|
|
+ <view class="search-btn" @click="subMitSearch()">搜索</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="search-container-history" v-if="!isShowWrapper">
|
|
|
+ <view :class="'s-' + themeClass" v-if="serachRecordList.length > 0">
|
|
|
+ <view class="header">
|
|
|
+ 搜索历史 <text class="iconfont icon-shanchu" @click="confirmDetele"></text>
|
|
|
+ </view>
|
|
|
+ <view class="list">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in serachRecordList"
|
|
|
+ :key="index"
|
|
|
+ @click="keywordsClick(item.searchWord)"
|
|
|
+ >{{ item.searchWord }}</view
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class=" order-container"
|
|
|
+ v-if="isShowWrapper"
|
|
|
+ :style="{ overflow: 'auto', height: showSkeleton ? windowHeight + 'px' : 'auto' }"
|
|
|
+ >
|
|
|
+ <scroll-view
|
|
|
+ class="tui-skeleton"
|
|
|
+ :style="{ height: scrollHeight + 'px' }"
|
|
|
+ @scrolltolower="scrolltolower"
|
|
|
+ scroll-y
|
|
|
+ >
|
|
|
+ <view :class="{ 'tui-order-list': scrollTop >= 0 }" class="tui-skeleton clearfix">
|
|
|
+ <!-- 空白页 -->
|
|
|
+ <empty v-if="isShowEmpty" :navbarHeight="navbarHeight"></empty>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <view v-else class="tui-order-content">
|
|
|
+ <view
|
|
|
+ class="tui-order-item"
|
|
|
+ v-for="(order, orderIndex) in orderList"
|
|
|
+ :key="orderIndex"
|
|
|
+ @click.stop="detail(order.orderId)"
|
|
|
+ >
|
|
|
+ <view class="order-title">
|
|
|
+ <view class="order-title-t">
|
|
|
+ <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
|
|
|
+ >
|
|
|
+ <text class="bage-text tui-skeleton-fillet">订单编号：{{ order.orderNo }}</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 tui-skeleton-fillet"
|
|
|
+ >下单时间：{{ order.orderTime }}</view
|
|
|
+ >
|
|
|
+ <view class="order-title-tip tui-skeleton-fillet">{{
|
|
|
+ StateExpFormat(order.status)
|
|
|
+ }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <block v-for="(shop, index) in order.shopOrderList" :key="index">
|
|
|
+ <view class="goods-title">
|
|
|
+ <view v-if="shop.shopPromotion" class="floor-item-act">
|
|
|
+ <view class="floor-tags">{{ shop.shopPromotion.name }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="title-text tui-skeleton-fillet">{{ shop.shopName }}</view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="goods-item"
|
|
|
+ v-for="(pros, prosIndex) in shop.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.productType == 2 || pros.productType == 1"
|
|
|
+ >赠品</text
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="pros-product">
|
|
|
+ <view class="producttitle tui-skeleton-fillet">{{ pros.name }}</view>
|
|
|
+ <view
|
|
|
+ class="productspec tui-skeleton-fillet"
|
|
|
+ v-if="pros.productCategory != 2"
|
|
|
+ >规格:{{ 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>
|
|
|
+ </block>
|
|
|
+ <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.productCount }}件商品</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.pendingPayments | NumFormat }}</label
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 底部button -->
|
|
|
+ <order-button
|
|
|
+ ref="orderButton"
|
|
|
+ :status="order.status"
|
|
|
+ :order="order"
|
|
|
+ :onlinePayFlag="order.onlinePayFlag"
|
|
|
+ @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>
|
|
|
+ </view>
|
|
|
+ <!-- 分享弹窗 -->
|
|
|
+ <share-alert v-if="isShareModal" :orderId="btnoRderID" @shareConfirm="onShareAppMessage"> </share-alert>
|
|
|
+ <!-- 透明模态层 -->
|
|
|
+ <modal-layer v-if="isModalLayer"></modal-layer>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import orSearch from '@/components/uni-search/or-search.vue'
|
|
|
+import orderButton from './components/details/orderListButton' //按钮
|
|
|
+import modalLayer from '@/components/modal-layer'
|
|
|
+import empty from './components/empty'
|
|
|
+import shareAlert from '@/components/cm-module/modelAlert/shareAlert' //分享弹窗
|
|
|
+import authorize from '@/common/config/authorize.js'
|
|
|
+const defaultListQuery = {
|
|
|
+ pageNum: 1, // 页码
|
|
|
+ pageSize: 10, // 每页条数
|
|
|
+ userId: 0, // 用户Id
|
|
|
+ searchWord: '' // 搜索关键词
|
|
|
+}
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ orSearch,
|
|
|
+ orderButton,
|
|
|
+ empty,
|
|
|
+ shareAlert,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ listQuery: Object.assign({}, defaultListQuery),
|
|
|
+ themeClass: 'block',
|
|
|
+ isShowClose: false, // 是否显示清空输入框图标
|
|
|
+ isSearchHistory: false, // 是都显示搜索历史
|
|
|
+ serachRecordList: [],
|
|
|
+ isShowWrapper: false,
|
|
|
+ isModallayer: false,
|
|
|
+ isShowEmpty: false,
|
|
|
+ windowHeight: '',
|
|
|
+ showSkeleton: true,
|
|
|
+ orderList: [],
|
|
|
+ btnoRderID: 0, // 点击按钮传入的的订单ID
|
|
|
+ scrollTop: 0,
|
|
|
+ skeletonShow: true,
|
|
|
+ isShareModal: false, // 控制分享弹窗
|
|
|
+ isCenceModal: false, // 控制取消订单弹窗
|
|
|
+ isShowDelModal: false, // 控制删除订单弹窗
|
|
|
+ isModalLayer: false,
|
|
|
+ loadding: false,
|
|
|
+ pullUpOn: true,
|
|
|
+ hasNextPage: false,
|
|
|
+ pullFlag: true,
|
|
|
+ navbarHeight: '',
|
|
|
+ nomoreText: '上拉显示更多',
|
|
|
+ scrollHeight: '',
|
|
|
+ beansType: 1,
|
|
|
+ beanNumber: 0,
|
|
|
+ isActivityBean: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.initGetSerachRecord()
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ NumFormat(value) {
|
|
|
+ //处理金额
|
|
|
+ return Number(value).toFixed(2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ subMitSearch() {
|
|
|
+ if (this.listQuery.searchWord == '') {
|
|
|
+ this.$util.msg('请输入商品关键词', 2000)
|
|
|
+ } else {
|
|
|
+ this.commodityList = []
|
|
|
+ this.getOrderDatainit()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async initGetSerachRecord() {
|
|
|
+ const userInfo = await this.$api.getStorage()
|
|
|
+ this.listQuery.userId = userInfo.userId ? userInfo.userId : 0
|
|
|
+ this.OrderService.SearchOrderHistory({ userId: this.listQuery.userId })
|
|
|
+ .then(response => {
|
|
|
+ this.serachRecordList = response.data
|
|
|
+ if (this.serachRecordList.length > 0) {
|
|
|
+ this.isSearchHistory = true
|
|
|
+ } else {
|
|
|
+ this.isSearchHistory = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onShowClose() {
|
|
|
+ //输入框失去焦点时触发
|
|
|
+ this.inputEmpty(this.listQuery.searchWord)
|
|
|
+ },
|
|
|
+ onFocus() {
|
|
|
+ //输入框获取焦点时触发
|
|
|
+ this.inputEmpty(this.listQuery.searchWord)
|
|
|
+ this.initGetSerachRecord()
|
|
|
+ },
|
|
|
+ delInputText() {
|
|
|
+ //清除输入框内容
|
|
|
+ this.listQuery.searchWord = ''
|
|
|
+ this.isShowClose = false
|
|
|
+ this.isShowWrapper = false
|
|
|
+ this.inputEmpty(this.listQuery.searchWord)
|
|
|
+ this.initGetSerachRecord()
|
|
|
+ },
|
|
|
+ keywordsClick(item) {
|
|
|
+ //关键词搜索与历史搜索
|
|
|
+ this.listQuery.searchWord = item
|
|
|
+ this.isShowClose = true
|
|
|
+ this.subMitSearch()
|
|
|
+ },
|
|
|
+ confirmDetele() {
|
|
|
+ //清空历史记录
|
|
|
+ this.$util.modal('提示', '确定删除历史记录？', '确定', '取消', true, () => {
|
|
|
+ this.OrderService.ClearOrderHistory({ userId: this.listQuery.userId })
|
|
|
+ .then(response => {
|
|
|
+ this.$util.msg('删除记录成功', 2000, true, 'success')
|
|
|
+ this.serachRecordList = []
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ inputEmpty(val) {
|
|
|
+ this.isShowWrapper = false
|
|
|
+ if (val != '') {
|
|
|
+ this.isShowClose = true
|
|
|
+ } else {
|
|
|
+ this.isShowClose = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getOrderDatainit(index, source) {
|
|
|
+ this.OrderService.SearchOrderInfo(this.listQuery)
|
|
|
+ .then(response => {
|
|
|
+ this.isShowWrapper = true
|
|
|
+ this.showSkeleton = true
|
|
|
+ let data = response.data
|
|
|
+ if (data && data.list.length > 0) {
|
|
|
+ let filrerData = data.list.filter(item => {
|
|
|
+ //添加不同状态下订单的表现形式
|
|
|
+ item = Object.assign(item, this.StateExpFormat(item.status))
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ this.orderList = []
|
|
|
+ filrerData.forEach(item => {
|
|
|
+ this.orderList.push(item)
|
|
|
+ })
|
|
|
+ this.hasNextPage = data
|
|
|
+ if (this.hasNextPage) {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
+ } else {
|
|
|
+ if (this.orderList.length < 2) {
|
|
|
+ this.pullUpOn = true
|
|
|
+ } else {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.isShowEmpty = false
|
|
|
+ } else {
|
|
|
+ this.isShowEmpty = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getOnReachBottomData() {
|
|
|
+ //上拉加载
|
|
|
+ this.listQuery.pageNum += 1
|
|
|
+ this.OrderService.SearchOrderInfo(this.listQuery)
|
|
|
+ .then(response => {
|
|
|
+ let data = response.data
|
|
|
+ this.hasNextPage = data.hasNextPage
|
|
|
+ this.orderList = this.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.showSkeleton = false
|
|
|
+ this.getOnReachBottomData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ detail(orderId) {
|
|
|
+ //订单详情跳转
|
|
|
+ this.isModalLayer = true
|
|
|
+ this.$api.navigateTo(`/pages/user/order/order-details?type=search&orderId=${orderId}`)
|
|
|
+ },
|
|
|
+ handButtonConfirm(data) {
|
|
|
+ //获取点击
|
|
|
+ this.handShowAlert(data)
|
|
|
+ this.btnoRderID = data.orderId
|
|
|
+ },
|
|
|
+ handShowAlert(data) {
|
|
|
+ //执行
|
|
|
+ switch (data.type) {
|
|
|
+ case 'delete':
|
|
|
+ this.handOrderDetele(data.orderId)
|
|
|
+ break
|
|
|
+ case 'cancel':
|
|
|
+ this.handCenceConfirm(data.orderId)
|
|
|
+ break
|
|
|
+ case 'query':
|
|
|
+ this.isModalLayer = true
|
|
|
+ this.$api.navigateTo('/pages/user/order/order-logistics?orderId=' + data.orderId)
|
|
|
+ break
|
|
|
+ case 'confirm':
|
|
|
+ this.handOrderConfirm(data.orderId)
|
|
|
+ break
|
|
|
+ case 'confirmation':
|
|
|
+ this.handOrderConfirmation(data.orderId)
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handOrderConfirm(orderId) {
|
|
|
+ //确认收货
|
|
|
+ this.$util.modal('提示', '是否确认收货', '确定', '取消', true, () => {
|
|
|
+ this.OrderService.ConfirmReceipt({ orderId: orderId })
|
|
|
+ .then(response => {
|
|
|
+ this.beansType = 7
|
|
|
+ this.beanNumber = 100
|
|
|
+ this.isActivityBean = true
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handOrderConfirmation(orderId) {
|
|
|
+ //确认订单
|
|
|
+ this.$util.modal('提示', '确认此订单？', '确定', '取消', true, () => {
|
|
|
+ this.OrderService.AffirmOrder({ orderId: orderId })
|
|
|
+ .then(response => {
|
|
|
+ this.$util.msg(response.msg, 2000, true, 'success')
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getOrderDatainit()
|
|
|
+ }, 2000)
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handOrderDetele(orderId) {
|
|
|
+ //删除订单
|
|
|
+ this.$util.modal('提示', '确认删除该订单吗？', '确定', '取消', true, () => {
|
|
|
+ this.OrderService.DeleteOrder({ orderId: orderId })
|
|
|
+ .then(response => {
|
|
|
+ this.$util.msg(response.msg, 2000, true, 'success')
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getOrderDatainit()
|
|
|
+ }, 2000)
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handCenceConfirm(orderId) {
|
|
|
+ //取消订单
|
|
|
+ this.$util.modal('提示', '确认取消该订单吗？', '确定', '取消', true, () => {
|
|
|
+ this.OrderService.CancelOrder({ orderId: orderId , userIdentity : 0})
|
|
|
+ .then(response => {
|
|
|
+ this.$util.msg(response.msg, 2000, true, 'success')
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getOrderDatainit()
|
|
|
+ }, 2000)
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onShareAppMessage(res) {
|
|
|
+ //分享转发
|
|
|
+ this.isShareModal = false
|
|
|
+ if (res.from === 'button') {
|
|
|
+ // 来自页面内转发按钮
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ title: '您有新的分享订单，快来查看吧~',
|
|
|
+ path: `/pages/user/order/order-sharelogin?orderID=${this.btnoRderID}&userId=${this.listQuery.userId}`,
|
|
|
+ imageUrl: 'https://static.caimei365.com/app/img/bg/min-banner.jpg'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setScrollHeight() {
|
|
|
+ const { windowHeight, pixelRatio } = wx.getSystemInfoSync()
|
|
|
+ this.windowHeight = windowHeight - 1
|
|
|
+ this.scrollHeight = windowHeight - 1
|
|
|
+ },
|
|
|
+ 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: '待确认',
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ handleBeanlClick() {
|
|
|
+ //关闭采美豆弹窗
|
|
|
+ this.isActivityBean = false
|
|
|
+ this.getOrderDatainit()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPageScroll(e) {
|
|
|
+ this.scrollTop = e.scrollTop
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.setScrollHeight()
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+@import '@/uni.scss';
|
|
|
+page {
|
|
|
+ background-color: #f7f7f7 !important;
|
|
|
+}
|
|
|
+.search {
|
|
|
+ width: 702rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ padding: 12rpx 24rpx;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: #ffffff;
|
|
|
+ z-index: 1001;
|
|
|
+ .search-input {
|
|
|
+ width: 448rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ padding: 0 68rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ position: relative;
|
|
|
+ background: #f0f0f0;
|
|
|
+ float: left;
|
|
|
+ .icon-iconfonticonfontsousuo1 {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #8a8a8a;
|
|
|
+ position: absolute;
|
|
|
+ left: 24rpx;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ .icon-shanchu1 {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #8a8a8a;
|
|
|
+ position: absolute;
|
|
|
+ right: 24rpx;
|
|
|
+ top: 0;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ width: 448rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-btn {
|
|
|
+ width: 118rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ color: $color-system;
|
|
|
+ font-size: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .voice-icon {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ padding: 16rpx 20rpx 16rpx 0;
|
|
|
+ position: absolute;
|
|
|
+ left: 16rpx;
|
|
|
+ top: 4rpx;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+}
|
|
|
+.search-container {
|
|
|
+ padding-top: 106rpx;
|
|
|
+}
|
|
|
+.s-block {
|
|
|
+ background: #ffffff;
|
|
|
+ .header {
|
|
|
+ font-size: 32rpx;
|
|
|
+ padding: 40rpx 24rpx 22rpx 24rpx;
|
|
|
+ line-height: 42rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ position: relative;
|
|
|
+ .icon-shanchu {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #333333;
|
|
|
+ float: right;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ z-index: 10;
|
|
|
+ font-weight: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding-bottom: 40rpx;
|
|
|
+ view {
|
|
|
+ color: #8a8a8a;
|
|
|
+ font-size: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ margin: 12rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ background-color: #f3f3f3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.s-circle {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .header {
|
|
|
+ font-size: 32rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ border-bottom: 2rpx solid #f9f9f9;
|
|
|
+ position: relative;
|
|
|
+ image {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ padding: 10rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 40rpx;
|
|
|
+ top: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 0 30rpx 20rpx;
|
|
|
+ view {
|
|
|
+ padding: 8rpx 30rpx;
|
|
|
+ margin: 20rpx 30rpx 0 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #8a8a8a;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.wanted-block {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .header {
|
|
|
+ font-size: 32rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ view {
|
|
|
+ width: 50%;
|
|
|
+ color: #8a8a8a;
|
|
|
+ font-size: 28rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ border-top: 2rpx solid #fff;
|
|
|
+ border-left: 2rpx solid #fff;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.wanted-circle {
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .header {
|
|
|
+ font-size: 32rpx;
|
|
|
+ padding: 30rpx;
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 0 30rpx 20rpx;
|
|
|
+ view {
|
|
|
+ padding: 8rpx 30rpx;
|
|
|
+ margin: 20rpx 30rpx 0 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #8a8a8a;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.order-container {
|
|
|
+ scroll-view {
|
|
|
+ height: 100%;
|
|
|
+ overflow: scroll;
|
|
|
+ }
|
|
|
+}
|
|
|
+.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;
|
|
|
+ .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: $color-system;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.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 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 217rpx;
|
|
|
+ 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: 468rpx;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 36rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ position: relative;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ .productprice {
|
|
|
+ height: 48rpx;
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ bottom: 0;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
