点餐页增加轮播图点击图片进入具体页面，点击分享正常分享，在对应的页面增加分享弹窗组件
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user