Uniapp扫码功能

90 阅读1分钟
<template>
  <view class="add-form">
    <view class="page-title">Add Machine</view>
    <u-form :model="formData" label-width="150rpx">
      <u-form-item label="machine" prop="machine_no">
        <u-input v-model="formData.machine_no" placeholder="machine"></u-input>
      </u-form-item>
      <u-form-item label="备注" prop="remark">
        <u-input v-model="formData.remark" placeholder="请输入备注"></u-input>
      </u-form-item>
      <u-form-item class="button-row">
        <u-button @click="goBack" type="success" class="btns">返回</u-button>
		<u-button @click="submitForm" type="primary" class="btns">提交</u-button>
      </u-form-item>
    </u-form>
	
	<view class="add-icon" @click="Scan">
	  <u-icon name="scan" size="25" color="#2979ff"></u-icon>
	</view>
  </view>
</template>


<script>
export default {
  data() {
    return {
		formData: {
			machine_no: '',
			remark: ''
		}
    };
  },
  methods: {
	Scan() {
		uni.scanCode({
			onlyFromCamera: true,
			success: function (res) {
				console.log('条码类型:' + res.scanType);
				console.log('条码内容:' + res.result);
			}
		});
	},
	goBack() {
		uni.navigateBack({
		  delta: 1 // 返回上一页
		});
	},
    submitForm() {
          // 提交表单的操作
          console.log('提交表单', this.formData);
          // 要发送的数据
          const postData = {
            machine_no: this.formData.machine_no,
            remark: this.formData.remark,
			uid: 1
          };

          uni.request({
            url: this.$baseUrl + "/api/addMachine",
            method: 'POST',
            data: postData,
            header: {
              'Content-Type': 'application/json' // 根据你的API要求设置请求头
            },
            success: res => {
			  uni.showToast({ title: '添加数据成功', icon: 'none' });
              // 请求成功后的处理逻辑
            },
            fail: err => {
			  uni.showToast({ title: '添加数据失败', icon: 'none' });
            }
          });
 
    }
  }
};
</script>

<style lang="scss">
.add-form {
  padding: 20px;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.button-row {
  display: flex;
  justify-content: space-between;
}
.btns {
	margin: 0 35rpx;
}

.add-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
</style>