8.1(优化
This commit is contained in:
Hong
@@ -1,12 +1,15 @@
|
||||
<!-- 添加材料页面 -->
|
||||
<template>
|
||||
<view>
|
||||
<view style="width: 750rpx;overflow: hidden;">
|
||||
<view class="bg-white">
|
||||
<u-tabs :current="current" :list="tabsList" lineWidth="29" @click="tabChange" lineColor="#111111" :fixed="false" :scrollable="false"></u-tabs>
|
||||
<u-tabs :current="current" :list="tabsList" lineWidth="29" @click="tabChange" lineColor="#111111"
|
||||
:fixed="false" :scrollable="false"></u-tabs>
|
||||
<view class="search-box flex align-center">
|
||||
<u-input @change="searchChange" v-model="searchValue" shape="circle" placeholder="请输入材料名" :customStyle="{background: '#f5f5f5',height: '64rpx'}" border="none">
|
||||
<u-input @change="searchChange" v-model="searchValue" shape="circle" placeholder="请输入材料名"
|
||||
:customStyle="{background: '#f5f5f5',height: '64rpx'}" border="none">
|
||||
<template slot="prefix">
|
||||
<image style="width: 32rpx;height: 32rpx;margin-left: 16rpx;" src="@/static/images/icon/search_primary.png" mode=""></image>
|
||||
<image style="width: 32rpx;height: 32rpx;margin-left: 16rpx;"
|
||||
src="@/static/images/icon/search_primary.png" mode=""></image>
|
||||
</template>
|
||||
</u-input>
|
||||
<view v-show="searchValue" class="ml-2 f-28" @click="closeSearch">
|
||||
@@ -16,15 +19,18 @@
|
||||
</view>
|
||||
<view class="content-list flex">
|
||||
<view class="left" v-if="!searchValue">
|
||||
<view @click="checkLeftIndex(index)" :style="index == leftIndex && 'background: #fff'" class="left-item flex align-center justify-center f-30 c000" v-for="(item,index) in categoryList" :key="index">
|
||||
<view @click="checkLeftIndex(index)" :style="index == leftIndex && 'background: #fff'"
|
||||
class="left-item flex align-center justify-center f-30 c000" v-for="(item,index) in categoryList"
|
||||
:key="index">
|
||||
{{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="right bg-white" style="padding: 24rpx;">
|
||||
<view class=" " :class="['bg-white',searchValue?'right_2':'right']">
|
||||
<z-paging :auto="false" use-page-scroll ref="paging" v-model="dataList" @query="queryList">
|
||||
<view v-if="searchValue" class="product-item bg-white flex align-center" v-for="(item,index) in dataList" :key="item.id">
|
||||
<view v-if="searchValue" class="product-item bg-white flex align-center"
|
||||
v-for="(item,index) in dataList" :key="item.id">
|
||||
<view class="left">
|
||||
<image src="@/static/htz-image-upload/play.png" mode=""></image>
|
||||
<image :src="item.image" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="right flex-column justify-between">
|
||||
<view class="item f-32 c111">
|
||||
@@ -40,20 +46,24 @@
|
||||
<view class="f-38 red fw-b">
|
||||
￥{{item.price}}
|
||||
</view>
|
||||
<view class="price-num flex align-center" v-if="item.value > 0">
|
||||
<u-icon @click="minus(item)" class="minus" name="minus-circle-fill" color="#13AFA8" size="20"></u-icon>
|
||||
<view class="price-num flex align-center justify-between" v-if="item.value > 0">
|
||||
<u-icon @click="minus(item,index)" class="minus" name="minus-circle-fill"
|
||||
color="#13AFA8" size="20"></u-icon>
|
||||
<view class="value-box">
|
||||
{{item.value}}
|
||||
</view>
|
||||
<u-icon @click="plus(item)" class="plus" name="plus-circle-fill" color="#13AFA8" size="20"></u-icon>
|
||||
<u-icon @click="plus(item)" class="plus" name="plus-circle-fill" color="#13AFA8"
|
||||
size="20"></u-icon>
|
||||
</view>
|
||||
<u-icon v-else name="plus-circle-fill" color="#13AFA8" size="20" @click="add(item)"></u-icon>
|
||||
<u-icon v-else name="plus-circle-fill" color="#13AFA8" size="20"
|
||||
@click="add(item)"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="!searchValue" class="product-item_1 bg-white flex align-center" v-for="(item,index) in dataList" :key="item.id">
|
||||
<view v-if="!searchValue" class="product-item_1 bg-white flex align-center"
|
||||
v-for="(item,index) in dataList" :key="item.id">
|
||||
<view class="left">
|
||||
<image src="@/static/htz-image-upload/play.png" mode=""></image>
|
||||
<image :src="item.image" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="right flex-column justify-between">
|
||||
<view class="item f-32 c111">
|
||||
@@ -69,14 +79,17 @@
|
||||
<view class="f-38 red fw-b">
|
||||
￥{{item.price}}
|
||||
</view>
|
||||
<view class="price-num flex align-center" v-if="item.value > 0">
|
||||
<u-icon @click="minus(item)" class="minus" name="minus-circle-fill" color="#13AFA8" size="20"></u-icon>
|
||||
<view class="price-num flex align-center justify-between" v-if="item.value > 0">
|
||||
<u-icon @click="minus(item,index)" class="minus" name="minus-circle-fill"
|
||||
color="#13AFA8" size="20"></u-icon>
|
||||
<view class="value-box">
|
||||
{{item.value}}
|
||||
</view>
|
||||
<u-icon @click="plus(item)" class="plus" name="plus-circle-fill" color="#13AFA8" size="20"></u-icon>
|
||||
<u-icon @click="plus(item)" class="plus" name="plus-circle-fill" color="#13AFA8"
|
||||
size="20"></u-icon>
|
||||
</view>
|
||||
<u-icon v-else name="plus-circle-fill" color="#13AFA8" size="20" @click="add(item)"></u-icon>
|
||||
<u-icon v-else name="plus-circle-fill" color="#13AFA8" size="20"
|
||||
@click="add(item)"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -90,14 +103,18 @@
|
||||
</view>
|
||||
<u-button @click="submit" class="btn" color="#13AFA8" shape="circel">提交</u-button>
|
||||
</view>
|
||||
<view style="height: 64rpx;" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { accessoryList, categoryList } from '@/api/system/config'
|
||||
import { mapGetters } from 'vuex'
|
||||
import {
|
||||
accessoryList,
|
||||
categoryList
|
||||
} from '@/api/system/config'
|
||||
import {
|
||||
mapGetters
|
||||
} from 'vuex'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -112,19 +129,19 @@
|
||||
materialList: [],
|
||||
tabsList: [{
|
||||
name: '自供'
|
||||
},{
|
||||
}, {
|
||||
name: '外采'
|
||||
}],
|
||||
dataList: []
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
this.getCategoryList()
|
||||
if(option.type) {
|
||||
this.checkIndex = option.index
|
||||
this.type = option.type
|
||||
this.keyName = option.keyName
|
||||
}
|
||||
this.getCategoryList()
|
||||
if (option.type) {
|
||||
this.checkIndex = option.index
|
||||
this.type = option.type
|
||||
this.keyName = option.keyName
|
||||
}
|
||||
uni.setNavigationBarTitle({
|
||||
title: option.title
|
||||
})
|
||||
@@ -138,7 +155,7 @@
|
||||
this.$refs.paging.reload()
|
||||
},
|
||||
searchChange(e) {
|
||||
|
||||
|
||||
this.$refs.paging.reload()
|
||||
},
|
||||
checkLeftIndex(index) {
|
||||
@@ -155,18 +172,18 @@
|
||||
queryList(pageNo, pageSize) {
|
||||
this.cateId = this.categoryList[this.leftIndex].id
|
||||
let form = {}
|
||||
if(this.searchValue) {
|
||||
if (this.searchValue) {
|
||||
form = {
|
||||
page: pageNo,
|
||||
limit: pageSize,
|
||||
limit: pageSize,
|
||||
type: this.current + 1,
|
||||
keywords: this.searchValue
|
||||
}
|
||||
} else {
|
||||
form = {
|
||||
page: pageNo,
|
||||
limit: pageSize,
|
||||
type: this.current + 1,
|
||||
limit: pageSize,
|
||||
type: this.current + 1,
|
||||
cateId: this.cateId
|
||||
}
|
||||
}
|
||||
@@ -175,44 +192,47 @@
|
||||
arr.forEach(item => {
|
||||
item.value = 0
|
||||
})
|
||||
console.log(arr);
|
||||
this.$refs.paging.complete(arr)
|
||||
}).catch(err => {
|
||||
this.$refs.paging.complete(false)
|
||||
})
|
||||
},
|
||||
tabChange(item){
|
||||
tabChange(item) {
|
||||
this.current = item.index
|
||||
this.leftIndex = 0
|
||||
this.$refs.paging.reload()
|
||||
},
|
||||
add(item) {
|
||||
item.value ++
|
||||
this.productNum ++
|
||||
item.value++
|
||||
this.productNum++
|
||||
this.materialList.push({
|
||||
accessoryId: item.id,
|
||||
accessoryId: item.id,
|
||||
isInMerchant: true,
|
||||
name: item.name,
|
||||
num: item.value,
|
||||
name: item.name,
|
||||
num: item.value,
|
||||
price: item.price,
|
||||
procurePrice: item.price
|
||||
})
|
||||
},
|
||||
minus(item) {
|
||||
minus(item, index) {
|
||||
let num = 0
|
||||
item.value --
|
||||
if(item.value == 0) {
|
||||
this.materialList.forEach((t, index) => {
|
||||
if(t.accessoryId == item.id) this.materialList.splice(index, 1)
|
||||
num += t.num
|
||||
})
|
||||
this.productNum = num
|
||||
}
|
||||
item.value--
|
||||
this.materialList.forEach((t, index) => {
|
||||
if (item.value == 0) {
|
||||
if (t.accessoryId == item.id) this.materialList.splice(index, 1)
|
||||
}
|
||||
console.log(t);
|
||||
num += t.num
|
||||
})
|
||||
console.log(num);
|
||||
this.productNum = num
|
||||
},
|
||||
plus(item) {
|
||||
let num = 0
|
||||
item.value ++
|
||||
item.value++
|
||||
this.materialList.forEach((t, index) => {
|
||||
if(t.accessoryId == item.id) t.num = item.value
|
||||
if (t.accessoryId == item.id) t.num = item.value
|
||||
num += t.num
|
||||
})
|
||||
this.productNum = num
|
||||
@@ -220,7 +240,7 @@
|
||||
valChange(n) {
|
||||
let num = 0
|
||||
this.materialList.forEach(item => {
|
||||
if(item.accessoryId == n.name) {
|
||||
if (item.accessoryId == n.name) {
|
||||
item.num = n.value
|
||||
item.procurePrice = item.price * item.num
|
||||
}
|
||||
@@ -229,16 +249,16 @@
|
||||
this.productNum = num
|
||||
},
|
||||
submit() {
|
||||
if(this.type) {
|
||||
if (this.type) {
|
||||
let packageForm = this.packageForm
|
||||
let accessoryList = packageForm[this.keyName][this.checkIndex].accessoryList
|
||||
accessoryList = [...accessoryList, ...this.materialList]
|
||||
let newArr = []
|
||||
accessoryList.forEach(item => {
|
||||
let dataItem = item;
|
||||
if (newArr.length > 0) {
|
||||
if (newArr.length > 0) {
|
||||
let filterValue = newArr.filter(v => {
|
||||
return v.accessoryId === dataItem.accessoryId
|
||||
return v.accessoryId === dataItem.accessoryId
|
||||
})
|
||||
if (filterValue.length > 0) {
|
||||
newArr.forEach(n => {
|
||||
@@ -261,9 +281,9 @@
|
||||
let newArr = []
|
||||
accessoryList.forEach(item => {
|
||||
let dataItem = item;
|
||||
if (newArr.length > 0) {
|
||||
if (newArr.length > 0) {
|
||||
let filterValue = newArr.filter(v => {
|
||||
return v.accessoryId === dataItem.accessoryId
|
||||
return v.accessoryId === dataItem.accessoryId
|
||||
})
|
||||
if (filterValue.length > 0) {
|
||||
newArr.forEach(n => {
|
||||
@@ -291,12 +311,15 @@
|
||||
page {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.content-list {
|
||||
.left {
|
||||
width: 192rpx;
|
||||
|
||||
.left-item {
|
||||
padding: 0 24rpx;
|
||||
width: 192rpx;
|
||||
@@ -304,73 +327,65 @@
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 100%;
|
||||
|
||||
.right_2 {
|
||||
width: 750rpx;
|
||||
|
||||
.product-item {
|
||||
margin: 24rpx;
|
||||
width: 750rpx;
|
||||
padding: 32rpx 24rpx;
|
||||
|
||||
.right {
|
||||
margin-left: 16rpx;
|
||||
width: 500rpx;
|
||||
width: 540rpx;
|
||||
height: 192rpx;
|
||||
|
||||
.item {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.price-num {
|
||||
.value-box {
|
||||
padding: 0 15rpx;
|
||||
width: 142rpx;
|
||||
height: 44rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 22rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.minus {
|
||||
border-radius: 50%;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.plus {
|
||||
border-radius: 50%;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
width: 142rpx;
|
||||
font-size: 32rpx;
|
||||
padding: 4rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 22rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 192rpx;
|
||||
height: 192rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 558rpx;
|
||||
|
||||
.product-item_1 {
|
||||
padding: 16rpx 24rpx 16rpx 0;
|
||||
padding: 16rpx;
|
||||
width: 558rpx;
|
||||
|
||||
.right {
|
||||
padding:0 16rpx;
|
||||
padding: 0 0 0 16rpx;
|
||||
width: 350rpx;
|
||||
height: 192rpx;
|
||||
|
||||
.item {
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.price-num {
|
||||
width: 200rpx;
|
||||
.value-box {
|
||||
padding: 0 15rpx;
|
||||
width: 142rpx;
|
||||
height: 44rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 22rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.minus {
|
||||
border-radius: 50%;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.plus {
|
||||
border-radius: 50%;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
width: 142rpx;
|
||||
font-size: 32rpx;
|
||||
padding: 4rpx;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 22rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 192rpx;
|
||||
height: 192rpx;
|
||||
@@ -379,11 +394,12 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bot-box {
|
||||
padding: 18rpx 24rpx 0 24rpx;
|
||||
width: 750rpx;
|
||||
z-index: 1000;
|
||||
|
||||
.btn {
|
||||
margin: 0;
|
||||
width: 480rpx;
|
||||
@@ -391,4 +407,4 @@
|
||||
border-radius: 48rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user