<template> <div class="confirm-order" > <title-block class="title-block" 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 :style="{height:`${distance}px`}" style="overflow-y: auto"> <div style="padding-bottom: 128rpx"> <div class="content2"> <div class="content2"> <image :src="orderingInfo.info.artworkImg"></image> </div> </div> <div class="content3"> <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 disabled placeholder-style="color: #939393;font-size: 24rpx;" :placeholder="orderingInfo.info.artworkNum"/> </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 disabled placeholder-style="color: #939393;font-size: 24rpx;" :placeholder="orderingInfo.info.artworkName"/> </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 disabled placeholder-style="color: #939393;font-size: 24rpx;" :placeholder="orderingInfo.info.artistName"/> </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 disabled placeholder-style="color: #939393;font-size: 24rpx;" :placeholder="orderingInfo.info.artworkSquareSize"/> </div> </div> </div> <div class="wrap2"></div> </div> <div class="content3" > <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 disabled placeholder-style="color: #76C458;font-size: 24rpx;" :placeholder="orderingInfo.addressName"/> </div> <div class="wrap1_1_4"> </div> </div> <div class="wrap1_1" style="position: relative;"> <div class="wrap1_1_1" >寄存时限</div> <div class="wrap1_1_2"></div> <div class="wrap1_1_3" > <div class="wrap1_1_3_1" style="position: absolute;display: flex;top: 50%;transform: translateY(-50%);"> <div class="wrap1_1_3_1_1" style="width: 70rpx;color:#fff;height: 30rpx;background: #76C458;font-size: 16rpx;display: flex;justify-content: center;align-items: center;margin-right: 2rpx">{{orderingInfo.cycleName}}</div> <!-- <div class="wrap1_1_3_1_2" style="color: #939393;font-size: 24rpx">{{`${orderingInfo.info.startAt}-${orderingInfo.info.endAt}`}}</div>--> </div> </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 disabled placeholder-style="color: #939393;font-size: 24rpx;" :placeholder="`${orderingInfo.money}元`"/> </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 disabled placeholder-style="color: #939393;font-size: 24rpx;" :placeholder="`${orderingInfo.dayMoney}元`"/> </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 disabled placeholder-style="color: #939393;font-size: 24rpx;" :placeholder="`${info.dayMoney}`"/> </div> <div class="wrap1_1_4"> </div> </div>--> </div> <div class="wrap2"></div> </div> </div> </div> <div class="content5"> <div class="wrap1"> <div class="wrap1_1">*仅微信付款</div> <div class="wrap1_2">总计 ¥{{orderingInfo.expectedPayment}}</div> </div> <div class="wrap2" @click="signContract">付款</div> </div> <u-loading-page bgColor="rgba(0,0,0,0.5)" :loading="loading" loading-text="正在生成订单并付款..."></u-loading-page> </div> </template> <script> import {postDataByParams} from "../../http/service"; export default { name: "confirm-order", data(){ return{ loading:false, orderingInfo:uni.getStorageSync('orderingInfo'), expectedPayment:'', distance:'', ID:'', info: {}, statusValue: [{label: '全部状态', value: 0}, {label: '待入库', value: 1,style:'color: #FFBA00;font-size: 24rpx'}, { label: '已入库', value: 2, style:'color: #76C458;font-size: 24rpx' }, {label: '即将到期', value: 3,style:'color: #FF4848;font-size: 24rpx'}, {label: '延期未补款', value: 4,style:'color: #FF4848;font-size: 24rpx'}, {label: '已取出', value: 5}, {label: '延期已补款', value: 7}] } }, computed:{ daysRemainingStyle(){ switch (this.info.artworkStatus){ case 1: case 2: case 3: case 5: return 'color: #939393;font-size: 24rpx;' case 4:{ return 'color: #FF4848;font-size: 24rpx;' } } } }, mounted() { if (this.$mp.query.ID) { this.ID=this.$mp.query.ID this.getData() } uni.createSelectorQuery().select('.title-block').boundingClientRect(data => { let res = uni.getSystemInfoSync(); const distance = res.windowHeight - data.bottom; this.distance = distance }).exec() }, methods: { async signContract(){ this.loading=true const data1={ artworkName:this.orderingInfo.info.artworkName, artworkNum:this.orderingInfo.info.artworkNum, artistName:this.orderingInfo.info.artistName, artworkSize:this.orderingInfo.info.artworkSize, warehouseID:this.orderingInfo.warehouseID, cycleID:this.orderingInfo.cycleID, artworkImg:this.orderingInfo.info.artworkImg, artworkSizeL:this.orderingInfo.info.artworkSizeL, artworkSizeW:this.orderingInfo.info.artworkSizeW, artworkSquareSize:Number(this.orderingInfo.info.artworkSquareSize), contractTransactionId:this.orderingInfo.transactionId } const res1 = await postDataByParams('/api/warehouse/create',data1) if (res1.code===200){ const res2 = await postDataByParams('/api/warehouse/paid',{ ID:res1.data.ID }) if (res2.code===200){ uni.requestPayment({...res2.data,fail:(res)=>{ this.loading=false },success:()=>{ this.loading=false uni.navigateTo({ url: `/pages/paySuccess/paySuccess?ID=${res1.data.ID}`, }); }}) } } }, async obtainAmount(){ const data={ cycleID:this.cycleId, artworkSquareSize:this.info.artworkSquareSize } const res = await postDataByParams('/api/warehouse/calculate',data) if (res.code===200){ this.expectedPayment=res.data.money } }, back(){ uni.navigateBack() }, async getData() { const res = await postDataByParams('/api/warehouse/detail',{ID:Number(this.ID)}) if (res.code===200){ this.info=res.data }else { uni.showToast({ title: res.msg, icon:'none' }) } console.log(res, 'res') } } } </script> <style scoped lang="scss"> .confirm-order { 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; & > .content5 { align-items: center; left: 0; background: #fff; width: 750rpx; position: fixed; bottom: 0; height: 172rpx; display: flex; .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: 58rpx; 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; } } } .content3 { 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_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 { margin-top: 42rpx; display: flex; justify-content: center; image { width: 404rpx; height: 306rpx; } } .content1 { display: flex; align-items: center; justify-content: space-between; .wrap1 { image { width: 112rpx; height: 52rpx; } } .wrap2 { color: #4E964D; font-size: 32rpx; } .wrap3 { image { width: 40rpx; height: 40rpx; } } } } </style>