From 0a2d2e46018a1992439413db047357d7897f70d0 Mon Sep 17 00:00:00 2001
From: unknown <staryou@126.com>
Date: Tue, 4 Jun 2024 01:13:55 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=89=A9=E6=B5=81)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/product/manageGoods.vue | 477 ++++++++++++++++------------------
 1 file changed, 229 insertions(+), 248 deletions(-)

diff --git a/pages/product/manageGoods.vue b/pages/product/manageGoods.vue
index 28d98ca..85bd915 100644
--- a/pages/product/manageGoods.vue
+++ b/pages/product/manageGoods.vue
@@ -1,114 +1,68 @@
 <template>
-    <pb-layout
-        class="manage-goods"
-        title="发布商品"
-        leftIcon="leftIcon"
-        navbar="normal"
-        :bgStyle="bgStyle"
-        opacityBgUi="bg-white"
-        color="black"
-    >
-        <view class="goods-form">
-            <uni-forms ref="formRef" v-model="formData" :rules="rules" label-position="top" label-width="160">
-                <uni-forms-item label="商品封面图" name="picUrl" required>
-                    <p-uploader
-                        v-model:url="formData.picUrl"
-                        fileMediatype="image"
-                        limit="1"
-                        mode="grid"
-                        :imageStyles="{ width: '168rpx', height: '168rpx' }"
-                    />
-                </uni-forms-item>
-                <uni-forms-item label="商品轮播图" name="sliderPicUrls" required>
-                    <p-uploader
-                        v-model:url="formData.sliderPicUrls"
-                        fileMediatype="image"
-                        limit="6"
-                        mode="grid"
-                        :imageStyles="{ width: '168rpx', height: '168rpx' }"
-                    />
-                </uni-forms-item>
-                <uni-forms-item label="商品名称" name="name" required>
-                    <uni-easyinput type="text" trim="all" v-model="formData.name" placeholder="请输入商品名称" />
-                </uni-forms-item>
-                <uni-forms-item label="商品分类" name="categoryId" label-position="left" required>
-                    <uni-easyinput
-                        type="text"
-                        v-model="formData.categoryId"
-                        :styles="selfStyles"
-                        placeholderStyle="color:#8a8a8a"
-                        :clearable="false"
-                        :inputBorder="false"
-                        placeholder="请选择商品分类"
-                        disabled
-                    >
-                        <template v-slot:right>
-                            <uni-icons type="right" />
-                        </template>
-                    </uni-easyinput>
-                </uni-forms-item>
-                <uni-forms-item label="商品品牌" name="brandId" label-position="left" required>
-                    <uni-easyinput
-                        type="text"
-                        v-model="formData.brandId"
-                        :styles="selfStyles"
-                        placeholderStyle="color:#8a8a8a"
-                        :clearable="false"
-                        :inputBorder="false"
-                        placeholder="请选择商品品牌"
-                        disabled
-                    >
-                        <template v-slot:right>
-                            <uni-icons type="right" />
-                        </template>
-                    </uni-easyinput>
-                </uni-forms-item>
-                <uni-forms-item label="商品规格" name="skus" label-position="left" required>
-                    <uni-easyinput
-                        type="text"
-                        v-model="formData.skus"
-                        :styles="selfStyles"
-                        placeholderStyle="color:#8a8a8a"
-                        :clearable="false"
-                        :inputBorder="false"
-                        placeholder="请添加商品规格"
-                        disabled
-                    >
-                        <template v-slot:right>
-                            <uni-icons type="right" /> </template
-                    ></uni-easyinput>
-                </uni-forms-item>
-                <uni-forms-item label="商品关键词" name="keyword" required>
-                    <uni-easyinput type="text" v-model="formData.keyword" placeholder="请输入商品关键词" />
-                </uni-forms-item>
-                <uni-forms-item label="商品简介" name="introduction" required>
-                    <uni-easyinput
-                        type="textarea"
-                        trim="all"
-                        autoHeight
-                        v-model="formData.introduction"
-                        placeholder="请输入商品简介"
-                    />
-                </uni-forms-item>
-                <uni-forms-item label="物流设置" name="deliveryTypes" label-position="left" required>
-                    <uni-easyinput
-                        type="text"
-                        :clearable="false"
-                        :styles="selfStyles"
-                        placeholderStyle="color:#8a8a8a"
-                        :inputBorder="false"
-                        v-model="formData.keyword"
-                        placeholder="请选择配送方式"
-                        disabled
-                    >
-                        <template v-slot:right>
-                            <uni-icons type="right" />
-                        </template>
-                    </uni-easyinput>
-                </uni-forms-item>
-            </uni-forms>
-        </view>
-    </pb-layout>
+  <pb-layout class="manage-goods" title="发布商品" leftIcon="leftIcon" navbar="normal" :bgStyle="bgStyle"
+    opacityBgUi="bg-white" color="black">
+    <view class="goods-form">
+      <uni-forms ref="formRef" v-model="formData" :rules="rules" label-position="top" label-width="160">
+        <uni-forms-item label="商品封面图" name="picUrl" required>
+          <p-uploader v-model:url="formData.picUrl" fileMediatype="image" limit="1" mode="grid"
+            :imageStyles="{ width: '168rpx', height: '168rpx' }" />
+        </uni-forms-item>
+        <uni-forms-item label="商品轮播图" name="sliderPicUrls" required>
+          <p-uploader v-model:url="formData.sliderPicUrls" fileMediatype="image" limit="6" mode="grid"
+            :imageStyles="{ width: '168rpx', height: '168rpx' }" />
+        </uni-forms-item>
+        <uni-forms-item label="商品名称" name="name" required>
+          <uni-easyinput type="text" trim="all" v-model="formData.name" placeholder="请输入商品名称" />
+        </uni-forms-item>
+        <uni-forms-item label="商品分类" name="categoryId" label-position="left" required>
+          <uni-easyinput type="text" v-model="formData.categoryId" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
+            :clearable="false" :inputBorder="false" placeholder="请选择商品分类" disabled>
+            <template v-slot:right>
+              <uni-icons type="right" />
+            </template>
+          </uni-easyinput>
+        </uni-forms-item>
+        <uni-forms-item label="商品品牌" name="brandId" label-position="left" required>
+          <uni-easyinput type="text" v-model="formData.brandId" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
+            :clearable="false" :inputBorder="false" placeholder="请选择商品品牌" disabled>
+            <template v-slot:right>
+              <uni-icons type="right" />
+            </template>
+          </uni-easyinput>
+        </uni-forms-item>
+        <uni-forms-item label="商品规格" name="skus" label-position="left" required>
+          <uni-easyinput type="text" v-model="formData.skus" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
+            :clearable="false" :inputBorder="false" placeholder="请添加商品规格" disabled>
+            <template v-slot:right>
+              <uni-icons type="right" /> </template></uni-easyinput>
+        </uni-forms-item>
+        <uni-forms-item label="商品关键词" name="keyword" required>
+          <uni-easyinput type="text" v-model="formData.keyword" placeholder="请输入商品关键词" />
+        </uni-forms-item>
+        <uni-forms-item label="商品简介" name="introduction" required>
+          <uni-easyinput type="textarea" trim="all" autoHeight v-model="formData.introduction" placeholder="请输入商品简介" />
+        </uni-forms-item>
+        <uni-forms-item label="物流设置" @click="openPicker" name="deliveryTypes" label-position="left" required>
+          <uni-easyinput type="text" :clearable="false" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
+            :inputBorder="false" v-model="formData.keyword" placeholder="请选择配送方式" disabled>
+            <template v-slot:right>
+              <uni-icons type="right" />
+            </template>
+          </uni-easyinput>
+        </uni-forms-item>
+      </uni-forms>
+    </view>
+
+
+    <uni-popup ref="popupRef" type="bottom" border-radius="10px 10px 0 0">
+      <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
+        class="picker-view">
+        <picker-view-column>
+          <view class="item" v-for="(item, index) in DELIVERY_TYPES" :key="index">{{ item.label }}</view>
+        </picker-view-column>
+      </picker-view>
+    </uni-popup>
+  </pb-layout>
 </template>
 
 <script setup>
@@ -119,174 +73,201 @@ import GoodsApi from '@/peach/api/trade/goods'
 import _ from 'lodash'
 
 const bgStyle = {
-    backgroundImage: '',
-    backgroundColor: '#fff',
-    description: '',
+  backgroundImage: '',
+  backgroundColor: '#fff',
+  description: '',
 }
 
+const DELIVERY_TYPES = [{
+  value: 3,
+  label: '到店核销'
+}, {
+  value: 4,
+  label: '商家配送'
+}]
+
+const indicatorStyle = 'height: 50px'
+
 const selfStyles = {
-    backgroundColor: '#f9f9f9',
+  backgroundColor: '#f9f9f9',
 }
 
+const popupRef = ref()
 const formData = ref({
-    picUrl: 'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
-    sliderPicUrls: [
-        'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
-        'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
-        'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
-    ],
-    name: '测试商品',
-    categoryId: 91,
-    brandId: 4,
-    keyword: '香酥鸭，但家',
-    deliveryTypes: [3],
-    introduction: '但家贵阳香酥鸭现榨香酥鸭无任何添加剂香酥鸭但家贵阳香酥鸭现榨香酥鸭无任何添加剂香酥鸭',
+  picUrl: 'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
+  sliderPicUrls: [
+    'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
+    'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
+    'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
+  ],
+  name: '测试商品',
+  categoryId: 91,
+  brandId: 4,
+  keyword: '香酥鸭，但家',
+  deliveryTypes: [3],
+  introduction: '但家贵阳香酥鸭现榨香酥鸭无任何添加剂香酥鸭但家贵阳香酥鸭现榨香酥鸭无任何添加剂香酥鸭',
 })
 
 const rules = {
-    name: {
-        rules: [
-            {
-                required: true,
-                errorMessage: '请输入商品名称',
-            },
-        ],
-    },
-    picUrl: {
-        rules: [
-            {
-                required: true,
-                errorMessage: '请上传商品封面图',
-            },
-        ],
-    },
-    sliderPicUrls: {
-        rules: [
-            {
-                required: true,
-                errorMessage: '请上传商品轮播图',
-            },
-        ],
-    },
-    categoryId: {
-        rules: [
-            {
-                required: true,
-                errorMessage: '请选择商品分类',
-            },
-        ],
-    },
-    brandId: {
-        rules: [
-            {
-                required: true,
-                errorMessage: '请选择商品品牌',
-            },
-        ],
-    },
-    skus: {
-        rules: [
-            {
-                required: true,
-                errorMessage: '请选择商品规格',
-            },
-        ],
-    },
-    keyword: {
-        rules: [
-            {
-                required: true,
-                errorMessage: '请输入商品关键字',
-            },
-        ],
-    },
-    introduction: {
-        rules: [
-            {
-                required: true,
-                errorMessage: '请输入商品简介',
-            },
-        ],
-    },
-    deliveryTypes: {
-        rules: [
-            {
-                required: true,
-                errorMessage: '请选择商品物流',
-            },
-        ],
-    },
+  name: {
+    rules: [
+      {
+        required: true,
+        errorMessage: '请输入商品名称',
+      },
+    ],
+  },
+  picUrl: {
+    rules: [
+      {
+        required: true,
+        errorMessage: '请上传商品封面图',
+      },
+    ],
+  },
+  sliderPicUrls: {
+    rules: [
+      {
+        required: true,
+        errorMessage: '请上传商品轮播图',
+      },
+    ],
+  },
+  categoryId: {
+    rules: [
+      {
+        required: true,
+        errorMessage: '请选择商品分类',
+      },
+    ],
+  },
+  brandId: {
+    rules: [
+      {
+        required: true,
+        errorMessage: '请选择商品品牌',
+      },
+    ],
+  },
+  skus: {
+    rules: [
+      {
+        required: true,
+        errorMessage: '请选择商品规格',
+      },
+    ],
+  },
+  keyword: {
+    rules: [
+      {
+        required: true,
+        errorMessage: '请输入商品关键字',
+      },
+    ],
+  },
+  introduction: {
+    rules: [
+      {
+        required: true,
+        errorMessage: '请输入商品简介',
+      },
+    ],
+  },
+  deliveryTypes: {
+    rules: [
+      {
+        required: true,
+        errorMessage: '请选择商品物流',
+      },
+    ],
+  },
 }
 
 const formRef = ref(null)
 
+function openPicker() {
+  console.log('123')
+  popupRef.value.open()
+}
+
 function onSubmit() {
-    console.log('res', formData.value)
+  console.log('res', formData.value)
 
-    formRef.value
-        .validate()
-        .then(async (res) => {
-            let tempObj = { ...res }
+  formRef.value
+    .validate()
+    .then(async (res) => {
+      let tempObj = { ...res }
 
-            if (formData.value.id) {
-                tempObj.id = formData.value.id
-                await GoodsApi.editProduct(tempObj)
-            } else {
-                await GoodsApi.addProduct(tempObj)
-            }
-        })
-        .catch((err) => {
-            console.log('err', err)
-        })
+      if (formData.value.id) {
+        tempObj.id = formData.value.id
+        await GoodsApi.editProduct(tempObj)
+      } else {
+        await GoodsApi.addProduct(tempObj)
+      }
+    })
+    .catch((err) => {
+      console.log('err', err)
+    })
 }
 
 // 获取商品详情
-function getGoodsInfo() {}
+function getGoodsInfo() { }
 
 onLoad((options) => {
-    if (options.id) {
-        getProduct()
-    }
+  if (options.id) {
+    getProduct()
+  }
 })
 </script>
 
 <style lang="scss" scoped>
 .manage-goods {
-    .goods-form {
-        margin: 40rpx;
+  .goods-form {
+    margin: 40rpx;
 
-        :deep() {
-            .uni-easyinput__content-input {
-                font-size: 28rpx !important;
-                color: #333333 !important;
-                line-height: normal !important;
-            }
+    :deep() {
+      .uni-easyinput__content-input {
+        font-size: 28rpx !important;
+        color: #333333 !important;
+        line-height: normal !important;
+      }
 
-            .uni-easyinput__placeholder-class {
-                font-size: 14px;
-            }
+      .uni-easyinput__placeholder-class {
+        font-size: 14px;
+      }
 
-            .is-direction-left {
-                .uni-forms-item__label {
-                    padding-left: 10px;
-                    background-color: #f9f9f9;
-                    border-radius: 10px 0 0 10px;
-                }
-
-                uni-icons {
-                    margin-right: 10px;
-                }
-
-                .uni-easyinput__content {
-                    border-radius: 0 10px 10px 0;
-                }
-            }
-
-            .is-disabled {
-                color: #333333;
-                text-align: right;
-            }
+      .is-direction-left {
+        .uni-forms-item__label {
+          padding-left: 10px;
+          background-color: #f9f9f9;
+          border-radius: 10px 0 0 10px;
         }
+
+        uni-icons {
+          margin-right: 10px;
+        }
+
+        .uni-easyinput__content {
+          border-radius: 0 10px 10px 0;
+        }
+      }
+
+      .is-disabled {
+        color: #333333;
+        text-align: right;
+      }
     }
+  }
+
+  .picker-view {
+    width: 750rpx;
+    height: 600rpx;
+    margin-top: 20rpx;
+  }
+
+  .item {
+    line-height: 100rpx;
+    text-align: center;
+  }
 }
 </style>