chooseAddressModal.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. <template>
  2. <a-modal
  3. centered
  4. class="chooseAddressList-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="收货地址"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. width="70%">
  11. <!-- 操作按钮 -->
  12. <div class="table-operator">
  13. <a-button id="chooseAddressList-add" type="primary" @click="handleEdit()">新增收货地址</a-button>
  14. </div>
  15. <!-- 列表 -->
  16. <s-table
  17. class="sTable"
  18. ref="table"
  19. size="default"
  20. :rowKey="(record) => record.id"
  21. :columns="columns"
  22. :data="loadData"
  23. bordered>
  24. <!-- 收货人 -->
  25. <template slot="consignee" slot-scope="text, record">
  26. <div class="item-box">
  27. <a-tooltip placement="top">
  28. <template slot="title">
  29. <span>{{record.consignee}}</span>
  30. </template>
  31. <p class="ellipsis-txt">{{record.consignee}}</p>
  32. </a-tooltip>
  33. <span v-if="record.isDefault" class="badge-txt">默认</span>
  34. </div>
  35. </template>
  36. <!-- 操作 -->
  37. <template slot="action" slot-scope="text, record">
  38. <a-button type="link" v-if="!record.isDefault" @click="handleDefault(record)" id="chooseAddressList-default-btn">设置为默认地址</a-button>
  39. <a-button type="link" @click="handleEdit(record)" id="chooseAddressList-edit-btn" style="margin-left: 5px;">编辑</a-button>
  40. <a-button type="link" @click="handleDel(record)" id="chooseAddressList-del-btn" style="margin-left: 5px;">删除</a-button>
  41. </template>
  42. <!-- 选择 -->
  43. <template slot="choose" slot-scope="text, record">
  44. <a-button type="primary" @click="handleChoose(record)" id="chooseAddressList-choose-btn">选择</a-button>
  45. </template>
  46. </s-table>
  47. <!-- 新增/编辑地址 -->
  48. <edit-address-modal :openModal="openAddrModal" @ok="handleOk" @close="openAddrModal=false" />
  49. </a-modal>
  50. </template>
  51. <script>
  52. import { STable, VSelect } from '@/components'
  53. import editAddressModal from './editAddressModal'
  54. export default{
  55. name: 'ChooseAddressModal',
  56. components: { STable, VSelect, editAddressModal },
  57. props: {
  58. openModal: { // 弹框显示状态
  59. type: Boolean,
  60. default: false
  61. }
  62. },
  63. data(){
  64. return{
  65. isShow: this.openModal, // 是否打开弹框
  66. // 表头
  67. columns: [
  68. { title: '收货人', scopedSlots: { customRender: 'consignee' }, align: 'center', ellipsis: true },
  69. { title: '手机号码', dataIndex: 'phone', width: 120, align: 'center' },
  70. { title: '收货地址', dataIndex: 'address', align: 'center', ellipsis: true },
  71. { title: '操作', scopedSlots: { customRender: 'action' }, width: 295, align: 'center' },
  72. { title: '选择', scopedSlots: { customRender: 'choose' }, width: 160, align: 'center' },
  73. ],
  74. // 加载数据方法 必须为 Promise 对象
  75. loadData: parameter => {
  76. this.disabled = true
  77. // return customerBundleDelayList( Object.assign(parameter, this.queryParam) ).then(res => {
  78. // const data = res.data
  79. // const no = (data.pageNo - 1) * data.pageSize
  80. // for (var i = 0; i < data.list.length; i++) {
  81. // data.list[i].no = no + i + 1
  82. // }
  83. // this.disabled = false
  84. // return data
  85. // })
  86. const _this = this
  87. return new Promise(function(resolve, reject){
  88. const data = {
  89. pageNo: 1,
  90. pageSize: 10,
  91. list: [
  92. { id: '1', consignee: '张三', phone: '15878458789', address: '陕西省西安市雁塔区高新三路', isDefault: true },
  93. { id: '2', consignee: '张冀凯股份结构设计风格剑荡四方收费价格就会收到福建师范大书法家顾客三', phone: '15878458789', address: '陕西省西安市雁塔区高新三路', isDefault: false },
  94. { id: '3', consignee: '张三', phone: '15878458789', address: '陕西省西安市到福建师范大书法家雁塔区高新三路', isDefault: false },
  95. ],
  96. count: 10
  97. }
  98. const no = (data.pageNo - 1) * data.pageSize
  99. for (var i = 0; i < data.list.length; i++) {
  100. data.list[i].no = no + i + 1
  101. }
  102. _this.disabled = false
  103. resolve(data)
  104. })
  105. },
  106. openAddrModal: false, // 选择地址弹框是否显示
  107. }
  108. },
  109. methods: {
  110. // 设为默认
  111. handleDefault(row){
  112. },
  113. // 新增/编辑收货地址
  114. handleEdit(row){
  115. this.openAddrModal = true
  116. },
  117. // 选择
  118. handleChoose(row){
  119. },
  120. // 删除
  121. handleDel(row){
  122. const _this = this
  123. this.$confirm({
  124. title: '提示',
  125. content: '删除后不可恢复,确定要进行删除吗?',
  126. okText: '确定',
  127. cancelText: '取消',
  128. onOk () {
  129. // delectRolePower({
  130. // id: row.id
  131. // }).then(res => {
  132. // console.log(res, 'res1111')
  133. // if (res.status == 200) {
  134. // _this.$message.success(res.message)
  135. // _this.$refs.table.refresh()
  136. // }
  137. // })
  138. }
  139. })
  140. },
  141. // 地址保存
  142. handleOk(data){
  143. }
  144. },
  145. watch: {
  146. // 父页面传过来的弹框状态
  147. openModal (newValue, oldValue) {
  148. this.isShow = newValue
  149. },
  150. // 重定义的弹框状态
  151. isShow (newValue, oldValue) {
  152. if (!newValue) {
  153. this.$emit('close')
  154. }
  155. }
  156. }
  157. }
  158. </script>
  159. <style lang="less">
  160. .chooseAddressList-modal{
  161. .table-operator{
  162. margin-bottom: 15px;
  163. }
  164. .item-box{
  165. position: relative;
  166. .ellipsis-txt{
  167. margin: 0;
  168. width: 100%;
  169. overflow: hidden;
  170. text-overflow:ellipsis;
  171. whitewhite-space: nowrap;
  172. }
  173. .badge-txt{
  174. position: absolute;
  175. right: -15px;
  176. top: -17px;
  177. line-height: 20px;
  178. padding: 0 7px;
  179. font-size: 12px;
  180. background-color: #fff;
  181. color: #ed1c24;
  182. border-color: #ed1c24;
  183. border-radius: 20px;
  184. box-shadow: 0 0 0 1px #d9d9d9 inset;
  185. }
  186. }
  187. }
  188. </style>