i

src/pages/product/addGoods/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+    navigationBarTitleText: '商品添加/编辑'
+})
+  

src/pages/product/addGoods/index.vue

@@ -1,15 +1,158 @@
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script lang="ts" setup>
+import Taro from '@tarojs/taro'
+import {Ref, ref} from 'vue'
+import Upload from '../../../components/Upload.vue'
+import RichEditor from '../../../components/RichEditor.vue'
+import {addGood} from '@/api/product'
 
-export default defineComponent({
-name: "index"
+const ruleForm = ref(null) as Ref
+
+const basicData = ref({
+    name: '',
+    class_id: null,
+    cover: [],
+    rotation: [],
+    profile: '',
+    details: '',
+    stock: null,
+    number: null,
+    market_num: null,
+    state: 2
 })
+
+const rules = {
+    name: [{
+        required: true,
+        message: '请填写商品名称'
+    }],
+    class_id: [{
+        required: true,
+        message: '请选择商品分类'
+    }],
+    cover: [{
+        required: true,
+        message: '请上传商品封面',
+        validator: (value) => {
+            return value.length > 0
+        }
+    }],
+    rotation: [{
+        required: true,
+        message: '请上传商品轮播图',
+        validator: (value) => {
+            return value.length > 0
+        }
+    }],
+    profile: [{
+        required: true,
+        message: '请填写商品名称'
+    }],
+    stock: [{
+        required: true,
+        message: '请填写商品库存'
+    }],
+    number: [{
+        required: true,
+        message: '请填写商品价格'
+    }],
+    market_num: [{
+        required: true,
+        message: '请填写商品市场价'
+    }]
+}
+
+const columnsClass = ref([])
+
+Taro.useLoad((options) => {
+    console.log(options)
+})
+
+const openGoodClass = ref(false)
+
+const confirmClass = (val: any) => {
+    console.log(val)
+}
+
+const ok = async () => {
+    ruleForm.value.validate().then(({valid, errors}: any) => {
+        if (valid) {
+            console.log('success', basicData.value)
+        } else {
+            console.log('error submit!!', errors)
+        }
+    })
+}
 </script>
 
 <template>
-  $END$
+    <view>
+        {{ basicData }}
+        <nut-backtop>
+            <template v-slot:content>
+                <nut-form ref="ruleForm" :model-value="basicData" :rules="rules">
+                    <nut-form-item label="商品分类:" required prop="class_id">
+                        <nut-input v-model="basicData.class_id" disabled placeholder="请选择商品分类"
+                                   @click="openGoodClass = true"/>
+                    </nut-form-item>
+                    <nut-form-item label="商品封面:" required prop="cover">
+                        <Upload v-model:list="basicData.cover"/>
+                    </nut-form-item>
+                    <nut-form-item label="商品轮播图:" required prop="rotation">
+                        <Upload v-model:list="basicData.rotation" :max="10"/>
+                    </nut-form-item>
+                    <nut-form-item label="商品名称:" required prop="name">
+                        <nut-input v-model="basicData.name" placeholder="请输入商品名称"
+                                   type="text"
+                        />
+                    </nut-form-item>
+                    <nut-form-item label="商品价格:" required prop="number">
+                        <nut-input v-model="basicData.number" placeholder="请输入商品价格"
+                        />
+                    </nut-form-item>
+                    <nut-form-item label="市场价格:" required prop="market_num">
+                        <nut-input v-model="basicData.market_num" placeholder="请输入市场价格"
+                        />
+                    </nut-form-item>
+                    <nut-form-item label="商品库存:" required prop="stock">
+                        <nut-input v-model="basicData.stock" placeholder="请输入商品库存"
+                        />
+                    </nut-form-item>
+                    <nut-form-item label="商品简介:" required prop="profile">
+                        <nut-textarea
+                            class="textarea"
+                            v-model="basicData.profile" placeholder="请输入商品简介"
+                            type="text"/>
+                    </nut-form-item>
+                    <nut-form-item label="上架状态:" prop="state">
+                        <nut-switch v-model="basicData.state" :active-value="1" :inactive-value="2"/>
+                    </nut-form-item>
+                    <nut-form-item prop="details">
+                        <RichEditor :content="basicData.details" @input="(val) => basicData.details = val"/>
+                    </nut-form-item>
+                    <nut-form-item prop="ok">
+                        <nut-button block type="primary" @click="ok">提交</nut-button>
+                    </nut-form-item>
+                </nut-form>
+            </template>
+        </nut-backtop>
+        <!--   商品分类     -->
+        <nut-popup position="bottom" v-model:visible="openGoodClass" @close="openGoodClass = false">
+            <nut-picker :columns="columnsClass" title="商品分类" @confirm="confirmClass"
+            ></nut-picker>
+        </nut-popup>
+    </view>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
+.nut-input {
+    border: none;
+    color: #000;
+}
 
+.textarea {
+    height: 100px;
+    background-color: #FAFAFA;
+    padding: 10px !important;
+    border-radius: 10px;
+}
 </style>