w-front-end / select_good · Commits

Commit 8ed9c63fb136b687c60c8284edde38ca90c0978c

Authored by zhiyangdu
1 parent 9c1c5b81

党建积分兑换

Inline Side-by-side
Showing 9 changed files with 1327 additions and 67 deletions
src/components/addressList/addressList.vue
  View file @8ed9c63
@@ -29,7 +29,10 @@ @@ -29,7 +29,10 @@
29 <label class="label check-group" 29 <label class="label check-group"
30 v-if="!addresss.options.defaultContact.hide" 30 v-if="!addresss.options.defaultContact.hide"
31 @click="setDefaultContact(item)"> 31 @click="setDefaultContact(item)">
32 - <input v-show="false" type="checkbox" name="like" :value="item.state == 2"> 32 + <input v-show="false"
  33 + type="checkbox"
  34 + name="like"
  35 + :value="item.state == 2">
33 <img src="/static/img/icon_check_active.png" 36 <img src="/static/img/icon_check_active.png"
34 class="check-box" 37 class="check-box"
35 v-if="item.state == 2" /> 38 v-if="item.state == 2" />
@@ -38,7 +41,7 @@ @@ -38,7 +41,7 @@
38 v-else/> 41 v-else/>
39 <text class="text"> 42 <text class="text">
40 <img src="/static/img/icon_check.png" 43 <img src="/static/img/icon_check.png"
41 - class="check-box"/> 44 + class="check-box" />
42 </text> 45 </text>
43 </label> 46 </label>
44 <div class="buttons-box"> 47 <div class="buttons-box">
@@ -70,7 +73,7 @@ export default { @@ -70,7 +73,7 @@ export default {
70 name: 'addressList', 73 name: 'addressList',
71 data: function () { 74 data: function () {
72 return { 75 return {
73 - radio:1, 76 + radio: 1,
74 } 77 }
75 }, 78 },
76 props: ["addresss"], 79 props: ["addresss"],
src/components/addressModal/addressModal.less
  View file @8ed9c63
@@ -15,39 +15,39 @@ @@ -15,39 +15,39 @@
15 height: 100%; 15 height: 100%;
16 .box { 16 .box {
17 background-color: #FFFFFF; 17 background-color: #FFFFFF;
18 - width: 560rpx;  
19 - border-radius: 16rpx; 18 + width: 560px;
  19 + border-radius: 16px;
20 .title { 20 .title {
21 color: #333333; 21 color: #333333;
22 - font-size: 32rpx; 22 + font-size: 32px;
23 font-weight: 600; 23 font-weight: 600;
24 text-align: center; 24 text-align: center;
25 - padding-top: 30rpx; 25 + padding-top: 30px;
26 } 26 }
27 .message { 27 .message {
28 background-color: #F9F9F9; 28 background-color: #F9F9F9;
29 - margin: 30rpx auto 0 auto; 29 + margin: 30px auto 0 auto;
30 color: #999999; 30 color: #999999;
31 - font-size: 28rpx; 31 + font-size: 28px;
32 font-weight: 500; 32 font-weight: 500;
33 - line-height: 40rpx;  
34 - width: 500rpx;  
35 - border-radius: 16rpx; 33 + line-height: 40px;
  34 + width: 500px;
  35 + border-radius: 16px;
36 .message-item { 36 .message-item {
37 margin: 0 auto; 37 margin: 0 auto;
38 - padding: 24rpx 0;  
39 - width: 452rpx; 38 + padding: 24px 0;
  39 + width: 452px;
40 .top { 40 .top {
41 display: flex; 41 display: flex;
42 justify-content: flex-start; 42 justify-content: flex-start;
43 align-items: center; 43 align-items: center;
44 .name { 44 .name {
45 & + .phone { 45 & + .phone {
46 - margin-left: 30rpx; 46 + margin-left: 30px;
47 } 47 }
48 } 48 }
49 & + .bottom { 49 & + .bottom {
50 - margin-top: 10rpx; 50 + margin-top: 10px;
51 } 51 }
52 } 52 }
53 .bottom { 53 .bottom {
@@ -58,11 +58,11 @@ @@ -58,11 +58,11 @@
58 display: flex; 58 display: flex;
59 justify-content: center; 59 justify-content: center;
60 align-items: center; 60 align-items: center;
61 - padding: 69rpx 0; 61 + padding: 69px 0;
62 .text { 62 .text {
63 font-weight: 400; 63 font-weight: 400;
64 & + .text-a-link { 64 & + .text-a-link {
65 - margin-left: 30rpx; 65 + margin-left: 30px;
66 } 66 }
67 } 67 }
68 .text-a-link { 68 .text-a-link {
@@ -72,48 +72,48 @@ @@ -72,48 +72,48 @@
72 } 72 }
73 .bottom-slot { 73 .bottom-slot {
74 margin: 0 auto; 74 margin: 0 auto;
75 - width: 500rpx; 75 + width: 500px;
76 /deep/ .address-bottom-tips { 76 /deep/ .address-bottom-tips {
77 - margin-top: 20rpx; 77 + margin-top: 20px;
78 color: #F5A623; 78 color: #F5A623;
79 - font-size: 24rpx; 79 + font-size: 24px;
80 font-weight: 400; 80 font-weight: 400;
81 text-align: justify; 81 text-align: justify;
82 } 82 }
83 } 83 }
84 .buttons-box { 84 .buttons-box {
85 - margin-top: 20rpx; 85 + margin-top: 20px;
86 .buttons { 86 .buttons {
87 display: flex; 87 display: flex;
88 justify-content: space-between; 88 justify-content: space-between;
89 align-items: center; 89 align-items: center;
90 margin: 0 auto; 90 margin: 0 auto;
91 - padding: 30rpx 0;  
92 - width: 500rpx;  
93 - border-top: 1rpx solid #E6E6E6; 91 + padding: 30px 0;
  92 + width: 500px;
  93 + border-top: 1px solid #E6E6E6;
94 .btn { 94 .btn {
95 display: flex; 95 display: flex;
96 justify-content: center; 96 justify-content: center;
97 align-items: center; 97 align-items: center;
98 - width: 236rpx;  
99 - height: 78rpx;  
100 - border-radius: 16rpx; 98 + width: 236px;
  99 + height: 78px;
  100 + border-radius: 16px;
101 &.btn-confirm { 101 &.btn-confirm {
102 background: linear-gradient(180deg, #FE5B28 0%, #FF1C40 100%); 102 background: linear-gradient(180deg, #FE5B28 0%, #FF1C40 100%);
103 color: #FFFFFF; 103 color: #FFFFFF;
104 - font-size: 30rpx; 104 + font-size: 30px;
105 font-weight: 600; 105 font-weight: 600;
106 &.big { 106 &.big {
107 - width: 500rpx; 107 + width: 500px;
108 } 108 }
109 } 109 }
110 &.btn-cancel { 110 &.btn-cancel {
111 background-color: #F9F9F9; 111 background-color: #F9F9F9;
112 color: #B4B4B4; 112 color: #B4B4B4;
113 - font-size: 30rpx; 113 + font-size: 30px;
114 font-weight: 500; 114 font-weight: 500;
115 &.big { 115 &.big {
116 - width: 500rpx; 116 + width: 500px;
117 } 117 }
118 } 118 }
119 &.btn-yellow { 119 &.btn-yellow {
@@ -125,62 +125,62 @@ @@ -125,62 +125,62 @@
125 } 125 }
126 } 126 }
127 .bottomClose { 127 .bottomClose {
128 - margin-top: 99rpx; 128 + margin-top: 99px;
129 .close-img { 129 .close-img {
130 display: block; 130 display: block;
131 - width: 62rpx;  
132 - height: 62rpx; 131 + width: 62px;
  132 + height: 62px;
133 } 133 }
134 } 134 }
135 &.douyin-url { 135 &.douyin-url {
136 background-color: rgba(0, 0, 0, 0.6); 136 background-color: rgba(0, 0, 0, 0.6);
137 .box { 137 .box {
138 background-color: #FFFFFF; 138 background-color: #FFFFFF;
139 - width: 580rpx;  
140 - border-radius: 24rpx; 139 + width: 580px;
  140 + border-radius: 24px;
141 .message { 141 .message {
142 background-color: #F9F9F9; 142 background-color: #F9F9F9;
143 color: #666666; 143 color: #666666;
144 - font-size: 26rpx;  
145 - width: 520rpx;  
146 - margin: 30rpx auto 40rpx auto; 144 + font-size: 26px;
  145 + width: 520px;
  146 + margin: 30px auto 40px auto;
147 padding: 0; 147 padding: 0;
148 - border-radius: 16rpx; 148 + border-radius: 16px;
149 .message-content { 149 .message-content {
150 - width: 468rpx; 150 + width: 468px;
151 margin: 0 auto; 151 margin: 0 auto;
152 - padding: 26rpx 0; 152 + padding: 26px 0;
153 text-align: left; 153 text-align: left;
154 } 154 }
155 } 155 }
156 .buttons-box { 156 .buttons-box {
157 justify-content: space-between; 157 justify-content: space-between;
158 align-items: center; 158 align-items: center;
159 - width: 520rpx;  
160 - margin: 0 auto 40rpx auto; 159 + width: 520px;
  160 + margin: 0 auto 40px auto;
161 .btn { 161 .btn {
162 display: flex; 162 display: flex;
163 justify-content: center; 163 justify-content: center;
164 align-items: center; 164 align-items: center;
165 - border-radius:39rpx; 165 + border-radius:39px;
166 & + .btn { 166 & + .btn {
167 - margin-left: 48rpx; 167 + margin-left: 48px;
168 } 168 }
169 &.btn-confirm { 169 &.btn-confirm {
170 background:linear-gradient(270deg,rgba(207,146,117,1) 0%,rgba(238,185,143,1) 100%); 170 background:linear-gradient(270deg,rgba(207,146,117,1) 0%,rgba(238,185,143,1) 100%);
171 - width: 236rpx;  
172 - height: 78rpx; 171 + width: 236px;
  172 + height: 78px;
173 color: #FFFFFF; 173 color: #FFFFFF;
174 - font-size: 30rpx;  
175 - letter-spacing: 1rpx; 174 + font-size: 30px;
  175 + letter-spacing: 1px;
176 } 176 }
177 &.btn-cancel { 177 &.btn-cancel {
178 - width: 234rpx;  
179 - height: 76rpx; 178 + width: 234px;
  179 + height: 76px;
180 color: #D69B7B; 180 color: #D69B7B;
181 - font-size: 30rpx;  
182 - letter-spacing: 1rpx;  
183 - border:1rpx solid rgba(214,155,123,1); 181 + font-size: 30px;
  182 + letter-spacing: 1px;
  183 + border:1px solid rgba(214,155,123,1);
184 } 184 }
185 } 185 }
186 } 186 }
src/components/addressModal/addressModal.vue
  View file @8ed9c63
@@ -3,10 +3,10 @@ @@ -3,10 +3,10 @@
3 v-if="isShow && options"> 3 v-if="isShow && options">
4 <div class="layer-box" 4 <div class="layer-box"
5 :class="defaultOptions.classType || ''" 5 :class="defaultOptions.classType || ''"
6 - @tap="hideLayer" 6 + @click="hideLayer"
7 @touchmove.stop.prevent> 7 @touchmove.stop.prevent>
8 <div class="box" 8 <div class="box"
9 - @tap.stop.prevent> 9 + @click.stop.prevent>
10 10
11 <!-- 标题 --> 11 <!-- 标题 -->
12 <div class="title" 12 <div class="title"
@@ -27,7 +27,7 @@ @@ -27,7 +27,7 @@
27 </div> 27 </div>
28 <div class="message no-data" 28 <div class="message no-data"
29 v-else 29 v-else
30 - @tap="noData"> 30 + @click="noData">
31 <div class="text">您未创建收货地址</div> 31 <div class="text">您未创建收货地址</div>
32 <div class="text-a-link">去创建</div> 32 <div class="text-a-link">去创建</div>
33 </div> 33 </div>
@@ -43,17 +43,17 @@ @@ -43,17 +43,17 @@
43 <div class="btn btn-cancel" 43 <div class="btn btn-cancel"
44 :class="defaultOptions.cancelButtonClass" 44 :class="defaultOptions.cancelButtonClass"
45 v-if="defaultOptions.showCancelButton" 45 v-if="defaultOptions.showCancelButton"
46 - @tap="cancel(defaultOptions.params || defaultOptions)">{{defaultOptions.cancelButtonText}}</div> 46 + @click="cancel(defaultOptions.params || defaultOptions)">{{defaultOptions.cancelButtonText}}</div>
47 <div class="btn btn-confirm" 47 <div class="btn btn-confirm"
48 :class="defaultOptions.confirmButtonClass" 48 :class="defaultOptions.confirmButtonClass"
49 v-if="defaultOptions.showConfirmButton" 49 v-if="defaultOptions.showConfirmButton"
50 - @tap="confirm(defaultOptions.params || defaultOptions)">{{defaultOptions.confirmButtonText}}</div> 50 + @click="confirm(defaultOptions.params || defaultOptions)">{{defaultOptions.confirmButtonText}}</div>
51 </div> 51 </div>
52 </div> 52 </div>
53 </div> 53 </div>
54 <div class="bottomClose" 54 <div class="bottomClose"
55 v-if="defaultOptions.bottomClose" 55 v-if="defaultOptions.bottomClose"
56 - @tap="hideLayer"> 56 + @click="hideLayer">
57 <img src="/static/img/icon_layer_bottom_close.png" 57 <img src="/static/img/icon_layer_bottom_close.png"
58 class="close-img" /> 58 class="close-img" />
59 </div> 59 </div>
@@ -71,6 +71,9 @@ export default { @@ -71,6 +71,9 @@ export default {
71 } 71 }
72 }, 72 },
73 props: ["options"], 73 props: ["options"],
  74 + created () {
  75 + console.log(this.defaultOptions)
  76 + },
74 methods: { 77 methods: {
75 78
76 /** 79 /**
@@ -89,6 +92,8 @@ export default { @@ -89,6 +92,8 @@ export default {
89 92
90 // 设置浮层隐藏 93 // 设置浮层隐藏
91 this.$set(this, "isShow", false); 94 this.$set(this, "isShow", false);
  95 + window.localStorage.removeItem('addressModalIsShow');
  96 + window.localStorage.removeItem('currentAddress');
92 }, 97 },
93 98
94 /** 99 /**
@@ -168,7 +173,6 @@ export default { @@ -168,7 +173,6 @@ export default {
168 } 173 }
169 } 174 }
170 </script> 175 </script>
171 -  
172 <!-- Add "scoped" attribute to limit CSS to this component only --> 176 <!-- Add "scoped" attribute to limit CSS to this component only -->
173 <style rel="stylesheet/less" lang="less"> 177 <style rel="stylesheet/less" lang="less">
174 @import './addressModal'; 178 @import './addressModal';
src/pages/addressList/addressList.vue
  View file @8ed9c63
@@ -237,7 +237,7 @@ export default { @@ -237,7 +237,7 @@ export default {
237 if (datas.uid === this.getStore("uid")) { 237 if (datas.uid === this.getStore("uid")) {
238 238
239 // 同步当前选中的地址信息 239 // 同步当前选中的地址信息
240 - window.localStorage.setItem('currentAddress', datas); 240 + window.localStorage.setItem('currentAddress', JSON.stringify(datas));
241 } 241 }
242 } 242 }
243 }, 243 },
@@ -257,7 +257,6 @@ export default { @@ -257,7 +257,6 @@ export default {
257 * @param {Object} item [地址对象] 257 * @param {Object} item [地址对象]
258 */ 258 */
259 doSelect (item) { 259 doSelect (item) {
260 -  
261 // 判断来源页面 260 // 判断来源页面
262 switch (this.query.mode) { 261 switch (this.query.mode) {
263 case 'select': // 选择状态，只可选择地址，不能编辑 262 case 'select': // 选择状态，只可选择地址，不能编辑
@@ -265,7 +264,7 @@ export default { @@ -265,7 +264,7 @@ export default {
265 264
266 // 验证工具类是否存在 265 // 验证工具类是否存在
267 // 设置选择的地址到Storage（当前选择的地址） 266 // 设置选择的地址到Storage（当前选择的地址）
268 - window.localStorage.setItem('currentAddress', item); 267 + window.localStorage.setItem('currentAddress', JSON.stringify(item));
269 268
270 // 后退 269 // 后退
271 this.back(); 270 this.back();
@@ -344,7 +343,7 @@ export default { @@ -344,7 +343,7 @@ export default {
344 343
345 /* 判断如果被删除地址是当前设置地址处理 开始 */ 344 /* 判断如果被删除地址是当前设置地址处理 开始 */
346 345
347 - let tempCurrentAddress = window.localStorage.getItem('currentAddress'); 346 + let tempCurrentAddress = JSON.parse(window.localStorage.getItem('currentAddress'));
348 347
349 if (tempCurrentAddress && tempCurrentAddress.id === ext.id) { 348 if (tempCurrentAddress && tempCurrentAddress.id === ext.id) {
350 349
src/pages/partyBuildingGoodDetails/partyBuildingGoodDetails.less 0 → 100644
  View file @8ed9c63
  1 +.good-details-box{
  2 + padding-bottom: 130px;
  3 + .pl {
  4 + background-color: transparent;
  5 + width: 100%;
  6 + &.is-open-app {
  7 + height: 122px;
  8 + }
  9 + &.is-cnlive {
  10 + height: 93px;
  11 + }
  12 + }
  13 + .hide{
  14 + display:none;
  15 + }
  16 + .call-app-box{
  17 + position: fixed;
  18 + z-index:1;
  19 + }
  20 + .back-box{
  21 + background-color: #FFF;
  22 + position:fixed;
  23 + z-index:1;
  24 + }
  25 + .goods-img{
  26 + display: block;
  27 + width: 100%;
  28 + height:750px
  29 + }
  30 + .main-box{
  31 + .title{
  32 + font-size: 34px;
  33 + font-weight: 500;
  34 + color: #333333;
  35 + line-height: 48px;
  36 + text-align: center;
  37 + margin:30px 20px 0 20px;
  38 + display: -webkit-box;
  39 + -webkit-line-clamp: 2;
  40 + /*! autoprefixer: off */
  41 + -webkit-box-orient: vertical;
  42 + /*! autoprefixer: on */
  43 + text-overflow: ellipsis;
  44 + overflow: hidden;
  45 + }
  46 + .title-t{
  47 + color: #3EB781;
  48 + margin:20px 60px 10px 60px ;
  49 + display: flex;
  50 + align-items: center;
  51 + justify-content: center;
  52 + .price{
  53 + height: 40px;
  54 + font-size: 28px;
  55 + font-weight: 400;
  56 + color: #999999;
  57 + line-height: 40px;
  58 + margin-right: 24px;
  59 + text-decoration: line-through;
  60 + }
  61 + .integral{
  62 + height: 92px;
  63 + font-size: 42px;
  64 + font-weight: 500;
  65 + color: #3EB781;
  66 + line-height: 92px;
  67 + }
  68 + .integral-in{
  69 + height: 45px;
  70 + font-size: 42px;
  71 + font-weight: 400;
  72 + color: #3EB781;
  73 + line-height: 45px;
  74 + margin-left: 14px;
  75 + }
  76 + }
  77 + /*商品信息**/
  78 + .goods-info{
  79 + margin: 30px;
  80 + width: 690px;
  81 + background: #FFFFFF;
  82 + box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.06);
  83 + border-radius: 24px;
  84 + overflow: hidden;
  85 + padding-bottom: 35px;
  86 + .good-title{
  87 + margin-top: 50px;
  88 + height: 42px;
  89 + font-size: 30px;
  90 + font-weight: 500;
  91 + color: #666666;
  92 + line-height: 42px;
  93 + text-align: center;
  94 + display: flex;
  95 + align-items: center;
  96 + justify-content: center;
  97 + .left{
  98 + margin-right: 28px;
  99 + }
  100 + .right{
  101 + margin-left: 28px;
  102 + }
  103 + span{
  104 + width: 46px;
  105 + height: 1.5px;
  106 + background-color: #B4B4B4;
  107 + }
  108 + }
  109 + /*健康商城规则说明*/
  110 + .health_desc{
  111 + font-size: 28px;
  112 + margin-left: 20px;
  113 + .health_title{
  114 + text-align: left;
  115 + font-size: 28px;
  116 + font-weight: 500;
  117 + margin-top:56px;
  118 + }
  119 + .desc{
  120 + text-align: left;
  121 + color: #666666;
  122 + margin-top: 15px;
  123 + }
  124 + }
  125 + .good-desc{
  126 + margin:40px 40px 10px 40px;
  127 + font-size: 26px;
  128 + font-weight: 300;
  129 + color: #999999;
  130 + line-height: 37px;
  131 + .text-left{
  132 + text-align: left;
  133 + margin-top: 20px;
  134 + .to-link{
  135 + color: #0091FF;
  136 + }
  137 + span{
  138 + font-size: 26px;
  139 + font-weight: 400;
  140 + color: #666666;
  141 + line-height: 37px;
  142 + }
  143 + }
  144 + }
  145 + /**相似商品*/
  146 + .column-list-box{
  147 + margin-top:40px;
  148 + }
  149 + }
  150 + }
  151 + /**页脚*/
  152 + .footer{
  153 + width: 750px;
  154 + height: 130px;
  155 + background: #FFFFFF;
  156 + box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  157 + position: fixed;
  158 + bottom:0px;
  159 + left:0px;
  160 + display:flex;
  161 + justify-content: center;
  162 + align-items: center;
  163 + .desc{
  164 + height: 130px;
  165 + font-size: 30px;
  166 + font-weight: 400;
  167 + color: #333333;
  168 + line-height: 130px;
  169 + margin: 0 30px;
  170 + }
  171 + .btn{
  172 + flex: 1;
  173 + margin: 20px 30px;
  174 + height: 90px;
  175 + line-height: 90px;
  176 + background: #F5A623;
  177 + border-radius: 16px;
  178 + text-align: center;
  179 + color: #fff;
  180 + font-size: 34px;
  181 + font-weight: 500;
  182 + color: #FFFFFF;
  183 + }
  184 + .grey{
  185 + background: #E6E6E6;
  186 + color: #888888;
  187 + }
  188 + }
  189 +}
0 \ No newline at end of file 190 \ No newline at end of file
src/pages/partyBuildingGoodDetails/partyBuildingGoodDetails.vue 0 → 100644
  View file @8ed9c63
  1 +<template>
  2 + <div class="good-details-box">
  3 + <!-- H5唤起App组件 -->
  4 + <call-app-box class="call-app-box"
  5 + :style="'padding-top: ' + $parent.top.value + 'px'"
  6 + ref="callApp"
  7 + v-if="!isCNLive.value"
  8 + :callApps="$parent.callApps">
  9 + </call-app-box>
  10 + <back-box v-if="isCNLive.value"
  11 + :class="{'hide': $route.query.hideBack == true}"
  12 + class="back-box"
  13 + :style="'padding-top: ' + $parent.top.value + 'px'"
  14 + @back="back"
  15 + :backs="backs">
  16 + </back-box>
  17 + <!-- pl -->
  18 + <div class="pl"
  19 + :style="'padding-top: ' + $parent.top.value + 'px'"
  20 + :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'hide': $route.query.hideBack == true}"></div>
  21 + <!--轮播-->
  22 + <!-- <swiper
  23 + :style="
  24 + 'margin-top:' +
  25 + ($parent.isBack && isCNLive.value ? 62 : 10) +
  26 + 'px'
  27 + "
  28 + v-if="simgList"
  29 + :swipers="goodsInfo.simg"
  30 + :isPointsMall= 'true'
  31 + :options="{
  32 + showIndicators: true
  33 + }"
  34 + >
  35 + </swiper> -->
  36 + <img v-if="goodsInfo && goodsInfo.simg"
  37 + class="goods-img"
  38 + v-lazy="goodsInfo.simg"
  39 + alt="" />
  40 + <!-- 内容 -->
  41 + <div class="main-box">
  42 + <!-- 标题 -->
  43 + <div v-if="goodsInfo && goodsInfo.title"
  44 + class="title">
  45 + {{goodsInfo.title}}
  46 + </div>
  47 + <!-- 积分值 -->
  48 + <div class="title-t">
  49 + <span v-if="goodsInfo && goodsInfo.prices"
  50 + class="price">¥{{goodsInfo.prices}}</span>
  51 + <span v-if="goodsInfo && goodsInfo.num"
  52 + class="integral">{{goodsInfo.num}}</span>
  53 + <span class="integral-in">积分值</span>
  54 + </div>
  55 + <!-- 商品信息 -->
  56 + <div class="goods-info">
  57 + <div class="good-title">
  58 + <span class="left"></span>商品详情
  59 + <span class="right"></span>
  60 + </div>
  61 + <div v-if="goodsInfo && goodsInfo.content"
  62 + v-html="goodsInfo.content"
  63 + class="good-desc html_box">
  64 + </div>
  65 + <!-- 积分商品信息 -->
  66 + <div class="good-title">
  67 + <span class="left"></span>规则说明
  68 + <span class="right"></span>
  69 + </div>
  70 + <!-- 商品来源 -->
  71 + <div class="health_desc">
  72 + <div class="health_title">
  73 + 商品来源
  74 + </div>
  75 + <div class="desc">
  76 + 积分商城的商品均由网家家审核的第三方合作商家提供，请放心兑换。
  77 + </div>
  78 + </div>
  79 + <!-- 商品差异 -->
  80 + <div class="health_desc">
  81 + <div class="health_title">
  82 + 商品差异
  83 + </div>
  84 + <div class="desc">
  85 + 商品图片仅供参考，具体请以实物准。
  86 + </div>
  87 + </div>
  88 + <!-- 发货时间 -->
  89 + <div class="health_desc">
  90 + <div class="health_title">
  91 + 发货时间
  92 + </div>
  93 + <div class="desc">
  94 + 商品兑换成功后，预计3-5个工作日发货，如遇节假日及特殊情况（如疫情严重），发货可能相应延迟，您可以在活动页面中的“兑换记录”查看物流信息。
  95 + </div>
  96 + </div>
  97 + <!-- 配送方式 -->
  98 + <div class="health_desc">
  99 + <div class="health_title">
  100 + 配送方式
  101 + </div>
  102 + <div class="desc">
  103 + 商品由合作商家通过快递进行配送，配送范围覆盖全国大部分地区（港澳台地区除外）
  104 + </div>
  105 + </div>
  106 + <!-- 修改信息 -->
  107 + <div class="health_desc">
  108 + <div class="health_title">
  109 + 修改信息
  110 + </div>
  111 + <div class="desc">
  112 + 商品兑换成功后无法更改配送信息，无法退还已使用的积分值，不支持申请退换货。
  113 + </div>
  114 + </div>
  115 + <!-- 商品损坏 -->
  116 + <div class="health_desc">
  117 + <div class="health_title">
  118 + 商品损坏
  119 + </div>
  120 + <div class="desc">
  121 + 签收时请您先确认商品外包装完整，如有问题请当场拒收，拒收后可以到官方客服群申请客服协助处理。
  122 + </div>
  123 + </div>
  124 + <!-- 问题咨询 -->
  125 + <div class="health_desc">
  126 + <div class="health_title">
  127 + 问题咨询
  128 + </div>
  129 + <div class="desc">
  130 + 您在使用过程中有任何问题，请加入官方客服群咨询。
  131 + </div>
  132 + </div>
  133 + <!-- 其他 -->
  134 + <div class="health_desc">
  135 + <div class="health_title">
  136 + 其他
  137 + </div>
  138 + <div class="desc">
  139 + 收货后恶意损坏商品、恶意投诉等影响正常运营，网家家有权拒绝售后服务并追究相关责任。
  140 + </div>
  141 + </div>
  142 + <!-- <div class="good-title">
  143 + <span class="left"></span>相似商品<span class="right"></span>
  144 + </div> -->
  145 + <!-- 像是商品推荐 -->
  146 + <!-- 商品样式 7 列表 -->
  147 + <!-- <column-list-box class="column-list-box" v-if="goodsInfo && goodsInfo.list && goodsInfo.list.length" @jump="toDetail"
  148 + :lists="goodsInfo"
  149 + company="2"
  150 + com="7">
  151 + </column-list-box> -->
  152 + </div>
  153 + </div>
  154 + <!-- 有积分值页脚显示 -->
  155 + <div v-if="goodsInfo && goodsInfo.stock != 0">
  156 + <!-- 积分值充足 -->
  157 + <div v-if="parseInt(goodsInfo.grade)>parseInt(goodsInfo.num) || parseInt(goodsInfo.grade) == parseInt(goodsInfo.num)"
  158 + class="footer">
  159 + <div class="btn"
  160 + @click="exchange">
  161 + 立即兑换
  162 + </div>
  163 + </div>
  164 + <!-- 积分值不足页脚显示 -->
  165 + <div v-else-if="parseInt(goodsInfo.grade)<parseInt(goodsInfo.num)"
  166 + class="footer">
  167 + <div class="desc">还差{{parseInt(goodsInfo.num)-parseInt(goodsInfo.grade)}}积分值</div>
  168 + <div class="btn"
  169 + @click="jumpClientIntegralList">
  170 + 获取积分值
  171 + </div>
  172 + </div>
  173 + </div>
  174 + <!-- 有积分值商品售罄 -->
  175 + <div v-else-if="goodsInfo && goodsInfo.stock == 0"
  176 + class="footer">
  177 + <div class="btn grey">
  178 + 补货中
  179 + </div>
  180 + </div>
  181 + <!-- 地址信息组件 -->
  182 + <!-- <app-address-toast v-if="isCNLive.value"
  183 + ref="itemsInfo"
  184 + @toUpdate="toLinkPointsMall"
  185 + v-show="pointsToast_control"></app-address-toast> -->
  186 + <!-- 填写地址浮层 -->
  187 + <address-modal ref="addressModal"
  188 + :options="addressModalOptions">
  189 + <!-- 底部提示信息slot -->
  190 + <!-- <div class="address-bottom-tips" slot="bottom">
  191 + 因气候和水果保鲜等原因，以下地区不发货：海外及港、澳、台、新疆、西藏、海南、青海、甘肃、宁夏、内蒙古、黑龙江、吉林、辽宁。
  192 + </div> -->
  193 + </address-modal>
  194 + </div>
  195 +</template>
  196 +
  197 +<script>
  198 +import { Swipe, SwipeItem } from 'vant';
  199 +import callAppBox from "@/components/callAppBox/callAppBox";
  200 +import swiper from "@/components/swiper/swiper";
  201 +import backBox from "@/components/backBox/backBox";
  202 +import columnListBox from "@/components/columnListBox/columnListBox";
  203 +import addressModal from '@/components/addressModal/addressModal';
  204 +import { Toast, Indicator } from "mint-ui";
  205 +export default {
  206 + name: 'goodDetails',
  207 + data () {
  208 + return {
  209 + title: "", // 标题
  210 + banner: null,
  211 + goodsInfo: null,
  212 + backs: null, // 后退按钮组
  213 + isExchange: false, // 是否已经兑换
  214 + currentAddress: null, // 当前选择的地址
  215 + addressModalOptions: null // 填写地址浮层选项
  216 + }
  217 + },
  218 + //部件
  219 + components: {
  220 + callAppBox,
  221 + swiper,
  222 + backBox,
  223 + columnListBox,
  224 + addressModal
  225 + },
  226 + //静态
  227 + props: [
  228 + ],
  229 + //对象内部的属性监听，也叫深度监听
  230 + head: {
  231 + title () {
  232 + return {
  233 + inner: this.title
  234 + }
  235 + }
  236 + },
  237 + watch: {
  238 + // 设置页面标题
  239 + title (newVal) {
  240 + if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
  241 + this.$iFrame.insertIFrame(newVal);
  242 + } else {
  243 + this.$emit("updateHead");
  244 + }
  245 + }
  246 + },
  247 + //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  248 + computed: {
  249 + },
  250 + //方法表示一个具体的操作，主要书写业务逻辑；
  251 + methods: {
  252 + // 跳转网家家购买音频协议
  253 + toLink () {
  254 + if (this.isCNLive.value) {
  255 + // 跳转封装
  256 + if (typeof this.$parent.gotoDetail === 'function') {
  257 + // 设置跳转参数
  258 + let params = {
  259 + type: '34',
  260 + to: "https://wjj.ys1.cnliveimg.com/term/liveFwxy.html?type=web",
  261 + shop_type: ''
  262 + };
  263 + // 页面跳转
  264 + this.$parent.gotoDetail(params);
  265 + }
  266 + } else {
  267 + this.$parent.callApp();
  268 + }
  269 + },
  270 + /**
  271 + * 后退
  272 + */
  273 + back () {
  274 + // 返回先隐藏弹框
  275 +
  276 + // 判断是否有处理函数
  277 + if (typeof this.$parent.back === 'function') {
  278 + // 隐藏通用浮层
  279 + this.$parent.$refs.showModal.hideLayer();
  280 + // 后退
  281 + this.$parent.back();
  282 + } else {
  283 +
  284 + // 后退
  285 + window.history.go(-1);
  286 + }
  287 + },
  288 + /**
  289 + * 跳转商品详情
  290 + * @param {Object} item [数据对象]
  291 + */
  292 + toDetail (item) {
  293 + if (this.isCNLive.value) {
  294 + // 跳转封装
  295 + if (typeof this.$parent.gotoDetail === 'function') {
  296 +
  297 + // 设置跳转参数
  298 + let params = {
  299 + type: '5',
  300 + to: window.location.origin + '/html/select_good/1/#/goodDetails?goodsId=' + item.id,
  301 + shop_type: ''
  302 + };
  303 +
  304 + // 页面跳转
  305 + this.$parent.gotoDetail(params);
  306 + }
  307 + } else {
  308 + this.$parent.callApp();
  309 + }
  310 + },
  311 + // 兑换
  312 + exchange () {
  313 + // 校验登录
  314 + if (this.$parent.checkLogin()) {
  315 + // 提示用积分值兑换兑换
  316 + let options = {
  317 + title: "",
  318 + message: "兑换将会消耗" + this.goodsInfo.num + "积分值" + '<br/>' + "确定兑换吗?",
  319 + confirmButtonText: "确定",
  320 + confirmButtonCallback: this.addLuckHealthOrderconfirm,
  321 + showCancelButton: true,
  322 + cancelButtonText: "取消"
  323 + };
  324 + // 调用showModal层参数
  325 + this.$set(this.$parent, "showOptions", options);
  326 + // 显示通用浮层
  327 + this.$parent.$refs.showModal.showLayer();
  328 + }
  329 + },
  330 + // 确定兑换回调
  331 + addLuckHealthOrderconfirm () {
  332 + /**
  333 + * 判断shop_type是否等于1等于1为实物弹出填写地址,其他商品直接走兑换接口
  334 + */
  335 + if (this.goodsInfo.shop_type == 1) {
  336 + // 判断当前地址是否设置，如果没设置，设置首选地址
  337 + if (!this.currentAddress) {
  338 +
  339 + // 设置首选地址
  340 + this.getMyFirstAddress();
  341 + } else {
  342 +
  343 + // 设置地址浮层参数
  344 + this.setAddressModalOptions();
  345 + }
  346 + // 判断组件是否加载
  347 + if (typeof this.$refs.addressModal === 'object') {
  348 + // 存储收货地址显示和隐藏状态
  349 + window.localStorage.setItem('addressModalIsShow', true)
  350 + }
  351 + } else {
  352 + // isExchange为false才可兑换防止连续点击
  353 + if (!this.isExchange) {
  354 + // 兑换
  355 + this.addLuckHealthOrder();
  356 + }
  357 + }
  358 + },
  359 + /**
  360 + * 分享
  361 + */
  362 + // toShare () {
  363 + // // 判断分享
  364 + // if (typeof this.$parent.toShare === 'function') {
  365 + // this.$parent.toShare(46, this.$route.query.goodsId, "");
  366 + // }
  367 + // },
  368 + /**
  369 + * 积分值兑换接口
  370 + */
  371 + addLuckHealthOrder (addressId) {
  372 + // 加载中提示
  373 + Indicator.open("加载中...");
  374 + // 获取证书请求接口
  375 + this.http("/Api/" + this.getApiVersion().LuckDraw + "/addLuckHealthOrder", {
  376 + uid: this.getStore("uid"),
  377 + id: this.$route.query.goodsId, // 商品ID
  378 + num: 1, // 数量
  379 + addressId: this.currentAddress.id || "" // 实物商品ID
  380 + }, this.addLuckHealthOrderCallback, {
  381 + method: "POST"
  382 + });
  383 + },
  384 +
  385 + /**
  386 + * 积分值兑换接口回调
  387 + * @param {Object} res [服务器返回数据]
  388 + * @param {Object} ext [扩展参数]
  389 + */
  390 + addLuckHealthOrderCallback (res, ext) {
  391 +
  392 + // 加载完成
  393 + Indicator.close();
  394 +
  395 + // 返回处理
  396 + if (res.code == 200) {
  397 + // 判断组件是否加载
  398 + if (typeof this.$refs.addressModal === 'object') {
  399 + // 隐藏填写地址浮层
  400 + this.$refs.addressModal.hideLayer();
  401 + }
  402 + // 解构数据
  403 + let { data: datas } = res;
  404 + // 方式连续点击兑换
  405 + this.isExchange = true;
  406 + // 两秒后可继续兑换
  407 + let _this = this
  408 + setTimeout(function () {
  409 + _this.isExchange = false;
  410 + }, 1500);
  411 + // 显示查看地址弹框
  412 + let options = {
  413 + title: "兑换成功",
  414 + message: "预计3-5个工作日发货，在活动页面的《兑换记录》里可以查看物流",
  415 + messageAlign: "center",
  416 + confirmButtonText: "我知道了",
  417 + confirmButtonCallback: ""
  418 + // confirmButtonCallback: this.addAddressCallback,
  419 + // params: { shopType: datas.shop_type, id: datas.id }
  420 + };
  421 + this.$set(this.$parent, "showOptions", options);
  422 + // 显示通用浮层
  423 + this.$parent.$refs.showModal.showLayer();
  424 + } else if (res.code == 401) {
  425 + // 获取积分值商品详情页失败
  426 + // 显示查看地址弹框
  427 + let options = {
  428 + title: "",
  429 + message: "你的积分值不足" + "<br>" + "赚取更多积分值，请至任务列表",
  430 + messageAlign: "center",
  431 + confirmButtonText: "确定",
  432 + confirmButtonCallback: this.jumpClientIntegralList,
  433 + showCancelButton: true,
  434 + cancelButtonText: "取消"
  435 + };
  436 + this.$set(this.$parent, "showOptions", options);
  437 + // 显示通用浮层
  438 + this.$parent.$refs.showModal.showLayer();
  439 + } else {
  440 + Toast(res.message);
  441 + }
  442 + },
  443 + /**
  444 + * 跳转赚取积分值页面
  445 + * @param {Object} item [数据对象]
  446 + */
  447 + jumpClientIntegralList () {
  448 + // 判断APP内
  449 + if (this.isCNLive.value) {
  450 + // 跳转封装
  451 + if (typeof this.$parent.gotoDetail === 'function') {
  452 + // 设置跳转参数
  453 + let params = {
  454 + type: '34',
  455 + to: this.mode == 'prod' ? "http://wjjh5.cnlive.com/cnStepApp.html?isShowTitle=true&type=web" : "http://wjjh5test.cnlive.com/cnStepApp.html?isShowTitle=true&type=web",
  456 + shop_type: ''
  457 + };
  458 + console.log(params);
  459 + // 页面跳转
  460 + this.$parent.gotoDetail(params);
  461 + }
  462 +
  463 + // （判断app内是否有该方法）
  464 + // if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.jumpClientIntegralList) {
  465 + // // 跳转到原生的任务列表
  466 + // window.webkit.messageHandlers.jumpClientIntegralList.postMessage({ body: {} });
  467 + // } else if (window.obj && window.obj.jumpClientIntegralList) {
  468 + // // 跳转到原生的任务列表
  469 + // window.obj.jumpClientIntegralList();
  470 + // }
  471 + }
  472 + },
  473 + /**
  474 + * 积分值商品详情页页面接口
  475 + */
  476 + getGoodsInfo (goodsId) {
  477 + // 加载中提示
  478 + Indicator.open("加载中...");
  479 + // 获取证书请求接口
  480 + this.http("/Api/" + this.getApiVersion().LuckDraw + "/luckGoodsInfo", {
  481 + id: goodsId, // 商品ID
  482 + uid: this.getStore("uid") // 用户ID
  483 + }, this.getGoodsInfoCallback, {
  484 + method: "POST"
  485 + });
  486 + },
  487 +
  488 + /**
  489 + * 积分值商品详情页页面接口回调
  490 + * @param {Object} res [服务器返回数据]
  491 + * @param {Object} ext [扩展参数]
  492 + */
  493 + getGoodsInfoCallback (res, ext) {
  494 +
  495 + // 加载完成
  496 + Indicator.close();
  497 +
  498 + // 返回处理
  499 + if (res.code == 200) {
  500 +
  501 + // 解构数据
  502 + let { data: datas } = res;
  503 + /* 获取详细信息 */
  504 + this.goodsInfo = datas
  505 + /* 相似商品 */
  506 + } else if (res.code == 400) {
  507 +
  508 + // 获取积分值商品详情页失败
  509 + Toast(res.message);
  510 + } else {
  511 +
  512 + // 获取积分值商品详情页失败
  513 + Toast("获取积分值商品详情页失败");
  514 + }
  515 + },
  516 + /**
  517 + * 我的首选地址
  518 + */
  519 + getMyFirstAddress () {
  520 +
  521 + // 校验必要参数
  522 + if (this.getStore("uid")) {
  523 +
  524 + // 请求接口
  525 + this.http("/Api/" + (this.getApiVersion().index) + "/myFirstAddress", {
  526 + uid: this.getStore("uid")
  527 + }, this.getMyFirstAddressCallback, {
  528 + method: "POST"
  529 + });
  530 + }
  531 + },
  532 +
  533 + /**
  534 + * 我的首选地址回调
  535 + * @param {object} res [服务器返回数据]
  536 + * @param {object} ext [扩展参数]
  537 + */
  538 + getMyFirstAddressCallback (res, ext) {
  539 +
  540 + // 返回处理
  541 + if (res.code == 200) {
  542 + // 解构数据
  543 + let datas = res.data;
  544 +
  545 + // 设置当前地址对象
  546 + this.$set(this, 'currentAddress', datas);
  547 +
  548 + // 校验用户登录信息
  549 + if (datas.uid === this.getStore("uid")) {
  550 + // 显示填写地址浮层
  551 + this.$refs.addressModal.showLayer();
  552 + // 同步当前选中的地址信息
  553 + window.localStorage.setItem('currentAddress', JSON.stringify(datas));
  554 + }
  555 + }
  556 +
  557 + // 设置地址浮层参数
  558 + this.setAddressModalOptions();
  559 + },
  560 + /**
  561 + * 设置地址浮层参数
  562 + */
  563 + setAddressModalOptions () {
  564 + // 显示填写地址浮层
  565 + this.$nextTick(() => {
  566 + // 判断组件是否加载
  567 + if (typeof this.$refs.addressModal === 'object') {
  568 +
  569 + // 设置地址浮层选项
  570 + this.$set(this, 'addressModalOptions', {
  571 + title: '收货地址',
  572 + showCancelButton: true,
  573 + bottomClose: true
  574 + });
  575 +
  576 + // 根据当前地址信息状态，设置浮层参数
  577 + if (this.currentAddress && this.currentAddress.name && this.currentAddress.phone && this.currentAddress.address) {
  578 +
  579 + // 设置参数
  580 + this.$set(this.addressModalOptions, 'name', this.currentAddress.name);
  581 + this.$set(this.addressModalOptions, 'phone', this.currentAddress.phone);
  582 + this.$set(this.addressModalOptions, 'address', this.currentAddress.address);
  583 + this.$set(this.addressModalOptions, 'confirmButtonText', '确定');
  584 + this.$set(this.addressModalOptions, 'confirmButtonCallback', this.addLuckHealthOrder);
  585 + this.$set(this.addressModalOptions, 'cancelButtonText', '更换地址');
  586 + this.$set(this.addressModalOptions, 'cancelButtonClass', 'btn-yellow');
  587 + this.$set(this.addressModalOptions, 'cancelButtonCallback', this.toAddressList);
  588 + } else {
  589 +
  590 + // 设置参数
  591 + this.$set(this.addressModalOptions, 'noDataCallback', this.toAddressList);
  592 + this.$set(this.addressModalOptions, 'confirmButtonText', '创建地址');
  593 + this.$set(this.addressModalOptions, 'confirmButtonCallback', this.toAddressList);
  594 + this.$set(this.addressModalOptions, 'cancelButtonText', '取消');
  595 + this.$set(this.addressModalOptions, 'cancelButtonCallback', this.$refs.addressModal.hideLayer);
  596 + }
  597 + console.log(this.addressModalOptions);
  598 + }
  599 + });
  600 + },
  601 + /**
  602 + * 地址列表（首先验证登录状态）
  603 + */
  604 + toAddressList () {
  605 + // 验证是否登录
  606 + if (this.$parent.checkLogin()) {
  607 + // 跳转地址簿列表页面
  608 + this.$router.push({
  609 + path: "/addressList",
  610 + query: {
  611 + mode: 'select_edit'
  612 + }
  613 + });
  614 + }
  615 + },
  616 + },
  617 + //请求数据
  618 + created () {
  619 + // 设置标题
  620 + this.$set(this, "title", "积分值商品详情页");
  621 + // 获取商品ID
  622 + let goodsId = this.$route.query.goodsId;
  623 + if (goodsId && this.$parent.checkLogin()) {
  624 + // 获取商品信息
  625 + this.getGoodsInfo(goodsId);
  626 + }
  627 + // 判断是否在App内
  628 + if (this.isCNLive.value) {
  629 +
  630 + // 添加后退按钮组“后退”和“分享”按钮
  631 + this.$set(this, 'backs', {
  632 + funcs: {
  633 + back: {
  634 + icon: "static/img/icon_back.png"
  635 + }
  636 + // funcArray: [
  637 + // {
  638 + // icon: "static/img/icon_share.png",
  639 + // func: this.toShare
  640 + // }
  641 + // ]
  642 + }
  643 + });
  644 +
  645 + // 设置标题
  646 + this.$set(this.backs, 'title', '商品详情页');
  647 + }
  648 +
  649 + /* 获取当前设置的地址对象 开始 */
  650 + let tempCurrentAddress = JSON.parse(window.localStorage.getItem('currentAddress'));
  651 + if (tempCurrentAddress && tempCurrentAddress.uid === this.getStore("uid")) {
  652 + // 设置当前选择地址
  653 + this.$set(this, 'currentAddress', tempCurrentAddress);
  654 +
  655 + // 判断地址簿层当前显示状态
  656 + if (window.localStorage.getItem("addressModalIsShow")) {
  657 + this.$nextTick(() => {
  658 + // 显示填写地址浮层
  659 + this.$refs.addressModal.showLayer();
  660 + // 判断组件是否加载
  661 + if (typeof this.$refs.addressModal === 'object') {
  662 + // 页面返回，地址簿显示中，重新设置地址簿信息
  663 + this.setAddressModalOptions();
  664 + }
  665 + });
  666 + }
  667 + } else {
  668 +
  669 + // 没有地址，初始化currentAddress
  670 + this.$set(this, 'currentAddress', null);
  671 + }
  672 +
  673 + /* 获取当前设置的地址对象 结束 */
  674 +
  675 + },
  676 + mounted () {
  677 + var that = this;
  678 + // 如果是App外，设置唤起App和微信内分享参数
  679 + if (!this.isCNLive.value) {
  680 + // 设置积分值首页唤起app参数
  681 + if (typeof this.$parent.getOpenApp === "function") {
  682 + this.$parent.getOpenApp({
  683 + type: 46,
  684 + id: this.$route.query.goodsId,
  685 + url: ""
  686 + });
  687 + }
  688 + }
  689 + },
  690 + destroyed () {
  691 + // 隐藏通用浮层
  692 + this.$parent.$refs.showModal.hideLayer();
  693 + }
  694 +}
  695 +</script>
  696 +
  697 +<style rel="stylesheet/less" lang="less" scoped>
  698 +@import './partyBuildingGoodDetails.less';
  699 +</style>
  700 +
  701 +<style>
  702 +.html_box img {
  703 + display: block;
  704 + width: 100%;
  705 +}
  706 +</style>
  707 +
src/pages/partyBuildingPointsMall/partyBuildingPointsMall.less 0 → 100644
  View file @8ed9c63
  1 +@charset "UTF-8";
  2 +
  3 +.gift_zone_detail{
  4 + width: 100%;
  5 + min-height: 100vh;
  6 + // background: #B62128 url("https://wjj.ys1.cnliveimg.com/769/h5/H5activity/kapai/detail-top.png") no-repeat center top;
  7 + background-size: 100%;
  8 + overflow: hidden;
  9 + .call-app-box{
  10 + position: fixed;
  11 + top:0;
  12 + left:0;
  13 + z-index:10;
  14 + }
  15 + .column-list-box{
  16 + margin-top:40px;
  17 + }
  18 + // 占位
  19 + .pl {
  20 + background-color: transparent;
  21 + width: 100%;
  22 + &.is-open-app {
  23 + height: 122px;
  24 + }
  25 + &.is-cnlive {
  26 + height: 93px;
  27 + }
  28 + }
  29 + .back-box{
  30 + background-color: #FFF;
  31 + position:fixed;
  32 + z-index:1;
  33 + }
  34 + .no_more{
  35 + width:100%;
  36 + height: 37px;
  37 + font-size: 26px;
  38 + font-weight: 400;
  39 + color: #333;
  40 + line-height: 37px;
  41 + letter-spacing: 1px;
  42 + text-align: center;
  43 + margin-top:10px;
  44 + // margin-bottom: 60px;
  45 + }
  46 + .not_yet{
  47 + margin-top:200px;
  48 + }
  49 +}
0 \ No newline at end of file 50 \ No newline at end of file
src/pages/partyBuildingPointsMall/partyBuildingPointsMall.vue 0 → 100644
  View file @8ed9c63
  1 +<template>
  2 + <div class="gift_zone_detail">
  3 + <call-app-box class="call-app-box"
  4 + :style="'padding-top: ' + $parent.top.value + 'px'"
  5 + ref="callApp"
  6 + v-if="!isCNLive.value"
  7 + :callApps="$parent.callApps">
  8 + </call-app-box>
  9 + <back-box v-if="isCNLive.value"
  10 + :class="{'hide': $route.query.hideBack == true}"
  11 + class="back-box"
  12 + :style="'padding-top: ' + $parent.top.value + 'px'"
  13 + @back="back"
  14 + :backs="backs">
  15 + </back-box>
  16 + <!-- pl -->
  17 + <div class="pl"
  18 + :style="'padding-top: ' + $parent.top.value + 'px'"
  19 + :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'hide': $route.query.hideBack == true}"></div>
  20 + <!-- 商品样式 7 列表 -->
  21 + <div class="gift_main_box"
  22 + v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length"
  23 + infinite-scroll-immediate-check="true"
  24 + v-infinite-scroll="loadMore"
  25 + infinite-scroll-disabled="loading"
  26 + :infinite-scroll-distance="distance">
  27 + <column-list-box class="column-list-box"
  28 + v-if="phyicalGoods && phyicalGoods.list && phyicalGoods.list.length"
  29 + @jump="toDetail"
  30 + :lists="phyicalGoods.list"
  31 + company="1"
  32 + com="7">
  33 + </column-list-box>
  34 + </div>
  35 + <!-- 没有更多了 -->
  36 + <div v-if="isNoMore && page>1"
  37 + class="no_more">
  38 + — 没有更多了 —
  39 + </div>
  40 + <!-- 暂无商品 -->
  41 + <div v-else-if="phyicalGoods.list.length == 0 && page==1"
  42 + class="no_more not_yet">
  43 + — 暂无商品 —
  44 + </div>
  45 + </div>
  46 +</template>
  47 +
  48 +<script>
  49 +import callAppBox from "@/components/callAppBox/callAppBox";
  50 +import backBox from "@/components/backBox/backBox";
  51 +import { Toast, Indicator } from "mint-ui";
  52 +import columnListBox from "@/components/columnListBox/columnListBox";
  53 +export default {
  54 + name: 'morePoints',
  55 + data () {
  56 + return {
  57 + title: "积分商城", // 标题
  58 + backs: null, // 后退按钮组
  59 + loading: true,
  60 + distance: 50,
  61 + phyicalGoods: { list: [] }, // 实物商品
  62 + page: 1,
  63 + isNoMore: false
  64 + }
  65 + },
  66 + //部件
  67 + components: {
  68 + backBox,
  69 + columnListBox,
  70 + callAppBox
  71 + },
  72 + //静态
  73 + props: [
  74 + ],
  75 + //对象内部的属性监听，也叫深度监听
  76 + head: {
  77 + title () {
  78 + return {
  79 + inner: this.title
  80 + }
  81 + }
  82 + },
  83 + watch: {
  84 + // 设置页面标题
  85 + title (newVal) {
  86 + if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
  87 + this.$iFrame.insertIFrame(newVal);
  88 + } else {
  89 + this.$emit("updateHead");
  90 + }
  91 + }
  92 + },
  93 + //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  94 + computed: {
  95 + },
  96 + //方法表示一个具体的操作，主要书写业务逻辑；
  97 + methods: {
  98 + /**
  99 + * 上拉加载
  100 + */
  101 + loadMore () {
  102 + this.$set(this, "page", ++this.page);
  103 + this.getIntegralNewGoodsList(this.page);
  104 + },
  105 + /**
  106 + * 加载积分商城商品更多
  107 + * @param {int} page [页码]
  108 + * @param {int}type [类型1为实物 2为虚拟物品 3为红包]
  109 + */
  110 + getIntegralNewGoodsList (page) {
  111 +
  112 + // 判断必须参数
  113 + if (this.$route.query.type) {
  114 +
  115 + // 加载中
  116 + this.$set(this, "loading", true);
  117 +
  118 + // 加载中提示
  119 + Indicator.open("加载中...");
  120 +
  121 + // 请求接口
  122 + this.http("/Api/" + (this.getApiVersion().LuckDraw) + "/integralMallGoods", {
  123 + type: this.$route.query.type,
  124 + page: page || 1
  125 + }, this.getIntegralNewGoodsListCallback, {
  126 + method: "POST"
  127 + });
  128 + }
  129 + },
  130 +
  131 + /**
  132 + * 礼品专区详情页回调
  133 + * @param {object} res [服务器返回数据]
  134 + * @param {object} ext [扩展参数]
  135 + */
  136 + getIntegralNewGoodsListCallback (res, ext) {
  137 +
  138 + // 加载完成
  139 + Indicator.close();
  140 +
  141 + // 返回处理
  142 + if (res.code == 200) {
  143 + // 解构数据
  144 + let { data: datas } = res;
  145 + /* 获取商品数据 开始 */
  146 + if (datas.goods && datas.goods.length) {
  147 + // 设置列表
  148 + this.$set(this.phyicalGoods, "list", [...this.phyicalGoods.list, ...datas.goods]);
  149 + // 设置还有需要加载的内容
  150 + this.$set(this, "loading", false);
  151 + } else {
  152 + this.isNoMore = true; // 没有更多了
  153 + // 没有需要加载的内容，停止上拉加载
  154 + this.$set(this, "loading", true);
  155 + }
  156 + /* 获取抽奖记录数据 结束 */
  157 +
  158 + } else if (res.code == 400) {
  159 +
  160 + // 获取抽奖记录失败
  161 + Toast(res.message);
  162 + } else {
  163 +
  164 + // 获取抽奖记录失败
  165 + Toast("获取专区礼包失败");
  166 + }
  167 + },
  168 +
  169 + /**
  170 + * 跳转商品详情
  171 + * @param {Object} item [数据对象]
  172 + */
  173 + toDetail (item) {
  174 + // 校验登录
  175 + if (this.$parent.checkLogin()) {
  176 + if (this.isCNLive.value) {
  177 + 通用跳转跳转到商品详情页新打开webview
  178 + if (typeof this.$parent.gotoDetail === 'function') {
  179 +
  180 + // 设置跳转参数
  181 + let params = {
  182 + type: '5',
  183 + to: window.location.origin + '/html/select_good/1/#/healthGoodDetails?goodsId=' + item.id,
  184 + shop_type: ''
  185 + };
  186 +
  187 + // 页面跳转
  188 + this.$parent.gotoDetail(params);
  189 + }
  190 + } else {
  191 + // 路由跳转到党建答题积分商品详情页
  192 + this.$router.push({
  193 + path: "/partyBuildingGoodDetails",
  194 + query: {
  195 + goodsId: item.id
  196 + }
  197 + });
  198 + }
  199 + }
  200 + },
  201 +
  202 + /**
  203 + * 后退
  204 + */
  205 + back () {
  206 + // 返回先隐藏弹框
  207 +
  208 + // 判断是否有处理函数
  209 + if (typeof this.$parent.back === 'function') {
  210 + // 隐藏通用浮层
  211 + this.$parent.$refs.showModal.hideLayer();
  212 + // 后退
  213 + this.$parent.back();
  214 + } else {
  215 +
  216 + // 后退
  217 + window.history.go(-1);
  218 + }
  219 + },
  220 +
  221 + /**
  222 + * 分享
  223 + */
  224 + toShare () {
  225 + // 判断分享
  226 + if (typeof this.$parent.toShare === 'function') {
  227 + this.$parent.toShare(46, this.$route.query.goodsId, "");
  228 + }
  229 + },
  230 +
  231 + },
  232 + //请求数据
  233 + created () {
  234 + // 抽奖记录
  235 + this.getIntegralNewGoodsList(this.page);
  236 +
  237 + // 判断是否在App内
  238 + if (this.isCNLive.value) {
  239 +
  240 + // 添加后退按钮组“后退”和“分享”按钮
  241 + this.$set(this, 'backs', {
  242 + funcs: {
  243 + back: {
  244 + icon: "static/img/icon_back.png"
  245 + }
  246 + // funcArray: [
  247 + // {
  248 + // icon: "static/img/icon_share.png",
  249 + // func: this.toShare
  250 + // }
  251 + // ]
  252 + }
  253 + });
  254 +
  255 + /*设置标题 */
  256 + this.$set(this.backs, 'title', "积分商城");
  257 + }
  258 +
  259 + },
  260 + mounted () {
  261 + // 如果是App外，设置唤起App和微信内分享参数
  262 + if (!this.isCNLive.value) {
  263 + // 设置积分首页唤起app参数
  264 + if (typeof this.$parent.getOpenApp === "function") {
  265 + this.$parent.getOpenApp({
  266 + type: 45,
  267 + id: 1,
  268 + url: ""
  269 + });
  270 + }
  271 + }
  272 + }
  273 +}
  274 +</script>
  275 +
  276 +<style rel="stylesheet/less" lang="less" scoped>
  277 +@import 'partyBuildingPointsMall';
  278 +</style>
  279 +
src/router/index.js
  View file @8ed9c63
@@ -371,6 +371,36 @@ const router = new Router({ @@ -371,6 +371,36 @@ const router = new Router({
371 } 371 }
372 }, 372 },
373 /* 健步走健康值商城结束 */ 373 /* 健步走健康值商城结束 */
  374 +
  375 + /* 党建答题纯积分商城开始 */
  376 + {
  377 + // 健康商城首页
  378 + path: "/partyBuildingPointsMall",
  379 + name: "partyBuildingPointsMall",
  380 + component: resolve => {
  381 + require([
  382 + "@/pages/partyBuildingPointsMall/partyBuildingPointsMall"
  383 + ], resolve);
  384 + },
  385 + meta: {
  386 + requireAuth: false
  387 + }
  388 + },
  389 + {
  390 + // 商品详情页
  391 + path: "/partyBuildingGoodDetails",
  392 + name: "partyBuildingGoodDetails",
  393 + component: resolve => {
  394 + require([
  395 + "@/pages/partyBuildingGoodDetails/partyBuildingGoodDetails"
  396 + ], resolve);
  397 + },
  398 + meta: {
  399 + requireAuth: false
  400 + }
  401 + },
  402 + /* 党建答题纯积分商城结束 */
  403 +
374 { 404 {
375 // 获取浏览器唯一标识（测试页面） 405 // 获取浏览器唯一标识（测试页面）
376 path: "/getBrowersAgent", 406 path: "/getBrowersAgent",