Browse Source

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

panyong 2 years ago
parent
commit
89a0595aff

+ 3 - 2
htmldev/wxMini/app.json

@@ -23,7 +23,8 @@
     "pages/businessGoodsEdit/businessGoodsEdit",
     "pages/businessVideoManage/businessVideoManage",
     "pages/businessVideoEdit/businessVideoEdit",
-    "pages/businessLeavingAMessage/businessLeavingAMessage"
+    "pages/businessLeavingAMessage/businessLeavingAMessage",
+    "pages/businessApply/businessApply"
   ],
   "window": {
     "backgroundTextStyle": "light",
@@ -67,4 +68,4 @@
       }
     ]
   }
-}
+}

+ 105 - 0
htmldev/wxMini/pages/businessApply/businessApply.js

@@ -0,0 +1,105 @@
+const uploadJS = require('../../mixin/upload.js')
+
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    form: {
+      name: '',
+      card_id: '',
+      phone: '',
+      partner_name: '',
+      wx_code: [],
+      wxid: '',
+      address: {},
+      note: ''
+    }
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+  ...uploadJS,
+  uploadCallBack(res) {
+    const temp = res.map(item => {
+      return {
+        'url': item.url,
+        'formkey': item.formkey
+      }
+    })
+    let tempForm = {}
+    let formkey = ''
+    if (temp.length > 0) {
+      formkey = temp[0].formkey
+    }
+
+    switch (formkey) {
+      case 'product_img_url':
+        tempForm[`form.${formkey}`] = temp
+        break
+      case 'product_rotation_img_list':
+      case 'product_detail_img_list':
+        tempForm[`form.${formkey}`] = this.data.form[formkey].concat(...temp)
+        break
+      default:
+    }
+
+    if (Object.keys(tempForm).length > 0) {
+      this.setData(tempForm)
+    }
+  }
+})

+ 5 - 0
htmldev/wxMini/pages/businessApply/businessApply.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "van-uploader": "@vant/weapp/uploader/index"
+  }
+}

+ 97 - 0
htmldev/wxMini/pages/businessApply/businessApply.scss

@@ -0,0 +1,97 @@
+.van-uploader__wrapper {
+  .van-uploader__preview {
+    &:nth-of-type(4n) {
+      margin: 0;
+    }
+  }
+}
+
+.wrapper {
+  padding: 10rpx 0 100rpx;
+}
+
+.height {
+  height: 144rpx;
+}
+
+.form-item {
+  display: flex;
+  flex-direction: column;
+  width: 674rpx;
+  padding-top: 40rpx;
+  padding-left: 10rpx;
+  margin: 0 auto;
+  border-bottom: 2rpx solid rgba(153, 153, 153, 0.2);
+}
+
+label {
+  display: flex;
+  align-items: center;
+
+  text {
+    line-height: 36rpx;
+    font-size: 28rpx;
+    color: rgba(68, 68, 68, 1);
+  }
+}
+
+.value {
+  position: relative;
+  left: 0;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 16rpx 0 10rpx;
+}
+
+input {
+  display: block;
+  width: 100%;
+  height: 42rpx;
+  font-size: 28rpx;
+  color: rgba(68, 68, 68, 1);
+}
+
+.placeholder {
+  color: rgba(198, 202, 219, 1);
+}
+
+textarea {
+  display: block;
+  width: 100%;
+  padding: 17rpx 21rpx;
+  min-height: 186rpx;
+  border-radius: 20rpx;
+  background: rgba(245, 245, 245, 1);
+  line-height: 38rpx;
+  font-size: 28rpx;
+  color: rgba(51, 51, 51, 1);
+}
+
+.words-limit {
+  position: absolute;
+  bottom: 27rpx;
+  right: 21rpx;
+  z-index: 1;
+  line-height: 28rpx;
+  font-size: 24rpx;
+  color: rgba(153, 153, 153, 1);
+}
+
+.explain {
+  width: 674rpx;
+  margin: 10rpx auto 0;
+  font-size: 24rpx;
+  color: rgba(207, 207, 207, 1);
+}
+
+button[type='primary'] {
+  width: 504rpx;
+  height: 76rpx;
+  border-radius: 38rpx;
+  margin: 100rpx auto 0;
+  font-size: 32rpx;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 1);
+  background-color: rgba(145, 179, 121, 1);
+}

+ 124 - 0
htmldev/wxMini/pages/businessApply/businessApply.wxml

@@ -0,0 +1,124 @@
+<view class="wrapper">
+  <view class="form-item">
+    <label>
+      <text>姓名</text>
+    </label>
+    <view class="value">
+      <input
+        value="{{form.product_title}}"
+        placeholder="请输入姓名"
+        placeholder-class="placeholder"
+        data-formkey="product_title"
+        bind:input="setFormValue"></input>
+    </view>
+  </view>
+
+  <view class="form-item">
+    <label>
+      <text>身份证</text>
+    </label>
+    <view class="value">
+      <input
+        value="{{form.product_title}}"
+        placeholder="请输入身份证号码"
+        placeholder-class="placeholder"
+        data-formkey="product_title"
+        bind:input="setFormValue"></input>
+    </view>
+  </view>
+
+
+  <view class="form-item">
+    <label>
+      <text>手机号</text>
+    </label>
+    <view class="value">
+      <input
+        value="{{form.product_title}}"
+        placeholder="请输入手机号"
+        placeholder-class="placeholder"
+        data-formkey="product_title"
+        bind:input="setFormValue"></input>
+    </view>
+  </view>
+  <view class="form-item">
+    <label>
+      <text>村信息</text>
+    </label>
+    <view class="value">
+      <input
+        value="{{form.product_title}}"
+        placeholder="请输入村信息"
+        placeholder-class="placeholder"
+        data-formkey="product_title"
+        bind:input="setFormValue"></input>
+    </view>
+  </view>
+
+  <view class="form-item">
+    <label>
+      <text>个人二维码</text>
+    </label>
+    <view class="value">
+      <view
+        class="van-uploader-wrap">
+        <van-uploader
+          file-list="{{ form.wx_code }}"
+          max-count="{{1}}"
+          multiple="{{false}}"
+          accept="image"
+          data-formkey="wx_code"
+          bind:click-preview="uploadImg"
+          bind:after-read="afterRead"
+          bind:delete="delete"/>
+      </view>
+    </view>
+  </view>
+
+  <view class="form-item">
+    <label>
+      <text>微信号</text>
+    </label>
+    <view class="value">
+      <input
+        value="{{form.product_title}}"
+        placeholder="请输入微信号"
+        placeholder-class="placeholder"
+        data-formkey="product_title"
+        bind:input="setFormValue"></input>
+    </view>
+  </view>
+
+  <view class="form-item">
+    <label>
+      <text>详细地址</text>
+    </label>
+    <view class="value">
+      <input
+        value="{{form.product_title}}"
+        placeholder="请输入详细地址"
+        placeholder-class="placeholder"
+        data-formkey="product_title"
+        bind:input="setFormValue"></input>
+    </view>
+  </view>
+
+  <view class="form-item" style="padding-left: 0; border-bottom: none;">
+    <label>
+      <text>备注</text>
+    </label>
+    <view class="value">
+      <textarea
+        value=""
+        placeholder="请输入备注"
+        placeholder-class="placeholder"
+        maxlength="{{200}}"
+        auto-height="{{true}}"
+        data-formkey="product_desc"
+        bind:input="setFormValue"></textarea>
+      <view class="words-limit">{{form.product_desc.length}}/200</view>
+    </view>
+  </view>
+  <view class="explain">*政府后台会审核村民信息是否真实,通过后就可发布</view>
+  <button type="primary">成为农户</button>
+</view>