615 lines
17 KiB
Vue
615 lines
17 KiB
Vue
|
<template>
|
|||
|
|
<view :style="colorStyle">
|
|||
|
|
<view class="px-20">
|
|||
|
|
<view class="w-full bg--w111-fff rd-24rpx p-24 mt-24"v-show="showCardOne">
|
|||
|
|
<view class='flex-y-center'>
|
|||
|
|
<text class="iconfont icon-icon_WeChat_1 fs-36"></text>
|
|||
|
|
<text class="fs-30 lh-42rpx fw-500 pl-8">方式一：商品卡片分享</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="mt-24 w-full h-256 bg--w111-f9f9f9 rd-12rpx relative bg-cover" :style="[shareCardBg]">
|
|||
|
|
<view class="flex-y-center card-site">
|
|||
|
|
<image :src="mpData.logo_url" class="site-logo"></image>
|
|||
|
|
<text class="site-name line1">{{mpData.site_name}}</text>
|
|||
|
|
</view>
|
|||
|
|
<image :src="storeInfo.image" class="w-210 h-168 card-center-image" mode="aspectFill"></image>
|
|||
|
|
<!-- -->
|
|||
|
|
</view>
|
|||
|
|
<!-- #ifdef MP-WEIXIN -->
|
|||
|
|
<button class="w-full bg-gradient h-80 rd-40rpx flex-center fs-28 text--w111-fff mt-24" open-type="share" hover-class="none">分享商品卡片</button>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifdef APP || H5 -->
|
|||
|
|
<view class="w-full bg-gradient h-80 rd-40rpx flex-center fs-28 text--w111-fff mt-24" @tap="cardShare">分享商品卡片</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
<view class="w-full bg--w111-fff rd-24rpx p-24 mt-32">
|
|||
|
|
<view class="flex-between-center">
|
|||
|
|
<view class='flex-y-center'>
|
|||
|
|
<image src="../static/share_picture.png" class="w-36 h-36"></image>
|
|||
|
|
<text class="fs-30 lh-42rpx fw-500 pl-8">方式{{showCardOne ? '二' : '一'}}：商品图片分享</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="iconfont fs-28 text--w111-666"
|
|||
|
|
v-if="storeInfo.slider_image.length > 1"
|
|||
|
|
:class="isGrid ? 'icon-a-ic_Imageandtextsorting' : 'icon-a-ic_Picturearrangement'"
|
|||
|
|
@tap="()=>{isGrid = !isGrid}"></text>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="storeInfo.slider_image.length == 1">
|
|||
|
|
<view class="mt-24 flex-x-center" >
|
|||
|
|
<view class="load-box poster-img" v-show="!posterImage"></view>
|
|||
|
|
<image v-show="posterImage" :src="posterImage" @tap="proviewPhoto(0)" class="poster-img" mode="aspectFill"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="w-full flex-between-center">
|
|||
|
|
<!-- #ifdef MP-WEIXIN || APP-PLUS -->
|
|||
|
|
<view class="w-full bg-gradient h-80 rd-40rpx flex-center fw-500 fs-28 text--w111-fff mt-24" @tap="savePoster">保存商品海报图片</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifdef H5 -->
|
|||
|
|
<view class="w-full bg-gradient h-80 rd-40rpx flex-center fs-28 text--w111-fff mt-24" @tap="proviewPhoto(0)">保存分享</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-else>
|
|||
|
|
<view class="mt-24" v-show="!isGrid">
|
|||
|
|
<scroll-view scroll-x="true" class="white-nowrap vertical-middle w-full" show-scrollbar="false">
|
|||
|
|
<view class="inline-block mr-16" v-show="!posterImage">
|
|||
|
|
<view class="load-box w-192 h-192 rd-8rpx"></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="inline-block mr-16" v-for="(item,index) in productSwiper" :key="index">
|
|||
|
|
<view class="w-192 h-192 relative text--w111-fff" @tap="proviewPhoto(index)">
|
|||
|
|
<image :src="item.pic" class="w-full h-full rd-8rpx"
|
|||
|
|
:class="{'b-e': item.isQrcode}" mode="aspectFill"></image>
|
|||
|
|
<view class="qr-tag flex-center fs-18 text--w111-fff" v-if="posterImage && item.isQrcode">二维码推广图</view>
|
|||
|
|
<!-- #ifdef MP-WEIXIN || APP-PLUS -->
|
|||
|
|
<text class="iconfont fs-36 select-icon"
|
|||
|
|
:class="item.select ? 'icon-a-ic_CompleteSelect' : 'icon-ic_unselect'" @tap.stop="selectPic(item)"></text>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
<view class="w-full grid-column-3 grid-gap-16rpx mt-24" v-show="isGrid">
|
|||
|
|
<view class="load-box w-full h-210 rd-12rpx" v-show="!posterImage"></view>
|
|||
|
|
<view class="w-full h-210 relative text--w111-fff"
|
|||
|
|
:class="{'b-e rd-12rpx': item.isQrcode}"
|
|||
|
|
v-for="(item,index) in productSwiper" :key="index"
|
|||
|
|
@tap="proviewPhoto(index)">
|
|||
|
|
<image :src="item.pic" class="w-full h-full rd-12rpx"
|
|||
|
|
mode="aspectFill"></image>
|
|||
|
|
<view class="qr-tag flex-center fs-18 text--w111-fff" v-if="posterImage && item.isQrcode">二维码推广图</view>
|
|||
|
|
<!-- #ifdef MP-WEIXIN || APP-PLUS -->
|
|||
|
|
<text class="iconfont fs-36 select-icon"
|
|||
|
|
:class="item.select ? 'icon-a-ic_CompleteSelect' : 'icon-ic_unselect'"
|
|||
|
|
@tap.stop="selectPic(item)"></text>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="w-full flex-between-center">
|
|||
|
|
<!-- #ifdef MP-WEIXIN || APP-PLUS -->
|
|||
|
|
<view class="w-320 h-80 rd-40rpx flex-center fs-26 view-border fw-500 font-num mt-24" @tap="savePhoto('pic')">保存选中图片</view>
|
|||
|
|
<view class="w-320 bg-gradient h-80 rd-40rpx flex-center fw-500 fs-28 text--w111-fff mt-24" @tap="savePhoto('poster')">保存商品海报图片</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifdef H5 -->
|
|||
|
|
<view class="w-full bg-gradient h-80 rd-40rpx flex-center fs-28 text--w111-fff mt-24" @tap="proviewPhoto(0)">保存分享</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="w-full bg--w111-fff rd-24rpx p-24 mt-24">
|
|||
|
|
<view class='flex-y-center'>
|
|||
|
|
<image src="../static/share_text.png" class="w-36 h-36"></image>
|
|||
|
|
<text class="fs-30 lh-42rpx fw-500 pl-8">方式{{showCardOne ? '三' : '二'}}：文案分享</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- #ifdef MP-WEIXIN -->
|
|||
|
|
<view class="mt-24 bg--w111-f9f9f9 rd-12rpx p-16 fs-26 lh-36rpx space-line">
|
|||
|
|
{{storeInfo.share_content || storeInfo.store_name}}
|
|||
|
|
<text><br/>{{shortLink}}</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<!-- #ifdef H5 || APP-PLUS -->
|
|||
|
|
<view class="mt-24 bg--w111-f9f9f9 rd-12rpx p-16 fs-26 lh-36rpx space-line">
|
|||
|
|
{{storeInfo.share_content || storeInfo.store_name}}
|
|||
|
|
<text><br/>{{codeVal}}</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<view class="w-full flex-between-center">
|
|||
|
|
<view class="w-320 h-80 rd-40rpx flex-center fs-26 view-border fw-500 font-num mt-24" @tap="copyShare(0)">仅复制链接</view>
|
|||
|
|
<view class="w-320 bg-gradient h-80 rd-40rpx flex-center fw-500 fs-28 text--w111-fff mt-24" @tap="copyShare(1)">复制文案及链接</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="pb-safe">
|
|||
|
|
<view class="h-80"></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- #ifdef H5 || APP-PLUS -->
|
|||
|
|
<zb-code ref="qrcode" onval loadMake :show="codeShow" cid="1" :val="codeVal" @result="qrR" />
|
|||
|
|
<!-- #endif -->
|
|||
|
|
<canvas class="canvas" canvas-id="myCanvas" v-if="canvasStatus"></canvas>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import colors from "@/mixins/color";
|
|||
|
|
import {HTTP_REQUEST_URL} from '@/config/app';
|
|||
|
|
import { getProductDetail, getProductCode, getShortLinkApi } from "@/api/store.js";
|
|||
|
|
import { getUserInfo, userShare } from '@/api/user.js';
|
|||
|
|
import { toLogin } from '@/libs/login.js';
|
|||
|
|
import { mapGetters } from 'vuex';
|
|||
|
|
import zbCode from '@/components/zb-code/zb-code.vue'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
imgHost: HTTP_REQUEST_URL,
|
|||
|
|
id: 0,
|
|||
|
|
canvasStatus: false,
|
|||
|
|
//二维码参数
|
|||
|
|
codeShow: false,
|
|||
|
|
codeVal: "", // 要生成的二维码值
|
|||
|
|
shareQrcode: 0,
|
|||
|
|
PromotionCode: '',
|
|||
|
|
followCode: '',
|
|||
|
|
siteName: '', //商城名称
|
|||
|
|
posterTitle: '',
|
|||
|
|
themeColor: '#e93323',
|
|||
|
|
fontColor: '#e93323',
|
|||
|
|
posterImage: '', //海报路径
|
|||
|
|
storeImage: '', //海报产品图
|
|||
|
|
isDown: true,
|
|||
|
|
posterImageStatus: false,
|
|||
|
|
storeInfo:{
|
|||
|
|
slider_image: []
|
|||
|
|
},
|
|||
|
|
productSwiper: [],
|
|||
|
|
showCardOne: true,
|
|||
|
|
shortLink: '',
|
|||
|
|
isGrid: true,
|
|||
|
|
mpData:{}
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
components: { zbCode },
|
|||
|
|
computed:{
|
|||
|
|
...mapGetters(['isLogin', 'uid']),
|
|||
|
|
shareCardBg(){
|
|||
|
|
return {
|
|||
|
|
backgroundImage: 'url('+this.imgHost+'/statics/images/promoter/promoter_group9.png'+')'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
mixins: [colors],
|
|||
|
|
onLoad(options) {
|
|||
|
|
// #ifdef H5
|
|||
|
|
this.showCardOne = this.$wechat.isWeixin() ? true : false;
|
|||
|
|
// #endif
|
|||
|
|
if (!options.id) {
|
|||
|
|
return this.$util.Tips({
|
|||
|
|
title: '缺少参数无法查看商品'
|
|||
|
|
}, {
|
|||
|
|
tab: 3
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
this.id = options.id || 0;
|
|||
|
|
this.getInfo();
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
this.mpData = uni.getStorageSync('BASIC_CONFIG');
|
|||
|
|
this.getShortLink();
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
onReady: function() {
|
|||
|
|
this.isNodes++;
|
|||
|
|
let uid = this.isLogin ? this.$store.state.app.uid : ''
|
|||
|
|
// #ifdef H5
|
|||
|
|
this.codeVal = window.location.origin + '/pages/goods_details/index?id=' + this.id +
|
|||
|
|
'&spid=' + uid
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
this.codeVal = HTTP_REQUEST_URL + '/pages/goods_details/index?id=' + this.id +
|
|||
|
|
'&spid=' + uid
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
async getInfo(){
|
|||
|
|
let res = await getProductDetail(this.id, {promotions_type: 0});
|
|||
|
|
let storeInfo = res.data.storeInfo;
|
|||
|
|
this.$set(this, 'storeInfo', storeInfo);
|
|||
|
|
this.$set(this, 'shareQrcode', res.data.share_qrcode);
|
|||
|
|
this.$set(this, 'siteName', res.data.site_name);
|
|||
|
|
this.$set(this, 'posterTitle', res.data.product_poster_title);
|
|||
|
|
this.productSwiper = storeInfo.slider_image.map(item=>{
|
|||
|
|
return {
|
|||
|
|
pic: item,
|
|||
|
|
select: false,
|
|||
|
|
isQrcode: false,
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
this.goPoster();
|
|||
|
|
},500)
|
|||
|
|
},
|
|||
|
|
getShortLink(){
|
|||
|
|
getShortLinkApi(this.id).then(res=>{
|
|||
|
|
this.shortLink = res.data.code;
|
|||
|
|
}).catch(err=>{
|
|||
|
|
return this.$util.Tips({
|
|||
|
|
title: err
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
copyShare(type){
|
|||
|
|
let that = this;
|
|||
|
|
let shareText = this.storeInfo.share_content || this.storeInfo.store_name;
|
|||
|
|
let copyText = '';
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
copyText = type == 1 ? shareText + ' ' + this.shortLink : this.shortLink;
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef APP-PLUS || H5
|
|||
|
|
copyText = type == 1 ? shareText + ' ' + this.codeVal : this.codeVal;
|
|||
|
|
// #endif
|
|||
|
|
uni.setClipboardData({
|
|||
|
|
data: copyText,
|
|||
|
|
success:()=>{
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '复制成功，快去分享吧',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
qrR(res) {
|
|||
|
|
// #ifdef H5
|
|||
|
|
if (!this.$wechat.isWeixin() || this.shareQrcode != '1') {
|
|||
|
|
this.PromotionCode = res;
|
|||
|
|
this.followCode = ''
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
this.PromotionCode = res;
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
//替换安全域名
|
|||
|
|
setDomain: function(url) {
|
|||
|
|
url = url ? url.toString() : '';
|
|||
|
|
//本地调试打开,生产请注销
|
|||
|
|
if (url.indexOf('https://') > -1) return url;
|
|||
|
|
else return url.replace('http://', 'https://');
|
|||
|
|
},
|
|||
|
|
//图片转符合安全域名路径
|
|||
|
|
downloadFileImage(url) {
|
|||
|
|
url = this.setDomain(url)
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
let that = this;
|
|||
|
|
uni.downloadFile({
|
|||
|
|
url: url,
|
|||
|
|
success: function(res) {
|
|||
|
|
resolve(res.tempFilePath);
|
|||
|
|
},
|
|||
|
|
fail: function(err) {
|
|||
|
|
console.error(err.errMsg);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
async goPoster() {
|
|||
|
|
let that = this;
|
|||
|
|
let storeImage = await this.downloadFileImage(this.storeInfo.image);
|
|||
|
|
let posterbackgd = await this.downloadFileImage(this.imgHost + '/statics/images/product/posterbackgd.png');
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
// 小程序端获取小程序码
|
|||
|
|
let res = await getProductCode(that.id);
|
|||
|
|
if(!res.data.code){
|
|||
|
|
return that.$util.Tips({
|
|||
|
|
title: '小程序二维码需要发布正式版后才能获取到'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
let PromotionCode = await this.downloadFileImage(res.data.code)
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef H5
|
|||
|
|
let PromotionCode = '';
|
|||
|
|
if(this.$wechat.isWeixin()){
|
|||
|
|
// 公众号端获取公众号二维码
|
|||
|
|
let res = await getProductCode(that.id);
|
|||
|
|
PromotionCode = await this.downloadFileImage(res.data.code)
|
|||
|
|
}else{
|
|||
|
|
// h5端获取本地生成的二维码
|
|||
|
|
PromotionCode = this.PromotionCode;
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
let PromotionCode = this.PromotionCode;
|
|||
|
|
// #endif
|
|||
|
|
that.$set(that, 'canvasStatus', true);
|
|||
|
|
|
|||
|
|
let arr2 = [posterbackgd, storeImage, PromotionCode];
|
|||
|
|
that.$nextTick(function() {
|
|||
|
|
setTimeout(()=>{
|
|||
|
|
that.$util.PosterCanvas(that.fontColor, that.themeColor, that.siteName,arr2,
|
|||
|
|
that.storeInfo.store_name,
|
|||
|
|
that.storeInfo.price,
|
|||
|
|
that.storeInfo.ot_price,
|
|||
|
|
that.posterTitle,
|
|||
|
|
function(tempFilePath) {
|
|||
|
|
that.$set(that, 'posterImage', tempFilePath);
|
|||
|
|
that.$set(that, 'posterImageStatus', true);
|
|||
|
|
that.$set(that, 'canvasStatus', false);
|
|||
|
|
that.productSwiper.unshift({
|
|||
|
|
pic:tempFilePath,
|
|||
|
|
select: false,
|
|||
|
|
isQrcode:true
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
},1000)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
cardShare(){
|
|||
|
|
// #ifdef H5
|
|||
|
|
this.ShareInfo();
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请点击右上角三个点进行分享',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
this.appShare();
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
//#ifdef H5
|
|||
|
|
ShareInfo() {
|
|||
|
|
let data = this.storeInfo;
|
|||
|
|
if (this.$wechat.isWeixin()) {
|
|||
|
|
let configAppMessage = {
|
|||
|
|
desc: data.store_info,
|
|||
|
|
title: data.store_name,
|
|||
|
|
link: '/pages/goods_details/index?id=' + this.id + '&spid=' + this.uid,
|
|||
|
|
imgUrl: data.image
|
|||
|
|
};
|
|||
|
|
this.$wechat.wechatEvevt([
|
|||
|
|
'updateAppMessageShareData',
|
|||
|
|
'updateTimelineShareData',
|
|||
|
|
'onMenuShareAppMessage',
|
|||
|
|
'onMenuShareTimeline'
|
|||
|
|
], configAppMessage).then(res => {}).catch(err => {});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//#endif
|
|||
|
|
appShare() {
|
|||
|
|
let that = this;
|
|||
|
|
uni.share({
|
|||
|
|
provider: "weixin",
|
|||
|
|
scene: 'WXSceneSession',
|
|||
|
|
type: 0,
|
|||
|
|
href: `${HTTP_REQUEST_URL}/pages/goods_details/index?id=${that.id}&spid=${that.uid}`,
|
|||
|
|
title: that.storeInfo.store_name,
|
|||
|
|
summary: that.storeInfo.store_info,
|
|||
|
|
imageUrl: that.storeInfo.small_image,
|
|||
|
|
success: function(res) {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
fail: function(err) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '分享失败',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
selectPic(item){
|
|||
|
|
item.select = !item.select;
|
|||
|
|
},
|
|||
|
|
savePhoto(type){
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
let that = this;
|
|||
|
|
uni.getSetting({
|
|||
|
|
success(res){
|
|||
|
|
if (!res.authSetting['scope.writePhotosAlbum']) {
|
|||
|
|
uni.authorize({
|
|||
|
|
scope: 'scope.writePhotosAlbum',
|
|||
|
|
success() {
|
|||
|
|
if(type == 'poster'){
|
|||
|
|
that.savePoster()
|
|||
|
|
}else{
|
|||
|
|
that.mpSave();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
if(type == 'poster'){
|
|||
|
|
that.savePoster()
|
|||
|
|
}else{
|
|||
|
|
that.mpSave();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
if(type == 'poster'){
|
|||
|
|
this.savePoster()
|
|||
|
|
}else{
|
|||
|
|
this.mpSave();
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
mpSave(){
|
|||
|
|
let that = this;
|
|||
|
|
let arr = this.productSwiper.filter(val => val.select);
|
|||
|
|
let picLength = arr.length; // 要下载的总条数
|
|||
|
|
let index = 0;
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '图片下载中',
|
|||
|
|
mask: true
|
|||
|
|
});
|
|||
|
|
for (let i = 0; i < arr.length; i++) {
|
|||
|
|
if(arr[i].isQrcode){
|
|||
|
|
this.savePoster();
|
|||
|
|
}else{
|
|||
|
|
uni.downloadFile({
|
|||
|
|
url: arr[i].pic,
|
|||
|
|
success: function(res) {
|
|||
|
|
var temp = res.tempFilePath
|
|||
|
|
uni.saveImageToPhotosAlbum({
|
|||
|
|
filePath: temp,
|
|||
|
|
success(res1) {
|
|||
|
|
index++;
|
|||
|
|
// 全部下载完后触发
|
|||
|
|
if (index == picLength) {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
that.$util.Tips({
|
|||
|
|
title: '保存成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail: function(res) {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
that.$util.Tips({
|
|||
|
|
title: '保存失败'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
fail(err) {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
savePoster(){
|
|||
|
|
let that = this;
|
|||
|
|
uni.saveImageToPhotosAlbum({
|
|||
|
|
filePath: that.posterImage,
|
|||
|
|
success(res1) {
|
|||
|
|
that.$util.Tips({
|
|||
|
|
title: '保存成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
fail: function(res) {
|
|||
|
|
that.$util.Tips({
|
|||
|
|
title: '保存失败'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
proviewPhoto(index){
|
|||
|
|
let list = this.productSwiper.map(item=> item.pic);
|
|||
|
|
uni.previewImage({
|
|||
|
|
current: index,
|
|||
|
|
urls: list
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
// #ifdef MP
|
|||
|
|
onShareAppMessage: function() {
|
|||
|
|
let that = this;
|
|||
|
|
userShare();
|
|||
|
|
return {
|
|||
|
|
title: that.storeInfo.store_name || '',
|
|||
|
|
imageUrl: that.storeInfo.image || '',
|
|||
|
|
path: '/pages/goods_details/index?id=' + that.id + '&spid=' + that.uid
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onShareTimeline() {
|
|||
|
|
let that = this;
|
|||
|
|
userShare();
|
|||
|
|
return {
|
|||
|
|
title: that.storeInfo.store_name || '',
|
|||
|
|
imageUrl: that.storeInfo.image || '',
|
|||
|
|
path: '/pages/goods_details/index?id=' + that.id + '&spid=' + that.uid
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
// #endif
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.icon-icon_WeChat_1{
|
|||
|
|
color: rgba(11, 190, 36, 1);
|
|||
|
|
}
|
|||
|
|
.h-256{
|
|||
|
|
height: 256rpx;
|
|||
|
|
}
|
|||
|
|
.bg-cover{
|
|||
|
|
background-size: cover;
|
|||
|
|
}
|
|||
|
|
.card-site{
|
|||
|
|
position: absolute;
|
|||
|
|
left: 50%;
|
|||
|
|
top: 24rpx;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
width: 210rpx;
|
|||
|
|
.site-logo{
|
|||
|
|
width: 18rpx;
|
|||
|
|
height: 18rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
.site-name{
|
|||
|
|
width: 152rpx;
|
|||
|
|
font-size: 18rpx;
|
|||
|
|
color: #727272;
|
|||
|
|
line-height: 16rpx;
|
|||
|
|
padding-left: 4rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.card-center-image{
|
|||
|
|
position: absolute;
|
|||
|
|
left: 50%;
|
|||
|
|
top: 48rpx;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
}
|
|||
|
|
.poster-img{
|
|||
|
|
width: 254rpx;
|
|||
|
|
height: 438rpx;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
border: 1rpx solid #EEEEEE;
|
|||
|
|
}
|
|||
|
|
.load-box{
|
|||
|
|
animation: looming-gray 1s infinite linear;
|
|||
|
|
background-color: #e3e3e3;
|
|||
|
|
}
|
|||
|
|
.view-border{
|
|||
|
|
border: 1px solid var(--view-theme);
|
|||
|
|
}
|
|||
|
|
.icon-a-ic_CompleteSelect{
|
|||
|
|
color: var(--view-theme);
|
|||
|
|
}
|
|||
|
|
.space-line{
|
|||
|
|
white-space: pre-line
|
|||
|
|
}
|
|||
|
|
.select-icon{
|
|||
|
|
position: absolute;
|
|||
|
|
top: 12rpx;
|
|||
|
|
right: 12rpx;
|
|||
|
|
}
|
|||
|
|
.b-e{
|
|||
|
|
border: 1rpx solid #EEEEEE;
|
|||
|
|
}
|
|||
|
|
.qr-tag{
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 40rpx;
|
|||
|
|
border-radius: 0 0 8rpx 8rpx;
|
|||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|||
|
|
}
|
|||
|
|
.canvas {
|
|||
|
|
position: fixed;
|
|||
|
|
top: -1300px;
|
|||
|
|
left: 0;
|
|||
|
|
width: 750px;
|
|||
|
|
height: 1300px;
|
|||
|
|
}
|
|||
|
|
@keyframes looming-gray {
|
|||
|
|
0% {
|
|||
|
|
background-color: #e3e3e3aa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
50% {
|
|||
|
|
background-color: #e3e3e3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
100% {
|
|||
|
|
background-color: #e3e3e3aa;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|