tianyi@bogon
3 years ago
1 changed files with 361 additions and 0 deletions
@ -0,0 +1,361 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<uni-card :title="sales.userName" thumbnail="/static/images/dingdan/dd0.png"> |
|||
<view class="uni-body">{{sales.province + sales.area + sales.city + sales.receiveAddress}} </view> |
|||
</uni-card> |
|||
<view class="tui-order-item boxbg"> |
|||
<view class="shop-box" style="border-top:5px solid #eee;" v-for="(value,key) in Array.from(carList)" :key="key"> |
|||
<view class="shop-name"> |
|||
<img :src="value[1].productPicture" alt="" |
|||
style="width: 140rpx;height: 140rpx;margin: 30rpx 0 0 30rpx;"> |
|||
<view class="shop-productName"> |
|||
<view style="color:#FF5809;">品名：{{value[1].productName}}</view> |
|||
<view>货号：{{value[1].productSn}}</view> |
|||
<view>总价：{{value[1].price}} 数量：{{value[1].productCount}}</view> |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="shop-type"> |
|||
<view class="shop-collapse" v-for="(values,keys) in Array.from(value[1].stockLogList)"> |
|||
<text>{{values[0] | sliceMsg}}</text> |
|||
<!-- <text style="color: red;">单价：￥{{item.price}}</text> --> |
|||
<text>数量：{{values[1]}}</text> |
|||
</view> |
|||
<view |
|||
style="position: absolute;top: 130rpx;right: 40rpx;color: blue;text-decoration: underline;" |
|||
@tap="clickCollapse(value[0])"> |
|||
维护采购价 |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="tui-goods-info"> |
|||
<view class="tui-price-flex tui-size32 tui-pbtm20"> |
|||
<view class="tui-flex-shrink">应付金额</view> |
|||
<view class="tui-goods-price tui-primary-color"> |
|||
<view class="tui-size-24">￥</view> |
|||
<view class="tui-price-large">{{ sales.totalAmount }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="tui-price-flex tui-size32"> |
|||
<view class="tui-flex-shrink">已付金额</view> |
|||
<view class="tui-goods-price tui-primary-color"> |
|||
<view class="tui-size-24">￥</view> |
|||
<view class="tui-price-large">{{ sales.alreadyEarn }}</view> |
|||
</view> |
|||
</view> |
|||
<view class="tui-price-flex tui-size32"> |
|||
<view class="tui-flex-shrink">欠款</view> |
|||
<view class="tui-goods-price"> |
|||
<view class="tui-size-24">￥</view> |
|||
<view class="tui-price-large">{{ sales.noEarn}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="tui-price-flex tui-size32"> |
|||
<view class="tui-flex-shrink">其他费用</view> |
|||
<view class="tui-goods-price"> |
|||
<view class="tui-size-24">￥</view> |
|||
<view class="tui-price-large">{{ sales.otherExpense}}</view> |
|||
</view> |
|||
</view> |
|||
<view class="tui-price-flex tui-size32"> |
|||
<view class="tui-flex-shrink">备注</view> |
|||
<view class="tui-goods-price"> |
|||
<view class="tui-price-large">{{ sales.remark}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="tui-tabbar"> |
|||
<view class="tui-btn-mr"> |
|||
<u-button type="error" :plain="true" shape="circle" @click="cancelOrder">确认提交</u-button> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
sales: {}, |
|||
list: [], |
|||
isReturn: false |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
this.getWaitStorage(option.id) |
|||
}, |
|||
methods: { |
|||
getWaitStorage(id){ |
|||
this.tui.request("/app/purchase/getPurchaseAllData", "post", { |
|||
id: id |
|||
}, false, true).then((res) => { |
|||
if (res.code == 200) { |
|||
this.sales = res.result.purchase |
|||
this.list = res.result.purchaseDetails |
|||
|
|||
} else { |
|||
this.tui.toast(res.message) |
|||
} |
|||
}).catch((res) => {}) |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.btn-wrap { |
|||
width: 164rpx; |
|||
height: 80rpx; |
|||
border-radius: 16upx; |
|||
border: 2upx solid $u-primary; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.container { |
|||
padding-bottom: 118rpx; |
|||
|
|||
.boxbg { |
|||
background-color: #fff; |
|||
margin: 30upx; |
|||
padding: 20upx; |
|||
border-radius: 10upx; |
|||
box-shadow: 0px 1px 10px 2px #e2e2e2; |
|||
} |
|||
|
|||
.tui-order-item { |
|||
.u-collapse-content { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
line-height: 30px; |
|||
} |
|||
|
|||
.tui-goods-item { |
|||
width: 100%; |
|||
padding: 20rpx 30rpx; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.tui-goods-img { |
|||
width: 180rpx; |
|||
height: 180rpx; |
|||
display: block; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.tui-goods-center { |
|||
flex: 1; |
|||
padding: 20rpx 8rpx; |
|||
box-sizing: border-box; |
|||
|
|||
.tui-goods { |
|||
word-break: break-all; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 2; |
|||
line-height: 32rpx; |
|||
} |
|||
|
|||
.tui-goods-name { |
|||
font-weight: 700; |
|||
max-width: 310rpx; |
|||
font-size: 26rpx; |
|||
} |
|||
|
|||
.tui-goods-attr { |
|||
font-size: 22rpx; |
|||
color: #888888; |
|||
padding-top: 20rpx; |
|||
} |
|||
|
|||
} |
|||
|
|||
.tui-price-right { |
|||
text-align: right; |
|||
font-size: 26upx; |
|||
font-weight: 700; |
|||
line-height: 30rpx; |
|||
padding-top: 160rpx; |
|||
} |
|||
} |
|||
|
|||
.tui-goods-info { |
|||
width: 100%; |
|||
padding: 30rpx; |
|||
box-sizing: border-box; |
|||
background: #fff; |
|||
line-height: 26px; |
|||
|
|||
.tui-price-flex { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.tui-size32 { |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.tui-size-24 { |
|||
font-size: 24rpx; |
|||
// line-height: 24rpx; |
|||
} |
|||
|
|||
.tui-price-large { |
|||
font-size: 32rpx; |
|||
|
|||
// line-height: 30rpx; |
|||
.lineText { |
|||
text-decoration: line-through; |
|||
font-size: 12px; |
|||
color: #888; |
|||
} |
|||
} |
|||
|
|||
.tui-flex-shrink { |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.tui-goods-price { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
justify-content: flex-end; |
|||
font-size: 24rpx; |
|||
} |
|||
|
|||
.tui-primary-color { |
|||
color: #EB0909; |
|||
} |
|||
|
|||
.tui-pbtm20 { |
|||
padding-bottom: 20rpx; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.tui-order-info { |
|||
margin-top: 20rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
.tui-color-red { |
|||
color: #E41F19; |
|||
padding-right: 30rpx; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
.tui-size24 { |
|||
padding-bottom: 20rpx; |
|||
font-size: 24rpx; |
|||
line-height: 24rpx; |
|||
color: #888; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
.tui-order-title { |
|||
position: relative; |
|||
font-size: 28upx; |
|||
line-height: 28upx; |
|||
padding-left: 16upx; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.tui-order-title::before { |
|||
content: ''; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
border-left: 8upx solid $u-primary; |
|||
height: 120%; |
|||
border-radius: 4upx; |
|||
} |
|||
|
|||
.tui-order-content { |
|||
width: 100%; |
|||
padding: 24rpx 30rpx; |
|||
box-sizing: border-box; |
|||
background: #fff; |
|||
font-size: 24rpx; |
|||
line-height: 30rpx; |
|||
} |
|||
|
|||
.tui-order-flex { |
|||
display: flex; |
|||
padding-top: 18rpx; |
|||
} |
|||
|
|||
.tui-order-flex:first-child { |
|||
padding-top: 0 |
|||
} |
|||
|
|||
.tui-item-title { |
|||
width: 132rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.tui-item-content { |
|||
color: #666; |
|||
line-height: 32rpx; |
|||
} |
|||
|
|||
.tui-safe-area { |
|||
height: 1rpx; |
|||
padding-bottom: env(safe-area-inset-bottom); |
|||
} |
|||
|
|||
.tui-tabbar { |
|||
width: 100%; |
|||
height: 98rpx; |
|||
background: #fff; |
|||
position: fixed; |
|||
left: 0; |
|||
bottom: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-end; |
|||
font-size: 26rpx; |
|||
box-shadow: 0 0 1px rgba(0, 0, 0, .3); |
|||
padding-bottom: env(safe-area-inset-bottom); |
|||
z-index: 996; |
|||
} |
|||
|
|||
.tui-btn-mr { |
|||
margin-right: 30rpx; |
|||
} |
|||
|
|||
.tui-contact { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.tui-contact image { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
margin-right: 16rpx; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue