czg_team/cashier_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化新版私域引流

Browse Source
This commit is contained in:
gyq
2025-12-15 17:41:50 +08:00
parent 7322bc0d0d
commit a20379890e
1 changed files with 380 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

314
pageMarket/drainageConfig/index.vue
View File

@@ -1,171 +1,144 @@
<template> <template>
<view class="boxconstant min-page"> <view class="boxconstant min-page">
<view class="bg-fff u-flex u-m-b-32 top"> <view class="bg-fff u-flex u-m-b-32 top">
<image <image style="width: 60rpx; height: 60rpx" src="/pageMarket/static/images/cost.png"></image>
style="width: 60rpx; height: 60rpx"
src="/pageMarket/static/images/cost.png"
></image>
<view class="u-flex-1 u-flex u-p-l-24"> <view class="u-flex-1 u-flex u-p-l-24">
<view class="u-font-28 u-flex-1 u-p-r-4"> <view class="u-font-28 u-flex-1 u-p-r-4">
<view class="color-333 font-bold">私域引流</view> <view class="color-333 font-bold">私域引流</view>
<view class="color-666 u-m-t-4 u-font-24" <view class="color-666 u-m-t-4 u-font-24">可设置用户下单后展示的群二维码</view>
>可设置用户下单后展示的群二维码</view
>
</view> </view>
<up-switch <!-- <up-switch v-model="form.isEnable" size="18" :active-value="1" :inactive-value="0"></up-switch> -->
v-model="form.isEnable"
size="18"
:active-value="1"
:inactive-value="0"
></up-switch>
</view> </view>
</view> </view>
<view class="boxconstantbox">
<view class="boxconstantbox_one"> 可使用类型 </view>
<view class="u-m-t-16">
<my-dine-types v-model="form.useType"></my-dine-types>
</view>
</view>
<view class="boxconstantbox" style="padding: 32rpx 0"> <view class="boxconstantbox" style="padding: 32rpx 0">
<view class="u-flex u-row-between x-padding"> <view class="u-flex u-row-between x-padding">
<view class="boxconstantbox_one"> 群二维码</view> <view class="boxconstantbox_one">群二维码</view>
<button class="upload" @click="uploadImage">上传</button> <button class="upload" @click="uploadImage">上传</button>
</view> </view>
<view class="u-m-t-24 u-flex u-row-center"> <view class="u-m-t-24 u-flex u-row-center">
<view class="code" @click="uploadImage"> <view class="code" @click="uploadImage">
<up-icon <up-icon name="plus" v-if="!form.qrCode" size="20" color="#999"></up-icon>
name="plus" <image v-else style="width: 260rpx; height: 260rpx" :src="form.qrCode" mode="scaleToFill" />
v-if="!form.qrCode"
size="20"
color="#999"
></up-icon>
<image
v-else
style="width: 260rpx; height: 260rpx"
:src="form.qrCode"
mode="scaleToFill"
/>
</view> </view>
</view> </view>
<view class="u-m-t-32"> <view class="u-m-t-32">
<up-line ></up-line> <up-line></up-line>
</view> </view>
<view class="u-m-t-32 u-font-28 x-padding"> <view class="u-m-t-32 u-font-28 x-padding">
<view class="boxconstantbox_one u-m-b-24"> 模块标题 </view> <view class="boxconstantbox_one u-m-b-24">模块标题</view>
<up-input <up-input placeholderClass="u-font-28" v-model="form.title" :maxlength="20" placeholder="请输入模块标题"></up-input>
placeholderClass="u-font-28"
v-model="form.title"
:maxlength="20"
placeholder="请输入模块标题"
></up-input>
</view> </view>
<view class="u-m-t-32"> <view class="u-m-t-32">
<up-line ></up-line> <up-line></up-line>
</view> </view>
<view class="u-m-t-32 u-font-28 x-padding"> <view class="u-m-t-32 u-font-28 x-padding">
<view class="boxconstantbox_one u-m-b-24"> 模块提示语</view> <view class="boxconstantbox_one u-m-b-24">模块提示语</view>
<up-input <up-input placeholderClass="u-font-28" v-model="defaultNote" :maxlength="20" placeholder="请输入模块提示语" disabled></up-input>
placeholderClass="u-font-28"
v-model="form.note"
:maxlength="20"
placeholder="请输入模块提示语"
></up-input>
</view> </view>
<view class="u-m-t-32"> <view class="u-m-t-32">
<up-line ></up-line> <up-line></up-line>
</view> </view>
<view class="u-m-t-32 u-font-28 x-padding"> <view class="u-m-t-32 u-font-28 x-padding">
<view class="boxconstantbox_one u-m-b-24"> 模块内容</view> <view class="boxconstantbox_one u-m-b-24">模块内容</view>
<up-textarea <up-textarea type="textarea" :maxlength="50" placeholderClass="u-font-28" v-model="form.content" placeholder="请输入模块内容"></up-textarea>
type="textarea"
:maxlength="50"
placeholderClass="u-font-28"
v-model="form.content"
placeholder="请输入模块内容"
></up-textarea>
</view> </view>
<view class="u-m-t-32"> <view class="u-m-t-32">
<up-line ></up-line> <up-line></up-line>
</view>
<view class="u-m-t-32 u-font-28 x-padding">
<view class="boxconstantbox_one u-m-b-24">支付完成弹窗</view>
<u-switch :active-value="1" :inactive-value="0" v-model="form.orderEnable"></u-switch>
</view>
<view class="boxconstantbox">
<view class="boxconstantbox_one">可使用类型</view>
<view class="u-m-t-16">
<my-dine-types v-model="form.orderType"></my-dine-types>
</view>
</view>
<view class="u-m-t-32 u-font-28 x-padding">
<view class="boxconstantbox_one u-m-b-24">首页弹窗</view>
<u-switch :active-value="1" :inactive-value="0" v-model="form.homeEnable"></u-switch>
</view>
<view class="boxconstantbox">
<view class="boxconstantbox_one">可使用类型</view>
<view class="u-m-t-16">
<u-radio-group v-model="form.homeType">
<u-radio name="only" label="仅显示1次"></u-radio>
<u-radio name="day" label="每天显示1次"></u-radio>
<u-radio name="every" label="每次达成触发条件都显示"></u-radio>
</u-radio-group>
</view>
</view> </view>
<view class="x-padding u-m-t-32"> <view class="x-padding u-m-t-32">
<button class="preview" @click="showPreview = true">预览</button> <button class="preview" @click="showPreview = true">预览</button>
</view> </view>
</view> </view>
<up-popup :show="showPreview" mode="center" round="16rpx" closeOnClickOverlay @close="showPreview = false" :safeAreaInsetBottom="false">
<up-popup <!-- <view class="preview-box">
:show="showPreview"
mode="center"
round="16rpx"
closeOnClickOverlay
@close="showPreview = false"
:safeAreaInsetBottom="false"
>
<view class="preview-box">
<view class="u-flex" style="align-items: stretch"> <view class="u-flex" style="align-items: stretch">
<view <view class="u-flex-1 u-p-r-24 u-flex u-flex-col" style="align-items: start; justify-content: space-between">
class="u-flex-1 u-p-r-24 u-flex u-flex-col"
style="align-items: start; justify-content: space-between"
>
<view> <view>
<view class="u-font-28 font-bold color-333">{{ <view class="u-font-28 font-bold color-333">{{ form.title }}</view>
form.title <view class="u-m-t-16 u-font-24 color-666">{{ form.content }}</view>
}}</view>
<view class="u-m-t-16 u-font-24 color-666">{{
form.content
}}</view>
</view> </view>
<view class="color-999 u-font-24 u-m-t-16">{{ form.note }}</view> <view class="color-999 u-font-24 u-m-t-16">{{ form.note }}</view>
</view> </view>
<image :src="form.qrCode" style="width: 240rpx; height: 240rpx" mode="scaleToFill"></image>
<image </view>
:src="form.qrCode" </view> -->
style="width: 240rpx; height: 240rpx" <view class="new_preview">
mode="scaleToFill" <view class="header">{{ shopInfo.shopName }}</view>
></image> <view class="content">
<view class="title">{{ form.title }}</view>
<view class="img_wrap">
<image class="img" :src="form.qrCode"></image>
</view>
<view class="intro">
{{ form.content }}
</view>
<view class="foot">
{{ form.note }}
</view>
</view>
<view class="close" @click="showPreview = false">
<u-icon name="close" color="#fff" size="14"></u-icon>
</view> </view>
</view> </view>
</up-popup> </up-popup>
<my-bottom-btn-group @cancel="cancel" @save="editFreeDing"></my-bottom-btn-group>
<my-bottom-btn-group
@cancel="cancel"
@save="editFreeDing"
></my-bottom-btn-group>
</view> </view>
</template> </template>
<script setup> <script setup>
import { onShow, onLoad } from "@dcloudio/uni-app"; import { onShow, onLoad } from '@dcloudio/uni-app';
import { reactive, ref, watch } from "vue"; import { reactive, ref, watch } from 'vue';
import { uploadFile } from "@/http/api/index.js"; import { uploadFile } from '@/http/api/index.js';
import { getConfig, update } from '@/http/api/market/drainageConfig.js';
const shopInfo = ref('');
import { getConfig, update } from "@/http/api/market/drainageConfig.js";
const showPreview = ref(false); const showPreview = ref(false);
const defaultNote = ref('如果长按不能识别，可截图或保存二维码图片至相册，通过微信扫码入群');
const form = reactive({ const form = reactive({
content: "", id: '',
isEnable: 0, orderType: [], // 订单页显示类型： 堂食 dine-in 外带 take-out 外卖 take-away
note: "长按识别，微信内扫一扫加好友", homeType: '', // 首页显示类型：only 仅显示 1 次，day 每天显示一次，every 每次进入小程序
qrCode: "", qrCode: '',
title: "扫码进取，优惠多多", title: '',
useType: [], content: '', //
}); note: defaultNote.value,
onLoad(() => { orderEnable: 1, // 订单页是否开启
// uni.$utils.inputReg.bind()() homeEnable: 1 // 首页是否开启
});
onShow(() => {
getlist();
}); });
/** /**
* 获取配置信息 * 获取配置信息
*/ */
const getlist = async () => { const getConfigAjax = async () => {
let res = await getConfig(); let res = await getConfig();
res.useType = res.useType || []; res.useType = res.useType || [];
res.note=res.note||"长按识别，微信内扫一扫加好友" res.note = res.note || '长按识别，微信内扫一扫加好友';
res.title=res.title||"扫码进取，优惠多多" res.title = res.title || '扫码进取，优惠多多';
Object.assign(form, res); Object.assign(form, res);
}; };
@@ -173,28 +146,34 @@ const getlist = async () => {
* 修改配置信息 * 修改配置信息
*/ */
const editFreeDing = async () => { const editFreeDing = async () => {
if(form.useType.length == 0){ if (form.orderEnable == 1 && form.orderType.length == 0) {
return uni.showToast({ return uni.showToast({
icon: "none", icon: 'none',
title: "请选择可使用类型", title: '请选择可使用类型'
}); });
} }
if (!form.qrCode) { if (!form.qrCode) {
return uni.showToast({ return uni.showToast({
icon: "none", icon: 'none',
title: "请上传群二维码", title: '请上传群二维码'
}); });
} }
if (!form.title) { if (!form.title) {
return uni.showToast({ return uni.showToast({
icon: "none", icon: 'none',
title: "请输入模块标题", title: '请输入模块标题'
}); });
} }
if (form.homeEnable == 1 && form.homeType.length == 0) {
return uni.showToast({
icon: 'none',
title: '请选择首页显示类型'
});
}
form.note = defaultNote.value;
let res = await update(form); let res = await update(form);
uni.showToast({ uni.showToast({
title: "保存成功", title: '保存成功'
}); });
Object.assign(form, res); Object.assign(form, res);
setTimeout(() => { setTimeout(() => {
@@ -212,22 +191,30 @@ function uploadImage() {
form.qrCode = res; form.qrCode = res;
} else { } else {
uni.showToast({ uni.showToast({
icon: "none", icon: 'none',
title: "上传失败", title: '上传失败'
}); });
} }
}); });
}, }
}); });
} }
function cancel() { function cancel() {
uni.navigateBack(); uni.navigateBack();
} }
onLoad(() => {
shopInfo.value = uni.getStorageSync('shopInfo');
// uni.$utils.inputReg.bind()()
});
onShow(() => {
getConfigAjax();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.x-padding { .x-padding {
padding-left: 28rpx; padding-left: 28rpx;
padding-right: 28rpx; padding-right: 28rpx;
@@ -363,4 +350,83 @@ function cancel() {
width: 700rpx; width: 700rpx;
padding: 32rpx 28rpx; padding: 32rpx 28rpx;
} }
.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> </style>