feat(物流)

pages/product/manageGoods.vue

@@ -1,106 +1,50 @@
 <template>
-    <pb-layout
+  <pb-layout class="manage-goods" title="发布商品" leftIcon="leftIcon" navbar="normal" :bgStyle="bgStyle"
-        class="manage-goods"
+    opacityBgUi="bg-white" color="black">
-        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
+          <p-uploader v-model:url="formData.picUrl" fileMediatype="image" limit="1" mode="grid"
-                        v-model:url="formData.picUrl"
+            :imageStyles="{ width: '168rpx', height: '168rpx' }" />
-                        fileMediatype="image"
-                        limit="1"
-                        mode="grid"
-                        :imageStyles="{ width: '168rpx', height: '168rpx' }"
-                    />
         </uni-forms-item>
         <uni-forms-item label="商品轮播图" name="sliderPicUrls" required>
-                    <p-uploader
+          <p-uploader v-model:url="formData.sliderPicUrls" fileMediatype="image" limit="6" mode="grid"
-                        v-model:url="formData.sliderPicUrls"
+            :imageStyles="{ width: '168rpx', height: '168rpx' }" />
-                        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
+          <uni-easyinput type="text" v-model="formData.categoryId" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
-                        type="text"
+            :clearable="false" :inputBorder="false" placeholder="请选择商品分类" disabled>
-                        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
+          <uni-easyinput type="text" v-model="formData.brandId" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
-                        type="text"
+            :clearable="false" :inputBorder="false" placeholder="请选择商品品牌" disabled>
-                        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
+          <uni-easyinput type="text" v-model="formData.skus" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
-                        type="text"
+            :clearable="false" :inputBorder="false" placeholder="请添加商品规格" disabled>
-                        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-icons type="right" /> </template></uni-easyinput>
-                    ></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
+          <uni-easyinput type="textarea" trim="all" autoHeight v-model="formData.introduction" placeholder="请输入商品简介" />
-                        type="textarea"
-                        trim="all"
-                        autoHeight
-                        v-model="formData.introduction"
-                        placeholder="请输入商品简介"
-                    />
         </uni-forms-item>
-                <uni-forms-item label="物流设置" name="deliveryTypes" label-position="left" required>
+        <uni-forms-item label="物流设置" @click="openPicker" name="deliveryTypes" label-position="left" required>
-                    <uni-easyinput
+          <uni-easyinput type="text" :clearable="false" :styles="selfStyles" placeholderStyle="color:#8a8a8a"
-                        type="text"
+            :inputBorder="false" v-model="formData.keyword" placeholder="请选择配送方式" disabled>
-                        :clearable="false"
-                        :styles="selfStyles"
-                        placeholderStyle="color:#8a8a8a"
-                        :inputBorder="false"
-                        v-model="formData.keyword"
-                        placeholder="请选择配送方式"
-                        disabled
-                    >
             <template v-slot:right>
               <uni-icons type="right" />
             </template>
@@ -108,6 +52,16 @@
         </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>
 
@@ -124,10 +78,21 @@ const bgStyle = {
   description: '',
 }
 
+const DELIVERY_TYPES = [{
+  value: 3,
+  label: '到店核销'
+}, {
+  value: 4,
+  label: '商家配送'
+}]
+
+const indicatorStyle = 'height: 50px'
+
 const selfStyles = {
   backgroundColor: '#f9f9f9',
 }
 
+const popupRef = ref()
 const formData = ref({
   picUrl: 'http://101.43.181.163:9001/mall-backend/8f11e372520501531d06bfce15ea97bbecead41c5e4a36d15d7e40af85729ff3.png',
   sliderPicUrls: [
@@ -220,6 +185,11 @@ const rules = {
 
 const formRef = ref(null)
 
+function openPicker() {
+  console.log('123')
+  popupRef.value.open()
+}
+
 function onSubmit() {
   console.log('res', formData.value)
 
@@ -241,7 +211,7 @@ function onSubmit() {
 }
 
 // 获取商品详情
-function getGoodsInfo() {}
+function getGoodsInfo() { }
 
 onLoad((options) => {
   if (options.id) {
@@ -288,5 +258,16 @@ onLoad((options) => {
       }
     }
   }
+
+  .picker-view {
+    width: 750rpx;
+    height: 600rpx;
+    margin-top: 20rpx;
+  }
+
+  .item {
+    line-height: 100rpx;
+    text-align: center;
+  }
 }
 </style>