front-end/mobile-code/src/pages/goods/components/sel-popup.vue

<template>
	<div class="sel-popup">
        <bottom-popup  class="popup-wrap" :show="show" @close="close">
            <app-close @close="close" />
            <div class="tui-popup-box">
				<div class="tui-product-box">
					<img :src="imgNormal" class="tui-popup-img" />
					<div class="tui-popup-price">
                        <div class="goods-tit app-font-size-30">{{ $util.isEmpty(info.goodsStyleList) ? '' : info.goodsStyleList[selIndex].title }}</div>
						<div class="tui-amount tui-bold">￥{{ $util.isEmpty(info.goodsStyleList) ? '' : info.goodsStyleList[selIndex].price }}</div>
					</div>
				</div>
				<scroll-view scroll-y class="tui-popup-scroll">
					<div class="tui-scrolldiv-box">
						<div class="tui-bold tui-attr-title">颜色</div>
						<div class="tui-attr-box">
							<div class="tui-attr-item" :class="{'tui-attr-active': selIndex}" v-for="(item, index) in info.goodsStyleList" :key="index">{{ item.title }}</div>
						</div>

						<div class="tui-number-box tui-bold tui-attr-title">
							<div class="tui-attr-title">数量</div>
							<number-box :max="99" :min="1" :value="buyNum" @change="change"></number-box>
						</div>
					</div>
				</scroll-view>
				<div class="tui-popup-btn">
                    <button class="button-com red" @click="nextFn">下一步</button>
				</div>
			</div>
        </bottom-popup>
    </div>
</template>

<script>
import bottomPopup from '@/components/plugin/bottom-popup'
import numberBox from '@/components/plugin/number-box'
import appClose from '@/components/module/app-close'
export default {
	name: 'sel-popup',
	components: {
		bottomPopup,
		numberBox,
		appClose
	},
	props: {
		// 信息
		info: {
			type: Object,
			default: () => {
				return {}
			}
		},
		selIndex: {
			type: Number,
			default: 0
		},
		buyNum: {
			type: Number,
			default: 1
		},
		show: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {}
	},
	computed: {
		imgNormal() {
			if (!this.$util.isEmpty(this.info)) {
				return this.info.imgList[0].normal
			} else {
				return ''
			}
		}
	},
	methods: {
		change(e) {
			this.$emit('change', e)
		},
		close() {
			this.$emit('close')
		},
		nextFn() {
			this.$util.pageTo({
				url: '/pages/order/buy',
				query: {
					goodsId: this.info.id,
					goodsStyleId: this.info.goodsStyleList[this.selIndex].id,
					goodsNum: this.buyNum
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
/deep/.popup-wrap {
	.tui-popup-class {
		border-top-left-radius: 24rpx;
        border-top-right-radius: 24rpx;
        // 适配iphoneX
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-popup-box {
		position: relative;
		padding: 30rpx 30px 100rpx;
	}

	.tui-popup-btn {
		width: 100%;
		position: absolute;
		left: 0;
        bottom: 0;
        padding: 14px 0;
        @include disFlex(center, center);
        border-top: 1px solid $borderColor;
        .button-com {
            width: 80%;
            font-size: 32px;
            // padding-top: 12px;
            // padding-bottom: 12px;
        }
	}

	.tui-product-box {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		padding-bottom: 30rpx;
	}

	.tui-popup-img {
		height: 200rpx;
		width: 200rpx;
		border-radius: 24rpx;
		display: block;
	}

	.tui-popup-price {
		padding-left: 20rpx;
        padding-bottom: 8rpx;
        .goods-tit {
            margin-bottom: 75px;
        }
	}

	.tui-amount {
		color: #ff201f;
		font-size: 36rpx;
	}

	.tui-popup-scroll {
		height: 380rpx;
		font-size: 26rpx;
	}

	.tui-scrollview-box {
		padding: 0 30rpx 60rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-attr-title {
		padding: 10rpx 0;
		color: #333;
	}

	.tui-attr-box {
		font-size: 0;
		padding: 20rpx 0;
	}

	.tui-attr-item {
		max-width: 100%;
		min-width: 200rpx;
		height: 64rpx;
		display: -webkit-inline-flex;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #f7f7f7;
		padding: 0 26rpx;
		box-sizing: border-box;
		border-radius: 32rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
	}

	.tui-attr-active {
		background: #fcedea !important;
		color: #e41f19;
		font-weight: bold;
		position: relative;
	}

	.tui-attr-active::after {
		content: "";
		position: absolute;
		border: 1rpx solid #e41f19;
		width: 100%;
		height: 100%;
		border-radius: 40rpx;
		left: 0;
		top: 0;
	}

	.tui-number-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0 30rpx 0;
		box-sizing: border-box;
	}
}
</style>