Merge branch 'master' of gitee.com:beijing_hongye_huicheng/lilishop-ui
						commit
						ad09b38ed5
					
				|  | @ -71,10 +71,15 @@ export default { | ||||||
|       this.search(); |       this.search(); | ||||||
|     }, |     }, | ||||||
|     search () { // 全平台搜索商品 |     search () { // 全平台搜索商品 | ||||||
|  |       const url = this.$route.path; | ||||||
|  |       if(url == '/goodsList'){ | ||||||
|  |         this.$emit('search', this.searchData) | ||||||
|  |       }else{ | ||||||
|         this.$router.push({ |         this.$router.push({ | ||||||
|           path: '/goodsList', |           path: '/goodsList', | ||||||
|           query: { keyword: this.searchData } |           query: { keyword: this.searchData } | ||||||
|         }); |         }); | ||||||
|  |       } | ||||||
|     }, |     }, | ||||||
|     searchStore () { // 店铺搜索商品 |     searchStore () { // 店铺搜索商品 | ||||||
|       this.$emit('search', this.searchData) |       this.$emit('search', this.searchData) | ||||||
|  |  | ||||||
|  | @ -369,6 +369,8 @@ export default { | ||||||
|               return h('div', [h('span', {}, '申请中')]); |               return h('div', [h('span', {}, '申请中')]); | ||||||
|             } else if (params.row.applyStatus === 'VIA_AUDITING') { |             } else if (params.row.applyStatus === 'VIA_AUDITING') { | ||||||
|               return h('div', [h('span', {}, '提现成功')]); |               return h('div', [h('span', {}, '提现成功')]); | ||||||
|  |             } else if (params.row.applyStatus === 'ERROR') { | ||||||
|  |               return h('div', [h('span', {}, '提现失败')]); | ||||||
|             } else { |             } else { | ||||||
|               return h('div', [h('span', {}, '审核拒绝')]); |               return h('div', [h('span', {}, '审核拒绝')]); | ||||||
|             } |             } | ||||||
|  |  | ||||||
|  | @ -6,12 +6,7 @@ | ||||||
|     <div class="promotion-decorate">限时秒杀</div> |     <div class="promotion-decorate">限时秒杀</div> | ||||||
|     <ul class="time-line"> |     <ul class="time-line"> | ||||||
|       <template v-for="(time, index) in list"> |       <template v-for="(time, index) in list"> | ||||||
|         <li |         <li v-if="index < 5" @click="currIndex = index" :key="index" :class="{ currTimeline: currIndex === index }"> | ||||||
|           v-if="index < 5" |  | ||||||
|           @click="currIndex = index" |  | ||||||
|           :key="index" |  | ||||||
|           :class="{ currTimeline: currIndex === index }" |  | ||||||
|         > |  | ||||||
|           <div>{{ time.timeLine + ":00" }}</div> |           <div>{{ time.timeLine + ":00" }}</div> | ||||||
|           <div v-if="currIndex === index"> |           <div v-if="currIndex === index"> | ||||||
|             <p>{{ nowHour >= time.timeLine ? "秒杀中" : "即将开始" }}</p> |             <p>{{ nowHour >= time.timeLine ? "秒杀中" : "即将开始" }}</p> | ||||||
|  | @ -30,13 +25,8 @@ | ||||||
|     <!-- 秒杀商品列表 --> |     <!-- 秒杀商品列表 --> | ||||||
|     <div class="goods-list"> |     <div class="goods-list"> | ||||||
|       <empty v-if="goodsList.length === 0" /> |       <empty v-if="goodsList.length === 0" /> | ||||||
|       <div |       <div v-else class="goods-show-info1" v-for="(item, index) in goodsList" :key="index" | ||||||
|         v-else |         @click="goGoodsDetail(item.skuId, item.goodsId)"> | ||||||
|         class="goods-show-info1" |  | ||||||
|         v-for="(item, index) in goodsList" |  | ||||||
|         :key="index" |  | ||||||
|         @click="goGoodsDetail(item.skuId, item.goodsId)" |  | ||||||
|       > |  | ||||||
|         <div class="goods-show-img"> |         <div class="goods-show-img"> | ||||||
|           <img width="200" height="200" :src="item.goodsImage" /> |           <img width="200" height="200" :src="item.goodsImage" /> | ||||||
|         </div> |         </div> | ||||||
|  | @ -53,42 +43,28 @@ | ||||||
|         <div class="goods-show-detail"> |         <div class="goods-show-detail"> | ||||||
|           <span>{{ item.goodsName }}</span> |           <span>{{ item.goodsName }}</span> | ||||||
|         </div> |         </div> | ||||||
|         <div |         <div class="goods-seckill-btn" :class="{ | ||||||
|           class="goods-seckill-btn" |  | ||||||
|           :class="{ |  | ||||||
|           'goods-seckill-btn-gray': nowHour < list[currIndex].timeLine, |           'goods-seckill-btn-gray': nowHour < list[currIndex].timeLine, | ||||||
|           }" |         }"> | ||||||
|         > |  | ||||||
|           {{ nowHour >= list[currIndex].timeLine ? "立即抢购" : "即将开始" }} |           {{ nowHour >= list[currIndex].timeLine ? "立即抢购" : "即将开始" }} | ||||||
|         </div> |         </div> | ||||||
|         <div |         <div v-if="nowHour >= list[currIndex].timeLine && item.quantity <= item.salesNum" | ||||||
|           v-if="nowHour >= list[currIndex].timeLine && item.quantity <=  item.salesNum" |           class="goods-seckill-btn goods-seckill-btn-gray"> | ||||||
|           class="goods-seckill-btn goods-seckill-btn-gray" |  | ||||||
|         > |  | ||||||
|           已售罄 |           已售罄 | ||||||
|         </div> |         </div> | ||||||
|         <div v-if="nowHour >= list[currIndex].timeLine" class="goods-show-num1"> |         <div v-if="nowHour >= list[currIndex].timeLine" class="goods-show-num1"> | ||||||
|           <span |           <span>已售{{ | ||||||
|             >已售{{ |  | ||||||
|             (item.quantity && item.quantity > 0 |             (item.quantity && item.quantity > 0 | ||||||
|               ? Math.ceil( |               ? Math.ceil( | ||||||
|                 (item.salesNum / (item.quantity + item.salesNum)) * 100 |                 (item.salesNum / (item.quantity + item.salesNum)) * 100 | ||||||
|               ) |               ) | ||||||
|               : 100) + "%" |               : 100) + "%" | ||||||
|             }}</span |           }}</span><Progress hide-info stroke-color="#df0021" style="width: 110px" class="ml_10" :percent="item.quantity && item.quantity > 0 | ||||||
|           ><Progress |  | ||||||
|             hide-info |  | ||||||
|             stroke-color="#df0021" |  | ||||||
|             style="width: 110px" |  | ||||||
|             class="ml_10" |  | ||||||
|             :percent=" |  | ||||||
|               item.quantity && item.quantity > 0 |  | ||||||
|       ? Math.ceil( |       ? Math.ceil( | ||||||
|         (item.salesNum / (item.quantity + item.salesNum)) * 100 |         (item.salesNum / (item.quantity + item.salesNum)) * 100 | ||||||
|       ) |       ) | ||||||
|       : 100 |       : 100 | ||||||
|             " |     " /> | ||||||
|           /> |  | ||||||
|         </div> |         </div> | ||||||
|         <div class="goods-show-seller"> |         <div class="goods-show-seller"> | ||||||
|           <span>{{ item.storeName }}</span> |           <span>{{ item.storeName }}</span> | ||||||
|  | @ -101,7 +77,7 @@ | ||||||
| <script> | <script> | ||||||
| import { seckillByDay } from "@/api/promotion"; | import { seckillByDay } from "@/api/promotion"; | ||||||
| export default { | export default { | ||||||
|   data() { |   data () { | ||||||
|     return { |     return { | ||||||
|       list: [], // 秒杀时段列表 |       list: [], // 秒杀时段列表 | ||||||
|       goodsList: [], // 商品列表 |       goodsList: [], // 商品列表 | ||||||
|  | @ -112,19 +88,19 @@ export default { | ||||||
|       nowHour: new Date().getHours(), // 当前小时数 |       nowHour: new Date().getHours(), // 当前小时数 | ||||||
|     }; |     }; | ||||||
|   }, |   }, | ||||||
|   beforeDestroy() { |   beforeDestroy () { | ||||||
|     // 销毁前清除定时器 |     // 销毁前清除定时器 | ||||||
|     clearInterval(this.interval); |     clearInterval(this.interval); | ||||||
|   }, |   }, | ||||||
|   watch: { |   watch: { | ||||||
|     currIndex(val) { |     currIndex (val) { | ||||||
|       clearInterval(this.interval); |       clearInterval(this.interval); | ||||||
|       this.interval = null; |       this.interval = null; | ||||||
|       this.nowHour = new Date().getHours(); |       this.nowHour = new Date().getHours(); | ||||||
|       this.countDown(val); |       this.countDown(val); | ||||||
|       this.goodsList = this.list[val].seckillGoodsList; |       this.goodsList = this.list[val].seckillGoodsList; | ||||||
|     }, |     }, | ||||||
|     diffSeconds(val) { |     diffSeconds (val) { | ||||||
|       const hours = Math.floor(val / 3600); |       const hours = Math.floor(val / 3600); | ||||||
|       // 当前秒数 / 60,向下取整 |       // 当前秒数 / 60,向下取整 | ||||||
|       // 获取到所有分钟数 3600 / 60 = 60分钟 |       // 获取到所有分钟数 3600 / 60 = 60分钟 | ||||||
|  | @ -138,7 +114,7 @@ export default { | ||||||
|         clearInterval(this.interval); |         clearInterval(this.interval); | ||||||
|         this.interval = null; |         this.interval = null; | ||||||
|       } |       } | ||||||
|       function filteTime(time) { |       function filteTime (time) { | ||||||
|         if (time < 10) { |         if (time < 10) { | ||||||
|           return "0" + time; |           return "0" + time; | ||||||
|         } else { |         } else { | ||||||
|  | @ -148,7 +124,7 @@ export default { | ||||||
|     }, |     }, | ||||||
|   }, |   }, | ||||||
|   methods: { |   methods: { | ||||||
|     getListByDay() { |     getListByDay () { | ||||||
|       // 当天秒杀活动 |       // 当天秒杀活动 | ||||||
|       seckillByDay().then((res) => { |       seckillByDay().then((res) => { | ||||||
|         if (res.success) { |         if (res.success) { | ||||||
|  | @ -158,7 +134,7 @@ export default { | ||||||
|         } |         } | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|     goGoodsDetail(skuId, goodsId) { |     goGoodsDetail (skuId, goodsId) { | ||||||
|       // 跳转商品详情 |       // 跳转商品详情 | ||||||
|       let routeUrl = this.$router.resolve({ |       let routeUrl = this.$router.resolve({ | ||||||
|         path: "/goodsDetail", |         path: "/goodsDetail", | ||||||
|  | @ -166,7 +142,7 @@ export default { | ||||||
|       }); |       }); | ||||||
|       window.open(routeUrl.href, "_blank"); |       window.open(routeUrl.href, "_blank"); | ||||||
|     }, |     }, | ||||||
|     countDown(currIndex) { |     countDown (currIndex) { | ||||||
|       // 倒计时 |       // 倒计时 | ||||||
|       // 0点时间戳 |       // 0点时间戳 | ||||||
|       let zeroTime = new Date(new Date().toLocaleDateString()).getTime(); |       let zeroTime = new Date(new Date().toLocaleDateString()).getTime(); | ||||||
|  | @ -191,13 +167,14 @@ export default { | ||||||
|       }, 1000); |       }, 1000); | ||||||
|     }, |     }, | ||||||
|   }, |   }, | ||||||
|   mounted() { |   mounted () { | ||||||
|     this.getListByDay(); |     this.getListByDay(); | ||||||
|   }, |   }, | ||||||
| }; | }; | ||||||
| </script> | </script> | ||||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||||
| @import "../../assets/styles/goodsList.scss"; | @import "../../assets/styles/goodsList.scss"; | ||||||
|  | 
 | ||||||
| .goods-seckill-btn { | .goods-seckill-btn { | ||||||
|   position: absolute; |   position: absolute; | ||||||
|   right: 0; |   right: 0; | ||||||
|  | @ -212,19 +189,23 @@ export default { | ||||||
|   margin-bottom: 1px; |   margin-bottom: 1px; | ||||||
|   margin-right: 1px; |   margin-right: 1px; | ||||||
| } | } | ||||||
|  | 
 | ||||||
| .goods-seckill-btn-gray { | .goods-seckill-btn-gray { | ||||||
|   background-color: #666; |   background-color: #666; | ||||||
| } | } | ||||||
|  | 
 | ||||||
| .promotion-decorate::before, | .promotion-decorate::before, | ||||||
| .promotion-decorate::after { | .promotion-decorate::after { | ||||||
|   background-image: url("/src/assets/images/sprite@2x.png"); |   background-image: url("/src/assets/images/sprite@2x.png"); | ||||||
| } | } | ||||||
|  | 
 | ||||||
| .time-line { | .time-line { | ||||||
|   width: 1200px; |   width: 1200px; | ||||||
|   height: 60px; |   height: 60px; | ||||||
|   margin: 0 auto; |   margin: 0 auto; | ||||||
|   background-color: #fff; |   background-color: #fff; | ||||||
|   display: flex; |   display: flex; | ||||||
|  | 
 | ||||||
|   li { |   li { | ||||||
|     padding: 0 30px; |     padding: 0 30px; | ||||||
|     font-size: 16px; |     font-size: 16px; | ||||||
|  | @ -233,9 +214,11 @@ export default { | ||||||
|     height: 100%; |     height: 100%; | ||||||
|     display: flex; |     display: flex; | ||||||
|     align-items: center; |     align-items: center; | ||||||
|  | 
 | ||||||
|     &:hover { |     &:hover { | ||||||
|       cursor: pointer; |       cursor: pointer; | ||||||
|     } |     } | ||||||
|  | 
 | ||||||
|     .not-curr { |     .not-curr { | ||||||
|       border: 1px solid #999; |       border: 1px solid #999; | ||||||
|       border-radius: 20px; |       border-radius: 20px; | ||||||
|  | @ -245,18 +228,22 @@ export default { | ||||||
|       font-weight: normal; |       font-weight: normal; | ||||||
|     } |     } | ||||||
|   } |   } | ||||||
|  | 
 | ||||||
|   .currTimeline { |   .currTimeline { | ||||||
|     background-color: $theme_color; |     background-color: $theme_color; | ||||||
|     color: #fff; |     color: #fff; | ||||||
|     > div:nth-child(1) { | 
 | ||||||
|  |     >div:nth-child(1) { | ||||||
|       font-size: 20px; |       font-size: 20px; | ||||||
|     } |     } | ||||||
|     > div:nth-child(2) { | 
 | ||||||
|  |     >div:nth-child(2) { | ||||||
|       font-size: 14px; |       font-size: 14px; | ||||||
|       margin-left: 10px; |       margin-left: 10px; | ||||||
|     } |     } | ||||||
|   } |   } | ||||||
| } | } | ||||||
|  | 
 | ||||||
| .goods-show-info1 { | .goods-show-info1 { | ||||||
|   width: 290px; |   width: 290px; | ||||||
|   padding: 6px; |   padding: 6px; | ||||||
|  | @ -267,14 +254,17 @@ export default { | ||||||
|   cursor: pointer; |   cursor: pointer; | ||||||
|   background-color: #fff; |   background-color: #fff; | ||||||
| } | } | ||||||
|  | 
 | ||||||
| .goods-show-info1:hover { | .goods-show-info1:hover { | ||||||
|   border: 1px solid #ccc; |   border: 1px solid #ccc; | ||||||
|   box-shadow: 0px 0px 15px #ccc; |   box-shadow: 0px 0px 15px #ccc; | ||||||
| } | } | ||||||
|  | 
 | ||||||
| .goods-show-img { | .goods-show-img { | ||||||
|   display: flex; |   display: flex; | ||||||
|   justify-content: center; |   justify-content: center; | ||||||
| } | } | ||||||
|  | 
 | ||||||
| .ivu-progress-success .ivu-progress-bg { | .ivu-progress-success .ivu-progress-bg { | ||||||
|   background-color: #111fff; |   background-color: #111fff; | ||||||
| } | } | ||||||
|  |  | ||||||
|  | @ -14,7 +14,7 @@ | ||||||
|           <Poptip slot="append" transfer trigger="hover" title="图片预览" placement="right"> |           <Poptip slot="append" transfer trigger="hover" title="图片预览" placement="right"> | ||||||
|             <Icon type="md-eye" class="see-icon" /> |             <Icon type="md-eye" class="see-icon" /> | ||||||
|             <div slot="content"> |             <div slot="content"> | ||||||
|               <img :src="currentValue" alt="该资源不存在" style="width: 100%;margin: 0 auto;display: block;" /> |               <img :src="currentValue" alt="该资源不存在" style="max-width: 300px;margin: 0 auto;display: block;" /> | ||||||
|               <a @click="viewImage=true" style="margin-top:5px;text-align:right;display:block">查看大图</a> |               <a @click="viewImage=true" style="margin-top:5px;text-align:right;display:block">查看大图</a> | ||||||
|             </div> |             </div> | ||||||
|           </Poptip> |           </Poptip> | ||||||
|  | @ -40,7 +40,7 @@ | ||||||
|     </div> |     </div> | ||||||
| 
 | 
 | ||||||
|     <Modal title="图片预览" v-model="viewImage" :styles="{top: '30px'}" draggable> |     <Modal title="图片预览" v-model="viewImage" :styles="{top: '30px'}" draggable> | ||||||
|       <img :src="currentValue" alt="该资源不存在" style="width: 100%;margin: 0 auto;display: block;" /> |       <img :src="currentValue" alt="该资源不存在" style="max-width: 300px;margin: 0 auto;display: block;" /> | ||||||
|       <div slot="footer"> |       <div slot="footer"> | ||||||
|         <Button @click="viewImage=false">关闭</Button> |         <Button @click="viewImage=false">关闭</Button> | ||||||
|       </div> |       </div> | ||||||
|  |  | ||||||
|  | @ -26,11 +26,10 @@ | ||||||
|         <FormItem label="规格名称" prop="specName"> |         <FormItem label="规格名称" prop="specName"> | ||||||
|           <Input v-model="form.specName" maxlength="30" clearable style="width: 100%" /> |           <Input v-model="form.specName" maxlength="30" clearable style="width: 100%" /> | ||||||
|         </FormItem> |         </FormItem> | ||||||
|         {{ form }} |  | ||||||
|         <FormItem label="规格值" prop="specValue"> |         <FormItem label="规格值" prop="specValue"> | ||||||
|           <Select v-model="form.specValue" placeholder="输入后回车添加" multiple filterable allow-create |           <Select v-model="form.specValue" placeholder="输入后回车添加" multiple filterable allow-create | ||||||
|             :popper-append-to-body="false" popper-class="spec-values-popper" |             :popper-append-to-body="false" popper-class="spec-values-popper" | ||||||
|             style="width: 100%; text-align: left; margin-right: 10px"> |             style="width: 100%; text-align: left; margin-right: 10px" @on-create="handleCreate2"> | ||||||
|             <Option v-for="item in specValue" :value="item" :label="item" :key="item"> |             <Option v-for="item in specValue" :value="item" :label="item" :key="item"> | ||||||
|             </Option> |             </Option> | ||||||
|           </Select> |           </Select> | ||||||
|  | @ -51,7 +50,7 @@ import { regular } from "@/utils"; | ||||||
| export default { | export default { | ||||||
|   name: "spec", |   name: "spec", | ||||||
|   components: {}, |   components: {}, | ||||||
|   data() { |   data () { | ||||||
|     return { |     return { | ||||||
|       loading: true, // 表单加载状态 |       loading: true, // 表单加载状态 | ||||||
|       modalType: 0, // 添加或编辑标识 |       modalType: 0, // 添加或编辑标识 | ||||||
|  | @ -150,29 +149,32 @@ export default { | ||||||
|     }; |     }; | ||||||
|   }, |   }, | ||||||
|   methods: { |   methods: { | ||||||
|  |     handleCreate2 (v) { | ||||||
|  |       console.log(v); | ||||||
|  |     }, | ||||||
|     //初始化,获取数据 |     //初始化,获取数据 | ||||||
|     init() { |     init () { | ||||||
|       this.getDataList(); |       this.getDataList(); | ||||||
|     }, |     }, | ||||||
|     //修改分页 |     //修改分页 | ||||||
|     changePage(v) { |     changePage (v) { | ||||||
|       this.searchForm.pageNumber = v; |       this.searchForm.pageNumber = v; | ||||||
|       this.getDataList(); |       this.getDataList(); | ||||||
|       this.clearSelectAll(); |       this.clearSelectAll(); | ||||||
|     }, |     }, | ||||||
|     //修改页面大小 |     //修改页面大小 | ||||||
|     changePageSize(v) { |     changePageSize (v) { | ||||||
|       this.searchForm.pageSize = v; |       this.searchForm.pageSize = v; | ||||||
|       this.getDataList(); |       this.getDataList(); | ||||||
|     }, |     }, | ||||||
|     //搜索参数 |     //搜索参数 | ||||||
|     handleSearch() { |     handleSearch () { | ||||||
|       this.searchForm.pageNumber = 1; |       this.searchForm.pageNumber = 1; | ||||||
|       this.searchForm.pageSize = 10; |       this.searchForm.pageSize = 10; | ||||||
|       this.getDataList(); |       this.getDataList(); | ||||||
|     }, |     }, | ||||||
|     //重置搜索参数 |     //重置搜索参数 | ||||||
|     handleReset() { |     handleReset () { | ||||||
|       this.$refs.searchForm.resetFields(); |       this.$refs.searchForm.resetFields(); | ||||||
|       this.searchForm.pageNumber = 1; |       this.searchForm.pageNumber = 1; | ||||||
|       this.searchForm.pageSize = 10; |       this.searchForm.pageSize = 10; | ||||||
|  | @ -180,7 +182,7 @@ export default { | ||||||
|       this.getDataList(); |       this.getDataList(); | ||||||
|     }, |     }, | ||||||
|     //更改排序 |     //更改排序 | ||||||
|     changeSort(e) { |     changeSort (e) { | ||||||
|       this.searchForm.sort = e.key; |       this.searchForm.sort = e.key; | ||||||
|       this.searchForm.order = e.order; |       this.searchForm.order = e.order; | ||||||
|       if (e.order === "normal") { |       if (e.order === "normal") { | ||||||
|  | @ -189,16 +191,16 @@ export default { | ||||||
|       this.getDataList(); |       this.getDataList(); | ||||||
|     }, |     }, | ||||||
|     //清除已选择 |     //清除已选择 | ||||||
|     clearSelectAll() { |     clearSelectAll () { | ||||||
|       this.$refs.table.selectAll(false); |       this.$refs.table.selectAll(false); | ||||||
|     }, |     }, | ||||||
|     //修改已选择 |     //修改已选择 | ||||||
|     changeSelect(e) { |     changeSelect (e) { | ||||||
|       this.selectList = e; |       this.selectList = e; | ||||||
|       this.selectCount = e.length; |       this.selectCount = e.length; | ||||||
|     }, |     }, | ||||||
|     //获取数据 |     //获取数据 | ||||||
|     getDataList() { |     getDataList () { | ||||||
|       this.loading = true; |       this.loading = true; | ||||||
|       // 带多条件搜索参数获取表单数据 请自行修改接口 |       // 带多条件搜索参数获取表单数据 请自行修改接口 | ||||||
|       getSpecListData(this.searchForm).then((res) => { |       getSpecListData(this.searchForm).then((res) => { | ||||||
|  | @ -211,7 +213,7 @@ export default { | ||||||
|       this.loading = false; |       this.loading = false; | ||||||
|     }, |     }, | ||||||
|     //新增规格 |     //新增规格 | ||||||
|     saveSpec() { |     saveSpec () { | ||||||
|       this.$refs.form.validate((valid) => { |       this.$refs.form.validate((valid) => { | ||||||
|         if (valid) { |         if (valid) { | ||||||
|           this.submitLoading = true; |           this.submitLoading = true; | ||||||
|  | @ -246,7 +248,7 @@ export default { | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|     //弹出添加框 |     //弹出添加框 | ||||||
|     add() { |     add () { | ||||||
|       this.modalType = 0; |       this.modalType = 0; | ||||||
|       this.modalTitle = "添加"; |       this.modalTitle = "添加"; | ||||||
|       this.$refs.form.resetFields(); |       this.$refs.form.resetFields(); | ||||||
|  | @ -255,8 +257,7 @@ export default { | ||||||
|       this.modalVisible = true; |       this.modalVisible = true; | ||||||
|     }, |     }, | ||||||
|     //弹出编辑框 |     //弹出编辑框 | ||||||
|     edit(v) { |     edit (v) { | ||||||
|       console.log(v); |  | ||||||
|       this.modalType = 1; |       this.modalType = 1; | ||||||
|       this.modalTitle = "编辑"; |       this.modalTitle = "编辑"; | ||||||
|       // 转换null为"" |       // 转换null为"" | ||||||
|  | @ -266,23 +267,21 @@ export default { | ||||||
|         } |         } | ||||||
|       } |       } | ||||||
|       let localVal = v.specValue; |       let localVal = v.specValue; | ||||||
|       console.log(localVal.split(",")) |  | ||||||
|       this.form.specName = v.specName; |       this.form.specName = v.specName; | ||||||
|       this.form.id = v.id; |       this.form.id = v.id; | ||||||
|       this.$nextTick(() => { |       // this.$nextTick(() => { | ||||||
|         this.$set(this.form, 'specValue', localVal.split(",")) |       //   this.$set(this.form, 'specValue', localVal.split(",")) | ||||||
|       }) |       // }) | ||||||
|        |       this.form.specValue = localVal.split(",") | ||||||
|       if (localVal && localVal.indexOf("," > 0)) { |       if (localVal && localVal.indexOf("," > 0)) { | ||||||
|         this.specValue = this.form.specValue; |         this.specValue = this.form.specValue; | ||||||
|       } else { |       } else { | ||||||
|         this.specValue = []; |         this.specValue = []; | ||||||
|       } |       } | ||||||
|       console.log("form.specValue", this.form); |  | ||||||
|       this.modalVisible = true; |       this.modalVisible = true; | ||||||
|     }, |     }, | ||||||
|     // 删除规格 |     // 删除规格 | ||||||
|     remove(v) { |     remove (v) { | ||||||
|       this.$Modal.confirm({ |       this.$Modal.confirm({ | ||||||
|         title: "确认删除", |         title: "确认删除", | ||||||
|         content: "您确认要删除 " + v.specName + " ?", |         content: "您确认要删除 " + v.specName + " ?", | ||||||
|  | @ -299,7 +298,7 @@ export default { | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|     // 批量删除 |     // 批量删除 | ||||||
|     delAll() { |     delAll () { | ||||||
|       if (this.selectCount <= 0) { |       if (this.selectCount <= 0) { | ||||||
|         this.$Message.warning("您还未选择要删除的数据"); |         this.$Message.warning("您还未选择要删除的数据"); | ||||||
|         return; |         return; | ||||||
|  | @ -327,7 +326,7 @@ export default { | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|   }, |   }, | ||||||
|   mounted() { |   mounted () { | ||||||
|     this.init(); |     this.init(); | ||||||
|   }, |   }, | ||||||
| }; | }; | ||||||
|  |  | ||||||
|  | @ -165,6 +165,8 @@ export default { | ||||||
|               return h("Tag", { props: { color: "green" } }, "审核通过"); |               return h("Tag", { props: { color: "green" } }, "审核通过"); | ||||||
|             } else if (params.row.applyStatus == "SUCCESS") { |             } else if (params.row.applyStatus == "SUCCESS") { | ||||||
|               return h("Tag", { props: { color: "blue" } }, "提现成功"); |               return h("Tag", { props: { color: "blue" } }, "提现成功"); | ||||||
|  |             } else if (params.row.applyStatus == "ERROR") { | ||||||
|  |               return h("Tag", { props: { color: "blue" } }, "提现失败"); | ||||||
|             } else { |             } else { | ||||||
|               return h("Tag", { props: { color: "red" } }, "审核拒绝"); |               return h("Tag", { props: { color: "red" } }, "审核拒绝"); | ||||||
|             } |             } | ||||||
|  | @ -249,6 +251,8 @@ export default { | ||||||
|         return "审核通过(提现成功)"; |         return "审核通过(提现成功)"; | ||||||
|       } else if (val === "FAIL_AUDITING") { |       } else if (val === "FAIL_AUDITING") { | ||||||
|         return "审核拒绝"; |         return "审核拒绝"; | ||||||
|  |       } else if (val === "ERROR") { | ||||||
|  |         return "提现失败"; | ||||||
|       } else { |       } else { | ||||||
|         return "未知状态"; |         return "未知状态"; | ||||||
|       } |       } | ||||||
|  |  | ||||||
|  | @ -325,6 +325,7 @@ export default { | ||||||
|   methods: { |   methods: { | ||||||
|     // 回调给父级 |     // 回调给父级 | ||||||
|     callback(val, index) { |     callback(val, index) { | ||||||
|  |       this.selectMember.forEach(item=>{item.___selected = false}) | ||||||
|       this.$set(val, "___selected", !val.___selected); |       this.$set(val, "___selected", !val.___selected); | ||||||
|       console.log(val.___selected); |       console.log(val.___selected); | ||||||
|       console.log(this.selectMember); |       console.log(this.selectMember); | ||||||
|  |  | ||||||
|  | @ -84,7 +84,7 @@ | ||||||
|             <dl> |             <dl> | ||||||
|               <dt>实际退款金额</dt> |               <dt>实际退款金额</dt> | ||||||
|               <dd> |               <dd> | ||||||
|                 <Input v-model="params.actualRefundPrice" style="width: 260px" /> |                 <InputNumber :min="0" v-model="params.actualRefundPrice" style="width: 260px" /> | ||||||
|               </dd> |               </dd> | ||||||
|             </dl> |             </dl> | ||||||
|             <dl> |             <dl> | ||||||
|  |  | ||||||
|  | @ -4,22 +4,10 @@ | ||||||
|       <Row @keydown.enter.native="handleSearch"> |       <Row @keydown.enter.native="handleSearch"> | ||||||
|         <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form"> |         <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form"> | ||||||
|           <Form-item label="订单号" prop="orderSn"> |           <Form-item label="订单号" prop="orderSn"> | ||||||
|             <Input |             <Input type="text" v-model="searchForm.orderSn" placeholder="请输入订单号" clearable style="width: 200px" /> | ||||||
|               type="text" |  | ||||||
|               v-model="searchForm.orderSn" |  | ||||||
|               placeholder="请输入订单号" |  | ||||||
|               clearable |  | ||||||
|               style="width: 200px" |  | ||||||
|             /> |  | ||||||
|           </Form-item> |           </Form-item> | ||||||
|           <Form-item label="会员名称" prop="buyerName"> |           <Form-item label="会员名称" prop="buyerName"> | ||||||
|             <Input |             <Input type="text" v-model="searchForm.buyerName" placeholder="请输入会员名称" clearable style="width: 200px" /> | ||||||
|               type="text" |  | ||||||
|               v-model="searchForm.buyerName" |  | ||||||
|               placeholder="请输入会员名称" |  | ||||||
|               clearable |  | ||||||
|               style="width: 200px" |  | ||||||
|             /> |  | ||||||
|           </Form-item> |           </Form-item> | ||||||
|           <Form-item label="订单状态" prop="orderStatus"> |           <Form-item label="订单状态" prop="orderStatus"> | ||||||
|             <Select v-model="searchForm.orderStatus" placeholder="请选择" clearable style="width: 200px"> |             <Select v-model="searchForm.orderStatus" placeholder="请选择" clearable style="width: 200px"> | ||||||
|  | @ -32,54 +20,30 @@ | ||||||
|             </Select> |             </Select> | ||||||
|           </Form-item> |           </Form-item> | ||||||
|           <Form-item label="下单时间"> |           <Form-item label="下单时间"> | ||||||
|             <DatePicker |             <DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd" clearable | ||||||
|               v-model="selectDate" |               @on-change="selectDateRange" placeholder="选择起始时间" style="width: 200px"></DatePicker> | ||||||
|               type="datetimerange" |  | ||||||
|               format="yyyy-MM-dd" |  | ||||||
|               clearable |  | ||||||
|               @on-change="selectDateRange" |  | ||||||
|               placeholder="选择起始时间"  |  | ||||||
|               style="width: 200px" |  | ||||||
|             ></DatePicker> |  | ||||||
|           </Form-item> |           </Form-item> | ||||||
|           <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button> |           <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button> | ||||||
| 
 | 
 | ||||||
|         </Form> |         </Form> | ||||||
|       </Row> |       </Row> | ||||||
|       <Table |       <Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10" sortable="custom" | ||||||
|         :loading="loading" |         @on-sort-change="changeSort"></Table> | ||||||
|         border |  | ||||||
|         :columns="columns" |  | ||||||
|         :data="data" |  | ||||||
|         ref="table" |  | ||||||
|         class="mt_10" |  | ||||||
|         sortable="custom" |  | ||||||
|         @on-sort-change="changeSort" |  | ||||||
|       ></Table> |  | ||||||
|       <Row type="flex" justify="end" class="mt_10"> |       <Row type="flex" justify="end" class="mt_10"> | ||||||
|         <Page |         <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" | ||||||
|           :current="searchForm.pageNumber" |           @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total show-elevator | ||||||
|           :total="total" |           show-sizer></Page> | ||||||
|           :page-size="searchForm.pageSize" |  | ||||||
|           @on-change="changePage" |  | ||||||
|           @on-page-size-change="changePageSize" |  | ||||||
|           :page-size-opts="[10, 20, 50]" |  | ||||||
|           size="small" |  | ||||||
|           show-total |  | ||||||
|           show-elevator |  | ||||||
|           show-sizer |  | ||||||
|         ></Page> |  | ||||||
|       </Row> |       </Row> | ||||||
|     </Card> |     </Card> | ||||||
|   </div> |   </div> | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
| <script> | <script> | ||||||
|   import * as API_Order from "@/api/order"; | import * as API_Order from "@/api/order"; | ||||||
| 
 | 
 | ||||||
|   export default { | export default { | ||||||
|   name: "fictitiousOrderList", |   name: "fictitiousOrderList", | ||||||
|     data() { |   data () { | ||||||
|     return { |     return { | ||||||
|       loading: true, // 表单加载状态 |       loading: true, // 表单加载状态 | ||||||
|       searchForm: { |       searchForm: { | ||||||
|  | @ -148,18 +112,18 @@ | ||||||
|         { |         { | ||||||
|           title: "订单状态", |           title: "订单状态", | ||||||
|           key: "orderStatus", |           key: "orderStatus", | ||||||
|             width:95, |           width: 95, | ||||||
|           render: (h, params) => { |           render: (h, params) => { | ||||||
|             if (params.row.orderStatus == "UNPAID") { |             if (params.row.orderStatus == "UNPAID") { | ||||||
|                 return h("div", [h("tag", {props: {color: "magenta"}}, "未付款")]); |               return h("div", [h("tag", { props: { color: "magenta" } }, "未付款")]); | ||||||
|             } else if (params.row.orderStatus == "PAID") { |             } else if (params.row.orderStatus == "PAID") { | ||||||
|                 return h("div", [h("tag", {props: {color: "blue"}}, "已付款")]); |               return h("div", [h("tag", { props: { color: "blue" } }, "已付款")]); | ||||||
|             } else if (params.row.orderStatus == "COMPLETED") { |             } else if (params.row.orderStatus == "COMPLETED") { | ||||||
|                 return h("div", [h("tag", {props: {color: "green"}}, "已完成")]); |               return h("div", [h("tag", { props: { color: "green" } }, "已完成")]); | ||||||
|             } else if (params.row.orderStatus == "TAKE") { |             } else if (params.row.orderStatus == "TAKE") { | ||||||
|                 return h("div", [h("tag", {props: {color: "volcano"}}, "待核验")]); |               return h("div", [h("tag", { props: { color: "volcano" } }, "待核验")]); | ||||||
|             } else if (params.row.orderStatus == "CANCELLED") { |             } else if (params.row.orderStatus == "CANCELLED") { | ||||||
|                 return h("div", [h("tag", {props: {color: "red"}}, "已取消")]); |               return h("div", [h("tag", { props: { color: "red" } }, "已取消")]); | ||||||
|             } |             } | ||||||
|           } |           } | ||||||
|         }, |         }, | ||||||
|  | @ -221,28 +185,28 @@ | ||||||
|   }, |   }, | ||||||
|   methods: { |   methods: { | ||||||
|     // 初始化数据 |     // 初始化数据 | ||||||
|       init() { |     init () { | ||||||
|       this.getDataList(); |       this.getDataList(); | ||||||
|     }, |     }, | ||||||
|     // 分页 改变页码 |     // 分页 改变页码 | ||||||
|       changePage(v) { |     changePage (v) { | ||||||
|       this.searchForm.pageNumber = v; |       this.searchForm.pageNumber = v; | ||||||
|       this.getDataList(); |       this.getDataList(); | ||||||
|     }, |     }, | ||||||
|     // 分页 改变页数 |     // 分页 改变页数 | ||||||
|       changePageSize(v) { |     changePageSize (v) { | ||||||
|       this.searchForm.pageNumber = 1; |       this.searchForm.pageNumber = 1; | ||||||
|       this.searchForm.pageSize = v; |       this.searchForm.pageSize = v; | ||||||
|       this.getDataList(); |       this.getDataList(); | ||||||
|     }, |     }, | ||||||
|     // 搜索 |     // 搜索 | ||||||
|       handleSearch() { |     handleSearch () { | ||||||
|       this.searchForm.pageNumber = 1; |       this.searchForm.pageNumber = 1; | ||||||
|       this.searchForm.pageSize = 10; |       this.searchForm.pageSize = 10; | ||||||
|       this.getDataList(); |       this.getDataList(); | ||||||
|     }, |     }, | ||||||
|     // 列表排序 |     // 列表排序 | ||||||
|       changeSort(e) { |     changeSort (e) { | ||||||
|       this.searchForm.sort = e.key; |       this.searchForm.sort = e.key; | ||||||
|       this.searchForm.order = e.order; |       this.searchForm.order = e.order; | ||||||
|       if (e.order === "normal") { |       if (e.order === "normal") { | ||||||
|  | @ -251,14 +215,14 @@ | ||||||
|       this.getDataList(); |       this.getDataList(); | ||||||
|     }, |     }, | ||||||
|     // 起止时间从新赋值 |     // 起止时间从新赋值 | ||||||
|       selectDateRange(v) { |     selectDateRange (v) { | ||||||
|       if (v) { |       if (v) { | ||||||
|         this.searchForm.startDate = v[0]; |         this.searchForm.startDate = v[0]; | ||||||
|         this.searchForm.endDate = v[1]; |         this.searchForm.endDate = v[1]; | ||||||
|       } |       } | ||||||
|     }, |     }, | ||||||
|     // 获取列表数据 |     // 获取列表数据 | ||||||
|       getDataList() { |     getDataList () { | ||||||
|       this.loading = true; |       this.loading = true; | ||||||
|       API_Order.getOrderList(this.searchForm).then((res) => { |       API_Order.getOrderList(this.searchForm).then((res) => { | ||||||
|         this.loading = false; |         this.loading = false; | ||||||
|  | @ -271,14 +235,14 @@ | ||||||
|       this.loading = false; |       this.loading = false; | ||||||
|     }, |     }, | ||||||
|     //确认收款 |     //确认收款 | ||||||
|       confirmPrice(v) { |     confirmPrice (v) { | ||||||
|       this.$Modal.confirm({ |       this.$Modal.confirm({ | ||||||
|         title: "确认收款", |         title: "确认收款", | ||||||
|         content: "您确定要收款吗?", |         content: "您确定要收款吗?", | ||||||
|         loading: true, |         loading: true, | ||||||
|         onOk: () => { |         onOk: () => { | ||||||
|           API_Order.orderPay(v.sn).then(res => { |           API_Order.orderPay(v.sn).then(res => { | ||||||
|               if(res.success){ |             if (res.success) { | ||||||
|               this.$Message.success("收款成功") |               this.$Message.success("收款成功") | ||||||
|               this.getDataList() |               this.getDataList() | ||||||
|             } |             } | ||||||
|  | @ -289,17 +253,18 @@ | ||||||
| 
 | 
 | ||||||
|     }, |     }, | ||||||
|     // 订单详情 |     // 订单详情 | ||||||
|       detail(v) { |     detail (v) { | ||||||
|  |       console.log(v.orderType); | ||||||
|       let sn = v.sn; |       let sn = v.sn; | ||||||
|       this.$router.push({ |       this.$router.push({ | ||||||
|         name: "order-detail", |         name: "order-detail", | ||||||
|           query: {sn: sn}, |         query: { sn: sn, orderType: v.orderType }, | ||||||
|       }); |       }); | ||||||
| 
 | 
 | ||||||
|     }, |     }, | ||||||
|   }, |   }, | ||||||
|     mounted() { |   mounted () { | ||||||
|     this.init(); |     this.init(); | ||||||
|   }, |   }, | ||||||
|   }; | }; | ||||||
| </script> | </script> | ||||||
|  |  | ||||||
|  | @ -4,24 +4,12 @@ | ||||||
|       <Card style="height: 60px"> |       <Card style="height: 60px"> | ||||||
|         <div style=""> |         <div style=""> | ||||||
|           <Button v-if="allowOperation.editPrice" @click="modifyPrice">调整价格</Button> |           <Button v-if="allowOperation.editPrice" @click="modifyPrice">调整价格</Button> | ||||||
|           <Button |           <Button v-if="allowOperation.editConsignee" @click="editAddress" type="primary" ghost>修改收货地址</Button> | ||||||
|             v-if="allowOperation.editConsignee" |           <Button v-if="allowOperation.cancel" @click="orderCancel" type="warning" ghost>订单取消</Button> | ||||||
|             @click="editAddress" |           <Button v-if="orderInfo.order.orderStatus === 'UNPAID'" @click="confirmPrice" type="primary">收款</Button> | ||||||
|             type="primary" |  | ||||||
|             ghost |  | ||||||
|             >修改收货地址</Button |  | ||||||
|           > |  | ||||||
|           <Button v-if="allowOperation.cancel" @click="orderCancel" type="warning" ghost |  | ||||||
|             >订单取消</Button |  | ||||||
|           > |  | ||||||
|           <Button |  | ||||||
|             v-if="orderInfo.order.orderStatus === 'UNPAID'" |  | ||||||
|             @click="confirmPrice" |  | ||||||
|             type="primary" |  | ||||||
|             >收款</Button |  | ||||||
|           > |  | ||||||
|           <Button @click="orderLog" type="info" ghost>订单日志</Button> |           <Button @click="orderLog" type="info" ghost>订单日志</Button> | ||||||
|           <Button @click="printOrder" type="primary" ghost style="float:right;">打印发货单</Button> |           <Button @click="printOrder" type="primary" ghost style="float:right;" | ||||||
|  |             v-if="$route.query.orderType != 'VIRTUAL'">打印发货单</Button> | ||||||
|         </div> |         </div> | ||||||
|       </Card> |       </Card> | ||||||
|       <Card class="mt_10 clearfix"> |       <Card class="mt_10 clearfix"> | ||||||
|  | @ -66,10 +54,8 @@ | ||||||
|             </div> |             </div> | ||||||
|           </div> |           </div> | ||||||
| 
 | 
 | ||||||
|           <div |           <div class="div-item" | ||||||
|             class="div-item" |             v-if="orderInfo.order.needReceipt == true && orderInfo.receipt && orderInfo.receipt.taxpayerId"> | ||||||
|             v-if="orderInfo.order.needReceipt == true && orderInfo.receipt &&  orderInfo.receipt.taxpayerId" |  | ||||||
|           > |  | ||||||
|             <div class="div-item-left">发票税号:</div> |             <div class="div-item-left">发票税号:</div> | ||||||
|             <div class="div-item-right"> |             <div class="div-item-right"> | ||||||
|               {{ orderInfo.receipt && orderInfo.receipt.taxpayerId ? orderInfo.receipt.taxpayerId : "暂无" }} |               {{ orderInfo.receipt && orderInfo.receipt.taxpayerId ? orderInfo.receipt.taxpayerId : "暂无" }} | ||||||
|  | @ -101,7 +87,7 @@ | ||||||
|           <div class="div-item" v-if="orderInfo.order.needReceipt == true"> |           <div class="div-item" v-if="orderInfo.order.needReceipt == true"> | ||||||
|             <div class="div-item-left">是否开票:</div> |             <div class="div-item-left">是否开票:</div> | ||||||
|             <div class="div-item-right"> |             <div class="div-item-right"> | ||||||
|               {{ orderInfo.receipt?(orderInfo.receipt.receiptStatus == 0 ? "未开" : "已开"):"空" }} |               {{ orderInfo.receipt ? (orderInfo.receipt.receiptStatus == 0 ? "未开" : "已开") : "空" }} | ||||||
|             </div> |             </div> | ||||||
|           </div> |           </div> | ||||||
|         </div> |         </div> | ||||||
|  | @ -127,12 +113,12 @@ | ||||||
|             <div class="div-item-right">{{ orderInfo.order.remark }}</div> |             <div class="div-item-right">{{ orderInfo.order.remark }}</div> | ||||||
|           </div> |           </div> | ||||||
| 
 | 
 | ||||||
|           <div class="div-item" v-if="orderInfo.order.needReceipt == false"> |           <!-- <div class="div-item" v-if="orderInfo.order.needReceipt == false"> | ||||||
|             <div class="div-item-left">发票信息:</div> |             <div class="div-item-left">发票信息:</div> | ||||||
|             <div class="div-item-right">暂无发票信息</div> |             <div class="div-item-right">暂无发票信息</div> | ||||||
|           </div> |           </div> --> | ||||||
| 
 | 
 | ||||||
|           <div class="div-item" v-if="orderInfo.order.needReceipt == true"> |           <!-- <div class="div-item" v-if="orderInfo.order.needReceipt == true"> | ||||||
|             <div class="div-item-left">发票抬头:</div> |             <div class="div-item-left">发票抬头:</div> | ||||||
|             <div class="div-item-right"> |             <div class="div-item-right"> | ||||||
|               {{ |               {{ | ||||||
|  | @ -141,10 +127,8 @@ | ||||||
|             </div> |             </div> | ||||||
|           </div> |           </div> | ||||||
| 
 | 
 | ||||||
|           <div |           <div class="div-item" | ||||||
|             class="div-item" |             v-if="orderInfo.order.needReceipt == true && orderInfo.receipt && orderInfo.receipt.taxpayerId"> | ||||||
|             v-if="orderInfo.order.needReceipt == true && orderInfo.receipt && orderInfo.receipt.taxpayerId" |  | ||||||
|           > |  | ||||||
|             <div class="div-item-left">发票税号:</div> |             <div class="div-item-left">发票税号:</div> | ||||||
|             <div class="div-item-right"> |             <div class="div-item-right"> | ||||||
|               {{ orderInfo.receipt && orderInfo.receipt.taxpayerId ? orderInfo.receipt.taxpayerId : "暂无" }} |               {{ orderInfo.receipt && orderInfo.receipt.taxpayerId ? orderInfo.receipt.taxpayerId : "暂无" }} | ||||||
|  | @ -176,11 +160,11 @@ | ||||||
|           <div class="div-item" v-if="orderInfo.order.needReceipt == true"> |           <div class="div-item" v-if="orderInfo.order.needReceipt == true"> | ||||||
|             <div class="div-item-left">是否开票:</div> |             <div class="div-item-left">是否开票:</div> | ||||||
|             <div class="div-item-right"> |             <div class="div-item-right"> | ||||||
|               {{ orderInfo.receipt?(orderInfo.receipt.receiptStatus == 0 ? "未开" : "已开"):"空" }} |               {{ orderInfo.receipt ? (orderInfo.receipt.receiptStatus == 0 ? "未开" : "已开") : "空" }} | ||||||
|             </div> |  | ||||||
|             </div> |             </div> | ||||||
|  |           </div> --> | ||||||
| 
 | 
 | ||||||
|           <div class="div-item"> |           <div class="div-item" v-if="$route.query.orderType != 'VIRTUAL'"> | ||||||
|             <div class="div-item-left">配送方式:</div> |             <div class="div-item-left">配送方式:</div> | ||||||
|             <div class="div-item-right"> |             <div class="div-item-right"> | ||||||
|               {{ orderInfo.deliveryMethodValue }} |               {{ orderInfo.deliveryMethodValue }} | ||||||
|  | @ -189,22 +173,12 @@ | ||||||
|         </div> |         </div> | ||||||
|       </Card> |       </Card> | ||||||
|       <Card class="mt_10"> |       <Card class="mt_10"> | ||||||
|         <Table |         <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"> | ||||||
|           :loading="loading" |  | ||||||
|           border |  | ||||||
|           :columns="columns" |  | ||||||
|           :data="data" |  | ||||||
|           ref="table" |  | ||||||
|           sortable="custom" |  | ||||||
|         > |  | ||||||
|           <!-- 商品栏目格式化 --> |           <!-- 商品栏目格式化 --> | ||||||
|           <template slot="goodsSlot" slot-scope="{ row }"> |           <template slot="goodsSlot" slot-scope="{ row }"> | ||||||
|             <div style="margin-top: 5px; height: 80px; display: flex"> |             <div style="margin-top: 5px; height: 80px; display: flex"> | ||||||
|               <div style=""> |               <div style=""> | ||||||
|                 <img |                 <img :src="row.image" style="height: 60px; margin-top: 1px; width: 60px" /> | ||||||
|                   :src="row.image" |  | ||||||
|                   style="height: 60px; margin-top: 1px; width: 60px" |  | ||||||
|                 /> |  | ||||||
|               </div> |               </div> | ||||||
| 
 | 
 | ||||||
|               <div style="margin-left: 13px"> |               <div style="margin-left: 13px"> | ||||||
|  | @ -216,28 +190,12 @@ | ||||||
|                     {{ key }} : {{ item }} |                     {{ key }} : {{ item }} | ||||||
|                   </span> |                   </span> | ||||||
|                 </span> |                 </span> | ||||||
|                 <Poptip |                 <Poptip trigger="hover" style="display: block" title="扫码在手机中查看" transfer> | ||||||
|                   trigger="hover" |  | ||||||
|                   style="display: block" |  | ||||||
|                   title="扫码在手机中查看" |  | ||||||
|                   transfer |  | ||||||
|                 > |  | ||||||
|                   <div slot="content"> |                   <div slot="content"> | ||||||
|                     <vue-qr |                     <vue-qr :text="wapLinkTo(row.goodsId, row.skuId)" :margin="0" colorDark="#000" colorLight="#fff" | ||||||
|                       :text="wapLinkTo(row.goodsId, row.skuId)" |                       :size="150"></vue-qr> | ||||||
|                       :margin="0" |  | ||||||
|                       colorDark="#000" |  | ||||||
|                       colorLight="#fff" |  | ||||||
|                       :size="150" |  | ||||||
|                     ></vue-qr> |  | ||||||
|                   </div> |                   </div> | ||||||
|                   <img |                   <img src="../../../assets/qrcode.svg" class="hover-pointer" width="20" height="20" alt="" /> | ||||||
|                     src="../../../assets/qrcode.svg" |  | ||||||
|                     class="hover-pointer" |  | ||||||
|                     width="20" |  | ||||||
|                     height="20" |  | ||||||
|                     alt="" |  | ||||||
|                   /> |  | ||||||
|                 </Poptip> |                 </Poptip> | ||||||
|               </div> |               </div> | ||||||
|             </div> |             </div> | ||||||
|  | @ -251,33 +209,31 @@ | ||||||
|                 orderInfo.order.priceDetailDTO.goodsPrice | unitPrice("¥") |                 orderInfo.order.priceDetailDTO.goodsPrice | unitPrice("¥") | ||||||
|               }}</span> |               }}</span> | ||||||
|             </li> |             </li> | ||||||
|             <li |             <li v-if=" | ||||||
|               v-if=" |  | ||||||
|               orderInfo.order.priceDetailDTO.discountPrice && |               orderInfo.order.priceDetailDTO.discountPrice && | ||||||
|               orderInfo.order.priceDetailDTO.discountPrice > 0 |               orderInfo.order.priceDetailDTO.discountPrice > 0 | ||||||
|               " |             "> | ||||||
|             > |  | ||||||
|               <span class="label">优惠金额:</span> |               <span class="label">优惠金额:</span> | ||||||
|               <span class="txt"> |               <span class="txt"> | ||||||
|                 {{ orderInfo.order.priceDetailDTO.discountPrice | unitPrice("¥") }} |                 {{ orderInfo.order.priceDetailDTO.discountPrice | unitPrice("¥") }} | ||||||
|               </span> |               </span> | ||||||
|             </li> |             </li> | ||||||
| 
 | 
 | ||||||
|             <li |             <li v-if=" | ||||||
|               v-if=" |  | ||||||
|               orderInfo.order.priceDetailDTO.couponPrice && |               orderInfo.order.priceDetailDTO.couponPrice && | ||||||
|               orderInfo.order.priceDetailDTO.couponPrice > 0 |               orderInfo.order.priceDetailDTO.couponPrice > 0 | ||||||
|               " |             "> | ||||||
|             > |  | ||||||
|               <span class="label">优惠券金额:</span> |               <span class="label">优惠券金额:</span> | ||||||
|               <span class="txt"> |               <span class="txt"> | ||||||
|                 {{ orderInfo.order.priceDetailDTO.couponPrice | unitPrice("¥") }} |                 {{ orderInfo.order.priceDetailDTO.couponPrice | unitPrice("¥") }} | ||||||
|               </span> |               </span> | ||||||
|             </li> |             </li> | ||||||
|             <li v-if="orderInfo.order.priceDetailDTO.discountPriceDetail != undefined && orderInfo.order.priceDetailDTO.discountPriceDetail && orderInfo.order.priceDetailDTO.discountPriceDetail != null && orderInfo.order.priceDetailDTO.discountPriceDetail != ''">       |             <li | ||||||
|  |               v-if="orderInfo.order.priceDetailDTO.discountPriceDetail != undefined && orderInfo.order.priceDetailDTO.discountPriceDetail && orderInfo.order.priceDetailDTO.discountPriceDetail != null && orderInfo.order.priceDetailDTO.discountPriceDetail != ''"> | ||||||
|               <div class="label"> |               <div class="label"> | ||||||
|                 <Poptip trigger="hover" placement="left" width="200"> |                 <Poptip trigger="hover" placement="left" width="200"> | ||||||
|                 <Icon v-if="typeList.length > 0"  type="ios-alert-outline" size="17" @click="getOrderPrice" color="#cc0000"/> |                   <Icon v-if="typeList.length > 0" type="ios-alert-outline" size="17" @click="getOrderPrice" | ||||||
|  |                     color="#cc0000" /> | ||||||
|                   <template #content> |                   <template #content> | ||||||
|                     <div class="api" style="text-align:left;"> |                     <div class="api" style="text-align:left;"> | ||||||
|                       <table> |                       <table> | ||||||
|  | @ -287,8 +243,8 @@ | ||||||
|                           </tr> |                           </tr> | ||||||
|                         </thead> |                         </thead> | ||||||
|                         <tbody> |                         <tbody> | ||||||
|                         <tr  v-for="(item,index) in typeList" :key="index"> |                           <tr v-for="(item, index) in typeList" :key="index"> | ||||||
|                             <td>{{item.promotionName}}:</td> |                             <td>{{ item.promotionName }}:</td> | ||||||
|                             <td>¥{{ item.discountPrice | unitPrice }}</td> |                             <td>¥{{ item.discountPrice | unitPrice }}</td> | ||||||
|                           </tr> |                           </tr> | ||||||
|                         </tbody> |                         </tbody> | ||||||
|  | @ -318,9 +274,7 @@ | ||||||
|             </li> |             </li> | ||||||
|             <li v-if="orderInfo.order.priceDetailDTO.updatePrice"> |             <li v-if="orderInfo.order.priceDetailDTO.updatePrice"> | ||||||
|               <span class="label">修改金额:</span> |               <span class="label">修改金额:</span> | ||||||
|               <span class="txt theme_color" |               <span class="txt theme_color">¥{{ orderInfo.order.priceDetailDTO.updatePrice | unitPrice }}</span> | ||||||
|                 >¥{{ orderInfo.order.priceDetailDTO.updatePrice | unitPrice }}</span |  | ||||||
|               > |  | ||||||
|             </li> |             </li> | ||||||
|             <li v-if="orderInfo.order.priceDetailDTO.payPoint != 0"> |             <li v-if="orderInfo.order.priceDetailDTO.payPoint != 0"> | ||||||
|               <span class="label">使用积分:</span> |               <span class="label">使用积分:</span> | ||||||
|  | @ -330,9 +284,7 @@ | ||||||
|             </li> |             </li> | ||||||
|             <li> |             <li> | ||||||
|               <span class="label">应付金额:</span> |               <span class="label">应付金额:</span> | ||||||
|               <span class="txt flowPrice" |               <span class="txt flowPrice">¥{{ orderInfo.order.priceDetailDTO.flowPrice | unitPrice }}</span> | ||||||
|                 >¥{{ orderInfo.order.priceDetailDTO.flowPrice | unitPrice }}</span |  | ||||||
|               > |  | ||||||
|             </li> |             </li> | ||||||
|           </ul> |           </ul> | ||||||
|         </div> |         </div> | ||||||
|  | @ -345,20 +297,10 @@ | ||||||
|         <span>修改金额</span> |         <span>修改金额</span> | ||||||
|       </p> |       </p> | ||||||
|       <div> |       <div> | ||||||
|         <Form |         <Form ref="modifyPriceForm" :model="modifyPriceForm" label-position="left" :label-width="70" | ||||||
|           ref="modifyPriceForm" |           :rules="modifyPriceValidate"> | ||||||
|           :model="modifyPriceForm" |  | ||||||
|           label-position="left" |  | ||||||
|           :label-width="70" |  | ||||||
|           :rules="modifyPriceValidate" |  | ||||||
|         > |  | ||||||
|           <FormItem label="订单金额" prop="price"> |           <FormItem label="订单金额" prop="price"> | ||||||
|             <InputNumber |             <InputNumber style="width: 100px" v-model="modifyPriceForm.price" :min="0" :max="999999"></InputNumber> | ||||||
|               style="width: 100px" |  | ||||||
|               v-model="modifyPriceForm.price" |  | ||||||
|               :min="0" |  | ||||||
|               :max="999999" |  | ||||||
|             ></InputNumber> |  | ||||||
|             <span class="ml_10">元</span> |             <span class="ml_10">元</span> | ||||||
|           </FormItem> |           </FormItem> | ||||||
|         </Form> |         </Form> | ||||||
|  | @ -375,20 +317,11 @@ | ||||||
|         <span>订单取消</span> |         <span>订单取消</span> | ||||||
|       </p> |       </p> | ||||||
|       <div> |       <div> | ||||||
|         <Form |         <Form ref="orderCancelForm" :model="orderCancelForm" label-position="left" :label-width="100" | ||||||
|           ref="orderCancelForm" |           :rules="orderCancelValidate"> | ||||||
|           :model="orderCancelForm" |  | ||||||
|           label-position="left" |  | ||||||
|           :label-width="100" |  | ||||||
|           :rules="orderCancelValidate" |  | ||||||
|         > |  | ||||||
|           <FormItem label="取消原因" prop="reason"> |           <FormItem label="取消原因" prop="reason"> | ||||||
|             <Input |             <Input v-model="orderCancelForm.reason" type="textarea" :autosize="{ minRows: 2, maxRows: 5 }" | ||||||
|               v-model="orderCancelForm.reason" |               placeholder="请输入取消原因"></Input> | ||||||
|               type="textarea" |  | ||||||
|               :autosize="{ minRows: 2, maxRows: 5 }" |  | ||||||
|               placeholder="请输入取消原因" |  | ||||||
|             ></Input> |  | ||||||
|           </FormItem> |           </FormItem> | ||||||
|         </Form> |         </Form> | ||||||
|       </div> |       </div> | ||||||
|  | @ -404,55 +337,22 @@ | ||||||
|         <span>修改收件信息</span> |         <span>修改收件信息</span> | ||||||
|       </p> |       </p> | ||||||
|       <div> |       <div> | ||||||
|         <Form |         <Form ref="addressForm" :model="addressForm" label-position="left" :label-width="100" :rules="addressRule"> | ||||||
|           ref="addressForm" |  | ||||||
|           :model="addressForm" |  | ||||||
|           label-position="left" |  | ||||||
|           :label-width="100" |  | ||||||
|           :rules="addressRule" |  | ||||||
|         > |  | ||||||
|           <FormItem label="收件人" prop="consigneeName"> |           <FormItem label="收件人" prop="consigneeName"> | ||||||
|             <Input |             <Input v-model="addressForm.consigneeName" size="large" maxlength="20"></Input> | ||||||
|               v-model="addressForm.consigneeName" |  | ||||||
|               size="large" |  | ||||||
|               maxlength="20" |  | ||||||
|             ></Input> |  | ||||||
|           </FormItem> |           </FormItem> | ||||||
|           <FormItem label="联系方式" prop="consigneeMobile"> |           <FormItem label="联系方式" prop="consigneeMobile"> | ||||||
|             <Input |             <Input v-model="addressForm.consigneeMobile" size="large" maxlength="11"></Input> | ||||||
|               v-model="addressForm.consigneeMobile" |  | ||||||
|               size="large" |  | ||||||
|               maxlength="11" |  | ||||||
|             ></Input> |  | ||||||
|           </FormItem> |           </FormItem> | ||||||
|           <FormItem label="地址信息" prop="consigneeAddressPath"> |           <FormItem label="地址信息" prop="consigneeAddressPath"> | ||||||
|             <Input |             <Input v-model="addr" disabled style="width: 305px" v-if="showRegion == false" /> | ||||||
|               v-model="addr" |             <Button v-if="showRegion == false" @click="regionClick" :loading="submitLoading" type="primary" | ||||||
|               disabled |               icon="ios-create-outline" style="margin-left: 8px">修改 | ||||||
|               style="width: 305px" |  | ||||||
|               v-if="showRegion == false" |  | ||||||
|             /> |  | ||||||
|             <Button |  | ||||||
|               v-if="showRegion == false" |  | ||||||
|               @click="regionClick" |  | ||||||
|               :loading="submitLoading" |  | ||||||
|               type="primary" |  | ||||||
|               icon="ios-create-outline" |  | ||||||
|               style="margin-left: 8px" |  | ||||||
|               >修改 |  | ||||||
|             </Button> |             </Button> | ||||||
|             <region |             <region style="width: 400px" @selected="selectedRegion" v-if="showRegion == true" /> | ||||||
|               style="width: 400px" |  | ||||||
|               @selected="selectedRegion" |  | ||||||
|               v-if="showRegion == true" |  | ||||||
|             /> |  | ||||||
|           </FormItem> |           </FormItem> | ||||||
|           <FormItem label="详细地址" prop="consigneeDetail"> |           <FormItem label="详细地址" prop="consigneeDetail"> | ||||||
|             <Input |             <Input v-model="addressForm.consigneeDetail" size="large" maxlength="50"></Input> | ||||||
|               v-model="addressForm.consigneeDetail" |  | ||||||
|               size="large" |  | ||||||
|               maxlength="50" |  | ||||||
|             ></Input> |  | ||||||
|           </FormItem> |           </FormItem> | ||||||
|         </Form> |         </Form> | ||||||
|       </div> |       </div> | ||||||
|  | @ -467,24 +367,20 @@ | ||||||
|         <span>订单日志</span> |         <span>订单日志</span> | ||||||
|       </p> |       </p> | ||||||
|       <div class="order-log-div"> |       <div class="order-log-div"> | ||||||
|         <Table |         <Table :loading="loading" border :columns="orderLogColumns" :data="orderInfo.orderLogs" ref="table" | ||||||
|           :loading="loading" |           sortable="custom"></Table> | ||||||
|           border |  | ||||||
|           :columns="orderLogColumns" |  | ||||||
|           :data="orderInfo.orderLogs" |  | ||||||
|           ref="table" |  | ||||||
|           sortable="custom" |  | ||||||
|         ></Table> |  | ||||||
|       </div> |       </div> | ||||||
| 
 | 
 | ||||||
|       <div slot="footer" style="text-align: right"> |       <div slot="footer" style="text-align: right"> | ||||||
|         <Button @click="handelCancel">取消</Button> |         <Button @click="handelCancel">取消</Button> | ||||||
|       </div> |       </div> | ||||||
|     </Modal> |     </Modal> | ||||||
|     <Modal v-model="printModal" width="530" @on-cancel="printCancel" > |     <Modal v-model="printModal" width="530" @on-cancel="printCancel"> | ||||||
|       <p slot="header" style="line-height:26px;height:26px;"> |       <p slot="header" style="line-height:26px;height:26px;"> | ||||||
|         <span style="float: left;">打印发货单</span> |         <span style="float: left;">打印发货单</span> | ||||||
|         <Button size="small" style="margin-right:35px;float: right;padding-bottom: 2px;" @click="printHiddenInfo"><template v-if="printHiddenFlag">显示</template><template v-else>隐藏</template>敏感信息</Button> |         <Button size="small" style="margin-right:35px;float: right;padding-bottom: 2px;" | ||||||
|  |           @click="printHiddenInfo"><template v-if="printHiddenFlag">显示</template><template | ||||||
|  |             v-else>隐藏</template>敏感信息</Button> | ||||||
|       </p> |       </p> | ||||||
|       <div style="max-height:500px;overflow-y:auto;overflow-x:hidden;"> |       <div style="max-height:500px;overflow-y:auto;overflow-x:hidden;"> | ||||||
|         <div id="printInfo"> |         <div id="printInfo"> | ||||||
|  | @ -498,22 +394,24 @@ | ||||||
|             <p class="lineH30 f14">收件人:{{ orderInfo.order.consigneeName }}</p> |             <p class="lineH30 f14">收件人:{{ orderInfo.order.consigneeName }}</p> | ||||||
|             </Col> |             </Col> | ||||||
|             <Col span="12" v-if="orderInfo.order.consigneeMobile"> |             <Col span="12" v-if="orderInfo.order.consigneeMobile"> | ||||||
|                 <p class="lineH30 f14" v-if="printHiddenFlag">手机号:{{ orderInfo.order.consigneeMobile.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")  }}</p> |             <p class="lineH30 f14" v-if="printHiddenFlag">手机号:{{ | ||||||
|  |               orderInfo.order.consigneeMobile.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2") }}</p> | ||||||
|             <p class="lineH30 f14" v-else>手机号:{{ orderInfo.order.consigneeMobile }}</p> |             <p class="lineH30 f14" v-else>手机号:{{ orderInfo.order.consigneeMobile }}</p> | ||||||
|             </Col> |             </Col> | ||||||
|           </Row> |           </Row> | ||||||
|           <Row> |           <Row> | ||||||
|             <Col span="24"> |             <Col span="24"> | ||||||
|                 <p class="lineH30 f14">收货地址:{{ orderInfo.order.consigneeAddressPath }}{{ orderInfo.order.consigneeDetail }}</p> |             <p class="lineH30 f14">收货地址:{{ orderInfo.order.consigneeAddressPath }}{{ orderInfo.order.consigneeDetail }} | ||||||
|  |             </p> | ||||||
|             </Col> |             </Col> | ||||||
|           </Row> |           </Row> | ||||||
|           <Row> |           <Row> | ||||||
|             <Col span="24"> |             <Col span="24"> | ||||||
|             <p class="printgoodtitle">商品信息</p> |             <p class="printgoodtitle">商品信息</p> | ||||||
|             <div class="printgoodinfo"> |             <div class="printgoodinfo"> | ||||||
|                   <div v-for="(item,index) in orderInfo.orderItems" :key="index" class="printgooditem"> |               <div v-for="(item, index) in orderInfo.orderItems" :key="index" class="printgooditem"> | ||||||
|                 <div class="printgoodname"> |                 <div class="printgoodname"> | ||||||
|                       <p>{{item.goodsName}}</p> |                   <p>{{ item.goodsName }}</p> | ||||||
|                   <div class="printgoodguid"> |                   <div class="printgoodguid"> | ||||||
|                     <span v-for="(itemchild, keychild) in JSON.parse(item.specs)" :key="keychild"> |                     <span v-for="(itemchild, keychild) in JSON.parse(item.specs)" :key="keychild"> | ||||||
|                       <span class="printgoodguiditem" v-if="keychild != 'images'"> |                       <span class="printgoodguiditem" v-if="keychild != 'images'"> | ||||||
|  | @ -522,7 +420,7 @@ | ||||||
|                     </span> |                     </span> | ||||||
|                   </div> |                   </div> | ||||||
|                 </div> |                 </div> | ||||||
|                     <span class="printgoodnumber">数量:{{item.num}}</span> |                 <span class="printgoodnumber">数量:{{ item.num }}</span> | ||||||
|               </div> |               </div> | ||||||
|             </div> |             </div> | ||||||
|             </Col> |             </Col> | ||||||
|  | @ -549,15 +447,15 @@ export default { | ||||||
|     region, |     region, | ||||||
|     "vue-qr": vueQr, |     "vue-qr": vueQr, | ||||||
|   }, |   }, | ||||||
|   data() { |   data () { | ||||||
|     return { |     return { | ||||||
|       typeList:[], |       typeList: [], | ||||||
|       showPrices:false, |       showPrices: false, | ||||||
|       printHiddenFlag:false,//隐藏信息 |       printHiddenFlag: false,//隐藏信息 | ||||||
|       printInfoObj:{ |       printInfoObj: { | ||||||
|         id: "printInfo",//要打印的id名 无#号 |         id: "printInfo",//要打印的id名 无#号 | ||||||
|         popTitle:' ',//页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言 |         popTitle: ' ',//页眉标题 默认浏览器标题 空字符串时显示undefined 使用html语言 | ||||||
|         extraHead:'',//头部文字 默认空 |         extraHead: '',//头部文字 默认空 | ||||||
|       }, |       }, | ||||||
|       loading: false, //加载表格 |       loading: false, //加载表格 | ||||||
|       submitLoading: false, // 添加或编辑提交状态 |       submitLoading: false, // 添加或编辑提交状态 | ||||||
|  | @ -612,7 +510,7 @@ export default { | ||||||
|         reason: [{ required: true, message: "取消原因不能为空", trigger: "blur" }], |         reason: [{ required: true, message: "取消原因不能为空", trigger: "blur" }], | ||||||
|       }, |       }, | ||||||
|       addressModal: false, //弹出修改收件信息框 |       addressModal: false, //弹出修改收件信息框 | ||||||
|       printModal:false, |       printModal: false, | ||||||
|       //收件地址表单 |       //收件地址表单 | ||||||
|       addressForm: { |       addressForm: { | ||||||
|         consigneeName: "", |         consigneeName: "", | ||||||
|  | @ -732,21 +630,21 @@ export default { | ||||||
|     }; |     }; | ||||||
|   }, |   }, | ||||||
|   watch: { |   watch: { | ||||||
|     $route(to, from) { |     $route (to, from) { | ||||||
|       this.$router.go(0); |       this.$router.go(0); | ||||||
|     }, |     }, | ||||||
|   }, |   }, | ||||||
|   methods: { |   methods: { | ||||||
|     gotoHomes(){ |     gotoHomes () { | ||||||
|       return false |       return false | ||||||
|     }, |     }, | ||||||
|     //修改地址 |     //修改地址 | ||||||
|     regionClick() { |     regionClick () { | ||||||
|       this.showRegion = true; |       this.showRegion = true; | ||||||
|       this.regionId = ""; |       this.regionId = ""; | ||||||
|     }, |     }, | ||||||
|     //确认收款 |     //确认收款 | ||||||
|     confirmPrice() { |     confirmPrice () { | ||||||
|       this.$Modal.confirm({ |       this.$Modal.confirm({ | ||||||
|         title: "提示", |         title: "提示", | ||||||
|         content: |         content: | ||||||
|  | @ -763,14 +661,14 @@ export default { | ||||||
|         }, |         }, | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|     getOrderPrice(){ |     getOrderPrice () { | ||||||
|       if(this.showPrices){ |       if (this.showPrices) { | ||||||
|         this.showPrices = false |         this.showPrices = false | ||||||
|       }else if(!this.showPrices){ |       } else if (!this.showPrices) { | ||||||
|         this.showPrices = true |         this.showPrices = true | ||||||
|       } |       } | ||||||
|     }, |     }, | ||||||
|     getContentPrice(){ |     getContentPrice () { | ||||||
|       for (let i = 0; i < this.typeList.length; i++) { |       for (let i = 0; i < this.typeList.length; i++) { | ||||||
|         for (let j = i + 1; j < this.typeList.length; j++) { |         for (let j = i + 1; j < this.typeList.length; j++) { | ||||||
|           if (this.typeList[i].promotionId === this.typeList[j].promotionId) { |           if (this.typeList[i].promotionId === this.typeList[j].promotionId) { | ||||||
|  | @ -780,13 +678,13 @@ export default { | ||||||
|         } |         } | ||||||
|       } |       } | ||||||
|       console.log(this.typeList) |       console.log(this.typeList) | ||||||
|         if(this.typeList.length >= 3){ |       if (this.typeList.length >= 3) { | ||||||
|         console.log(123123) |         console.log(123123) | ||||||
|         this.getContentPrice() |         this.getContentPrice() | ||||||
|       } |       } | ||||||
|     }, |     }, | ||||||
|     // 获取订单详情 |     // 获取订单详情 | ||||||
|     getDataList() { |     getDataList () { | ||||||
|       this.loading = true; |       this.loading = true; | ||||||
|       API_Order.orderDetail(this.sn).then((res) => { |       API_Order.orderDetail(this.sn).then((res) => { | ||||||
|         this.loading = false; |         this.loading = false; | ||||||
|  | @ -800,13 +698,13 @@ export default { | ||||||
|         } |         } | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|     modifyPrice() { |     modifyPrice () { | ||||||
|       //默认要修改的金额为订单总金额 |       //默认要修改的金额为订单总金额 | ||||||
|       this.modifyPriceForm.price = this.orderInfo.order.flowPrice; |       this.modifyPriceForm.price = this.orderInfo.order.flowPrice; | ||||||
|       this.modal = true; |       this.modal = true; | ||||||
|     }, |     }, | ||||||
|     //修改订单金额提交 |     //修改订单金额提交 | ||||||
|     modifyPriceSubmit() { |     modifyPriceSubmit () { | ||||||
|       this.$refs.modifyPriceForm.validate((valid) => { |       this.$refs.modifyPriceForm.validate((valid) => { | ||||||
|         if (valid) { |         if (valid) { | ||||||
|           API_Order.updateOrderPrice(this.sn, this.modifyPriceForm).then((res) => { |           API_Order.updateOrderPrice(this.sn, this.modifyPriceForm).then((res) => { | ||||||
|  | @ -820,16 +718,16 @@ export default { | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|     // 选中的地址 |     // 选中的地址 | ||||||
|     selectedRegion(val) { |     selectedRegion (val) { | ||||||
|       this.addr = val[1]; |       this.addr = val[1]; | ||||||
|       this.regionId = val[0]; |       this.regionId = val[0]; | ||||||
|     }, |     }, | ||||||
|     //订单取消 |     //订单取消 | ||||||
|     orderCancel() { |     orderCancel () { | ||||||
|       this.orderCancelModal = true; |       this.orderCancelModal = true; | ||||||
|     }, |     }, | ||||||
|     //订单取消提交 |     //订单取消提交 | ||||||
|     orderCancelSubmit() { |     orderCancelSubmit () { | ||||||
|       this.$refs.orderCancelForm.validate((valid) => { |       this.$refs.orderCancelForm.validate((valid) => { | ||||||
|         if (valid) { |         if (valid) { | ||||||
|           API_Order.orderCancel(this.sn, this.orderCancelForm).then((res) => { |           API_Order.orderCancel(this.sn, this.orderCancelForm).then((res) => { | ||||||
|  | @ -843,25 +741,25 @@ export default { | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|     //订单日志 |     //订单日志 | ||||||
|     orderLog() { |     orderLog () { | ||||||
|       this.orderLogModal = true; |       this.orderLogModal = true; | ||||||
|     }, |     }, | ||||||
|     //订单日志取消 |     //订单日志取消 | ||||||
|     handelCancel() { |     handelCancel () { | ||||||
|       this.orderLogModal = false; |       this.orderLogModal = false; | ||||||
|     }, |     }, | ||||||
|     //打印发货单 |     //打印发货单 | ||||||
|     printOrder(){ |     printOrder () { | ||||||
|       this.printModal = true; |       this.printModal = true; | ||||||
|     }, |     }, | ||||||
|     printHiddenInfo(){ |     printHiddenInfo () { | ||||||
|       this.printHiddenFlag = !this.printHiddenFlag; |       this.printHiddenFlag = !this.printHiddenFlag; | ||||||
|     }, |     }, | ||||||
|     printCancel(){ |     printCancel () { | ||||||
|       // this.printHiddenFlag = false; |       // this.printHiddenFlag = false; | ||||||
|     }, |     }, | ||||||
|     //弹出修改收货地址框 |     //弹出修改收货地址框 | ||||||
|     editAddress() { |     editAddress () { | ||||||
|       this.addressModal = true; |       this.addressModal = true; | ||||||
|       this.showRegion = false; |       this.showRegion = false; | ||||||
|       this.addr = this.orderInfo.order.consigneeAddressPath; |       this.addr = this.orderInfo.order.consigneeAddressPath; | ||||||
|  | @ -873,7 +771,7 @@ export default { | ||||||
|       this.addressForm.consigneeAddressIdPath = this.orderInfo.order.consigneeAddressIdPath; |       this.addressForm.consigneeAddressIdPath = this.orderInfo.order.consigneeAddressIdPath; | ||||||
|     }, |     }, | ||||||
|     //修改收货地址 |     //修改收货地址 | ||||||
|     editAddressSubmit() { |     editAddressSubmit () { | ||||||
|       if (this.regionId == "") { |       if (this.regionId == "") { | ||||||
|         this.$Message.error("请选择地址"); |         this.$Message.error("请选择地址"); | ||||||
|         return; |         return; | ||||||
|  | @ -893,16 +791,17 @@ export default { | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|   }, |   }, | ||||||
|   mounted() { |   mounted () { | ||||||
|     this.sn = this.$route.query.sn; |     this.sn = this.$route.query.sn; | ||||||
|     this.getDataList(); |     this.getDataList(); | ||||||
|   }, |   }, | ||||||
| }; | }; | ||||||
| </script> | </script> | ||||||
| <style lang="scss"> | <style lang="scss"> | ||||||
| .lineH30{ | .lineH30 { | ||||||
|   line-height: 30px; |   line-height: 30px; | ||||||
| } | } | ||||||
|  | 
 | ||||||
| .order-log-div { | .order-log-div { | ||||||
|   line-height: 30px; |   line-height: 30px; | ||||||
|   overflow-y: scroll; |   overflow-y: scroll; | ||||||
|  | @ -939,11 +838,11 @@ export default { | ||||||
|     line-height: 35px; |     line-height: 35px; | ||||||
|     display: flex; |     display: flex; | ||||||
| 
 | 
 | ||||||
|     > .div-item-left { |     >.div-item-left { | ||||||
|       width: 80px; |       width: 80px; | ||||||
|     } |     } | ||||||
| 
 | 
 | ||||||
|     > .div-item-right { |     >.div-item-right { | ||||||
|       flex: 1; |       flex: 1; | ||||||
|       word-break: break-all; |       word-break: break-all; | ||||||
|     } |     } | ||||||
|  | @ -1000,24 +899,28 @@ export default { | ||||||
|     } |     } | ||||||
|   } |   } | ||||||
| } | } | ||||||
| .f14{ | 
 | ||||||
|  | .f14 { | ||||||
|   font-size: 14px; |   font-size: 14px; | ||||||
|   color: #333; |   color: #333; | ||||||
| } | } | ||||||
| .printgoodtitle{ | 
 | ||||||
|  | .printgoodtitle { | ||||||
|   font-size: 14px; |   font-size: 14px; | ||||||
|   line-height: 1.5; |   line-height: 1.5; | ||||||
|   margin-top: 15px; |   margin-top: 15px; | ||||||
|   color: #333; |   color: #333; | ||||||
| } | } | ||||||
| .printgoodinfo{ | 
 | ||||||
|  | .printgoodinfo { | ||||||
|   // font-size: 14px; |   // font-size: 14px; | ||||||
|   // background: #f2f2f2; |   // background: #f2f2f2; | ||||||
|   // border-bottom:2px solid #333 ; |   // border-bottom:2px solid #333 ; | ||||||
|   padding: 10px; |   padding: 10px; | ||||||
|   overflow: hidden; |   overflow: hidden; | ||||||
|   color: #333; |   color: #333; | ||||||
|   .printgooditem{ | 
 | ||||||
|  |   .printgooditem { | ||||||
|     border-bottom: 1px solid #e8eaec; |     border-bottom: 1px solid #e8eaec; | ||||||
|     display: flex; |     display: flex; | ||||||
|     align-items: flex-start; |     align-items: flex-start; | ||||||
|  | @ -1025,35 +928,43 @@ export default { | ||||||
|     line-height: 30px; |     line-height: 30px; | ||||||
|     margin-bottom: 10px; |     margin-bottom: 10px; | ||||||
|     padding-bottom: 10px; |     padding-bottom: 10px; | ||||||
|     .printgoodname{ | 
 | ||||||
|  |     .printgoodname { | ||||||
|       flex: 1; |       flex: 1; | ||||||
|       overflow: hidden; |       overflow: hidden; | ||||||
|       .printgoodguid{ | 
 | ||||||
|  |       .printgoodguid { | ||||||
|         font-size: 12px; |         font-size: 12px; | ||||||
|         color:#999999; |         color: #999999; | ||||||
|         line-height:1.5; |         line-height: 1.5; | ||||||
|         .printgoodguiditem{ | 
 | ||||||
|  |         .printgoodguiditem { | ||||||
|           margin-right: 10px; |           margin-right: 10px; | ||||||
|         } |         } | ||||||
|       } |       } | ||||||
|     } |     } | ||||||
|     .printgoodprice{ | 
 | ||||||
|  |     .printgoodprice { | ||||||
|       width: 135px; |       width: 135px; | ||||||
|       margin-left: 15px; |       margin-left: 15px; | ||||||
|     } |     } | ||||||
|     .printgoodnumber{ | 
 | ||||||
|  |     .printgoodnumber { | ||||||
|       width: 85px; |       width: 85px; | ||||||
|       margin-left: 15px; |       margin-left: 15px; | ||||||
|     } |     } | ||||||
|   } |   } | ||||||
| } | } | ||||||
|  | 
 | ||||||
| @media print { | @media print { | ||||||
|   @page{ |   @page { | ||||||
|     size: auto; |     size: auto; | ||||||
|     margin: 3mm; |     margin: 3mm; | ||||||
|   } |   } | ||||||
|   html,body{ | 
 | ||||||
|     height:inherit; |   html, | ||||||
|  |   body { | ||||||
|  |     height: inherit; | ||||||
|   } |   } | ||||||
| } | } | ||||||
| </style> | </style> | ||||||
|  |  | ||||||
|  | @ -28,7 +28,8 @@ | ||||||
|                 </template> |                 </template> | ||||||
| 
 | 
 | ||||||
|                 <template slot-scope="{ index }" slot="settlementPrice"> |                 <template slot-scope="{ index }" slot="settlementPrice"> | ||||||
|                   <Input |                   <InputNumber | ||||||
|  |                     :min="0" | ||||||
|                     type="number" |                     type="number" | ||||||
|                     v-model="promotionGoodsList[index].settlementPrice" |                     v-model="promotionGoodsList[index].settlementPrice" | ||||||
|                   /> |                   /> | ||||||
|  | @ -54,10 +55,18 @@ | ||||||
|                   </Select> |                   </Select> | ||||||
|                 </template> |                 </template> | ||||||
|                 <template slot-scope="{ index }" slot="activeStock"> |                 <template slot-scope="{ index }" slot="activeStock"> | ||||||
|                   <Input type="number" v-model="promotionGoodsList[index].activeStock" /> |                   <InputNumber | ||||||
|  |                     :min="0" | ||||||
|  |                     type="number" | ||||||
|  |                     v-model="promotionGoodsList[index].activeStock" | ||||||
|  |                   /> | ||||||
|                 </template> |                 </template> | ||||||
|                 <template slot-scope="{ index }" slot="points"> |                 <template slot-scope="{ index }" slot="points"> | ||||||
|                   <Input type="number" v-model="promotionGoodsList[index].points" /> |                   <InputNumber | ||||||
|  |                     :min="0" | ||||||
|  |                     type="number" | ||||||
|  |                     v-model="promotionGoodsList[index].points" | ||||||
|  |                   /> | ||||||
|                 </template> |                 </template> | ||||||
|               </Table> |               </Table> | ||||||
|             </FormItem> |             </FormItem> | ||||||
|  | @ -370,8 +379,8 @@ export default { | ||||||
|           settlementPrice: e.settlementPrice || 0, |           settlementPrice: e.settlementPrice || 0, | ||||||
|           pointsGoodsCategoryId: e.pointsGoodsCategoryId || 0, |           pointsGoodsCategoryId: e.pointsGoodsCategoryId || 0, | ||||||
|           pointsGoodsCategoryName: e.pointsGoodsCategoryName || "", |           pointsGoodsCategoryName: e.pointsGoodsCategoryName || "", | ||||||
|           activeStock: e.activeStock || 0, |           activeStock: e.activeStock || 1, | ||||||
|           points: e.points || 0, |           points: e.points || 1, | ||||||
|           skuId: e.id, |           skuId: e.id, | ||||||
|           goodsId: e.goodsId, |           goodsId: e.goodsId, | ||||||
|           originalPrice: e.price || 0, |           originalPrice: e.price || 0, | ||||||
|  |  | ||||||
|  | @ -118,6 +118,7 @@ export default { | ||||||
|         settlementPrice: [{ required: true, message: "请填写结算价格" }], |         settlementPrice: [{ required: true, message: "请填写结算价格" }], | ||||||
|         pointsGoodsCategoryId: [{ required: true, message: "请选择积分商品分类" }], |         pointsGoodsCategoryId: [{ required: true, message: "请选择积分商品分类" }], | ||||||
|         points: [{ required: true, message: "请填写兑换积分" }], |         points: [{ required: true, message: "请填写兑换积分" }], | ||||||
|  |         activeStock: [{ required: true, message: "请填写库存" }], | ||||||
|       }, |       }, | ||||||
|       options: { |       options: { | ||||||
|         disabledDate(date) { |         disabledDate(date) { | ||||||
|  |  | ||||||
|  | @ -130,11 +130,11 @@ | ||||||
|         <div class="ant-col-md-6"> |         <div class="ant-col-md-6"> | ||||||
|           <p class="item"> |           <p class="item"> | ||||||
|             <span class="label">法人姓名:</span> |             <span class="label">法人姓名:</span> | ||||||
|             <span class="info">{{storeInfo.legalName}}人</span> |             <span class="info">{{storeInfo.legalName}}</span> | ||||||
|           </p> |           </p> | ||||||
|           <p class="item"> |           <p class="item"> | ||||||
|             <span class="label">法人身份证:</span> |             <span class="label">法人身份证:</span> | ||||||
|             <span class="info">{{storeInfo.legalId}}人</span> |             <span class="info">{{storeInfo.legalId}}</span> | ||||||
|           </p> |           </p> | ||||||
|           <p class="item"> |           <p class="item"> | ||||||
|             <span class="label">身份证照片:</span> |             <span class="label">身份证照片:</span> | ||||||
|  |  | ||||||
|  | @ -2,7 +2,7 @@ | ||||||
|   <div class="layout"> |   <div class="layout"> | ||||||
|     <Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate"> |     <Form ref="formValidate" :label-width="150" label-position="right" :model="formValidate" :rules="ruleValidate"> | ||||||
| 
 | 
 | ||||||
|       <FormItem label="平台" prop="endPoint"> |       <FormItem label="平台" > | ||||||
|         <RadioGroup v-model="formValidate.type" type="button"> |         <RadioGroup v-model="formValidate.type" type="button"> | ||||||
|           <Radio label="ALI_OSS">阿里OSS</Radio> |           <Radio label="ALI_OSS">阿里OSS</Radio> | ||||||
|           <Radio label="MINIO">MINIO</Radio> |           <Radio label="MINIO">MINIO</Radio> | ||||||
|  | @ -11,68 +11,68 @@ | ||||||
|         </RadioGroup> |         </RadioGroup> | ||||||
|       </FormItem> |       </FormItem> | ||||||
|       <!--      阿里云存储--> |       <!--      阿里云存储--> | ||||||
|       <FormItem v-if="formValidate.type==='ALI_OSS'" label="节点" prop="aliyunOSSEndPoint"> |       <FormItem v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSEndPoint" label="节点" prop="aliyunOSSEndPoint"> | ||||||
|         <Input v-model="formValidate.aliyunOSSEndPoint"/> |         <Input v-model="formValidate.aliyunOSSEndPoint"/> | ||||||
|       </FormItem> |       </FormItem> | ||||||
|       <FormItem v-if="formValidate.type==='ALI_OSS'" label="储存空间" class="label-item" prop="aliyunOSSBucketName"> |       <FormItem v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSBucketName" label="储存空间" class="label-item" prop="aliyunOSSBucketName"> | ||||||
|         <Input v-model="formValidate.aliyunOSSBucketName"/> |         <Input v-model="formValidate.aliyunOSSBucketName"/> | ||||||
|       </FormItem> |       </FormItem> | ||||||
|       <FormItem v-if="formValidate.type==='ALI_OSS'" label="存放路径路径" prop="aliyunOSSPicLocation"> |       <FormItem v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSPicLocation" label="存放路径路径" prop="aliyunOSSPicLocation"> | ||||||
|         <Input v-model="formValidate.aliyunOSSPicLocation"/> |         <Input v-model="formValidate.aliyunOSSPicLocation"/> | ||||||
|       </FormItem> |       </FormItem> | ||||||
|       <FormItem v-if="formValidate.type==='ALI_OSS'" label="密钥id" prop="aliyunOSSAccessKeyId"> |       <FormItem v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSAccessKeyId" label="密钥id" prop="aliyunOSSAccessKeyId"> | ||||||
|         <Input v-model="formValidate.aliyunOSSAccessKeyId"/> |         <Input v-model="formValidate.aliyunOSSAccessKeyId"/> | ||||||
|       </FormItem> |       </FormItem> | ||||||
|       <FormItem v-if="formValidate.type==='ALI_OSS'" label="密钥" prop="aliyunOSSAccessKeySecret"> |       <FormItem v-if="formValidate.type==='ALI_OSS'" key="aliyunOSSAccessKeySecret" label="密钥" prop="aliyunOSSAccessKeySecret"> | ||||||
|         <Input v-model="formValidate.aliyunOSSAccessKeySecret"/> |         <Input v-model="formValidate.aliyunOSSAccessKeySecret"/> | ||||||
|       </FormItem> |       </FormItem> | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|       <!--      MINIO存储--> |       <!--      MINIO存储--> | ||||||
| 
 | 
 | ||||||
|       <FormItem v-if="formValidate.type==='MINIO'" label="访问地址" prop="m_frontUrl"> |       <FormItem v-if="formValidate.type==='MINIO'" label="访问地址" key="m_frontUrl" prop="m_frontUrl"> | ||||||
|         <Input v-model="formValidate.m_frontUrl"/> |         <Input v-model="formValidate.m_frontUrl"/> | ||||||
|         <span class="desc">配置MINIO nginx前端访问转发地址,一般为完整域名,例如:https://minio.pickmall.cn</span> |         <span class="desc">配置MINIO nginx前端访问转发地址,一般为完整域名,例如:https://minio.pickmall.cn</span> | ||||||
|       </FormItem> |       </FormItem> | ||||||
|       <FormItem v-if="formValidate.type==='MINIO'" label="endpoint" prop="m_endpoint"> |       <FormItem v-if="formValidate.type==='MINIO'" label="endpoint" key="m_endpoint" prop="m_endpoint"> | ||||||
|         <Input v-model="formValidate.m_endpoint"/> |         <Input v-model="formValidate.m_endpoint"/> | ||||||
|       </FormItem> |       </FormItem> | ||||||
|       <FormItem v-if="formValidate.type==='MINIO'" label="accessKey" class="label-item" prop="m_accessKey"> |       <FormItem v-if="formValidate.type==='MINIO'" label="accessKey" key="m_accessKey" class="label-item" prop="m_accessKey"> | ||||||
|         <Input v-model="formValidate.m_accessKey"/> |         <Input v-model="formValidate.m_accessKey"/> | ||||||
|       </FormItem> |       </FormItem> | ||||||
|       <FormItem v-if="formValidate.type==='MINIO'" label="secretKey" prop="bucketName"> |       <FormItem v-if="formValidate.type==='MINIO'" label="secretKey" key="m_secretKey" prop="m_secretKey"> | ||||||
|         <Input v-model="formValidate.m_secretKey"/> |         <Input v-model="formValidate.m_secretKey"/> | ||||||
|       </FormItem> |       </FormItem> | ||||||
|       <FormItem v-if="formValidate.type==='MINIO'" label="bucketName" prop="accessKeyId"> |       <FormItem v-if="formValidate.type==='MINIO'" label="bucketName" key="m_bucketName" prop="m_bucketName"> | ||||||
|         <Input v-model="formValidate.m_bucketName"/> |         <Input v-model="formValidate.m_bucketName"/> | ||||||
|       </FormItem> |       </FormItem> | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|       <!--      华为云存储--> |       <!--      华为云存储--> | ||||||
|       <FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="发起者的Access Key" prop="huaweicloudOBSAccessKey"> |       <FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="发起者的Access Key" key="huaweicloudOBSAccessKey" prop="huaweicloudOBSAccessKey"> | ||||||
|         <Input v-model="formValidate.huaweicloudOBSAccessKey"/> |         <Input v-model="formValidate.huaweicloudOBSAccessKey"/> | ||||||
|       </FormItem> |       </FormItem> | ||||||
|       <FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="密钥" class="label-item" prop="huaweicloudOBSSecretKey"> |       <FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="密钥" class="label-item" key="huaweicloudOBSSecretKey" prop="huaweicloudOBSSecretKey"> | ||||||
|         <Input v-model="formValidate.huaweicloudOBSSecretKey"/> |         <Input v-model="formValidate.huaweicloudOBSSecretKey"/> | ||||||
|       </FormItem> |       </FormItem> | ||||||
|       <FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="节点" prop="huaweicloudOBSEndPoint"> |       <FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="节点" key="huaweicloudOBSEndPoint" prop="huaweicloudOBSEndPoint"> | ||||||
|         <Input v-model="formValidate.huaweicloudOBSEndPoint"/> |         <Input v-model="formValidate.huaweicloudOBSEndPoint"/> | ||||||
|       </FormItem> |       </FormItem> | ||||||
|       <FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="桶" prop="huaweicloudOBSBucketName"> |       <FormItem v-if="formValidate.type==='HUAWEI_OBS'" label="桶" key="huaweicloudOBSBucketName" prop="huaweicloudOBSBucketName"> | ||||||
|         <Input v-model="formValidate.huaweicloudOBSBucketName"/> |         <Input v-model="formValidate.huaweicloudOBSBucketName"/> | ||||||
|       </FormItem> |       </FormItem> | ||||||
| 
 | 
 | ||||||
|       <!--      腾讯云存储--> |       <!--      腾讯云存储--> | ||||||
|       <FormItem v-if="formValidate.type==='TENCENT_COS'" label="用户的SecretId" prop="tencentCOSSecretId"> |       <FormItem v-if="formValidate.type==='TENCENT_COS'" label="用户的SecretId" key="tencentCOSSecretId" prop="tencentCOSSecretId"> | ||||||
|         <Input v-model="formValidate.tencentCOSSecretId"/> |         <Input v-model="formValidate.tencentCOSSecretId"/> | ||||||
|       </FormItem> |       </FormItem> | ||||||
|       <FormItem v-if="formValidate.type==='TENCENT_COS'" label="用户的SecretKey" class="label-item" prop="tencentCOSSecretKey"> |       <FormItem v-if="formValidate.type==='TENCENT_COS'" label="用户的SecretKey" key="tencentCOSSecretKey" class="label-item" prop="tencentCOSSecretKey"> | ||||||
|         <Input v-model="formValidate.tencentCOSSecretKey"/> |         <Input v-model="formValidate.tencentCOSSecretKey"/> | ||||||
|       </FormItem> |       </FormItem> | ||||||
|       <FormItem v-if="formValidate.type==='TENCENT_COS'" label="bucket的地域" prop="tencentCOSRegion"> |       <FormItem v-if="formValidate.type==='TENCENT_COS'" label="bucket的地域" key="tencentCOSRegion" prop="tencentCOSRegion"> | ||||||
|         <Input v-model="formValidate.tencentCOSRegion"/> |         <Input v-model="formValidate.tencentCOSRegion"/> | ||||||
|       </FormItem> |       </FormItem> | ||||||
|       <FormItem v-if="formValidate.type==='TENCENT_COS'" label="bucket" prop="tencentCOSBucket"> |       <FormItem v-if="formValidate.type==='TENCENT_COS'" label="bucket" key="tencentCOSBucket" prop="tencentCOSBucket"> | ||||||
|         <Input v-model="formValidate.tencentCOSBucket"/> |         <Input v-model="formValidate.tencentCOSBucket"/> | ||||||
|       </FormItem> |       </FormItem> | ||||||
| 
 | 
 | ||||||
|  | @ -179,3 +179,4 @@ export default { | ||||||
|   color: #999; |   color: #999; | ||||||
| } | } | ||||||
| </style> | </style> | ||||||
|  | 
 | ||||||
|  |  | ||||||
|  | @ -94,7 +94,7 @@ | ||||||
|               <dl v-if="params.serviceStatus == 'PASS'"> |               <dl v-if="params.serviceStatus == 'PASS'"> | ||||||
|                 <dt>实际退款金额</dt> |                 <dt>实际退款金额</dt> | ||||||
|                 <dd> |                 <dd> | ||||||
|                   <Input v-model="params.actualRefundPrice" style="width:260px" /> |                   <InputNumber :min="0" v-model="params.actualRefundPrice" style="width:260px" /> | ||||||
|                 </dd> |                 </dd> | ||||||
|               </dl> |               </dl> | ||||||
|               <dl> |               <dl> | ||||||
|  |  | ||||||
|  | @ -487,7 +487,7 @@ export default { | ||||||
|     liliMap, |     liliMap, | ||||||
|     region, |     region, | ||||||
|   }, |   }, | ||||||
|   data() { |   data () { | ||||||
|     return { |     return { | ||||||
|       typeList: [], |       typeList: [], | ||||||
|       showPrices: false, |       showPrices: false, | ||||||
|  | @ -693,27 +693,27 @@ export default { | ||||||
|   }, |   }, | ||||||
|   methods: { |   methods: { | ||||||
|     //修改地址 |     //修改地址 | ||||||
|     regionClick() { |     regionClick () { | ||||||
|       this.showRegion = true; |       this.showRegion = true; | ||||||
|       this.regionId = ""; |       this.regionId = ""; | ||||||
|     }, |     }, | ||||||
|     //弹出订单核销框 |     //弹出订单核销框 | ||||||
|     orderTake() { |     orderTake () { | ||||||
|       this.orderTakeForm.qrCode = this.orderInfo.order.verificationCode; |       this.orderTakeForm.qrCode = this.orderInfo.order.verificationCode; | ||||||
|       this.orderTakeModal = true; |       this.orderTakeModal = true; | ||||||
|     }, |     }, | ||||||
|     //打印发货单 |     //打印发货单 | ||||||
|     printOrder() { |     printOrder () { | ||||||
|       this.printModal = true; |       this.printModal = true; | ||||||
|     }, |     }, | ||||||
|     printHiddenInfo() { |     printHiddenInfo () { | ||||||
|       this.printHiddenFlag = !this.printHiddenFlag; |       this.printHiddenFlag = !this.printHiddenFlag; | ||||||
|     }, |     }, | ||||||
|     printCancel() { |     printCancel () { | ||||||
|       // this.printHiddenFlag = false; |       // this.printHiddenFlag = false; | ||||||
|     }, |     }, | ||||||
|     //订单核销提交 |     //订单核销提交 | ||||||
|     orderTakeSubmit() { |     orderTakeSubmit () { | ||||||
|       this.$refs.orderTakeForm.validate((valid) => { |       this.$refs.orderTakeForm.validate((valid) => { | ||||||
|         if (valid) { |         if (valid) { | ||||||
|           API_Order.orderTake(this.sn, this.orderTakeForm.qrCode).then( |           API_Order.orderTake(this.sn, this.orderTakeForm.qrCode).then( | ||||||
|  | @ -728,14 +728,14 @@ export default { | ||||||
|         } |         } | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|     getOrderPrice() { |     getOrderPrice () { | ||||||
|       if (this.showPrices) { |       if (this.showPrices) { | ||||||
|         this.showPrices = false |         this.showPrices = false | ||||||
|       } else if (!this.showPrices) { |       } else if (!this.showPrices) { | ||||||
|         this.showPrices = true |         this.showPrices = true | ||||||
|       } |       } | ||||||
|     }, |     }, | ||||||
|     getContentPrice() { |     getContentPrice () { | ||||||
|       for (let i = 0; i < this.typeList.length; i++) { |       for (let i = 0; i < this.typeList.length; i++) { | ||||||
|         for (let j = i + 1; j < this.typeList.length; j++) { |         for (let j = i + 1; j < this.typeList.length; j++) { | ||||||
|           if (this.typeList[i].promotionId === this.typeList[j].promotionId) { |           if (this.typeList[i].promotionId === this.typeList[j].promotionId) { | ||||||
|  | @ -751,7 +751,7 @@ export default { | ||||||
|       } |       } | ||||||
|     }, |     }, | ||||||
|     //获取订单详细信息 |     //获取订单详细信息 | ||||||
|     getDataDetail() { |     getDataDetail () { | ||||||
|       this.loading = true; |       this.loading = true; | ||||||
|       API_Order.getOrderDetail(this.sn).then((res) => { |       API_Order.getOrderDetail(this.sn).then((res) => { | ||||||
|         this.loading = false; |         this.loading = false; | ||||||
|  | @ -766,7 +766,7 @@ export default { | ||||||
|         } |         } | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|     Toprint() { |     Toprint () { | ||||||
|       this.facesheetFlag = true; |       this.facesheetFlag = true; | ||||||
|       API_Logistics.getCheckedOn().then(res => { |       API_Logistics.getCheckedOn().then(res => { | ||||||
|         if (res.success) { |         if (res.success) { | ||||||
|  | @ -776,13 +776,13 @@ export default { | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|     // 修改订单金额 |     // 修改订单金额 | ||||||
|     modifyPrice() { |     modifyPrice () { | ||||||
|       //默认要修改的金额为订单总金额 |       //默认要修改的金额为订单总金额 | ||||||
|       this.modifyPriceForm.orderPrice = this.orderInfo.order.flowPrice; |       this.modifyPriceForm.orderPrice = this.orderInfo.order.flowPrice; | ||||||
|       this.modal = true; |       this.modal = true; | ||||||
|     }, |     }, | ||||||
|     //修改订单金额提交 |     //修改订单金额提交 | ||||||
|     modifyPriceSubmit() { |     modifyPriceSubmit () { | ||||||
|       this.$refs.modifyPriceForm.validate((valid) => { |       this.$refs.modifyPriceForm.validate((valid) => { | ||||||
|         if (valid) { |         if (valid) { | ||||||
|           API_Order.modifyOrderPrice(this.sn, this.modifyPriceForm).then( |           API_Order.modifyOrderPrice(this.sn, this.modifyPriceForm).then( | ||||||
|  | @ -798,12 +798,12 @@ export default { | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|     // 选中的地址 |     // 选中的地址 | ||||||
|     selectedRegion(val) { |     selectedRegion (val) { | ||||||
|       this.region = val[1]; |       this.region = val[1]; | ||||||
|       this.regionId = val[0]; |       this.regionId = val[0]; | ||||||
|     }, |     }, | ||||||
|     //查询物流 |     //查询物流 | ||||||
|     logistics() { |     logistics () { | ||||||
|       this.logisticsModal = true; |       this.logisticsModal = true; | ||||||
|       API_Order.getTraces(this.sn).then((res) => { |       API_Order.getTraces(this.sn).then((res) => { | ||||||
|         if (res.success && res.result != null) { |         if (res.success && res.result != null) { | ||||||
|  | @ -812,7 +812,7 @@ export default { | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|     //订单发货 |     //订单发货 | ||||||
|     orderDeliver() { |     orderDeliver () { | ||||||
|       this.facesheetFlag = false |       this.facesheetFlag = false | ||||||
|       if (this.logisticsType == 'SHUNFENG') { |       if (this.logisticsType == 'SHUNFENG') { | ||||||
|         this.$Modal.confirm({ |         this.$Modal.confirm({ | ||||||
|  | @ -839,7 +839,7 @@ export default { | ||||||
|       } |       } | ||||||
|     }, |     }, | ||||||
|     //顺丰打印面单 |     //顺丰打印面单 | ||||||
|     sfPrint() { |     sfPrint () { | ||||||
|       API_Order.getOrderFaceSheet(this.sn, this.faceSheetForm).then(res => { |       API_Order.getOrderFaceSheet(this.sn, this.faceSheetForm).then(res => { | ||||||
|         if (res.success) { |         if (res.success) { | ||||||
|           let headers = { |           let headers = { | ||||||
|  | @ -869,13 +869,13 @@ export default { | ||||||
|         } |         } | ||||||
|       }) |       }) | ||||||
|     }, |     }, | ||||||
|     Toprints() { |     Toprints () { | ||||||
|       if (this.form.logisticsId != null && this.form.logisticsId != '') { |       if (this.form.logisticsId != null && this.form.logisticsId != '') { | ||||||
|         this.orderDeliverModal = false; |         this.orderDeliverModal = false; | ||||||
|       } |       } | ||||||
|     }, |     }, | ||||||
|     //订单发货提交 |     //订单发货提交 | ||||||
|     orderDeliverySubmit() { |     orderDeliverySubmit () { | ||||||
|       if (this.facesheetFlag) { |       if (this.facesheetFlag) { | ||||||
|         this.$refs['faceSheetForm'].validate((valid) => { |         this.$refs['faceSheetForm'].validate((valid) => { | ||||||
|           if (valid) { |           if (valid) { | ||||||
|  | @ -904,7 +904,7 @@ export default { | ||||||
|       } |       } | ||||||
|     }, |     }, | ||||||
|     //弹出修改收货地址框 |     //弹出修改收货地址框 | ||||||
|     editAddress() { |     editAddress () { | ||||||
|       this.addressModal = true; |       this.addressModal = true; | ||||||
|       this.showRegion = false; |       this.showRegion = false; | ||||||
|       this.regionId = this.orderInfo.order.consigneeAddressIdPath; |       this.regionId = this.orderInfo.order.consigneeAddressIdPath; | ||||||
|  | @ -918,7 +918,7 @@ export default { | ||||||
|         this.orderInfo.order.consigneeAddressIdPath; |         this.orderInfo.order.consigneeAddressIdPath; | ||||||
|     }, |     }, | ||||||
|     //修改收货地址 |     //修改收货地址 | ||||||
|     editAddressSubmit() { |     editAddressSubmit () { | ||||||
|       if (this.regionId == "") { |       if (this.regionId == "") { | ||||||
|         this.$Message.error("请选择地址"); |         this.$Message.error("请选择地址"); | ||||||
|         return; |         return; | ||||||
|  | @ -940,7 +940,7 @@ export default { | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
| 
 | 
 | ||||||
|     getLogisticsSetting() { |     getLogisticsSetting () { | ||||||
|       API_Logistics.getLogisticsSetting().then(res => { |       API_Logistics.getLogisticsSetting().then(res => { | ||||||
|         if (res.success) { |         if (res.success) { | ||||||
|           this.logisticsType = res.result; |           this.logisticsType = res.result; | ||||||
|  | @ -949,13 +949,13 @@ export default { | ||||||
|     }, |     }, | ||||||
| 
 | 
 | ||||||
|   }, |   }, | ||||||
|   mounted() { |   mounted () { | ||||||
|     this.sn = this.$route.query.sn; |     this.sn = this.$route.query.sn; | ||||||
|     this.getDataDetail(); |     this.getDataDetail(); | ||||||
|     this.getLogisticsSetting(); |     this.getLogisticsSetting(); | ||||||
|   }, |   }, | ||||||
|   // 如果是从详情页返回列表页,修改列表页keepAlive为true,确保不刷新页面 |   // 如果是从详情页返回列表页,修改列表页keepAlive为true,确保不刷新页面 | ||||||
|   beforeRouteLeave(to, from, next) { |   beforeRouteLeave (to, from, next) { | ||||||
|     if (to.name === 'orderList' || to.name === 'virtualOrderList') { |     if (to.name === 'orderList' || to.name === 'virtualOrderList') { | ||||||
|       to.meta.keepAlive = true |       to.meta.keepAlive = true | ||||||
|     } |     } | ||||||
|  |  | ||||||
|  | @ -6,251 +6,101 @@ | ||||||
|           <h4>基本信息</h4> |           <h4>基本信息</h4> | ||||||
|           <div class="form-item-view"> |           <div class="form-item-view"> | ||||||
|             <FormItem label="活动名称" prop="promotionName"> |             <FormItem label="活动名称" prop="promotionName"> | ||||||
|               <Input |               <Input type="text" v-model="form.promotionName" :disabled="form.promotionStatus != 'NEW'" placeholder="活动名称" | ||||||
|                 type="text" |                 clearable style="width: 280px" /> | ||||||
|                 v-model="form.promotionName" |  | ||||||
|                 :disabled="form.promotionStatus != 'NEW'" |  | ||||||
|                 placeholder="活动名称" |  | ||||||
|                 clearable |  | ||||||
|                 style="width: 280px" |  | ||||||
|               /> |  | ||||||
|             </FormItem> |             </FormItem> | ||||||
|             <FormItem label="活动时间" prop="rangeTime"> |             <FormItem label="活动时间" prop="rangeTime"> | ||||||
|               <DatePicker |               <DatePicker type="datetimerange" v-model="form.rangeTime" :disabled="form.promotionStatus != 'NEW'" | ||||||
|                 type="datetimerange" |                 format="yyyy-MM-dd HH:mm:ss" placeholder="请选择" :options="options" style="width: 280px"> | ||||||
|                 v-model="form.rangeTime" |  | ||||||
|                 :disabled="form.promotionStatus != 'NEW'" |  | ||||||
|                 format="yyyy-MM-dd HH:mm:ss" |  | ||||||
|                 placeholder="请选择" |  | ||||||
|                 :options="options" |  | ||||||
|                 style="width: 280px" |  | ||||||
|               > |  | ||||||
|               </DatePicker> |               </DatePicker> | ||||||
|             </FormItem> |             </FormItem> | ||||||
|             <FormItem label="活动描述" prop="description"> |             <FormItem label="活动描述" prop="description"> | ||||||
|               <Input |               <Input v-model="form.description" :disabled="form.promotionStatus != 'NEW'" type="textarea" :rows="4" | ||||||
|                 v-model="form.description" |                 clearable style="width: 280px" /> | ||||||
|                 :disabled="form.promotionStatus != 'NEW'" |  | ||||||
|                 type="textarea" |  | ||||||
|                 :rows="4" |  | ||||||
|                 clearable |  | ||||||
|                 style="width: 280px" |  | ||||||
|               /> |  | ||||||
|             </FormItem> |             </FormItem> | ||||||
|           </div> |           </div> | ||||||
| 
 | 
 | ||||||
|           <h4>优惠设置</h4> |           <h4>优惠设置</h4> | ||||||
|           <div class="form-item-view"> |           <div class="form-item-view"> | ||||||
|             <FormItem label="优惠门槛" prop="fullMoney"> |             <FormItem label="优惠门槛" prop="fullMoney"> | ||||||
|               <Input |               <Input type="text" v-model="form.fullMoney" :disabled="form.promotionStatus != 'NEW'" placeholder="优惠门槛" | ||||||
|                 type="text" |                 clearable style="width: 280px" /> | ||||||
|                 v-model="form.fullMoney" |  | ||||||
|                 :disabled="form.promotionStatus != 'NEW'" |  | ||||||
|                 placeholder="优惠门槛" |  | ||||||
|                 clearable |  | ||||||
|                 style="width: 280px" |  | ||||||
|               /> |  | ||||||
|               <span class="describe">消费达到当前金额可以参与优惠</span> |               <span class="describe">消费达到当前金额可以参与优惠</span> | ||||||
|             </FormItem> |             </FormItem> | ||||||
|             <FormItem label="优惠方式"> |             <FormItem label="优惠方式"> | ||||||
|               <RadioGroup |               <RadioGroup type="button" button-style="solid" v-model="form.discountType"> | ||||||
|                 type="button" |                 <Radio :disabled="form.promotionStatus != 'NEW'" label="fullMinusFlag">减现金</Radio> | ||||||
|                 button-style="solid" |                 <Radio :disabled="form.promotionStatus != 'NEW'" label="fullRateFlag">打折</Radio> | ||||||
|                 v-model="form.discountType" |  | ||||||
|               > |  | ||||||
|                 <Radio |  | ||||||
|                   :disabled="form.promotionStatus != 'NEW'" |  | ||||||
|                   label="fullMinusFlag" |  | ||||||
|                   >减现金</Radio |  | ||||||
|                 > |  | ||||||
|                 <Radio |  | ||||||
|                   :disabled="form.promotionStatus != 'NEW'" |  | ||||||
|                   label="fullRateFlag" |  | ||||||
|                   >打折</Radio |  | ||||||
|                 > |  | ||||||
|               </RadioGroup> |               </RadioGroup> | ||||||
|             </FormItem> |             </FormItem> | ||||||
|             <FormItem |             <FormItem v-if="form.discountType == 'fullMinusFlag'" label="优惠金额" prop="fullMinus"> | ||||||
|               v-if="form.discountType == 'fullMinusFlag'" |               <Input :disabled="form.promotionStatus != 'NEW'" type="text" v-model="form.fullMinus" placeholder="优惠金额" | ||||||
|               label="优惠金额" |                 clearable style="width: 280px" /> | ||||||
|               prop="fullMinus" |  | ||||||
|             > |  | ||||||
|               <Input |  | ||||||
|                 :disabled="form.promotionStatus != 'NEW'" |  | ||||||
|                 type="text" |  | ||||||
|                 v-model="form.fullMinus" |  | ||||||
|                 placeholder="优惠金额" |  | ||||||
|                 clearable |  | ||||||
|                 style="width: 280px" |  | ||||||
|               /> |  | ||||||
|             </FormItem> |             </FormItem> | ||||||
|             <FormItem |             <FormItem v-if="form.discountType == 'fullRateFlag'" label="优惠折扣" prop="fullRate"> | ||||||
|               v-if="form.discountType == 'fullRateFlag'" |               <Input :disabled="form.promotionStatus != 'NEW'" type="text" v-model="form.fullRate" placeholder="优惠折扣" | ||||||
|               label="优惠折扣" |                 clearable style="width: 280px" /> | ||||||
|               prop="fullRate" |  | ||||||
|             > |  | ||||||
|               <Input |  | ||||||
|                 :disabled="form.promotionStatus != 'NEW'" |  | ||||||
|                 type="text" |  | ||||||
|                 v-model="form.fullRate" |  | ||||||
|                 placeholder="优惠折扣" |  | ||||||
|                 clearable |  | ||||||
|                 style="width: 280px" |  | ||||||
|               /> |  | ||||||
|               <span class="describe">优惠折扣为0-10之间数字,可有一位小数</span> |               <span class="describe">优惠折扣为0-10之间数字,可有一位小数</span> | ||||||
|             </FormItem> |             </FormItem> | ||||||
|             <FormItem label="额外赠送"> |             <FormItem label="额外赠送"> | ||||||
|               <Checkbox |               <Checkbox :disabled="form.promotionStatus != 'NEW'" v-model="form.freeFreightFlag">免邮费</Checkbox> | ||||||
|                 :disabled="form.promotionStatus != 'NEW'" |               <Checkbox :disabled="form.promotionStatus != 'NEW'" v-model="form.couponFlag">送优惠券</Checkbox> | ||||||
|                 v-model="form.freeFreightFlag" |               <Checkbox :disabled="form.promotionStatus != 'NEW'" v-model="form.giftFlag">送赠品</Checkbox> | ||||||
|                 >免邮费</Checkbox |               <Checkbox :disabled="form.promotionStatus != 'NEW'" v-if="Cookies.get('userInfoSeller') && | ||||||
|               > |  | ||||||
|               <Checkbox |  | ||||||
|                 :disabled="form.promotionStatus != 'NEW'" |  | ||||||
|                 v-model="form.couponFlag" |  | ||||||
|                 >送优惠券</Checkbox |  | ||||||
|               > |  | ||||||
|               <Checkbox |  | ||||||
|                 :disabled="form.promotionStatus != 'NEW'" |  | ||||||
|                 v-model="form.giftFlag" |  | ||||||
|                 >送赠品</Checkbox |  | ||||||
|               > |  | ||||||
|               <Checkbox |  | ||||||
|                 :disabled="form.promotionStatus != 'NEW'" |  | ||||||
|                 v-if=" |  | ||||||
|                   Cookies.get('userInfoSeller') && |  | ||||||
|                 JSON.parse(Cookies.get('userInfoSeller')).selfOperated |                 JSON.parse(Cookies.get('userInfoSeller')).selfOperated | ||||||
|                 " |                 " v-model="form.pointFlag">送积分</Checkbox> | ||||||
|                 v-model="form.pointFlag" |  | ||||||
|                 >送积分</Checkbox |  | ||||||
|               > |  | ||||||
|             </FormItem> |             </FormItem> | ||||||
|             <FormItem v-if="form.couponFlag" label="赠送优惠券" prop="couponId"> |             <FormItem v-if="form.couponFlag" label="赠送优惠券" prop="couponId"> | ||||||
|               <Select |               <Select v-model="form.couponId" :disabled="form.promotionStatus != 'NEW'" filterable | ||||||
|                 v-model="form.couponId" |                 :remote-method="getCouponList" placeholder="输入优惠券名称搜索" :loading="couponLoading" style="width: 280px"> | ||||||
|                 :disabled="form.promotionStatus != 'NEW'" |                 <Option v-for="item in couponList" :value="item.id" :key="item.id">{{ item.couponName }}</Option> | ||||||
|                 filterable |  | ||||||
|                 :remote-method="getCouponList" |  | ||||||
|                 placeholder="输入优惠券名称搜索" |  | ||||||
|                 :loading="couponLoading" |  | ||||||
|                 style="width: 280px" |  | ||||||
|               > |  | ||||||
|                 <Option |  | ||||||
|                   v-for="item in couponList" |  | ||||||
|                   :value="item.id" |  | ||||||
|                   :key="item.id" |  | ||||||
|                   >{{ item.couponName }}</Option |  | ||||||
|                 > |  | ||||||
|               </Select> |               </Select> | ||||||
|             </FormItem> |             </FormItem> | ||||||
|             <FormItem v-if="form.giftFlag" label="赠品" prop="giftId"> |             <FormItem v-if="form.giftFlag" label="赠品" prop="giftId"> | ||||||
|               <Select |               <Select :disabled="form.promotionStatus != 'NEW'" v-model="form.giftId" filterable | ||||||
|                 :disabled="form.promotionStatus != 'NEW'" |                 :remote-method="getGiftList" placeholder="输入赠品名称搜索" :loading="giftLoading" style="width: 280px"> | ||||||
|                 v-model="form.giftId" |                 <Option v-for="item in giftList" :value="item.id" :key="item.id"> | ||||||
|                 filterable |  | ||||||
|                 :remote-method="getGiftList" |  | ||||||
|                 placeholder="输入赠品名称搜索" |  | ||||||
|                 :loading="giftLoading" |  | ||||||
|                 style="width: 280px" |  | ||||||
|               > |  | ||||||
|                 <Option |  | ||||||
|                   v-for="item in giftList" |  | ||||||
|                   :value="item.id" |  | ||||||
|                   :key="item.id" |  | ||||||
|                   > |  | ||||||
|                   {{ item.goodsName }} |                   {{ item.goodsName }} | ||||||
|                   </Option |                 </Option> | ||||||
|                 > |  | ||||||
|               </Select> |               </Select> | ||||||
|             </FormItem> |             </FormItem> | ||||||
|             <FormItem v-if="form.pointFlag" label="赠积分" prop="point"> |             <FormItem v-if="form.pointFlag" label="赠积分" prop="point"> | ||||||
|               <InputNumber |               <InputNumber :min="0" :disabled="form.promotionStatus != 'NEW'" v-model="form.point" type="number" | ||||||
|                 :min="0" |                 style="width: 280px" /> | ||||||
|                 :disabled="form.promotionStatus != 'NEW'" |  | ||||||
|                 v-model="form.point" |  | ||||||
|                 type="number" |  | ||||||
|                 style="width: 280px" |  | ||||||
|               /> |  | ||||||
|             </FormItem> |             </FormItem> | ||||||
|             <FormItem label="使用范围" prop="scopeType"> |             <FormItem label="使用范围" prop="scopeType"> | ||||||
|               <RadioGroup |               <RadioGroup type="button" button-style="solid" v-model="form.scopeType"> | ||||||
|                 type="button" |                 <Radio :disabled="form.promotionStatus != 'NEW'" label="ALL">全品类</Radio> | ||||||
|                 button-style="solid" |                 <Radio :disabled="form.promotionStatus != 'NEW'" label="PORTION_GOODS">指定商品</Radio> | ||||||
|                 v-model="form.scopeType" |  | ||||||
|               > |  | ||||||
|                 <Radio :disabled="form.promotionStatus != 'NEW'" label="ALL" |  | ||||||
|                   >全品类</Radio |  | ||||||
|                 > |  | ||||||
|                 <Radio |  | ||||||
|                   :disabled="form.promotionStatus != 'NEW'" |  | ||||||
|                   label="PORTION_GOODS" |  | ||||||
|                   >指定商品</Radio |  | ||||||
|                 > |  | ||||||
|               </RadioGroup> |               </RadioGroup> | ||||||
|             </FormItem> |             </FormItem> | ||||||
| 
 | 
 | ||||||
|             <FormItem |             <FormItem style="width: 100%" v-if="form.scopeType == 'PORTION_GOODS'"> | ||||||
|               style="width: 100%" |               <div style="display: flex; margin-bottom: 10px" v-if="form.promotionStatus == 'NEW'"> | ||||||
|               v-if="form.scopeType == 'PORTION_GOODS'" |  | ||||||
|             > |  | ||||||
|               <div |  | ||||||
|                 style="display: flex; margin-bottom: 10px" |  | ||||||
|                 v-if="form.promotionStatus == 'NEW'" |  | ||||||
|               > |  | ||||||
|                 <Button type="primary" @click="openSkuList">选择商品</Button> |                 <Button type="primary" @click="openSkuList">选择商品</Button> | ||||||
|                 <Button |                 <Button type="error" ghost style="margin-left: 10px" @click="delSelectGoods">批量删除</Button> | ||||||
|                   type="error" |  | ||||||
|                   ghost |  | ||||||
|                   style="margin-left: 10px" |  | ||||||
|                   @click="delSelectGoods" |  | ||||||
|                   >批量删除</Button |  | ||||||
|                 > |  | ||||||
|               </div> |               </div> | ||||||
|               <Table |               <Table border :columns="columns" :data="form.promotionGoodsList" @on-selection-change="changeSelect"> | ||||||
|                 border |  | ||||||
|                 :columns="columns" |  | ||||||
|                 :data="form.promotionGoodsList" |  | ||||||
|                 @on-selection-change="changeSelect" |  | ||||||
|               > |  | ||||||
|                 <template slot-scope="{ row }" slot="QRCode"> |                 <template slot-scope="{ row }" slot="QRCode"> | ||||||
|                   <img |                   <img :src="row.QRCode || '../../../assets/lili.png'" width="50px" height="50px" alt="" /> | ||||||
|                     :src="row.QRCode || '../../../assets/lili.png'" |  | ||||||
|                     width="50px" |  | ||||||
|                     height="50px" |  | ||||||
|                     alt="" |  | ||||||
|                   /> |  | ||||||
|                 </template> |                 </template> | ||||||
|                 <template slot-scope="{ index }" slot="action"> |                 <template slot-scope="{ index }" slot="action"> | ||||||
|                   <Button |                   <Button type="error" :disabled="form.promotionStatus != 'NEW' && !!id" size="small" ghost | ||||||
|                     type="error" |                     @click="delGoods(index)">删除</Button> | ||||||
|                     :disabled="form.promotionStatus != 'NEW' && !!id" |  | ||||||
|                     size="small" |  | ||||||
|                     ghost |  | ||||||
|                     @click="delGoods(index)" |  | ||||||
|                     >删除</Button |  | ||||||
|                   > |  | ||||||
|                 </template> |                 </template> | ||||||
|               </Table> |               </Table> | ||||||
|             </FormItem> |             </FormItem> | ||||||
| 
 | 
 | ||||||
|             <div> |             <div> | ||||||
|               <Button type="text" @click="closeCurrentPage">返回</Button> |               <Button type="text" @click="closeCurrentPage">返回</Button> | ||||||
|               <Button |               <Button type="primary" :disabled="form.promotionStatus != 'NEW' && !!id" :loading="submitLoading" | ||||||
|                 type="primary" |                 @click="handleSubmit">提交</Button> | ||||||
|                 :disabled="form.promotionStatus != 'NEW' && !!id" |  | ||||||
|                 :loading="submitLoading" |  | ||||||
|                 @click="handleSubmit" |  | ||||||
|                 >提交</Button |  | ||||||
|               > |  | ||||||
|             </div> |             </div> | ||||||
|           </div> |           </div> | ||||||
|         </div> |         </div> | ||||||
|       </Form> |       </Form> | ||||||
|     </Card> |     </Card> | ||||||
|     <sku-select |     <sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select> | ||||||
|       ref="skuSelect" |  | ||||||
|       @selectedGoodsData="selectedGoodsData" |  | ||||||
|     ></sku-select> |  | ||||||
|   </div> |   </div> | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
|  | @ -270,7 +120,7 @@ export default { | ||||||
|   components: { |   components: { | ||||||
|     skuSelect, |     skuSelect, | ||||||
|   }, |   }, | ||||||
|   data() { |   data () { | ||||||
|     const checkPrice = (rule, value, callback) => { |     const checkPrice = (rule, value, callback) => { | ||||||
|       if (!value && value !== 0) { |       if (!value && value !== 0) { | ||||||
|         return callback(new Error("面额不能为空")); |         return callback(new Error("面额不能为空")); | ||||||
|  | @ -369,29 +219,31 @@ export default { | ||||||
|         }, |         }, | ||||||
|       ], |       ], | ||||||
|       options: { |       options: { | ||||||
|         disabledDate(date) { |         disabledDate (date) { | ||||||
|           return date && date.valueOf() < Date.now() - 86400000; |           return date && date.valueOf() < Date.now() - 86400000; | ||||||
|         }, |         }, | ||||||
|       }, |       }, | ||||||
|     }; |     }; | ||||||
|   }, |   }, | ||||||
|   async mounted() { |   async mounted () { | ||||||
|     if (this.id) { |     if (this.id) { | ||||||
|       this.getDetail(); |       this.getDetail(); | ||||||
|  |       this.columns.shift() | ||||||
|  |       this.columns.pop() | ||||||
|     } |     } | ||||||
|     await this.getCouponList(); |     await this.getCouponList(); | ||||||
|     await this.getGiftList(); |     await this.getGiftList(); | ||||||
|   }, |   }, | ||||||
|   methods: { |   methods: { | ||||||
|     // 关闭当前页面 |     // 关闭当前页面 | ||||||
|     closeCurrentPage() { |     closeCurrentPage () { | ||||||
|       this.$store.commit("removeTag", "full-cut-detail"); |       this.$store.commit("removeTag", "full-cut-detail"); | ||||||
|       localStorage.storeOpenedList = JSON.stringify( |       localStorage.storeOpenedList = JSON.stringify( | ||||||
|         this.$store.state.app.storeOpenedList |         this.$store.state.app.storeOpenedList | ||||||
|       ); |       ); | ||||||
|       this.$router.go(-1); |       this.$router.go(-1); | ||||||
|     }, |     }, | ||||||
|     openSkuList() { |     openSkuList () { | ||||||
|       // 显示商品选择器 |       // 显示商品选择器 | ||||||
|       this.$refs.skuSelect.open("goods"); |       this.$refs.skuSelect.open("goods"); | ||||||
|       let data = JSON.parse(JSON.stringify(this.form.promotionGoodsList)); |       let data = JSON.parse(JSON.stringify(this.form.promotionGoodsList)); | ||||||
|  | @ -400,7 +252,7 @@ export default { | ||||||
|       }); |       }); | ||||||
|       this.$refs.skuSelect.goodsData = data; |       this.$refs.skuSelect.goodsData = data; | ||||||
|     }, |     }, | ||||||
|     getDetail() { |     getDetail () { | ||||||
|       // 获取活动详情 |       // 获取活动详情 | ||||||
|       getFullDiscountById(this.id).then((res) => { |       getFullDiscountById(this.id).then((res) => { | ||||||
|         console.log(res); |         console.log(res); | ||||||
|  | @ -422,7 +274,7 @@ export default { | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|     /** 保存 */ |     /** 保存 */ | ||||||
|     handleSubmit() { |     handleSubmit () { | ||||||
|       this.$refs.form.validate((valid) => { |       this.$refs.form.validate((valid) => { | ||||||
|         if (valid) { |         if (valid) { | ||||||
|           const params = JSON.parse(JSON.stringify(this.form)); |           const params = JSON.parse(JSON.stringify(this.form)); | ||||||
|  | @ -489,11 +341,11 @@ export default { | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
| 
 | 
 | ||||||
|     changeSelect(e) { |     changeSelect (e) { | ||||||
|       // 已选商品批量选择 |       // 已选商品批量选择 | ||||||
|       this.selectedGoods = e; |       this.selectedGoods = e; | ||||||
|     }, |     }, | ||||||
|     delSelectGoods() { |     delSelectGoods () { | ||||||
|       // 多选删除商品 |       // 多选删除商品 | ||||||
|       if (this.selectedGoods.length <= 0) { |       if (this.selectedGoods.length <= 0) { | ||||||
|         this.$Message.warning("您还未选择要删除的数据"); |         this.$Message.warning("您还未选择要删除的数据"); | ||||||
|  | @ -515,11 +367,11 @@ export default { | ||||||
|         }, |         }, | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|     delGoods(index) { |     delGoods (index) { | ||||||
|       // 删除商品 |       // 删除商品 | ||||||
|       this.form.promotionGoodsList.splice(index, 1); |       this.form.promotionGoodsList.splice(index, 1); | ||||||
|     }, |     }, | ||||||
|     selectedGoodsData(item) { |     selectedGoodsData (item) { | ||||||
|       // 回显已选商品 |       // 回显已选商品 | ||||||
|       let list = []; |       let list = []; | ||||||
|       item.forEach((e) => { |       item.forEach((e) => { | ||||||
|  | @ -535,7 +387,7 @@ export default { | ||||||
|       }); |       }); | ||||||
|       this.form.promotionGoodsList = list; |       this.form.promotionGoodsList = list; | ||||||
|     }, |     }, | ||||||
|     getCouponList(query) { |     getCouponList (query) { | ||||||
|       // 优惠券列表 |       // 优惠券列表 | ||||||
|       let params = { |       let params = { | ||||||
|         pageSize: 10, |         pageSize: 10, | ||||||
|  | @ -552,7 +404,7 @@ export default { | ||||||
|         } |         } | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|     getGiftList(query) { |     getGiftList (query) { | ||||||
|       // 赠品列表 |       // 赠品列表 | ||||||
|       let params = { |       let params = { | ||||||
|         pageSize: 10, |         pageSize: 10, | ||||||
|  | @ -586,11 +438,13 @@ h4 { | ||||||
|   line-height: 40px; |   line-height: 40px; | ||||||
|   text-align: left; |   text-align: left; | ||||||
| } | } | ||||||
|  | 
 | ||||||
| .describe { | .describe { | ||||||
|   font-size: 12px; |   font-size: 12px; | ||||||
|   margin-left: 10px; |   margin-left: 10px; | ||||||
|   color: #999; |   color: #999; | ||||||
| } | } | ||||||
|  | 
 | ||||||
| .ivu-form-item { | .ivu-form-item { | ||||||
|   margin-bottom: 24px !important; |   margin-bottom: 24px !important; | ||||||
| } | } | ||||||
|  |  | ||||||
|  | @ -1,29 +1,12 @@ | ||||||
| <template> | <template> | ||||||
|   <div class="search"> |   <div class="search"> | ||||||
|     <Card> |     <Card> | ||||||
|       <Form |       <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form"> | ||||||
|         ref="searchForm" |  | ||||||
|         :model="searchForm" |  | ||||||
|         inline |  | ||||||
|         :label-width="70" |  | ||||||
|         class="search-form" |  | ||||||
|       > |  | ||||||
|         <Form-item label="活动名称"> |         <Form-item label="活动名称"> | ||||||
|           <Input |           <Input type="text" v-model="searchForm.promotionName" placeholder="请输入活动名称" clearable style="width: 200px" /> | ||||||
|             type="text" |  | ||||||
|             v-model="searchForm.promotionName" |  | ||||||
|             placeholder="请输入活动名称" |  | ||||||
|             clearable |  | ||||||
|             style="width: 200px" |  | ||||||
|           /> |  | ||||||
|         </Form-item> |         </Form-item> | ||||||
|         <Form-item label="活动状态" prop="promotionStatus"> |         <Form-item label="活动状态" prop="promotionStatus"> | ||||||
|           <Select |           <Select v-model="searchForm.promotionStatus" placeholder="请选择" clearable style="width: 200px"> | ||||||
|             v-model="searchForm.promotionStatus" |  | ||||||
|             placeholder="请选择" |  | ||||||
|             clearable |  | ||||||
|             style="width: 200px" |  | ||||||
|           > |  | ||||||
|             <Option value="NEW">未开始</Option> |             <Option value="NEW">未开始</Option> | ||||||
|             <Option value="START">已开始/上架</Option> |             <Option value="START">已开始/上架</Option> | ||||||
|             <Option value="END">已结束/下架</Option> |             <Option value="END">已结束/下架</Option> | ||||||
|  | @ -31,13 +14,7 @@ | ||||||
|           </Select> |           </Select> | ||||||
|         </Form-item> |         </Form-item> | ||||||
|         <Form-item label="活动时间"> |         <Form-item label="活动时间"> | ||||||
|           <DatePicker |           <DatePicker v-model="selectDate" type="daterange" clearable placeholder="选择起始时间" style="width: 200px"> | ||||||
|             v-model="selectDate" |  | ||||||
|             type="daterange" |  | ||||||
|             clearable |  | ||||||
|             placeholder="选择起始时间" |  | ||||||
|             style="width: 200px" |  | ||||||
|           > |  | ||||||
|           </DatePicker> |           </DatePicker> | ||||||
|         </Form-item> |         </Form-item> | ||||||
|         <Form-item> |         <Form-item> | ||||||
|  | @ -60,54 +37,21 @@ | ||||||
|         </template> |         </template> | ||||||
|         <template slot-scope="{ row }" slot="action"> |         <template slot-scope="{ row }" slot="action"> | ||||||
|           <div> |           <div> | ||||||
|             <Button |             <Button type="primary" v-if="row.promotionStatus == 'NEW'" size="small" @click="edit(row)">编辑</Button> | ||||||
|               type="primary" |  | ||||||
|               v-if="row.promotionStatus == 'NEW'" |  | ||||||
|               size="small" |  | ||||||
|               @click="edit(row)" |  | ||||||
|               >编辑</Button |  | ||||||
|             > |  | ||||||
|             <Button type="info" v-else size="small" @click="edit(row)">查看</Button> |             <Button type="info" v-else size="small" @click="edit(row)">查看</Button> | ||||||
|             <Button |             <Button type="success" v-if="row.promotionStatus === 'START'" style="margin-left: 5px" size="small" | ||||||
|               type="success" |               @click="openOrClose(row)">关闭</Button> | ||||||
|               v-if="row.promotionStatus === 'START'" |             <Button type="success" v-if="row.promotionStatus === 'CLOSE'" style="margin-left: 5px" size="small" | ||||||
|               style="margin-left: 5px" |               @click="openOrClose(row)">开启</Button> | ||||||
|               size="small" |             <Button type="error" :disabled="row.promotionStatus == 'START'" style="margin-left: 5px" size="small" | ||||||
|               @click="openOrClose(row)" |               @click="del(row)">删除</Button> | ||||||
|               >关闭</Button |  | ||||||
|             > |  | ||||||
|             <Button |  | ||||||
|               type="success" |  | ||||||
|               v-if="row.promotionStatus === 'CLOSE'" |  | ||||||
|               style="margin-left: 5px" |  | ||||||
|               size="small" |  | ||||||
|               @click="openOrClose(row)" |  | ||||||
|               >开启</Button |  | ||||||
|             > |  | ||||||
|             <Button |  | ||||||
|               type="error" |  | ||||||
|               :disabled="row.promotionStatus == 'START'" |  | ||||||
|               style="margin-left: 5px" |  | ||||||
|               size="small" |  | ||||||
|               @click="del(row)" |  | ||||||
|               >删除</Button |  | ||||||
|             > |  | ||||||
|           </div> |           </div> | ||||||
|         </template> |         </template> | ||||||
|       </Table> |       </Table> | ||||||
|       <Row type="flex" justify="end" class="page operation"> |       <Row type="flex" justify="end" class="page operation"> | ||||||
|         <Page |         <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" | ||||||
|           :current="searchForm.pageNumber" |           @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total show-elevator | ||||||
|           :total="total" |           show-sizer></Page> | ||||||
|           :page-size="searchForm.pageSize" |  | ||||||
|           @on-change="changePage" |  | ||||||
|           @on-page-size-change="changePageSize" |  | ||||||
|           :page-size-opts="[10, 20, 50]" |  | ||||||
|           size="small" |  | ||||||
|           show-total |  | ||||||
|           show-elevator |  | ||||||
|           show-sizer |  | ||||||
|         ></Page> |  | ||||||
|       </Row> |       </Row> | ||||||
|     </Card> |     </Card> | ||||||
|   </div> |   </div> | ||||||
|  | @ -120,7 +64,7 @@ import { | ||||||
| } from "@/api/promotion.js"; | } from "@/api/promotion.js"; | ||||||
| export default { | export default { | ||||||
|   name: "full-cut", |   name: "full-cut", | ||||||
|   data() { |   data () { | ||||||
|     return { |     return { | ||||||
|       total: 0, |       total: 0, | ||||||
|       selectDate: [], |       selectDate: [], | ||||||
|  | @ -198,31 +142,31 @@ export default { | ||||||
|   }, |   }, | ||||||
|   methods: { |   methods: { | ||||||
|     // 改变页码 |     // 改变页码 | ||||||
|     newAct() { |     newAct () { | ||||||
|       this.$router.push({ name: "full-discount-detail" }); |       this.$router.push({ name: "full-discount-detail" }); | ||||||
|     }, |     }, | ||||||
|     // 初始化数据 |     // 初始化数据 | ||||||
|     init() { |     init () { | ||||||
|       this.getDataList(); |       this.getDataList(); | ||||||
|     }, |     }, | ||||||
|     // 改变页数 |     // 改变页数 | ||||||
|     changePage(v) { |     changePage (v) { | ||||||
|       this.searchForm.pageNumber = v; |       this.searchForm.pageNumber = v; | ||||||
|       this.getDataList(); |       this.getDataList(); | ||||||
|     }, |     }, | ||||||
|     // 改变页码 |     // 改变页码 | ||||||
|     changePageSize(v) { |     changePageSize (v) { | ||||||
|       this.searchForm.pageSize = v; |       this.searchForm.pageSize = v; | ||||||
|       this.getDataList(); |       this.getDataList(); | ||||||
|     }, |     }, | ||||||
|     // 搜索 |     // 搜索 | ||||||
|     handleSearch() { |     handleSearch () { | ||||||
|       this.searchForm.pageNumber = 1; |       this.searchForm.pageNumber = 1; | ||||||
|       this.searchForm.pageSize = 10; |       this.searchForm.pageSize = 10; | ||||||
|       this.getDataList(); |       this.getDataList(); | ||||||
|     }, |     }, | ||||||
|     // 重置 |     // 重置 | ||||||
|     handleReset() { |     handleReset () { | ||||||
|       this.selectDate = ""; |       this.selectDate = ""; | ||||||
|       this.searchForm = {}; |       this.searchForm = {}; | ||||||
|       this.searchForm.pageNumber = 1; |       this.searchForm.pageNumber = 1; | ||||||
|  | @ -230,11 +174,11 @@ export default { | ||||||
|       this.getDataList(); |       this.getDataList(); | ||||||
|     }, |     }, | ||||||
|     //  编辑 |     //  编辑 | ||||||
|     edit(row) { |     edit (row) { | ||||||
|       this.$router.push({ name: "full-discount-detail", query: { id: row.id } }); |       this.$router.push({ name: "full-discount-detail", query: { id: row.id } }); | ||||||
|     }, |     }, | ||||||
|     // 删除 |     // 删除 | ||||||
|     del(row) { |     del (row) { | ||||||
|       this.$Modal.confirm({ |       this.$Modal.confirm({ | ||||||
|         title: "提示", |         title: "提示", | ||||||
|         // 记得确认修改此处 |         // 记得确认修改此处 | ||||||
|  | @ -253,7 +197,7 @@ export default { | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|     // 开启或关闭活动 |     // 开启或关闭活动 | ||||||
|     openOrClose(row) { |     openOrClose (row) { | ||||||
|       let name = "开启"; |       let name = "开启"; | ||||||
|       let status = "START"; |       let status = "START"; | ||||||
|       if (row.promotionStatus === "START") { |       if (row.promotionStatus === "START") { | ||||||
|  | @ -325,7 +269,7 @@ export default { | ||||||
|       } |       } | ||||||
|     }, |     }, | ||||||
|     // 获取列表数据 |     // 获取列表数据 | ||||||
|     getDataList() { |     getDataList () { | ||||||
|       this.loading = true; |       this.loading = true; | ||||||
|       if (this.selectDate && this.selectDate[0] && this.selectDate[1]) { |       if (this.selectDate && this.selectDate[0] && this.selectDate[1]) { | ||||||
|         this.searchForm.startTime = this.selectDate[0].getTime(); |         this.searchForm.startTime = this.selectDate[0].getTime(); | ||||||
|  | @ -343,17 +287,19 @@ export default { | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|   }, |   }, | ||||||
|   mounted() { |   mounted () { | ||||||
|     this.init(); |     this.init(); | ||||||
|   }, |   }, | ||||||
|   // 页面缓存处理,从该页面离开时,修改KeepAlive为false,保证进入该页面是刷新 |   // 页面缓存处理,从该页面离开时,修改KeepAlive为false,保证进入该页面是刷新 | ||||||
|   beforeRouteLeave(to, from, next) { |   beforeRouteLeave (to, from, next) { | ||||||
|     from.meta.keepAlive = false; |     from.meta.keepAlive = false; | ||||||
|     next(); |     next(); | ||||||
|   }, |   }, | ||||||
| }; | }; | ||||||
| </script> | </script> | ||||||
| <style lang="scss" scoped> | <style lang="scss" scoped> | ||||||
|  | @import "@/styles/table-common.scss"; | ||||||
|  | 
 | ||||||
| .operation { | .operation { | ||||||
|   margin: 10px 0; |   margin: 10px 0; | ||||||
| } | } | ||||||
|  |  | ||||||
|  | @ -14,20 +14,14 @@ | ||||||
|           </Select> |           </Select> | ||||||
|         </Form-item> |         </Form-item> | ||||||
|         <Form-item label="活动时间"> |         <Form-item label="活动时间"> | ||||||
|           <DatePicker v-model="selectDate" type="daterange" clearable placeholder="选择起始时间" style="width: 200px"></DatePicker> |           <DatePicker v-model="selectDate" type="daterange" clearable placeholder="选择起始时间" style="width: 200px"> | ||||||
|  |           </DatePicker> | ||||||
|         </Form-item> |         </Form-item> | ||||||
|         <Button @click="handleSearch" type="primary" class="search-btn">搜索</Button> |         <Button @click="handleSearch" type="primary" class="search-btn">搜索</Button> | ||||||
|         <Button @click="handleReset" class="ml_10">重置</Button> |         <Button @click="handleReset" class="ml_10">重置</Button> | ||||||
|       </Form> |       </Form> | ||||||
| 
 | 
 | ||||||
|       <Table |       <Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10"> | ||||||
|         :loading="loading" |  | ||||||
|         border |  | ||||||
|         :columns="columns" |  | ||||||
|         :data="data" |  | ||||||
|         ref="table" |  | ||||||
|         class="mt_10" |  | ||||||
|       > |  | ||||||
|         <template slot-scope="{ row }" slot="applyEndTime"> |         <template slot-scope="{ row }" slot="applyEndTime"> | ||||||
|           {{ unixDate(row.applyEndTime) }} |           {{ unixDate(row.applyEndTime) }} | ||||||
|         </template> |         </template> | ||||||
|  | @ -37,25 +31,14 @@ | ||||||
|           }}</Tag> |           }}</Tag> | ||||||
|         </template> |         </template> | ||||||
|         <template slot-scope="{ row }" slot="action"> |         <template slot-scope="{ row }" slot="action"> | ||||||
|           <Button |           <Button v-if="row.promotionStatus === 'NEW'" type="primary" size="small" @click="manage(row)">管理</Button> | ||||||
|             v-if="row.promotionStatus === 'NEW'" |           <Button v-else type="info" size="small" @click="manage(row)">查看</Button> | ||||||
|             type="primary" |  | ||||||
|             size="small" |  | ||||||
|             @click="manage(row)" |  | ||||||
|             >管理</Button |  | ||||||
|           > |  | ||||||
|           <Button |  | ||||||
|             v-else |  | ||||||
|             type="info" |  | ||||||
|             size="small" |  | ||||||
|             @click="manage(row)" |  | ||||||
|             >查看</Button |  | ||||||
|           > |  | ||||||
|         </template> |         </template> | ||||||
|       </Table> |       </Table> | ||||||
|       <Row type="flex" justify="end" class="mt_10"> |       <Row type="flex" justify="end" class="mt_10"> | ||||||
|         <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" |         <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" | ||||||
|           size="small" show-total show-elevator show-sizer></Page> |           @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total show-elevator | ||||||
|  |           show-sizer></Page> | ||||||
|       </Row> |       </Row> | ||||||
|     </Card> |     </Card> | ||||||
|   </div> |   </div> | ||||||
|  | @ -66,9 +49,9 @@ import { seckillList } from "@/api/promotion"; | ||||||
| export default { | export default { | ||||||
|   name: "seckill", |   name: "seckill", | ||||||
|   components: {}, |   components: {}, | ||||||
|   data() { |   data () { | ||||||
|     return { |     return { | ||||||
|       selectDate:[], |       selectDate: [], | ||||||
|       loading: true, // 表单加载状态 |       loading: true, // 表单加载状态 | ||||||
|       searchForm: { |       searchForm: { | ||||||
|         // 搜索框初始化对象 |         // 搜索框初始化对象 | ||||||
|  | @ -141,27 +124,27 @@ export default { | ||||||
|   }, |   }, | ||||||
|   methods: { |   methods: { | ||||||
|     // 初始化数据 |     // 初始化数据 | ||||||
|     init() { |     init () { | ||||||
|       this.getDataList(); |       this.getDataList(); | ||||||
|     }, |     }, | ||||||
|     // 分页 改变页码 |     // 分页 改变页码 | ||||||
|     changePage(v) { |     changePage (v) { | ||||||
|       this.searchForm.pageNumber = v; |       this.searchForm.pageNumber = v; | ||||||
|       this.getDataList(); |       this.getDataList(); | ||||||
|     }, |     }, | ||||||
|     // 分页 改变页数 |     // 分页 改变页数 | ||||||
|     changePageSize(v) { |     changePageSize (v) { | ||||||
|       this.searchForm.pageSize = v; |       this.searchForm.pageSize = v; | ||||||
|       this.getDataList(); |       this.getDataList(); | ||||||
|     }, |     }, | ||||||
|     // 搜索 |     // 搜索 | ||||||
|     handleSearch() { |     handleSearch () { | ||||||
|       this.searchForm.pageNumber = 1; |       this.searchForm.pageNumber = 1; | ||||||
|       this.searchForm.pageSize = 10; |       this.searchForm.pageSize = 10; | ||||||
|       this.getDataList(); |       this.getDataList(); | ||||||
|     }, |     }, | ||||||
|     // 重置 |     // 重置 | ||||||
|     handleReset() { |     handleReset () { | ||||||
|       this.searchForm = {}; |       this.searchForm = {}; | ||||||
|       this.selectDate = ""; |       this.selectDate = ""; | ||||||
|       this.searchForm.pageNumber = 1; |       this.searchForm.pageNumber = 1; | ||||||
|  | @ -169,11 +152,11 @@ export default { | ||||||
|       this.getDataList(); |       this.getDataList(); | ||||||
|     }, |     }, | ||||||
|     // 管理 |     // 管理 | ||||||
|     manage(row) { |     manage (row) { | ||||||
|       this.$router.push({ name: "seckill-goods", query: { id: row.id } }); |       this.$router.push({ name: "seckill-goods", query: { id: row.id } }); | ||||||
|     }, |     }, | ||||||
|     // 获取列表数据 |     // 获取列表数据 | ||||||
|     getDataList() { |     getDataList () { | ||||||
|       this.loading = true; |       this.loading = true; | ||||||
|       if (this.selectDate && this.selectDate[0] && this.selectDate[1]) { |       if (this.selectDate && this.selectDate[0] && this.selectDate[1]) { | ||||||
|         this.searchForm.startTime = this.selectDate[0].getTime(); |         this.searchForm.startTime = this.selectDate[0].getTime(); | ||||||
|  | @ -191,11 +174,11 @@ export default { | ||||||
|         } |         } | ||||||
|       }); |       }); | ||||||
|     }, |     }, | ||||||
|     unixDate(time) { |     unixDate (time) { | ||||||
|       // 处理报名截止时间 |       // 处理报名截止时间 | ||||||
|       return this.$options.filters.unixToDate(new Date(time) / 1000); |       return this.$options.filters.unixToDate(new Date(time) / 1000); | ||||||
|     }, |     }, | ||||||
|     unixHours(item) { |     unixHours (item) { | ||||||
|       // 处理小时场次 |       // 处理小时场次 | ||||||
|       let hourArr = item.split(","); |       let hourArr = item.split(","); | ||||||
|       for (let i = 0; i < hourArr.length; i++) { |       for (let i = 0; i < hourArr.length; i++) { | ||||||
|  | @ -204,16 +187,16 @@ export default { | ||||||
|       return hourArr; |       return hourArr; | ||||||
|     }, |     }, | ||||||
|   }, |   }, | ||||||
|   mounted() { |   mounted () { | ||||||
|     this.init(); |     this.init(); | ||||||
|   }, |   }, | ||||||
|   // 页面缓存处理,从该页面离开时,修改KeepAlive为false,保证进入该页面是刷新 |   // 页面缓存处理,从该页面离开时,修改KeepAlive为false,保证进入该页面是刷新 | ||||||
|   beforeRouteLeave(to, from, next) { |   beforeRouteLeave (to, from, next) { | ||||||
|     from.meta.keepAlive = false |     from.meta.keepAlive = false | ||||||
|     next() |     next() | ||||||
|   } |   } | ||||||
| }; | }; | ||||||
| </script> | </script> | ||||||
| <style lang="scss"  scoped> | <style lang="scss"  scoped> | ||||||
| 
 | @import "@/styles/table-common.scss"; | ||||||
| </style> | </style> | ||||||
|  |  | ||||||
										
											Binary file not shown.
										
									
								
							| After Width: | Height: | Size: 1.2 KiB | 
|  | @ -0,0 +1,657 @@ | ||||||
|  | .hz-m-wrap { | ||||||
|  |   position: relative; | ||||||
|  |   /*overflow: hidden;*/ | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-u-img { | ||||||
|  |   display: block; | ||||||
|  |   width: 100%; | ||||||
|  |   max-width: 100%; | ||||||
|  |   height: auto; | ||||||
|  |   /* max-height: 100%; */ | ||||||
|  |   user-select: none; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-area { | ||||||
|  |   position: absolute; | ||||||
|  |   top: 0; | ||||||
|  |   right: 0; | ||||||
|  |   bottom: 0; | ||||||
|  |   left: 0; | ||||||
|  |   cursor: crosshair; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-item { | ||||||
|  |   position: absolute; | ||||||
|  |   display: block; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-box { | ||||||
|  |   position: relative; | ||||||
|  |   width: 100%; | ||||||
|  |   height: 100%; | ||||||
|  |   box-shadow: 0 0 6px #000; | ||||||
|  |   background-color: #e31414; | ||||||
|  |   font-size: 12px; | ||||||
|  |   cursor: pointer; | ||||||
|  |   color: #fff; | ||||||
|  |   opacity: 0.8; | ||||||
|  | } | ||||||
|  | .hz-m-box{ | ||||||
|  |   overflow: hidden; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-box>li { | ||||||
|  |   position: absolute; | ||||||
|  |   text-align: center; | ||||||
|  |   user-select: none; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-box.hz-z-hidden>li { | ||||||
|  |   display: none; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-box.hz-m-hoverbox:hover { | ||||||
|  |   box-shadow: 0 0 0 2px #373950; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-box.hz-m-hoverbox .hz-icon:hover { | ||||||
|  |   background-color: #373950; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-box .hz-icon { | ||||||
|  |   width: 24px; | ||||||
|  |   height: 24px; | ||||||
|  |   line-height: 24px; | ||||||
|  |   font-size: 20px; | ||||||
|  |   text-align: center; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-box .hz-icon:hover { | ||||||
|  |   background-color: #e31414; | ||||||
|  |   opacity: 0.8; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-box .hz-u-index { | ||||||
|  |   top: 0; | ||||||
|  |   left: 0; | ||||||
|  |   width: 24px; | ||||||
|  |   height: 24px; | ||||||
|  |   line-height: 24px; | ||||||
|  |   background-color: #000; | ||||||
|  |   z-index: 100; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-box .hz-u-close { | ||||||
|  |   top: 0; | ||||||
|  |   right: 0; | ||||||
|  |   z-index: 10; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-box .hz-m-copy { | ||||||
|  |   display: inline-block; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-box .hz-small-icon { | ||||||
|  |   border: 0; | ||||||
|  |   border-radius: 0; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-box .hz-u-square { | ||||||
|  |   width: 8px; | ||||||
|  |   height: 8px; | ||||||
|  |   opacity: 0.8; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-box .hz-u-square:after { | ||||||
|  |   content: ''; | ||||||
|  |   position: absolute; | ||||||
|  |   top: 2px; | ||||||
|  |   left: 2px; | ||||||
|  |   width: 4px; | ||||||
|  |   height: 4px; | ||||||
|  |   border-radius: 4px; | ||||||
|  |   background-color: #fff; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-box .hz-u-square-tl { | ||||||
|  |   top: -4px; | ||||||
|  |   left: -4px; | ||||||
|  |   cursor: nw-resize; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-box .hz-u-square-tc { | ||||||
|  |   top: -4px; | ||||||
|  |   left: 50%; | ||||||
|  |   transform: translateX(-50%); | ||||||
|  |   cursor: n-resize; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-box .hz-u-square-tr { | ||||||
|  |   top: -4px; | ||||||
|  |   right: -4px; | ||||||
|  |   cursor: ne-resize; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-box .hz-u-square-cl { | ||||||
|  |   top: 50%; | ||||||
|  |   left: -4px; | ||||||
|  |   transform: translateY(-50%); | ||||||
|  |   cursor: w-resize; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-box .hz-u-square-cr { | ||||||
|  |   top: 50%; | ||||||
|  |   right: -4px; | ||||||
|  |   transform: translateY(-50%); | ||||||
|  |   cursor: w-resize; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-box .hz-u-square-bl { | ||||||
|  |   bottom: -4px; | ||||||
|  |   left: -4px; | ||||||
|  |   cursor: sw-resize; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-box .hz-u-square-bc { | ||||||
|  |   bottom: -4px; | ||||||
|  |   left: 50%; | ||||||
|  |   transform: translateX(-50%); | ||||||
|  |   cursor: s-resize; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-wrap .hz-m-box .hz-u-square-br { | ||||||
|  |   bottom: -4px; | ||||||
|  |   right: -4px; | ||||||
|  |   cursor: se-resize; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /* reset */ | ||||||
|  | .hz-m-modal, | ||||||
|  | .hz-m-wrap { | ||||||
|  |   font-size: 12px; | ||||||
|  |   /* 清除内外边距 */ | ||||||
|  |   /* 重置列表元素 */ | ||||||
|  |   /* 重置文本格式元素 */ | ||||||
|  |   /* 初始化 input */ | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-modal ul, | ||||||
|  | .hz-m-wrap ul, | ||||||
|  | .hz-m-modal ol, | ||||||
|  | .hz-m-wrap ol, | ||||||
|  | .hz-m-modal li, | ||||||
|  | .hz-m-wrap li { | ||||||
|  |   margin: 0; | ||||||
|  |   padding: 0; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-modal ul, | ||||||
|  | .hz-m-wrap ul, | ||||||
|  | .hz-m-modal ol, | ||||||
|  | .hz-m-wrap ol { | ||||||
|  |   list-style: none; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-modal a, | ||||||
|  | .hz-m-wrap a { | ||||||
|  |   text-decoration: none; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-modal a:hover, | ||||||
|  | .hz-m-wrap a:hover { | ||||||
|  |   text-decoration: underline; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-modal p, | ||||||
|  | .hz-m-wrap p { | ||||||
|  |   -webkit-margin-before: 0; | ||||||
|  |   -webkit-margin-after: 0; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-modal input[type="checkbox"], | ||||||
|  | .hz-m-wrap input[type="checkbox"] { | ||||||
|  |   cursor: pointer; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /* basic */ | ||||||
|  | /* modal 样式 */ | ||||||
|  | .hz-m-modal { | ||||||
|  |   position: fixed; | ||||||
|  |   top: 0; | ||||||
|  |   right: 0; | ||||||
|  |   bottom: 0; | ||||||
|  |   left: 0; | ||||||
|  |   z-index: 1000; | ||||||
|  |   overflow-y: auto; | ||||||
|  |   -webkit-overflow-scrolling: touch; | ||||||
|  |   touch-action: cross-slide-y pinch-zoom double-tap-zoom; | ||||||
|  |   text-align: center; | ||||||
|  |   overflow: hidden; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-modal:before { | ||||||
|  |   content: ""; | ||||||
|  |   display: inline-block; | ||||||
|  |   vertical-align: middle; | ||||||
|  |   height: 100%; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-modal .hz-modal_dialog { | ||||||
|  |   display: inline-block; | ||||||
|  |   vertical-align: middle; | ||||||
|  |   text-align: left; | ||||||
|  |   border-radius: 3px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-modal .hz-modal_title { | ||||||
|  |   margin: 0; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-modal .hz-modal_close { | ||||||
|  |   float: right; | ||||||
|  |   margin: -6px -4px 0 0; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | @media (max-width: 767px) { | ||||||
|  |   .hz-m-modal .hz-modal_dialog { | ||||||
|  |     width: auto; | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | html.z-modal, | ||||||
|  | html.z-modal body { | ||||||
|  |   overflow: hidden; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-modal { | ||||||
|  |   background: rgba(0, 0, 0, 0.6); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-modal .hz-modal_dialog { | ||||||
|  |   width: 450px; | ||||||
|  |   background: #fff; | ||||||
|  |   -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.125); | ||||||
|  |   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.125); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-modal .hz-modal_hd { | ||||||
|  |   padding: 15px; | ||||||
|  |   border-bottom: 1px solid #f4f4f4; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-modal .hz-modal_title { | ||||||
|  |   font-size: 18px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-modal .hz-modal_close { | ||||||
|  |   margin: -15px -15px 0 0; | ||||||
|  |   padding: 6px; | ||||||
|  |   color: #bbb; | ||||||
|  |   cursor: pointer; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-modal .hz-modal_close:hover { | ||||||
|  |   color: #888; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-modal .hz-modal_close .hz-u-icon-close { | ||||||
|  |   font-size: 18px; | ||||||
|  |   transition: transform 500ms ease-in-out; | ||||||
|  |   transform: rotate(0deg); | ||||||
|  |   width: 18px; | ||||||
|  |   text-align: center; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-modal .hz-modal_close:hover .hz-u-icon-close { | ||||||
|  |   transform: rotate(270deg); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-modal .hz-modal_bd { | ||||||
|  |   padding: 15px 15px 0 15px; | ||||||
|  |   min-height: 10px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-modal .hz-modal_ft { | ||||||
|  |   padding: 15px; | ||||||
|  |   text-align: center; | ||||||
|  |   border-top: 1px solid #f4f4f4; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-m-modal .hz-modal_ft .hz-u-btn { | ||||||
|  |   margin: 0 10px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | @media (max-width: 767px) { | ||||||
|  |   .hz-m-modal .hz-modal_dialog { | ||||||
|  |     margin: 10px; | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /* 基本按钮样式 btn */ | ||||||
|  | .hz-u-btn { | ||||||
|  |   -webkit-user-select: none; | ||||||
|  |   -moz-user-select: none; | ||||||
|  |   -ms-user-select: none; | ||||||
|  |   user-select: none; | ||||||
|  |   -webkit-appearance: none; | ||||||
|  |   border: none; | ||||||
|  |   overflow: visible; | ||||||
|  |   font: inherit; | ||||||
|  |   text-transform: none; | ||||||
|  |   text-decoration: none; | ||||||
|  |   cursor: pointer; | ||||||
|  |   -webkit-box-sizing: border-box; | ||||||
|  |   -moz-box-sizing: border-box; | ||||||
|  |   box-sizing: border-box; | ||||||
|  |   background: none; | ||||||
|  |   display: inline-block; | ||||||
|  |   vertical-align: middle; | ||||||
|  |   text-align: center; | ||||||
|  |   font-size: 12px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-btn:hover, | ||||||
|  | .hz-u-btn:focus { | ||||||
|  |   outline: none; | ||||||
|  |   text-decoration: none; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-btn:disabled { | ||||||
|  |   cursor: not-allowed; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-btn-block { | ||||||
|  |   display: block; | ||||||
|  |   width: 100%; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-btn { | ||||||
|  |   padding: 0 16px; | ||||||
|  |   height: 28px; | ||||||
|  |   line-height: 26px; | ||||||
|  |   background: #f4f4f4; | ||||||
|  |   color: #444; | ||||||
|  |   border: 1px solid #ddd; | ||||||
|  |   -moz-border-radius: 3px; | ||||||
|  |   border-radius: 3px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-btn:hover, | ||||||
|  | .hz-u-btn:focus { | ||||||
|  |   background: #e5e5e5; | ||||||
|  |   border: 1px solid #adadad; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-btn:active { | ||||||
|  |   background: #e5e5e5; | ||||||
|  |   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); | ||||||
|  |   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-btn:disabled { | ||||||
|  |   background: #fff; | ||||||
|  |   border: 1px solid #ccc; | ||||||
|  |   filter: alpha(opacity=65); | ||||||
|  |   opacity: 0.65; | ||||||
|  |   -webkit-box-shadow: none; | ||||||
|  |   box-shadow: none; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /* 按钮类型 */ | ||||||
|  | .hz-u-btn-primary { | ||||||
|  |   background: #67739b; | ||||||
|  |   color: #fff; | ||||||
|  |   border: 1px solid #67739b; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-btn-primary:hover, | ||||||
|  | .hz-u-btn-primary:focus { | ||||||
|  |   background: #31384b; | ||||||
|  |   color: #fff; | ||||||
|  |   border: 1px solid #31384b; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-btn-primary:active { | ||||||
|  |   background: #367fa9; | ||||||
|  |   color: #fff; | ||||||
|  |   border: 1px solid #367fa9; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-btn-primary:disabled { | ||||||
|  |   background: #444; | ||||||
|  |   color: #fff; | ||||||
|  |   border: 1px solid #444; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /* input */ | ||||||
|  | .hz-u-input { | ||||||
|  |   -webkit-box-sizing: border-box; | ||||||
|  |   -moz-box-sizing: border-box; | ||||||
|  |   box-sizing: border-box; | ||||||
|  |   margin: 0; | ||||||
|  |   border: 0; | ||||||
|  |   padding: 0; | ||||||
|  |   border-radius: 0; | ||||||
|  |   font: inherit; | ||||||
|  |   color: inherit; | ||||||
|  |   vertical-align: middle; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-input { | ||||||
|  |   position: relative; | ||||||
|  |   z-index: 0; | ||||||
|  |   padding: 5px 6px; | ||||||
|  |   border: 1px solid #d2d6de; | ||||||
|  |   color: #555; | ||||||
|  |   background: #fff; | ||||||
|  |   -moz-border-radius: 3px; | ||||||
|  |   border-radius: 3px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-input::-webkit-input-placeholder { | ||||||
|  |   color: #bbb; | ||||||
|  |   filter: alpha(opacity=100); | ||||||
|  |   opacity: 1; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-input::-moz-placeholder { | ||||||
|  |   color: #bbb; | ||||||
|  |   filter: alpha(opacity=100); | ||||||
|  |   opacity: 1; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-input:-moz-placeholder { | ||||||
|  |   color: #bbb; | ||||||
|  |   filter: alpha(opacity=100); | ||||||
|  |   opacity: 1; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-input:-ms-placeholder { | ||||||
|  |   color: #bbb; | ||||||
|  |   filter: alpha(opacity=100); | ||||||
|  |   opacity: 1; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-input:focus { | ||||||
|  |   outline: 0; | ||||||
|  |   background: #fff; | ||||||
|  |   color: #555; | ||||||
|  |   border: 1px solid #3c8dbc; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-input:disabled { | ||||||
|  |   cursor: not-allowed; | ||||||
|  |   background: #eee; | ||||||
|  |   color: #999; | ||||||
|  |   border: 1px solid #d2d6de; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-input { | ||||||
|  |   width: 280px; | ||||||
|  |   height: 34px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-input.hz-u-input-success { | ||||||
|  |   color: #00a65a; | ||||||
|  |   border-color: #00a65a; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-input.hz-u-input-warning { | ||||||
|  |   color: #f39c12; | ||||||
|  |   border-color: #f39c12; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-input.hz-u-input-error { | ||||||
|  |   color: #dd4b39; | ||||||
|  |   border-color: #dd4b39; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-input.hz-u-input-blank { | ||||||
|  |   border-color: transparent; | ||||||
|  |   border-style: dashed; | ||||||
|  |   background: none; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-input.hz-u-input-blank:focus { | ||||||
|  |   border-color: #ddd; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /* formItem */ | ||||||
|  | .hz-u-formitem { | ||||||
|  |   display: inline-block; | ||||||
|  |   *zoom: 1; | ||||||
|  |   margin-bottom: 1em; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-formitem:before, | ||||||
|  | .hz-u-formitem:after { | ||||||
|  |   display: table; | ||||||
|  |   content: ""; | ||||||
|  |   line-height: 0; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-formitem:after { | ||||||
|  |   clear: both; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-formitem .hz-formitem_tt { | ||||||
|  |   display: block; | ||||||
|  |   float: left; | ||||||
|  |   text-align: right; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-formitem .hz-formitem_ct { | ||||||
|  |   display: block; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-formitem .hz-formitem_rqr { | ||||||
|  |   line-height: 28px; | ||||||
|  |   color: #dd4b39; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-formitem .hz-formitem_tt { | ||||||
|  |   line-height: 34px; | ||||||
|  |   width: 100px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-u-formitem .hz-formitem_ct { | ||||||
|  |   line-height: 34px; | ||||||
|  |   margin-left: 108px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /* icon */ | ||||||
|  | .hz-u-icon { | ||||||
|  |   display: inline-block; | ||||||
|  |   font: normal normal normal 14px/1 FontAwesome; | ||||||
|  |   font-size: inherit; | ||||||
|  |   text-rendering: auto; | ||||||
|  |   -webkit-font-smoothing: antialiased; | ||||||
|  |   -moz-osx-font-smoothing: grayscale; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /* label */ | ||||||
|  | .hz-u-label { | ||||||
|  |   display: inline-block; | ||||||
|  |   cursor: pointer; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /* margin */ | ||||||
|  | .hz-f-ml0 { | ||||||
|  |   margin-bottom: 0; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /* replicator */ | ||||||
|  | .hz-u-copy input[data-for-copy] { | ||||||
|  |   transform: translateZ(0); | ||||||
|  |   position: fixed; | ||||||
|  |   bottom: 0; | ||||||
|  |   right: 0; | ||||||
|  |   width: 1px; | ||||||
|  |   height: 1px; | ||||||
|  |   opacity: 0; | ||||||
|  |   overflow: hidden; | ||||||
|  |   z-index: -999; | ||||||
|  |   color: transparent; | ||||||
|  |   background-color: transparent; | ||||||
|  |   border: none; | ||||||
|  |   outline: none; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | @font-face { | ||||||
|  |   font-family: 'iconfont'; | ||||||
|  |   /* project id 525460 */ | ||||||
|  |   src: url('//at.alicdn.com/t/font_525460_d0ysfwzacahsemi.eot'); | ||||||
|  |   src: url('//at.alicdn.com/t/font_525460_d0ysfwzacahsemi.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_525460_d0ysfwzacahsemi.woff') format('woff'), url('//at.alicdn.com/t/font_525460_d0ysfwzacahsemi.ttf') format('truetype'), url('//at.alicdn.com/t/font_525460_d0ysfwzacahsemi.svg#iconfont') format('svg'); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-icon { | ||||||
|  |   font-family: "iconfont" !important; | ||||||
|  |   font-size: 20px; | ||||||
|  |   font-style: normal; | ||||||
|  |   text-align: center; | ||||||
|  |   user-select: none; | ||||||
|  |   -webkit-font-smoothing: antialiased; | ||||||
|  |   -moz-osx-font-smoothing: grayscale; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-icon-edit { | ||||||
|  |   position: absolute; | ||||||
|  |   top: -4px; | ||||||
|  |   left: 50%; | ||||||
|  |   transform: translateX(-50%); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-flex-img { | ||||||
|  |   display: flex; | ||||||
|  |   align-items: center; | ||||||
|  |   justify-content: center; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-flex-img img { | ||||||
|  |   width: 100%; | ||||||
|  |   height: 100%; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-icon-trash:before { | ||||||
|  |   content: "\e605"; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-edit-img { | ||||||
|  |   width: 100%; | ||||||
|  |   display: flex; | ||||||
|  |   justify-content: center; | ||||||
|  | 
 | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-edit-img img { | ||||||
|  |   max-width: 300px; | ||||||
|  |   max-height: 200px; | ||||||
|  |   margin-bottom: 10px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hz-edit-del { | ||||||
|  |   width: 100%; | ||||||
|  |   display: flex; | ||||||
|  |   justify-content: flex-end; | ||||||
|  | } | ||||||
|  | @ -0,0 +1,293 @@ | ||||||
|  | <template> | ||||||
|  |   <div class="hotzone-box"> | ||||||
|  |     <div class="hotzone-item"> | ||||||
|  |       <div ref="content" class="hz-m-wrap"> | ||||||
|  |         <img class="hz-u-img" :src="image" /> | ||||||
|  |         <ul class="hz-m-area" v-add-item> | ||||||
|  |           <zone | ||||||
|  |             class="hz-m-item" | ||||||
|  |             v-for="(zone, index) in zones" | ||||||
|  |             :key="index" | ||||||
|  |             :index="index" | ||||||
|  |             :setting="zone" | ||||||
|  |             :ref="`zone${index}`" | ||||||
|  |             @delItem="removeItem($event)" | ||||||
|  |             @changeInfo="changeInfo($event)" | ||||||
|  |           ></zone> | ||||||
|  |         </ul> | ||||||
|  |       </div> | ||||||
|  |     </div> | ||||||
|  |     <div> | ||||||
|  |       <div class="hotzone-add-box-body"> | ||||||
|  |         <div | ||||||
|  |           v-for="(zone, index) in zones" | ||||||
|  |           :key="index" | ||||||
|  |           class="hotzone-box-item-main" | ||||||
|  |         > | ||||||
|  |           <div class="hotzone-box-item wes-2"> | ||||||
|  |             <div>{{ index + 1 }}</div> | ||||||
|  |             <div @click="editZone(index)"> | ||||||
|  |               <div class="hotzone-box-item-text"> | ||||||
|  |                 {{ showZoneText(zone) }} | ||||||
|  |               </div> | ||||||
|  |             </div> | ||||||
|  |             <div class="flex"> | ||||||
|  |               <div class="hotzone-btn" @click="editZone(index)">修改</div> | ||||||
|  |                    | ||||||
|  |               <div class="hotzone-btn" @click="delZone(index)">删除</div> | ||||||
|  |             </div> | ||||||
|  |           </div> | ||||||
|  |         </div> | ||||||
|  |       </div> | ||||||
|  |       <div class="hotzone-add-box-footer" @click="addHotzone"> | ||||||
|  |         <svg | ||||||
|  |           viewBox="64 64 896 896" | ||||||
|  |           focusable="false" | ||||||
|  |           class="" | ||||||
|  |           data-icon="plus" | ||||||
|  |           width="1em" | ||||||
|  |           height="1em" | ||||||
|  |           fill="currentColor" | ||||||
|  |           aria-hidden="true" | ||||||
|  |         > | ||||||
|  |           <path | ||||||
|  |             d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" | ||||||
|  |           ></path> | ||||||
|  |           <path | ||||||
|  |             d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z" | ||||||
|  |           ></path> | ||||||
|  |         </svg> | ||||||
|  |         <div class="hotzone-add-box-text">添加热区</div> | ||||||
|  |       </div> | ||||||
|  |     </div> | ||||||
|  |   </div> | ||||||
|  | </template> | ||||||
|  | 
 | ||||||
|  | <script> | ||||||
|  | import Zone from "./Zone"; | ||||||
|  | import addItem from "../directives/addItem"; | ||||||
|  | 
 | ||||||
|  | export default { | ||||||
|  |   name: "HotZone", | ||||||
|  |   data() { | ||||||
|  |     return { | ||||||
|  |       zones: [], | ||||||
|  |     }; | ||||||
|  |   }, | ||||||
|  |   props: { | ||||||
|  |     image: { | ||||||
|  |       type: String, | ||||||
|  |       required: true, | ||||||
|  |     }, | ||||||
|  |     zonesInit: { | ||||||
|  |       type: Array, | ||||||
|  |       default: () => [], | ||||||
|  |     }, | ||||||
|  |     max: { | ||||||
|  |       type: Number, | ||||||
|  |     }, | ||||||
|  |   }, | ||||||
|  |   mounted() { | ||||||
|  |     this.zones = this.zonesInit.concat(); | ||||||
|  |   }, | ||||||
|  |   methods: { | ||||||
|  |     async addHotzone() { | ||||||
|  |       let perInfo = { | ||||||
|  |         topPer: 0.15, | ||||||
|  |         leftPer: 0.3, | ||||||
|  |         widthPer: 0.2, | ||||||
|  |         heightPer: 0.2, | ||||||
|  |         img: "", | ||||||
|  |         link: "", | ||||||
|  |         type: "", | ||||||
|  |         title: "", | ||||||
|  |       }; | ||||||
|  |       let images = await this.getImageSize(this.image); | ||||||
|  |       if (images) { | ||||||
|  |         if (images.height >= 1000) { | ||||||
|  |           perInfo.heightPer = this.convertNumberToDecimal(images.height) / (images.height / 1000); | ||||||
|  |         } else { | ||||||
|  |           perInfo.heightPer = this.convertNumberToDecimal(images.height); | ||||||
|  |         } | ||||||
|  |         perInfo.widthPer = this.convertNumberToDecimal(images.width) / 2; | ||||||
|  |       } | ||||||
|  |       this.addItem(perInfo); | ||||||
|  |     }, | ||||||
|  |     convertNumberToDecimal(num) { | ||||||
|  |       if (num >= 10000) { | ||||||
|  |         return num / 100000; | ||||||
|  |       } else if (num >= 1000) { | ||||||
|  |         return num / 10000; | ||||||
|  |       } else if (num >= 100) { | ||||||
|  |         return num / 1000; | ||||||
|  |       } else if (num >= 10) { | ||||||
|  |         return num / 100; | ||||||
|  |       } | ||||||
|  |     }, | ||||||
|  |     getImageSize(url) { | ||||||
|  |       return new Promise(function (resolve, reject) { | ||||||
|  |         let image = new Image(); | ||||||
|  |         image.onload = function () { | ||||||
|  |           resolve({ | ||||||
|  |             width: image.width, | ||||||
|  |             height: image.height, | ||||||
|  |           }); | ||||||
|  |         }; | ||||||
|  |         image.onerror = function () { | ||||||
|  |           reject(new Error("error")); | ||||||
|  |         }; | ||||||
|  |         image.src = url; | ||||||
|  |       }); | ||||||
|  |     }, | ||||||
|  |     editZone(index) { | ||||||
|  |       this.$refs[`zone${index}`][0].showModalFn(index); | ||||||
|  |     }, | ||||||
|  |     delZone(index) { | ||||||
|  |       this.$refs[`zone${index}`][0].delItem(index); | ||||||
|  |     }, | ||||||
|  |     showZoneText(zone) { | ||||||
|  |       switch (zone.type) { | ||||||
|  |         case "goods": | ||||||
|  |           return `商品:${zone.goodsName}`; | ||||||
|  |         case "category": | ||||||
|  |           return `分类:${zone.name}`; | ||||||
|  |         case "shops": | ||||||
|  |           return `店铺:${zone.storeName}`; | ||||||
|  |         case "pages": | ||||||
|  |           return `文章:${zone.title}`; | ||||||
|  |         case "marketing": | ||||||
|  |           return `促销活动商品:${zone.goodsName}`; | ||||||
|  |         case "other": | ||||||
|  |           return `${zone.title}`; | ||||||
|  |         default: | ||||||
|  |           return "请选择跳转链接"; | ||||||
|  |       } | ||||||
|  |     }, | ||||||
|  |     changeInfo(res) { | ||||||
|  |       let { info, index, zoneInfo } = res; | ||||||
|  |       info = { ...zoneInfo, ...info }; | ||||||
|  |       // 改变热区并发送change通知 | ||||||
|  |       Object.assign(this.zones[index], info); | ||||||
|  |       this.hasChange("changeInfo"); | ||||||
|  |       this.$forceUpdate(); | ||||||
|  |     }, | ||||||
|  |     addItem(setting) { | ||||||
|  |       this.zones.push(setting); | ||||||
|  |       this.$emit("choose"); | ||||||
|  |       // this.hasChange()  不应该发送通知,mouseup判定成功才应该发 | ||||||
|  |       // this.$emit('add', setting) | ||||||
|  |     }, | ||||||
|  |     eraseItem(index = this.zones.length - 1) { | ||||||
|  |       this.zones.splice(index, 1); | ||||||
|  |       this.$emit("erase", index); | ||||||
|  |     }, | ||||||
|  |     isOverRange() { | ||||||
|  |       let { max, zones } = this; | ||||||
|  | 
 | ||||||
|  |       return max && zones.length > max; | ||||||
|  |     }, | ||||||
|  |     overRange() { | ||||||
|  |       const index = this.zones.length - 1; | ||||||
|  | 
 | ||||||
|  |       this.zones.splice(index, 1); | ||||||
|  |       this.$emit("overRange", index); | ||||||
|  |     }, | ||||||
|  |     removeItem(index = this.zones.length - 1) { | ||||||
|  |       this.zones.splice(index, 1); | ||||||
|  |       this.hasChange("removeItem"); | ||||||
|  |       this.$emit("remove", index); | ||||||
|  |     }, | ||||||
|  |     changeItem(info, isAdd) { | ||||||
|  |       const index = this.zones.length - 1; | ||||||
|  |       // 改变热区并发送change通知 | ||||||
|  |       Object.assign(this.zones[index], info); | ||||||
|  |       this.hasChange("changeItem"); | ||||||
|  |       isAdd && this.$emit("add", this.zones[index]); | ||||||
|  |     }, | ||||||
|  |     hasChange(from) { | ||||||
|  |       this.$emit("change", this.zones); | ||||||
|  |     }, | ||||||
|  |   }, | ||||||
|  |   directives: { | ||||||
|  |     addItem, | ||||||
|  |   }, | ||||||
|  |   components: { | ||||||
|  |     Zone, | ||||||
|  |   }, | ||||||
|  | }; | ||||||
|  | </script> | ||||||
|  | 
 | ||||||
|  | <style scoped lang="scss"> | ||||||
|  | @import "../assets/styles/main.css"; | ||||||
|  | .hotzone-box { | ||||||
|  |   display: flex; | ||||||
|  |   justify-content: center; | ||||||
|  |   align-items: center; | ||||||
|  |   height: 468px; | ||||||
|  |   > div { | ||||||
|  |     margin: 6px; | ||||||
|  |     padding: 12px; | ||||||
|  |     border-radius: 10px; | ||||||
|  |     height: 100%; | ||||||
|  |   } | ||||||
|  |   > div:nth-of-type(1) { | ||||||
|  |     // display: flex; | ||||||
|  |     width: 50%; | ||||||
|  |     overflow: auto; | ||||||
|  |     // justify-content: center; | ||||||
|  |     background: #ededed; | ||||||
|  |   } | ||||||
|  |   > div:nth-of-type(2) { | ||||||
|  |     width: 50%; | ||||||
|  |     background: #f7f7f7; | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hotzone-add-box-body { | ||||||
|  |   height: 90%; | ||||||
|  |   overflow-y: auto; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hotzone-box-item-main { | ||||||
|  |   margin-top: 10px; | ||||||
|  |   margin-bottom: 20px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hotzone-box-item { | ||||||
|  |   align-items: center; | ||||||
|  |   display: flex; | ||||||
|  |   border-bottom: 1px solid #ededed; | ||||||
|  |   font-size: 12px; | ||||||
|  |   justify-content: space-between; | ||||||
|  |   padding: 5px 10px 0; | ||||||
|  |   width: 100%; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hotzone-add-box-footer { | ||||||
|  |   align-items: center; | ||||||
|  |   background: #fff; | ||||||
|  |   border: none; | ||||||
|  |   border-radius: 5px; | ||||||
|  |   color: #ff5c58; | ||||||
|  |   display: flex; | ||||||
|  |   height: 40px; | ||||||
|  |   justify-content: center; | ||||||
|  |   margin-top: 10px; | ||||||
|  |   cursor: pointer; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hotzone-btn { | ||||||
|  |   cursor: pointer; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hotzone-box-item-text { | ||||||
|  |   width: 200px; | ||||||
|  |   cursor: pointer; | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | .hotzone-add-box-text { | ||||||
|  |   font-size: 12px; | ||||||
|  |   line-height: 20px; | ||||||
|  |   margin: 0 0 0 4px; | ||||||
|  | } | ||||||
|  | </style> | ||||||
|  | @ -0,0 +1,244 @@ | ||||||
|  | <template> | ||||||
|  |   <li | ||||||
|  |     v-drag-item | ||||||
|  |     :style="{ | ||||||
|  |       top: zoneTop, | ||||||
|  |       left: zoneLeft, | ||||||
|  |       width: zoneWidth, | ||||||
|  |       height: zoneHeight, | ||||||
|  |     }" | ||||||
|  |   > | ||||||
|  |     <ul | ||||||
|  |       v-change-size | ||||||
|  |       class="hz-m-box" | ||||||
|  |       :class="{ | ||||||
|  |         'hz-z-hidden': tooSmall, | ||||||
|  |         'hz-m-hoverbox': !hideZone, | ||||||
|  |       }" | ||||||
|  |     > | ||||||
|  |       <li class="hz-u-index" :title="`热区${index + 1}`">{{ index + 1 }}</li> | ||||||
|  |        | ||||||
|  |       <li | ||||||
|  |         title="删除该热区" | ||||||
|  |         v-show="!hideZone" | ||||||
|  |         class="hz-u-close hz-icon hz-icon-trash" | ||||||
|  |         @click.prevent.stop="delItem(index)" | ||||||
|  |         @mousedown.stop | ||||||
|  |         @mouseup.stop | ||||||
|  |         @mousemove.stop | ||||||
|  |       ></li> | ||||||
|  |       <li | ||||||
|  |         title="编辑该热区" | ||||||
|  |         v-show="!hideZone" | ||||||
|  |         class="hz-u-close hz-icon hz-icon-edit" | ||||||
|  |         @click.prevent.stop="showModalFn(index)" | ||||||
|  |         @mousedown.stop | ||||||
|  |         @mouseup.stop | ||||||
|  |         @mousemove.stop | ||||||
|  |       > | ||||||
|  |         <img width="17" height="17" src="../assets/styles/icons8-edit-64.png"></img> | ||||||
|  |       </li> | ||||||
|  |       <li class="hz-flex-img"> | ||||||
|  |         <img class="hz-u-img" :src="zoneForm.img" /> | ||||||
|  |       </li> | ||||||
|  |       <li class="hz-u-square hz-u-square-tl" data-pointer="dealTL"></li> | ||||||
|  |       <li class="hz-u-square hz-u-square-tc" data-pointer="dealTC"></li> | ||||||
|  |       <li class="hz-u-square hz-u-square-tr" data-pointer="dealTR"></li> | ||||||
|  |       <li class="hz-u-square hz-u-square-cl" data-pointer="dealCL"></li> | ||||||
|  |       <li class="hz-u-square hz-u-square-cr" data-pointer="dealCR"></li> | ||||||
|  |       <li class="hz-u-square hz-u-square-bl" data-pointer="dealBL"></li> | ||||||
|  |       <li class="hz-u-square hz-u-square-bc" data-pointer="dealBC"></li> | ||||||
|  |       <li class="hz-u-square hz-u-square-br" data-pointer="dealBR"></li> | ||||||
|  |     </ul> | ||||||
|  |     | ||||||
|  |     <Modal | ||||||
|  |       v-model="showModal" | ||||||
|  |       title="编辑热区" | ||||||
|  |       draggable | ||||||
|  |       scrollable | ||||||
|  |       :mask="false" | ||||||
|  |       ok-text="保存" | ||||||
|  |       @on-ok="saveZone" | ||||||
|  |       @on-cancel="cancelZone" | ||||||
|  |     > | ||||||
|  |       <div> | ||||||
|  |         <div class="hz-edit-img"> | ||||||
|  |           <img class="show-image" :src="zoneForm.img" alt /> | ||||||
|  |         </div> | ||||||
|  | 
 | ||||||
|  |         <Form :model="zoneForm" :label-width="80"> | ||||||
|  |           <!-- <FormItem label="图片链接:"> | ||||||
|  |             <Input v-model="zoneForm.img"></Input> | ||||||
|  |             <Button size="small" type="primary" @click="handleSelectImg" | ||||||
|  |               >选择图片</Button | ||||||
|  |             > | ||||||
|  |             :v-model="zoneForm.type === 'goods' ? zoneForm.goodsName : zoneForm.link" | ||||||
|  |           </FormItem> --> | ||||||
|  |           <FormItem label="跳转链接:"> | ||||||
|  |             <Input type="textarea" v-if="zoneForm.type === 'other' && zoneForm.title === '外部链接'" v-model="zoneForm.link" ></Input> | ||||||
|  |             <Button size="small" type="primary" @click="handleSelectLink" | ||||||
|  |               >选择链接</Button | ||||||
|  |             > | ||||||
|  |           </FormItem> | ||||||
|  |         </Form> | ||||||
|  |       </div> | ||||||
|  |     </Modal> | ||||||
|  |     <!-- 选择商品。链接 --> | ||||||
|  |     <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog> | ||||||
|  |     <!-- 选择图片 --> | ||||||
|  |     <Modal width="1200px" v-model="picModelFlag" footer-hide> | ||||||
|  |       <ossManage | ||||||
|  |         @callback="callbackSelected" | ||||||
|  |         :isComponent="true" | ||||||
|  |         ref="ossManage" | ||||||
|  |       /> | ||||||
|  |     </Modal> | ||||||
|  |   </li> | ||||||
|  | </template> | ||||||
|  | 
 | ||||||
|  | <script> | ||||||
|  | import changeSize from "../directives/changeSize"; | ||||||
|  | import dragItem from "../directives/dragItem"; | ||||||
|  | import ossManage from "@/views/sys/oss-manage/ossManage"; | ||||||
|  | 
 | ||||||
|  | export default { | ||||||
|  |   name: "Zone", | ||||||
|  |   components: { | ||||||
|  |     ossManage, | ||||||
|  |   }, | ||||||
|  | 
 | ||||||
|  |   data() { | ||||||
|  |     return { | ||||||
|  |       zoneTop: "", | ||||||
|  |       zoneLeft: "", | ||||||
|  |       zoneWidth: "", | ||||||
|  |       zoneHeight: "", | ||||||
|  |       hideZone: false, | ||||||
|  |       tooSmall: false, | ||||||
|  |       showModal: false, | ||||||
|  |       picModelFlag: false, | ||||||
|  |       currentIndex: 0, | ||||||
|  |       currentShowIndex: -1, | ||||||
|  |       zoneForm: { | ||||||
|  |         img: "", | ||||||
|  |         link: "", | ||||||
|  |         type: "", | ||||||
|  |       }, | ||||||
|  |     }; | ||||||
|  |   }, | ||||||
|  |   props: ["index", "setting"], | ||||||
|  |   mounted() { | ||||||
|  |     this.setZoneInfo(this.setting); | ||||||
|  |   }, | ||||||
|  |   methods: { | ||||||
|  |     setZoneInfo(val) { | ||||||
|  |       this.zoneTop = this.getZoneStyle(val.topPer); | ||||||
|  |       this.zoneLeft = this.getZoneStyle(val.leftPer); | ||||||
|  |       this.zoneWidth = this.getZoneStyle(val.widthPer); | ||||||
|  |       this.zoneHeight = this.getZoneStyle(val.heightPer); | ||||||
|  |       this.tooSmall = val.widthPer < 0.01 && val.heightPer < 0.01; | ||||||
|  |       this.zoneForm.link = val.link; | ||||||
|  |       this.settingZone(val); | ||||||
|  |     }, | ||||||
|  |     handlehideZone(isHide = true) { | ||||||
|  |       if (this.hideZone === isHide) { | ||||||
|  |         return; | ||||||
|  |       } | ||||||
|  | 
 | ||||||
|  |       this.hideZone = isHide; | ||||||
|  |     }, | ||||||
|  |     changeInfo(info = {}) { | ||||||
|  |       const { index } = this; | ||||||
|  | 
 | ||||||
|  |       this.$emit("changeInfo", { | ||||||
|  |         info, | ||||||
|  |         index, | ||||||
|  |         zoneInfo: this.zoneForm, | ||||||
|  |       }); | ||||||
|  |     }, | ||||||
|  |     showModalFn(index) { | ||||||
|  |       this.showModal = true; | ||||||
|  |       this.currentIndex = index; | ||||||
|  |     }, | ||||||
|  |     // 选择图片 | ||||||
|  |     handleSelectImg() { | ||||||
|  |       this.$refs.ossManage.selectImage = true; | ||||||
|  |       this.picModelFlag = true; | ||||||
|  |     }, | ||||||
|  |     // 选择图片回调 | ||||||
|  |     callbackSelected(item) { | ||||||
|  |       this.picModelFlag = false; | ||||||
|  |       this.zoneForm.img = item.url; | ||||||
|  |     }, | ||||||
|  | 
 | ||||||
|  |     // 调起选择链接弹窗 | ||||||
|  |     handleSelectLink(item, index) { | ||||||
|  |       if (item) this.selectedNav = item; | ||||||
|  |       this.$refs.liliDialog.open("link"); | ||||||
|  |     }, | ||||||
|  |     // 已选链接 | ||||||
|  |     selectedLink(val) { | ||||||
|  |       this.zoneForm.link = this.$options.filters.formatLinkType(val); | ||||||
|  |       this.settingZone(val); | ||||||
|  |       this.changeInfo(this.zoneForm); | ||||||
|  |     }, | ||||||
|  |     settingZone(val) { | ||||||
|  |       this.zoneForm.type = val.___type || val.type; | ||||||
|  |       this.zoneForm.title = val.title; | ||||||
|  |       switch (val.___type) { | ||||||
|  |         case "goods": | ||||||
|  |           this.zoneForm.id = val.id; | ||||||
|  |           this.zoneForm.goodsId = val.goodsId; | ||||||
|  |           this.zoneForm.goodsName = val.goodsName; | ||||||
|  |           break; | ||||||
|  |         case "category": | ||||||
|  |           this.zoneForm.id = val.allId; | ||||||
|  |           this.zoneForm.name = val.name; | ||||||
|  |           break; | ||||||
|  |         case "shops": | ||||||
|  |           this.zoneForm.id = val.id; | ||||||
|  |           this.zoneForm.storeName = val.storeName; | ||||||
|  |           break; | ||||||
|  |         case "pages": | ||||||
|  |           this.zoneForm.id = val.id; | ||||||
|  |           this.zoneForm.___path = val.___path; | ||||||
|  |           this.zoneForm.title = val.title; | ||||||
|  |           break; | ||||||
|  |         case "marketing": | ||||||
|  |           this.zoneForm.id = val.id; | ||||||
|  |           this.zoneForm.goodsId = val.goodsId; | ||||||
|  |           this.zoneForm.goodsName = val.goodsName; | ||||||
|  |           break; | ||||||
|  |         default: | ||||||
|  |           break; | ||||||
|  |       } | ||||||
|  |     }, | ||||||
|  |     saveZone() {}, | ||||||
|  |     cancelZone() { | ||||||
|  |       this.showModal = false; | ||||||
|  |     }, | ||||||
|  |     delZone() { | ||||||
|  |       this.delItem(this.currentIndex); | ||||||
|  |     }, | ||||||
|  |     delItem(index) { | ||||||
|  |       this.$emit("delItem", index); | ||||||
|  |     }, | ||||||
|  |     getZoneStyle(val) { | ||||||
|  |       return `${(val || 0) * 100}%`; | ||||||
|  |     }, | ||||||
|  |   }, | ||||||
|  | 
 | ||||||
|  |   watch: { | ||||||
|  |     setting: { | ||||||
|  |       handler: function (val) { | ||||||
|  |         this.setZoneInfo(val); | ||||||
|  |       }, | ||||||
|  |       deep: true, | ||||||
|  |     }, | ||||||
|  |   }, | ||||||
|  |   directives: { | ||||||
|  |     changeSize, | ||||||
|  |     dragItem, | ||||||
|  |   }, | ||||||
|  | }; | ||||||
|  | </script> | ||||||
|  | @ -0,0 +1,101 @@ | ||||||
|  | import _ from '../utils' | ||||||
|  | 
 | ||||||
|  | export default { | ||||||
|  |   bind: function (el, binding, vnode) { | ||||||
|  |     const MIN_LIMIT = _.MIN_LIMIT | ||||||
|  | 
 | ||||||
|  |     el.addEventListener('mousedown', handleMouseDown, { passive: false }) | ||||||
|  | 
 | ||||||
|  |     function handleMouseDown(e) { | ||||||
|  |       // console.log('additem', e)
 | ||||||
|  |       e && e.preventDefault() | ||||||
|  | 
 | ||||||
|  |       let itemInfo = { | ||||||
|  |         top: _.getDistanceY(e, el), | ||||||
|  |         left: _.getDistanceX(e, el), | ||||||
|  |         width: 0, | ||||||
|  |         height: 0 | ||||||
|  |       } | ||||||
|  |       let container = _.getOffset(el) | ||||||
|  | 
 | ||||||
|  |       // Only used once at the beginning of init
 | ||||||
|  |       let setting = { | ||||||
|  |         topPer: _.decimalPoint(itemInfo.top / container.height), | ||||||
|  |         leftPer: _.decimalPoint(itemInfo.left / container.width), | ||||||
|  |         widthPer: 0, | ||||||
|  |         heightPer: 0 | ||||||
|  |       } | ||||||
|  |       let preX = _.getPageX(e) | ||||||
|  |       let preY = _.getPageY(e) | ||||||
|  | 
 | ||||||
|  |       vnode.context.addItem(setting)// 这里去添加并发送了add通知,不应该发送通知
 | ||||||
|  | 
 | ||||||
|  |       window.addEventListener('mousemove', handleChange, { passive: false }) | ||||||
|  |       window.addEventListener('mouseup', handleMouseUp, { passive: false }) | ||||||
|  | 
 | ||||||
|  |       function handleChange(e) { | ||||||
|  |         e && e.preventDefault() | ||||||
|  | 
 | ||||||
|  |         let moveX = _.getPageX(e) - preX | ||||||
|  |         let moveY = _.getPageY(e) - preY | ||||||
|  |         preX = _.getPageX(e) | ||||||
|  |         preY = _.getPageY(e) | ||||||
|  | 
 | ||||||
|  |         // Not consider the direction of movement first, consider only the lower right drag point
 | ||||||
|  |         let minLimit = 0 | ||||||
|  |         // 添加热区时,判定鼠标释放时,满足(热区大于48*48时)条件时生效
 | ||||||
|  |         let styleInfo = _.dealBR(itemInfo, moveX, moveY, minLimit) | ||||||
|  | 
 | ||||||
|  |         // Boundary value processing 改变热区大小时边界条件的处理
 | ||||||
|  |         itemInfo = _.dealEdgeValue(itemInfo, styleInfo, container, vnode.context.zones) | ||||||
|  | 
 | ||||||
|  |         Object.assign(el.lastElementChild.style, { | ||||||
|  |           top: `${itemInfo.top}px`, | ||||||
|  |           left: `${itemInfo.left}px`, | ||||||
|  |           width: `${itemInfo.width}px`, | ||||||
|  |           height: `${itemInfo.height}px` | ||||||
|  |         }) | ||||||
|  |       } | ||||||
|  | 
 | ||||||
|  |       function handleMouseUp() { | ||||||
|  |         let perInfo = { | ||||||
|  |           topPer: _.decimalPoint(itemInfo.top / container.height), | ||||||
|  |           leftPer: _.decimalPoint(itemInfo.left / container.width), | ||||||
|  |           widthPer: _.decimalPoint(itemInfo.width / container.width), | ||||||
|  |           heightPer: _.decimalPoint(itemInfo.height / container.height), | ||||||
|  |           img: "", | ||||||
|  |           link: "", | ||||||
|  |           type: "", | ||||||
|  |           title: "" | ||||||
|  |         } | ||||||
|  | 
 | ||||||
|  |         if (vnode.context.isOverRange()) { | ||||||
|  |           vnode.context.overRange() // 判断超出个数限制,给overRange钩子抛回调
 | ||||||
|  |         } else if (container.height < MIN_LIMIT && itemInfo.width > MIN_LIMIT) { | ||||||
|  |           vnode.context.changeItem(Object.assign(perInfo, { | ||||||
|  |             topPer: 0, | ||||||
|  |             heightPer: 1 | ||||||
|  |           }), true) | ||||||
|  |         } else if (container.width < MIN_LIMIT && itemInfo.height > MIN_LIMIT) { | ||||||
|  |           vnode.context.changeItem(Object.assign(perInfo, { | ||||||
|  |             leftper: 0, | ||||||
|  |             widthPer: 1 | ||||||
|  |           }), true) | ||||||
|  |         } else if (itemInfo.width > MIN_LIMIT && itemInfo.height > MIN_LIMIT) { | ||||||
|  |           vnode.context.changeItem(perInfo, true) | ||||||
|  |         } else { | ||||||
|  |           // 当添加区域超出范围或小于最小区域(48*48)时触发,删除当亲绘制的热区并发送erase事件通知
 | ||||||
|  |           vnode.context.eraseItem() | ||||||
|  |         } | ||||||
|  | 
 | ||||||
|  |         window.removeEventListener('mousemove', handleChange) | ||||||
|  |         window.removeEventListener('mouseup', handleMouseUp) | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|  |     el.$destroy = () => el.removeEventListener('mousedown', handleMouseDown) | ||||||
|  |   }, | ||||||
|  |   unbind: function (el) { | ||||||
|  |     el.$destroy() | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | @ -0,0 +1,91 @@ | ||||||
|  | import _ from '../utils' | ||||||
|  | 
 | ||||||
|  | export default { | ||||||
|  |   bind: function (el, binding, vnode) { | ||||||
|  |     el.addEventListener('mousedown', handleMouseDown,{ passive: false }) | ||||||
|  | 
 | ||||||
|  |     function handleMouseDown (e) { | ||||||
|  |       let pointer = e.target.dataset.pointer //元素上绑定的方法名
 | ||||||
|  | 
 | ||||||
|  |       if (!pointer) { | ||||||
|  |         return | ||||||
|  |       } | ||||||
|  | 
 | ||||||
|  |       e && e.stopPropagation() | ||||||
|  | 
 | ||||||
|  |       let zone = el.parentNode | ||||||
|  |       let setting = vnode.context.setting | ||||||
|  |       let currentIndex = vnode.context.index | ||||||
|  |       let container = _.getOffset(zone.parentNode) | ||||||
|  |       let itemInfo = { | ||||||
|  |         width: _.getOffset(zone).width || 0, | ||||||
|  |         height: _.getOffset(zone).height || 0, | ||||||
|  |         top: setting.topPer * container.height || 0, | ||||||
|  |         left: setting.leftPer * container.width || 0 | ||||||
|  |       } | ||||||
|  |       let preX = _.getPageX(e) | ||||||
|  |       let preY = _.getPageY(e) | ||||||
|  |       let flag | ||||||
|  | 
 | ||||||
|  |       // Hide the info displayed by hover
 | ||||||
|  |       vnode.context.handlehideZone(true) | ||||||
|  | 
 | ||||||
|  |       window.addEventListener('mousemove', handleChange,{ passive: false }) | ||||||
|  |       window.addEventListener('mouseup', handleMouseUp,{ passive: false }) | ||||||
|  | 
 | ||||||
|  |       function handleChange (e) { | ||||||
|  |         e && e.preventDefault() | ||||||
|  |         flag = true | ||||||
|  | 
 | ||||||
|  |         let moveX = _.getPageX(e) - preX | ||||||
|  |         let moveY = _.getPageY(e) - preY | ||||||
|  | 
 | ||||||
|  |         preX = _.getPageX(e) | ||||||
|  |         preY = _.getPageY(e) | ||||||
|  | 
 | ||||||
|  |         // Handling the situation when different dragging points are selected
 | ||||||
|  |         let styleInfo = _[pointer](itemInfo, moveX, moveY)//调用对应的方法
 | ||||||
|  |         // Boundary value processing
 | ||||||
|  |         itemInfo = _.dealEdgeValue(itemInfo, styleInfo, container, vnode.context.$parent.zones, currentIndex) | ||||||
|  | 
 | ||||||
|  |         Object.assign(zone.style, { | ||||||
|  |           top: `${itemInfo.top}px`, | ||||||
|  |           left: `${itemInfo.left}px`, | ||||||
|  |           width: `${itemInfo.width}px`, | ||||||
|  |           height: `${itemInfo.height}px` | ||||||
|  |         }) | ||||||
|  |       } | ||||||
|  | 
 | ||||||
|  |       function handleMouseUp () { | ||||||
|  |         if (flag) { | ||||||
|  |           flag = false | ||||||
|  |           let perInfo = { | ||||||
|  |             topPer: _.decimalPoint(itemInfo.top / container.height), | ||||||
|  |             leftPer: _.decimalPoint(itemInfo.left / container.width), | ||||||
|  |             widthPer: _.decimalPoint(itemInfo.width / container.width), | ||||||
|  |             heightPer: _.decimalPoint(itemInfo.height / container.height) | ||||||
|  |           } | ||||||
|  |           vnode.context.changeInfo(perInfo) | ||||||
|  | 
 | ||||||
|  |           // 兼容数据无变更情况下导致 computed 不更新,数据仍为 px 时 resize 出现的问题
 | ||||||
|  |           Object.assign(zone.style, { | ||||||
|  |             top: `${itemInfo.top}px`, | ||||||
|  |             left: `${itemInfo.left}px`, | ||||||
|  |             width: `${itemInfo.width}px`, | ||||||
|  |             height: `${itemInfo.height}px` | ||||||
|  |           }) | ||||||
|  |         } | ||||||
|  |         // Show the info
 | ||||||
|  |         vnode.context.handlehideZone(false) | ||||||
|  | 
 | ||||||
|  |         window.removeEventListener('mousemove', handleChange) | ||||||
|  |         window.removeEventListener('mouseup', handleMouseUp) | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|  |     el.$destroy = () => el.removeEventListener('mousedown', handleMouseDown) | ||||||
|  |   }, | ||||||
|  |   unbind: function (el) { | ||||||
|  |     el.$destroy() | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | @ -0,0 +1,108 @@ | ||||||
|  | import _ from '../utils' | ||||||
|  | 
 | ||||||
|  | export default { | ||||||
|  |   bind: function (el, binding, vnode) { | ||||||
|  |     el.addEventListener('mousedown', handleMouseDown) | ||||||
|  |     let collision | ||||||
|  |     function handleMouseDown (e) { | ||||||
|  |       e && e.stopPropagation() | ||||||
|  |       let container = _.getOffset(el.parentNode) | ||||||
|  |       let preX = _.getPageX(e) | ||||||
|  |       let preY = _.getPageY(e) | ||||||
|  |       let topPer | ||||||
|  |       let leftPer | ||||||
|  |       let flag | ||||||
|  | 
 | ||||||
|  |       window.addEventListener('mousemove', handleChange,{ passive: false }) | ||||||
|  |       window.addEventListener('mouseup', handleMouseUp,{ passive: false }) | ||||||
|  | 
 | ||||||
|  |       function handleChange (e) { | ||||||
|  |         e && e.preventDefault() | ||||||
|  |         flag = true | ||||||
|  |         collision = false | ||||||
|  |         // Hide the info displayed by hover
 | ||||||
|  |         vnode.context.handlehideZone(true) | ||||||
|  | 
 | ||||||
|  |         let setting = vnode.context.setting | ||||||
|  |         let currentIndex = vnode.context.index | ||||||
|  |         let moveX = _.getPageX(e) - preX | ||||||
|  |         let moveY = _.getPageY(e) - preY | ||||||
|  | 
 | ||||||
|  |         setting.topPer = setting.topPer || 0 | ||||||
|  |         setting.leftPer = setting.leftPer || 0 | ||||||
|  |         topPer = _.decimalPoint(moveY / container.height + setting.topPer) | ||||||
|  |         leftPer = _.decimalPoint(moveX / container.width + setting.leftPer) | ||||||
|  | 
 | ||||||
|  |         // Hotzone moving boundary processing
 | ||||||
|  |         if (topPer < 0) { | ||||||
|  |           topPer = 0 | ||||||
|  |           moveY = -container.height * setting.topPer | ||||||
|  |         } | ||||||
|  | 
 | ||||||
|  |         if (leftPer < 0) { | ||||||
|  |           leftPer = 0 | ||||||
|  |           moveX = -container.width * setting.leftPer | ||||||
|  |         } | ||||||
|  | 
 | ||||||
|  |         if (topPer + setting.heightPer > 1) { | ||||||
|  |           topPer = 1 - setting.heightPer | ||||||
|  |           moveY = container.height * (topPer - setting.topPer) | ||||||
|  |         } | ||||||
|  | 
 | ||||||
|  |         if (leftPer + setting.widthPer > 1) { | ||||||
|  |           leftPer = 1 - setting.widthPer | ||||||
|  |           moveX = container.width * (leftPer - setting.leftPer) | ||||||
|  |         } | ||||||
|  |         // 拖拽碰撞检测
 | ||||||
|  |         if (vnode.context.$parent.zones.length > 1) { | ||||||
|  |           let currentzones = JSON.parse(JSON.stringify(vnode.context.$parent.zones)).map((zone) => { | ||||||
|  |             return { | ||||||
|  |               left: (zone.leftPer || 0) * container.width, | ||||||
|  |               top: (zone.topPer || 0) * container.height, | ||||||
|  |               width: (zone.widthPer || 0) * container.width, | ||||||
|  |               height: (zone.heightPer || 0) * container.height | ||||||
|  |             } | ||||||
|  |           }) | ||||||
|  |           // 矫正
 | ||||||
|  |           let changeSetting = {} | ||||||
|  |           changeSetting.left = setting.leftPer * container.width + moveX | ||||||
|  |           changeSetting.top = setting.topPer * container.height + moveY | ||||||
|  |           changeSetting.width = setting.widthPer * container.width | ||||||
|  |           changeSetting.height = setting.heightPer * container.height | ||||||
|  |           // 碰撞检测
 | ||||||
|  |           for (let i = 0, len = currentzones.length; i < len; i++) { | ||||||
|  |             if (currentIndex !== i && _.handleEgdeCollisions(currentzones[i], changeSetting)) { | ||||||
|  |               collision = true | ||||||
|  |               break | ||||||
|  |             } | ||||||
|  |           } | ||||||
|  |         } | ||||||
|  |         el.style.transform = `translate(${moveX}px, ${moveY}px)` | ||||||
|  |       } | ||||||
|  | 
 | ||||||
|  |       function handleMouseUp () { | ||||||
|  |         if (flag) { | ||||||
|  |           flag = false | ||||||
|  |           el.style.transform = 'translate(0, 0)' | ||||||
|  |           if (!collision) { | ||||||
|  |             vnode.context.changeInfo({ | ||||||
|  |               topPer, | ||||||
|  |               leftPer | ||||||
|  |             }) | ||||||
|  |           } | ||||||
|  |         } | ||||||
|  | 
 | ||||||
|  |         // Show the info
 | ||||||
|  |         vnode.context.handlehideZone(false) | ||||||
|  | 
 | ||||||
|  |         window.removeEventListener('mousemove', handleChange) | ||||||
|  |         window.removeEventListener('mouseup', handleMouseUp) | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|  |     el.$destroy = () => el.removeEventListener('mousedown', handleMouseDown) | ||||||
|  |   }, | ||||||
|  |   unbind: function (el) { | ||||||
|  |     el.$destroy() | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | @ -0,0 +1,7 @@ | ||||||
|  | import hotzone from './index.vue' | ||||||
|  | 
 | ||||||
|  | hotzone.install = (Vue) => { | ||||||
|  |   Vue.component(hotzone.name, hotzone) | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | export default hotzone | ||||||
|  | @ -0,0 +1,69 @@ | ||||||
|  | <template> | ||||||
|  |   <Modal | ||||||
|  |     :styles="{ top: '120px' }" | ||||||
|  |     width="800" | ||||||
|  |     @on-cancel="clickClose" | ||||||
|  |     @on-ok="clickOK" | ||||||
|  |     v-model="flag" | ||||||
|  |     :mask-closable="false" | ||||||
|  |     title="绘制热区" | ||||||
|  |     scrollable | ||||||
|  |   > | ||||||
|  |     <template v-if="flag"> | ||||||
|  |       <hotzone | ||||||
|  |         ref="hotzone" | ||||||
|  |         @change="changeHotzone" | ||||||
|  |         :zonesInit="res.zoneInfo" | ||||||
|  |         :image="res.img" | ||||||
|  |       ></hotzone> | ||||||
|  |     </template> | ||||||
|  |   </Modal> | ||||||
|  | </template> | ||||||
|  | <script> | ||||||
|  | import hotzone from "./components/Hotzone.vue"; | ||||||
|  | 
 | ||||||
|  | export default { | ||||||
|  |   components: { | ||||||
|  |     hotzone, | ||||||
|  |   }, | ||||||
|  |   data() { | ||||||
|  |     return { | ||||||
|  |       flag: false, // modal显隐 | ||||||
|  |     }; | ||||||
|  |   }, | ||||||
|  |   props: ["res"], | ||||||
|  |   mounted() {}, | ||||||
|  |   methods: { | ||||||
|  |     changeHotzone(info) { | ||||||
|  |       this.$emit("changeZone", info); | ||||||
|  |     }, | ||||||
|  |     // 关闭弹窗 | ||||||
|  |     clickClose() { | ||||||
|  |       this.$emit("closeFlag", false); | ||||||
|  |     }, | ||||||
|  |     // 点击确认 | ||||||
|  |     clickOK() { | ||||||
|  |       this.clickClose(); | ||||||
|  |     }, | ||||||
|  |     // 打开组件方法 | ||||||
|  |     open(type, mutiple) { | ||||||
|  |       this.flag = true; | ||||||
|  |     }, | ||||||
|  |     // 关闭组件 | ||||||
|  |     close() { | ||||||
|  |       this.flag = false; | ||||||
|  |     }, | ||||||
|  |   }, | ||||||
|  | }; | ||||||
|  | </script> | ||||||
|  | <style scoped lang="scss"> | ||||||
|  | /deep/ .ivu-modal { | ||||||
|  |   overflow: hidden; | ||||||
|  |   height: 650px !important; | ||||||
|  | } | ||||||
|  | /deep/ .ivu-modal-body { | ||||||
|  |   width: 100%; | ||||||
|  |   height: 500px; | ||||||
|  |   overflow: hidden; | ||||||
|  | } | ||||||
|  | </style> | ||||||
|  | @ -0,0 +1,274 @@ | ||||||
|  | let _ = { | ||||||
|  |   MIN_LIMIT: 48, // Min size of zone
 | ||||||
|  |   DECIMAL_PLACES: 4 // Hotzone positioning decimal point limit number of digits
 | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /** | ||||||
|  |  * Get a power result of 10 for the power of the constant | ||||||
|  |  * @return {Number} | ||||||
|  |  */ | ||||||
|  | _.getMultiple = (decimalPlaces = _.DECIMAL_PLACES) => { | ||||||
|  |   return Math.pow(10, decimalPlaces) | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /** | ||||||
|  |  * Limit decimal places | ||||||
|  |  * @param  {Number} num | ||||||
|  |  * @return {Number} | ||||||
|  |  */ | ||||||
|  | _.decimalPoint = (val = 0) => { // 处理js小数点计算不精确问题,先放再缩小
 | ||||||
|  |   return Math.round(val * _.getMultiple()) / _.getMultiple() || 0 | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /** | ||||||
|  |  * Get element width and height | ||||||
|  |  * @param  {Object} elem | ||||||
|  |  * @return {Object} | ||||||
|  |  */ | ||||||
|  | _.getOffset = (elem = {}) => ({ | ||||||
|  |   width: elem.clientWidth || 0, | ||||||
|  |   height: elem.clientHeight || 0 | ||||||
|  | }) | ||||||
|  | 
 | ||||||
|  | /** | ||||||
|  |  * Get pageX | ||||||
|  |  * @param  {Object} e | ||||||
|  |  * @return {Number} | ||||||
|  |  */ | ||||||
|  | _.getPageX = (e) => ('pageX' in e) ? e.pageX : e.touches[0].pageX | ||||||
|  | 
 | ||||||
|  | /** | ||||||
|  |  * Get pageY | ||||||
|  |  * @param  {Object} e | ||||||
|  |  * @return {Number} | ||||||
|  |  */ | ||||||
|  | _.getPageY = (e) => ('pageY' in e) ? e.pageY : e.touches[0].pageY | ||||||
|  | 
 | ||||||
|  | /** | ||||||
|  |  * Gets the abscissa value of the mouse click relative to the target node | ||||||
|  |  * @param  {Object} e | ||||||
|  |  * @param  {Object} container | ||||||
|  |  * @return {Number} | ||||||
|  |  */ | ||||||
|  | _.getDistanceX = (e, container) => | ||||||
|  |   _.getPageX(e) - (container.getBoundingClientRect().left + window.pageXOffset) | ||||||
|  | 
 | ||||||
|  | /** | ||||||
|  |  * Gets the ordinate value of the mouse click relative to the target node | ||||||
|  |  * @param  {Object} e | ||||||
|  |  * @param  {Object} container | ||||||
|  |  * @return {Number} | ||||||
|  |  */ | ||||||
|  | _.getDistanceY = (e, container) => | ||||||
|  |   _.getPageY(e) - (container.getBoundingClientRect().top + window.pageYOffset) | ||||||
|  | 
 | ||||||
|  | // 检测区域是否有碰撞 true 有碰撞交集 ,false 无碰撞
 | ||||||
|  | _.handleEgdeCollisions = (rect1, rect2) => { | ||||||
|  |   const l1 = { left: rect1.left, top: rect1.top } | ||||||
|  |   const r1 = { left: rect1.left + rect1.width, top: rect1.top + rect1.height } | ||||||
|  |   const l2 = { left: rect2.left, top: rect2.top } | ||||||
|  |   const r2 = { left: rect2.left + rect2.width, top: rect2.top + rect2.height } | ||||||
|  |   return !( | ||||||
|  |     l1.left > r2.left || | ||||||
|  |     l2.left > r1.left || | ||||||
|  |     l1.top > r2.top || | ||||||
|  |     l2.top > r1.top | ||||||
|  |   ) | ||||||
|  | } | ||||||
|  | /** | ||||||
|  |  * Treatment of boundary conditions when changing the size of the hotzone 改变热区大小时边界条件的处理(如果要避免热区重叠,代码要加载这里) | ||||||
|  |  * @param {Object} itemInfo | ||||||
|  |  * @param {Object} styleInfo | ||||||
|  |  * @param {Object} container | ||||||
|  |  */ | ||||||
|  | _.dealEdgeValue = (itemInfo, styleInfo, container, zones, currentIndex = zones.length - 1) => { | ||||||
|  |    | ||||||
|  |   if (Object.prototype.hasOwnProperty.call(styleInfo, "left") && styleInfo.left < 0) { | ||||||
|  |     styleInfo.left = 0 | ||||||
|  |     styleInfo.width = itemInfo.width + itemInfo.left | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   if (Object.prototype.hasOwnProperty.call(styleInfo, "top") && styleInfo.top < 0) { | ||||||
|  |     styleInfo.top = 0 | ||||||
|  |     styleInfo.height = itemInfo.height + itemInfo.top | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   if (!Object.prototype.hasOwnProperty.call(styleInfo, "left") && Object.prototype.hasOwnProperty.call(styleInfo, "width")) { | ||||||
|  |     if (itemInfo.left + styleInfo.width > container.width) { | ||||||
|  |       styleInfo.width = container.width - itemInfo.left | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   if (!Object.prototype.hasOwnProperty.call(styleInfo, "top") && Object.prototype.hasOwnProperty.call(styleInfo, "height")) { | ||||||
|  |     if (itemInfo.top + styleInfo.height > container.height) { | ||||||
|  |       styleInfo.height = container.height - itemInfo.top | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  |   // 与其他热区重叠,则修正 检测是否发生碰撞
 | ||||||
|  |   if (zones.length > 1) { | ||||||
|  |     let currentzones = JSON.parse(JSON.stringify(zones)).map((zone) => { | ||||||
|  |       return { | ||||||
|  |         left: (zone.leftPer || 0) * container.width, | ||||||
|  |         top: (zone.topPer || 0) * container.height, | ||||||
|  |         width: (zone.widthPer || 0) * container.width, | ||||||
|  |         height: (zone.heightPer || 0) * container.height | ||||||
|  |       } | ||||||
|  |     }) | ||||||
|  |     let current = { ...itemInfo, ...styleInfo } | ||||||
|  |     for (let i = 0, len = currentzones.length; i < len; i++) { | ||||||
|  |       if (currentIndex !== i && _.handleEgdeCollisions(currentzones[i], current)) { | ||||||
|  |         return itemInfo | ||||||
|  |       } | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   return Object.assign(itemInfo, styleInfo) | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | /** | ||||||
|  |  * Handle different drag points, capital letters mean: T-top,L-left,C-center,R-right,B-bottom | ||||||
|  |  * @param  {Object} itemInfo | ||||||
|  |  * @param  {Number} moveX | ||||||
|  |  * @param  {Number} moveY | ||||||
|  |  * @return {Object} | ||||||
|  |  */ | ||||||
|  | _.dealTL = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => { | ||||||
|  |   let styleInfo = {} | ||||||
|  |   let width = itemInfo.width - moveX | ||||||
|  |   let height = itemInfo.height - moveY | ||||||
|  | 
 | ||||||
|  |   if (width >= Math.min(minLimit, itemInfo.width)) { | ||||||
|  |     Object.assign(styleInfo, { | ||||||
|  |       width, | ||||||
|  |       left: itemInfo.left + moveX | ||||||
|  |     }) | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   if (height >= Math.min(minLimit, itemInfo.height)) { | ||||||
|  |     Object.assign(styleInfo, { | ||||||
|  |       height, | ||||||
|  |       top: itemInfo.top + moveY | ||||||
|  |     }) | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   return styleInfo | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | _.dealTC = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => { | ||||||
|  |   let styleInfo = {} | ||||||
|  |   let height = itemInfo.height - moveY | ||||||
|  | 
 | ||||||
|  |   if (height >= Math.min(minLimit, itemInfo.height)) { | ||||||
|  |     styleInfo = { | ||||||
|  |       height, | ||||||
|  |       top: itemInfo.top + moveY | ||||||
|  |     } | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   return styleInfo | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | _.dealTR = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => { | ||||||
|  |   let styleInfo = {} | ||||||
|  |   let width = itemInfo.width + moveX | ||||||
|  |   let height = itemInfo.height - moveY | ||||||
|  | 
 | ||||||
|  |   if (width >= Math.min(minLimit, itemInfo.width)) { | ||||||
|  |     Object.assign(styleInfo, { | ||||||
|  |       width | ||||||
|  |     }) | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   if (height >= Math.min(minLimit, itemInfo.height)) { | ||||||
|  |     Object.assign(styleInfo, { | ||||||
|  |       height, | ||||||
|  |       top: itemInfo.top + moveY | ||||||
|  |     }) | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   return styleInfo | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | _.dealCL = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => { | ||||||
|  |   let styleInfo = {} | ||||||
|  |   let width = itemInfo.width - moveX | ||||||
|  | 
 | ||||||
|  |   if (width >= Math.min(minLimit, itemInfo.width)) { | ||||||
|  |     Object.assign(styleInfo, { | ||||||
|  |       width, | ||||||
|  |       left: itemInfo.left + moveX | ||||||
|  |     }) | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   return styleInfo | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | _.dealCR = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => { | ||||||
|  |   let styleInfo = {} | ||||||
|  |   let width = itemInfo.width + moveX | ||||||
|  | 
 | ||||||
|  |   if (width >= Math.min(minLimit, itemInfo.width)) { | ||||||
|  |     Object.assign(styleInfo, { | ||||||
|  |       width | ||||||
|  |     }) | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   return styleInfo | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | _.dealBL = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => { | ||||||
|  |   let styleInfo = {} | ||||||
|  |   let width = itemInfo.width - moveX | ||||||
|  |   let height = itemInfo.height + moveY | ||||||
|  | 
 | ||||||
|  |   if (width >= Math.min(minLimit, itemInfo.width)) { | ||||||
|  |     Object.assign(styleInfo, { | ||||||
|  |       width, | ||||||
|  |       left: itemInfo.left + moveX | ||||||
|  |     }) | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   if (height >= Math.min(minLimit, itemInfo.height)) { | ||||||
|  |     Object.assign(styleInfo, { | ||||||
|  |       height | ||||||
|  |     }) | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   return styleInfo | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | _.dealBC = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => { | ||||||
|  |   let styleInfo = {} | ||||||
|  |   let height = itemInfo.height + moveY | ||||||
|  | 
 | ||||||
|  |   if (height >= Math.min(minLimit, itemInfo.height)) { | ||||||
|  |     Object.assign(styleInfo, { | ||||||
|  |       height | ||||||
|  |     }) | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   return styleInfo | ||||||
|  | } | ||||||
|  | // 添加热区时,判定鼠标释放点满足一下条件时生效
 | ||||||
|  | _.dealBR = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => { | ||||||
|  |   let styleInfo = {} | ||||||
|  |   let width = itemInfo.width + moveX | ||||||
|  |   let height = itemInfo.height + moveY | ||||||
|  |   if (width >= Math.min(minLimit, itemInfo.width)) { | ||||||
|  |     // 改变后的宽度 >= min(之前宽度,内置的最小宽度标准),即生效
 | ||||||
|  |     Object.assign(styleInfo, { | ||||||
|  |       width | ||||||
|  |     }) | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   if (height >= Math.min(minLimit, itemInfo.height)) { | ||||||
|  |     // 改变后的高度 大于等于 Min(最小高度,之前高度)时,生效
 | ||||||
|  |     Object.assign(styleInfo, { | ||||||
|  |       height | ||||||
|  |     }) | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   return styleInfo | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | export default _ | ||||||
|  | @ -107,13 +107,13 @@ export default { | ||||||
|       }, |       }, | ||||||
|       openModalTitle: '开启信息', |       openModalTitle: '开启信息', | ||||||
|       ruleValidate: { |       ruleValidate: { | ||||||
|         customerName: [{ required: true, message: "请填写必填项" ,trigger: "blur" }], |         // customerName: [{ required: true, message: "请填写必填项" ,trigger: "blur" }], | ||||||
|         payType: [{ required: true, message: "请填写必填项" ,trigger: "change" }], |         // payType: [{ required: true, message: "请填写必填项" ,trigger: "change" }], | ||||||
|         expType: [{ required: true, message: "请填写必填项" ,trigger: "blur" }], |         // expType: [{ required: true, message: "请填写必填项" ,trigger: "blur" }], | ||||||
|         customerPwd: [{ required: true, message: "请填写必填项" ,trigger: "blur" }], |         // customerPwd: [{ required: true, message: "请填写必填项" ,trigger: "blur" }], | ||||||
|         monthCode: [{ required: true, message: "请填写必填项" ,trigger: "blur" }], |         // monthCode: [{ required: true, message: "请填写必填项" ,trigger: "blur" }], | ||||||
|         sendSite: [{ required: true, message: "请填写必填项" ,trigger: "blur" }], |         // sendSite: [{ required: true, message: "请填写必填项" ,trigger: "blur" }], | ||||||
|         sendStaff: [{ required: true, message: "请填写必填项" ,trigger: "blur" }], |         // sendStaff: [{ required: true, message: "请填写必填项" ,trigger: "blur" }], | ||||||
| 
 | 
 | ||||||
|       }, |       }, | ||||||
|       faceSheetForm: { |       faceSheetForm: { | ||||||
|  | @ -280,6 +280,8 @@ export default { | ||||||
|           this.faceSheetForm.monthCode = res.result.monthCode; |           this.faceSheetForm.monthCode = res.result.monthCode; | ||||||
|           this.faceSheetForm.sendSite = res.result.sendSite; |           this.faceSheetForm.sendSite = res.result.sendSite; | ||||||
|           this.faceSheetForm.sendStaff = res.result.sendStaff; |           this.faceSheetForm.sendStaff = res.result.sendStaff; | ||||||
|  |           this.faceSheetForm.payType = res.result.payType; | ||||||
|  |           this.faceSheetForm.expType = res.result.expType; | ||||||
|         } |         } | ||||||
|       }); |       }); | ||||||
|       this.openModal = true; |       this.openModal = true; | ||||||
|  |  | ||||||
|  | @ -17,7 +17,26 @@ export let homeData = {}; | ||||||
|  * notImg: true 没有选择图片功能 |  * notImg: true 没有选择图片功能 | ||||||
|  * close:true 右侧关闭按钮 |  * close:true 右侧关闭按钮 | ||||||
|  */ |  */ | ||||||
|  | 
 | ||||||
| export const modelData = [ | export const modelData = [ | ||||||
|  |   { | ||||||
|  |     type: "flexOne", | ||||||
|  |     name: "图片", | ||||||
|  |     notAdd: true, | ||||||
|  |     onlyImg: true, | ||||||
|  |     img: "md-image", | ||||||
|  |     options: { | ||||||
|  |       list: [ | ||||||
|  |         { | ||||||
|  |           img: "https://i.loli.net/2020/12/05/8wSNWbnqujDh6HL.png", | ||||||
|  |           url: "", | ||||||
|  |           link: "", | ||||||
|  |           size: "750*280", | ||||||
|  |           model: "link" | ||||||
|  |         } | ||||||
|  |       ] | ||||||
|  |     } | ||||||
|  |   }, | ||||||
|   { |   { | ||||||
|     type: "carousel", |     type: "carousel", | ||||||
|     name: "图片轮播", |     name: "图片轮播", | ||||||
|  |  | ||||||
|  | @ -118,44 +118,89 @@ | ||||||
|               <Input v-model="item.title" style="width: 200px" /> |               <Input v-model="item.title" style="width: 200px" /> | ||||||
|             </div> |             </div> | ||||||
|           </div> |           </div> | ||||||
|           <!-- 填写链接 --> | 
 | ||||||
|  |           <div class="decorate-view" v-if="res.onlyImg"> | ||||||
|  |             <div class="decorate-view-title">选择模式</div> | ||||||
|  | 
 | ||||||
|  |             <div> | ||||||
|  |               <RadioGroup v-model="item.model" type="button"> | ||||||
|  |                 <Radio value="link" label="link">链接</Radio> | ||||||
|  |                 <Radio value="hotzone" label="hotzone">热区</Radio> | ||||||
|  |               </RadioGroup> | ||||||
|  |             </div> | ||||||
|  |           </div> | ||||||
|  | 
 | ||||||
|           <div class="decorate-view" v-if="!res.notLink"> |           <div class="decorate-view" v-if="!res.notLink"> | ||||||
|             <div class="decorate-view-title">选择链接</div> |             <div class="decorate-view-title">选择链接</div> | ||||||
|             <div v-if="item.url.length != 0" class="decorate-view-link"> |             <div | ||||||
|  |               v-if="item.url && item.url.length != 0" | ||||||
|  |               class="decorate-view-link" | ||||||
|  |             > | ||||||
|               已选链接: |               已选链接: | ||||||
| 
 | 
 | ||||||
|               <span> |               <span> | ||||||
|                 {{ |                 <!-- {{ | ||||||
|                   ways.find((e) => { |                   ways.find((e) => { | ||||||
|                     return item.url.___type == e.name; |                     return item.url.___type == e.name; | ||||||
|  |                   }) | ||||||
|  |                     ? ways.find((e) => { | ||||||
|  |                         return item.url.___type == e.name; | ||||||
|                       }).title |                       }).title | ||||||
|  |                     : "发现" | ||||||
|                 }} |                 }} | ||||||
|                 - |                 - | ||||||
|  |                 <!-- 当选择完链接之后的专题名称 --> | ||||||
|  |                 <span v-if="item.url.pageType == 'special'"> | ||||||
|  |                   {{ item.url.name }}</span | ||||||
|  |                 > | ||||||
|                 <!-- 当选择完链接之后的商品名称 --> |                 <!-- 当选择完链接之后的商品名称 --> | ||||||
|                 <span v-if="item.url.___type == 'goods'"> {{ item.url.goodsName }}</span> |                 <span v-if="item.url.___type == 'goods'"> | ||||||
|  |                   {{ item.url.goodsName }}</span | ||||||
|  |                 > | ||||||
|                 <!-- 当选择完链接之后的分类回调 --> |                 <!-- 当选择完链接之后的分类回调 --> | ||||||
|                 <span v-if="item.url.___type == 'category'"> {{ item.url.name }}</span> |                 <span v-if="item.url.___type == 'category'"> | ||||||
|  |                   {{ item.url.name }}</span | ||||||
|  |                 > | ||||||
|                 <!-- 当选择完链接之后的店铺回调 --> |                 <!-- 当选择完链接之后的店铺回调 --> | ||||||
|                 <span v-if="item.url.___type == 'shops'"> {{ item.url.memberName }}</span> |                 <span v-if="item.url.___type == 'shops'"> | ||||||
|  |                   {{ item.url.memberName }}</span | ||||||
|  |                 > | ||||||
|                 <!-- 当选择完链接之后的其他回调 --> |                 <!-- 当选择完链接之后的其他回调 --> | ||||||
|                 <span v-if="item.url.___type == 'other'"> {{ item.url.title }}</span> |                 <span v-if="item.url.___type == 'other'"> | ||||||
|  |                   {{ item.url.title }}</span | ||||||
|  |                 > | ||||||
|  |                 <!-- 当选择完链接之后的其他回调 --> | ||||||
|  |                 <span v-if="item.url.___type == 'brand'"> | ||||||
|  |                   {{ item.url.name }}</span | ||||||
|  |                 > | ||||||
|  | 
 | ||||||
|                 <!-- 当选择完活动之后的其他回调 --> |                 <!-- 当选择完活动之后的其他回调 --> | ||||||
|                 <span v-if="item.url.___type == 'marketing'"> |                 <span v-if="item.url.___type == 'marketing'"> | ||||||
|                   <span v-if="item.url.___promotion == 'SECKILL'"> 秒杀 </span> |                   <span v-if="item.url.___promotion == 'SECKILL'"> 秒杀 </span> | ||||||
|                   <span v-if="item.url.___promotion == 'FULL_DISCOUNT'"> 满减 </span> |                   <span v-if="item.url.___promotion == 'FULL_DISCOUNT'"> | ||||||
|  |                     满减 | ||||||
|  |                   </span> | ||||||
|                   <span v-if="item.url.___promotion == 'PINTUAN'"> 拼团 </span> |                   <span v-if="item.url.___promotion == 'PINTUAN'"> 拼团 </span> | ||||||
|                   {{ item.url.title || item.url.goodsName }} |                   {{ item.url.title || item.url.goodsName }} | ||||||
|                 </span> |                 </span> | ||||||
|                 <!-- 当选择完活动之后的其他回调 --> |                 <!-- 当选择完活动之后的其他回调 --> | ||||||
|                 <span v-if="item.url.___type == 'pages'"> {{ item.url.title }}</span> |                 <span v-if="item.url.___type == 'pages'"> | ||||||
|  |                   {{ item.url.title }}</span | ||||||
|  |                 > | ||||||
|               </span> |               </span> | ||||||
|             </div> |             </div> | ||||||
|             <div> |             <div> | ||||||
|               <Button ghost size="small" type="primary" @click="clickLink(item, index)" |               <Button | ||||||
|                 >选择链接</Button |                 ghost | ||||||
|  |                 size="small" | ||||||
|  |                 type="primary" | ||||||
|  |                 @click="clickLink(item, index, res)" | ||||||
|  |               > | ||||||
|  |                 {{ item.model === "hotzone" ? "绘制热区" : "选择链接" }}</Button | ||||||
|               > |               > | ||||||
|             </div> |             </div> | ||||||
|           </div> |           </div> | ||||||
|  |           <!-- 链接地址--> | ||||||
| 
 | 
 | ||||||
|         </div> |         </div> | ||||||
|       </div> |       </div> | ||||||
|  | @ -174,7 +219,7 @@ | ||||||
|       @selectedLink="selectedLink" |       @selectedLink="selectedLink" | ||||||
|       @selectedGoodsData="selectedGoodsData" |       @selectedGoodsData="selectedGoodsData" | ||||||
|     ></liliDialog> |     ></liliDialog> | ||||||
| 
 |     <hotzone ref="hotzone" @changeZone="changeZone"></hotzone> | ||||||
|     <Modal width="1200px" v-model="picModelFlag"> |     <Modal width="1200px" v-model="picModelFlag"> | ||||||
|       <ossManage  @callback="callbackSelected" ref="ossManage" /> |       <ossManage  @callback="callbackSelected" ref="ossManage" /> | ||||||
|     </Modal> |     </Modal> | ||||||
|  | @ -182,11 +227,13 @@ | ||||||
| </template> | </template> | ||||||
| <script> | <script> | ||||||
| import ossManage from "@/views/sys/oss-manage/ossManage"; | import ossManage from "@/views/sys/oss-manage/ossManage"; | ||||||
|  | import hotzone from "@/views/shop/hotzone"; | ||||||
| import { modelData } from "./config"; | import { modelData } from "./config"; | ||||||
| import ways from "@/views/lili-dialog/wap.js"; // 选择链接的类型 | import ways from "@/views/lili-dialog/wap.js"; // 选择链接的类型 | ||||||
| export default { | export default { | ||||||
|   components: { |   components: { | ||||||
|     ossManage, |     ossManage, | ||||||
|  |     hotzone, | ||||||
|   }, |   }, | ||||||
|   data() { |   data() { | ||||||
|     return { |     return { | ||||||
|  | @ -215,6 +262,7 @@ export default { | ||||||
|     }, |     }, | ||||||
|     // 回调选择的链接 |     // 回调选择的链接 | ||||||
|     selectedLink(val) { |     selectedLink(val) { | ||||||
|  |       this.selectedLinks.zoneInfo = []; | ||||||
|       // 需删除图片中 intro 和 mobileIntro 可能存在转义符导致json出错问题 |       // 需删除图片中 intro 和 mobileIntro 可能存在转义符导致json出错问题 | ||||||
|       delete val.selected; |       delete val.selected; | ||||||
|       delete val.intro; |       delete val.intro; | ||||||
|  | @ -257,9 +305,23 @@ export default { | ||||||
|     }, |     }, | ||||||
| 
 | 
 | ||||||
|     // 点击链接赋值一个唯一值,并将当前选择的模块赋值 |     // 点击链接赋值一个唯一值,并将当前选择的模块赋值 | ||||||
|     clickLink(val, index) { |     clickLink(val, index, oval) { | ||||||
|       this.selectedLinks = val; |       this.selectedLinks = val; | ||||||
|  |       if (val.model === "hotzone") { | ||||||
|  |         if (!val.zoneInfo) { | ||||||
|  |           val.zoneInfo = []; | ||||||
|  |         } | ||||||
|  |         this.$refs.hotzone.flag = true; | ||||||
|  |         this.$refs.hotzone.res = val; | ||||||
|  |       } else { | ||||||
|         this.liliDialogFlag(false); |         this.liliDialogFlag(false); | ||||||
|  |       } | ||||||
|  |     }, | ||||||
|  |     addZone(zoneInfo) { | ||||||
|  |       this.selectedLinks.zoneInfo.push(zoneInfo); | ||||||
|  |     }, | ||||||
|  |     changeZone(zoneInfo) { | ||||||
|  |       this.selectedLinks.zoneInfo = zoneInfo; | ||||||
|     }, |     }, | ||||||
|     //点击图片解析成base64 |     //点击图片解析成base64 | ||||||
|     changeFile(item, index) { |     changeFile(item, index) { | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue