feat: 启动页

This commit is contained in:
2025-12-17 16:22:19 +08:00
parent 97f2bfe14b
commit 761f273a5d
8 changed files with 1647 additions and 1413 deletions
+425 -400
View File
@@ -1,6 +1,6 @@
<template>
<view class="product_info_warp">
<!-- <image v-if="tmpImg" :src="tmpImg" style="width:620rpx;height:960rpx"></image> -->
<!-- <image v-if="tmpImg" :src="tmpImg" style="width:620rpx;height:960rpx"></image> -->
<!-- 头部产品描述图 -->
<view class="product_info_header_warp">
<up-swiper
@@ -23,13 +23,13 @@
width="30"
height="30"
bgColor="#f1f6ff00"
v-if="!isShareUrl"
v-if="!isShareUrl"
@click="jumpLeft"
></up-image>
</view>
<view class="img_comm right_warp">
<up-image
v-if="!isShareUrl"
v-if="!isShareUrl"
src="/static/common/share_st.png"
width="30"
height="30"
@@ -79,7 +79,7 @@
<!-- 暂时隐藏 -->
<view></view>
<!-- 销量还需要改 -->
<view>销量{{ orderInfo.sales }}件</view>
<view>销量{{ limit999(orderInfo.sales) }}件</view>
</view>
</view>
@@ -126,7 +126,9 @@
<view class="concrete_item_value">
<view class="address_warp">
<!-- <view style="margin-left: 10rpx">包邮</view> -->
<view style="margin-left: 10rpx">{{ postage ? `¥${postage}元` : '包邮'}}</view>
<view style="margin-left: 10rpx">{{
postage ? `¥${postage}元` : "包邮"
}}</view>
</view>
</view>
</view>
@@ -158,18 +160,20 @@
<!-- <up-image src="/static/common/right.png" width="20" height="20" bgColor="#f1f6ff00"></up-image> -->
</view>
</view>
<view class="tui-view">
<text class="text-32 text-zu">退货提示</text>
<text class="text-28 text-fu1" >拆封后影响品质”或“影响二次销售的”不予退货。</text>
<view class="tui-list">
<view class="tui-box" :key="index" v-for="(item,index) in tuiList">
<image :src="`/static/new/tui_${index}.png`"></image>
<text class="text-24 text-zu1">{{item}}</text>
</view>
<!-- tuiList -->
</view>
</view>
<view class="tui-view">
<text class="text-32 text-zu">退货提示</text>
<text class="text-28 text-fu1"
>拆封后影响品质”或“影响二次销售的”不予退货。</text
>
<view class="tui-list">
<view class="tui-box" :key="index" v-for="(item, index) in tuiList">
<image :src="`/static/new/tui_${index}.png`"></image>
<text class="text-24 text-zu1">{{ item }}</text>
</view>
<!-- tuiList -->
</view>
</view>
<!-- 商品详情 -->
<view class="content_details">
@@ -226,7 +230,13 @@
>立即购买</view
>
</view>
<MyBtn v-if="isShareUrl" mh="88rpx" text="打开APP" wd="200rpx" @ok="onOpenApp"></MyBtn>
<MyBtn
v-if="isShareUrl"
mh="88rpx"
text="打开APP"
wd="200rpx"
@ok="onOpenApp"
></MyBtn>
</view>
<!-- 选择规格的弹框 -->
<up-popup
@@ -346,7 +356,7 @@
@click="addCart(false)"
>加入购物车</view
>
<view v-else class="product_but_right popup_buts">
<view class="but_comm join_warp" @click="addCart(false)"
>加入购物车</view
@@ -436,25 +446,27 @@
<view class="popup_but" @click="addressOk"> 确认 </view>
</view>
</up-popup>
<SharePopup
ref="share"
v-if="shareOpen"
:show="shareShow"
@close="onClose"
@share="onShare"
:id="id"
:text="orderInfo.name ? orderInfo.name : ''"
:price="orderInfo.minPrice ? orderInfo.minPrice : ''"
:tu="swiperList.length && swiperList[0]"></SharePopup>
<view class="hideCanvasView">
<canvas
id="myCanvas"
canvas-id="myCanvas"
:style="{
height: ((bgObj.height) + 'px'),
width: ((bgObj.width) + 'px')
}"></canvas>
</view>
<SharePopup
ref="share"
v-if="shareOpen"
:show="shareShow"
@close="onClose"
@share="onShare"
:id="id"
:text="orderInfo.name ? orderInfo.name : ''"
:price="orderInfo.minPrice ? orderInfo.minPrice : ''"
:tu="swiperList.length && swiperList[0]"
></SharePopup>
<view class="hideCanvasView">
<canvas
id="myCanvas"
canvas-id="myCanvas"
:style="{
height: bgObj.height + 'px',
width: bgObj.width + 'px',
}"
></canvas>
</view>
</view>
</template>
@@ -462,12 +474,12 @@
import { getGoodsDetail, addGoods, getGoodsSpecs } from "@/api/product.js";
import { getValue, PRODUCT_DELIVERY_TIME } from "@/utils/enumUtils.js";
import { copyData } from "@/utils/index.js";
import SharePopup from "@/pages/other_package/components/share-popup.vue"
import MyBtn from '@/components/common/my-btn.vue'
import SharePopup from "@/pages/other_package/components/share-popup.vue";
import MyBtn from "@/components/common/my-btn.vue";
import { getPostageQuery } from "@/api/cart.js";
import { assembleAddress } from "@/utils/index.js";
// const QSCanvas = require('qs-canvas')
import QSCanvas from 'qs-canvas';
import QSCanvas from "qs-canvas";
// import {getSharePoster} from "@/components/QuShe-SharerPoster/QS-SharePoster/QS-SharePoster.js";
import func from "@/utils/func.js";
import Address from "@/components/address.vue";
@@ -492,16 +504,16 @@ export default {
},
components: {
Address,
SharePopup,
MyBtn
SharePopup,
MyBtn,
},
data() {
return {
id: 0,
shareShow:false,
shareShow: false,
addressShow: false, // 收件地址选择
shareOpen:false,
tuiList:['破损','污渍','划痕','标签','其他'],
shareOpen: false,
tuiList: ["破损", "污渍", "划痕", "标签", "其他"],
swiperList: [],
currentNum: 0,
specificationShow: false,
@@ -518,22 +530,25 @@ export default {
selectAddress: {}, // 选择的地址
postage: null, // 邮费
adressInfo: "",
urlPath:'',
posterImage:'',
canvasId: 'default_PosterCanvasId',
poster:'',
bgObj: {
height: 480,
width: 310
},
draw:null,
tmpImg:'',
isShareUrl:false
urlPath: "",
posterImage: "",
canvasId: "default_PosterCanvasId",
poster: "",
bgObj: {
height: 480,
width: 310,
},
draw: null,
tmpImg: "",
isShareUrl: false,
isSplash: false,
};
},
onLoad(options) {
const id = options.id;
const source = options.source;
this.isSplash = options.isSplash;
console.log("isSplash", this.isSplash == "true");
if (id && id !== 0) {
this.id = id ? parseInt(id, 10) : 0;
@@ -544,299 +559,306 @@ export default {
this.getById();
}
}
// #ifdef H5
let url = window.location.href;
if(url.indexOf(SHARE_URL) != -1){
this.isShareUrl = true;
}
console.log('url',url,SHARE_URL)
// #endif
qsc = new QSCanvas({
canvasId: 'myCanvas',
setCanvasWH: bg => {
this.bgObj = bg
}
}, this);
// #ifdef H5
let url = window.location.href;
if (url.indexOf(SHARE_URL) != -1) {
this.isShareUrl = true;
}
console.log("url", url, SHARE_URL);
// #endif
qsc = new QSCanvas(
{
canvasId: "myCanvas",
setCanvasWH: (bg) => {
this.bgObj = bg;
},
},
this
);
},
onHide(){
timer && clearTimeout(timer);
timer = null;
onHide() {
timer && clearTimeout(timer);
timer = null;
},
onUnload(){
timer && clearTimeout(timer);
timer = null;
onUnload() {
timer && clearTimeout(timer);
timer = null;
},
methods: {
assembleAddress,
onOpenApp(){
//https://download.tbmall.xin/1002/apppacket/20251113/20251113183449483.apk
let iphone = this.iosOrAnd();
window.location = 'trustbridgeapp://';
timer = setTimeout(()=>{
if(timer != null){
uni.showModal({
title:'未成功唤起APP',
content:'是否前往下载?',
success:(res=>{
if(res.confirm){
window.open('https://app.tbmall.xin')
}
})
})
}
},3000)
},
iosOrAnd() {
let userAgent = navigator.userAgent || navigator.vendor || window.opera;
if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
return "ios";
}
if (/Android/.test(userAgent)) {
return "and";
}
return "Other";
},
limit999(n) {
return n > 999 ? '999+' : String(n);
},
onOpenApp() {
//https://download.tbmall.xin/1002/apppacket/20251113/20251113183449483.apk
let iphone = this.iosOrAnd();
window.location = "trustbridgeapp://";
timer = setTimeout(() => {
if (timer != null) {
uni.showModal({
title: "未成功唤起APP",
content: "是否前往下载?",
success: (res) => {
if (res.confirm) {
window.open("https://app.tbmall.xin");
}
},
});
}
}, 3000);
},
iosOrAnd() {
let userAgent = navigator.userAgent || navigator.vendor || window.opera;
if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
return "ios";
}
if (/Android/.test(userAgent)) {
return "and";
}
return "Other";
},
onZiXun() {
if(this.isShareUrl){
return;
}
if (this.isShareUrl) {
return;
}
uni.navigateTo({
url: "/pages/rwa_package/setting/kefu?type=5260",
});
},
getValue,
onShare(index){
let tmp = `【信任桥】消费共享数字化权益 ${SHARE_URL}/#/pages/other_package/productInfo/productInfo?id=${this.id} ${this.orderInfo.name}`;
if(index == 0){
// WXSceneTimeline
uni.share({
provider:'weixin',
scene:'WXSceneSession',
type:1,
summary:tmp,
})
this.onClose()
}else if(index == 1){
uni.share({
provider:'weixin',
scene:'WXSceneTimeline',
type:1,
summary:tmp,
})
}else if(index == 2){
this.onClose()
}else if(index == 3){
setTimeout(()=>{
this.onDraw();
},1000)
this.onClose()
}else if(index == 4){
return func.myToast('暂未开放');
uni.share({
provider:'qq',
type:1,
summary:tmp,
})
}
},
async onDraw(){
let _this = this;
try {
let last
// qsc.setRect({ x: 0, y: 0,r:12, height: 960, width: 620});
qsc.setPaintbrush({
strokeStyle:'#EBEBEB',
font: {
fontSize: 16
}
})
last = await qsc.drawImg({
val: 'https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/di.png',
x: 0,
y: 0,
height: 480,
width: 310,
})
last = await qsc.drawImg({
val: 'https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/logo.png',
x: 228,
y: 393,
height: 62,
width: 62,
})
// last = await qsc.drawImg({
// val:'https://niu8.letaocm.top/17557729915067836.jpg',
// x: 20,
// y: 20,
// height: 270,
// width: 270,
// })
// #ifndef H5
last = await qsc.drawImg({
val:_this.swiperList[0],
x: 20,
y: 20,
height: 270,
width: 270,
})
// #endif
qsc.setPaintbrush({
strokeStyle:'#EBEBEB'
})
// { x1: obj.x, y1: y, x2: obj.x + tw, y2: y, style, gap, width, color }
last = await qsc.drawLine({
style:'solide',
x1:210,
y1:313,
x2:210,
y2:342,
width:1,
gap:1
})
last = await qsc.drawLine({
style:'solide',
x1:20,
y1:368,
x2:290,
y2:368,
width:1,
gap:1
})
// last = await qsc.drawImg({
// val:'https://hashmall-prod.oss-cn-shenzhen.aliyuncs.com/1002/image/20250818/20250818134614672.jpg',
// x: 20,
// y: 20,
// height: 270,
// width: 270,
// })
last = await qsc.drawText({
val: this.orderInfo.name,
x: 20,
y: 310,
maxWidth: 180,
line: 2
})
last = await qsc.drawText({
val: '1、保存图片到相册',
x: 93,
y: 397,
paintbrushProps: { fillStyle: '#7f7f7f',font: { fontSize: 12, fontWeight: 400 } } ,
})
last = await qsc.drawText({
val: '2、扫一扫下载信任桥',
x: 93,
y: 438,
paintbrushProps: { fillStyle: '#7f7f7f',font: { fontSize: 12, fontWeight: 400 } } ,
})
last = await qsc.drawText({
val: '¥' + this.orderInfo.minPrice,
x: 230,
y: 317,
paintbrushProps: { fillStyle: '#7A35F6',font: { fontSize: 20, fontWeight: 700 } } ,
})
last = await qsc.drawQrCode({
val: `${SHARE_URL}/#/pages/other_package/productInfo/productInfo?id=${this.id}`,
x: 20,
y: 391,
size: 65,
})
// await qsc.updateCanvasWH({ width: '300px', height: '960px'})
await qsc.draw();
setTimeout(()=>{
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function (res) {
const tempFilePath = res.tempFilePath;
_this.tmpImg = tempFilePath;
// #ifdef H5
uni.downloadFile({
url: tempFilePath,
success: function () {
let link = document.createElement('a');
link.href = tempFilePath;
link.download = '分享图片';
link.click();
},
fail: function (err) {
uni.showToast({
title: '保存失败',
icon: 'none',
duration: 2000
});
}
});
// #endif
// #ifndef H5
uni.saveImageToPhotosAlbum({
filePath: tempFilePath,
success: function () {
uni.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
});
},
fail: function (err) {
console.error('保存失败:', err);
uni.showModal({
title: '错误',
content: '保存图片到相册失败',
showCancel: false
});
}
});
// #endif
},
fail: function (error) {
console.error('获取图片失败:', error);
}
});
},200)
// let img = await qsc.toImage({x:0,y:0,width:620,height:960,
// destWidth:310 * 4,destHeight:480 * 4,fileType:'png'});
// uni.saveImageToPhotosAlbum({filePath:img});
// console.log('img',img)
} catch (e) {
//TODO handle the exception
console.log('绘制异常',e)
uni.showModal({
content: JSON.stringify(e)
})
}
},
onClose(){
this.shareShow = false;
setTimeout(()=>{
this.shareOpen = false;
},1000)
},
onShare(index) {
let tmp = `【信任桥】消费共享数字化权益 ${SHARE_URL}/#/pages/other_package/productInfo/productInfo?id=${this.id} ${this.orderInfo.name}`;
if (index == 0) {
// WXSceneTimeline
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 1,
summary: tmp,
});
this.onClose();
} else if (index == 1) {
uni.share({
provider: "weixin",
scene: "WXSceneTimeline",
type: 1,
summary: tmp,
});
} else if (index == 2) {
this.onClose();
} else if (index == 3) {
setTimeout(() => {
this.onDraw();
}, 1000);
this.onClose();
} else if (index == 4) {
return func.myToast("暂未开放");
uni.share({
provider: "qq",
type: 1,
summary: tmp,
});
}
},
async onDraw() {
let _this = this;
try {
let last;
// qsc.setRect({ x: 0, y: 0,r:12, height: 960, width: 620});
qsc.setPaintbrush({
strokeStyle: "#EBEBEB",
font: {
fontSize: 16,
},
});
last = await qsc.drawImg({
val: "https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/di.png",
x: 0,
y: 0,
height: 480,
width: 310,
});
last = await qsc.drawImg({
val: "https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/new/logo.png",
x: 228,
y: 393,
height: 62,
width: 62,
});
// last = await qsc.drawImg({
// val:'https://niu8.letaocm.top/17557729915067836.jpg',
// x: 20,
// y: 20,
// height: 270,
// width: 270,
// })
// #ifndef H5
last = await qsc.drawImg({
val: _this.swiperList[0],
x: 20,
y: 20,
height: 270,
width: 270,
});
// #endif
qsc.setPaintbrush({
strokeStyle: "#EBEBEB",
});
// { x1: obj.x, y1: y, x2: obj.x + tw, y2: y, style, gap, width, color }
last = await qsc.drawLine({
style: "solide",
x1: 210,
y1: 313,
x2: 210,
y2: 342,
width: 1,
gap: 1,
});
last = await qsc.drawLine({
style: "solide",
x1: 20,
y1: 368,
x2: 290,
y2: 368,
width: 1,
gap: 1,
});
// last = await qsc.drawImg({
// val:'https://hashmall-prod.oss-cn-shenzhen.aliyuncs.com/1002/image/20250818/20250818134614672.jpg',
// x: 20,
// y: 20,
// height: 270,
// width: 270,
// })
last = await qsc.drawText({
val: this.orderInfo.name,
x: 20,
y: 310,
maxWidth: 180,
line: 2,
});
last = await qsc.drawText({
val: "1、保存图片到相册",
x: 93,
y: 397,
paintbrushProps: {
fillStyle: "#7f7f7f",
font: { fontSize: 12, fontWeight: 400 },
},
});
last = await qsc.drawText({
val: "2、扫一扫下载信任桥",
x: 93,
y: 438,
paintbrushProps: {
fillStyle: "#7f7f7f",
font: { fontSize: 12, fontWeight: 400 },
},
});
last = await qsc.drawText({
val: "¥" + this.orderInfo.minPrice,
x: 230,
y: 317,
paintbrushProps: {
fillStyle: "#7A35F6",
font: { fontSize: 20, fontWeight: 700 },
},
});
last = await qsc.drawQrCode({
val: `${SHARE_URL}/#/pages/other_package/productInfo/productInfo?id=${this.id}`,
x: 20,
y: 391,
size: 65,
});
// await qsc.updateCanvasWH({ width: '300px', height: '960px'})
await qsc.draw();
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: "myCanvas",
success: function (res) {
const tempFilePath = res.tempFilePath;
_this.tmpImg = tempFilePath;
// #ifdef H5
uni.downloadFile({
url: tempFilePath,
success: function () {
let link = document.createElement("a");
link.href = tempFilePath;
link.download = "分享图片";
link.click();
},
fail: function (err) {
uni.showToast({
title: "保存失败",
icon: "none",
duration: 2000,
});
},
});
// #endif
// #ifndef H5
uni.saveImageToPhotosAlbum({
filePath: tempFilePath,
success: function () {
uni.showToast({
title: "保存成功",
icon: "success",
duration: 2000,
});
},
fail: function (err) {
console.error("保存失败:", err);
uni.showModal({
title: "错误",
content: "保存图片到相册失败",
showCancel: false,
});
},
});
// #endif
},
fail: function (error) {
console.error("获取图片失败:", error);
},
});
}, 200);
// let img = await qsc.toImage({x:0,y:0,width:620,height:960,
// destWidth:310 * 4,destHeight:480 * 4,fileType:'png'});
// uni.saveImageToPhotosAlbum({filePath:img});
// console.log('img',img)
} catch (e) {
//TODO handle the exception
console.log("绘制异常", e);
uni.showModal({
content: JSON.stringify(e),
});
}
},
onClose() {
this.shareShow = false;
setTimeout(() => {
this.shareOpen = false;
}, 1000);
},
onSwiper(index) {
uni.previewImage({
current: index,
@@ -845,9 +867,9 @@ export default {
});
},
jumpAddAddress() {
if(this.isShareUrl){
return;
}
if (this.isShareUrl) {
return;
}
this.addressShow = true;
},
// 地址选中
@@ -895,14 +917,18 @@ export default {
this.openShow = false;
},
jumpLeft() {
if (this.isSplash == "true") {
uni.switchTab({ url: "/pages/home/home" });
return;
}
uni.navigateBack({
delta: 1, // 返回的页面数,默认为1,返回到上一级
});
},
jumpOther(type) {
if(this.isShareUrl){
return;
}
if (this.isShareUrl) {
return;
}
if (type === "home") {
uni.switchTab({
// 首页
@@ -992,9 +1018,9 @@ export default {
});
},
async checkSpecification(val, type) {
if(this.isShareUrl){
return;
}
if (this.isShareUrl) {
return;
}
const source = this.source;
if (type == "n" && this.ji == 1) {
type = "buy";
@@ -1181,11 +1207,10 @@ export default {
},
// 跳转到分享页面
jumpShare() {
console.log('jumpShare')
this.shareOpen = true;
this.shareShow = true;
},
console.log("jumpShare");
this.shareOpen = true;
this.shareShow = true;
},
},
};
</script>
@@ -1289,42 +1314,42 @@ export default {
color: #999999;
margin-top: 10rpx;
}
.tui-view{
width:100%;
height:286rpx;
min-height:286rpx;
background-color: #fff;
border-radius: 24rpx;
display: flex;
flex-direction: column;
padding: 32rpx;
box-sizing: border-box;
margin-top:24rpx;
.tui-list{
width:100%;
height:104rpx;
min-height:104rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top:24rpx;
.tui-box{
width:64rpx;
min-height:100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
image{
width:64rpx;
height:64rpx;
}
}
}
}
.tui-view {
width: 100%;
height: 286rpx;
min-height: 286rpx;
background-color: #fff;
border-radius: 24rpx;
display: flex;
flex-direction: column;
padding: 32rpx;
box-sizing: border-box;
margin-top: 24rpx;
.tui-list {
width: 100%;
height: 104rpx;
min-height: 104rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 24rpx;
.tui-box {
width: 64rpx;
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
image {
width: 64rpx;
height: 64rpx;
}
}
}
}
.content_concrete {
padding: 20rpx;
background: #ffffff;
@@ -1694,16 +1719,16 @@ export default {
}
}
}
.hideCanvasView{
width:100%;
height:100%;
position: fixed;
top:10000;
left:10000;
z-index: 1000000000000;
// background-color: rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
.hideCanvasView {
width: 100%;
height: 100%;
position: fixed;
top: 10000;
left: 10000;
z-index: 1000000000000;
// background-color: rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
}
</style>