admin/addon/mobileshop/source/os/pages/goods/add.vue

184 lines
6.6 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view>
<!-- <scroll-view scroll-y="true" class="goods-scroll"> -->
<view class="goods-edit-wrap">
<view class="goods-item">
<view class="title">商品类型</view>
<view class="goods-type">
<view :class="{ 'selected color-base-text color-base-border': goodsClass == 1 }" @click="goodsClass = 1">
<text>实物商品</text>
<text class="iconfont iconduigou1"></text>
</view>
<view :class="{ 'selected color-base-text color-base-border': goodsClass == 2 }" @click="goodsClass = 2">
<text>虚拟商品</text>
<text class="iconfont iconduigou1"></text>
</view>
</view>
</view>
<view class="form-main">
<view class="form-title">基础信息</view>
<view class="goods-item">
<view class="form-wrap">
<text class="label">商品名称</text>
<input class="uni-input" v-model="goodsData.goods_name" placeholder="请输入商品名称" maxlength="100" />
</view>
<view class="form-wrap">
<text class="label">促销语</text>
<input class="uni-input" v-model="goodsData.introduction" placeholder="请输入促销语" maxlength="100" />
</view>
<view class="form-wrap more-wrap" @click="openGoodsCategory()">
<text class="label">商品分类</text>
<text class="selected">请选择</text>
<text class="iconfont iconright"></text>
</view>
<view class="form-wrap goods-img" :style="{ height: goodsImgHeight + 'px' }">
<text class="label">商品图片</text>
<view class="img-list">
<shmily-drag-image :list.sync="goodsData.goods_image" :imageWidth="170" :number="10" :callback="refreshGoodsImgHeight()"></shmily-drag-image>
<view class="tips">建议尺寸800*800长按图片可拖拽排序最多上传10张</view>
</view>
</view>
</view>
</view>
<view class="form-main">
<view class="form-title">规格、价格及库存</view>
<view class="goods-item">
<view class="form-wrap more-wrap" @click="openGoodsSpec()">
<text class="label">规格类型</text>
<text class="selected color-title">单规格</text>
<text class="iconfont iconright"></text>
</view>
<view class="form-wrap more-wrap" @click="openGoodsSpecEdit()">
<text class="label">规格详情</text>
<text class="selected">价格、库存</text>
<text class="iconfont iconright"></text>
</view>
<view class="form-wrap price">
<text class="label">销售价</text>
<input class="uni-input" v-model="goodsData.price" placeholder="0.00" />
<text class="unit">元</text>
</view>
<view class="form-wrap price">
<text class="label">划线价</text>
<input class="uni-input" v-model="goodsData.market_price" placeholder="0.00" />
<text class="unit">元</text>
</view>
<view class="form-wrap price">
<text class="label">成本价</text>
<input class="uni-input" v-model="goodsData.cost_price" placeholder="0.00" />
<text class="unit">元</text>
</view>
<view class="form-wrap price">
<text class="label">库存</text>
<input class="uni-input" v-model="goodsData.goods_stock" placeholder="0" />
<text class="unit">件</text>
</view>
<view class="form-wrap price">
<text class="label">库存预警</text>
<input class="uni-input" v-model="goodsData.goods_stock_alarm" placeholder="0" />
<text class="unit">件</text>
</view>
<view class="form-wrap price">
<text class="label">重量</text>
<input class="uni-input" v-model="goodsData.weight" placeholder="0.00" />
<text class="unit">kg</text>
</view>
<view class="form-wrap price">
<text class="label">体积</text>
<input class="uni-input" v-model="goodsData.volume" placeholder="0.00" />
<text class="unit">m³</text>
</view>
<view class="form-wrap price">
<text class="label">商品编码</text>
<input class="uni-input" v-model="goodsData.sku_no" placeholder="请输入商品编码" />
</view>
</view>
</view>
<view class="form-main">
<view class="form-title">配送及其他信息</view>
<view class="goods-item">
<view class="form-wrap more-wrap" @click="openExpressFreight()">
<text class="label">快递运费</text>
<text class="selected">免邮</text>
<text class="iconfont iconright"></text>
</view>
<!-- <view class="form-wrap more-wrap">
<text class="label">运费模板</text>
<text class="selected">请选择运费模板</text>
<text class="iconfont iconright"></text>
</view> -->
<view class="form-wrap price">
<text class="label">限购数量</text>
<input class="uni-input" placeholder="0" />
<text class="unit">件</text>
</view>
<view class="form-wrap price">
<text class="label">起售数量</text>
<input class="uni-input" placeholder="0" />
<text class="unit">件</text>
</view>
<view class="form-wrap price">
<text class="label">单位</text>
<input class="uni-input" placeholder="请输入单位" />
</view>
<view class="form-wrap price">
<text class="label">排序</text>
<input class="uni-input" placeholder="0" />
</view>
<view class="form-wrap more-wrap" @click="openGoodsState()">
<text class="label">状态</text>
<text class="selected">立刻上架</text>
<text class="iconfont iconright"></text>
</view>
</view>
</view>
<view class="form-main">
<view class="form-title">商品详情</view>
<view class="goods-item">
<view class="form-wrap more-wrap">
<text class="label">商品详情</text>
<text class="selected">查看</text>
<text class="iconfont iconright"></text>
</view>
</view>
</view>
<view class="form-main">
<view class="form-title">商品参数</view>
<view class="goods-item">
<view class="form-wrap more-wrap" @click="openAttr()">
<text class="label">商品参数</text>
<text class="selected">查看</text>
<text class="iconfont iconright"></text>
</view>
</view>
</view>
<!-- <loading-cover ref="loadingCover"></loading-cover> -->
</view>
<!-- </scroll-view> -->
<view class="footer-wrap"><button type="primary">保存</button></view>
</view>
</template>
<script>
import shmilyDragImage from '@/components/shmily-drag-image/shmily-drag-image.vue';
import nsSwitch from '@/components/ns-switch/ns-switch.vue';
import edit from './js/edit.js';
export default {
components: {
shmilyDragImage,
nsSwitch
},
mixins: [edit]
};
</script>
<style lang="scss">
@import './css/edit.scss';
</style>