修改

src/components/mall/goodlist.vue

 <style scope>
-  .gd_Item{
-    cursor:pointer;
-    border:1px solid #dcdfe6;
-    margin:0 0 5px 5px;
-    padding:0px 8px;
-    border-radius:5px;
-    font-size:12px;
+  .gd_Item {
+    cursor: pointer;
+    border: 1px solid #dcdfe6;
+    margin: 0 0 5px 5px;
+    padding: 0px 8px;
+    border-radius: 5px;
+    font-size: 12px;
     line-height: 24px;
     display: inline-block;
   }
-  .goodLisPopver .checkSpec {
+
+  .order_Dialog .checkSpec {
     border: 1px solid red !important;
   }
-  .goodLisPopver .el-input__inner{
-    height:32px!important;
+
+  .order_Dialog .el-input__inner {
+    height: 32px !important;
   }
+
+  .goodAddress {
+    font-size: 13px;
+    color: #409EFF;
+    cursor: pointer;
+  }
+
 </style>
 <template>
   <div class="flexOne goodlist">
@@ -104,29 +113,38 @@
             </template>
           </td>
           <td>
-            <el-popover placement="left" width="450" popper-class="goodLisPopver" trigger="click">
+              <el-button type="primary" size="small" icon="iconfont icon-beizhu"
+                style="background:#AD9AF6; border-color:#AD9AF6; border-radius: 0;padding:4px;"
+                @click="clreaMsg(),currentGoodsObj={},currentGoodsObj=item,calcTotalPrice(),orderDialog=true;"> 下单
+              </el-button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.currentPage"
+      layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="msg.total">
+    </el-pagination>
+    <el-dialog title="下单" :visible.sync="orderDialog" custom-class="order_Dialog" width="400px">
       <div style="margin-bottom:20px;">
-                {{item.name}}
+        {{currentGoodsObj.name}}
       </div>
       <el-form label-width="80px" size="small">
-                <template v-for="(subItem,subIndex) in item.attr_groups">
+        <template v-for="(subItem,subIndex) in currentGoodsObj.attr_groups">
           <el-form-item :key="subIndex" :label="subItem.attr_group_name" style="line-height:25px;">
             <span class="gd_Item" v-for="(childItem,childIndex) in subItem.attr_list" :key="childIndex"
               @click="chooseSpec(subIndex,childIndex),calcTotalPrice()"
-                        :class="{'checkSpec':subItem.checkId==childIndex}">
-                        {{childItem.attr_name}}_
-                        {{subItem.checkId}}_
-                        {{childIndex}}
+              :class="{'checkSpec':subItem.checkId==childItem.attr_id}">
+              {{childItem.attr_name}}
             </span>
           </el-form-item>
         </template>
         <el-form-item label="购买数量" size="small">
-                  <el-input-number @change="calcTotalPrice()" size="small" style="height:32px;" v-model="orderMsg.Number" :min="1" :max="10"
-                    label="请输入购买数量"></el-input-number>
+          <el-input-number @change="calcTotalPrice()" size="small" style="height:32px;" v-model="orderMsg.Number"
+            :min="1" :max="10" label="请输入购买数量"></el-input-number>
         </el-form-item>
         <el-form-item label="选择用户" size="small">
-                  <el-select size="small" v-model="orderMsg.mallUserId" filterable remote reserve-keyword
-                        placeholder="请输入微信昵称" :remote-method="getWechatData" @change="weChatChange">
+          <el-select size="small" v-model="orderMsg.mallUserId" filterable remote reserve-keyword placeholder="请输入微信昵称"
+            :remote-method="getWechatData" @change="weChatChange">
             <el-option v-for="wItem in weChatData" :key="wItem.Id" :label="wItem.Name" :value="wItem.Id">
               <span style="float: left">{{ wItem.Name }}
                 <template v-if="wItem.ShopId>0">
@@ -142,29 +160,41 @@
               <span style="float: left">{{ aItem.Name }}【{{aItem.DistrictAddress}}{{aItem.Address}}】</span>
             </el-option>
           </el-select>
+          <span class="goodAddress" @click="addAddress()">新增</span>
         </el-form-item>
         <el-form-item label="运费" size="small">
-                    {{orderMsg.FreightMoney}}
+          ￥<span style="color:red">{{orderMsg.FreightMoney}}</span>元
         </el-form-item>
         <el-form-item label="价格" size="small">
-                    ￥{{orderMsg.TotalPrice}}元
+          ￥<span style="color:red">{{orderMsg.TotalPrice}}</span>元
         </el-form-item>
       </el-form>
-              <p class="alcenter mt10">
-                <input type="button" :value="$t('pub.saveBtn')" @click="SaveOrder()" class="normalBtn" />
-              </p>
-              <el-button type="primary" size="small" icon="iconfont icon-beizhu" slot="reference"
-                style="background:#AD9AF6; border-color:#AD9AF6; border-radius: 0;padding:4px;"
-                @click="clreaMsg(),currentGoodsObj={},currentGoodsObj=item,calcTotalPrice()"> 下单
-              </el-button>
-            </el-popover>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.currentPage"
-      layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="msg.total">
-    </el-pagination>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="orderDialog = false">取 消</el-button>
+        <el-button size="small" type="danger" @click="SaveOrder()">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="新增地址" :visible.sync="goodVisible" width="600px">
+      <el-form ref="AddressMsg" :model="AddressMsg" :rules="rules" label-width="100px">
+        <el-form-item label="收货人" prop="Name">
+          <el-input class="w300" v-model="AddressMsg.Name"></el-input>
+        </el-form-item>
+        <el-form-item label="联系电话" prop="Mobile">
+          <el-input class="w300" v-model="AddressMsg.Mobile"></el-input>
+        </el-form-item>
+        <el-form-item label="省市区" prop="position">
+          <el-cascader class="w300" v-model="AddressMsg.position" :placeholder="addressName" :options="provinceList"
+            @active-item-change="handleItemChange" :props="props"></el-cascader>
+        </el-form-item>
+        <el-form-item label="详细地址" prop="Address">
+          <el-input v-model="AddressMsg.Address" placeholder="请输入详细地址" />
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="goodVisible = false">取 消</el-button>
+        <el-button size="small" type="danger" @click="saveInfo('AddressMsg')">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -211,6 +241,49 @@
         //当前选中商品
         currentGoodsObj: {},
         chooseAddressObj: {}, //选中的地址
+        //新增地址msg
+        AddressMsg: {
+          Id: 0,
+          Name: '',
+          Mobile: '',
+          Province: '',
+          City: '',
+          District: '',
+          Address: '',
+          NewUserId: 0,
+          position: [],
+        },
+        addressName: '请选择',
+        provinceList: [], //省市县列表
+        props: {
+          value: 'value',
+          children: 'cities'
+        },
+        rules: {
+          Name: [{
+            required: true,
+            message: "请输入收件人姓名",
+            trigger: "blur"
+          }],
+          Mobile: [{
+            required: true,
+            message: "请输入联系方式",
+            trigger: "blur"
+          }],
+          Address: [{
+            required: true,
+            message: "请输入详细地址",
+            trigger: "blur"
+          }],
+          position: [{
+            type: 'array',
+            required: true,
+            message: '请选择省市区',
+            trigger: 'change'
+          }],
+        },
+        orderDialog:false,
+        goodVisible: false,
       };
     },
     methods: {
@@ -341,6 +414,7 @@
           res => {
             this.loading = false;
             if (res.data.resultCode == 1) {
+              console.log(res,'数据');
               var tempArray = res.data.data.pageData;
               if (tempArray && tempArray.length > 0) {
                 tempArray.forEach(item => {
@@ -375,6 +449,7 @@
         var qMsg = {
           Name: keyWords
         };
+        if (keyWords && keyWords != '') {
           this.mallapipost(
             "/api/User/GetMemberUserListExt",
             qMsg,
@@ -383,6 +458,7 @@
                 this.weChatData = res.data.data;
               }
             });
+        }
       },
       //获取用户收货地址
       weChatChange() {
@@ -438,15 +514,114 @@
             this.Success("下单成功!");
             this.clreaMsg();
             this.getGoodList();
+            this.orderDialog=false;
+          } else {
+            this.Error(res.data.message);
+          }
+        })
+      },
+      handleItemChange(val) {
+        this.getPosition(val)
+      },
+      getPosition(val, cb) {
+        let vm = this; //查询省市县
+        let params = {};
+        if (!val) { //初始化加载 获取所有省份数据
+          params = {
+            Id: 1
+          }
+        } else if (val.length === 1) { //加载二级  获取市级数据
+          params = {
+            Id: val[0]
+          }
+        } else { //加载3级   获取县级数据
+          params = {
+            Id: val[1]
+          }
+        }
+        this.mallapipost("/api/Destination/GetChildList", params, res => {
+          if (res.data.resultCode == 1) {
+            if (!val) { //初始化加载   查询省份数据
+              vm.provinceList = res.data.data.map((e) => {
+                return {
+                  value: e.ID,
+                  label: e.Name,
+                  cities: []
+                }
+              });
+            } else if (val.length === 1) { //加载二级    查询该省下市级数据
+              vm.provinceList.map((item) => {
+                if (item.value === val[0]) {
+                  item.cities = res.data.data.map((e) => {
+                    return {
+                      value: e.ID,
+                      label: e.Name,
+                      cities: []
+                    }
+                  })
+                }
+              })
+            } else { //加载3级   查询该省市下县级数据
+              vm.provinceList.map((item) => {
+                if (item.value === val[0]) {
+                  item.cities.map((value) => {
+                    if (value.value === val[1]) {
+                      value.cities = res.data.data.map((e) => {
+                        return {
+                          value: e.ID,
+                          label: e.Name
+                        }
+                      })
+                    }
+                  })
+                }
+              })
+            }
+            cb && cb(res);
+          } else {
+            // this.Info(res.data.message);
+          }
+        })
+
+      },
+      //点击新增
+      addAddress() {
+        if (this.orderMsg.mallUserId == '') {
+          this.Error('请选择用户');
+        } else {
+          this.goodVisible = true;
+        }
+      },
+      //新增
+      saveInfo(formName) {
+        this.AddressMsg.Province = this.AddressMsg.position[0];
+        this.AddressMsg.City = this.AddressMsg.position[1];
+        this.AddressMsg.District = this.AddressMsg.position[2];
+        this.AddressMsg.NewUserId = this.orderMsg.mallUserId
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            delete this.AddressMsg.position //删除position 不传到后台
+            this.mallapipost("/api/AppletUser/SetUserShippingAddress", this.AddressMsg, res => {
+              if (res.data.resultCode == 1) {
+                this.Success(res.data.message);
+                this.goodVisible = false;
+                this.weChatChange();
               } else {
                 this.Error(res.data.message);
               }
             })
+          } else {
+            return false;
           }
+        });
+      }
+
+
     },
     mounted() {
       this.getCategroy();
       this.getGoodList();
+      this.getPosition(null)
     }
   };