点餐页增加轮播图点击图片进入具体页面，点击分享正常分享，在对应的页面增加分享弹窗组件
This commit is contained in:
141
components/popup-distribution-group-code.vue
Normal file
141
components/popup-distribution-group-code.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<!-- 私域引流 -->
|
||||
<template>
|
||||
<u-popup :show="show" mode="center" :safeAreaInsetBottom="false">
|
||||
<view class="new_preview">
|
||||
<view class="header">{{ shopInfo.shopName }}</view>
|
||||
<view class="content">
|
||||
<view class="title">{{ group.title }}</view>
|
||||
<view class="img_wrap">
|
||||
<image class="img" :show-menu-by-longpress="true" :src="group.groupUrl" @click=""></image>
|
||||
</view>
|
||||
<view class="intro">
|
||||
{{ group.content }}
|
||||
</view>
|
||||
<view class="foot">
|
||||
如果长按不能识别，可截图或保存二维码图片至相册，通过微信扫码入群。
|
||||
</view>
|
||||
</view>
|
||||
<view class="close" @click="closeHandle">
|
||||
<u-icon name="close" color="#fff" size="14"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import dayjs from 'dayjs';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { centerConfig,distributionEditIn } from '@/common/api/market/distribution.js';
|
||||
import { checkArrayElementsExist } from '@/utils/util.js';
|
||||
|
||||
const shopInfo = ref('');
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
default: 'home' // 调用的位置 home首页 order支付成功后
|
||||
},
|
||||
group:{
|
||||
type:Object,
|
||||
default:()=>{}
|
||||
}
|
||||
});
|
||||
|
||||
const show = defineModel(false) ;
|
||||
function closeHandle() {
|
||||
const shopUserInfo=uni.cache.get('shopUserInfo')
|
||||
distributionEditIn({
|
||||
shopUserId:shopUserInfo.id
|
||||
})
|
||||
show.value = false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
shopInfo.value = uni.cache.get('shopInfo');
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.new_preview {
|
||||
--bg: #3f3b37;
|
||||
--color: #f6dfc4;
|
||||
--borderColor: #f6dfc45b;
|
||||
width: 90vw;
|
||||
background-color: var(--bg);
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
.close {
|
||||
--size: 70upx;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
border-radius: 50%;
|
||||
background-color: var(--bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom: calc(var(--size) * -1 - 20upx);
|
||||
left: 50%;
|
||||
margin-left: calc(var(--size) / 2 * -1);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
color: var(--color);
|
||||
height: 50px;
|
||||
border-bottom: 1px dashed var(--borderColor);
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-bottom: 14px;
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: var(--color);
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.img_wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.img {
|
||||
--size: 220px;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.intro {
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
color: var(--color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 14px;
|
||||
}
|
||||
|
||||
.foot {
|
||||
height: 40px;
|
||||
color: var(--borderColor);
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 14px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
220
components/ymf-components/ymf-share-popup.vue
Normal file
220
components/ymf-components/ymf-share-popup.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<view class="ynf-share">
|
||||
<up-popup :show="show" mode="center" bg-color="transparent">
|
||||
<view >
|
||||
<view class="bg" v-if="config.sharerCoupon" :style="returnBg('bg')">
|
||||
<view class="title">邀请奖励</view>
|
||||
<view class="desc">邀请1人，即可得超值优惠券{{config.sharerCouponNum}}张</view>
|
||||
<view class="u-flex u-row-center">
|
||||
<view class="coupon" :style="returnBg('coupon')">
|
||||
<template v-if="config.sharerCoupon.couponType==1">
|
||||
<view class="font-bold text-center color">
|
||||
<text class="fuhao">¥</text>
|
||||
<text>{{config.sharerCoupon.fullAmount}}-{{config.sharerCoupon.discountAmount}}</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="config.sharerCoupon.couponType==2">
|
||||
<view class="font-bold text-center color">
|
||||
<text>{{config.sharerCoupon.discountNum}}件</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="config.sharerCoupon.couponType==3">
|
||||
<view class="font-bold text-center color">
|
||||
<text>{{config.sharerCoupon.discountRate/10}}折</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="config.sharerCoupon.couponType==3">
|
||||
<view class="font-bold text-center color">
|
||||
<text>{{config.sharerCoupon.discountRate/10}}折</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="config.sharerCoupon.couponType==4">
|
||||
<view class="font-bold text-center color">
|
||||
<text>第二件半价</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="config.sharerCoupon.couponType==6">
|
||||
<view class="font-bold text-center color">
|
||||
<text>买一送一</text>
|
||||
</view>
|
||||
</template>
|
||||
<view class="font-bold name">{{config.sharerCoupon.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-center u-m-t-44">
|
||||
<ymf-share>
|
||||
<view class="share-btn" :style="returnBg('btn')"></view>
|
||||
</ymf-share>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-center u-m-t-30">
|
||||
<view class="close-box u-flex u-col-center u-row-center" @click="close">
|
||||
<up-icon name="close" size="36rpx" color="#000" :bold="true"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import {
|
||||
shareConfig,
|
||||
} from '@/common/api/market/share.js'
|
||||
import {returnPageTags} from '@/utils/share.js'
|
||||
|
||||
import {
|
||||
productStore
|
||||
} from '@/stores/user.js';
|
||||
|
||||
const userStore = productStore();
|
||||
|
||||
|
||||
const show = defineModel(false)
|
||||
const imgs = {
|
||||
btn: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/14ca8d88516b4739b4020b10d95a33c2.png',
|
||||
coupon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/4ccffb7cf8414cd19f0a10c6cf45b45b.png',
|
||||
bg: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/2/1ac6490c4efd4290abe7ca7f6d8e6eb2.png'
|
||||
}
|
||||
|
||||
function returnBg(key) {
|
||||
return {
|
||||
backgroundImage: 'url(' + imgs[key] + ')'
|
||||
}
|
||||
}
|
||||
// watch(() => show.value, (newval)=>{
|
||||
// if(newval){
|
||||
// getData()
|
||||
// }
|
||||
// })
|
||||
|
||||
function close() {
|
||||
show.value = false
|
||||
}
|
||||
const config = reactive({})
|
||||
async function getData(id) {
|
||||
const shopId = id||uni.cache.get('shopId')
|
||||
if (!shopId) {
|
||||
return
|
||||
}
|
||||
shareConfig({
|
||||
shopId
|
||||
}).then(res => {
|
||||
if(res){
|
||||
Object.assign(config,res)
|
||||
if(res.sharedUserCouponId&&res.sharedUserCouponNum&&res.isSharedUserPopup){
|
||||
const pages = getCurrentPages();
|
||||
const currentPage = pages[pages.length - 1];
|
||||
const currentPath = currentPage.route;
|
||||
const currentOptions = currentPage.options;
|
||||
const path = `/${currentPath}`;
|
||||
|
||||
const pTag = returnPageTags(path)
|
||||
if(pTag&¤tOptions.fromUserId){
|
||||
show.value=true
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watch(()=>userStore.shopInfo.id,(newval)=>{
|
||||
if(newval){
|
||||
shareConfig({
|
||||
shopId:newval
|
||||
}).then(res => {
|
||||
if(res){
|
||||
Object.assign(config,res)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
onMounted(() => {
|
||||
console.log('分享组件挂载完毕！');
|
||||
getData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.bg {
|
||||
width: 710rpx;
|
||||
background-size: cover;
|
||||
min-height: 820rpx;
|
||||
padding-top: 260rpx;
|
||||
background-color: transparent;
|
||||
padding-left: 26rpx;
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 74rpx;
|
||||
text-align: center;
|
||||
background-image: linear-gradient(to bottom, #FF7E2D, #FF270E);
|
||||
/* 定义渐变色 */
|
||||
-webkit-background-clip: text;
|
||||
/* Webkit 浏览器前缀 */
|
||||
background-clip: text;
|
||||
/* 标准属性 */
|
||||
color: transparent;
|
||||
/* 使文本透明，显示背景渐变 */
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: 20rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
color: #FF280F;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.coupon {
|
||||
margin-top: 30rpx;
|
||||
width: 436rpx;
|
||||
height: 182rpx;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 54rpx;
|
||||
text-align: center;
|
||||
|
||||
|
||||
.color {
|
||||
background-image: linear-gradient(to bottom, #FFFFFB, #FFEBB0);
|
||||
/* 定义渐变色 */
|
||||
-webkit-background-clip: text;
|
||||
/* Webkit 浏览器前缀 */
|
||||
background-clip: text;
|
||||
/* 标准属性 */
|
||||
color: transparent;
|
||||
/* 使文本透明，显示背景渐变 */
|
||||
}
|
||||
|
||||
.fuhao {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFB;
|
||||
}
|
||||
}
|
||||
|
||||
.close-box {
|
||||
width: 74rpx;
|
||||
height: 74rpx;
|
||||
opacity: 0.82;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
width: 262rpx;
|
||||
height: 72rpx;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
@@ -3,7 +3,7 @@
|
||||
<slot v-if="$slots.default" name="default"></slot>
|
||||
<up-icon v-else name="share-square" bold :color="color" :size="size"></up-icon>
|
||||
<view class="absolute share-box">
|
||||
<button open-type="share" @click="shareClick">分享</button>
|
||||
<button open-type="share" @click.stop="shareClick">分享</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user