|
|
|
|
|
<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>
|
|
|
|
|
|
</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`,
|
|
|
|
|
|
});
|
|
|
|
|
|
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 {
|
|
|
|
|
|
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>
|
