<template> <view class="PanKuContainer"> <view class="goodList" > <view v-for="(item, i) in infoList" :key="i" class="goodItem" > <view class="skuContainer"> <view class="header" :class="item.toggle ? 'open' : ''" @click="item.toggle = !item.toggle" > <!-- <view class="icon"></view> <view class="name">{{ item.attr }}</view> --> <view class="top"> <view class="avatar" :style="{ backgroundImage: `url(${item.imgurl})` }" /> <view class="info"> <view class="name">{{ item.name }}</view> <view class="fixed">一年零一天不满意退钱</view> </view> </view> </view> <view v-if="item.toggle" class="skuList"> <view class="skuHeader"> <view class="type">规格</view> <view class="size">尺码</view> <view class="num">数量</view> </view> <view v-for="(btem, bi) in item.spec" :key="bi" class="skuItem" > <view class="type color">{{ btem.sex ? '男款' : '女款' }}</view> <view class="size color">{{ btem.size }}</view> <view class="num color">{{ btem.num }}</view> </view> </view> <view class="dataAll"> <view class="sex"> 男款:{{ item.men }}{{ unit }} / 女款:{{ item.women }}{{ unit }} </view> <view class="num"> 未发合计:<text class="spec">{{ item.total }}{{ unit }}</text> </view> </view> </view> </view> </view> </view> </template> <script> import { GetExpressInnage, publishRuKu } from "@/apis/stock.js" export default { data() { return { status: false, infoList: [], unit: '件', order_id: '' } }, watch: { status(a) { this.unit = a ? '件' : '套' } }, onLoad(e) { this.order_id = e.order_id this.getRuKuInfo() }, methods: { // 获取详情 getRuKuInfo() { let _this = this uni.showLoading() GetExpressInnage({ id: _this.order_id}).then(res => { uni.hideLoading() if (res.code === 200) { Object.keys(res.data).forEach(k => { if(res.data[k].spec.length > 0) { if(res.data[k].spec.length > 6) { res.data[k].toggle = false } else { res.data[k].toggle = true } res.data[k].attr = _this.changeKey(k) res.data[k].men = res.data[k].spec.filter(({ sex }) => sex).reduce((a, b) => a + Number(b.num), 0) res.data[k].women = res.data[k].spec.filter(({ sex }) => !sex).reduce((a, b) => a + Number(b.num), 0) res.data[k].total = res.data[k].spec.reduce((a, b) => a + Number(b.num), 0) _this.infoList.push(res.data[k]) } }) } else { uni.showModal({ content: res.message || "获取详情失败", showCancel: false, success:function(){ uni.navigateBack({ delta: 1 }) } }) } }).catch(() => { uni.showModal({ content: "获取失败", showCancel: false, success:function(){ uni.navigateBack({ delta: 1 }) } }) }) }, changeKey(k) { let out = '' switch(k) { case 'hard': out = '精装版' break; case 'new_old': out = '纯棉版' break; case 'old': out = '高腰版' break; case 'simple': out = '简约版' break; case 'youth': out = '青春版' break; default: out = '简约版' break } return out } } } </script> <style lang="scss" scoped> page{ display: flex; flex-direction: column; } .PanKuContainer { width: 100%; flex: 1; background-color: #F9F9FB; // padding: 30rpx; .btn { width: 140rpx; height: 56rpx; border-radius: 8rpx; background-color: #EA4A41; color: #FFFFFF; font-size: 28rpx; line-height: 56rpx; text-align: center; text-align: center; } .beizhu { padding: 30rpx 35rpx; margin-bottom: 120rpx; background-color: #fff; color: #333; font-size: 28rpx; &_title { font-size: 32rpx; font-weight: bold; color: #333333; margin-bottom: 20rpx; } &_cont { background: #F8F8F8; border-radius: 24rpx; padding: 30rpx; } } .reviseBtn { position: fixed; bottom: 0; left: 0; right: 0; height: 100rpx; display: flex; align-items: center; justify-content: space-between; background: #FFFFFF; color: #FFFFFF; font-size: 32rpx; padding: 0 30rpx; .type { color: #999999; font-size: 28rpx; margin-right: 10rpx; } .all { color: #333333; font-size: 28rpx; } .num { font-size: 40rpx; color: #EA4A41; } .unit { font-size: 28rpx; color: #EA4A41; } .submitBtn { width: 192rpx; height: 68rpx; line-height: 68rpx; text-align: center; border-radius: 68rpx; background: linear-gradient(to right, #F97C55, #F44545); color: #FFFFFF; font-size: 28rpx; } } .goodList { width: 100%; .goodItem { width: 100%; margin-bottom: 30rpx; box-sizing: border-box; .top { width: 100%; display: flex; align-items: stretch; justify-content: space-between; // margin-bottom: 40rpx; .avatar { width: 160rpx; height: 130rpx; background-color: #eeeeee; background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 16rpx; } .info { display: flex; justify-content: center; flex-direction: column; flex: 1; overflow: hidden; margin-left: 20rpx; .name { color: #333333; font-size: 32rpx; font-weight: bold; line-height: 44rpx; margin-bottom: 20rpx; } .fixed { font-size: 28rpx; height: 48rpx; line-height: 48rpx; // border: 1px solid #F76454; box-sizing: border-box; width: 304rpx; border-radius: 8rpx; background: #FFF4F3; color: #FB231F; text-align: center; } } } .skuContainer { width: 100%; background-color: #ffffff; box-sizing: border-box; // border-radius: 24rpx; overflow: hidden; .header { width: 100%; height: 200rpx; padding: 0 30rpx; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; border-bottom: 1px solid #EEEEEE; .icon { width: 30rpx; height: 30rpx; border-radius: 50%; background-color: rgba(234, 74, 65, 0.36); margin-right: 10rpx; display: flex; align-items: center; justify-content: center; &::before { content: ""; display: block; width: 18rpx; height: 18rpx; border-radius: 50%; background-color: #EA4A41; } } .name { color: #333333; font-size: 32rpx; line-height: 44rpx; } &::after { display: block; content: ""; margin-left: auto; width: 20rpx; height: 30rpx; background-image: url(../../static/new_my/arrow.png); background-position: center; background-size: cover; background-repeat: no-repeat; } &.open { &::after { transform: rotate(90deg) !important; } } } .skuList{ width: 100%; .skuHeader, .skuItem { width: 100%; height: 100rpx; padding: 0 30rpx; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #EEEEEE; .type, .size, .num { flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; } .color { font-weight: bold; color: #333; } .type { justify-content: flex-start; } .size{ justify-content: center; } .num { justify-content: flex-end; } } .skuHeader { color: #999999; font-size: 28rpx; line-height: 40rpx; } } .dataAll { width: 100%; height: 116rpx; padding: 0 30rpx; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; .sex { color: #333333; font-size: 28rpx; } .num { color: #999999; font-size: 28rpx; .spec { color: #EA4A41 !important; font-size: 40rpx !important; font-weight: bolder; } } } } } } } </style>