From a20379890e116aad285d5afe651292690f8ac733 Mon Sep 17 00:00:00 2001
From: gyq <875626088@qq.com>
Date: Mon, 15 Dec 2025 17:41:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=96=B0=E7=89=88=E7=A7=81?=
 =?UTF-8?q?=E5=9F=9F=E5=BC=95=E6=B5=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pageMarket/drainageConfig/index.vue | 694 +++++++++++++++-------------
 1 file changed, 380 insertions(+), 314 deletions(-)

diff --git a/pageMarket/drainageConfig/index.vue b/pageMarket/drainageConfig/index.vue
index 8930055..271928a 100644
--- a/pageMarket/drainageConfig/index.vue
+++ b/pageMarket/drainageConfig/index.vue
@@ -1,366 +1,432 @@
 <template>
-  <view class="boxconstant min-page">
-    <view class="bg-fff u-flex u-m-b-32 top">
-      <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-font-28 u-flex-1 u-p-r-4">
-          <view class="color-333 font-bold">私域引流</view>
-          <view class="color-666 u-m-t-4 u-font-24"
-            >可设置用户下单后展示的群二维码</view
-          >
-        </view>
-        <up-switch
-          v-model="form.isEnable"
-          size="18"
-          :active-value="1"
-          :inactive-value="0"
-        ></up-switch>
-      </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="boxconstant min-page">
+		<view class="bg-fff u-flex u-m-b-32 top">
+			<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-font-28 u-flex-1 u-p-r-4">
+					<view class="color-333 font-bold">私域引流</view>
+					<view class="color-666 u-m-t-4 u-font-24">可设置用户下单后展示的群二维码</view>
+				</view>
+				<!-- <up-switch v-model="form.isEnable" size="18" :active-value="1" :inactive-value="0"></up-switch> -->
+			</view>
+		</view>
+		<view class="boxconstantbox" style="padding: 32rpx 0">
+			<view class="u-flex u-row-between x-padding">
+				<view class="boxconstantbox_one">群二维码</view>
+				<button class="upload" @click="uploadImage">上传</button>
+			</view>
+			<view class="u-m-t-24 u-flex u-row-center">
+				<view class="code" @click="uploadImage">
+					<up-icon name="plus" 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 class="u-m-t-32">
+				<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>
+				<up-input placeholderClass="u-font-28" v-model="form.title" :maxlength="20" placeholder="请输入模块标题"></up-input>
+			</view>
+			<view class="u-m-t-32">
+				<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>
+				<up-input placeholderClass="u-font-28" v-model="defaultNote" :maxlength="20" placeholder="请输入模块提示语" disabled></up-input>
+			</view>
+			<view class="u-m-t-32">
+				<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>
+				<up-textarea type="textarea" :maxlength="50" placeholderClass="u-font-28" v-model="form.content" placeholder="请输入模块内容"></up-textarea>
+			</view>
+			<view class="u-m-t-32">
+				<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 class="x-padding u-m-t-32">
+				<button class="preview" @click="showPreview = true">预览</button>
+			</view>
+		</view>
+		<up-popup :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-1 u-p-r-24 u-flex u-flex-col" style="align-items: start; justify-content: space-between">
+						<view>
+							<view class="u-font-28 font-bold color-333">{{ form.title }}</view>
+							<view class="u-m-t-16 u-font-24 color-666">{{ form.content }}</view>
+						</view>
 
-    <view class="boxconstantbox" style="padding: 32rpx 0">
-      <view class="u-flex u-row-between x-padding">
-        <view class="boxconstantbox_one"> 群二维码</view>
-        <button class="upload" @click="uploadImage">上传</button>
-      </view>
-      <view class="u-m-t-24 u-flex u-row-center">
-        <view class="code" @click="uploadImage">
-          <up-icon
-            name="plus"
-            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 class="u-m-t-32">
-		  <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>
-        <up-input
-          placeholderClass="u-font-28"
-          v-model="form.title"
-          :maxlength="20"
-
-          placeholder="请输入模块标题"
-        ></up-input>
-      </view>
-      <view class="u-m-t-32">
-      		  <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>
-        <up-input
-          placeholderClass="u-font-28"
-          v-model="form.note"
-          :maxlength="20"
-          placeholder="请输入模块提示语"
-        ></up-input>
-      </view>
-      <view class="u-m-t-32">
-      		  <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>
-        <up-textarea
-          type="textarea"
-          :maxlength="50"
-          placeholderClass="u-font-28"
-          v-model="form.content"
-          placeholder="请输入模块内容"
-        ></up-textarea>
-      </view>
-      <view class="u-m-t-32">
-      		  <up-line ></up-line>
-      	  </view>
-
-      <view class="x-padding u-m-t-32">
-        <button class="preview" @click="showPreview = true">预览</button>
-      </view>
-    </view>
-
-    <up-popup
-      :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-1 u-p-r-24 u-flex u-flex-col"
-            style="align-items: start; justify-content: space-between"
-          >
-            <view>
-              <view class="u-font-28 font-bold color-333">{{
-                form.title
-              }}</view>
-              <view class="u-m-t-16 u-font-24 color-666">{{
-                form.content
-              }}</view>
-            </view>
-
-            <view class="color-999 u-font-24 u-m-t-16">{{ form.note }}</view>
-          </view>
-
-          <image
-            :src="form.qrCode"
-            style="width: 240rpx; height: 240rpx"
-            mode="scaleToFill"
-          ></image>
-        </view>
-      </view>
-    </up-popup>
-
-    <my-bottom-btn-group
-      @cancel="cancel"
-      @save="editFreeDing"
-    ></my-bottom-btn-group>
-  </view>
+						<view class="color-999 u-font-24 u-m-t-16">{{ form.note }}</view>
+					</view>
+					<image :src="form.qrCode" style="width: 240rpx; height: 240rpx" mode="scaleToFill"></image>
+				</view>
+			</view> -->
+			<view class="new_preview">
+				<view class="header">{{ shopInfo.shopName }}</view>
+				<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>
+		</up-popup>
+		<my-bottom-btn-group @cancel="cancel" @save="editFreeDing"></my-bottom-btn-group>
+	</view>
 </template>
 
 <script setup>
-import { onShow, onLoad } from "@dcloudio/uni-app";
-import { reactive, ref, watch } from "vue";
-import { uploadFile } from "@/http/api/index.js";
+import { onShow, onLoad } from '@dcloudio/uni-app';
+import { reactive, ref, watch } from 'vue';
+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 defaultNote = ref('如果长按不能识别，可截图或保存二维码图片至相册，通过微信扫码入群');
 const form = reactive({
-  content: "",
-  isEnable: 0,
-  note: "长按识别，微信内扫一扫加好友",
-  qrCode: "",
-  title: "扫码进取，优惠多多",
-  useType: [],
-});
-onLoad(() => {
-  // uni.$utils.inputReg.bind()()
-});
-onShow(() => {
-  getlist();
+	id: '',
+	orderType: [], // 订单页显示类型： 堂食 dine-in 外带 take-out 外卖 take-away
+	homeType: '', // 首页显示类型：only 仅显示 1 次，day 每天显示一次，every 每次进入小程序
+	qrCode: '',
+	title: '',
+	content: '', //
+	note: defaultNote.value,
+	orderEnable: 1, // 订单页是否开启
+	homeEnable: 1 // 首页是否开启
 });
+
 /**
  * 获取配置信息
  */
-const getlist = async () => {
-  let res = await getConfig();
-  res.useType = res.useType || [];
-  res.note=res.note||"长按识别，微信内扫一扫加好友"
-  res.title=res.title||"扫码进取，优惠多多"
-  Object.assign(form, res);
+const getConfigAjax = async () => {
+	let res = await getConfig();
+	res.useType = res.useType || [];
+	res.note = res.note || '长按识别，微信内扫一扫加好友';
+	res.title = res.title || '扫码进取，优惠多多';
+	Object.assign(form, res);
 };
 
 /**
  * 修改配置信息
  */
 const editFreeDing = async () => {
-  if(form.useType.length == 0){
-    return uni.showToast({
-      icon: "none",
-      title: "请选择可使用类型",
-    });
-  }
-  if (!form.qrCode) {
-    return uni.showToast({
-      icon: "none",
-      title: "请上传群二维码",
-    });
-  }
-  if (!form.title) {
-    return uni.showToast({
-      icon: "none",
-      title: "请输入模块标题",
-    });
-  }
-
-  let res = await update(form);
-  uni.showToast({
-    title: "保存成功",
-  });
-  Object.assign(form, res);
-  setTimeout(() => {
-    uni.navigateBack();
-  }, 1500);
+	if (form.orderEnable == 1 && form.orderType.length == 0) {
+		return uni.showToast({
+			icon: 'none',
+			title: '请选择可使用类型'
+		});
+	}
+	if (!form.qrCode) {
+		return uni.showToast({
+			icon: 'none',
+			title: '请上传群二维码'
+		});
+	}
+	if (!form.title) {
+		return uni.showToast({
+			icon: 'none',
+			title: '请输入模块标题'
+		});
+	}
+	if (form.homeEnable == 1 && form.homeType.length == 0) {
+		return uni.showToast({
+			icon: 'none',
+			title: '请选择首页显示类型'
+		});
+	}
+	form.note = defaultNote.value;
+	let res = await update(form);
+	uni.showToast({
+		title: '保存成功'
+	});
+	Object.assign(form, res);
+	setTimeout(() => {
+		uni.navigateBack();
+	}, 1500);
 };
 
 function uploadImage() {
-  uni.chooseImage({
-    count: 1,
-    success: (res) => {
-      console.log(res);
-      uploadFile(res.tempFiles[0]).then((res) => {
-        if (res) {
-          form.qrCode = res;
-        } else {
-          uni.showToast({
-            icon: "none",
-            title: "上传失败",
-          });
-        }
-      });
-    },
-  });
+	uni.chooseImage({
+		count: 1,
+		success: (res) => {
+			console.log(res);
+			uploadFile(res.tempFiles[0]).then((res) => {
+				if (res) {
+					form.qrCode = res;
+				} else {
+					uni.showToast({
+						icon: 'none',
+						title: '上传失败'
+					});
+				}
+			});
+		}
+	});
 }
 
 function cancel() {
-  uni.navigateBack();
+	uni.navigateBack();
 }
+
+onLoad(() => {
+	shopInfo.value = uni.getStorageSync('shopInfo');
+	// uni.$utils.inputReg.bind()()
+});
+
+onShow(() => {
+	getConfigAjax();
+});
 </script>
 
 <style lang="scss" scoped>
-
 .x-padding {
-  padding-left: 28rpx;
-  padding-right: 28rpx;
+	padding-left: 28rpx;
+	padding-right: 28rpx;
 }
 .boxconstant {
-  padding: 32rpx 28rpx;
+	padding: 32rpx 28rpx;
 	background: #f7f7f7;
-  .boxconstantbox {
-    padding: 32rpx 24rpx;
-    border-radius: 16rpx;
-    margin-top: 32rpx;
-    width: 100%;
-    background: #ffffff;
+	.boxconstantbox {
+		padding: 32rpx 24rpx;
+		border-radius: 16rpx;
+		margin-top: 32rpx;
+		width: 100%;
+		background: #ffffff;
 
-    .boxconstantbox_one {
-      font-family: Source Han Sans CN, Source Han Sans CN;
-      font-weight: bold;
-      font-size: 28rpx;
-      color: #333333;
-    }
+		.boxconstantbox_one {
+			font-family: Source Han Sans CN, Source Han Sans CN;
+			font-weight: bold;
+			font-size: 28rpx;
+			color: #333333;
+		}
 
-    .boxconstantbox_tow {
-      font-family: Source Han Sans CN, Source Han Sans CN;
-      font-weight: 400;
-      font-size: 28rpx;
-      color: #333333;
-      // display: flex;
-      // justify-content: flex-start;
-      // align-items: center;
-      // flex-wrap: wrap;
-      // align-content: flex-start;
-      .text {
-        display: inline-flex;
-        text-align: center;
-        margin: 0 12rpx;
-        width: 118rpx;
-        height: 48rpx;
-        line-height: 48rpx;
-        background: #ffffff;
-        border-radius: 8rpx 8rpx 8rpx 8rpx;
-        border: 2rpx solid #e5e5e5;
-      }
-    }
-  }
+		.boxconstantbox_tow {
+			font-family: Source Han Sans CN, Source Han Sans CN;
+			font-weight: 400;
+			font-size: 28rpx;
+			color: #333333;
+			// display: flex;
+			// justify-content: flex-start;
+			// align-items: center;
+			// flex-wrap: wrap;
+			// align-content: flex-start;
+			.text {
+				display: inline-flex;
+				text-align: center;
+				margin: 0 12rpx;
+				width: 118rpx;
+				height: 48rpx;
+				line-height: 48rpx;
+				background: #ffffff;
+				border-radius: 8rpx 8rpx 8rpx 8rpx;
+				border: 2rpx solid #e5e5e5;
+			}
+		}
+	}
 
-  .oneboxconstant {
-    margin-top: 32rpx;
-    width: 100%;
-    background: #ffffff;
-    border-radius: 12rpx 12rpx 12rpx 12rpx;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    padding: 32rpx 24rpx;
+	.oneboxconstant {
+		margin-top: 32rpx;
+		width: 100%;
+		background: #ffffff;
+		border-radius: 12rpx 12rpx 12rpx 12rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		flex-wrap: wrap;
+		padding: 32rpx 24rpx;
 
-    .oneboxconstant_one {
-      font-family: Source Han Sans CN, Source Han Sans CN;
-      font-weight: 500;
-      font-size: 28rpx;
-      color: #333333;
-    }
-  }
+		.oneboxconstant_one {
+			font-family: Source Han Sans CN, Source Han Sans CN;
+			font-weight: 500;
+			font-size: 28rpx;
+			color: #333333;
+		}
+	}
 
-  .save {
-    margin: 100rpx auto 50rpx auto;
-    width: 530rpx;
-    height: 80rpx;
-    background: #318afe;
-    border-radius: 56rpx 56rpx 56rpx 56rpx;
-    font-family: Source Han Sans CN, Source Han Sans CN;
-    font-weight: 500;
-    font-size: 32rpx;
-    color: #ffffff;
-    line-height: 80rpx;
-    text-align: center;
-  }
+	.save {
+		margin: 100rpx auto 50rpx auto;
+		width: 530rpx;
+		height: 80rpx;
+		background: #318afe;
+		border-radius: 56rpx 56rpx 56rpx 56rpx;
+		font-family: Source Han Sans CN, Source Han Sans CN;
+		font-weight: 500;
+		font-size: 32rpx;
+		color: #ffffff;
+		line-height: 80rpx;
+		text-align: center;
+	}
 }
 .top {
-  padding: 24rpx 20rpx 28rpx 28rpx;
+	padding: 24rpx 20rpx 28rpx 28rpx;
 }
 .number-box {
-  width: 260rpx;
-  font-size: 28rpx;
-  padding: 10rpx 26rpx;
-  border-radius: 6rpx 0 0 6rpx;
-  border-top: 2rpx solid #d9d9d9;
-  border-bottom: 2rpx solid #d9d9d9;
-  border-left: 2rpx solid #d9d9d9;
-  background: #fff;
+	width: 260rpx;
+	font-size: 28rpx;
+	padding: 10rpx 26rpx;
+	border-radius: 6rpx 0 0 6rpx;
+	border-top: 2rpx solid #d9d9d9;
+	border-bottom: 2rpx solid #d9d9d9;
+	border-left: 2rpx solid #d9d9d9;
+	background: #fff;
 }
 .bei {
-  display: flex;
-  padding: 10rpx 38rpx;
-  align-items: center;
-  border-radius: 0 6rpx 6rpx 0;
-  border: 2rpx solid #d9d9d9;
-  background: #f7f7fa;
-  font-size: 28rpx;
-  color: #999999;
+	display: flex;
+	padding: 10rpx 38rpx;
+	align-items: center;
+	border-radius: 0 6rpx 6rpx 0;
+	border: 2rpx solid #d9d9d9;
+	background: #f7f7fa;
+	font-size: 28rpx;
+	color: #999999;
 }
 .upload {
-  padding: 8rpx 32rpx;
-  border-radius: 60rpx;
-  background: $my-main-color;
-  font-size: 28rpx;
-  color: #ffffff;
-  line-height: 40rpx;
-  margin: 0;
+	padding: 8rpx 32rpx;
+	border-radius: 60rpx;
+	background: $my-main-color;
+	font-size: 28rpx;
+	color: #ffffff;
+	line-height: 40rpx;
+	margin: 0;
 }
 .code {
-  display: flex;
-  width: 264rpx;
-  height: 264rpx;
-  padding: 108rpx;
-  justify-content: center;
-  align-items: center;
-  gap: 20rpx;
-  border: 3rpx dashed #d9d9d9;
-  background: #fff;
-  padding: 2rpx;
+	display: flex;
+	width: 264rpx;
+	height: 264rpx;
+	padding: 108rpx;
+	justify-content: center;
+	align-items: center;
+	gap: 20rpx;
+	border: 3rpx dashed #d9d9d9;
+	background: #fff;
+	padding: 2rpx;
 }
 .preview {
-  padding: 8rpx 32rpx;
-  border-radius: 12rpx;
-  background: $my-main-color;
-  color: #ffffff;
-  font-size: 28rpx;
-  font-weight: 400;
-  line-height: 40rpx;
+	padding: 8rpx 32rpx;
+	border-radius: 12rpx;
+	background: $my-main-color;
+	color: #ffffff;
+	font-size: 28rpx;
+	font-weight: 400;
+	line-height: 40rpx;
 }
 .preview-box {
-  width: 700rpx;
-  padding: 32rpx 28rpx;
+	width: 700rpx;
+	padding: 32rpx 28rpx;
 }
-</style>
\ No newline at end of file
+.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>