|
<template>
?? ?<view class="brand">
?? ??? ?<view v-for="(item,index) in subList" :key="index" class="brand_item">
?? ??? ??? ?<view class="brandList_left">
?? ??? ??? ??? ?<u-form labelPosition="top" :model="item" >
?? ??? ??? ??? ??? ?<u-form-item label="*品牌" prop="brand" :borderBottom="false">
?? ??? ??? ??? ??? ??? ?<u-input v-model="item.brand" disabledColor="#ffffff" placeholder="请选择" disabled
?? ??? ??? ??? ??? ??? ??? ?@click="showBrandList(index)"></u-input>
?? ??? ??? ??? ??? ??? ?<u-icon slot="right" name="arrow-down"></u-icon>
?? ??? ??? ??? ??? ?</u-form-item>
?? ??? ??? ??? ??? ?<view class="num">
?? ??? ??? ??? ??? ??? ?组件可用库存(块):{{item.usableStocks}}
?? ??? ??? ??? ??? ?</view>
?? ??? ??? ??? ??? ?<u-form-item label="*数量(块)" prop="brandNum" :borderBottom="false">
?? ??? ??? ??? ??? ??? ?<u-input v-model="item.useCount" :border="false" placeholder="请输入" @input='change' @blur='blur' ?type="number"></u-input>
?? ??? ??? ??? ??? ?</u-form-item>
?? ??? ??? ??? ?</u-form>
?? ??? ??? ?</view>
?? ??? ??? ?<view class="brand_icon">
?? ??? ??? ??? ?<u-icon v-if="index>=1" name="minus-circle-fill" color="red" ?size="48" @click="handleMinus(index,'minus')"></u-icon>
?? ??? ??? ??? ?<u-icon v-else name="plus-circle-fill" color="#2979ff" size="48" @click="handlePlus(index,'plus')"></u-icon>
?? ??? ??? ?</view>
?? ??? ?</view>
?? ??? ?<u-action-sheet :list="curBrandList" v-model="showBrand" @close="showBrand = false"
?? ??? ??? ?@click="brandSelect($event)">
?? ??? ?</u-action-sheet>
?? ?</view>
</template>
<script>
?? ?export default {
?? ??? ?props: {
?? ??? ??? ?brand: {
?? ??? ??? ??? ?type: Array,
?? ??? ??? ??? ?default:()=>{
?? ??? ??? ??? ??? ?return []
?? ??? ??? ??? ?},
?? ??? ??? ?},
?? ??? ??? ?subList: {
?? ??? ??? ??? ?type: Array,
?? ??? ??? ??? ?default:()=>{
?? ??? ??? ??? ??? ?return []
?? ??? ??? ??? ?},
?? ??? ??? ?}
?? ??? ?},
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?brandModel: {
?? ??? ??? ??? ??? ?brand: '',
?? ??? ??? ??? ??? ?brandNum: ''
?? ??? ??? ??? ?},
?? ??? ??? ??? ?showBrand: false,
?? ??? ??? ??? ?brandIndex:-1,
?? ??? ??? ??? ?brandList:[],
?? ??? ??? ??? ?brandListOld:[],?? ?
?? ??? ??? ??? ?type:'',
?? ??? ??? ??? ?rules: {
?? ??? ??? ??? ??? ?brand: [{
?? ??? ??? ??? ??? ??? ?required: true,
?? ??? ??? ??? ??? ??? ?message: '请选择职业',
?? ??? ??? ??? ??? ??? ?trigger: ['change', 'blur']
?? ??? ??? ??? ??? ?}],
?? ??? ??? ??? ??? ?brandNum: [{
?? ??? ??? ??? ??? ??? ?required: true,
?? ??? ??? ??? ??? ??? ?message: '请输入',
?? ??? ??? ??? ??? ??? ?trigger: ['change', 'blur']
?? ??? ??? ??? ??? ?}]
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?},
?? ??? ?computed: {
?? ??? ??? ?//把每一项点击过的筛选出去
?? ??? ??? ?curBrandList() {
?? ??? ??? ??? ?return this.brand.filter(item=>{
?? ??? ??? ??? ??? ?return this.subList.map((v,i)=>{
?? ??? ??? ??? ??? ??? ?if (i == this.brandIndex){
?? ??? ??? ??? ??? ??? ??? ?return ''
?? ??? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ??? ?return v.brand
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?}).indexOf(item.text) == -1
?? ??? ??? ??? ?})
?? ??? ??? ?}
?? ??? ?},
?? ??? ?methods: {
?? ??? ??? ?brandSelect(index) {
?? ??? ??? ??? ?let list = this.curBrandList
?? ??? ??? ??? ?this.subList[this.brandIndex].brand = ?list[index].text
?? ??? ??? ??? ?this.subList[this.brandIndex].usableStocks = ?list[index].usableStocks
?? ??? ??? ?},
?? ??? ??? ?handlePlus(index,type){
?? ??? ??? ??? ?console.log(index,type)
?? ??? ??? ??? ?this.type=type ?? ?
?? ??? ??? ??? ?// console.log(this.brand)
?? ??? ??? ??? ?this.subList.push({
?? ??? ??? ??? ??? ?brand: '',
?? ??? ??? ??? ??? ?useCount: ''
?? ??? ??? ??? ?})
?? ??? ??? ?
?? ??? ??? ?},
?? ??? ??? ?handleMinus(index,type){
?? ??? ??? ??? ?console.log(index,type)
?? ??? ??? ??? ?this.type=type
?? ??? ??? ??? ?this.subList.splice(index,1)
?? ??? ??? ??? ?
?? ??? ??? ?},
?? ??? ??? ?showBrandList(index){
?? ??? ??? ??? ?this.brandIndex = index
?? ??? ??? ??? ?this.showBrand = true
?? ??? ??? ?},
?? ??? ??? ?change(e){?? ?
?? ??? ??? ??? ?console.log(e)
?? ??? ??? ?},
?? ??? ??? ?blur(e){
?? ??? ??? ??? ?this.$emit('handleInput',e)
?? ??? ??? ?}
?? ??? ?
?? ??? ?},
?? ??? ?mounted() {
?? ??? ?
?? ??? ?}
?? ?}
</script>
<style scoped lang="scss">
?? ?.brand {
?? ??? ?box-sizing: border-box;
?? ??? ?width: 100%;
?? ??? ?// display: flex;
?? ??? ?// align-items: center;
?? ??? ?.brand_item {
?? ??? ??? ?margin-bottom: 32rpx;
?? ??? ??? ?position: relative;
?? ??? ?}
?? ??? ?.brandList_left {
?? ??? ??? ?width: 90%;
?? ??? ??? ?border: 2rpx solid #EDEDF2;
?? ??? ??? ?padding: 0 32rpx;
?? ??? ??? ?border-radius: 16rpx;
?? ??? ??? ?
?? ??? ?}
?? ??? ?/deep/ .u-form-item--right__content {
?? ??? ??? ?border: 2rpx solid rgba(0, 0, 0, 0.15);
?? ??? ??? ?border-radius: 32rpx;
?? ??? ??? ?padding: 0 24rpx;
?? ??? ?}
?? ??? ?.num {
?? ??? ??? ?color: #1993D0;
?? ??? ??? ?font-size: 24rpx;
?? ??? ?}
?? ??? ?.brand_icon {
?? ??? ??? ?position: absolute;
?? ??? ??? ?right: 0;
?? ??? ??? ?top: 50%;
?? ??? ?}
?? ?}
</style>
?
|