|
|
@@ -1,12 +1,228 @@
|
|
|
<template>
|
|
|
<view class="order-page">
|
|
|
- 123
|
|
|
+ <view class="top-view">
|
|
|
+ <view class="top-row">
|
|
|
+ <text class="header-item"> 客户</text>
|
|
|
+ <text class="header-item">总欠款 </text>
|
|
|
+ </view>
|
|
|
+ <view class="top-row">
|
|
|
+ <view class="info-item">
|
|
|
+ <image
|
|
|
+ class="logo"
|
|
|
+ src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3225163326,3627210682&fm=26&gp=0.jpg"
|
|
|
+ />
|
|
|
+ <text class="name">
|
|
|
+ {{ customInfo.name || "1221" }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="price-item">
|
|
|
+ {{ totalAmount || "121212" }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <scroll-view
|
|
|
+ scroll-y
|
|
|
+ class="shop-list"
|
|
|
+ >
|
|
|
+ <block>
|
|
|
+ <gatheringList
|
|
|
+ v-for="(item, index) in detailsList"
|
|
|
+ :key="index"
|
|
|
+ :isEdit="true"
|
|
|
+ :isCheck="item.checked"
|
|
|
+ :info="item"
|
|
|
+ @click.native="checkItemEvent(item)"
|
|
|
+ ></gatheringList>
|
|
|
+ </block>
|
|
|
+ <block>
|
|
|
+ </block>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="bar-view">
|
|
|
+ <template v-if="!isBatch">
|
|
|
+ <view class="info-view">
|
|
|
+ <text
|
|
|
+ class="iconfont iconxuanzhong"
|
|
|
+ v-if="isCheck"
|
|
|
+ > </text>
|
|
|
+ <text
|
|
|
+ class="iconfont iconweixuanzhong"
|
|
|
+ v-else
|
|
|
+ > </text>
|
|
|
+ 已选 <text class="price">1231312</text> 笔，
|
|
|
+ ￥<text class="price">123123</text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <view class="info-view">
|
|
|
+
|
|
|
+ <text class="unit">¥</text>
|
|
|
+ <text class="price">213123123</text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <view
|
|
|
+ class="btn-view"
|
|
|
+ v-if="isBatch"
|
|
|
+ >
|
|
|
+ <button
|
|
|
+ :class="['admin-button-com', 'disable']"
|
|
|
+ @click="isBatch = false"
|
|
|
+ > 取消</button>
|
|
|
+ <button
|
|
|
+ :class="['admin-button-com', 'blue']"
|
|
|
+ @click="batchEvent"
|
|
|
+ >收款</button>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="btn-view"
|
|
|
+ v-else
|
|
|
+ >
|
|
|
+ <button
|
|
|
+ class="admin-button-com blue"
|
|
|
+ @click="isBatch = true"
|
|
|
+ >
|
|
|
+ 批量收款
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
-
|
|
|
+import gatheringList from './components/gatheringList'
|
|
|
+import { purchaseDebtList } from "@/api/purchase/index";
|
|
|
export default {
|
|
|
+ components: { gatheringList },
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ checkShow: true,
|
|
|
+ detailsList: [],
|
|
|
+ num: "",
|
|
|
+ customInfo: "",
|
|
|
+ totalAmount: "",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.initData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initData () {
|
|
|
+ purchaseDebtList().then(res => {
|
|
|
+ console.log(res)
|
|
|
+ this.detailsList = res.data.list.map(ele => {
|
|
|
+ return {
|
|
|
+ ...ele,
|
|
|
+ checked: false
|
|
|
+ };
|
|
|
+ });
|
|
|
+ }).catch(err => { console.log(err) })
|
|
|
+ },
|
|
|
+ checkItemEvent (item) {
|
|
|
+ for (let index = 0; index < this.detailsList.length; index++) {
|
|
|
+ const element = this.detailsList[index].id;
|
|
|
+ if (element == item.id) {
|
|
|
+ //id相等选中
|
|
|
+ this.$set(this.detailsList, index, {
|
|
|
+ ...this.detailsList[index],
|
|
|
+ checked: !this.detailsList[index].checked
|
|
|
+ });
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
+.order-page {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #f9fbfc;
|
|
|
+ .top-view {
|
|
|
+ padding: 30upx;
|
|
|
+ background-color: #fff;
|
|
|
+ .top-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ &:not(:last-child) {
|
|
|
+ margin-bottom: 10upx;
|
|
|
+ }
|
|
|
+ .header-item {
|
|
|
+ font-size: 24upx;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .info-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .logo {
|
|
|
+ margin-right: 10upx;
|
|
|
+ width: 50upx;
|
|
|
+ height: 50upx;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ font-size: 28upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price-item {
|
|
|
+ font-size: 34upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .shop-list {
|
|
|
+ padding: 20upx 0;
|
|
|
+ flex: 1;
|
|
|
+ padding-bottom: 50upx;
|
|
|
+ }
|
|
|
+ .bar-view {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 30upx;
|
|
|
+ width: 100%;
|
|
|
+ height: 100upx;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: 0px -1px 6px 0px rgba(4, 0, 0, 0.06);
|
|
|
+ .info-view {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #333;
|
|
|
+ font-size: 24upx;
|
|
|
+ .iconfont {
|
|
|
+ font-size: 32upx;
|
|
|
+ color: #dddddd;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ margin: 0 5upx;
|
|
|
+ color: $redColor;
|
|
|
+ font-size: 32upx;
|
|
|
+ }
|
|
|
+ .unit {
|
|
|
+ margin: 0 10upx;
|
|
|
+ color: $redColor;
|
|
|
+ font-size: 16upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-view {
|
|
|
+ display: flex;
|
|
|
+ .admin-button-com {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 0 10upx;
|
|
|
+ width: 200upx;
|
|
|
+ height: 70upx;
|
|
|
+ // line-height: 70upx;
|
|
|
+ font-size: 32upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
wangn