|
@@ -861,187 +861,203 @@ export default {
|
861
|
861
|
uni.showLoading({
|
862
|
862
|
title: "正在生成海报",
|
863
|
863
|
});
|
864
|
|
- return new Promise((resolve) => {
|
865
|
|
- self.router.getScene(self.$mp.query).then((res) => {
|
866
|
|
- res.uid = self.user.id;
|
867
|
|
- res.shopId = self.activeShop.id;
|
868
|
864
|
|
869
|
|
- Promise.all([
|
870
|
|
- uni.getImageInfo({
|
871
|
|
- src: self.goods.brandLogo,
|
872
|
|
- }),
|
873
|
|
- uni.getImageInfo({
|
874
|
|
- src: self.goods.pictureUrls[0],
|
875
|
|
- }),
|
876
|
|
- // 获取小程序吗
|
877
|
|
- self.api
|
878
|
|
- .get("/Share/GetQRCode", {
|
879
|
|
- path: self.$mp.page.route,
|
880
|
|
- paremeters: JSON.stringify(res),
|
881
|
|
- })
|
882
|
|
- .then((res) => {
|
883
|
|
- return uni.getImageInfo({
|
884
|
|
- src: res.data,
|
885
|
|
- });
|
|
865
|
+ return new Promise((resolve) => {
|
|
866
|
+ let logoUrl =
|
|
867
|
+ "https://youxuan.ixiaokejia.com/home/forwardimg?url=" +
|
|
868
|
+ encodeURI(self.goods.pictureUrls[0]);
|
|
869
|
+ self.api.get(logoUrl).then((logoRes) => {
|
|
870
|
+ self.router.getScene(self.$mp.query).then((res) => {
|
|
871
|
+ res.uid = self.user.id;
|
|
872
|
+ res.shopId = self.activeShop.id;
|
|
873
|
+
|
|
874
|
+ Promise.all([
|
|
875
|
+ uni.getImageInfo({
|
|
876
|
+ src: self.goods.brandLogo,
|
886
|
877
|
}),
|
887
|
|
- ]).then((res) => {
|
888
|
|
- // 背景
|
889
|
|
- ctx.setFillStyle("#fff");
|
890
|
|
- ctx.fillRect(0, 0, self.getPx(670), self.getPx(1080));
|
891
|
|
-
|
892
|
|
- // 头像
|
893
|
|
- if (res[0][1].path) {
|
894
|
|
- let avatarurl_width = self.getPx(70);
|
895
|
|
- let avatarurl_heigth = self.getPx(70);
|
896
|
|
- let avatarurl_x = self.getPx(30);
|
897
|
|
- let avatarurl_y = self.getPx(40);
|
898
|
|
- ctx.save();
|
899
|
|
- ctx.beginPath();
|
900
|
|
- ctx.arc(
|
901
|
|
- avatarurl_width / 2 + avatarurl_x,
|
902
|
|
- avatarurl_heigth / 2 + avatarurl_y,
|
903
|
|
- avatarurl_width / 2,
|
|
878
|
+ uni.getImageInfo({
|
|
879
|
+ src: logoRes.data,
|
|
880
|
+ }),
|
|
881
|
+ // 获取小程序吗
|
|
882
|
+ self.api
|
|
883
|
+ .get("/Share/GetQRCode", {
|
|
884
|
+ path: self.$mp.page.route,
|
|
885
|
+ paremeters: JSON.stringify(res),
|
|
886
|
+ })
|
|
887
|
+ .then((res) => {
|
|
888
|
+ return uni.getImageInfo({
|
|
889
|
+ src: res.data,
|
|
890
|
+ });
|
|
891
|
+ }),
|
|
892
|
+ ]).then((res) => {
|
|
893
|
+ // 背景
|
|
894
|
+ ctx.setFillStyle("#fff");
|
|
895
|
+ ctx.fillRect(
|
904
|
896
|
0,
|
905
|
|
- Math.PI * 2,
|
906
|
|
- true
|
907
|
|
- );
|
908
|
|
- ctx.clip();
|
909
|
|
- ctx.drawImage(
|
910
|
|
- res[0][1].path,
|
911
|
|
- avatarurl_x,
|
912
|
|
- avatarurl_y,
|
913
|
|
- avatarurl_width,
|
914
|
|
- avatarurl_heigth
|
|
897
|
+ 0,
|
|
898
|
+ self.getPx(670),
|
|
899
|
+ self.getPx(1080)
|
915
|
900
|
);
|
916
|
|
- ctx.restore();
|
917
|
|
- }
|
918
|
901
|
|
919
|
|
- // 昵称
|
920
|
|
- ctx.setFontSize(self.getPx(28));
|
921
|
|
- ctx.setFillStyle("#333");
|
922
|
|
- ctx.fillText(
|
923
|
|
- self.goods.brandName,
|
924
|
|
- self.getPx(115),
|
925
|
|
- self.getPx(90)
|
926
|
|
- );
|
927
|
|
- ctx.stroke();
|
|
902
|
+ // 头像
|
|
903
|
+ if (res[0][1].path) {
|
|
904
|
+ let avatarurl_width = self.getPx(70);
|
|
905
|
+ let avatarurl_heigth = self.getPx(70);
|
|
906
|
+ let avatarurl_x = self.getPx(30);
|
|
907
|
+ let avatarurl_y = self.getPx(40);
|
|
908
|
+ ctx.save();
|
|
909
|
+ ctx.beginPath();
|
|
910
|
+ ctx.arc(
|
|
911
|
+ avatarurl_width / 2 + avatarurl_x,
|
|
912
|
+ avatarurl_heigth / 2 + avatarurl_y,
|
|
913
|
+ avatarurl_width / 2,
|
|
914
|
+ 0,
|
|
915
|
+ Math.PI * 2,
|
|
916
|
+ true
|
|
917
|
+ );
|
|
918
|
+ ctx.clip();
|
|
919
|
+ ctx.drawImage(
|
|
920
|
+ res[0][1].path,
|
|
921
|
+ avatarurl_x,
|
|
922
|
+ avatarurl_y,
|
|
923
|
+ avatarurl_width,
|
|
924
|
+ avatarurl_heigth
|
|
925
|
+ );
|
|
926
|
+ ctx.restore();
|
|
927
|
+ }
|
928
|
928
|
|
929
|
|
- // // 商品图片
|
930
|
|
- ctx.drawImage(
|
931
|
|
- res[1][1].path,
|
932
|
|
- self.getPx(0),
|
933
|
|
- self.getPx(145),
|
934
|
|
- self.getPx(670),
|
935
|
|
- self.getPx(670)
|
936
|
|
- );
|
937
|
|
-
|
938
|
|
- // 商品标题,第一行
|
939
|
|
- let goodsName = self.goods.name;
|
940
|
|
-
|
941
|
|
- if (goodsName.length > 12) {
|
942
|
|
- goodsName = goodsName.substr(0, 12);
|
943
|
|
- }
|
944
|
|
- ctx.setFontSize(self.getPx(28));
|
945
|
|
- ctx.setFillStyle("#333");
|
946
|
|
- ctx.fillText(
|
947
|
|
- goodsName,
|
948
|
|
- self.getPx(50),
|
949
|
|
- self.getPx(880)
|
950
|
|
- );
|
951
|
|
- ctx.stroke();
|
|
929
|
+ // 昵称
|
|
930
|
+ ctx.setFontSize(self.getPx(28));
|
|
931
|
+ ctx.setFillStyle("#333");
|
|
932
|
+ ctx.fillText(
|
|
933
|
+ self.goods.brandName,
|
|
934
|
+ self.getPx(115),
|
|
935
|
+ self.getPx(90)
|
|
936
|
+ );
|
|
937
|
+ ctx.stroke();
|
|
938
|
+
|
|
939
|
+ // // 商品图片
|
|
940
|
+ ctx.drawImage(
|
|
941
|
+ res[1][1].path,
|
|
942
|
+ self.getPx(0),
|
|
943
|
+ self.getPx(145),
|
|
944
|
+ self.getPx(670),
|
|
945
|
+ self.getPx(670)
|
|
946
|
+ );
|
952
|
947
|
|
953
|
|
- // 商品标题,第二行
|
954
|
|
- let goodsName2 = self.goods.name;
|
955
|
|
- if (goodsName2.length > 12) {
|
956
|
|
- goodsName2 = goodsName2.substr(12, 10) + "...";
|
|
948
|
+ // 商品标题,第一行
|
|
949
|
+ let goodsName = self.goods.name;
|
957
|
950
|
|
|
951
|
+ if (goodsName.length > 12) {
|
|
952
|
+ goodsName = goodsName.substr(0, 12);
|
|
953
|
+ }
|
958
|
954
|
ctx.setFontSize(self.getPx(28));
|
959
|
955
|
ctx.setFillStyle("#333");
|
960
|
956
|
ctx.fillText(
|
961
|
|
- goodsName2,
|
|
957
|
+ goodsName,
|
962
|
958
|
self.getPx(50),
|
963
|
|
- self.getPx(920)
|
|
959
|
+ self.getPx(880)
|
964
|
960
|
);
|
965
|
961
|
ctx.stroke();
|
966
|
|
- }
|
967
|
|
-
|
968
|
|
- // 商品描述,第一行
|
969
|
|
- let descName = self.goods.description;
|
970
|
962
|
|
971
|
|
- if (descName.length > 14) {
|
972
|
|
- descName = descName.substr(0, 14);
|
973
|
|
- }
|
974
|
|
- ctx.setFontSize(self.getPx(24));
|
975
|
|
- ctx.setFillStyle("#666");
|
976
|
|
- ctx.fillText(descName, self.getPx(50), self.getPx(965));
|
977
|
|
- ctx.stroke();
|
|
963
|
+ // 商品标题,第二行
|
|
964
|
+ let goodsName2 = self.goods.name;
|
|
965
|
+ if (goodsName2.length > 12) {
|
|
966
|
+ goodsName2 = goodsName2.substr(12, 10) + "...";
|
|
967
|
+
|
|
968
|
+ ctx.setFontSize(self.getPx(28));
|
|
969
|
+ ctx.setFillStyle("#333");
|
|
970
|
+ ctx.fillText(
|
|
971
|
+ goodsName2,
|
|
972
|
+ self.getPx(50),
|
|
973
|
+ self.getPx(920)
|
|
974
|
+ );
|
|
975
|
+ ctx.stroke();
|
|
976
|
+ }
|
978
|
977
|
|
979
|
|
- // 商品描述,第二行
|
980
|
|
- let descName2 = self.goods.description;
|
981
|
|
- if (descName2.length > 14) {
|
982
|
|
- descName2 = descName2.substr(14, 14) + "...";
|
|
978
|
+ // 商品描述,第一行
|
|
979
|
+ let descName = self.goods.description;
|
983
|
980
|
|
|
981
|
+ if (descName.length > 14) {
|
|
982
|
+ descName = descName.substr(0, 14);
|
|
983
|
+ }
|
984
|
984
|
ctx.setFontSize(self.getPx(24));
|
985
|
985
|
ctx.setFillStyle("#666");
|
986
|
986
|
ctx.fillText(
|
987
|
|
- descName2,
|
|
987
|
+ descName,
|
988
|
988
|
self.getPx(50),
|
989
|
|
- self.getPx(995)
|
|
989
|
+ self.getPx(965)
|
990
|
990
|
);
|
991
|
991
|
ctx.stroke();
|
992
|
|
- }
|
993
|
992
|
|
994
|
|
- // 商品价格符号
|
995
|
|
- ctx.setFontSize(self.getPx(20));
|
996
|
|
- ctx.setFillStyle("#f8662a");
|
997
|
|
- ctx.fillText("¥", self.getPx(50), self.getPx(1050));
|
998
|
|
- ctx.stroke();
|
|
993
|
+ // 商品描述,第二行
|
|
994
|
+ let descName2 = self.goods.description;
|
|
995
|
+ if (descName2.length > 14) {
|
|
996
|
+ descName2 = descName2.substr(14, 14) + "...";
|
|
997
|
+
|
|
998
|
+ ctx.setFontSize(self.getPx(24));
|
|
999
|
+ ctx.setFillStyle("#666");
|
|
1000
|
+ ctx.fillText(
|
|
1001
|
+ descName2,
|
|
1002
|
+ self.getPx(50),
|
|
1003
|
+ self.getPx(995)
|
|
1004
|
+ );
|
|
1005
|
+ ctx.stroke();
|
|
1006
|
+ }
|
999
|
1007
|
|
1000
|
|
- // 商品价格
|
1001
|
|
- ctx.setFontSize(self.getPx(40));
|
1002
|
|
- ctx.setFillStyle("#f8662a");
|
1003
|
|
- ctx.fillText(
|
1004
|
|
- self.goods.minPrice / 100,
|
1005
|
|
- self.getPx(65),
|
1006
|
|
- self.getPx(1050)
|
1007
|
|
- );
|
1008
|
|
- ctx.stroke();
|
|
1008
|
+ // 商品价格符号
|
|
1009
|
+ ctx.setFontSize(self.getPx(20));
|
|
1010
|
+ ctx.setFillStyle("#f8662a");
|
|
1011
|
+ ctx.fillText("¥", self.getPx(50), self.getPx(1050));
|
|
1012
|
+ ctx.stroke();
|
1009
|
1013
|
|
1010
|
|
- // 小程序吗
|
1011
|
|
- ctx.drawImage(
|
1012
|
|
- res[2][1].path,
|
1013
|
|
- self.getPx(460),
|
1014
|
|
- self.getPx(850),
|
1015
|
|
- self.getPx(170),
|
1016
|
|
- self.getPx(170)
|
1017
|
|
- );
|
1018
|
|
-
|
1019
|
|
- // 长按扫码购买
|
1020
|
|
- ctx.setFontSize(self.getPx(24));
|
1021
|
|
- ctx.setFillStyle("#999");
|
1022
|
|
- ctx.fillText(
|
1023
|
|
- "长按扫码购买",
|
1024
|
|
- self.getPx(470),
|
1025
|
|
- self.getPx(1050)
|
1026
|
|
- );
|
1027
|
|
- ctx.stroke();
|
|
1014
|
+ // 商品价格
|
|
1015
|
+ ctx.setFontSize(self.getPx(40));
|
|
1016
|
+ ctx.setFillStyle("#f8662a");
|
|
1017
|
+ ctx.fillText(
|
|
1018
|
+ self.goods.minPrice / 100,
|
|
1019
|
+ self.getPx(65),
|
|
1020
|
+ self.getPx(1050)
|
|
1021
|
+ );
|
|
1022
|
+ ctx.stroke();
|
1028
|
1023
|
|
1029
|
|
- ctx.draw();
|
|
1024
|
+ // 小程序吗
|
|
1025
|
+ ctx.drawImage(
|
|
1026
|
+ res[2][1].path,
|
|
1027
|
+ self.getPx(460),
|
|
1028
|
+ self.getPx(850),
|
|
1029
|
+ self.getPx(170),
|
|
1030
|
+ self.getPx(170)
|
|
1031
|
+ );
|
1030
|
1032
|
|
1031
|
|
- self.canvasShow = true;
|
1032
|
|
- uni.hideLoading();
|
1033
|
|
- setTimeout(() => {
|
1034
|
|
- // 生成临时路径
|
1035
|
|
- uni.canvasToTempFilePath({
|
1036
|
|
- canvasId: "canvas",
|
1037
|
|
- fileType: "jpg",
|
1038
|
|
- success: function (res) {
|
1039
|
|
- // self.canvasShow = false
|
1040
|
|
- self.canvasImgPath = [res.tempFilePath];
|
1041
|
|
- resolve(res.tempFilePath);
|
1042
|
|
- },
|
1043
|
|
- });
|
1044
|
|
- }, 100);
|
|
1033
|
+ // 长按扫码购买
|
|
1034
|
+ ctx.setFontSize(self.getPx(24));
|
|
1035
|
+ ctx.setFillStyle("#999");
|
|
1036
|
+ ctx.fillText(
|
|
1037
|
+ "长按扫码购买",
|
|
1038
|
+ self.getPx(470),
|
|
1039
|
+ self.getPx(1050)
|
|
1040
|
+ );
|
|
1041
|
+ ctx.stroke();
|
|
1042
|
+
|
|
1043
|
+ ctx.draw();
|
|
1044
|
+
|
|
1045
|
+ self.canvasShow = true;
|
|
1046
|
+ uni.hideLoading();
|
|
1047
|
+ setTimeout(() => {
|
|
1048
|
+ // 生成临时路径
|
|
1049
|
+ uni.canvasToTempFilePath({
|
|
1050
|
+ canvasId: "canvas",
|
|
1051
|
+ fileType: "jpg",
|
|
1052
|
+ success: function (res) {
|
|
1053
|
+ // self.canvasShow = false
|
|
1054
|
+ console.log(res.tempFilePath,2222);
|
|
1055
|
+ self.canvasImgPath = [res.tempFilePath];
|
|
1056
|
+ resolve(res.tempFilePath);
|
|
1057
|
+ },
|
|
1058
|
+ });
|
|
1059
|
+ }, 100);
|
|
1060
|
+ });
|
1045
|
1061
|
});
|
1046
|
1062
|
});
|
1047
|
1063
|
});
|
|
@@ -1875,7 +1891,6 @@ page {
|
1875
|
1891
|
width: px(920);
|
1876
|
1892
|
height: px(1483);
|
1877
|
1893
|
background-color: #fff;
|
1878
|
|
- display: none;
|
1879
|
1894
|
}
|
1880
|
1895
|
}
|
1881
|
1896
|
.canvas__forward {
|