Browse Source

小程序:商家端-商品添加

panyong 2 years ago
parent
commit
9843f3d465

BIN
htmldev/wxMini/image/common/arrow_1.png


+ 166 - 7
htmldev/wxMini/pages/businessGoodsEdit/businessGoodsEdit.js

@@ -1,5 +1,8 @@
 const uploadJS = require('../../mixin/upload.js')
 const { getProductCategoryList, getProductBrandList } = require('./api/index')
+const { formatTs, yuan2Fen } = require('../../utils/util')
+const minDate = new Date().getTime()
+const objMinDate = formatTs(minDate)
 
 Page({
 
@@ -16,7 +19,12 @@ Page({
     // * 状态:现售产品有上架、下架状态
     // * 发售时间:不能低于当前创建时间
     form: {
-      'product_img_url': [], // 商品主图
+      'product_img_url': [
+        {
+          'url': 'https://tuotuoyinfu-oss.oss-cn-beijing.aliyuncs.com/images/user/bashi632322ffe57fa.jpg',
+          'formkey': 'product_rotation_img_list'
+        }
+      ], // 商品主图
       'product_rotation_img_list': [
         {
           'url': 'https://tuotuoyinfu-oss.oss-cn-beijing.aliyuncs.com/images/user/bashi632322ffe57fa.jpg',
@@ -35,9 +43,14 @@ Page({
           'formkey': 'product_rotation_img_list'
         }
       ], // 商品轮播图
-      'product_detail_img_list': [], // 详情图
-      'product_title': '', // 商品标题
-      'product_desc': '', // 商品简介
+      'product_detail_img_list': [
+        {
+          'url': 'https://tuotuoyinfu-oss.oss-cn-beijing.aliyuncs.com/images/user/bashi632322ffe57fa.jpg',
+          'formkey': 'product_rotation_img_list'
+        }
+      ], // 详情图
+      'product_title': '商品标题', // 商品标题
+      'product_desc': '商品简介', // 商品简介
       'product_category_id': {
         'category_name': '',
         'id': ''
@@ -51,7 +64,7 @@ Page({
       'product_all_price': '', // 批发价
       'product_price': '', // 零售价
       'product_count': '', // 库存
-      'product_sale_at': '' // 预售时间(0代表预售)
+      'product_sale_at': '预售' // 预售时间(0代表预售)
     },
     product_img_url_max: 1,
     product_rotation_img_list_max: 5,
@@ -64,7 +77,13 @@ Page({
     brandList: [],
     booUnit: false,
     unitInDefaultIndex: 0,
-    unitInColumns: ['件', '个']
+    unitInColumns: ['件', '个'],
+    booSaleAtType: false,
+    saleAtType: '0',
+    booSaleAt: false,
+    minDate: minDate,
+    maxDate: new Date(objMinDate.YYYY + 5, 11, 31).getTime(),
+    currentDate: new Date().getTime()
   },
 
   /**
@@ -285,7 +304,147 @@ Page({
 
     this.setData(tempForm)
   },
+  saleAtTypeShow() {
+    this.setData({ booSaleAtType: true })
+  },
+  saleAtTypeHide() {
+    let tempForm = {}
+    tempForm['booSaleAtType'] = false
+
+    if (this.data.saleAtType === '0') {
+      tempForm['form.product_sale_at'] = '预售'
+    } else {
+      tempForm['form.product_sale_at'] = ''
+      tempForm['booSaleAt'] = true
+    }
+
+    this.setData(tempForm)
+  },
+  handleSaleAtType(e) {
+    const { type } = e.currentTarget.dataset
+
+    this.setData({
+      saleAtType: type
+    }, () => {
+      this.saleAtTypeHide()
+    })
+  },
+  saleAtHide() {
+    this.setData({
+      booSaleAt: false
+    })
+  },
+  saleAtConfirm(event) {
+    const { YYYY, MM, DD, HH, mm } = formatTs(event.detail)
+
+    this.setData({
+      currentDate: event.detail,
+      'form.product_sale_at': `${YYYY}年${MM}月${DD}日 ${HH}:${mm}`
+    })
+
+    this.saleAtHide()
+  },
+  getForm() {
+    const {
+      product_img_url,
+      product_rotation_img_list,
+      product_detail_img_list,
+      product_title,
+      product_desc,
+      product_category_id,
+      product_brand_id,
+      product_spec,
+      product_unit,
+      product_all_price,
+      product_price,
+      product_count,
+      product_sale_at
+    } = this.data.form
+
+    return {
+      product_img_url: product_img_url.map(item => item.url).join(''),
+      product_rotation_img_list: product_rotation_img_list.map(item => item.url),
+      product_detail_img_list: product_detail_img_list.map(item => item.url),
+      product_title,
+      product_desc,
+      product_category_id: product_category_id.id,
+      product_brand_id: product_brand_id.id,
+      product_spec,
+      product_unit,
+      product_all_price: yuan2Fen(product_all_price),
+      product_price: yuan2Fen(product_price),
+      product_count,
+      product_sale_at
+    }
+  },
+  setForm() {},
+  verify() {
+    let errorList = []
+    const {
+      product_img_url,
+      product_rotation_img_list,
+      product_detail_img_list,
+      product_title,
+      product_desc,
+      product_category_id,
+      product_brand_id,
+      product_spec,
+      product_unit,
+      product_all_price,
+      product_price,
+      product_count,
+      product_sale_at
+    } = this.getForm()
+
+    if (!product_img_url) {
+      errorList.push('请上传商品主图')
+    }
+    if (!product_rotation_img_list.length) {
+      errorList.push('请上传商品轮播图')
+    }
+    if (!product_detail_img_list.length) {
+      errorList.push('请上传商品详情图')
+    }
+    if (!product_title) {
+      errorList.push('请输入商品标题')
+    }
+    if (!product_desc) {
+      errorList.push('请输入商品简介')
+    }
+    if (!product_category_id) {
+      errorList.push('请选择商品分类')
+    }
+    if (!product_brand_id) {
+      errorList.push('请选择商品品牌')
+    }
+    if (!product_spec) {
+      errorList.push('请输入商品规格')
+    }
+    if (!product_unit) {
+      errorList.push('请选择商品单位')
+    }
+    if (!(this.data.form.product_all_price)) {
+      errorList.push('请输入批发价')
+    }
+    if (!(this.data.form.product_price)) {
+      errorList.push('请输入零售价')
+    }
+    if (!product_count) {
+      errorList.push('请输入库存')
+    }
+    if (!product_sale_at) {
+      errorList.push('请选择发售时间')
+    }
+
+    return errorList
+  },
   onSubmit(e) {
-    console.log(e.detail)
+    const verifyList = this.verify()
+    if (verifyList.length) {
+      wx.showToast({
+        title: verifyList[0],
+        icon: 'none'
+      })
+    }
   }
 })

+ 2 - 1
htmldev/wxMini/pages/businessGoodsEdit/businessGoodsEdit.json

@@ -2,7 +2,8 @@
   "usingComponents": {
     "van-uploader": "@vant/weapp/uploader/index",
     "van-popup": "@vant/weapp/popup/index",
-    "van-picker": "@vant/weapp/picker/index"
+    "van-picker": "@vant/weapp/picker/index",
+    "van-datetime-picker": "@vant/weapp/datetime-picker/index"
   },
   "navigationBarTitleText": "产品编辑"
 }

+ 53 - 0
htmldev/wxMini/pages/businessGoodsEdit/businessGoodsEdit.scss

@@ -149,3 +149,56 @@ button.btn-submit {
     background-color: rgba(145, 179, 121, 1);
   }
 }
+
+.sale-at {
+  color: rgba(0, 0, 0, 0.9);
+
+  .time-0,
+  .time-1 {
+    display: flex;
+    align-items: center;
+    height: 112rpx;
+  }
+
+  .time-0 {
+    position: relative;
+    left: 0;
+    top: 0;
+
+    &:after {
+      content: '';
+      position: absolute;
+      left: 30rpx;
+      bottom: 0;
+      right: 0;
+      border-bottom: 1rpx solid rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  .select-wrap {
+    width: 108rpx;
+    padding-left: 30rpx;
+  }
+
+  .select {
+    width: 48rpx;
+    height: 48rpx;
+    vertical-align: middle;
+  }
+
+  text {
+    width: calc(100% - 196rpx);
+    line-height: rpx;
+    font-size: 34rpx;
+  }
+
+  .arrow-wrap {
+    padding: 0 32rpx;
+  }
+
+  .arrow {
+    width: 24rpx;
+    height: 48rpx;
+    vertical-align: middle;
+  }
+}

+ 76 - 1
htmldev/wxMini/pages/businessGoodsEdit/businessGoodsEdit.wxml

@@ -176,7 +176,9 @@
             bind:input="setFormValue"></input>
         </view>
       </view>
-      <view class="box border-bottom-2">
+      <view
+        class="box border-bottom-2"
+        bind:tap="saleAtTypeShow">
         <label>
           <text>发售时间</text>
         </label>
@@ -242,3 +244,76 @@
     bind:cancel="unitHide"
     bind:confirm="unitConfirm"/>
 </van-popup>
+
+  <!--弹窗:预售选择-->
+<van-popup
+  show="{{ booSaleAtType }}"
+  close-on-click-overlay="{{false}}"
+  position="bottom"
+  bind:click-overlay="saleAtTypeHide">
+  <view class="sale-at">
+    <view
+      class="time-0"
+      data-type="0"
+      bind:tap="handleSaleAtType">
+      <view class="select-wrap">
+        <image
+          class="select"
+          wx:if="{{saleAtType !== '0'}}"
+          src="../../image/common/unselected.png"></image>
+        <image
+          class="select"
+          wx:if="{{saleAtType === '0'}}"
+          src="../../image/common/selected.png"></image>
+      </view>
+      <text>预售</text>
+      <view
+        class="arrow-wrap"
+        style="visibility:hidden;">
+        <image
+          class="arrow"
+          src="../../image/common/arrow_1.png"></image>
+      </view>
+    </view>
+    <view
+      class="time-1"
+      data-type="1"
+      bind:tap="handleSaleAtType">
+      <view class="select-wrap">
+        <image
+          class="select"
+          wx:if="{{saleAtType !== '1'}}"
+          src="../../image/common/unselected.png"></image>
+        <image
+          class="select"
+          wx:if="{{saleAtType === '1'}}"
+          src="../../image/common/selected.png"></image>
+      </view>
+      <text
+        class="placeholder">{{form.product_sale_at === '预售' || form.product_sale_at === '' ? '选择售卖时间' : form.product_sale_at}}
+      </text>
+      <view class="arrow-wrap">
+        <image
+          class="arrow"
+          src="../../image/common/arrow_1.png"></image>
+      </view>
+    </view>
+  </view>
+</van-popup>
+
+  <!--弹窗:预售时间选择-->
+<van-popup
+  show="{{ booSaleAt }}"
+  close-on-click-overlay="{{false}}"
+  round
+  position="bottom"
+  bind:click-overlay="saleAtHide">
+  <van-datetime-picker
+    id="picker-datetime"
+    type="datetime"
+    value="{{ currentDate }}"
+    min-date="{{ minDate }}"
+    max-date="{{ maxDate }}"
+    bind:cancel="saleAtHide"
+    bind:confirm="saleAtConfirm"/>
+</van-popup>