|
|
@@ -167,35 +167,36 @@
|
|
167
|
167
|
v-for="(item, index) in goodsList"
|
|
168
|
168
|
:key="index"
|
|
169
|
169
|
>
|
|
170
|
|
- <my-image
|
|
171
|
|
- class="goods__img"
|
|
172
|
|
- :src="item.mainImage"
|
|
173
|
|
- @click="edit(item)"
|
|
174
|
|
- ></my-image>
|
|
175
|
|
- <div class="goods__info">
|
|
176
|
|
- <div class="goods__box">
|
|
177
|
|
- <div
|
|
178
|
|
- class="goods__title"
|
|
179
|
|
- @click="edit(item)"
|
|
180
|
|
- >
|
|
181
|
|
- {{ item.name }}
|
|
182
|
|
- </div>
|
|
183
|
|
- <div
|
|
184
|
|
- class="goods__sale"
|
|
185
|
|
- @click="edit(item)"
|
|
186
|
|
- >
|
|
187
|
|
- <span v-if="item.price">
|
|
188
|
|
- 价格：￥{{
|
|
189
|
|
- item.price / 100
|
|
190
|
|
- }}
|
|
191
|
|
- </span>
|
|
192
|
|
-
|
|
193
|
|
- <span v-if="item.stock">
|
|
194
|
|
- 库存：{{ item.stock }}
|
|
195
|
|
- </span>
|
|
|
170
|
+ <div class="main">
|
|
|
171
|
+ <my-image
|
|
|
172
|
+ class="goods__img"
|
|
|
173
|
+ :src="item.mainImage"
|
|
|
174
|
+ @click="edit(item)"
|
|
|
175
|
+ ></my-image>
|
|
|
176
|
+ <div class="goods__info">
|
|
|
177
|
+ <div class="goods__box">
|
|
|
178
|
+ <div
|
|
|
179
|
+ class="goods__title"
|
|
|
180
|
+ @click="edit(item)"
|
|
|
181
|
+ >
|
|
|
182
|
+ {{ item.name }}
|
|
|
183
|
+ </div>
|
|
|
184
|
+ <div
|
|
|
185
|
+ class="goods__sale"
|
|
|
186
|
+ @click="edit(item)"
|
|
|
187
|
+ >
|
|
|
188
|
+ <span v-if="item.price">
|
|
|
189
|
+ 价格：￥{{
|
|
|
190
|
+ item.price / 100
|
|
|
191
|
+ }}
|
|
|
192
|
+ </span>
|
|
|
193
|
+
|
|
|
194
|
+ <span v-if="item.stock">
|
|
|
195
|
+ 库存：{{ item.stock }}
|
|
|
196
|
+ </span>
|
|
|
197
|
+ </div>
|
|
196
|
198
|
</div>
|
|
197
|
|
- </div>
|
|
198
|
|
- <!-- <div
|
|
|
199
|
+ <!-- <div
|
|
199
|
200
|
class="goods__price"
|
|
200
|
201
|
@click="edit(item)"
|
|
201
|
202
|
>
|
|
|
@@ -209,50 +210,42 @@
|
|
209
|
210
|
库存：{{ "¥" + item.stock }}
|
|
210
|
211
|
</div>
|
|
211
|
212
|
</div> -->
|
|
212
|
|
- <!-- 登录 -->
|
|
213
|
|
- <div class="btns">
|
|
214
|
|
- <button class="button">
|
|
215
|
|
- <div
|
|
216
|
|
- class="goods__add-text"
|
|
217
|
|
- @click="share(item)"
|
|
218
|
|
- >
|
|
219
|
|
- 分享
|
|
220
|
|
- </div>
|
|
221
|
|
- </button>
|
|
222
|
|
- <button class="button">
|
|
223
|
|
- <div
|
|
224
|
|
- class="goods__add-text"
|
|
225
|
|
- @click="setPrice(item)"
|
|
226
|
|
- >
|
|
227
|
|
- 改价
|
|
228
|
|
- </div>
|
|
229
|
|
- </button>
|
|
230
|
|
- <button
|
|
231
|
|
- class="button"
|
|
232
|
|
- @click="setStock(item)"
|
|
233
|
|
- >
|
|
234
|
|
- <div class="goods__add-text">
|
|
235
|
|
- 改库存
|
|
236
|
|
- </div>
|
|
237
|
|
- </button>
|
|
238
|
|
- <button
|
|
239
|
|
- class="button"
|
|
240
|
|
- v-if="item.status === 0"
|
|
241
|
|
- @click="setStatus(item, 1)"
|
|
242
|
|
- >
|
|
243
|
|
- <div class="goods__add-text">
|
|
244
|
|
- 上架
|
|
245
|
|
- </div>
|
|
246
|
|
- </button>
|
|
247
|
|
- <button
|
|
248
|
|
- class="button"
|
|
249
|
|
- v-if="item.status === 1"
|
|
250
|
|
- @click="setStatus(item, 0)"
|
|
251
|
|
- >
|
|
252
|
|
- <div class="goods__add-text">
|
|
253
|
|
- 下架
|
|
254
|
|
- </div>
|
|
255
|
|
- </button>
|
|
|
213
|
+ <!-- 登录 -->
|
|
|
214
|
+ </div>
|
|
|
215
|
+ </div>
|
|
|
216
|
+
|
|
|
217
|
+ <div class="btns">
|
|
|
218
|
+ <div
|
|
|
219
|
+ class="btn"
|
|
|
220
|
+ @click="share(item)"
|
|
|
221
|
+ >
|
|
|
222
|
+ {{item.shareLoading?'生成中':'海报'}}
|
|
|
223
|
+ </div>
|
|
|
224
|
+ <div
|
|
|
225
|
+ class="btn"
|
|
|
226
|
+ @click="setPrice(item)"
|
|
|
227
|
+ >
|
|
|
228
|
+ 改价
|
|
|
229
|
+ </div>
|
|
|
230
|
+ <div
|
|
|
231
|
+ class="btn"
|
|
|
232
|
+ @click="setStock(item)"
|
|
|
233
|
+ >
|
|
|
234
|
+ 改库存
|
|
|
235
|
+ </div>
|
|
|
236
|
+ <div
|
|
|
237
|
+ class="btn"
|
|
|
238
|
+ v-if="item.status === 0"
|
|
|
239
|
+ @click="setStatus(item, 1)"
|
|
|
240
|
+ >
|
|
|
241
|
+ 上架
|
|
|
242
|
+ </div>
|
|
|
243
|
+ <div
|
|
|
244
|
+ class="btn"
|
|
|
245
|
+ v-if="item.status === 1"
|
|
|
246
|
+ @click="setStatus(item, 0)"
|
|
|
247
|
+ >
|
|
|
248
|
+ 下架
|
|
256
|
249
|
</div>
|
|
257
|
250
|
</div>
|
|
258
|
251
|
</li>
|
|
|
@@ -325,7 +318,6 @@
|
|
325
|
318
|
</div>
|
|
326
|
319
|
|
|
327
|
320
|
<my-share ref="share" @share="saveImage"></my-share>
|
|
328
|
|
- <img src="/static/share/avatar.png" style="display:none" alt="">
|
|
329
|
321
|
</div>
|
|
330
|
322
|
</template>
|
|
331
|
323
|
|
|
|
@@ -676,18 +668,33 @@ export default {
|
|
676
|
668
|
}
|
|
677
|
669
|
},
|
|
678
|
670
|
|
|
|
671
|
+ shareLoading(id,status){
|
|
|
672
|
+ for(let item of this.goodsList){
|
|
|
673
|
+ if(item.id === id){
|
|
|
674
|
+ item.shareLoading = status;
|
|
|
675
|
+ }
|
|
|
676
|
+ }
|
|
|
677
|
+ this.goodsList = [...this.goodsList];
|
|
|
678
|
+ },
|
|
|
679
|
+
|
|
679
|
680
|
// 分享
|
|
680
|
681
|
share(val) {
|
|
|
682
|
+ if(val.shareLoading){
|
|
|
683
|
+ return;
|
|
|
684
|
+ }
|
|
681
|
685
|
const self = this;
|
|
682
|
|
- uni.showLoading({
|
|
683
|
|
- title: "加载中...",
|
|
684
|
|
- });
|
|
|
686
|
+ this.shareLoading(val.id,true);
|
|
|
687
|
+ // uni.showLoading({
|
|
|
688
|
+ // title: "加载中...",
|
|
|
689
|
+ // mask:true
|
|
|
690
|
+ // });
|
|
685
|
691
|
this.api.get("/Product/Detail", { id: val.id }).then((res) => {
|
|
686
|
692
|
this.shareGood = res.data;
|
|
687
|
|
- uni.hideLoading();
|
|
688
|
|
- self.$refs.share.open("", "", "", () => {
|
|
689
|
|
- self.canvasShow = false;
|
|
690
|
|
- });
|
|
|
693
|
+ // uni.hideLoading();
|
|
|
694
|
+ // self.$refs.share.open("", "", "", () => {
|
|
|
695
|
+ // self.canvasShow = false;
|
|
|
696
|
+ // });
|
|
|
697
|
+ this.saveImage('single');
|
|
691
|
698
|
});
|
|
692
|
699
|
},
|
|
693
|
700
|
// 获取换算成画布使用的像素
|
|
|
@@ -703,14 +710,16 @@ export default {
|
|
703
|
710
|
const self = this;
|
|
704
|
711
|
const ctx = uni.createCanvasContext("canvas", self);
|
|
705
|
712
|
|
|
706
|
|
- uni.showLoading({
|
|
707
|
|
- title: "正在生成海报",
|
|
708
|
|
- });
|
|
|
713
|
+ // uni.showLoading({
|
|
|
714
|
+ // title: "正在生成海报",
|
|
|
715
|
+ // mask:true
|
|
|
716
|
+ // });
|
|
709
|
717
|
return new Promise((resolve) => {
|
|
710
|
718
|
self.router.getScene(self.$mp.query).then((res) => {
|
|
711
|
719
|
Promise.all([
|
|
712
|
720
|
uni.getImageInfo({
|
|
713
|
|
- src: this.user.acatar || '/static/share/avatar.png',
|
|
|
721
|
+ src: this.user.avatar || (self.config.imageResourceUrl +
|
|
|
722
|
+ "images/common/avatar.png"),
|
|
714
|
723
|
}),
|
|
715
|
724
|
uni.getImageInfo({
|
|
716
|
725
|
src: self.shareGood.baseInfo.mainImage,
|
|
|
@@ -718,11 +727,11 @@ export default {
|
|
718
|
727
|
// 获取小程序吗
|
|
719
|
728
|
self.api
|
|
720
|
729
|
.get("/Share/GetQRCode", {
|
|
721
|
|
- path: 'pages/goods/detail',
|
|
|
730
|
+ path: "pages/goods/detail",
|
|
722
|
731
|
paremeters: JSON.stringify({
|
|
723
|
|
- goodsId:self.shareGood.baseInfo.id
|
|
|
732
|
+ goodsId: self.shareGood.baseInfo.id,
|
|
|
733
|
+ storeId:self.shareGood.baseInfo.storeId
|
|
724
|
734
|
}),
|
|
725
|
|
-
|
|
726
|
735
|
})
|
|
727
|
736
|
.then((res) => {
|
|
728
|
737
|
return uni.getImageInfo({
|
|
|
@@ -848,14 +857,14 @@ export default {
|
|
848
|
857
|
ctx.draw();
|
|
849
|
858
|
|
|
850
|
859
|
self.canvasShow = true;
|
|
851
|
|
- uni.hideLoading();
|
|
|
860
|
+ // uni.hideLoading();
|
|
852
|
861
|
setTimeout(() => {
|
|
853
|
862
|
// 生成临时路径
|
|
854
|
863
|
uni.canvasToTempFilePath({
|
|
855
|
864
|
canvasId: "canvas",
|
|
856
|
865
|
fileType: "jpg",
|
|
857
|
866
|
success: function (res) {
|
|
858
|
|
- // self.canvasShow = false
|
|
|
867
|
+ self.canvasShow = false
|
|
859
|
868
|
self.canvasImgPath = [res.tempFilePath];
|
|
860
|
869
|
resolve(res.tempFilePath);
|
|
861
|
870
|
},
|
|
|
@@ -889,7 +898,8 @@ export default {
|
|
889
|
898
|
self.router.getScene(self.$mp.query).then((res) => {
|
|
890
|
899
|
Promise.all([
|
|
891
|
900
|
uni.getImageInfo({
|
|
892
|
|
- src: this.user.acatar || '/static/share/avatar.png',
|
|
|
901
|
+ src: this.user.avatar || (self.config.imageResourceUrl +
|
|
|
902
|
+ "images/common/avatar.png"),
|
|
893
|
903
|
}),
|
|
894
|
904
|
uni.getImageInfo({
|
|
895
|
905
|
src: url,
|
|
|
@@ -902,11 +912,11 @@ export default {
|
|
902
|
912
|
// 获取小程序吗
|
|
903
|
913
|
self.api
|
|
904
|
914
|
.get("/Share/GetQRCode", {
|
|
905
|
|
- path: 'pages/goods/detail',
|
|
|
915
|
+ path: "pages/goods/detail",
|
|
906
|
916
|
paremeters: JSON.stringify({
|
|
907
|
|
- goodsId:self.shareGood.baseInfo.id
|
|
|
917
|
+ goodsId: self.shareGood.baseInfo.id,
|
|
|
918
|
+ storeId:self.shareGood.baseInfo.storeId
|
|
908
|
919
|
}),
|
|
909
|
|
-
|
|
910
|
920
|
})
|
|
911
|
921
|
.then((res) => {
|
|
912
|
922
|
return uni.getImageInfo({
|
|
|
@@ -1013,7 +1023,7 @@ export default {
|
|
1013
|
1023
|
// 保存图片到相册
|
|
1014
|
1024
|
async saveImage(type) {
|
|
1015
|
1025
|
const self = this;
|
|
1016
|
|
-
|
|
|
1026
|
+ const good = this.shareGood;
|
|
1017
|
1027
|
if (type === "single" && !self.canvasHandleStatus) {
|
|
1018
|
1028
|
// 分享图
|
|
1019
|
1029
|
self.canvasHandleStatus = true;
|
|
|
@@ -1035,6 +1045,8 @@ export default {
|
|
1035
|
1045
|
if (res.confirm) {
|
|
1036
|
1046
|
self.canvasHandleStatus = false;
|
|
1037
|
1047
|
self.fn.openSetting();
|
|
|
1048
|
+ }else{
|
|
|
1049
|
+ self.shareLoading(good.baseInfo.id,false);
|
|
1038
|
1050
|
}
|
|
1039
|
1051
|
});
|
|
1040
|
1052
|
} else {
|
|
|
@@ -1044,9 +1056,11 @@ export default {
|
|
1044
|
1056
|
uni.saveImageToPhotosAlbum({
|
|
1045
|
1057
|
filePath: res,
|
|
1046
|
1058
|
success: function () {
|
|
1047
|
|
- self.fn.showToast("保存成功");
|
|
|
1059
|
+ self.shareLoading(good.baseInfo.id,false);
|
|
|
1060
|
+ self.fn.showToast("海报保存成功");
|
|
1048
|
1061
|
},
|
|
1049
|
1062
|
complete: function () {
|
|
|
1063
|
+ self.shareLoading(good.baseInfo.id,false);
|
|
1050
|
1064
|
self.canvasHandleStatus = false;
|
|
1051
|
1065
|
},
|
|
1052
|
1066
|
});
|
|
|
@@ -1391,18 +1405,23 @@ page {
|
|
1391
|
1405
|
display: flex;
|
|
1392
|
1406
|
flex-wrap: wrap;
|
|
1393
|
1407
|
justify-content: space-between;
|
|
1394
|
|
- padding: px(35) px(35) 0 px(60);
|
|
|
1408
|
+ padding: px(35) 0 0 0;
|
|
1395
|
1409
|
background-color: #fff;
|
|
1396
|
1410
|
border-top: 1px solid #f6f6f6;
|
|
1397
|
1411
|
}
|
|
1398
|
1412
|
|
|
1399
|
1413
|
&__item {
|
|
1400
|
1414
|
width: 100%;
|
|
1401
|
|
- padding-bottom: px(100);
|
|
|
1415
|
+ margin-bottom: px(60);
|
|
|
1416
|
+ border-bottom: 1px solid #f1f1f1;
|
|
|
1417
|
+ }
|
|
|
1418
|
+ .main {
|
|
|
1419
|
+ width: 100%;
|
|
1402
|
1420
|
overflow: hidden;
|
|
1403
|
1421
|
// border-radius: px(20) px(20) 0 0;
|
|
1404
|
1422
|
display: flex;
|
|
1405
|
1423
|
justify-content: space-between;
|
|
|
1424
|
+ padding: 0 px(35);
|
|
1406
|
1425
|
}
|
|
1407
|
1426
|
|
|
1408
|
1427
|
&__img {
|
|
|
@@ -1475,19 +1494,29 @@ page {
|
|
1475
|
1494
|
}
|
|
1476
|
1495
|
.btns {
|
|
1477
|
1496
|
overflow: visible;
|
|
1478
|
|
- position: absolute;
|
|
1479
|
|
- bottom: 0;
|
|
1480
|
|
- right: 0;
|
|
1481
|
|
- z-index: 1;
|
|
|
1497
|
+ // position: absolute;
|
|
|
1498
|
+ // bottom: 0;
|
|
|
1499
|
+ // right: 0;
|
|
|
1500
|
+ // z-index: 1;
|
|
|
1501
|
+ width: 100%;
|
|
1482
|
1502
|
display: flex;
|
|
1483
|
1503
|
align-items: center;
|
|
1484
|
1504
|
max-width: 100%;
|
|
1485
|
|
- .button {
|
|
1486
|
|
- margin-left: px(20);
|
|
1487
|
|
- }
|
|
|
1505
|
+ border-top: 1px solid #f1f1f1;
|
|
|
1506
|
+ margin-top: px(20);
|
|
1488
|
1507
|
}
|
|
1489
|
|
- .button {
|
|
1490
|
|
- // padding: px(30) px(10) px(10) px(30);
|
|
|
1508
|
+ .btn {
|
|
|
1509
|
+ width: 25%;
|
|
|
1510
|
+ height: px(100);
|
|
|
1511
|
+ line-height: px(100);
|
|
|
1512
|
+ // background-color: #27a34f;
|
|
|
1513
|
+ color: #333;
|
|
|
1514
|
+ font-size: px(40);
|
|
|
1515
|
+ padding: 0 px(20);
|
|
|
1516
|
+ text-align: center;
|
|
|
1517
|
+ &~.btn{
|
|
|
1518
|
+ border-left: 1px solid #f1f1f1;
|
|
|
1519
|
+ }
|
|
1491
|
1520
|
}
|
|
1492
|
1521
|
.cart-num {
|
|
1493
|
1522
|
// padding: px(30) px(10) px(10) px(30);
|
|
|
@@ -1503,44 +1532,6 @@ page {
|
|
1503
|
1532
|
z-index: 1;
|
|
1504
|
1533
|
}
|
|
1505
|
1534
|
|
|
1506
|
|
- &__add-text {
|
|
1507
|
|
- height: px(60);
|
|
1508
|
|
- line-height: px(60);
|
|
1509
|
|
- background-color: #27a34f;
|
|
1510
|
|
- color: #fff;
|
|
1511
|
|
- font-size: px(30);
|
|
1512
|
|
- padding: 0 px(20);
|
|
1513
|
|
- border-radius: px(30);
|
|
1514
|
|
- }
|
|
1515
|
|
-
|
|
1516
|
|
- &__add {
|
|
1517
|
|
- background-color: #27a34f;
|
|
1518
|
|
- width: px(60);
|
|
1519
|
|
- height: px(60);
|
|
1520
|
|
- border-radius: 50%;
|
|
1521
|
|
- // box-shadow: px(1) px(2) px(6) #27a34f;
|
|
1522
|
|
- position: relative;
|
|
1523
|
|
- &::after,
|
|
1524
|
|
- &::before {
|
|
1525
|
|
- content: "";
|
|
1526
|
|
- position: absolute;
|
|
1527
|
|
- top: 50%;
|
|
1528
|
|
- left: 50%;
|
|
1529
|
|
- z-index: 1;
|
|
1530
|
|
- width: 60%;
|
|
1531
|
|
- height: px(6);
|
|
1532
|
|
- border-radius: px(6);
|
|
1533
|
|
- background: #fff;
|
|
1534
|
|
- }
|
|
1535
|
|
- &::after {
|
|
1536
|
|
- transform: translate(-50%, -50%);
|
|
1537
|
|
- }
|
|
1538
|
|
- &::before {
|
|
1539
|
|
- transform-origin: center;
|
|
1540
|
|
- transform: translate(-50%, -50%) rotate(90deg);
|
|
1541
|
|
- }
|
|
1542
|
|
- }
|
|
1543
|
|
-
|
|
1544
|
1535
|
&__remove {
|
|
1545
|
1536
|
background-color: #fff;
|
|
1546
|
1537
|
width: px(60);
|
|
|
@@ -1719,13 +1710,13 @@ page {
|
|
1719
|
1710
|
}
|
|
1720
|
1711
|
.canvas {
|
|
1721
|
1712
|
position: fixed;
|
|
1722
|
|
- top: 0;
|
|
1723
|
|
- left: 0;
|
|
1724
|
|
- z-index: 996;
|
|
|
1713
|
+ top: -100%;
|
|
|
1714
|
+ left: -100%;
|
|
|
1715
|
+ z-index: -11;
|
|
1725
|
1716
|
width: 100%;
|
|
1726
|
1717
|
height: 100%;
|
|
1727
|
1718
|
background-color: rgba(0, 0, 0, 0.4);
|
|
1728
|
|
-
|
|
|
1719
|
+ visibility: hidden;
|
|
1729
|
1720
|
&__content {
|
|
1730
|
1721
|
position: relative;
|
|
1731
|
1722
|
width: 100%;
|
|
|
@@ -1772,5 +1763,4 @@ page {
|
|
1772
|
1763
|
background-color: #fff;
|
|
1773
|
1764
|
}
|
|
1774
|
1765
|
}
|
|
1775
|
|
-
|
|
1776
|
1766
|
</style>
|
