wangxiaowei/chazhi_shop_fronted
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化仓库

Browse Source
This commit is contained in:
wangxiaowei
2026-04-14 16:54:04 +08:00
commit 967c25b397
553 changed files with 106514 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
components/share-popup/poster.vue Normal file
View File

@ -0,0 +1,147 @@
<template>
<view>
<l-painter
css="width: 640rpx; padding-bottom: 35rpx; background-color: #ffffff; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15);border-radius: 10rpx;"
isCanvasToTempFilePath @success="handleSuccess" @fail="handleFail" custom-style="position: fixed; left: 200%">
<l-painter-view css="padding-left: 40rpx;">
<l-painter-image :src="config.avatar"
css="margin-top: 15rpx; width: 72rpx; height: 72rpx; border-radius: 50%;" />
<l-painter-view css="margin-top: 30rpx; padding-left: 20rpx; display: inline-block">
<l-painter-text :text="`来自${config.nickname}的分享`"
css="display: block; padding-bottom: 10rpx; color: #333333; font-size: 28rpx;line-clamp:1;width: 100%;" />
</l-painter-view>
<l-painter-image :src="config.image"
css="object-fit: cover; object-position: center; width: 560rpx; height: 560rpx;margin-top: 15rpx;" />
<l-painter-view css="margin-top: 30rpx;">
<!-- 商品分享海报文字内容 -->
<l-painter-view :css="`display: ${type == '1' ? 'inline-block' : 'none'}; width: 400rpx;`">
<l-painter-view
:css="`vertical-align: bottom; color: #FF2C3C; font-size: 30rpx; line-height: 1em;`">
<l-painter-text text="￥" css="vertical-align: bottom;font-size: 28rpx;" />
<l-painter-text :text="price.prev" css="vertical-align: bottom; font-size: 38rpx;" />
<l-painter-text :text="price.next" css="vertical-align: bottom; font-size: 30rpx;" />
<l-painter-text :text="marketPrice"
css="vertical-align: bottom; padding-left: 10rpx;font-size: 28rpx; font-weight: normal; text-decoration: line-through; color: #999999" />
</l-painter-view>
<l-painter-view css="margin-top:30rpx;">
<l-painter-text
css="line-clamp: 2; color: #333333; line-height: 1.5em;font-size: 30rpx; width: 378rpx; padding-right:22rpx; box-sizing: border-box"
:text="config.name"></l-painter-text>
</l-painter-view>
</l-painter-view>
<!-- 砍价分享海报文字内容 -->
<l-painter-view :css="`display: ${type == '2' ? 'inline-block' : 'none'}; width: 400rpx;`">
<l-painter-view>
<l-painter-text
:css="`line-clamp: 2; color: #FF2C3C; line-height: 1.5em;font-size: 32rpx; width: 375rpx; padding-right:22rpx; box-sizing: border-box`"
text="我正在参与砍价 还差一步"></l-painter-text>
</l-painter-view>
<l-painter-view css="margin-top:8rpx;">
<l-painter-text
css="line-clamp: 2; color: #F95F2F; line-height: 1.5em;font-size: 24rpx; width: 378rpx; padding-right:22rpx; box-sizing: border-box"
text="帮忙砍一刀"></l-painter-text>
</l-painter-view>
<l-painter-view css="margin-top:8rpx;">
<l-painter-text
css="line-clamp: 2; color: #333333; line-height: 1.5em;font-size: 28rpx; width: 378rpx; padding-right:22rpx; box-sizing: border-box"
:text="config.name"></l-painter-text>
</l-painter-view>
</l-painter-view>
<l-painter-view css="display: inline-block;">
<!-- #ifdef H5 || APP-PLUS -->
<l-painter-qrcode css="width: 168rpx; height: 168rpx;" :text="link">
</l-painter-qrcode>
<!-- #endif -->
<!-- #ifdef MP -->
<l-painter-image :src="qrcode" css="width: 168rpx; height: 168rpx;" />
<!-- #endif -->
<l-painter-text text="长按识别二维码"
css="display: block; padding-top: 10rpx; color: #999999;font-size: 24rpx;" />
</l-painter-view>
</l-painter-view>
</l-painter-view>
</l-painter>
</view>
</template>
<script>
import lPainter from '@/components/lime-painter/components/l-painter/l-painter.vue'
import lPainterImage from '@/components/lime-painter/components/l-painter-image/l-painter-image.vue'
import lPainterText from '@/components/lime-painter/components/l-painter-text/l-painter-text.vue'
import lPainterView from '@/components/lime-painter/components/l-painter-view/l-painter-view.vue'
import lPainterQrcode from '@/components/lime-painter/components/l-painter-qrcode/l-painter-qrcode.vue'
export default {
name: "share-poster",
components: {
lPainter,
lPainterImage,
lPainterText,
lPainterView,
lPainterQrcode
},
props: {
config: {
type: Object,
default: () => ({})
},
shareId: {
type: [Number, String],
default: ''
},
qrcode: {
type: [String],
default: ''
},
pagePath:{
type: String,
default: ''
},
link: {
type: String,
default: ''
},
type: {
type: String,
default: 'goods'
}
},
data() {
return {
};
},
computed: {
price() {
let {
price
} = this.config
console.log(price)
if (price == undefined) return {}
price = String(parseFloat(price)).split('.')
return {
prev: price[0],
next: price[1] ? `.${price[1]}` : ''
}
},
marketPrice() {
return `￥${parseFloat(this.config.marketPrice)}`
}
},
methods: {
handleSuccess(val) {
this.$emit('success', val)
},
handleFail(err) {
this.$emit('fail')
}
}
}
</script>
<style>
</style>

273
components/share-popup/share-popup.vue Normal file
View File

@ -0,0 +1,273 @@
<template>
<view >
<u-popup class="share-popup" v-model="showshare" mode="bottom" border-radius="14" :closeable="true"
:safe-area-inset-bottom="true" :mask-close-able="false" :mask-custom-style="{background: 'rgba(0, 0, 0, 0.1)'}" >
<view class="flex row-center md bold m-t-30 m-b-30">分享至</view>
<view class="flex row-around share-tab">
<view class="flex-col col--center" @tap="getPoster">
<image mode="widthFix" class="share-icon" src="/static/images/icon_generate_poster.png"></image>
<view class="m-t-10">生成海报</view>
</view>
<!-- #ifdef MP-WEIXIN-->
<button open-type="share" class="flex-col col--center" hover-class="none">
<image class="share-icon" src="/static/images/icon_wechat.png"></image>
<view class="m-t-10">微信好友</view>
</button>
<!-- #endif -->
<!-- #ifdef H5 || APP-PLUS -->
<view oclass="flex-col col--center" @tap="shareWx">
<image class="share-icon" src="/static/images/icon_wechat.png"></image>
<view class="m-t-10">微信好友</view>
</view>
<!-- #endif -->
</view>
<view class="flex row-center bg-body cancel xl" @tap="showshare=false">取消</view>
</u-popup>
<u-popup class="share-poster" v-model="showPoster" mode="center" :closeable="true"
:safe-area-inset-bottom="true">
<!-- #ifndef H5 -->
<image style="width: 640rpx;" mode="widthFix" :src="poster"></image>
<!-- #endif -->
<!-- #ifdef H5 -->
<img style="width: 640rpx;" :src="poster" />
<!-- #endif -->
<button class="flex row-center save-btn" size="lg" @tap="savePoster">
<!-- #ifndef H5 -->
保存图片到相册
<!-- #endif -->
<!-- #ifdef H5 -->
长按保存图片到相册
<!-- #endif -->
</button>
</u-popup>
<!-- #ifdef H5 -->
<u-popup :custom-style="{'background': 'none'}" class="share-tips" v-model="showTips" mode="top">
<view style="overflow: hidden;">
<image src="/static/images/share_arrow.png" class="share-arrow" />
<view class="white" style="text-align: center;margin-top: 280rpx;">
<view class="bold lg">立即分享给好友吧</view>
<view class="sm m-t-10">点击屏幕右上角将本页面分享给好友</view>
</view>
</view>
</u-popup>
<!-- #endif -->
<poster v-if="enablePoster" :type="type" :share-id="shareId" :page-path="pagePath" :config="config"
:qrcode="mnpQrcode" :link="getLink" @success="handleSuccess" @fail="handleFail" />
</view>
</template>
<script>
import {
apiMnpQrCode,
apiTtQrCode
} from "@/api/app"
import {
baseURL,
basePath
} from '@/config/app'
import {mapGetters} from 'vuex'
import poster from './poster.vue'
export default {
components: {
poster
},
props: {
value: {
type: Boolean
},
shareId: {
type: [String, Number],
default: ''
},
config: {
type: Object,
default: () => ({})
},
pagePath: {
type: String,
default: ''
},
type: {
type: String,
default: 'goods'
},
},
data() {
return {
poster: "",
enablePoster: false,
showPoster: false,
showTips: false,
mnpQrcode: ''
};
},
computed: {
...mapGetters(['inviteCode', 'userInfo']),
getLink() {
return `${baseURL}${basePath}/${this.pagePath}?id=${this.shareId}&invite_code=${this.inviteCode}`
},
showshare: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
}
},
watch: {
showPoster(val) {
if (!val) {
this.enablePoster = false
}
}
},
methods: {
async getPoster() {
if (!this.isLogin) return this.$Router.push('/pages/login/login')
uni.showLoading({
title: '正在生成中'
})
// #ifdef MP-WEIXIN
if (!this.mnpQrcode) {
// #ifdef MP-WEIXIN
const res = await this.getMnpQrcode()
// #endif
this.mnpQrcode = res.data.qr_code.replaceAll("\r\n", "")
}
this.enablePoster = true
// #endif
// #ifdef APP-PLUS || H5
this.enablePoster = true
// #endif
},
// 获取商品页面二维码
getMnpQrcode() {
return new Promise((resolve, reject) => {
apiMnpQrCode({
id: this.shareId,
url: this.pagePath,
type: this.type
}).then((res) => {
resolve(res)
}).catch(() => {
reject()
})
})
},
getTtQrCode() {
return new Promise((resolve, reject) => {
const sys = uni.getSystemInfoSync()
apiTtQrCode({
appname: TtAppNameEnum[sys.appName],
id: this.shareId,
page: this.pagePath
}).then((res) => {
resolve(res)
}).catch(() => {
uni.hideLoading()
})
})
},
handleSuccess(val) {
this.poster = val
uni.hideLoading()
this.showPoster = true
this.showshare = false
},
handleFail() {
uni.hideLoading({
success: () => {
this.$toast({
title: '生成失败'
})
}
})
},
shareWx() {
// #ifdef H5
this.showTips = true
this.showshare = false
// #endif
// #ifdef APP-PLUS
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 0,
href: this.getLink,
title: this.config.name,
summary: '',
imageUrl: this.config.image,
success: (res) => {
console.log('分享成功');
},
fail: (err) => {
this.$toast({
title: err.errMsg
})
}
});
// #endif
},
async savePoster() {
uni.saveImageToPhotosAlbum({
filePath: this.poster,
success: res => {
this.showPoster = false
this.$toast({
title: '保存成功',
icon: 'success'
});
},
fail: (err) => {
this.$toast({
title: '保存失败'
});
console.log(err)
}
})
}
}
}
</script>
<style lang="scss">
.share-popup {
.share-tab {
margin: 40rpx 0 140rpx;
.share-icon {
width: 100rpx;
height: 100rpx;
}
}
.cancel {
height: 98rpx;
}
}
.share-poster {
.share-img {
width: 640rpx;
border-radius: 12rpx;
}
.save-btn {
background-color: $-color-primary;
color: #fff;
margin-top: 20rpx;
}
}
.share-tips .share-arrow {
width: 140rpx;
height: 250rpx;
float: right;
margin: 15rpx 31rpx 0 0;
}
</style>