1536 lines
39 KiB
Vue
1536 lines
39 KiB
Vue
<template>
|
||
<div class="order-details">
|
||
<title-block class="titile-d" title="寄存画作">
|
||
<template #left>
|
||
<div>
|
||
<image
|
||
style="width: 112rpx; height: 52rpx"
|
||
src="https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/785cf885-c4c9-44b3-8155-4b39988c7ef8.png"
|
||
@click="back"
|
||
></image>
|
||
</div>
|
||
</template>
|
||
</title-block>
|
||
<div class="content-list" v-if="listPaintings.length > 1">
|
||
<div class="wrap1">*请注意确认寄存结束时间</div>
|
||
<div class="wrap2">
|
||
<div class="wrap2_1" :style="{ height: `${listHeight}rpx` }">
|
||
<div
|
||
:class="['item', index === currentIndex ? 'active' : '']"
|
||
@click="itemClick(index)"
|
||
v-for="(item, index) of listPaintings"
|
||
>
|
||
<div class="item_1">{{ index + 1 }}</div>
|
||
<div class="item_2">
|
||
<div class="item_2_1">
|
||
<img :src="listPaintings[index].fileList1[0].url" alt="" />
|
||
</div>
|
||
<div class="item_2_2">{{ listPaintings[index].artworkNum }}</div>
|
||
</div>
|
||
<div class="item_3">{{ listPaintings[index].artworkName }}</div>
|
||
<div class="item_4">
|
||
{{
|
||
listPaintings[index].warehouseID
|
||
? addressList.find(
|
||
(x) => x.ID === listPaintings[index].warehouseID
|
||
).address
|
||
: ""
|
||
}}
|
||
</div>
|
||
<div class="item_5">{{ listPaintings[index].endAt }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrap2_2" @click="expand">
|
||
<div
|
||
class="wrap2_2_1"
|
||
v-if="listPaintings.length > 2"
|
||
:style="{
|
||
transform: `translate(-50%, -50%) ${
|
||
isExpand ? 'rotate(180deg)' : ''
|
||
}`,
|
||
}"
|
||
></div>
|
||
<div class="wrap2_2_2">共计{{ listPaintings.length }}幅画作</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<scroll-view
|
||
class="content-center"
|
||
:style="{ marginTop: `${contentListHeight + 10}px` }"
|
||
@scroll="scrollDetail"
|
||
:scroll-into-view="scrollId"
|
||
scroll-y="true"
|
||
>
|
||
<div
|
||
class="content-scroll"
|
||
v-for="(item, index) of listPaintings"
|
||
:id="`item-${index}`"
|
||
>
|
||
<div class="painting-name" v-if="listPaintings.length > 1">
|
||
<div class="wrap1">画作{{ index + 1 }}：</div>
|
||
<div class="wrap2" @click="itemDelete(index)">删除</div>
|
||
</div>
|
||
<div class="content2">
|
||
<u-upload
|
||
:fileList="listPaintings[index].fileList1"
|
||
@afterRead="
|
||
(e) => {
|
||
afterRead(e, index);
|
||
}
|
||
"
|
||
@delete="
|
||
(e) => {
|
||
deletePic(e, index);
|
||
}
|
||
"
|
||
name="6"
|
||
multiple
|
||
:maxCount="1"
|
||
width="404rpx"
|
||
height="306rpx"
|
||
>
|
||
<div
|
||
style="
|
||
width: 404rpx;
|
||
height: 306rpx;
|
||
background: #000;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
"
|
||
>
|
||
<div style="margin-bottom: 14rpx">
|
||
<image
|
||
style="width: 38.32rpx; height: 38.2rpx"
|
||
src="../../static/zu142@3x.png"
|
||
></image>
|
||
</div>
|
||
<div style="font-size: 32rpx; color: #fff">上传画作图片</div>
|
||
</div>
|
||
</u-upload>
|
||
</div>
|
||
<div class="content3">
|
||
<div class="prompt">*扫描自动填入</div>
|
||
<div class="wrap1">
|
||
<div class="wrap1_1">
|
||
<div class="wrap1_1_1">画作编号</div>
|
||
<div class="wrap1_1_2"></div>
|
||
<div class="wrap1_1_3">
|
||
<input
|
||
style="color: #939393; font-size: 24rpx"
|
||
v-model="listPaintings[index].artworkNum"
|
||
placeholder-style="color: #939393;font-size: 24rpx;z-index:0"
|
||
placeholder="请输入画作编号"
|
||
/>
|
||
</div>
|
||
<div class="wrap1_1_4"></div>
|
||
</div>
|
||
<div class="wrap1_1">
|
||
<div class="wrap1_1_1">画作名称</div>
|
||
<div class="wrap1_1_2"></div>
|
||
<div class="wrap1_1_3">
|
||
<input
|
||
style="color: #939393; font-size: 24rpx"
|
||
v-model="listPaintings[index].artworkName"
|
||
placeholder-style="color: #939393;font-size: 24rpx;z-index:0"
|
||
placeholder="请输入画作名称"
|
||
/>
|
||
</div>
|
||
<div class="wrap1_1_4"></div>
|
||
</div>
|
||
<div class="wrap1_1">
|
||
<div class="wrap1_1_1">画家名称</div>
|
||
<div class="wrap1_1_2"></div>
|
||
<div class="wrap1_1_3">
|
||
<input
|
||
style="color: #939393; font-size: 24rpx"
|
||
v-model="listPaintings[index].artistName"
|
||
placeholder-style="color: #939393;font-size: 24rpx;z-index:0"
|
||
placeholder="请输入画家名称"
|
||
/>
|
||
</div>
|
||
<div class="wrap1_1_4"></div>
|
||
</div>
|
||
<div class="wrap1_1">
|
||
<div class="wrap1_1_1">画作平尺数</div>
|
||
<div class="wrap1_1_2"></div>
|
||
<div class="wrap1_1_3">
|
||
<input
|
||
type="number"
|
||
style="color: #939393; font-size: 24rpx"
|
||
v-model="listPaintings[index].artworkSquareSize"
|
||
@input="
|
||
(e) => {
|
||
inputConfirm(e, index);
|
||
}
|
||
"
|
||
placeholder-style="color: #939393;font-size: 24rpx;z-index:0"
|
||
placeholder="请输入画作平尺数"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrap2"></div>
|
||
</div>
|
||
<div class="content4">
|
||
<div class="wrap1">
|
||
<div class="wrap1_1" @click="show2Click(index)">
|
||
<div class="wrap1_1_1">寄存地址</div>
|
||
<div class="wrap1_1_2"></div>
|
||
<div class="wrap1_1_3">
|
||
<input
|
||
style="color: #939393; font-size: 24rpx"
|
||
disabled
|
||
:value="
|
||
listPaintings[index].warehouseID
|
||
? addressList.find(
|
||
(x) => x.ID === listPaintings[index].warehouseID
|
||
).address
|
||
: ''
|
||
"
|
||
placeholder-style="color: #939393;font-size: 24rpx;z-index:0"
|
||
placeholder="请选择寄存地址"
|
||
/>
|
||
</div>
|
||
|
||
<div class="wrap1_1_4"></div>
|
||
<div class="wrap1_1_5">
|
||
<image src="../../static/zu611@3x.png"></image>
|
||
</div>
|
||
</div>
|
||
<div class="wrap1_1" @click="openShow1(index)">
|
||
<div class="wrap1_1_1">寄存时长</div>
|
||
<div class="wrap1_1_2"></div>
|
||
<div class="wrap1_1_3">
|
||
<input
|
||
style="color: #939393; font-size: 24rpx"
|
||
:value="listPaintings[index].endAt"
|
||
disabled
|
||
placeholder-style="color: #939393;font-size: 24rpx;z-index:0"
|
||
placeholder="请选择寄存时长"
|
||
/>
|
||
</div>
|
||
<div class="wrap1_1_5">
|
||
<image src="../../static/zu612@3x.png"></image>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrap2"></div>
|
||
</div>
|
||
<div
|
||
class="content7"
|
||
v-if="index === listPaintings.length - 1"
|
||
@click="addPainting"
|
||
>
|
||
<div class="wrap1">
|
||
<div class="horizontal"></div>
|
||
<div class="vertical"></div>
|
||
</div>
|
||
<div class="wrap2">添加</div>
|
||
</div>
|
||
</div>
|
||
</scroll-view>
|
||
<div class="content5" @click="expand1">
|
||
<div
|
||
class="wrap4"
|
||
v-show="isExpand1"
|
||
:style="{ top: `-${152 * listPaintings.length}rpx` }"
|
||
>
|
||
<div class="item" v-for="(item, index) in listPaintings">
|
||
<div class="item_1">{{ index + 1 }}</div>
|
||
<div class="item_2">{{ item.artworkNum }}</div>
|
||
<div class="item_3">{{ item.artworkName }}</div>
|
||
<div class="item_4">¥ {{ item.expectedPayment }}</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="wrap3"
|
||
:style="{ transform: `${isExpand1 ? '' : 'rotate(180deg)'}` }"
|
||
>
|
||
<img
|
||
src="https://cdns.fontree.cn/fonchain-main/prod/image/default/approval/13639162-2871-4187-abc5-71c2d9f01ac2.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<div class="wrap1">
|
||
<div class="wrap1_1">*仅微信付款</div>
|
||
<div class="wrap1_2">预计 ¥{{ totalMoney || "0" }}</div>
|
||
</div>
|
||
<div class="wrap2" @click.stop="signContract">确认金额并签署合同</div>
|
||
</div>
|
||
<u-popup
|
||
:round="15"
|
||
:show="show_2"
|
||
mode="bottom"
|
||
@open="
|
||
() => {
|
||
show_2 = true;
|
||
}
|
||
"
|
||
>
|
||
<div class="poup1">
|
||
<div class="content1">
|
||
<div class="wrap1">更换您的寄存地址</div>
|
||
<div @click="show_2 = false" class="wrap2">
|
||
<image
|
||
src="https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/d84593b3-10a8-4d86-be8c-b048b03b22c7.png"
|
||
></image>
|
||
</div>
|
||
</div>
|
||
<div class="content2"></div>
|
||
<div class="content3">
|
||
<div
|
||
v-for="(itemaddress, index1) of addressList"
|
||
@click="selectAddress(itemaddress)"
|
||
:class="[
|
||
listPaintings[currentIndex].warehouseID === itemaddress.ID
|
||
? 'active'
|
||
: '',
|
||
]"
|
||
:key="index1"
|
||
class="wrap1"
|
||
>
|
||
<div class="wrap1_1">{{ itemaddress.address }}</div>
|
||
<div class="wrap1_2">*剩余{{ itemaddress.leftNum }}位置</div>
|
||
</div>
|
||
</div>
|
||
<div class="content2"></div>
|
||
<div class="content6" @click="confirmAddress">
|
||
<div class="wrap1">确定</div>
|
||
</div>
|
||
</div>
|
||
</u-popup>
|
||
<u-picker
|
||
v-if="show_1"
|
||
:show="show_1"
|
||
ref="uPicker"
|
||
:columns="columns"
|
||
@confirm="
|
||
(e) => {
|
||
confirmDate(e);
|
||
}
|
||
"
|
||
@cancel="closeClick"
|
||
@change="
|
||
(e) => {
|
||
changeHandler(e);
|
||
}
|
||
"
|
||
></u-picker>
|
||
<u-loading-page
|
||
bgColor="rgba(0,0,0,0.5)"
|
||
:loading="loading"
|
||
loading-text="正在进入法大大签署..."
|
||
></u-loading-page>
|
||
<u-toast ref="uToast"></u-toast>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import http from "@/http/api";
|
||
import { postDataByParams } from "../../http/service";
|
||
import dayjs from "dayjs";
|
||
import _ from "lodash";
|
||
export default {
|
||
name: "order-details",
|
||
data() {
|
||
return {
|
||
itemHeight: 0,
|
||
scrollId: "item-0",
|
||
columns: [
|
||
[180],
|
||
["*"],
|
||
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
|
||
["="],
|
||
[180],
|
||
],
|
||
currentIndex: 0,
|
||
listPaintings: [
|
||
{
|
||
expectedPayment: "",
|
||
fileList1: [],
|
||
artworkNum: "",
|
||
artworkName: "",
|
||
artistName: "",
|
||
artworkSquareSize: "",
|
||
warehouseID: "",
|
||
endAt: "",
|
||
},
|
||
],
|
||
contentListHeight: 0,
|
||
isExpand: false,
|
||
isExpand1: false,
|
||
listHeight: 308,
|
||
minDate: "",
|
||
show: false,
|
||
value1: "",
|
||
loading: false,
|
||
fileList1: [],
|
||
dayMoney: "",
|
||
expectedPayment: "",
|
||
warehouseID: "",
|
||
cycleId: "",
|
||
cycleList: [],
|
||
addressList: [],
|
||
info: {},
|
||
show_2: false,
|
||
data: [],
|
||
show_1: false,
|
||
title: "picker-view",
|
||
|
||
visible: true,
|
||
url: "",
|
||
};
|
||
},
|
||
computed: {
|
||
totalMoney() {
|
||
return this.listPaintings.reduce((total, item) => {
|
||
return total + Number(item.expectedPayment);
|
||
}, 0);
|
||
},
|
||
},
|
||
onLoad(load) {
|
||
if (load.url) {
|
||
this.url = load.url;
|
||
this.getDetailUrl();
|
||
}
|
||
if (load.type === "detail") {
|
||
this.getData();
|
||
this.type = load.type;
|
||
}
|
||
if (load.type === "confirm") {
|
||
this.listPaintings = uni.getStorageSync("orderingInfo").listPaintings;
|
||
}
|
||
if (load.type === "scan") {
|
||
this.listPaintings = uni.getStorageSync("scanlist")?.map((x) => {
|
||
return {
|
||
...x,
|
||
expectedPayment: "",
|
||
warehouseID: "",
|
||
fileList1: [{ url: x.artworkImg }],
|
||
};
|
||
});
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getCycle();
|
||
if (this.$mp.query.url) {
|
||
this.url = this.$mp.query.url;
|
||
this.getDetailUrl();
|
||
}
|
||
this.getAddress();
|
||
this.$nextTick(async () => {
|
||
this.itemHeight = await this.getElementHeight(".content-scroll");
|
||
this.getheight();
|
||
});
|
||
},
|
||
methods: {
|
||
inputConfirm: _.debounce(function (event, index) {
|
||
this.listPaintings[index].artworkSquareSize = event.target.value.replace(
|
||
/\D/g,
|
||
""
|
||
);
|
||
let number = parseInt(this.listPaintings[index].artworkSquareSize, 10);
|
||
if (isNaN(number) || number <= 0) {
|
||
this.listPaintings[index].artworkSquareSize = "";
|
||
} else {
|
||
this.obtainAmount(index);
|
||
}
|
||
}, 1000),
|
||
addDaysToCurrentDate(days) {
|
||
return dayjs().add(days, "day").format("YYYY-MM-DD");
|
||
},
|
||
show2Click(index) {
|
||
this.currentIndex = index;
|
||
this.show_2 = true;
|
||
},
|
||
closeClick() {
|
||
this.show_1 = false;
|
||
},
|
||
getElementHeight(selector) {
|
||
return new Promise((resolve, reject) => {
|
||
const query = uni.createSelectorQuery();
|
||
query
|
||
.select(selector)
|
||
.boundingClientRect((data) => {
|
||
if (data) {
|
||
resolve(data.height); // 成功获取高度时，通过 Promise 返回
|
||
} else {
|
||
reject(new Error("无法获取元素高度")); // 如果找不到元素或获取高度失败时，通过 Promise 返回错误
|
||
}
|
||
})
|
||
.exec();
|
||
});
|
||
},
|
||
async scrollDetail(event) {
|
||
const scrollTop = event.detail.scrollTop; // 获取当前滚动位置
|
||
const totalHeight = this.listPaintings.length * this.itemHeight;
|
||
const scrollPercent = (scrollTop / totalHeight) * 100;
|
||
const index = Math.floor(scrollTop / this.itemHeight); // 计算索引
|
||
/* console.log(`滚动了 ${scrollPercent}%`);
|
||
console.log(`滚动到了第 ${index} 个元素的位置`);*/
|
||
this.currentIndex = index;
|
||
},
|
||
async getData() {
|
||
const data1 = {
|
||
ID: Number(this.$mp.query.ID),
|
||
};
|
||
const res1 = await postDataByParams("/api/v2/warehouse/detail", data1);
|
||
if (res1.code === 200) {
|
||
this.info = res1.data;
|
||
}
|
||
},
|
||
changeHandler(e, i) {
|
||
const {
|
||
columnIndex,
|
||
value,
|
||
values,
|
||
index,
|
||
picker = this.$refs.uPicker,
|
||
} = e;
|
||
if (columnIndex === 2) {
|
||
picker.setColumnValues(this.columns.length - 1, [
|
||
this.columns[2][e.index] * this.columns[0][0],
|
||
]);
|
||
}
|
||
},
|
||
itemDelete(index) {
|
||
this.listPaintings.splice(index, 1);
|
||
this.currentIndex = 0;
|
||
this.scrollId = `item-0`;
|
||
if (this.listPaintings.length === 1) {
|
||
this.contentListHeight = 0;
|
||
}
|
||
this.$nextTick(() => {
|
||
this.getheight();
|
||
});
|
||
},
|
||
itemClick(index) {
|
||
this.scrollId = `item-${index}`;
|
||
this.currentIndex = index;
|
||
},
|
||
addPainting() {
|
||
this.listPaintings.push({
|
||
expectedPayment: "",
|
||
fileList1: [],
|
||
artworkNum: "",
|
||
artworkName: "",
|
||
artistName: "",
|
||
artworkSquareSize: "",
|
||
warehouseID: this.listPaintings[0].warehouseID,
|
||
endAt: this.listPaintings[0].endAt,
|
||
});
|
||
this.$nextTick(() => {
|
||
this.getheight();
|
||
});
|
||
this.currentIndex = this.currentIndex + 1;
|
||
},
|
||
getheight() {
|
||
let query = uni.createSelectorQuery().in(this);
|
||
query
|
||
.select(".content-list")
|
||
.boundingClientRect((data) => {
|
||
if (data) {
|
||
let query = uni.createSelectorQuery().in(this);
|
||
query
|
||
.select(".titile-d")
|
||
.boundingClientRect((data1) => {
|
||
if (data1) {
|
||
this.contentListHeight = data.bottom - data1.bottom;
|
||
}
|
||
})
|
||
.exec();
|
||
}
|
||
})
|
||
.exec();
|
||
},
|
||
expand1() {
|
||
if (this.isExpand) {
|
||
this.listHeight = 154 * 2;
|
||
}
|
||
if (this.isExpand) {
|
||
this.isExpand = false;
|
||
}
|
||
|
||
this.isExpand1 = !this.isExpand1;
|
||
},
|
||
expand() {
|
||
if (this.isExpand) {
|
||
this.listHeight = 154 * 2;
|
||
} else {
|
||
this.listHeight =
|
||
154 *
|
||
(this.listPaintings.length <= 7 ? this.listPaintings.length : 7);
|
||
}
|
||
this.isExpand = !this.isExpand;
|
||
if (this.isExpand1) {
|
||
this.isExpand1 = false;
|
||
}
|
||
},
|
||
|
||
confirmDate(data, index) {
|
||
this.listPaintings[this.currentIndex].endAt =
|
||
data.value[data.value.length - 1];
|
||
if (this.currentIndex === 0) {
|
||
for (let listPainting of this.listPaintings) {
|
||
listPainting.endAt = data.value[data.value.length - 1];
|
||
}
|
||
}
|
||
this.obtainAmount(this.currentIndex, this.currentIndex === 0);
|
||
this.show_1 = false;
|
||
},
|
||
openShow1(index) {
|
||
if (!this.listPaintings[index].artworkSquareSize) {
|
||
uni.showToast({
|
||
title: "请先填写画作平尺数",
|
||
duration: 2000,
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
this.currentIndex = index;
|
||
this.show_1 = true;
|
||
},
|
||
uploadFilePromise(url, type = null) {
|
||
return new Promise((resolve) => {
|
||
uni.uploadFile({
|
||
url: http.baseUrl + "/api/wxuser/uploadpic",
|
||
filePath: url,
|
||
name: "file",
|
||
success: (res) => {
|
||
const { path } = JSON.parse(res.data).data;
|
||
resolve(path);
|
||
},
|
||
});
|
||
});
|
||
},
|
||
deletePic() {
|
||
this.fileList1 = [];
|
||
},
|
||
// 新增图片
|
||
async afterRead(event, index) {
|
||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
||
let lists = [].concat(event.file);
|
||
let fileListLen = this.listPaintings[index].fileList1.length;
|
||
lists.map((item) => {
|
||
this.listPaintings[index].fileList1.push({
|
||
...item,
|
||
status: "uploading",
|
||
message: "上传中",
|
||
});
|
||
});
|
||
for (let i = 0; i < lists.length; i++) {
|
||
const result = await this.uploadFilePromise(lists[i].url, "check");
|
||
let item = this.listPaintings[index].fileList1[fileListLen];
|
||
this.listPaintings[index].fileList1.splice(
|
||
fileListLen,
|
||
1,
|
||
Object.assign(item, {
|
||
status: "success",
|
||
message: "",
|
||
url: result,
|
||
})
|
||
);
|
||
fileListLen++;
|
||
}
|
||
},
|
||
async signContract() {
|
||
const checks = [
|
||
{
|
||
value: "fileList1",
|
||
message: "画作图片",
|
||
},
|
||
{
|
||
value: "artworkSquareSize",
|
||
message: "画作平尺数",
|
||
},
|
||
{
|
||
value: "artistName",
|
||
message: "画家名称",
|
||
},
|
||
{
|
||
value: "artworkName",
|
||
message: "画作名称",
|
||
},
|
||
{
|
||
value: "artworkNum",
|
||
message: "画作编号",
|
||
},
|
||
{
|
||
value: "warehouseID",
|
||
message: "寄存地址",
|
||
},
|
||
{
|
||
value: "endAt",
|
||
message: "择寄存时长",
|
||
},
|
||
];
|
||
for (const [index, item] of this.listPaintings.entries()) {
|
||
for (const check of checks) {
|
||
if (check.value === "fileList1" && item.fileList1.length < 1) {
|
||
uni.showToast({
|
||
title: `请完善第${index + 1}条数据的${check.message}`,
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!item[check.value]) {
|
||
uni.showToast({
|
||
title: `请完善第${index + 1}条数据的${check.message}`,
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if (check.value === "artworkSquareSize") {
|
||
if (Number(item[check.value]) < 1) {
|
||
uni.showToast({
|
||
title: `第${index + 1}条数据的${check.message}应大于0`,
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
this.loading = true;
|
||
const data = {
|
||
orders: this.listPaintings.map((x) => {
|
||
return {
|
||
endAt: this.addDaysToCurrentDate(x.endAt),
|
||
warehouseID: x.warehouseID,
|
||
artworkSquareSize: Number(x.artworkSquareSize),
|
||
artworkName: x.artworkName,
|
||
artworkImg: x.fileList1?.[0]?.url,
|
||
artworkNum: x.artworkNum,
|
||
artistName: x.artistName,
|
||
};
|
||
}),
|
||
};
|
||
const res = await postDataByParams(
|
||
"/api/v2/warehouse/fdd/contract/h5",
|
||
data
|
||
);
|
||
if (res.code === 200) {
|
||
uni.setStorageSync("jumpUrl", res.data.jumpUrl);
|
||
uni.setStorageSync("orderingInfo", {
|
||
listPaintings: this.listPaintings,
|
||
transactionId: res.data.transactionId,
|
||
});
|
||
uni.navigateTo({
|
||
url: `/pages/signwebview/index`,
|
||
});
|
||
} else {
|
||
// uni.showToast({
|
||
// title: res.msg,
|
||
// duration: 2000,
|
||
// icon: "none",
|
||
// });
|
||
this.$refs.uToast.show({
|
||
message: res.msg,
|
||
icon: "none",
|
||
});
|
||
}
|
||
this.loading = false;
|
||
},
|
||
async obtainAmount(index, list = false) {
|
||
let data = {
|
||
orders: [
|
||
{
|
||
artworkSquareSize: Number(
|
||
this.listPaintings[index].artworkSquareSize
|
||
),
|
||
endAt: this.addDaysToCurrentDate(this.listPaintings[index].endAt),
|
||
},
|
||
],
|
||
};
|
||
if (list) {
|
||
data = {
|
||
orders: this.listPaintings.map((x) => {
|
||
return {
|
||
artworkSquareSize: Number(x.artworkSquareSize),
|
||
endAt: this.addDaysToCurrentDate(x.endAt),
|
||
};
|
||
}),
|
||
};
|
||
}
|
||
const res = await postDataByParams("/api/v2/warehouse/calculate", data);
|
||
if (res.code === 200) {
|
||
if (list) {
|
||
this.listPaintings.forEach((x, ix) => {
|
||
res.data.orders?.forEach((y, iy) => {
|
||
if (ix === iy) {
|
||
x.expectedPayment = Number(y.money);
|
||
}
|
||
});
|
||
});
|
||
} else {
|
||
this.listPaintings[index].expectedPayment = Number(
|
||
res.data.orders?.[0]?.money
|
||
);
|
||
}
|
||
}
|
||
},
|
||
confirmCycle() {
|
||
this.show_1 = false;
|
||
},
|
||
confirmAddress() {
|
||
this.show_2 = false;
|
||
},
|
||
selectAddress(item) {
|
||
this.listPaintings[this.currentIndex].warehouseID = item.ID;
|
||
if (this.currentIndex === 0) {
|
||
this.listPaintings.forEach((x) => {
|
||
x.warehouseID = item.ID;
|
||
});
|
||
}
|
||
},
|
||
selectionPeriod(item) {
|
||
this.cycleId = item.ID;
|
||
},
|
||
async getCycle() {
|
||
const res = await postDataByParams("/api/warehouse/cycle");
|
||
if (res.code === 200) {
|
||
this.cycleList = res.data.data;
|
||
}
|
||
},
|
||
async getAddress() {
|
||
const res = await postDataByParams("/api/warehouse/address");
|
||
if (res.code === 200) {
|
||
this.addressList = res.data.data;
|
||
console.log(this.addressList, "addressList");
|
||
}
|
||
},
|
||
async getDetailUrl() {
|
||
const data = {
|
||
url: this.url,
|
||
};
|
||
const res = await postDataByParams("/api/warehouse/ocr", data);
|
||
if (res.code === 200) {
|
||
this.info = res.data;
|
||
this.fileList1 = [{ url: this.info.artworkImg }];
|
||
} else {
|
||
this.$refs.uToast.show({
|
||
message: res.msg,
|
||
icon: "none",
|
||
});
|
||
// uni.showToast({
|
||
// title: res.msg,
|
||
// icon: "none",
|
||
// });
|
||
}
|
||
console.log(res, "getDetailUrl");
|
||
},
|
||
isDateFont(item, num) {
|
||
if (Array.isArray && this.data.length === 3) {
|
||
return this.data[num] === item;
|
||
}
|
||
},
|
||
changeData(e) {
|
||
this.data = [
|
||
e.detail.value[0] + 1990,
|
||
e.detail.value[1] + 1,
|
||
e.detail.value[2] + 1,
|
||
];
|
||
},
|
||
back() {
|
||
uni.navigateBack({ delta: 2 });
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.fontDate {
|
||
color: #fff;
|
||
}
|
||
|
||
/deep/ .pickerSelected {
|
||
color: #ffffff !important;
|
||
z-index: 2;
|
||
}
|
||
|
||
/deep/ .test {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: -1;
|
||
background: #a9d897;
|
||
color: #fff;
|
||
height: 62rpx;
|
||
}
|
||
|
||
uni-picker-view {
|
||
display: block;
|
||
}
|
||
|
||
uni-picker-view .uni-picker-view-wrapper {
|
||
display: flex;
|
||
position: relative;
|
||
overflow: hidden;
|
||
height: 100%;
|
||
background-color: white;
|
||
}
|
||
|
||
uni-picker-view[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
picker-view {
|
||
width: 100%;
|
||
// height: 600upx;
|
||
height: 400rpx;
|
||
margin-top: 20 upx;
|
||
}
|
||
|
||
.item {
|
||
line-height: 100 upx;
|
||
text-align: center;
|
||
}
|
||
|
||
.order-details {
|
||
background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/4fdc9a0f-d72a-46b6-a04d-ed56d5465213.png");
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
padding-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
background-size: cover;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.content-list {
|
||
top: 130rpx;
|
||
z-index: 999;
|
||
position: absolute;
|
||
width: 686rpx;
|
||
margin-top: 34rpx;
|
||
text-align: right;
|
||
.wrap1 {
|
||
margin-bottom: 10rpx;
|
||
font-size: 24rpx;
|
||
color: rgba(78, 150, 77, 1);
|
||
}
|
||
.wrap2 {
|
||
box-sizing: border-box;
|
||
padding-top: 20rpx;
|
||
border: 2rpx dashed rgba(118, 196, 88, 1);
|
||
border-radius: 20rpx;
|
||
background-color: #fff;
|
||
padding-left: 20rpx;
|
||
padding-right: 20rpx;
|
||
.wrap2_2 {
|
||
border-top: 1rpx dashed rgba(118, 196, 88, 1);
|
||
height: 60rpx;
|
||
position: relative;
|
||
.wrap2_2_2 {
|
||
line-height: 60rpx;
|
||
color: rgba(118, 196, 88, 1);
|
||
font-size: 24rpx;
|
||
}
|
||
.wrap2_2_1 {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 30rpx;
|
||
height: 16rpx;
|
||
background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/default/approval/13639162-2871-4187-abc5-71c2d9f01ac2.png");
|
||
background-size: cover;
|
||
}
|
||
}
|
||
.wrap2_1 {
|
||
z-index: 999;
|
||
padding-bottom: 20rpx;
|
||
overflow-y: scroll;
|
||
.item {
|
||
height: 154rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-left: 10rpx;
|
||
padding-right: 10rpx;
|
||
&.active {
|
||
background-color: rgb(245, 251, 242);
|
||
}
|
||
.item_5 {
|
||
width: 134rpx;
|
||
color: rgba(98, 98, 98, 1);
|
||
font-size: 24rpx;
|
||
}
|
||
.item_4 {
|
||
margin-right: 28rpx;
|
||
width: 192rpx;
|
||
color: rgba(98, 98, 98, 1);
|
||
font-size: 24rpx;
|
||
}
|
||
.item_3 {
|
||
margin-right: 48rpx;
|
||
width: 78rpx;
|
||
color: rgba(98, 98, 98, 1);
|
||
font-size: 24rpx;
|
||
}
|
||
.item_2 {
|
||
margin-right: 24rpx;
|
||
width: 68rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.item_2_2 {
|
||
color: rgba(147, 147, 147, 1);
|
||
font-size: 20rpx;
|
||
}
|
||
.item_2_1 {
|
||
background-color: #000;
|
||
width: 68rpx;
|
||
height: 68rpx;
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.item_1 {
|
||
margin-right: 18rpx;
|
||
color: rgba(88, 166, 107, 1);
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border: 5rpx solid rgba(118, 196, 88, 1);
|
||
border-radius: 50%;
|
||
background: transparent;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
& > .content5 {
|
||
align-items: center;
|
||
left: 0;
|
||
background: #fff;
|
||
width: 750rpx;
|
||
position: fixed;
|
||
bottom: 0;
|
||
height: 172rpx;
|
||
display: flex;
|
||
.wrap4 {
|
||
z-index: 999;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
position: absolute;
|
||
border-top-right-radius: 20rpx;
|
||
border-top-left-radius: 20rpx;
|
||
border-top: 1px dashed rgba(118, 196, 88, 1);
|
||
.item {
|
||
height: 152rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.item_4 {
|
||
margin-right: 64rpx;
|
||
margin-left: auto;
|
||
color: rgba(118, 196, 88, 1);
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
}
|
||
.item_3 {
|
||
width: 100rpx;
|
||
margin-left: 48rpx;
|
||
color: rgba(98, 98, 98, 1);
|
||
font-size: 24rpx;
|
||
}
|
||
.item_2 {
|
||
width: 100rpx;
|
||
margin-left: 34rpx;
|
||
color: rgba(98, 98, 98, 1);
|
||
font-size: 24rpx;
|
||
}
|
||
.item_1 {
|
||
margin-left: 56rpx;
|
||
color: rgba(88, 166, 107, 1);
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border: 5rpx solid rgba(118, 196, 88, 1);
|
||
border-radius: 50%;
|
||
background: transparent;
|
||
}
|
||
}
|
||
}
|
||
.wrap3 {
|
||
margin-left: 32rpx;
|
||
img {
|
||
width: 30rpx;
|
||
height: 16rpx;
|
||
}
|
||
}
|
||
.wrap2 {
|
||
border-radius: 40rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 392rpx;
|
||
height: 56rpx;
|
||
color: #fff;
|
||
font-size: 32rpx;
|
||
background: #76c458;
|
||
}
|
||
|
||
.wrap1 {
|
||
margin-left: 18rpx;
|
||
margin-right: 70rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: start;
|
||
|
||
.wrap1_1 {
|
||
color: #939393;
|
||
font-size: 16rpx;
|
||
}
|
||
|
||
.wrap1_2 {
|
||
font-size: 32rpx;
|
||
color: #76c458;
|
||
}
|
||
}
|
||
}
|
||
|
||
.poup1 {
|
||
padding-top: 28rpx;
|
||
padding-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
margin-bottom: 72rpx;
|
||
|
||
& > .content6 {
|
||
margin-top: 26rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.wrap1 {
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
width: 436rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #76c458;
|
||
border-radius: 30rpx;
|
||
}
|
||
}
|
||
|
||
& > .content3 {
|
||
margin-bottom: 70rpx;
|
||
|
||
.wrap1 {
|
||
margin-bottom: 18rpx;
|
||
border-radius: 32rpx;
|
||
height: 80rpx;
|
||
box-sizing: border-box;
|
||
border: 2px solid #76c458;
|
||
padding-left: 44rpx;
|
||
padding-right: 42rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.wrap1_2 {
|
||
color: #76c458;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.wrap1_1 {
|
||
font-size: 28rpx;
|
||
color: #000;
|
||
}
|
||
|
||
&.disabled {
|
||
border: none;
|
||
background: #d8d8d8;
|
||
|
||
.wrap1_1 {
|
||
color: #626262;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.wrap1_2 {
|
||
color: #626262;
|
||
font-size: 16rpx;
|
||
}
|
||
}
|
||
|
||
&.active {
|
||
background: #76c458;
|
||
|
||
.wrap1_2 {
|
||
color: #fff;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.wrap1_1 {
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
& > .content1 {
|
||
margin-bottom: 36rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.wrap1 {
|
||
color: #000;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.wrap2 {
|
||
image {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
& > .content2 {
|
||
margin-bottom: 36rpx;
|
||
height: 1rpx;
|
||
background: #626262;
|
||
}
|
||
}
|
||
|
||
.poup {
|
||
margin-bottom: 72rpx;
|
||
padding-top: 28rpx;
|
||
padding-left: 30rpx;
|
||
padding-right: 30rpx;
|
||
& > .content7 {
|
||
}
|
||
& > .content3 {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.wrap4 {
|
||
margin-bottom: 40rpx;
|
||
border-radius: 32rpx;
|
||
margin-top: 30rpx;
|
||
width: 220rpx;
|
||
height: 84rpx;
|
||
background: #d8d8d8;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.wrap4_1 {
|
||
color: #626262;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.wrap4_2 {
|
||
color: #be7e7e;
|
||
font-size: 16rpx;
|
||
}
|
||
}
|
||
|
||
.wrap1 {
|
||
box-sizing: border-box;
|
||
flex-shrink: 0;
|
||
margin-right: 16rpx;
|
||
font-size: 28rpx;
|
||
border-radius: 32rpx;
|
||
border: 2rpx solid #76c458;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 220rpx;
|
||
height: 84rpx;
|
||
|
||
&:nth-child(3) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
&.active {
|
||
color: #fff;
|
||
background: #76c458;
|
||
}
|
||
}
|
||
}
|
||
|
||
& > .content6 {
|
||
margin-top: 26rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.wrap1 {
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
width: 436rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #76c458;
|
||
border-radius: 30rpx;
|
||
}
|
||
}
|
||
|
||
& > .content5 {
|
||
margin-top: 36rpx;
|
||
height: 66rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1rpx solid #bababa;
|
||
border-top: 1rpx solid #bababa;
|
||
|
||
.wrap1 {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-grow: 1;
|
||
color: #4e964d;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.wrap2 {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-grow: 1;
|
||
color: #4e964d;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.wrap3 {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-grow: 1;
|
||
color: #4e964d;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
|
||
& > .content4 {
|
||
font-size: 32rpx;
|
||
color: #000;
|
||
}
|
||
|
||
& > .content2 {
|
||
margin-bottom: 36rpx;
|
||
height: 1rpx;
|
||
background: #626262;
|
||
}
|
||
|
||
& > .content1 {
|
||
margin-bottom: 36rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.wrap1 {
|
||
color: #000;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.wrap2 {
|
||
image {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.content-center {
|
||
overflow-y: scroll;
|
||
margin-bottom: 180rpx;
|
||
.content-scroll {
|
||
.painting-name {
|
||
margin-top: 48rpx;
|
||
align-items: center;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.wrap1 {
|
||
color: rgba(0, 0, 0, 1);
|
||
font-size: 28rpx;
|
||
}
|
||
.wrap2 {
|
||
font-size: 28rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: rgba(118, 196, 88, 1);
|
||
border-radius: 40rpx;
|
||
background-color: #fff;
|
||
width: 148rpx;
|
||
height: 56rpx;
|
||
border: 1px solid rgba(118, 196, 88, 1);
|
||
}
|
||
}
|
||
& > .content4 {
|
||
margin-bottom: 24rpx;
|
||
margin-top: 60rpx;
|
||
|
||
.wrap1 {
|
||
border: 1rpx dashed #dfe9f0;
|
||
background-color: #fff;
|
||
|
||
.wrap1_1 {
|
||
position: relative;
|
||
height: 114rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.wrap1_1_4 {
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 0;
|
||
position: absolute;
|
||
height: 0;
|
||
width: 636rpx;
|
||
border-bottom: 0.5px solid #626262;
|
||
}
|
||
|
||
.wrap1_1_5 {
|
||
right: 42rpx;
|
||
position: absolute;
|
||
|
||
image {
|
||
width: 46.34rpx;
|
||
height: 20rpx;
|
||
}
|
||
}
|
||
|
||
.wrap1_1_2 {
|
||
margin-right: 36rpx;
|
||
width: 0;
|
||
height: 66rpx;
|
||
border-left: 0.5px solid #626262;
|
||
}
|
||
|
||
.wrap1_1_1 {
|
||
width: 210rpx;
|
||
padding-left: 32rpx;
|
||
|
||
color: #626262;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
& > .content3 {
|
||
margin-top: 60rpx;
|
||
|
||
.prompt {
|
||
color: #4e964d;
|
||
font-size: 16rpx;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.wrap1 {
|
||
border: 1rpx dashed #dfe9f0;
|
||
background-color: #fff;
|
||
|
||
.wrap1_1 {
|
||
position: relative;
|
||
height: 114rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.wrap1_1_4 {
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 0;
|
||
position: absolute;
|
||
height: 0;
|
||
width: 636rpx;
|
||
border-bottom: 0.5px solid #626262;
|
||
}
|
||
|
||
.wrap1_1_2 {
|
||
margin-right: 36rpx;
|
||
width: 0;
|
||
height: 66rpx;
|
||
border-left: 0.5px solid #626262;
|
||
}
|
||
|
||
.wrap1_1_1 {
|
||
width: 210rpx;
|
||
padding-left: 32rpx;
|
||
|
||
color: #626262;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
& > .content2 {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
image {
|
||
width: 404rpx;
|
||
height: 306rpx;
|
||
}
|
||
}
|
||
& > .content7 {
|
||
margin: 0 auto;
|
||
margin-bottom: 20rpx;
|
||
background-color: #fff;
|
||
border-radius: 40rpx;
|
||
width: 228rpx;
|
||
height: 56rpx;
|
||
border: 3rpx solid rgba(118, 196, 88, 1);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.wrap2 {
|
||
color: rgba(118, 196, 88, 1);
|
||
font-size: 28rpx;
|
||
}
|
||
.wrap1 {
|
||
margin-right: 20rpx;
|
||
box-sizing: border-box;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border: 3rpx solid rgba(118, 196, 88, 1);
|
||
border-radius: 50%;
|
||
background: transparent;
|
||
|
||
position: relative;
|
||
.horizontal {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 18rpx;
|
||
height: 2rpx;
|
||
background-color: rgba(118, 196, 88, 1);
|
||
}
|
||
|
||
.vertical {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 2rpx;
|
||
height: 18rpx;
|
||
background-color: rgba(118, 196, 88, 1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|