333 lines
8.2 KiB
Vue
333 lines
8.2 KiB
Vue
<template>
|
||
<view class="invoice-wrap" :class="[`${themeInfo.theme}-theme`]">
|
||
<navBar></navBar>
|
||
<view class="content">
|
||
<view class="info">
|
||
<view class="i-header">
|
||
<view class="tabbox">
|
||
<view class="li">
|
||
{{ $t("common.goodsList") }}
|
||
</view>
|
||
</view>
|
||
<view class="tips">
|
||
{{ $t("goodsList.info") }}
|
||
</view>
|
||
<view> </view>
|
||
</view>
|
||
<view class="infobox">
|
||
<uv-checkbox-group v-model="state.goodsIds" shape="circle" activeColor="var(--main-color)">
|
||
<view class="selectbox" v-for="(item, index) in state.dataList" :key="index">
|
||
<view class="li-title" @click="hadelShowHide(index)">
|
||
<view class="left"> {{ item.name }}（{{ $t("goodsList.multi") }}）</view>
|
||
<view class="right"> {{ item.show?'-':'+' }} </view>
|
||
</view>
|
||
<template v-if="item.show&&item.tree.length>0">
|
||
<view class="li-box" v-for="(item2, index2) in item.tree" :key="index2">
|
||
<view class="li2-title">
|
||
<view class="text"> [ {{item2.name}} ] </view>
|
||
<view class="line"> </view>
|
||
</view>
|
||
<view class="radioBox" v-if="item2.tree.length>0">
|
||
<uv-checkbox
|
||
:customStyle="{ marginBottom: '8px',marginRight:'8px' }"
|
||
v-for="(item3, index3) in item2.tree"
|
||
:key="index"
|
||
:label="item3.name"
|
||
:name="item3.id"
|
||
></uv-checkbox>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</uv-checkbox-group>
|
||
<view class="selectbox" style="margin-bottom: 20rpx;">
|
||
<view class="li-title">
|
||
<view class="left"> 其他（{{ $t("goodsList.note") }}）</view>
|
||
<view class="right"> </view>
|
||
</view>
|
||
</view>
|
||
<view class="textareaBox">
|
||
<uv-textarea
|
||
v-model="state.goodsListRemark"
|
||
height="140.8rpx"
|
||
:placeholder="$t('goodsList.note')"
|
||
customStyle="background: transparent; border-radius: 16rpx; border:none;"
|
||
textStyle="font-size: 24rpx; color: rgb(15, 34, 50); font-weight: 400; line-height: 35rpx;"
|
||
|
||
>
|
||
</uv-textarea>
|
||
</view>
|
||
<view class="tipsInfo">
|
||
<view class="p">
|
||
{{ $t("goodsList.tip1") }}
|
||
</view>
|
||
<view class="p">{{ $t("goodsList.tip2") }}</view>
|
||
<view class="p">{{ $t("goodsList.tip3") }}</view>
|
||
<view class="p">{{ $t("goodsList.tip4") }}</view>
|
||
</view>
|
||
<button class="btn" @click="submit" :disabled="state.goodsListRemark==''&&state.goodsIds.length==0">
|
||
{{ $t('goodsList.submit') }}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
// 主题色配置
|
||
import { useMainStore } from "@/store/index.js";
|
||
const { themeInfo } = useMainStore();
|
||
import navBar from "@/components/navBar.vue";
|
||
import { useGoodsApi } from "@/Apis/goodsList.js";
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
import { navigateBack } from '@/utils/common.js';
|
||
const getApi = useGoodsApi();
|
||
import { reactive } from "vue";
|
||
const state = reactive({
|
||
goodsIds: [],
|
||
orderId: "",
|
||
dataList: [],
|
||
goodsListRemark:"",
|
||
});
|
||
const hadelShowHide = (index) => {
|
||
state.dataList[index].show = !state.dataList[index].show;
|
||
};
|
||
const getDataList = ()=>{
|
||
uni.showLoading()
|
||
getApi.GetGoodsList().then(res=>{
|
||
if(res.code == 200){
|
||
getDetails();
|
||
state.dataList = res.data;
|
||
state.dataList.forEach(item=>{
|
||
item.show = true;
|
||
})
|
||
|
||
}
|
||
}).finally(()=>{
|
||
uni.hideLoading()
|
||
})
|
||
}
|
||
|
||
const submit = ()=>{
|
||
uni.showLoading()
|
||
getApi.SubmitGoodsList({
|
||
goodsIds:state.goodsIds,
|
||
orderId:state.orderId,
|
||
goodsListRemark:state.goodsListRemark
|
||
}).then(res=>{
|
||
if(res.code == 200){
|
||
uni.showToast({
|
||
title:res.msg,
|
||
icon:"none"
|
||
})
|
||
setTimeout(()=>{
|
||
navigateBack()
|
||
},500)
|
||
} else {
|
||
uni.showToast({
|
||
title:res.msg,
|
||
icon:"none"
|
||
})
|
||
}
|
||
})
|
||
}
|
||
const getDetails = ()=>{
|
||
uni.showLoading()
|
||
getApi.GetSubmitGoodsList(state.orderId).then(res=>{
|
||
if(res.code == 200){
|
||
state.goodsIds = res.data.filter(item=>!item.isRemark).map(item=>item.value);
|
||
state.goodsListRemark = res.data.find(item=>item.isRemark)?.value
|
||
}
|
||
}).finally(()=>{
|
||
uni.hideLoading()
|
||
})
|
||
}
|
||
onLoad ((option) => {
|
||
state.orderId = option.orderId;
|
||
getDataList();
|
||
})
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/static/style/theme.scss";
|
||
|
||
.invoice-wrap {
|
||
min-height: 100vh;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 0 40rpx;
|
||
padding-bottom: 20rpx;
|
||
background: linear-gradient(
|
||
to bottom,
|
||
var(--right-linear),
|
||
var(--left-linear2)
|
||
);
|
||
|
||
.content {
|
||
width: 100%;
|
||
|
||
.infobox {
|
||
width: 100%;
|
||
padding: 20rpx 40rpx;
|
||
background-color: #ffffff;
|
||
position: relative;
|
||
.selectbox {
|
||
width: 100%;
|
||
|
||
.li-title{
|
||
padding: 8rpx 40rpx;
|
||
color: var(--text-color);
|
||
border-radius: 999rpx;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
background: var(--active-color);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.li2-title{
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
.text{
|
||
color: var(--stress-text);
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
}
|
||
.line{
|
||
height: 1px;
|
||
flex: 1;
|
||
background: var(--stress-text);
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
.radioBox {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
}
|
||
}
|
||
|
||
.textareaBox {
|
||
margin-top: 20rpx;
|
||
width: 100%;
|
||
height: 220rpx;
|
||
background: #F2F2F2;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
&::before {
|
||
content: "";
|
||
z-index: 9;
|
||
position: absolute;
|
||
bottom: -7px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 14px;
|
||
background: radial-gradient(
|
||
var(--left-linear2) 0px,
|
||
var(--left-linear2) 5px,
|
||
transparent 5px,
|
||
transparent
|
||
);
|
||
background-size: 14px 14px;
|
||
}
|
||
.tipsInfo{
|
||
padding: 40rpx 0rpx;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
.p{
|
||
margin-top: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
margin-bottom: 40rpx;
|
||
border-radius: 2px;
|
||
background: var(--active-color);
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
color: var(--text-color);
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.i-header {
|
||
position: relative;
|
||
font-weight: bold;
|
||
|
||
.tips {
|
||
padding: 0 40rpx;
|
||
font-size: 22rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
|
||
&::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -7px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 14px;
|
||
background: radial-gradient(
|
||
var(--right-linear) 0px,
|
||
var(--right-linear) 5px,
|
||
transparent 5px,
|
||
transparent
|
||
);
|
||
background-size: 14px 14px;
|
||
z-index: 9;
|
||
}
|
||
|
||
padding: 30upx 0;
|
||
width: 100%;
|
||
background-color: #f7f7f7;
|
||
color: #242e42;
|
||
|
||
.tabbox {
|
||
position: relative;
|
||
padding: 20upx 10%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
.li {
|
||
width: 50%;
|
||
background-color: transparent;
|
||
font-size: 32upx;
|
||
outline: none;
|
||
text-align: center;
|
||
}
|
||
|
||
.li.active {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.bottom-line {
|
||
position: absolute;
|
||
left: calc(50% - 220rpx);
|
||
bottom: 0;
|
||
width: 160rpx;
|
||
height: 2.5px;
|
||
border-radius: 20px;
|
||
background: var(--main-color);
|
||
transition: left 0.5s ease;
|
||
|
||
&.right {
|
||
left: calc(50% + 60rpx);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|