jsm-mall-h5-front/src/packageGoods/pages/tradein/form.vue

<template>
	<!-- #ifdef H5 -->
  <zj-page-layout hasFooter>
		<view class="all-container">
			<view class="top-container card">
				<view class="main">
					<image :src="cimg" mode="aspectFill" v-if="cimg"></image>
					<view class="name">{{cname}}</view>
				</view>
				<view class="tips">温馨提示：机器状况将影响预估回收价，请准确填写</view>
			</view>

			<view class="item-container card" v-for="(item, index) in attrList.filter((it, idx) => idx <= attrIndex || it.goodsCategoryItems.some(o => o.active))" :key="index">
				<view class="main">
					<view class="label">{{item.name}}</view>
					<view class="right" v-if="item.typeOption == 'MANY' && item.open">
						<view class="btn" @tap="confirmOption(index)">确认</view>
					</view>
					<view class="right" @tap="clickAction(index)" v-else>
						<view class="value" v-if="!item.open || item.goodsCategoryItems.some(o => o.active)">
							{{item.typeOption == 'SIGIN' ? (item.goodsCategoryItems.find(o => o.active) ? item.goodsCategoryItems.find(o => o.active).dictName : '') : item.goodsCategoryItems.filter(o => o.active).map(o => o.dictName).join('、')}}
						</view>
						<u-icon name="arrow-down-fill" size="12" color="#999999"></u-icon>
					</view>
				</view>
				<view class="options" v-show="item.open">
					<view class="it" :class="it.active || it.activeWait ? 'active' : ''" v-for="(it, idx) in item.goodsCategoryItems" :key="idx" @tap="clickOption(index, idx)">{{it.dictName}}<u-icon name="checkmark-circle-fill" size="20" color="#3D8FFD" v-if="it.active || it.activeWait"></u-icon></view>
				</view>
			</view>
		</view>

    <template slot="footer">
			<view class="footer-btn-group">
				<u-button type="primary" shape="circle" text="立即换新" :disabled="!attrList.every(item => item.goodsCategoryItems.some(o => o.active))" @click="submitData"></u-button>
			</view>
    </template>
  </zj-page-layout>
  <!-- #endif -->

  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/packageGoods/pages/tradein/form`, pam, crossPagePam)" @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
  export default {
    data() {
      return {
				pid: '',
				cid: '',
				cname: '',
				cimg: '',
				attrList: [],
				attrIndex: 0,
      }
    },

    onLoad({pid, cid, cname, cimg}) {
			this.pid = pid;
			this.cid = cid;
			this.cname = cname;
			this.cimg = cimg;

			this.getAttrList();
    },

    methods: {
			// 获取属性
      getAttrList() {
				this.$api.get('/trade/listCategoryItem', {
          mainId: this.cid,
				}).then(res => {
					res.data.forEach(item => {
						item.open = false;
						item.goodsCategoryItems.forEach(it => {
							it.active = false;
							it.activeWait = false;
						})
					})
					res.data[0].open = true;
					this.attrList = res.data;
				})
			},

			// 点击属性值
			clickAction(index) {
				for(let i=0; i < this.attrList.length; i++) {
					if(this.attrList[i].typeOption == 'MANY' && this.attrList[i].goodsCategoryItems.every(o => !o.active) && this.attrList[i].open) {
						return this.$toast('请确认');
					}
				}

				this.attrList.forEach(item => {
					item.open = false;
				})
				this.attrList[index].open = true;

				const type = this.attrList[index].typeOption;
				// 多选
				if(type == 'MANY') {
					this.attrList[index].goodsCategoryItems.forEach(item => {
						item.active = false;
					})
				}

			},

			// 点击选项
			clickOption(index, idx) {
				const type = this.attrList[index].typeOption;

				// 单选
				if(type == 'SIGIN') {
					this.attrList[index].open = false;
					if(this.attrList[index + 1] && this.attrList[index + 1].goodsCategoryItems.every(o => !o.active)) {
						this.attrList[index + 1].open = true;
					}
					this.attrList[index].goodsCategoryItems.forEach(item => {
						item.active = false;
					})
					this.attrList[index].goodsCategoryItems[idx].active = true;
					this.attrIndex = index + 1;
				}
				// 多选
				else {
					this.attrList[index].goodsCategoryItems[idx].activeWait = !this.attrList[index].goodsCategoryItems[idx].activeWait;
				}

			},

			// 多选确认
			confirmOption(index, idx) {
				if(this.attrList[index].goodsCategoryItems.every(o => !o.activeWait)) {
					return this.$toast('请选择');
				}
				this.attrList[index].goodsCategoryItems.forEach(item => {
					if(item.activeWait) {
						item.active = true;
					}
				})
				this.attrList[index].open = false;
				if(this.attrList[index + 1] && this.attrList[index + 1].goodsCategoryItems.every(o => !o.active)) {
					this.attrList[index + 1].open = true;
				}
				this.attrIndex = index + 1;
			},

			// 提交
			submitData() {
				let activeList = [];
				this.attrList.forEach(item => {
					if(item.typeOption == 'SIGIN') {
						activeList.push(item.goodsCategoryItems.find(o => o.active)).id
					}else {
						activeList.push(...item.goodsCategoryItems.filter(o => o.active))
					}
				})
        let ids = activeList.map(o => o.id).join(',');

        this.$navToPage({
        	url: `/packageGoods/pages/order?tradeIds=${ids}`
        }, 'redirectTo')
			}
    }
  }
  // #endif
  // #ifndef H5
  export default {
    data() {
      return {
        pam: {},
      }
    },
    onLoad(pam) {
      this.pam = pam;
    }
  }
  // #endif
</script>

<style lang="scss" scoped>
.all-container {
	padding: 20rpx;
}

.card {
	@include zj-card;
}

.top-container {
	.main {
		display: flex;
		align-items: center;
		padding: 30rpx;
		image {
			width: 80rpx;
			height: 80rpx;
		}
		.name {
			margin-left: 20rpx;
			font-size: 32rpx;
			font-weight: 600;
		}
	}
	.tips {
		background: #f5f5f5;
		font-size: 24rpx;
		padding: 30rpx;
		color: $sec-font;
	}
}

.item-container {
	padding: 40rpx 30rpx;
	margin-top: 20rpx;
	.main {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.label {
			font-size: 32rpx;
			font-weight: 600;
		}
		.right {
			display: flex;
			align-items: center;
			.btn {
				color: $theme-color;
				font-size: 32rpx;
				font-weight: 500;
			}
			.value {
        font-size: 28rpx;
				margin-right: 10rpx;
			}
		}
	}
	.options {
		padding-top: 10rpx;
		.it {
      font-size: 28rpx;
			background: #f5f5f5;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;
			position: relative;
			font-weight: 600;
			border-radius: 10rpx;
			&.active {
				background: rgba($color: $theme-color, $alpha: .15);
			}
			::v-deep .u-icon {
				position: absolute;
				right: 26rpx;
				top: 26rpx;
			}
		}
	}
}
</style>