caimei-applets-mcare/pages/goods/goods-doc-detail.vue

<!-- 自定义页面 -->
<template>
    <view class="goods-doc-detail" :style="{ paddingBottom: tipStatus ? '80rpx' : '0' }">
        <view class="cm-header">
            <image
                class="cm-cover"
                :src="productImage ? productImage : 'https://static.caimei365.com/app/img/icon2/placeholder.png'"
            ></image>
            <view class="cm-title"> {{ productName }} </view>
            <view class="cm-params"><text>供应商：</text>{{ shopName || '暂无' }}</view>
            <view class="cm-params"><text>商品属性：</text>{{ productType === 1 ? '商品' : '仪器' }}</view>
        </view>
        <cm-product-doc
            v-if="archiveId !== 0"
            :archiveId="archiveId"
            :bottom="isIphoneX ? '60rpx' : '10rpx'"
            @tipStatus="getTipStatus"
        ></cm-product-doc>
    </view>
</template>

<script>
import { mapState } from 'vuex'
import cmProductDoc from './components/cm-product-doc.vue'
export default {
    components: {
        cmProductDoc
    },
    computed: {
        ...mapState(['isIphoneX'])
    },
    onLoad(e) {
        this.userId = uni.getStorageSync('userInfo').userId || -1
        this.archiveId = e.id || 0
        this.getDetail()
    },
    data() {
        return {
            userId: -1,
            archiveId: 0,
            archiveProductInfo: {},
            productImage: '',
            productName: '',
            productType: 0,
            shopName: '',
            tipStatus: ''
        }
    },
    methods: {
        // 获取商品资料详情
        getDetail() {
            console.log(this.userId)
            this.BeautyArchive.GetProdcutArchiveDetails({
                userId: this.userId,
                archiveId: this.archiveId
            }).then(res => {
                console.log(res)
                if (res.code) return
                this.productImage = res.data.productImage
                this.productName = res.data.productName
                this.productType = res.data.productType
                this.shopName = res.data.shopName
            })
        },
        // 获取权限tip
        getTipStatus(status) {
            this.tipStatus = status
        }
    }
}
</script>

<style lang="scss" scoped>
.goods-doc-detail {
    background: #f7f7f7;
}
.cm-header {
    background: #fff;
    margin-bottom: 16rpx;
    overflow: hidden;
    .cm-cover {
        width: 750rpx;
        height: 750rpx;
    }
    .cm-title,
    .cm-params {
        padding: 0 24rpx;
    }
    .cm-title {
        margin: 32rpx 0;
        font-size: 34rpx;
        line-height: 1.6;
        color: #333333;
    }
    .cm-params {
        margin: 16rpx 0;
        font-size: 24rpx;
        line-height: 1.6;
        color: #333333;
        text {
            font-size: #999999;
        }
    }
}
</style>