kuaiyidian-HD/pages/billing/outOrder.vue

<template>
      <view>
        <view class="formBox">
          <uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="85px">
            <uni-forms-item label="店铺名称" name="name">
              <uni-easyinput type="text" v-model="shopName" disabled />
            </uni-forms-item>
          </uni-forms>
          <u-cell-group>
            <u-cell class="cell-order" title="配送员" value="123456"  :isLink="true" arrow-direction="right"></u-cell>
            <u-cell class="cell-order" center title="备注" value="123456">
              <template #value>
                <u-input
                  placeholder="请输入内容"
                  border="bottom"
                  v-model="remark"
                ></u-input>
              </template>
            </u-cell>
          </u-cell-group>
        </view>
        <uni-card title="选择商品">
          <u-grid :col="2" border>
            <u-grid-item index="add" @tap.stop="scanCodeAdd">
              <u-icon name="scan" size="36"></u-icon>
            </u-grid-item>
            <u-grid-item   @tap.stop="goodsAdd">
              <u-icon name="plus" size="28"></u-icon>
            </u-grid-item>
          </u-grid>
        </uni-card>
        <uni-card title="商品列表">
        </uni-card>
        <view class="tui-tabbar">
          <u-button type="primary" :plain="true" shape="circle" @tap.stop="submit(ret)">保存</u-button>
        </view>
      </view>
</template>

<script>
import {
  mapState
} from 'vuex';
export default {
  computed: mapState(['shopName']),
  data() {
    return {
      rules: {
        // 对name字段进行必填验证
        name: {
          rules: [{
            required: true,
            errorMessage: '请输入姓名',
          },
            {
              minLength: 3,
              maxLength: 5,
              errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
            }
          ]
        },
      },
      action: 'http://www.example.com/upload',
      // 表单数据
      formData: {
        name: '',
        manufacturer: '',
        price: '',
        single: ''
      },
      range: [{
        value: 0,
        text: "厂家1"
      },
        {
          value: 1,
          text: "厂家1"
        },
        {
          value: 2,
          text: "厂家3"
        },
      ],
      remark:''
    }
  },
  methods: {
    scanCodeAdd() {
      uni.scanCode({
        success: (res) => {
          uni.showToast({
            title: res.result,
            icon: 'none'
          })
        },
        fail: (res) => {
          uni.showToast({
            title: '扫描失败',
            icon: 'none'
          })
        }
      })
    },
    goodsAdd() {
      uni.navigateTo({
        url:"/pages/inventory/goodsList"
      })
    },
    /**
     * 复写 binddata 方法，如果只是为了校验，无复杂自定义操作，可忽略此方法
     * @param {String} name 字段名称
     * @param {String} value 表单域的值
     */
    // binddata(name,value){
    // 通过 input 事件设置表单指定 name 的值
    //   this.$refs.form.setValue(name, value)
    // },
    // 触发提交表单
    submit() {
      this.$refs.form.validate().then(res => {

      }).catch(err => {

      })
    }
  }
}
</script>

<style lang="scss">
.formBox {
  margin: 20rpx;
  padding: 20rpx 26rpx;
  border-radius: 14rpx;
  box-shadow: 0px 1px 10px 2px #e2e2e2;
  background-color: #fff;

  .uni-data-select {
    width: 100%;
  }

  .tui-order-title {
    position: relative;
    font-size: 28upx;
    line-height: 28upx;
    padding-left: 16upx;
    box-sizing: border-box;
  }

  .tui-order-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    border-left: 8upx solid $u-primary;
    height: 120%;
    border-radius: 4upx;
  }
  .u-cell {
    .u-cell__body {
      padding:10px 0;
      .u-input {
        flex:4;
      }
    }
  }
}

.tui-tabbar {
  width: 100%;
  height: 98rpx;
  background: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 26rpx;
  box-shadow: 0 0 1px rgba(0, 0, 0, .3);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 996;
}
</style>