yihuo/pages/store/goods_detail.vue

<template>
    <view class="cu-modal bottom-modal" :class="{'show': visible}">
        <view class="mask" @click="close"></view>
        <view class="wrapper cu-dialog">
            <view>
              <view>
                    <view class="title">
                        商品详情
                        <view class="close" @click="close">
                            <text class="cuIcon-close"></text>
                        </view>
                    </view>
                </view>
                <scroll-view style="height: 700rpx" scroll-y>
                    <view class="paddingX20 flex-column-align-center">
                        <view v-if="item" class="color-white2 paddingB5 bold font5">{{item.name}}</view>
                        <image v-for="(item, index) in picArray" :key="index" class="image marginY5" :src="item" mode="aspectFit" />
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>
<script>
import resource from '@/utils/resource'
export default {
    data() {
        return {
            resource,
            visible: false,
            picArray: [],
            item: null
        }
    },
    methods: {
        show(item) {
            this.visible = true
            this.item = item
            this.picArray = item.pic.split(',')
        },
        close() {
            this.visible = false
            this.picArray = []
            this.$emit('close')
        }
    }
}
</script>
<style lang="scss" scoped>
.mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.wrapper {
  background: #fff;
        border-radius: 15px 15px 0px 0px !important;

    .title {
            text-align: center;
            font-size: 32rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 700;
            color: #000000;
            padding: 44rpx 0 48rpx 0;
            position: relative;
        }

        .close {
            position: absolute;
            right: 0;
            width: 48rpx;
            height: 48rpx;
            background: #ebebeb;
            border-radius: 48rpx;
            color: #a2a2a2;
            top: 30rpx;
            line-height: 48rpx;
        }
}
</style>