401 lines
8.3 KiB
Vue
401 lines
8.3 KiB
Vue
<template>
|
|
<view class="content">
|
|
<uni-nav-bar left-icon="left" color="#000000" style="" backgroundColor="transparent" :fixed="true"
|
|
:statusBar="true" :border="false" @clickLeft="back">
|
|
<view style="width: 100%; font-size: 32rpx; display: flex; align-items: center; justify-content: center;">
|
|
换箱
|
|
</view>
|
|
</uni-nav-bar>
|
|
|
|
<view class="header" :style="{top: `calc(${$sys().statusBarHeight}px + 88rpx)`}">
|
|
<view v-for="(v, i) in huanxiang_arr" :key="i" @click="change_head(v.page_no)"
|
|
:class="page_no == v.page_no ? 'header_view_sel' : 'header_view'">
|
|
{{ v.title }}箱
|
|
</view>
|
|
</view>
|
|
<!-- 商品展示 -->
|
|
<view class="goods_v">
|
|
<view class="flex_center" @click="change_saixuan(1, page_no)">
|
|
<text :style="saixuan_index == 1 ? 'color:#333333;' : 'color:#8A8A8A;'">箱号</text>
|
|
<image v-if="saixuan_index == 1" :src="$img('/static/img/bottom_act.png')" class="goods_v_1"></image>
|
|
<image v-else :src="$img('/static/img/bottom.png')" class="goods_v_1"></image>
|
|
</view>
|
|
<view class="flex_center" @click="change_saixuan(2, page_no)" style="margin-left: 40rpx">
|
|
<text :style="saixuan_index == 2 ? 'color:#333333;' : 'color:#8A8A8A;'">余量</text>
|
|
<image v-if="saixuan_index == 2" :src="$img('/static/img/bottom_act.png')" class="goods_v_1"></image>
|
|
<image v-else :src="$img('/static/img/bottom.png')" class="goods_v_1"></image>
|
|
</view>
|
|
</view>
|
|
<!-- 赏品余量 -->
|
|
<view class="yuliang">
|
|
<view class="yuliang_list" v-for="(v, i) in goodsDetail" :key="i" @click="todetail(v.num)">
|
|
<view v-if="v.surplus_all_stock == 0" class="shadow">
|
|
<image :src="$img1('common/yishoukong.png')" mode="scaleToFill" />
|
|
</view>
|
|
<view class="box-num">第{{ v.num }}箱</view>
|
|
<!-- <view class="has-num">
|
|
剩余
|
|
<text>{{ v.surplus_all_stock }}</text>
|
|
张
|
|
</view> -->
|
|
<view class="box column align-center">
|
|
<image :src="$img1('common/box.png')"></image>
|
|
<text class="mt10">
|
|
{{ v.surplus_all_stock }}
|
|
</text>
|
|
</view>
|
|
<view class="type-list">
|
|
<view v-for="(a, b) in v.goodslist" :key="b" class="type-item br10"
|
|
:style="{background: a.shang_info.color}">
|
|
<view class="type-item-title">{{ a.shang_info.title }}</view>
|
|
<view class="type-item-num">
|
|
{{ a.surplus_stock }}/{{ a.stock }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getGoodsPrizeCount, getGoodsPrizeContent } from '@/common/server/goods'
|
|
export default {
|
|
components: {
|
|
},
|
|
data() {
|
|
return {
|
|
z_imgPath: this.$z_img2 + 'shouye/detail/',
|
|
huanxiang_arr: [],
|
|
// '1 - 10箱', '11 - 20箱', '21 - 30箱', '31 - 40箱', '41 - 50箱'
|
|
header_index: 1,
|
|
saixuan_index: 1,
|
|
page_no: 0,
|
|
show: 1,
|
|
goodsDetail: [],
|
|
|
|
id: '',
|
|
count: '',
|
|
type_text: '',
|
|
type: ''
|
|
}
|
|
},
|
|
async onLoad(v) {
|
|
this.id = v.id
|
|
this.type_text = v.type_text
|
|
this.type = v.type
|
|
this.getData()
|
|
|
|
const res = await getGoodsPrizeCount(this.id)
|
|
if (res.status == 1) {
|
|
this.huanxiang_arr = res.data
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
back() {
|
|
uni.navigateBack()
|
|
},
|
|
|
|
todetail(e) {
|
|
if (this.type == '3') {
|
|
this.$customRouter.navigateTo('/package/index/leitai', {
|
|
goods_id: this.id,
|
|
goods_num: e,
|
|
type_text: this.type_text
|
|
}, 'redirectTo');
|
|
} else {
|
|
this.$customRouter.navigateTo('detail', {
|
|
goods_id: this.id,
|
|
goods_num: e,
|
|
type_text: this.type_text
|
|
}, 'redirectTo');
|
|
}
|
|
},
|
|
change_saixuan(a, b) {
|
|
this.saixuan_index = a
|
|
this.page_no = b
|
|
this.getData()
|
|
},
|
|
change_head(e) {
|
|
this.page_no = e
|
|
this.getData()
|
|
},
|
|
async getData(e) {
|
|
const res = await getGoodsPrizeContent(this.id, this.page_no, this.saixuan_index)
|
|
this.goodsDetail = res.data
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.list_r text:nth-of-type(2) {
|
|
/* color: #F96026; */
|
|
}
|
|
|
|
.list_r>view {
|
|
width: 47%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
line-height: 44rpx;
|
|
}
|
|
|
|
.list_r>view:nth-child(3n-1) {
|
|
margin-left: 15rpx;
|
|
}
|
|
|
|
.list_r {
|
|
// margin-left: 40rpx;
|
|
// width: 500rpx;
|
|
display: flex;
|
|
/* justify-content: space-around; */
|
|
flex-wrap: wrap;
|
|
font-size: 24rpx;
|
|
margin-bottom: 15rpx;
|
|
max-height: 183rpx;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.list_l {
|
|
width: 130rpx;
|
|
height: 116rpx;
|
|
margin: 10rpx auto 0;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.yuliang {
|
|
padding: 1rpx 0 40rpx;
|
|
|
|
&_list {
|
|
padding: 60rpx 30rpx 24rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
width: 710rpx;
|
|
margin: 30rpx auto 0;
|
|
// border: 2rpx solid #ff873a;
|
|
border-radius: 12rpx;
|
|
background-color: #FFFFFF;
|
|
|
|
.shadow {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
}
|
|
}
|
|
|
|
.box-num {
|
|
position: absolute;
|
|
right: 22rpx;
|
|
top: 0;
|
|
height: 36rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 16rpx;
|
|
background: #FFCE94;
|
|
border-radius: 0rpx 0rpx 12rpx 12rpx;
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.has-num {
|
|
position: absolute;
|
|
top: 10rpx;
|
|
right: 30rpx;
|
|
|
|
font-size: 24rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
|
|
text {
|
|
color: #08F6BB;
|
|
}
|
|
}
|
|
|
|
.box {
|
|
margin-left: 20rpx;
|
|
|
|
>image {
|
|
width: 102rpx;
|
|
height: 66rpx;
|
|
}
|
|
|
|
>text {
|
|
font-weight: 400;
|
|
font-size: 20rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
.type-list {
|
|
width: calc(100% - 150rpx);
|
|
box-sizing: border-box;
|
|
padding-left: 16rpx;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 146rpx);
|
|
grid-gap: 20rpx 24rpx;
|
|
|
|
.type-item {
|
|
width: 146rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border: 2rpx solid #FFFFFF;
|
|
box-sizing: border-box;
|
|
padding: 8rpx 14rpx;
|
|
|
|
&-title {
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
&-num {
|
|
font-size: 24rpx;
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.qiangguang>image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.qiangguang {
|
|
width: 100%;
|
|
height: 100%;
|
|
/* border-radius: 20rpx; */
|
|
/* background: rgb(0, 0, 0);
|
|
opacity: 0.45; */
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.header_view_sel {
|
|
color: #333333;
|
|
border-radius: 10rpx;
|
|
position: relative;
|
|
font-size: 20rpx;
|
|
padding-left: 24rpx;
|
|
padding-right: 24rpx;
|
|
background-color: #E6F791;
|
|
|
|
// &::after {
|
|
// content: '';
|
|
// position: absolute;
|
|
// left: 50%;
|
|
// bottom: 0;
|
|
// transform: translateX(-50%);
|
|
// width: 48rpx;
|
|
// height: 4rpx;
|
|
// background: #D8D8D8;
|
|
// }
|
|
}
|
|
|
|
.header_view {
|
|
padding-left: 24rpx;
|
|
padding-right: 24rpx;
|
|
font-size: 20rpx;
|
|
color: #8A8A8A;
|
|
}
|
|
|
|
.header>view {
|
|
// width: 180rpx;
|
|
height: 58rpx;
|
|
margin-right: 20rpx;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
.arrow {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -30rpx;
|
|
transform: translateX(-50%);
|
|
width: 34px;
|
|
height: 34px;
|
|
}
|
|
|
|
&.active {
|
|
color: transparent;
|
|
background: linear-gradient(90deg, #6adeff 0%, #7ab5ff 50%, #ff7feb 100%);
|
|
background-clip: text;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
width: 690rpx;
|
|
height: 88rpx;
|
|
padding: 0 30rpx;
|
|
/* background: #080b15; */
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
overflow-x: scroll;
|
|
color: #333333;
|
|
position: fixed;
|
|
/* #ifdef MP */
|
|
top: 0;
|
|
/* #endif */
|
|
/* #ifndef MP */
|
|
top: 88rpx;
|
|
/* #endif */
|
|
z-index: 15;
|
|
}
|
|
|
|
.content {
|
|
padding: 1rpx 0 100rpx;
|
|
width: 100vw;
|
|
background-color: #F7F7F7;
|
|
min-height: 100vh;
|
|
padding-bottom: 100rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.goods_v {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
margin: 10rpx 0 0;
|
|
padding: 0 30rpx;
|
|
padding-top: 100rpx;
|
|
}
|
|
|
|
.goods_v_1 {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
</style> |