zhangdaren / miniprogram-to-uniapp

轻松将各种小程序转换为uni-app项目
Other
1.67k stars 277 forks source link

原生小程序编译成uniapp,生成很多无用的嵌套的template标签 #47

Closed chenlang0311 closed 4 years ago

chenlang0311 commented 4 years ago

原生小程序编译成uniapp,生成很多无用的嵌套的template标签

chenlang0311 commented 4 years ago

原因应该是最外层没有包view,

chenlang0311 commented 4 years ago

然后导致每有一个同级的view,就生成了一个template

lincenying commented 4 years ago

而且, 我用最新版的从新转换一次, .vue文件里的template都变成一样了...

gavinz8 commented 4 years ago

+1

zhangdaren commented 4 years ago

是否可以提供一下,原来的那个空template标签的文件吗?方便具体分析。

我猜呢这个应该算正常情况 工具的逻辑是会根据template的类型来判断,会将它提取出来,并生成到components目录下xx.vue文件,然后在main.js全局引用。

而有可能一个wxml文件里面有N个template,这就导致会存在很多空的template,由于某些原因导致没有全部将这些template清空。

chenlang0311 commented 4 years ago

突然发现文件内容都变了

转换前的文件

<view class="container clearfix color_page--bg">
  <form>
    <view class='form_box'>
      <view class='user_item'>
        <view class='form_item--title'>姓名:</view>
        <input placeholder-class='f28 color_c pos' maxlength="10" bindinput='name' value='{{receiver_name}}' placeholder='请输入你的姓名'></input>
      </view>
      <view class='user_item'>
        <view class='form_item--title'>手机:</view>
        <input placeholder-class='f28 color_c pos' bindinput='phone' name='phone' type='number' value='{{receiver_phone}}' maxlength="11" placeholder='请输入你的手机'></input>
      </view>
      <view class='user_item' bindtap="selectDistrict">
        <view class='form_item--title'>收货地址:</view>
        <view class='f28'>
        <view class='ad'>{{userinfo.province_name}} {{userinfo.city_name}} {{userinfo.area_name}}</view>
        <input hidden name="area_id" value="{{userinfo.area_id}}" />
        <view class='iconfont icon-arrow_right arrow_right'></view></view>
      </view>
      <view class='user_item'>
        <view class='form_item--title'>详细地址:</view>
        <input placeholder-class='f28 color_c pos' bindinput='detailArea' value='{{receiver_address}}' placeholder='请输入你的详细地址'></input>
      </view>
    </view>
    <button class="color_green--bg f34 submit_btn" bindtap="{{fromCouplet?'getCouplet':'save'}}">保存</button>
  </form>
  <image class='logo' src='https://www.dfs168.com/output/images/dfs168_mall/logo.png'></image>
</view>

<!--citySelect_json.wxml-->
<view class="dialog-mask " style="visibility:{{isVisible ? 'visible': 'hidden'}}" bindtap="hideMenuTap " />
<view class="dialog-mask " style="z-index:99;visibility:{{addressMenuIsShow ? 'visible': 'hidden'}}" bindtap="hideCitySelected" />

<view class="picker-view" animation="{{animationAddressMenu}}" style="visibility:{{addressMenuIsShow ? 'visible':'hidden'}}">
  <view class="bd_line" style="position:relative;height:92rpx;line-height: 92rpx;width:100%;font-size: 32rpx;;">
    <text catchtap="cityCancel" style='padding-left: 24rpx;'>取消</text>
    <text catchtap="citySure" style='float: right;padding-right: 24rpx;color:rgba(47,180,46,1);'>确定</text>
  </view>
  <picker-view style="width: 100%; height: 300px;" bindchange="cityChange" value="{{value}}" wx:key="item">
    <picker-view-column>
      <view wx:for="{{provinces}}" data-val="{{item.v}}" wx:key="{{index}}" class="picker-item">
        {{item.n}}</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{citys}}" data-val="{{item.v}}" wx:key="{{index}}" class="picker-item">
        {{item.n}}</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{areas}}" data-val="{{item.v}}" wx:key="{{index}}" class="picker-item">
        {{item.n}}</view>
    </picker-view-column>
  </picker-view>
</view>
<!--citySelect_json.wxml-->

转换后的文件

<template>
<view>
<template>
<view>
<template>
<view>
<template>
<template>
<view>
<template>
<template>
<view>
<template>
<view>
<template>
<view class="swiper-tab tab-fixed" id="tab-con">
  <block v-for="(item, index) in tabArr" :key="index"> 
      <view :class="'swiper-tab-list tab-wid ' + (currentTab==tabIndex ? 'on' : '')" :data-current="tabIndex" :data-state="item.order_state" @tap="swichNav"><text :data-current="tabIndex">{{item.pre_name}}</text></view>
  </block>  
</view>
<view class="h88"></view>
<swiper :current="currentTab" class="swiper-box" duration="300" :style="'height:' + winHeight + 'px'" @change="bindChange">
  <swiper-item>
      <component is="OrderListTem" error-data="...item"></component>
  </swiper-item>

  <swiper-item class="hide_lead">
      <component is="OrderListTem" error-data="...item"></component>
  </swiper-item>

  <swiper-item class="hide_lead">
      <component is="OrderListTem" error-data="...item"></component>
  </swiper-item>

    <swiper-item class="hide_lead">
      <component is="OrderListTem" error-data="...item"></component>
  </swiper-item>
</swiper>

<view name="OrderListTem">
<view class="order_group_list">
<block v-if="orderList.length == 0">
    <view class="iconfont icon-zhangdan"></view>
    <view class="create_text">暂无记录<view>快去砍价享受优惠吧~</view></view>
    <navigator url="/pages/special/cut-price/home/index" hover-class="none" class="create_order color_green--bg f34">去砍价</navigator>    
</block>
<block v-for="(item, index) in orderList" :key="index">
    <view class="order-box">
        <view class="order-tp">
          <view class="order-tp-time">{{item.create_time}}</view>
          <view class="status" v-if="item.order_state == 0">已取消</view>
          <view class="status" v-if="item.order_state == -1 || item.order_state == 10">未付款</view>
          <view class="status" v-if="item.order_state == 20">待发货</view>
          <view class="status" v-if="item.order_state == 30">已发货</view>
          <view class="status" v-if="item.order_state == 40">已收货</view>
        </view>
        <view class="order-md" @tap="orderRecord" :data-cutid="item.cutprice_id">
            <view class="order-li">
                <view class="order-li-lt"> 
                    <image :src="item.goods_picture"></image>
                </view>
                <view class="order-li-rt">
                    <view class="li-h1">
                        {{item.goods_name}}
                    </view>
                    <view class="cut-info">
                        最低可砍至
                        <text class="red">¥{{item.max_many_val}}</text>
                        原价 ¥{{item.goods_price_origin}}
                    </view>
                    <view class="buy-price">当前已砍到:<text class="icon">¥</text><text class="price">{{item.cutprice_price_val}}</text></view>
                </view>
            </view>
        </view>

        <view class="order-bt1">
          <label class="order-bt1-frei">
            <view class="goods_count">共 {{item.goods_quantity}} 件商品</view>
            运费:{{item.goods_shipping_fee == '0.00'?'免运费':item.goods_shipping_fee}}
          </label>
          <!-- <label class='order-bt1-pays'>
            应付:<label><text>¥</text>{{item.total}}</label>
          </label> -->
        </view>
        <!-- <view class='order-bt2' wx:if="{{item.order_state != 0}}">
            <block wx:if="{{item.order_state == 10}}">
                <label  class="lab_btn btn_rt" bindtap='payOrder' data-sn="{{item.order_sn}}">立即购买</label>
            </block>
            <block wx:if="{{item.order_state == 3}}">
                <label  class="lab_btn btn_rt" bindtap='enterGet' data-sn="{{item.order_sn}}">确认收货</label>
            </block>
        </view> -->
    </view>
</block>
</view>
</view>
</template>

</view>
</template>

</view>
</template>

</template>

</view>
</template>

</template>

</view>
</template>

</view>
</template>

</view>
</template>

<script>
// pages/address/address.js
const phoneTest = /^1[3|4|5|6|7|8|9]\d{9}$/;
const pubUnits = require("../../utils/pub_units.js");
const api = require("../../utils/api.js");

export default {
  data() {
    return {
      isVisible: false,
      animationData: {},
      animationAddressMenu: {},
      addressMenuIsShow: false,
      value: [0, 0, 0],
      provinces: [],
      citys: [],
      areas: [],
      receiver_name: '',
      receiver_phone: null,
      receiver_area: null,
      receiver_address: null,
      address_id: null,
      myadd: false,
      edadd: false,
      add_act: false,
      userinfo: {
        province_name: '北京',
        city_name: '北京市',
        area_name: '东城区',
        area_id: 37
      },
      fromCouplet: false //来自点亮对联活动
      ,
      default_address: ""
    };
  },

  components: {},
  props: {},

  onShow() {},

  onLoad: function (options) {
    this.getUserInfo();
    this.address_id = options.address_id;
    /*load_area*/

    this.getAreaList();
    var animation = wx.createAnimation({
      duration: 500,
      transformOrigin: "50% 50%",
      timingFunction: 'ease'
    });
    this.animation = animation;

    if (options.myadd && options.myadd == 'myadd') {
      this.setData({
        myadd: true
      });
    }

    if (options.editAdd) {
      wx.setNavigationBarTitle({
        title: '修改收货地址'
      });
      wx.showLoading({
        title: '数据加载中'
      });
      this.setData({
        edadd: true
      });
      this.getDefault(options.editAdd);
    } else if (options.couplet) {
      wx.setNavigationBarTitle({
        title: '填写收货地址'
      });
      this.setData({
        fromCouplet: true
      });
    } else {
      wx.setNavigationBarTitle({
        title: '添加收货地址'
      });
    }

    if (options.act_id) {
      this.setData({
        add_act: true
      });
    }
  },
  methods: {
    name: function (e) {
      this.setData({
        receiver_name: e.detail.value
      });
    },
    phone: function (e) {
      this.setData({
        receiver_phone: e.detail.value
      });
    },
    detailArea: function (e) {
      this.setData({
        receiver_address: e.detail.value
      });
    },
    save: function () {
      var that = this;
      var default_address;

      if (that.address_id) {
        default_address = that.default_address;
      }

      var data = {
        address_id: that.address_id || "",
        receiver_name: that.receiver_name,
        receiver_phone: that.receiver_phone,
        receiver_address: that.receiver_address,
        receiver_area: that.userinfo.area_id || that.receiver_area,
        default_address: default_address || 0
      };

      if (!phoneTest.test(data.receiver_phone)) {
        wx.showToast({
          icon: 'none',
          title: '手机号码错误'
        });
        return false;
      }

      if (!data.receiver_name || !data.receiver_phone || !data.receiver_address || !data.receiver_area) {
        wx.showToast({
          icon: 'none',
          title: '资料填写不完整'
        });
        return false;
      }

      api.my.postUserAddress(data).then(res => {
        if (res.error == 0) {
          let url = "";

          if (that.myadd || that.edadd) {
            url = 'my/myAddress/myAddress';
          } else {
            if (that.add_act) {
              url = '../special/orderPreview/orderPreview';
            } else {
              url = '../order/order';
            }
          }

          wx.navigateBack({
            url: url
          });
        }
      });
    },

    getCouplet() {
      var that = this;
      var data = {
        name: that.receiver_name,
        phone: that.receiver_phone,
        address: that.receiver_address,
        areaid: that.userinfo.area_id || that.receiver_area
      };
      console.log('data', data);

      if (!phoneTest.test(data.phone)) {
        wx.showToast({
          icon: 'none',
          title: '手机号码错误'
        });
        return false;
      }

      if (!data.name || !data.phone || !data.address || !data.areaid) {
        wx.showToast({
          icon: 'none',
          title: '资料填写不完整'
        });
        return false;
      }

      this.receive(data);
      console.log("验证通过");
    },

    /**
    * 提交动作
    */
    receive(data) {
      const that = this;
      api.my.receiveUserAddress(data).then(res => {
        wx.hideLoading();

        if (res.error == 0) {
          wx.showToast({
            title: res.message + '3s后自动返回',
            icon: 'none'
          });
          setTimeout(() => {
            wx.navigateBack({
              delta: 1
            });
          }, 2000);
        } else if (res.error == 101) {
          console.log("去注册");
        } else {
          wx.showToast({
            icon: 'none',
            title: res.message
          });
        }
      });
    },

    getDefault(address_id) {
      var that = this;
      let data = {
        "address_id": address_id
      };
      api.my.getUserAddress(data).then(res => {
        if (res.error == 0) {
          var Objaddress = res.data.address[0];
          that.setData({
            address_id: Objaddress.address_id,
            receiver_name: Objaddress.receiver_name,
            receiver_phone: Objaddress.receiver_phone,
            receiver_address: Objaddress.receiver_address,
            receiver_area: Objaddress.area_id,
            'userinfo.province_name': Objaddress.province_name,
            'userinfo.city_name': Objaddress.city_name,
            'userinfo.area_name': Objaddress.area_name,
            default_address: Objaddress.default_address
          });
          wx.hideLoading();
        }
      });
    },

    getUserInfo: function () {
      var _this = this;

      api.my.getUserProfile().then(res => {
        if (res.error == 0) {
          _this.setData({
            userinfo: res.data.userinfo
          });
        }
      });
    },
    getAreaList: function () {
      let _this = this;

      api.my.getSharedAddress().then(res => {
        let proArr = res.data.area,
            cityArr = proArr[0].s,
            areaArr = cityArr[0].s;

        _this.setData({
          provinces: proArr,
          citys: cityArr,
          areas: areaArr
        });
      });
    },
    selectDistrict: function () {
      pubUnits.selectDistrict(this, true);
    },
    startAddressAnimation: function (_this, isShow) {
      pubUnits.startAddressAnimation(_this, isShow);
    },
    cityCancel: function () {
      pubUnits.cityCancel(this, false);
    },
    citySure: function () {
      pubUnits.citySure(this, false);
    },
    hideCitySelected: function (e) {
      pubUnits.hideCitySelected(this, false);
    },
    cityChange: function (e) {
      pubUnits.cityChange(this, e);
    },
    setData: function (obj, callback) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
      callback && callback();
    }
  }
};
</script>
<style>
@import "./address.css";
</style>
zhangdaren commented 4 years ago

好的,我晚点看看,,另外单独一个小程序项目,pages里 只有这个wxml文件也会成这样嘛?

---原始邮件--- 发件人: "chenlang0311"<notifications@github.com> 发送时间: 2019年12月4日(周三) 下午4:48 收件人: "zhangdaren/miniprogram-to-uniapp"<miniprogram-to-uniapp@noreply.github.com>; 抄送: "zhangdaren"<375890534@qq.com>;"Comment"<comment@noreply.github.com>; 主题: Re: [zhangdaren/miniprogram-to-uniapp] 原生小程序编译成uniapp,生成很多无用的嵌套的template标签 (#47)

转换前的文件 ` 姓名: 手机: 收货地址: {{userinfo.province_name}} {{userinfo.city_name}} {{userinfo.area_name}} 详细地址: 保存

    取消     确定                           {{item.n}}                          {{item.n}}                          {{item.n}}         ` 转换后的文件 `           {{item.pre_name}}                                             <swiper-item class="hide_lead"&gt;   <component is="OrderListTem" error-data="...item"&gt;</component&gt;     暂无记录快去砍价享受优惠吧~ 去砍价                         {{item.create_time}}           已取消           未付款           待发货           已发货           已收货                                                                      

                                                                            {{item.goods_name}}                                                                   最低可砍至                         ¥{{item.max_many_val}}                         原价 ¥{{item.goods_price_origin}}                                          当前已砍到:¥{{item.cutprice_price_val}}                                            <view class="order-bt1"&gt;       <label class="order-bt1-frei"&gt;         <view class="goods_count"&gt;共 {{item.goods_quantity}} 件商品</view&gt;         运费:{{item.goods_shipping_fee == '0.00'?'免运费':item.goods_shipping_fee}}       </label&gt;       <!-- <label class='order-bt1-pays'&gt;         应付:<label&gt;<text&gt;¥</text&gt;{{item.total}}</label&gt;       </label&gt; --&gt;     </view&gt;     <!-- <view class='order-bt2' wx:if="{{item.order_state != 0}}"&gt;         <block wx:if="{{item.order_state == 10}}"&gt;             <label  class="lab_btn btn_rt" bindtap='payOrder' data-sn="{{item.order_sn}}"&gt;立即购买</label&gt;         </block&gt;         <block wx:if="{{item.order_state == 3}}"&gt;             <label  class="lab_btn btn_rt" bindtap='enterGet' data-sn="{{item.order_sn}}"&gt;确认收货</label&gt;         </block&gt;     </view&gt; --&gt; </view&gt;  <script&gt; // pages/address/address.js const phoneTest = /^1[3|4|5|6|7|8|9]\d{9}$/; const pubUnits = require("../../utils/pub_units.js"); const api = require("../../utils/api.js"); export default {   data() {     return {       isVisible: false,       animationData: {},       animationAddressMenu: {},       addressMenuIsShow: false,       value: [0, 0, 0],       provinces: [],       citys: [],       areas: [],       receiver_name: '',       receiver_phone: null,       receiver_area: null,       receiver_address: null,       address_id: null,       myadd: false,       edadd: false,       add_act: false,       userinfo: {         province_name: '北京',         city_name: '北京市',         area_name: '东城区',         area_id: 37       },       fromCouplet: false //来自点亮对联活动       ,       default_address: ""     };   },   components: {},   props: {},   onShow() {},   onLoad: function (options) {     this.getUserInfo();     this.address_id = options.address_id;     /*load_area*/     this.getAreaList();     var animation = wx.createAnimation({       duration: 500,       transformOrigin: "50% 50%",       timingFunction: 'ease'     });     this.animation = animation;     if (options.myadd &amp;&amp; options.myadd == 'myadd') {       this.setData({         myadd: true       });     }     if (options.editAdd) {       wx.setNavigationBarTitle({         title: '修改收货地址'       });       wx.showLoading({         title: '数据加载中'       });       this.setData({         edadd: true       });       this.getDefault(options.editAdd);     } else if (options.couplet) {       wx.setNavigationBarTitle({         title: '填写收货地址'       });       this.setData({         fromCouplet: true       });     } else {       wx.setNavigationBarTitle({         title: '添加收货地址'       });     }     if (options.act_id) {       this.setData({         add_act: true       });     }   },   methods: {     name: function (e) {       this.setData({         receiver_name: e.detail.value       });     },     phone: function (e) {       this.setData({         receiver_phone: e.detail.value       });     },     detailArea: function (e) {       this.setData({         receiver_address: e.detail.value       });     },     save: function () {       var that = this;       var default_address;       if (that.address_id) {         default_address = that.default_address;       }       var data = {         address_id: that.address_id || "",         receiver_name: that.receiver_name,         receiver_phone: that.receiver_phone,         receiver_address: that.receiver_address,         receiver_area: that.userinfo.area_id || that.receiver_area,         default_address: default_address || 0       };       if (!phoneTest.test(data.receiver_phone)) {         wx.showToast({           icon: 'none',           title: '手机号码错误'         });         return false;       }       if (!data.receiver_name || !data.receiver_phone || !data.receiver_address || !data.receiver_area) {         wx.showToast({           icon: 'none',           title: '资料填写不完整'         });         return false;       }       api.my.postUserAddress(data).then(res =&gt; {         if (res.error == 0) {           let url = "";           if (that.myadd || that.edadd) {             url = 'my/myAddress/myAddress';           } else {             if (that.add_act) {               url = '../special/orderPreview/orderPreview';             } else {               url = '../order/order';             }           }           wx.navigateBack({             url: url           });         }       });     },     getCouplet() {       var that = this;       var data = {         name: that.receiver_name,         phone: that.receiver_phone,         address: that.receiver_address,         areaid: that.userinfo.area_id || that.receiver_area       };       console.log('data', data);       if (!phoneTest.test(data.phone)) {         wx.showToast({           icon: 'none',           title: '手机号码错误'         });         return false;       }       if (!data.name || !data.phone || !data.address || !data.areaid) {         wx.showToast({           icon: 'none',           title: '资料填写不完整'         });         return false;       }       this.receive(data);       console.log("验证通过");     },     /**     * 提交动作     */     receive(data) {       const that = this;       api.my.receiveUserAddress(data).then(res =&gt; {         wx.hideLoading();         if (res.error == 0) {           wx.showToast({             title: res.message + '3s后自动返回',             icon: 'none'           });           setTimeout(() =&gt; {             wx.navigateBack({               delta: 1             });           }, 2000);         } else if (res.error == 101) {           console.log("去注册");         } else {           wx.showToast({             icon: 'none',             title: res.message           });         }       });     },     getDefault(address_id) {       var that = this;       let data = {         "address_id": address_id       };       api.my.getUserAddress(data).then(res =&gt; {         if (res.error == 0) {           var Objaddress = res.data.address[0];           that.setData({             address_id: Objaddress.address_id,             receiver_name: Objaddress.receiver_name,             receiver_phone: Objaddress.receiver_phone,             receiver_address: Objaddress.receiver_address,             receiver_area: Objaddress.area_id,             'userinfo.province_name': Objaddress.province_name,             'userinfo.city_name': Objaddress.city_name,             'userinfo.area_name': Objaddress.area_name,             default_address: Objaddress.default_address           });           wx.hideLoading();         }       });     },     getUserInfo: function () {       var _this = this;       api.my.getUserProfile().then(res =&gt; {         if (res.error == 0) {           _this.setData({             userinfo: res.data.userinfo           });         }       });     },     getAreaList: function () {       let _this = this;       api.my.getSharedAddress().then(res =&gt; {         let proArr = res.data.area,             cityArr = proArr[0].s,             areaArr = cityArr[0].s;         _this.setData({           provinces: proArr,           citys: cityArr,           areas: areaArr         });       });     },     selectDistrict: function () {       pubUnits.selectDistrict(this, true);     },     startAddressAnimation: function (_this, isShow) {       pubUnits.startAddressAnimation(_this, isShow);     },     cityCancel: function () {       pubUnits.cityCancel(this, false);     },     citySure: function () {       pubUnits.citySure(this, false);     },     hideCitySelected: function (e) {       pubUnits.hideCitySelected(this, false);     },     cityChange: function (e) {       pubUnits.cityChange(this, e);     },     setData: function (obj, callback) {       let that = this;       let keys = [];       let val, data;       Object.keys(obj).forEach(function (key) {         keys = key.split('.');         val = obj[key];         data = that.$data;         keys.forEach(function (key2, index) {           if (index + 1 == keys.length) {             that.$set(data, key2, val);           } else {             if (!data[key2]) {               that.$set(data, key2, {});             }           }           data = data[key2];         });       });       callback &amp;&amp; callback();     }   } }; </script&gt; <style&gt; @import "./address.css"; </style&gt;` 

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

chenlang0311 commented 4 years ago

只有这个单独的页面不会,

<template>
<view>
<view class="container clearfix color_page--bg">
  <form>
    <view class="form_box">
      <view class="user_item">
        <view class="form_item--title">姓名:</view>
        <input placeholder-class="f28 color_c pos" maxlength="10" @input="name" :value="receiver_name" placeholder="请输入你的姓名"></input>
      </view>
      <view class="user_item">
        <view class="form_item--title">手机:</view>
        <input placeholder-class="f28 color_c pos" @input="phone" name="phone" type="number" :value="receiver_phone" maxlength="11" placeholder="请输入你的手机"></input>
      </view>
      <view class="user_item" @tap="selectDistrict">
        <view class="form_item--title">收货地址:</view>
        <view class="f28">
        <view class="ad">{{userinfo.province_name}} {{userinfo.city_name}} {{userinfo.area_name}}</view>
        <input hidden name="area_id" :value="userinfo.area_id"></input>
        <view class="iconfont icon-arrow_right arrow_right"></view></view>
      </view>
      <view class="user_item">
        <view class="form_item--title">详细地址:</view>
        <input placeholder-class="f28 color_c pos" @input="detailArea" :value="receiver_address" placeholder="请输入你的详细地址"></input>
      </view>
    </view>
    <button class="color_green--bg f34 submit_btn" @tap="fromCouplet?'getCouplet':'save'">保存</button>
  </form>
  <image class="logo" src="https://www.dfs168.com/output/images/dfs168_mall/logo.png"></image>
</view>

<!--citySelect_json.wxml-->
<view class="dialog-mask " :style="'visibility:' + (isVisible ? 'visible': 'hidden')" @tap="hideMenuTap "></view>
<view class="dialog-mask " :style="'z-index:99;visibility:' + (addressMenuIsShow ? 'visible': 'hidden')" @tap="hideCitySelected"></view>

<view class="picker-view" :animation="animationAddressMenu" :style="'visibility:' + (addressMenuIsShow ? 'visible':'hidden')">
  <view class="bd_line" style="position:relative;height:92rpx;line-height: 92rpx;width:100%;font-size: 32rpx;;">
    <text @tap.native.stop="cityCancel" style="padding-left: 24rpx;">取消</text>
    <text @tap.native.stop="citySure" style="float: right;padding-right: 24rpx;color:rgba(47,180,46,1);">确定</text>
  </view>
  <picker-view style="width: 100%; height: 300px;" @change="cityChange" :value="value">
    <picker-view-column>
      <view v-for="(item, index) in provinces" :key="index" :data-val="item.v" class="picker-item">
        {{item.n}}</view>
    </picker-view-column>
    <picker-view-column>
      <view v-for="(item, index) in citys" :key="index" :data-val="item.v" class="picker-item">
        {{item.n}}</view>
    </picker-view-column>
    <picker-view-column>
      <view v-for="(item, index) in areas" :key="index" :data-val="item.v" class="picker-item">
        {{item.n}}</view>
    </picker-view-column>
  </picker-view>
</view>
<!--citySelect_json.wxml-->
</view>
</template>

<script>
// pages/address/address.js
const phoneTest = /^1[3|4|5|6|7|8|9]\d{9}$/;
const pubUnits = require("../../utils/pub_units.js");
const api = require("../../utils/api.js");

export default {
  data() {
    return {
      isVisible: false,
      animationData: {},
      animationAddressMenu: {},
      addressMenuIsShow: false,
      value: [0, 0, 0],
      provinces: [],
      citys: [],
      areas: [],
      receiver_name: '',
      receiver_phone: null,
      receiver_area: null,
      receiver_address: null,
      address_id: null,
      myadd: false,
      edadd: false,
      add_act: false,
      userinfo: {
        province_name: '北京',
        city_name: '北京市',
        area_name: '东城区',
        area_id: 37
      },
      fromCouplet: false //来自点亮对联活动
      ,
      default_address: ""
    };
  },

  components: {},
  props: {},

  onShow() {},

  onLoad: function (options) {
    this.getUserInfo();
    this.address_id = options.address_id;
    /*load_area*/

    this.getAreaList();
    var animation = wx.createAnimation({
      duration: 500,
      transformOrigin: "50% 50%",
      timingFunction: 'ease'
    });
    this.animation = animation;

    if (options.myadd && options.myadd == 'myadd') {
      this.setData({
        myadd: true
      });
    }

    if (options.editAdd) {
      wx.setNavigationBarTitle({
        title: '修改收货地址'
      });
      wx.showLoading({
        title: '数据加载中'
      });
      this.setData({
        edadd: true
      });
      this.getDefault(options.editAdd);
    } else if (options.couplet) {
      wx.setNavigationBarTitle({
        title: '填写收货地址'
      });
      this.setData({
        fromCouplet: true
      });
    } else {
      wx.setNavigationBarTitle({
        title: '添加收货地址'
      });
    }

    if (options.act_id) {
      this.setData({
        add_act: true
      });
    }
  },
  methods: {
    name: function (e) {
      this.setData({
        receiver_name: e.detail.value
      });
    },
    phone: function (e) {
      this.setData({
        receiver_phone: e.detail.value
      });
    },
    detailArea: function (e) {
      this.setData({
        receiver_address: e.detail.value
      });
    },
    save: function () {
      var that = this;
      var default_address;

      if (that.address_id) {
        default_address = that.default_address;
      }

      var data = {
        address_id: that.address_id || "",
        receiver_name: that.receiver_name,
        receiver_phone: that.receiver_phone,
        receiver_address: that.receiver_address,
        receiver_area: that.userinfo.area_id || that.receiver_area,
        default_address: default_address || 0
      };

      if (!phoneTest.test(data.receiver_phone)) {
        wx.showToast({
          icon: 'none',
          title: '手机号码错误'
        });
        return false;
      }

      if (!data.receiver_name || !data.receiver_phone || !data.receiver_address || !data.receiver_area) {
        wx.showToast({
          icon: 'none',
          title: '资料填写不完整'
        });
        return false;
      }

      api.my.postUserAddress(data).then(res => {
        if (res.error == 0) {
          let url = "";

          if (that.myadd || that.edadd) {
            url = 'my/myAddress/myAddress';
          } else {
            if (that.add_act) {
              url = '../special/orderPreview/orderPreview';
            } else {
              url = '../order/order';
            }
          }

          wx.navigateBack({
            url: url
          });
        }
      });
    },

    getCouplet() {
      var that = this;
      var data = {
        name: that.receiver_name,
        phone: that.receiver_phone,
        address: that.receiver_address,
        areaid: that.userinfo.area_id || that.receiver_area
      };
      console.log('data', data);

      if (!phoneTest.test(data.phone)) {
        wx.showToast({
          icon: 'none',
          title: '手机号码错误'
        });
        return false;
      }

      if (!data.name || !data.phone || !data.address || !data.areaid) {
        wx.showToast({
          icon: 'none',
          title: '资料填写不完整'
        });
        return false;
      }

      this.receive(data);
      console.log("验证通过");
    },

    /**
    * 提交动作
    */
    receive(data) {
      const that = this;
      api.my.receiveUserAddress(data).then(res => {
        wx.hideLoading();

        if (res.error == 0) {
          wx.showToast({
            title: res.message + '3s后自动返回',
            icon: 'none'
          });
          setTimeout(() => {
            wx.navigateBack({
              delta: 1
            });
          }, 2000);
        } else if (res.error == 101) {
          console.log("去注册");
        } else {
          wx.showToast({
            icon: 'none',
            title: res.message
          });
        }
      });
    },

    getDefault(address_id) {
      var that = this;
      let data = {
        "address_id": address_id
      };
      api.my.getUserAddress(data).then(res => {
        if (res.error == 0) {
          var Objaddress = res.data.address[0];
          that.setData({
            address_id: Objaddress.address_id,
            receiver_name: Objaddress.receiver_name,
            receiver_phone: Objaddress.receiver_phone,
            receiver_address: Objaddress.receiver_address,
            receiver_area: Objaddress.area_id,
            'userinfo.province_name': Objaddress.province_name,
            'userinfo.city_name': Objaddress.city_name,
            'userinfo.area_name': Objaddress.area_name,
            default_address: Objaddress.default_address
          });
          wx.hideLoading();
        }
      });
    },

    getUserInfo: function () {
      var _this = this;

      api.my.getUserProfile().then(res => {
        if (res.error == 0) {
          _this.setData({
            userinfo: res.data.userinfo
          });
        }
      });
    },
    getAreaList: function () {
      let _this = this;

      api.my.getSharedAddress().then(res => {
        let proArr = res.data.area,
            cityArr = proArr[0].s,
            areaArr = cityArr[0].s;

        _this.setData({
          provinces: proArr,
          citys: cityArr,
          areas: areaArr
        });
      });
    },
    selectDistrict: function () {
      pubUnits.selectDistrict(this, true);
    },
    startAddressAnimation: function (_this, isShow) {
      pubUnits.startAddressAnimation(_this, isShow);
    },
    cityCancel: function () {
      pubUnits.cityCancel(this, false);
    },
    citySure: function () {
      pubUnits.citySure(this, false);
    },
    hideCitySelected: function (e) {
      pubUnits.hideCitySelected(this, false);
    },
    cityChange: function (e) {
      pubUnits.cityChange(this, e);
    },
    setData: function (obj, callback) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
      callback && callback();
    }
  }
};
</script>
<style>
@import "./index.css";
</style>
zhangdaren commented 4 years ago

问题找到了,v1.0.34已修复,