jiuyiUniapp/jiuyi2/pages/merchant/commodity-release/index.vue

<!-- 商品发布 -->
<template>
    <view class="jy-commodity_release">
        <!-- 商品图片多选 -->
        <uni-forms :modelValue="paramsData">
            <uni-forms-item class="vertical-label margins" label="商品图片" name="name">
                <uni-file-picker :imageStyles="{
                    width: '150rpx',
                    height: '150rpx'
                }" limit="9">
                    <view>
                        <image class="wh120" src="/static/shop-upload-image.png"></image>
                    </view>
                </uni-file-picker>
            </uni-forms-item>
            <uni-forms-item class="vertical-label margins" labelPosition="top" label="商品标题" name="name">
                <uni-easyinput type="textarea" autoHeight :inputBorder="false" maxlength="30"
                    placeholder="最多输入60字符（30个汉字）" />
            </uni-forms-item>
            <view class="margins mb20">
                <uni-forms-item label="类目" name="name">
                    <view class="df jcsb aic hohp" @click="category.open()">
                        <text class="click_select">点击选择</text>
                        <uni-icons color="#d8d8d8" type="arrowright" size="18" />
                    </view>
                    <JyPopup ref="category" title="请选择申请原因" :showSave="false">
                        <view class="reason-list" v-for="item in 10" @click="selectReason(item)">
                            <text class="label">{{ item }}</text>
                        </view>
                    </JyPopup>
                </uni-forms-item>
                <uni-forms-item label="规格" name="name">
                    <text class="click_select hohp df aic" @click="addSpecifications">添加规格</text>
                    <!-- <uni-easyinput class="hohp df aic" type="text" :inputBorder="false" placeholder="" /> -->
                </uni-forms-item>
                <uni-forms-item label="价格" name="name">
                    <uni-easyinput class="hohp df aic" type="number" :inputBorder="false" placeholder="￥0.00" />
                </uni-forms-item>
                <uni-forms-item label="库存" name="name">
                    <uni-easyinput class="hohp df aic" type="number" :inputBorder="false" placeholder="输入库存" />
                </uni-forms-item>
            </view>
            <uni-forms-item class="margins" label="发货" name="name">
                <view class="df jcsb aic hohp">
                    <text class="click_select">点击选择</text>
                    <uni-icons color="#d8d8d8" type="arrowright" size="18" />
                </view>
                <JyPopup ref="category" title="发货" :showSave="false">
                    <uni-forms :modelValue="paramsDeliveryData">
                        <uni-forms-item label="发货时间" name="name">
                            <uni-easyinput class="hohp df aic" type="text" :inputBorder="false" placeholder="输入时间" />
                        </uni-forms-item>
                        <uni-forms-item label="运费" name="name">
                            <uni-easyinput class="hohp df aic" type="text" :inputBorder="false" placeholder="输入运费" />
                        </uni-forms-item>
                        <uni-forms-item label="所在地" name="name">
                            <uni-easyinput class="hohp df aic" type="text" :inputBorder="false" placeholder="输入省，市，区" />
                        </uni-forms-item>
                    </uni-forms>
                </JyPopup>
            </uni-forms-item>
            <uni-forms-item class="margins" name="name">
                <view class="df jcsb aic hohp">
                    <view class="df aic hohp">
                        <image class="wh50 mr40" src="/static/commodity-release-video.png" mode="aspectFit" />
                        <text>添加链接到视频</text>
                    </view>
                    <uni-icons color="#d8d8d8" type="arrowright" size="18" />
                </view>
            </uni-forms-item>
        </uni-forms>
    </view>
    <!-- 立即发布 -->
    <JyBottomBtn @click="postApi">立即发布</JyBottomBtn>
</template>

<script setup>
import { ref, reactive, inject, onMounted, onUnmounted } from 'vue'
import JyBottomBtn from '@/components/public/jy-bottom-button'
import JyPopup from '@/components/public/jy-popup'
const { checkLink } = inject('util');
import { eventBus } from '@/components/public/event-bus'
onMounted(() => {
    eventBus.on('business-operator', businessOperator)
})
onUnmounted(() => {
    eventBus.off('business-operator')
});
const businessOperator = (value) => {
    console.log('====================================');
    console.log(value);
    console.log('====================================');
}

const category = ref(null)
const paramsData = reactive({
    name: ''
})
const paramsDeliveryData = reactive({
    name: ''
})
const postApi = () => {
    uni.showToast({
        title: '发布成功',
        icon: 'none'
    })
}
const addSpecifications = () => {
    checkLink('pages/merchant/specifications/index')
}
</script>
<style scoped lang="scss">
.jy-commodity_release {
    padding: 26rpx;

    .vertical-label {
        display: flex;
        flex-direction: column !important;
    }

    .uni-forms-item {
        margin-bottom: 20rpx !important;
    }

    ::v-deep .file-picker__box-content {
        border: none !important;
    }

    ::v-deep .uni-easyinput {
        .uni-easyinput__content-input {
            padding: 0px !important;

        }

        .uni-input-placeholder {
            display: flex;
            align-items: center;
            color: #c9c9c9 !important;
            font-size: 28rpx !important;
            height: 100%;
        }

    }

    .margins {
        padding: 16rpx 24rpx;
        border-radius: 20rpx;
        background-color: #ffffff;
    }

    .click_select {
        color: #C9C9C9;
    }
}
</style>