【订单详情】

1. 梳理分销、分享相关的逻辑,把方法放到一起
pull/1/MERGE
YunaiV 2023-06-09 00:18:44 +08:00
parent 83a6955778
commit 6320bb3453
2 changed files with 319 additions and 329 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<view class='sharing-packets' :class='sharePacket.isState==true?"on":""'> <view class='sharing-packets' :class='sharePacket.isState ? "on":""'>
<view class='iconfont icon-guanbi' @click="closeShare"></view> <view class='iconfont icon-guanbi' @click="closeShare"></view>
<view class='line'></view> <view class='line'></view>
<view class='sharing-con' @click='goShare'> <view class='sharing-con' @click='goShare'>
@ -10,34 +10,35 @@
<view class='tip'>下单即返佣金</view> <view class='tip'>下单即返佣金</view>
<view class='shareBut'>立即分享</view> <view class='shareBut'>立即分享</view>
</view> </view>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
sharePacket: { sharePacket: {
type: Object, type: Object,
default: function(){ default: function() {
return {isState: true,priceName:''} return {
} isState: true,
} priceName:'' //
}
}
}
}, },
data() { data() {
return { return {
}; };
}, },
methods: { methods: {
closeShare:function(){ closeShare:function(){
this.$emit('closeChange'); this.$emit('closeChange');
}, },
goShare:function(){ goShare:function(){
this.$emit('listenerActionSheet'); this.$emit('listenerActionSheet');
} }
} }
} }
</script> </script>

View File

@ -218,8 +218,12 @@
</view> </view>
</block> </block>
</view> </view>
<shareRedPackets :sharePacket="sharePacket" @listenerActionSheet="listenerActionSheet" <!-- 左侧的分销提示 -->
@closeChange="closeChange"></shareRedPackets> <shareRedPackets
:sharePacket="sharePacket"
@listenerActionSheet="listenerActionSheet"
@closeChange="closeChange"
/>
<!-- SKU 弹窗 --> <!-- SKU 弹窗 -->
<productWindow <productWindow
:attr="attr" :attr="attr"
@ -234,7 +238,7 @@
<!-- 优惠劵弹窗 TODO 芋艿待实现 --> <!-- 优惠劵弹窗 TODO 芋艿待实现 -->
<couponListWindow :coupon='coupon' @ChangCouponsClone="ChangCouponsClone" @ChangCoupons="ChangCoupons" <couponListWindow :coupon='coupon' @ChangCouponsClone="ChangCouponsClone" @ChangCoupons="ChangCoupons"
@ChangCouponsUseState="ChangCouponsUseState" @tabCouponType="tabCouponType"></couponListWindow> @ChangCouponsUseState="ChangCouponsUseState" @tabCouponType="tabCouponType"></couponListWindow>
<!-- 分享按钮 TODO 芋艿待实现 --> <!-- 分享按钮 -->
<view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''"> <view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">
<!-- #ifndef MP --> <!-- #ifndef MP -->
<button class="item" hover-class='none' v-if="weixinStatus === true" @click="H5ShareBox = true"> <button class="item" hover-class='none' v-if="weixinStatus === true" @click="H5ShareBox = true">
@ -243,7 +247,7 @@
</button> </button>
<!-- #endif --> <!-- #endif -->
<!-- #ifdef MP --> <!-- #ifdef MP -->
<button class="item" open-type="share" hover-class='none' @click="goFriend"> <button class="item" open-type="share" hover-class='none' @click="closePosters">
<view class="iconfont icon-weixin3"></view> <view class="iconfont icon-weixin3"></view>
<view class="">发送给朋友</view> <view class="">发送给朋友</view>
</button> </button>
@ -253,13 +257,13 @@
<view class="">生成海报</view> <view class="">生成海报</view>
</button> </button>
</view> </view>
<!-- TODO 芋艿不知道啥东西 --> <!-- 海报展示 -->
<view class="mask" v-if="posters" @click="closePosters"></view> <view class="mask" v-if="posters" @click="closePosters"></view>
<view class="mask" v-if="canvasStatus"></view> <view class="mask" v-if="canvasStatus"></view>
<!-- #ifdef MP --> <!-- #ifdef MP -->
<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> --> <!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
<!-- #endif --> <!-- #endif -->
<!-- 海报展示 TODO 芋艿待实现 --> <!-- 海报展示操作 -->
<view class='poster-pop' v-if="canvasStatus"> <view class='poster-pop' v-if="canvasStatus">
<image src='../../static/images/poster-close.png' class='close' @click="posterImageClose"></image> <image src='../../static/images/poster-close.png' class='close' @click="posterImageClose"></image>
<image :src='imagePath'></image> <image :src='imagePath'></image>
@ -294,15 +298,9 @@
import { import {
getCoupons getCoupons
} from '@/api/api.js'; } from '@/api/api.js';
import { import { toLogin } from '@/libs/login.js';
toLogin import { mapGetters } from "vuex";
} from '@/libs/login.js'; import { imageBase64 } from "@/api/public";
import {
mapGetters
} from "vuex";
import {
imageBase64
} from "@/api/public";
import productConSwiper from '@/components/productConSwiper'; import productConSwiper from '@/components/productConSwiper';
import couponListWindow from '@/components/couponListWindow'; import couponListWindow from '@/components/couponListWindow';
import productWindow from '@/components/productWindow'; import productWindow from '@/components/productWindow';
@ -315,15 +313,11 @@
import * as Util from '@/utils/util.js'; import * as Util from '@/utils/util.js';
import * as ProductUtil from '@/utils/product.js'; import * as ProductUtil from '@/utils/product.js';
// #ifdef MP // #ifdef MP
import { import { base64src } from '@/utils/base64src.js'
base64src
} from '@/utils/base64src.js'
import authorize from '@/components/Authorize'; import authorize from '@/components/Authorize';
import { import { getQrcode } from '@/api/api.js';
getQrcode
} from '@/api/api.js';
// #endif // #endif
let app = getApp(); const app = getApp();
export default { export default {
components: { components: {
productConSwiper, productConSwiper,
@ -339,14 +333,8 @@
}, },
data() { data() {
return { return {
// TODO
coupon: {
coupon: false,
type: 1,
list: [],
count: []
},
id: 0, // id id: 0, // id
type: "", // normal - video -
productInfo: {}, // TODO productInfo: {}, // TODO
spu: {}, // SPU spu: {}, // SPU
skuMap: [], // SKU Map skuMap: [], // SKU Map
@ -359,7 +347,13 @@
}, },
cartCount: 0, // cartCount: 0, //
cartAnimated: false, // cartAnimated: false, //
replyCount: 0, // TODO tagStyle: { //
img: 'width:100%;display:block;',
table: 'width:100%',
video: 'width:100%'
},
replyCount: 0, // TODO
reply: [], // reply: [], //
replyChance: 0, // TODO replyChance: 0, // TODO
userCollect: false, userCollect: false,
@ -367,35 +361,37 @@
cart_num: 1, // TODO cart_num: 1, // TODO
isAuto: false, // TODO isAuto: false, // TODO
isShowAuth: false, // TODO isShowAuth: false, // TODO
actionSheetHidden: true, // TODO
storeImage: '', // // TODO
PromotionCode: '', // // TODO
posterbackgd: '/static/images/posterbackgd.png', // TODO
sharePacket: { //
isState: true, // // TODO
},
circular: false, // TODO circular: false, // TODO
autoplay: false, // TODO autoplay: false, // TODO
interval: 3000, // TODO interval: 3000, // TODO
duration: 500, // TODO duration: 500, // TODO
systemStore: {}, // TODO systemStore: {}, // TODO
good_list: [], // TODO good_list: [], // TODO
isDown: true, // TODO
posters: false, // TODO
weixinStatus: false, // TODO
H5ShareBox: false, // TODO
activityH5: [], // TODO activityH5: [], // TODO
tagStyle: { // // TODO
img: 'width:100%;display:block;', coupon: {
table: 'width:100%', coupon: false,
video: 'width:100%' type: 1,
}, list: [],
qrcodeSize: 600, // TODO count: []
canvasStatus: false, // TODO },
imagePath: '', // TODO
imgTop: '', // TODO // ========== ==========
errT: '', // TODO qrcodeSize: 600, //
type: "", // TODO promotionCode: '', //
imgTop: '', // base64
errT: '', //
posters: false, //
weixinStatus: false, // TODO
canvasStatus: false, //
imagePath: '', //
H5ShareBox: false, // TODO
posterbackgd: '/static/images/posterbackgd.png', //
storeImage: '', //
sharePacket: { //
isState: true, // // TODO
},
actionSheetHidden: true, //
// ========== nav + scroll ========== // ========== nav + scroll ==========
returnShow: true, // [] returnShow: true, // []
@ -417,6 +413,7 @@
computed: mapGetters(['isLogin', 'uid', 'chatUrl']), computed: mapGetters(['isLogin', 'uid', 'chatUrl']),
watch: { watch: {
isLogin: { isLogin: {
// TODO
handler: function(newV, oldV) { handler: function(newV, oldV) {
let that = this; let that = this;
if (newV === true) { if (newV === true) {
@ -504,18 +501,16 @@
// #endif // #endif
}); });
}, },
// TODO
/** /**
* 用户点击右上角分享 * 微信小程序的用户点击右上角分享会回调该方法
*/ */
// #ifdef MP // #ifdef MP
onShareAppMessage: function() { onShareAppMessage: function() {
let that = this; this.$set(this, 'actionSheetHidden', !this.actionSheetHidden);
that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
return { return {
title: that.productInfo.storeName || '', title: this.spu.name || '',
imageUrl: that.productInfo.image || '', imageUrl: this.spu.picUrl || '',
path: '/pages/goods_details/index?id=' + that.id + '&spread=' + that.uid, path: '/pages/goods_details/index?id=' + this.id + '&spread=' + this.uid,
} }
}, },
// #endif // #endif
@ -534,22 +529,24 @@
this.$set(this, 'userCollect', res.data.userCollect); // TODO this.$set(this, 'userCollect', res.data.userCollect); // TODO
this.$set(this.attr, 'properties', ProductUtil.convertProductPropertyList(skus)); this.$set(this.attr, 'properties', ProductUtil.convertProductPropertyList(skus));
this.$set(this, 'skuMap', ProductUtil.convertProductSkuMap(skus)); this.$set(this, 'skuMap', ProductUtil.convertProductSkuMap(skus));
this.$set(this.sharePacket, 'priceName', res.data.priceName); // TODO share packet // // TODO
this.$set(this.sharePacket, 'priceName', res.data.priceName);
this.$set(this.sharePacket, 'isState', Math.floor(res.data.priceName) === 0); this.$set(this.sharePacket, 'isState', Math.floor(res.data.priceName) === 0);
//
this.$set(this, 'activityH5', res.data.activityAllH5 ? res.data.activityAllH5 : []); this.$set(this, 'activityH5', res.data.activityAllH5 ? res.data.activityAllH5 : []);
// //
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: productInfo.name.substring(0, 7) + "..." title: spu.name.substring(0, 7) + "..."
}) })
// TODO //
if (this.isLogin) { if (this.isLogin) {
this.getCartCount(); this.getCartCount();
//#ifdef H5 // #ifdef H5
this.make(this.uid); this.make();
this.ShareInfo(); this.ShareInfo();
this.getImageBase64(this.productInfo.image); this.getImageBase64();
// #endif // #endif
// #ifdef MP // #ifdef MP
this.getQrcode(); this.getQrcode();
@ -561,6 +558,7 @@
this.infoScroll(); this.infoScroll();
}, 500); }, 500);
//
// #ifdef MP // #ifdef MP
this.imgTop = spu.picUrl this.imgTop = spu.picUrl
// #endif // #endif
@ -778,9 +776,6 @@
kefuClick() { kefuClick() {
location.href = this.chatUrl; location.href = this.chatUrl;
}, },
closeChange: function() {
this.$set(this.sharePacket, 'isState', true);
},
goActivity: function(e) { goActivity: function(e) {
let item = e; let item = e;
if (item.type === "1") { if (item.type === "1") {
@ -917,8 +912,6 @@
success: function() {}, success: function() {},
}); });
}, },
/** /**
* 获取优惠券 * 获取优惠券
*/ */
@ -985,251 +978,247 @@
authColse: function(e) { authColse: function(e) {
this.isShowAuth = e this.isShowAuth = e
}, },
/**
* 分享打开
*/
listenerActionSheet: function() {
if (this.isLogin === false) {
toLogin();
} else {
// #ifdef H5
if (this.$wechat.isWeixin() === true) {
this.weixinStatus = true;
}
// #endif
this.posters = true;
}
},
closePosters: function() {
this.posters = false;
},
//
posterImageClose: function() {
this.canvasStatus = false
},
//
setDomain: function(url) {
url = url ? url.toString() : '';
//,
if (url.indexOf("https://") > -1) return url;
else return url.replace('http://', 'https://');
},
//
downloadFilestoreImage: function() {
let that = this;
uni.downloadFile({
url: that.setDomain(that.productInfo.image),
success: function(res) {
that.storeImage = res.tempFilePath;
},
fail: function() {
return that.$util.Tips({
title: ''
});
that.storeImage = '';
},
});
},
//
goFriend: function() {
this.posters = false;
},
//
getQrcode() {
let that = this;
let data = {
pid: that.uid,
id: that.id,
path: 'pages/goods_details/index'
}
getQrcode(data).then(res => {
base64src(res.data.code, res => {
that.PromotionCode = res;
});
}).catch(err => { // ========== ==========
that.errT = err; /**
}); * 生成二维码设置到 promotionCode 变量
}, */
// make() {
make(uid) { let href = location.href.split('?')[0] + "?id="+ this.id + "&spread=" + this.uid;
let href = location.href.split('?')[0] + "?id="+ this.id + "&spread=" + this.uid; uQRCode.make({
uQRCode.make({ canvasId: 'qrcode',
canvasId: 'qrcode', text: href,
text: href, size: this.qrcodeSize,
size: this.qrcodeSize, margin: 10,
margin: 10, success: res => {
success: res => { this.promotionCode = res;
this.PromotionCode = res; },
}, complete: () => {},
complete: () => {}, fail: res => {
fail: res => { this.$util.Tips({
this.$util.Tips({ title: '海报二维码生成失败!'
title: '海报二维码生成失败!' });
}); }
} })
}) },
}, /**
getImageBase64: function(images) { * 设置微信公众号的分享标题内容等信息
let that = this; */
imageBase64({ ShareInfo() {
url: images //
}).then(res => { if (!this.$wechat.isWeixin()) {
that.imgTop = res.data.code; return
}) }
}, let spu = this.spu;
/** let href = location.href;
* 获取产品分销二维码 href = href.indexOf("?") === -1 ? href + "?spread=" + this.uid : href + "&spread=" + this.uid;
* @param function successFn 下载完成回调 let configAppMessage = {
* desc: spu.description,
*/ title: spu.name,
downloadFilePromotionCode: function(successFn) { link: href,
let that = this; imgUrl: spu.picUrl
getProductCode(that.id) };
.then(res => { this.$wechat.wechatEvevt([
uni.downloadFile({ "updateAppMessageShareData",
url: that.setDomain(res.data.code), "updateTimelineShareData",
success: function(res) { "onMenuShareAppMessage",
that.$set(that, 'isDown', false); "onMenuShareTimeline"
if (typeof successFn == 'function') successFn && successFn(res ], configAppMessage).then(res => {
.tempFilePath); console.log(res);
else that.$set(that, 'PromotionCode', res.tempFilePath); }).catch(err => {
}, console.log(err);
fail: function() { })
that.$set(that, 'isDown', false); },
that.$set(that, 'PromotionCode', ''); /**
} * 获得商品的封面 base64
}); */
}) getImageBase64: function() {
.catch(err => { imageBase64({
that.$set(that, 'isDown', false); url: this.spu.picUrl
that.$set(that, 'PromotionCode', ''); }).then(res => {
}); this.imgTop = res.data.code;
}, })
/** },
* 生成海报 /**
*/ * 获得小程序的二维码
goPoster: function() { */
let that = this; getQrcode() {
uni.showLoading({ let data = {
title: '海报生成中', pid: this.uid,
mask: true id: this.id,
}); path: 'pages/goods_details/index'
that.posters = false; }
let arrImagesUrl = ''; getQrcode(data).then(res => {
let arrImagesUrlTop = ''; base64src(res.data.code, res => {
if (!that.PromotionCode) { this.promotionCode = res;
uni.hideLoading(); });
that.$util.Tips({ }).catch(err => {
title: that.errT this.errT = err;
}); });
return },
} /**
setTimeout(() => { * 生成海报并进行展示
if (!that.imgTop) { */
uni.hideLoading(); goPoster: function() {
that.$util.Tips({ //
title: '无法生成商品海报!' uni.showLoading({
}); title: '海报生成中',
return mask: true
} });
}, 1000); this.posters = false;
uni.downloadFile({ //
url: that.imgTop, // if (!this.promotionCode) {
success: (res) => { uni.hideLoading();
arrImagesUrlTop = res.tempFilePath; this.$util.Tips({
let arrImages = [that.posterbackgd, arrImagesUrlTop, that.PromotionCode]; title: this.errT
let storeName = that.productInfo.storeName; });
let price = that.productInfo.price; return
setTimeout(() => { }
that.$util.PosterCanvas(arrImages, storeName, price, that.productInfo //
.otPrice, setTimeout(() => {
function(tempFilePath) { if (!this.imgTop) {
that.imagePath = tempFilePath; uni.hideLoading();
that.canvasStatus = true; this.$util.Tips({
uni.hideLoading(); title: '无法生成商品海报!'
}); });
}, 500); }
} }, 1000);
});
},
/*
* 保存到手机相册
*/
// #ifdef MP
savePosterPath: function() {
let that = this;
uni.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
uni.authorize({
scope: 'scope.writePhotosAlbum',
success() {
uni.saveImageToPhotosAlbum({
filePath: that.imagePath,
success: function(res) {
that.posterImageClose();
that.$util.Tips({
title: '保存成功',
icon: 'success'
});
},
fail: function(res) {
that.$util.Tips({
title: '保存失败'
});
}
})
}
})
} else {
uni.saveImageToPhotosAlbum({
filePath: that.imagePath,
success: function(res) {
that.posterImageClose();
that.$util.Tips({
title: '保存成功',
icon: 'success'
});
},
fail: function(res) {
that.$util.Tips({
title: '保存失败'
});
},
})
}
}
})
},
// #endif
ShareInfo() {
let data = this.productInfo;
let href = location.href;
if (this.$wechat.isWeixin()) {
href =
href.indexOf("?") === -1 ?
href + "?spread=" + this.uid :
href + "&spread=" + this.uid;
let configAppMessage = { //
desc: data.storeInfo, const that = this;
title: data.storeName, let arrImagesUrlTop = '';
link: href, uni.downloadFile({
imgUrl: data.image url: that.imgTop, //
}; success: (res) => {
this.$wechat.wechatEvevt([ debugger
"updateAppMessageShareData", arrImagesUrlTop = res.tempFilePath;
"updateTimelineShareData", const arrImages = [that.posterbackgd, arrImagesUrlTop, that.promotionCode];
"onMenuShareAppMessage", const name = that.spu.name;
"onMenuShareTimeline" const price = that.fen2yuan(this.spu.price);
], configAppMessage).then(res => { const marketPrice = that.fen2yuan(this.spu.marketPrice);
console.log(res); setTimeout(() => {
}).catch(err => { that.$util.PosterCanvas(arrImages, name, price, marketPrice,
console.log(err); function(tempFilePath) {
}) that.imagePath = tempFilePath;
} that.canvasStatus = true;
}, uni.hideLoading();
});
}, 500);
}
});
},
/**
* 隐藏海报
*/
posterImageClose: function() {
this.canvasStatus = false
},
/**
* 关闭分享弹窗
*/
closePosters: function() {
this.posters = false;
},
/**
* 获取海报产品图解决跨域问题只适用于小程序
*/
downloadFilestoreImage: function() {
let that = this;
uni.downloadFile({
url: that.setDomain(that.spu.picUrl),
success: function(res) {
that.storeImage = res.tempFilePath;
},
fail: function() {
that.storeImage = '';
return that.$util.Tips({
title: ''
});
},
});
},
/**
* 替换安全域名
*/
setDomain: function(url) {
url = url ? url.toString() : '';
// ,
if (url.indexOf("https://") > -1) {
return url;
}
return url.replace('http://', 'https://');
},
/**
* 分享打开
*/
listenerActionSheet: function() {
if (!this.isLogin) {
toLogin();
return
}
// #ifdef H5
if (this.$wechat.isWeixin() === true) {
this.weixinStatus = true;
}
// #endif
this.posters = true;
},
/**
* 微信小程序的保存图片到本机
*/
// #ifdef MP
savePosterPath: function() {
let that = this;
uni.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
uni.authorize({
scope: 'scope.writePhotosAlbum',
success() {
uni.saveImageToPhotosAlbum({
filePath: that.imagePath,
success: function(res) {
that.posterImageClose();
that.$util.Tips({
title: '保存成功',
icon: 'success'
});
},
fail: function(res) {
that.$util.Tips({
title: '保存失败'
});
}
})
}
})
} else {
uni.saveImageToPhotosAlbum({
filePath: that.imagePath,
success: function(res) {
that.posterImageClose();
that.$util.Tips({
title: '保存成功',
icon: 'success'
});
},
fail: function(res) {
that.$util.Tips({
title: '保存失败'
});
},
})
}
}
})
},
// #endif
/**
* 关闭分销的弹窗
*/
closeChange: function() {
this.$set(this.sharePacket, 'isState', true);
},
// ========== nav ========== // ========== nav ==========
/** /**