|
@@ -0,0 +1,1041 @@
|
|
|
+<template>
|
|
|
+ <view class="container mine clearfix">
|
|
|
+ <view
|
|
|
+ class="tui-header-box first"
|
|
|
+ :style="{ height: isCmcustomClass == 'fiexd' ? CustomBar + 6 + 'px' : CustomBar + 6 + 'px' }"
|
|
|
+ :class="isCmcustomClass"
|
|
|
+ >
|
|
|
+ <view class="header-top" :style="{ paddingTop: top + 'px', lineHeight: CustomBar + 20 + 'px' }"></view>
|
|
|
+ <view class="header-sit">
|
|
|
+ <text
|
|
|
+ class="iconfont icon-shouye1"
|
|
|
+ v-if="isShareType"
|
|
|
+ @click.stop="this.$api.navigateLinkJump()"
|
|
|
+ ></text>
|
|
|
+ <text class="iconfont icon-fanhui" v-else @click.stop="this.$api.navigateBack(1)"></text>
|
|
|
+ <text class="header-sit-text">关联订单</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <tui-skeleton
|
|
|
+ v-if="skeletonShow"
|
|
|
+ backgroundColor="#fafafa"
|
|
|
+ borderRadius="10rpx"
|
|
|
+ :isLoading="true"
|
|
|
+ :loadingType="7"
|
|
|
+ />
|
|
|
+ <view class="container-content" v-else>
|
|
|
+ <view class="tui-header-tabs day clearfix" :style="{ top: CustomBar + 6 + 'px' }">
|
|
|
+ <view v-if="!isShowHeader">
|
|
|
+ <view class="tui-header-top">
|
|
|
+ <view class="title"> 收款信息 </view>
|
|
|
+ <view class="tui-header-button">
|
|
|
+ <!-- <view class="button btn-confirm" @click="toNoSms('/pages/collection/list')">
|
|
|
+ <text class="iconfont icon-wodedingdan"></text> 收款列表
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tui-header-item">
|
|
|
+ <view class="list-title-t">
|
|
|
+ <view class="list-title-tip">
|
|
|
+ <text class="badges">{{ receiptInfo.receiptType | formatReceiptType }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-title-num" :style="{ color: formatColor(receiptInfo.receiptStatus) }">{{
|
|
|
+ receiptInfo.receiptStatus | formatStateType
|
|
|
+ }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="list-title-b">
|
|
|
+ <view class="list-title-b-item ">
|
|
|
+ 收款金额:<text class="text">¥{{ receiptInfo.receiptAmount | NumFormat }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-title-b-item ">
|
|
|
+ 收款账号:<text class="text">{{ receiptInfo.payTypeText }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-title-b">
|
|
|
+ 收款时间:<text class="text">{{ receiptInfo.receiptDate }}</text>
|
|
|
+ </view>
|
|
|
+ <template v-if="receiptInfo.smsContent">
|
|
|
+ <view class="list-title-b">收款短信:</view>
|
|
|
+ <view class="list-title-b sms">
|
|
|
+ <text class="text">{{ receiptInfo.smsContent ? receiptInfo.smsContent : '无' }}</text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <view class="list-icon" v-if="receiptInfo.tipMsg">
|
|
|
+ <image
|
|
|
+ class="list-icon-image"
|
|
|
+ src="https://static.caimei365.com/app/crm/image/icon-noconfirm@2x.png"
|
|
|
+ mode=""
|
|
|
+ v-if="receiptInfo.receiptStatus == 1"
|
|
|
+ ></image>
|
|
|
+ <image
|
|
|
+ class="list-icon-image"
|
|
|
+ src="https://static.caimei365.com/app/crm/image/icon-noaudit@2x.png"
|
|
|
+ mode=""
|
|
|
+ v-if="receiptInfo.receiptStatus == 2"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tui-header-tabmain">
|
|
|
+ <input
|
|
|
+ class="input"
|
|
|
+ type="text"
|
|
|
+ v-model="listQuery.shopName"
|
|
|
+ confirm-type="search"
|
|
|
+ @confirm="subMitSearch()"
|
|
|
+ placeholder="请输入供应商名称/子订单ID"
|
|
|
+ />
|
|
|
+ <text class="iconfont icon-sousuo"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="user-section"
|
|
|
+ :style="{
|
|
|
+ top: isIphoneX ? CustomBar + 260 + 'px' : CustomBar + 250 + 'px',
|
|
|
+ left: 0 + 'px',
|
|
|
+ paddingBottom: isIphoneX ? '178rpx' : '144rpx'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <view class="header-content">
|
|
|
+ <view :class="{ 'tui-order-list': scrollTop >= 0 }" class="clearfix">
|
|
|
+ <!-- 空白页 -->
|
|
|
+ <empty v-if="isEmpty" :typeIndex="currents" :navbarHeight="navbarHeight" />
|
|
|
+ <!-- 列表 -->
|
|
|
+ <view v-else class="tui-order-content">
|
|
|
+ <view class="tui-order-item" v-for="(order, index) in shopOrderList" :key="index">
|
|
|
+ <view class="list-title" @click.stop="orderDetail(order.shopOrderId)">
|
|
|
+ <view class="list-title-t">
|
|
|
+ <view class="list-title-tip">
|
|
|
+ <text
|
|
|
+ class="badges"
|
|
|
+ :class="{
|
|
|
+ success: order.orderType === 1,
|
|
|
+ warning: order.orderType === 0
|
|
|
+ }"
|
|
|
+ >{{ order.orderType | formatOrderType }}</text
|
|
|
+ >
|
|
|
+ <text class="badgesb" v-if="order.secondHandOrderFlag == 1">二手</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-title-tag">
|
|
|
+ <text class="badges">{{ order.organizeId | organizeName }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-title-num">{{
|
|
|
+ order.status | stateExpFormat
|
|
|
+ }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="list-title-a">
|
|
|
+ <view class="list-title-a-text">
|
|
|
+ 子订单编号:<text class="text"
|
|
|
+ >{{ order.shopOrderNo }} ( {{ order.shopOrderId }} )</text
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="list-title-a-text">
|
|
|
+ 下单日期:<text class="text">{{ order.orderTime }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-title-a-text">
|
|
|
+ 供应商名称:<text class="text">{{ order.shopName }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-title-b">
|
|
|
+ 客户名称:<text class="text">{{
|
|
|
+ order.userName ? order.userName : '无'
|
|
|
+ }}</text>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="list-title-b">
|
|
|
+ 子订单金额:<text class="text"
|
|
|
+ >¥{{ order.needPayAmount | NumFormat }}</text
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="list-title-b">
|
|
|
+ 应收金额:<text class="text"
|
|
|
+ >¥{{ order.needPayAmount | NumFormat }}</text
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="list-title-b">
|
|
|
+ 已收金额:<text class="text"
|
|
|
+ >¥{{ order.receiptAmount | NumFormat }}</text
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="list-title-b">
|
|
|
+ 平台服务费:<text class="text"> ¥{{ order.cmCostPrice | NumFormat }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-checked" @click="checkedOrder(order, index)">
|
|
|
+ <text
|
|
|
+ class="iconfont"
|
|
|
+ :class="order.isChecked ? 'icon-yixuanze' : 'icon-weixuanze'"
|
|
|
+ ></text>
|
|
|
+ </view>
|
|
|
+ <view class="list-detail" @click.stop="orderDetail(order.shopOrderId)">
|
|
|
+ <text class="iconfont icon-xiayibu"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!--加载loadding-->
|
|
|
+ <tui-loadmore :visible="loadding" :index="3" type="black" />
|
|
|
+ <tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text="nomoreText" />
|
|
|
+ <!--加载loadding-->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="distinguish-button" :style="{ paddingBottom: isIphoneX ? '68rpx' : '24rpx' }">
|
|
|
+ <view class="button" @click="confirmDistinguish">确认</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 确认关联弹窗 -->
|
|
|
+ <tui-modal
|
|
|
+ :show="modal"
|
|
|
+ @click="handleClick"
|
|
|
+ @cancel="hideMobel(0)"
|
|
|
+ :content="contentModalText"
|
|
|
+ color="#333"
|
|
|
+ :size="32"
|
|
|
+ shape="circle"
|
|
|
+ :maskClosable="false"
|
|
|
+ />
|
|
|
+ <!-- 金额不一致弹窗 -->
|
|
|
+ <tui-modal :show="modal1" :padding="'40rpx 30rpx'" @cancel="hideMobel(1)" :custom="true" fadeIn>
|
|
|
+ <view class="tui-modal-custom">
|
|
|
+ <view class="tui-prompt-text">收款金额与子订单平台服务费不相等,不能关联!</view>
|
|
|
+ <view class="tui-prompt-flex"> <view class="btn btn-confirm" @click="hideMobel(1)">知道了</view> </view>
|
|
|
+ </view>
|
|
|
+ </tui-modal>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import headerBack from '@/components/cm-module/headerNavbar/header-back' //自定义导航
|
|
|
+import modalLayer from '@/components/modal-layer'
|
|
|
+import empty from '@/components/empty'
|
|
|
+import { mapState, mapMutations } from 'vuex'
|
|
|
+const defaultListQuery = {
|
|
|
+ pageNum: 1, //页数
|
|
|
+ pageSize: 10, //条数
|
|
|
+ id: 0,
|
|
|
+ shopName: ''
|
|
|
+}
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ empty
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ CustomBar: this.CustomBar, // 顶部导航栏高度
|
|
|
+ isIphoneX: this.$store.state.isIphoneX,
|
|
|
+ receiptInfo: {},
|
|
|
+ listQuery: Object.assign({}, defaultListQuery),
|
|
|
+ shopOrderList: [],
|
|
|
+ scrollTop: 0,
|
|
|
+ isEmpty: false,
|
|
|
+ loadding: false,
|
|
|
+ pullUpOn: true,
|
|
|
+ hasNextPage: false,
|
|
|
+ pullFlag: true,
|
|
|
+ navbarHeight: '',
|
|
|
+ nomoreText: '上拉显示更多',
|
|
|
+ contentModalText: '确认关联该子订单吗?', //操作文字提示语句
|
|
|
+ modal: false,
|
|
|
+ modal1: false,
|
|
|
+ isCmcustomClass: 'left',
|
|
|
+ isShowHeader: false,
|
|
|
+ height: 64, //header高度
|
|
|
+ top: 0, //标题图标距离顶部距离
|
|
|
+ scrollH: 0, //滚动总高度
|
|
|
+ opcity: 1,
|
|
|
+ checkedOrderList: [],
|
|
|
+ checkedIndex: '',
|
|
|
+ cmCostPrice: 0, // 子订单平台服务费
|
|
|
+ confirmParams: {
|
|
|
+ id: 0,
|
|
|
+ shopOrderId: 0,
|
|
|
+ rebateRemarks: ''
|
|
|
+ },
|
|
|
+ skeletonShow: true,
|
|
|
+ isShareType: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ let obj = {}
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: res => {
|
|
|
+ this.width = obj.left || res.windowWidth
|
|
|
+ this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44
|
|
|
+ this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6
|
|
|
+ this.scrollH = res.windowWidth * 0.6
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (option.type == 'share') {
|
|
|
+ this.isShareType = true
|
|
|
+ }
|
|
|
+ this.confirmParams.id = option.id
|
|
|
+ this.getOrderReceiptDetail(this.confirmParams.id)
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['hasLogin'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getOrderReceiptDetail(id) {
|
|
|
+ // 收款详情
|
|
|
+ this.OrderService.orderReceiptRebateDetails({ id: id })
|
|
|
+ .then(response => {
|
|
|
+ this.receiptInfo = response.data
|
|
|
+ this.getOrderReceiptRebateOrders()
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.$api.navigateTo('/pages/login/login-error')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getOrderReceiptRebateOrders() {
|
|
|
+ // 收款详情-订单列表
|
|
|
+ this.initListQuery()
|
|
|
+ this.OrderService.orderReceiptPlatformOrders(this.listQuery)
|
|
|
+ .then(response => {
|
|
|
+ let data = response.data
|
|
|
+ this.hasNextPage = response.data.hasNextPage
|
|
|
+ if (data.list && data.list.length > 0) {
|
|
|
+ this.isEmpty = false
|
|
|
+ this.shopOrderList = data.list.map((el, index) => {
|
|
|
+ el.isChecked = false
|
|
|
+ return el
|
|
|
+ })
|
|
|
+ this.pullFlag = false
|
|
|
+ setTimeout(() => {
|
|
|
+ this.pullFlag = true
|
|
|
+ }, 500)
|
|
|
+ if (this.hasNextPage) {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
+ } else {
|
|
|
+ if (this.shopOrderList.length < 3) {
|
|
|
+ this.pullUpOn = true
|
|
|
+ this.loadding = false
|
|
|
+ } else {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.loadding = false
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.isEmpty = true
|
|
|
+ }
|
|
|
+ this.skeletonShow = false
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getOnReachBottomData(index) {
|
|
|
+ //上拉加载
|
|
|
+ this.listQuery.pageNum += 1
|
|
|
+ this.OrderService.orderReceiptPlatformOrders(this.listQuery)
|
|
|
+ .then(response => {
|
|
|
+ let data = response.data
|
|
|
+ if (data.list && data.list.length > 0) {
|
|
|
+ this.hasNextPage = data.hasNextPage
|
|
|
+ let list = data.list.map((el, index) => {
|
|
|
+ el.isChecked = false
|
|
|
+ return el
|
|
|
+ })
|
|
|
+ this.shopOrderList = this.shopOrderList.concat(list)
|
|
|
+ this.pullFlag = false // 防上拉暴滑
|
|
|
+ setTimeout(() => {
|
|
|
+ this.pullFlag = true
|
|
|
+ }, 500)
|
|
|
+ if (this.hasNextPage) {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
+ } else {
|
|
|
+ this.pullUpOn = false
|
|
|
+ this.loadding = false
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ subMitSearch() {
|
|
|
+ // 确认搜索
|
|
|
+ this.getOrderReceiptRebateOrders()
|
|
|
+ },
|
|
|
+ checkedOrder(order, index) {
|
|
|
+ // 勾选关联订单
|
|
|
+ this.checkedIndex = index
|
|
|
+ this.shopOrderList.forEach((el, index) => {
|
|
|
+ if (this.checkedIndex == index) {
|
|
|
+ el.isChecked = true
|
|
|
+ this.confirmParams.shopOrderId = el.shopOrderId
|
|
|
+ this.cmCostPrice = el.cmCostPrice
|
|
|
+ } else {
|
|
|
+ el.isChecked = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log('shopOrderId', this.confirmParams.shopOrderId)
|
|
|
+ console.log('cmCostPrice', this.cmCostPrice)
|
|
|
+ },
|
|
|
+ confirmDistinguish() {
|
|
|
+ // 点击确认
|
|
|
+ const list = []
|
|
|
+ this.checkedOrderList.forEach(el => {
|
|
|
+ if (list.indexOf(el.userId) == -1) {
|
|
|
+ list.push(el.userId)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (this.confirmParams.shopOrderId == 0) {
|
|
|
+ this.$util.msg('请选择一个订单!', 2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (this.receiptInfo.receiptAmount != this.cmCostPrice) {
|
|
|
+ this.modal1 = true
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ this.modal = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClick(e) {
|
|
|
+ // 确认关联平台服务费
|
|
|
+ // 通过审核
|
|
|
+ if (e.index == 1) {
|
|
|
+ this.orderReceiptConfirm(this.confirmParams)
|
|
|
+ }
|
|
|
+ this.modal = false
|
|
|
+ },
|
|
|
+ orderReceiptConfirm(params) {
|
|
|
+ //确认关联平台服务费
|
|
|
+ this.OrderService.orderReceiptConfirmPlatform(params)
|
|
|
+ .then(response => {
|
|
|
+ this.$util.msg('关联成功~', 2000, true, 'success')
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$api.redirectTo(`/pages/relation/service/detail?id=${params.id}`)
|
|
|
+ }, 2000)
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ this.$util.msg(error.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ hideMobel(type) {
|
|
|
+ switch (type) {
|
|
|
+ case 0:
|
|
|
+ this.modal = false
|
|
|
+ break
|
|
|
+ case 1:
|
|
|
+ this.modal1 = false
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ formatColor(state) {
|
|
|
+ //设置邀请码状态亚瑟
|
|
|
+ let stateColor = '',
|
|
|
+ stateColorObject = {
|
|
|
+ 1: '#ff7900',
|
|
|
+ 2: '#4cd964',
|
|
|
+ 3: '#19be6b',
|
|
|
+ 4: '#ed3f14',
|
|
|
+ 5: '#F74D54'
|
|
|
+ }
|
|
|
+ Object.keys(stateColorObject).forEach(function(key) {
|
|
|
+ if (key == state) {
|
|
|
+ stateColor = stateColorObject[key]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return stateColor
|
|
|
+ },
|
|
|
+ changeNumber(e) {
|
|
|
+ // 校验输入为数字
|
|
|
+ this.confirmParams.receiptAmount = this.toFixedFn(e.detail.value)
|
|
|
+ console.log('receiptAmount', this.confirmParams.receiptAmount)
|
|
|
+ },
|
|
|
+ toFixedFn(val) {
|
|
|
+ //处理小数点后两位数
|
|
|
+ return Number(Math.round(val * 100) / 100).toFixed(2)
|
|
|
+ },
|
|
|
+ orderDetail(shopOrderId) {
|
|
|
+ //订单详情跳转
|
|
|
+ this.$api.navigateTo(`/pages/relation/order/detail?shopOrderId=${shopOrderId}`)
|
|
|
+ },
|
|
|
+ toNoSms(url) {
|
|
|
+ this.$api.navigateTo(url)
|
|
|
+ },
|
|
|
+ initListQuery() {
|
|
|
+ // 初始化
|
|
|
+ this.shopOrderList = []
|
|
|
+ this.loadding = true
|
|
|
+ this.pullUpOn = true
|
|
|
+ this.listQuery.pageNum = 1
|
|
|
+ },
|
|
|
+ formatReceiptType(value) {
|
|
|
+ //订单状态文字和颜色
|
|
|
+ var HtmlStateText = '',
|
|
|
+ stateTextObject = {
|
|
|
+ 1: '订单款',
|
|
|
+ 2: '非订单款',
|
|
|
+ 3: '返佣款',
|
|
|
+ 4: '订单款或者非订单款',
|
|
|
+ 5: '供应商退款'
|
|
|
+ }
|
|
|
+ Object.keys(stateTextObject).forEach(function(key) {
|
|
|
+ if (key == value) {
|
|
|
+ HtmlStateText = stateTextObject[key]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return HtmlStateText
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPageScroll(e) {
|
|
|
+ //实时获取到滚动的值
|
|
|
+ if (e.scrollTop > 30) {
|
|
|
+ this.isCmcustomClass = 'fiexd'
|
|
|
+ } else {
|
|
|
+ this.isCmcustomClass = 'left'
|
|
|
+ }
|
|
|
+ if (e.scrollTop > 180) {
|
|
|
+ this.isShowHeader = true
|
|
|
+ } else {
|
|
|
+ this.isShowHeader = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ if (this.hasNextPage) {
|
|
|
+ this.loadding = true
|
|
|
+ this.pullUpOn = true
|
|
|
+ this.getOnReachBottomData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPullDownRefresh() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getOrderReceiptRebateOrders()
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ }, 200)
|
|
|
+ },
|
|
|
+ onShareAppMessage(res) {
|
|
|
+ //分享购买优惠券
|
|
|
+ const receipt = this.receiptInfo
|
|
|
+ const receiptTypeText = this.formatReceiptType(receipt.receiptType)
|
|
|
+ if (res.from === 'button') {
|
|
|
+ // console.log('来自页面内转发按钮')
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ title: `¥${receipt.receiptAmount.toFixed(2)} | ${receipt.receiptDate} | ${
|
|
|
+ receipt.receiptStatusText
|
|
|
+ }(${receiptTypeText})`,
|
|
|
+ path: `/pages/login/login-share?id=${receipt.id}`,
|
|
|
+ imageUrl: 'https://static.caimei365.com/app/crm/image/icon-share@2x.jpg'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {}
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+@import '@/uni.scss';
|
|
|
+
|
|
|
+page {
|
|
|
+ background: #f7f7f7;
|
|
|
+}
|
|
|
+
|
|
|
+.tui-header-box {
|
|
|
+ width: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ z-index: 999;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background-size: cover;
|
|
|
+ background-image: url(https://static.caimei365.com/app/crm/image/statistic_bg2.png);
|
|
|
+
|
|
|
+ &.fiexd {
|
|
|
+ }
|
|
|
+
|
|
|
+ &.first {
|
|
|
+ }
|
|
|
+}
|
|
|
+.header-top {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ padding: 0 40rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.header-sit {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: #ffffff;
|
|
|
+ .header-sit-text {
|
|
|
+ text-align: left;
|
|
|
+ font-size: $font-size-40;
|
|
|
+ font-weight: 600;
|
|
|
+ font-family: '正楷';
|
|
|
+ }
|
|
|
+ .iconfont {
|
|
|
+ display: block;
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ float: left;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: 42rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.tui-header-tabs {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: fixed;
|
|
|
+ z-index: 999;
|
|
|
+ box-shadow: 0 10rpx 10rpx 0 rgba(86, 119, 252, 0.2);
|
|
|
+ .tui-header-top {
|
|
|
+ width: 100%;
|
|
|
+ height: 66rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ float: left;
|
|
|
+ .title {
|
|
|
+ float: left;
|
|
|
+ line-height: 66rpx;
|
|
|
+ color: #333333;
|
|
|
+ text-align: left;
|
|
|
+ font-size: $font-size-30;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .tui-header-button {
|
|
|
+ float: right;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 66rpx;
|
|
|
+ padding: 5rpx 0;
|
|
|
+ .button {
|
|
|
+ float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 56rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ &.btn-confirm {
|
|
|
+ background: $btn-confirm;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tui-header-item {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ margin: 10rpx 0;
|
|
|
+ position: relative;
|
|
|
+ float: left;
|
|
|
+ .list-title-t {
|
|
|
+ width: 100%;
|
|
|
+ height: 50rpx;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ .list-title-num {
|
|
|
+ float: left;
|
|
|
+ text-align: left;
|
|
|
+ color: #999999;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-title-tip {
|
|
|
+ float: left;
|
|
|
+
|
|
|
+ .badges {
|
|
|
+ display: block;
|
|
|
+ float: left;
|
|
|
+ padding: 0 15rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ border-radius: 18rpx;
|
|
|
+ background: #ecf5ff;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ text-align: center;
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-title-b {
|
|
|
+ width: 100%;
|
|
|
+ height: 40rpx;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ line-height: 40rpx;
|
|
|
+ color: #666666;
|
|
|
+ text-align: left;
|
|
|
+ .text {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .list-title-b-item {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ &.sms {
|
|
|
+ height: 100rpx;
|
|
|
+ padding: 10rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ .text {
|
|
|
+ height: 100%;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-icon {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ color: #dd524d;
|
|
|
+ z-index: 99;
|
|
|
+ .list-icon-image {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tui-header-tabmain {
|
|
|
+ width: 100%;
|
|
|
+ height: 70rpx;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ .input {
|
|
|
+ width: 100%;
|
|
|
+ height: 70rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ padding-left: 70rpx;
|
|
|
+ background: #f7f7f7;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ }
|
|
|
+ .icon-sousuo {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ display: block;
|
|
|
+ line-height: 70rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #999999;
|
|
|
+ font-size: $font-size-38;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .button-content {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ .btn {
|
|
|
+ height: 64rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ margin: 10rpx 0 0 0;
|
|
|
+ line-height: 64rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ .btn-confirm {
|
|
|
+ background-color: #ff5000;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.distinguish-button {
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 0 50rpx;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ .button {
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ background: $btn-confirm;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.user-section {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.header-content {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ position: relative;
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ .tui-header-btm {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
+.tui-order-list {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.tui-order-content {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.tui-order-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ padding: 20rpx 20rpx;
|
|
|
+ background: #fff;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ position: relative;
|
|
|
+ .list-checked {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ .iconfont {
|
|
|
+ font-size: 38rpx;
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-detail {
|
|
|
+ width: 70rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ .iconfont {
|
|
|
+ font-size: $font-size-32;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.list-title {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+
|
|
|
+ .list-title-t {
|
|
|
+ width: 100%;
|
|
|
+ height: 50rpx;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ padding-bottom: 10rpx;
|
|
|
+ .list-title-tip {
|
|
|
+ float: left;
|
|
|
+ .badges {
|
|
|
+ display: block;
|
|
|
+ float: left;
|
|
|
+ padding: 0 15rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ background-color: #f0f9eb;
|
|
|
+ color: #67c23a;
|
|
|
+ text-align: center;
|
|
|
+ &.success {
|
|
|
+ background-color: #ecf5ff;
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ &.warning {
|
|
|
+ background-color: #fdf6ec;
|
|
|
+ color: #e6a23c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .badgesb {
|
|
|
+ display: block;
|
|
|
+ float: left;
|
|
|
+ padding: 0 15rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background: #f4f4f5;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ text-align: center;
|
|
|
+ color: #909399;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-title-tag {
|
|
|
+ float: left;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ .badges {
|
|
|
+ display: block;
|
|
|
+ float: left;
|
|
|
+ padding: 0 15rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ font-size: $font-size-22;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #ecf5ff;
|
|
|
+ color: #409eff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-title-num {
|
|
|
+ float: left;
|
|
|
+ text-align: left;
|
|
|
+ color: #42b983;
|
|
|
+ line-height: 40rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-title-a {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ // padding: 5rpx 8rpx;
|
|
|
+ // border-radius: 4rpx;
|
|
|
+ // background-color: rgba(247, 247, 247, 1);
|
|
|
+ // margin-bottom: 10rpx;
|
|
|
+ .text {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .list-title-a-text {
|
|
|
+ width: 100%;
|
|
|
+ height: 44rpx;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ line-height: 44rpx;
|
|
|
+ color: #666666;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-title-b {
|
|
|
+ width: 100%;
|
|
|
+ height: 44rpx;
|
|
|
+ float: left;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ line-height: 44rpx;
|
|
|
+ color: #666666;
|
|
|
+ text-align: left;
|
|
|
+ .text {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .list-title-b-item {
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ &.sms {
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.tui-prompt-title {
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.tui-prompt-input {
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #f7f7f7;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ padding: 15rpx 20rpx;
|
|
|
+ padding-left: 50rpx;
|
|
|
+ margin: 20rpx 0;
|
|
|
+ position: relative;
|
|
|
+ .text {
|
|
|
+ display: block;
|
|
|
+ width: 50rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ color: #666666;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .input {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: $color-system;
|
|
|
+ &.none {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.tui-prompt-flex {
|
|
|
+ width: 100%;
|
|
|
+ height: 70rpx;
|
|
|
+ display: flex;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ .btn {
|
|
|
+ flex: 1;
|
|
|
+ line-height: 70rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ border-radius: 33rpx;
|
|
|
+ margin: 0 24rpx;
|
|
|
+ &.btn-cancel {
|
|
|
+ background: #f7f7f7;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ &.btn-confirm {
|
|
|
+ background: $color-system;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.tui-prompt-text {
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #333333;
|
|
|
+ .text {
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|