You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1358 lines
36 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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:`${isExpand?'rotate(180deg)':''}`}">
<img src="https://cdns.fontree.cn/fonchain-main/prod/image/default/approval/13639162-2871-4187-abc5-71c2d9f01ac2.png" alt="">
</div>
<div class="wrap2_2_2">共计{{listPaintings.length}}幅画作</div>
</div>
</div>
</div>
<div class="content-center" :style="{marginTop:`${contentListHeight+10}px`}">
<div class="painting-name" v-if="listPaintings.length>1">
<div class="wrap1">画作{{currentIndex+1}}</div>
<div class="wrap2" @click="itemDelete">删除</div>
</div>
<div class="content2">
<u-upload
:fileList="listPaintings[currentIndex].fileList1"
@afterRead="afterRead"
@delete="deletePic"
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[currentIndex].artworkNum" placeholder-style="color: #939393;font-size: 24rpx;" 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[currentIndex].artworkName" placeholder-style="color: #939393;font-size: 24rpx;" 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[currentIndex].artistName" placeholder-style="color: #939393;font-size: 24rpx;" 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[currentIndex].artworkSquareSize" placeholder-style="color: #939393;font-size: 24rpx;" placeholder="请输入画作平尺数"/>
</div>
</div>
</div>
<div class="wrap2"></div>
</div>
<div class="content4">
<div class="wrap1">
<div class="wrap1_1" @click="show_2=true">
<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[currentIndex].warehouseID?addressList.find(x=>x.ID===listPaintings[currentIndex].warehouseID).address:''" placeholder-style="color: #939393;font-size: 24rpx;"
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()">
<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[currentIndex].endAt" disabled placeholder-style="color: #939393;font-size: 24rpx;" 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" @click="addPainting">
<div class="wrap1">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
<div class="wrap2">添加</div>
</div>
</div>
<div class="content5">
<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" @click="expand1" :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="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="(item,index) in addressList" @click="selectAddress(item)"
:class="[listPaintings[currentIndex].warehouseID===item.ID?'active':'']" :key="index" class="wrap1">
<div class="wrap1_1">{{ item.address }}</div>
<div class="wrap1_2">*剩余{{ item.leftNum }}位置</div>
</div>
<!-- <div class="wrap1 active">
<div class="wrap1_1">某某某某某某某地方</div>
<div class="wrap1_2">剩余12位置</div>
</div>-->
<!-- <div class="wrap1 disabled">
<div class="wrap1_1">某某某某某某某地方</div>
<div class="wrap1_2">*已满员</div>
</div>-->
</div>
<div class="content2"></div>
<div class="content6" @click="confirmAddress">
<div class="wrap1">确定</div>
</div>
</div>
</u-popup>
<!-- <u-popup :round="15" :show="show_1" mode="bottom" @open="()=>{show_1=true}">
<div class="poup">
<div class="content1" style="margin-top: 20rpx">
<div class="wrap1">寄存时长</div>
<div @click="show_1=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="content7" @click="show = true">
<u-datetime-picker
:show="show"
@confirm="confirmDate"
mode="date"
@cancel="show=false"
:minDate="minDate"
></u-datetime-picker>
<u&#45;&#45;input
readonly
placeholder="点击选择"
border="surround"
v-model="listPaintings[currentIndex].endAt"
></u&#45;&#45;input>
</div>
&lt;!&ndash; <div class="content2"></div>
<div class="content4">起始日期</div>
<div class="content5">
<div class="wrap1">年份</div>
<div class="wrap2">月</div>
<div class="wrap3">日</div>
</div>&ndash;&gt;
&lt;!&ndash; <div style="margin-left: -30rpx;margin-right: -30rpx">
<picker-view indicator-class="test" :value="value" @change="changeData" class="picker-view">
<picker-view-column>
<view style="display: flex;align-items: center;justify-content: center" class="item"
:class="[isDateFont(item,0)?'fontDate':'']" v-for="(item,index) in years" :key="index">{{ item }}年
</view>
</picker-view-column>
<picker-view-column>
<view style="display: flex;align-items: center;justify-content: center" class="item"
:class="[isDateFont(item,1)?'fontDate':'']" v-for="(item,index) in months" :key="index">{{ item }}月
</view>
</picker-view-column>
<picker-view-column>
<view style="display: flex;align-items: center;justify-content: center" class="item"
:class="[isDateFont(item,2)?'fontDate':'']" v-for="(item,index) in days" :key="index">{{ item }}
</view>
</picker-view-column>
</picker-view>
</div>
<div class="content2"></div>&ndash;&gt;
<div class="content6" @click="confirmCycle">
<div class="wrap1">确定</div>
</div>
</div>
</u-popup>-->
<u-picker :show="show_1" ref="uPicker" :columns="columns" @confirm="confirmDate" @close="show_1=false" @change="changeHandler"></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";
export default {
name: "order-details",
data() {
const date = new Date()
const years = []
const year = date.getFullYear()
const months = []
const month = date.getMonth() + 1
const days = []
const day = date.getDate()
for (let i = 1990; i <= date.getFullYear(); i++) {
years.push(i)
}
for (let i = 1; i <= 12; i++) {
months.push(i)
}
for (let i = 1; i <= 31; i++) {
days.push(i)
}
return {
columns: [
[180],
['*'],
[1,2,3,4,5],
['='],
[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',
years,
year,
months,
month,
days,
day,
value: [9999, month - 1, day - 1],
visible: true,
url: ''
}
},
computed: {
totalMoney(){
return this.listPaintings.reduce((total, item) => {
return total + Number(item.expectedPayment);
}, 0);
},
currentArtworkSquareSize() {
if (
this.currentIndex >= 0 &&
this.currentIndex < this.listPaintings.length
) {
return this.listPaintings[this.currentIndex].artworkSquareSize;
}
return null;
},
currentEndAt() {
if (
this.currentIndex >= 0 &&
this.currentIndex < this.listPaintings.length
) {
return this.listPaintings[this.currentIndex].endAt;
}
return null;
},
},
watch:{
currentArtworkSquareSize(newValue, oldValue) {
if (newValue !== oldValue) {
this.obtainAmount()
}
},
currentEndAt(newValue, oldValue) {
console.log(newValue,oldValue)
if (newValue !== oldValue) {
this.obtainAmount()
}
},
},
onLoad(load){
if (load.url){
this.url=load.url
this.getDetailUrl()
}
if (load.type==='detail'){
this.getData()
}
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(()=>{
this.getheight()
})
},
methods: {
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) {
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(){
this.listPaintings.splice(this.currentIndex,1)
this.currentIndex=0
if (this.listPaintings.length===1){
this.contentListHeight=0
}
this.$nextTick(()=>{
this.getheight()
})
},
itemClick(index){
this.currentIndex=index
},
addPainting(){
this.listPaintings.push({
expectedPayment:'',
fileList1:[],
artworkNum:'',
artworkName:'',
artistName:'',
artworkSquareSize:'',
warehouseID:'',
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(){
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
},
timestampToDateString(timestamp) {
const date = new Date(timestamp ); // 把时间戳乘以1000转换为Date对象需要的毫秒数
const year = date.getFullYear();
const month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的所以加1用slice保证格式是2位数
const day = ("0" + date.getDate()).slice(-2); // 用slice保证格式是2位数
return year + "-" + month + "-" + day;
},
confirmDate(data){
this.listPaintings[this.currentIndex].endAt=data.value[data.value.length-1]
this.obtainAmount()
this.show_1=false
},
openShow1(){
if (!this.listPaintings[this.currentIndex].artworkSquareSize){
uni.showToast({
title: "请先填写画作平尺数",
duration: 2000,
icon: "none",
});
return
}
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) {
// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file)
let fileListLen = this.listPaintings[this.currentIndex].fileList1.length
lists.map((item) => {
this.listPaintings[this.currentIndex].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[this.currentIndex].fileList1[fileListLen]
this.listPaintings[this.currentIndex].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 (!item[check.value]) {
uni.showToast({
title: `请完善第${index+1}条数据的${check.message}`,
icon: 'none'
})
return
}
}
}
this.loading=true
const data={
orders:this.listPaintings.map((x)=>{
return {
endAt:new Date(Date.now() + x.endAt * 86400000)?.toISOString()?.slice(0, 10),
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(){
uni.setStorageSync("endAt",new Date(Date.now() + this.listPaintings[this.currentIndex].endAt * 86400000)?.toISOString()?.slice(0, 10))
const data={
orders:[
{ artworkSquareSize:Number(this.listPaintings[this.currentIndex].artworkSquareSize),
endAt:new Date(Date.now() + this.listPaintings[this.currentIndex].endAt * 86400000)?.toISOString()?.slice(0, 10)}
]
}
const res = await postDataByParams('/api/v2/warehouse/calculate',data)
if (res.code===200){
this.listPaintings[this.currentIndex].expectedPayment=res.data.orders?.[0]?.money
}
},
confirmCycle() {
this.show_1 = false
},
confirmAddress() {
this.show_2 = false
},
selectAddress(item) {
this.listPaintings[this.currentIndex].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
}
},
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;
border-radius: 20rpx;
background-color: #fff;
padding-left: 18rpx;
padding-right: 32rpx;
.wrap2_2{
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%);
background-repeat: no-repeat;
background-size: cover;
img{
width: 30rpx;
height: 16rpx;
}
}
}
.wrap2_1{
z-index: 999;
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;
.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;
.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);
}
}
&>.content7{
margin: 0 auto;
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);
}
}
}
& > .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;
}
}
}
}
</style>