nowwa-system/vue-admin-template-master/src/views/shopping/index.vue

<template>
  <div class="container">
    <el-card class="in">
      <el-tabs type="card">
        <el-tab-pane label="下单">
          <div class="pd-30">
            <el-form
              :model="ruleForm"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
              style="width: 1300px;"
              status-icon
            >
              <el-form-item label="outtradeno">
                <el-row>
                  <el-col :span="8">
                    <el-input :disabled="disabled1" v-model="ruleForm.outtradeno" clearable></el-input>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">例：1597813670074370</div>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="shippingaddr">
                <el-row>
                  <el-col :span="8">
                    <el-input
                      :disabled="disabled2"
                      type="textarea"
                      v-model="ruleForm.shippingaddr"
                      clearable
                      placeholder="地址"
                    ></el-input>
                  </el-col>
                  <el-col :span="16">
                    <div
                      class="grid-content bg-purple-light"
                    >例：上海市;上海市;徐汇区;中山西路2025号永升大厦1210;200030;121.42771;31.18259;187*******12;王</div>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="shopid">
                <el-row>
                  <el-col :span="8">
                    <el-input
                      :disabled="disabled2"
                      v-model="ruleForm.shopid"
                      clearable
                      placeholder="门店id"
                    ></el-input>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light"></div>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="totalfee">
                <el-row>
                  <el-col :span="8">
                    <el-input
                      :disabled="disabled2"
                      type="textarea"
                      v-model="ruleForm.totalfee"
                      clearable
                      placeholder="总价"
                    ></el-input>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">例： 1900</div>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="products">
                <el-row>
                  <el-col :span="8">
                    <el-input
                      :disabled="disabled2"
                      type="textarea"
                      v-model="ruleForm.products"
                      clearable
                      placeholder="商品"
                    ></el-input>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">例： 拿铁(冰) x 1</div>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-row>
                <el-col :span="24">
                  <div class="tip bg-purple">
                    注：下单成功后，请到
                    <a
                      href="https://peisong.meituan.com/open/index"
                      target="_blank"
                      rel="noopener noreferrer"
                    >美团配送开放平台</a>查看配送信息
                  </div>
                </el-col>
              </el-row>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="submitForm('ruleForm')"
                  :loading="goShopLoading"
                >下 单</el-button>
                <el-button @click="resetForm('ruleForm')">重 置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="正常下单">正常下单</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { shopping } from "@/api/order";
var that;
export default {
  name: "Shopping",
  data() {
    return {
      ruleForm: {
        shippingaddr: "",
        shopid: "",
        totalfee: "",
        products: "",
        outtradeno: "",
      },
      goShopLoading: false,
      disabled1: false,
      disabled2: false,
    };
  },
  beforeMount() {
    that = this;
  },
  watch: {
    ruleForm: {
      deep: true,
      handler: function (newVal) {
        console.log(newVal);

        if (!!newVal.outtradeno) {
          console.log(111);
          this.disabled2 = true;
        } else {
          this.disabled2 = false;
        }

        if (
          newVal.shippingaddr ||
          newVal.shopid ||
          newVal.totalfee ||
          newVal.products
        ) {
          this.disabled1 = true;
        } else {
          this.disabled1 = false;
        }
      },
    },
  },
  methods: {
    reset() {
      this.ruleForm = {
        shippingaddr: "",
        shopid: "",
        totalfee: "",
        products: "",
        outtradeno: "",
      };
      this.disabled1 = false;
      this.disabled2 = false;
      this.goShopLoading = false;
    },
    submitForm(formName) {
      this.goShopLoading = true;
      let params = {};
      if (!this.disabled1) {
        params.outtradeno = this.ruleForm.outtradeno;
      } else if (!this.disabled2) {
        params.shippingaddr = this.ruleForm.shippingaddr;
        params.shopid = this.ruleForm.shopid - 0;
        params.totalfee = this.ruleForm.totalfee - 0;
        params.products = this.ruleForm.products;
      }

      shopping(params)
        .then((res) => {
          this.$message({
            message: "下单成功！",
            type: "success",
          });
          this.reset();
        })
        .catch((err) => {
          //   this.$message.error("输入的信息有误！");
          this.goShopLoading = false;
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding: 20px;
}
.pd-30 {
  padding: 30px;
}
.bg-purple-light {
  color: #999;
  padding: 0 20px;
}
.tip {
  font-size: 14px;
  color: #999;
  padding-left: 100px;
  padding-bottom: 30px;
}
.tip a {
  color: #fecb2e;
  text-decoration: underline;
}
</style>