fe / yohoblk-wap · Commits

Go to a project

Authored by 陈轩
Commit a8ff1b78ef7eca404caf52ed222d4d835bf95735 1 parent 9c10b637

save

Inline Side-by-side
Showing 5 changed files with 46 additions and 58 deletions
1 <template> 1 <template>
2 - <div class="refund"> 2 + <div class="return">
3 <div class="title">请选择换货商品</div> 3 <div class="title">请选择换货商品</div>
4 - <div>  
5 - <exchange-item v-for="good in selectedGoods" :product="good"></exchange-item>  
6 - </div>  
7 - <div>  
8 - <product-list v-bind:list="goods" v-bind:data="exchangeData" type="exchange"></product-list>  
9 - </div> 4 + <product-list :list="goodsArr" :data="exchangeData" type="exchange"></product-list>
10 <!--换货信息--> 5 <!--换货信息-->
11 <div class="list exchange-info"> 6 <div class="list exchange-info">
12 <!--address--> 7 <!--address-->
@@ -27,6 +22,7 @@ @@ -27,6 +22,7 @@
27 </select> 22 </select>
28 </div> 23 </div>
29 </div> 24 </div>
  25 +
30 <feature-selector 26 <feature-selector
31 :is-visible="showFeatureSelector" 27 :is-visible="showFeatureSelector"
32 :entity="entity" 28 :entity="entity"
@@ -44,6 +40,7 @@ @@ -44,6 +40,7 @@
44 const yoho = require('yoho'); 40 const yoho = require('yoho');
45 41
46 const productList = require('home/return/list.vue'); 42 const productList = require('home/return/list.vue');
  43 + const productItem = require('home/return/item.vue');
47 const exchangeItem = require('home/exchange/item.vue'); 44 const exchangeItem = require('home/exchange/item.vue');
48 const featureSelector = require('component/product/feature-selector.vue'); 45 const featureSelector = require('component/product/feature-selector.vue');
49 46
@@ -58,7 +55,7 @@ @@ -58,7 +55,7 @@
58 entity: {}, 55 entity: {},
59 exchangeData: {}, 56 exchangeData: {},
60 57
61 - goods: [], 58 + goodsArr: [],
62 address: {}, 59 address: {},
63 delivery: [], 60 delivery: [],
64 61
@@ -66,19 +63,6 @@ @@ -66,19 +63,6 @@
66 indexMap: {} // goods[index].id 与 index 的映射 63 indexMap: {} // goods[index].id 与 index 的映射
67 }; 64 };
68 }, 65 },
69 - computed: {  
70 - // 换货商品  
71 - selectedGoods() {  
72 - return this.goods.filter(product => {  
73 - return product.checked;  
74 - });  
75 - },  
76 - unselectedGoods() {  
77 - return this.goods.filter(product => {  
78 - return !product.checked;  
79 - });  
80 - }  
81 - },  
82 events: { 66 events: {
83 'feature.close': function() { 67 'feature.close': function() {
84 this.showFeatureSelector = false; 68 this.showFeatureSelector = false;
@@ -87,7 +71,6 @@ @@ -87,7 +71,6 @@
87 created() { 71 created() {
88 // 打开 更换 颜色尺码 72 // 打开 更换 颜色尺码
89 bus.$on('open.featureSelector', msg => { 73 bus.$on('open.featureSelector', msg => {
90 - this.showFeatureSelector = true;  
91 this.queryProductFeature(msg.pid); 74 this.queryProductFeature(msg.pid);
92 }); 75 });
93 76
@@ -102,6 +85,8 @@ @@ -102,6 +85,8 @@
102 85
103 if (res.data && res.data.goodsList) { 86 if (res.data && res.data.goodsList) {
104 res.data.goodsList.forEach((product, index) => { 87 res.data.goodsList.forEach((product, index) => {
  88 + product.checked = false;
  89 + product.change = null;
105 product.reason = { 90 product.reason = {
106 id: 0 91 id: 0
107 }; 92 };
@@ -110,7 +95,7 @@ @@ -110,7 +95,7 @@
110 self.indexMap[product.productId] = index; // 生成映射 95 self.indexMap[product.productId] = index; // 生成映射
111 }); 96 });
112 97
113 - this.goods = res.data.goodsList; 98 + this.$set('goodsArr', res.data.goodsList);
114 this.$set('exchangeData', res.data); 99 this.$set('exchangeData', res.data);
115 this.$set('address', res.data.address); 100 this.$set('address', res.data.address);
116 101
@@ -140,18 +125,25 @@ @@ -140,18 +125,25 @@
140 125
141 // 商品 feature改变 126 // 商品 feature改变
142 whenFeatureChange(selection) { 127 whenFeatureChange(selection) {
143 - const index = this.indexMap[pid]; 128 + const index = this.indexMap[selection.goodsId];
  129 + const goods = this.goodsArr[index];
  130 + goods.change = {
  131 + color: selection.color.text,
  132 + size: selection.size.text,
  133 + goodsId: selection.size.goodsId,
  134 + sku: selection.size.value
  135 + }
  136 + console.log(goods.goodsId);
144 137
145 this.showFeatureSelector = false; 138 this.showFeatureSelector = false;
146 - this.goods[index]._change = {  
147 -  
148 - }; 139 + // this.goodsArr.$set(index, Object.assign({}, goods, change));
149 }, 140 },
150 141
151 // 查询 商品 feature 142 // 查询 商品 feature
152 queryProductFeature(pid) { 143 queryProductFeature(pid) {
153 $.get(`/product/product_${pid}.json`).then(result => { 144 $.get(`/product/product_${pid}.json`).then(result => {
154 this.entity = result; 145 this.entity = result;
  146 + this.showFeatureSelector = true;
155 return result; 147 return result;
156 }); 148 });
157 }, 149 },
@@ -180,8 +172,8 @@ @@ -180,8 +172,8 @@
180 exchange_reason: good.reason.id, 172 exchange_reason: good.reason.id,
181 remark: good.remark, 173 remark: good.remark,
182 evidence_images: good.imageList, 174 evidence_images: good.imageList,
183 - new_goods_id: good.newGoodsId,  
184 - new_product_sku: good.newProductSku 175 + new_goods_id: good.change.goodsId,
  176 + new_product_sku: good.change.sku
185 }); 177 });
186 }); 178 });
187 179
@@ -227,9 +219,8 @@ @@ -227,9 +219,8 @@
227 } 219 }
228 }, 220 },
229 components: { 221 components: {
230 - productList,  
231 - exchangeItem,  
232 - featureSelector 222 + featureSelector,
  223 + productList
233 } 224 }
234 }; 225 };
235 226
@@ -238,6 +229,13 @@ @@ -238,6 +229,13 @@
238 body { 229 body {
239 background-color: #f6f6f6; 230 background-color: #f6f6f6;
240 } 231 }
  232 +
  233 + .return .title {
  234 + padding: 30px 30px 0;
  235 + color: #b0b0b0;
  236 + font-size: 28px;
  237 + line-height: 60px;
  238 + }
241 239
242 .exchange-info { 240 .exchange-info {
243 margin: 30px 0; 241 margin: 30px 0;
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 <div class="field" @click="openFeatureSelector(product.productId)"> 4 <div class="field" @click="openFeatureSelector(product.productId)">
5 换货的颜色尺码 5 换货的颜色尺码
6 <div class="right"> 6 <div class="right">
7 - <span></span> 7 + <span v-if="product.change">颜色:{{product.change.color}} 尺码:{{product.change.size}}</span>
8 <i class="icon icon-right"></i> 8 <i class="icon icon-right"></i>
9 </div> 9 </div>
10 </div> 10 </div>
1 <template> 1 <template>
2 <div class="refund"> 2 <div class="refund">
3 <div class="title">请选择退货商品</div> 3 <div class="title">请选择退货商品</div>
4 - <product-list v-bind:list="list" v-bind:data="refundData"></product-list> 4 + <product-list :list="list" :data="refundData" type="refund"></product-list>
5 <div class="return-amount"> 5 <div class="return-amount">
6 <!-- TODO:退货信息优化为组件 --> 6 <!-- TODO:退货信息优化为组件 -->
7 <div class="return-amount-item"> 7 <div class="return-amount-item">
@@ -9,7 +9,7 @@ @@ -9,7 +9,7 @@
9 9
10 <span class="icon icon-right"></span> 10 <span class="icon icon-right"></span>
11 <select v-model="amount.return_amount_mode" name="amount-mode"> 11 <select v-model="amount.return_amount_mode" name="amount-mode">
12 - <option v-for="mode in refundData.returnAmountMode" v-bind:value="mode.id">{{mode.name}}</option> 12 + <option v-for="mode in refundData.returnAmountMode" :value="mode.id">{{mode.name}}</option>
13 </select> 13 </select>
14 </div> 14 </div>
15 15
@@ -53,7 +53,7 @@ @@ -53,7 +53,7 @@
53 const $ = require('yoho-jquery'); 53 const $ = require('yoho-jquery');
54 const qs = require('yoho-qs'); 54 const qs = require('yoho-qs');
55 55
56 - const productList = require('home/refund/product-list.vue'); 56 + const productList = require('home/return/product-list.vue');
57 57
58 module.exports = { 58 module.exports = {
59 data() { 59 data() {
1 -<template>  
2 - <div>  
3 - <product></product>  
4 - </div>  
5 -</template>  
1 <template> 1 <template>
2 <div> 2 <div>
3 - <div v-show="checkedList.length" class="product-list product-list-checked">  
4 - <div v-for="product in list" v-if="product.checked">  
5 - <component :is = 'selectView' v-for="product in list" v-if="product.checked" v-bind:product="product" v-bind:data="data"></component>  
6 - </div> 3 + <div class="product-list product-list-checked">
  4 + <template v-for="product in list" v-if="product.checked">
  5 + <exchange-item v-if="type === 'exchange'" :product="product" :data="data"></exchange-item>
  6 + <refund-item v-else :product="product" :data="data"></refund-item>
  7 + </template>
7 </div> 8 </div>
8 - <div v-show="checkedList.length !== list.length" class="product-list">  
9 - <pruduct v-for="product in list" v-if="!product.checked" v-bind:product="product" v-bind:data="data"></pruduct> 9 + <div class="product-list">
  10 + <pruduct v-for="product in list" v-if="!product.checked" :product="product" :data="data"></pruduct>
10 </div> 11 </div>
11 </div> 12 </div>
12 </template> 13 </template>
@@ -24,29 +25,23 @@ @@ -24,29 +25,23 @@
24 computed: { 25 computed: {
25 selectedView() { 26 selectedView() {
26 return this.type === 'exchange' ? 'exchange-item' : 'refund-item'; 27 return this.type === 'exchange' ? 'exchange-item' : 'refund-item';
27 - },  
28 - checkedList() {  
29 - return this.list.filter(product => {  
30 - return product.checked;  
31 - });  
32 } 28 }
33 }, 29 },
34 components: { 30 components: {
35 pruduct, 31 pruduct,
36 exchangeItem, 32 exchangeItem,
37 refundItem 33 refundItem
  34 + },
  35 +
  36 + created() {
  37 +
38 } 38 }
39 }; 39 };
40 40
41 </script> 41 </script>
42 42
43 <style> 43 <style>
44 - .title {  
45 - padding: 30px 30px 0;  
46 - color: #b0b0b0;  
47 - font-size: 28px;  
48 - line-height: 60px;  
49 - } 44 +
50 45
51 .product-list { 46 .product-list {
52 margin-top: -4px; 47 margin-top: -4px;