From 7458a98a2a8ce6abd444b124360ca47f69163196 Mon Sep 17 00:00:00 2001
From: gxwebsoft <Websoft5386339>
Date: Wed, 6 Dec 2023 16:47:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=88=91=E7=9A=84=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E9=A1=B5=E9=9D=A2=E3=80=81=E6=8E=A8=E9=80=81=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/user/components/notice.vue  | 263 ++++++++++++++++++++++++++++++
 pages/user/components/setting.vue | 169 +++++++++++++++++++
 pages/user/user.vue               |  10 +-
 pages/yellowPage/info.vue         |   2 +-
 4 files changed, 442 insertions(+), 2 deletions(-)
 create mode 100644 pages/user/components/notice.vue
 create mode 100644 pages/user/components/setting.vue

diff --git a/pages/user/components/notice.vue b/pages/user/components/notice.vue
new file mode 100644
index 0000000..28cad0a
--- /dev/null
+++ b/pages/user/components/notice.vue
@@ -0,0 +1,263 @@
+<template>
+		<el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>您有<em style="color: #bf2b28;padding: 0 3px;font-weight: 500">{{ num }}</em>条未读消息</span>
+        <el-button style="float: right; padding: 3px 0; color: #666" type="text" @click="onSetting"><i class="el-icon-setting"></i> 消息推送设置</el-button>
+			</div>
+			<!-- 消息列表 -->
+      <div class="notice-list">
+        <div class="item" v-for="(item,index) in noticeList" :key="index">
+          <div class="title-box">
+            <div class="title-box">
+              <el-badge is-dot class="badge" v-if="item.status === 0"></el-badge>
+              <div class="title">{{ item.title }}</div>
+              <div class="time">{{ item.time }}</div>
+            </div>
+            <div class="right">
+              <div class="btn" @click="onStatus(index)">
+                <i class="el-icon-sunset"></i>标记为已读
+              </div>
+              <div class="btn" @click="onDelete(index)">
+                <i class="el-icon-delete"></i>删除
+              </div>
+            </div>
+          </div>
+          <div class="desc">
+            {{ item.comments }}
+          </div>
+        </div>
+      </div>
+
+			<!-- 添加或编辑的弹窗结束 -->
+		</el-card>
+</template>
+
+<script>
+	let that;
+	const originalForms = {sort: 0, enable: true}
+	// import { VueCropper }  from 'vue-cropper'
+	export default {
+		components: {
+			// VueCropper
+		},
+		data() {
+			return {
+        num: 1,
+        noticeList: [
+          {
+            id: 1,
+            title: '恭喜！您已注册成功！',
+            comments: '尊敬的用户，恭喜您已成功注册金久信钢铁交易平台，感谢您的支持！',
+            time: '2023-05-18 10:15:00',
+            status: 0
+          }
+        ],
+				// 表格相关开始 -----------------------------------------------------------
+				table1: {
+					// 表格数据请求地址
+					action: "client/seal/kh/getList",
+					// 表格字段显示规则
+					columns: [
+						{
+							key: "imageUrl",
+							title: "印章",
+							type: "image",
+							width: 280,
+						},
+						{
+							key: "remark",
+							title: "备注",
+							type: "text",
+						},
+						{
+							key: "_add_time",
+							title: "添加时间",
+							type: "time",
+							width: 160
+						},
+
+					],
+					// 多选框选中的值
+					multipleSelection: [],
+					// 当前高亮的记录
+					selectItem: ""
+
+				},
+				// 表格相关结束 -----------------------------------------------------------
+				// 表单相关开始 -----------------------------------------------------------
+				form1: {
+					// 表单请求数据，此处可以设置默认值
+					data: {
+						enable: true
+					},
+					// 表单属性
+					props: {
+						// 表单请求地址
+						action: "",
+						// 表单字段显示规则
+						columns: [
+							{
+								key:"imageUrl", title:"印章图片", type:"image",
+								limit: 1,
+								tips: '图片格式：PNG，需设置为透明底；图片尺寸：企业章 166x166 像素，个人章 134x60 像素，印章紧密贴紧四周，尽量避免留白；',
+								watch: (data) => {
+								   const { value, formData, column, index, option, $set } = data
+								   if(!value) {
+									   this.form1.data.imageBase64 = ""
+								   }else {
+									   vk.showLoading('正在上传')
+									   vk.myfn.urlTobase64(value).then(res => {
+									      this.form1.data.imageBase64 = res
+									      vk.hideLoading();
+									   })
+								   }
+
+								}
+							},
+
+							{
+								key:"remark", title:"备注", type:"text"
+							},
+							{ key: "enable", title: "启用", type: "switch", activeValue: true, inactiveValue: false, width: 100 },
+
+						],
+						// 表单验证规则
+						rules: {
+							imageUrl: [
+								{ required:true, message:'印章不能为空', trigger:'blur' },
+								{ required:true, message:'印章不能为空', trigger:'blur' },
+							],
+							label:[
+								{ required:true, message:'属性名称不能为空', trigger:'blur' },
+							],
+							values:[
+								{ required:true, message:'可选值不能为空', trigger:'blur' },
+							],
+
+						},
+						// add 代表添加 update 代表修改
+						formType: "",
+						// 是否显示表单的弹窗
+						show: false,
+						beforeAction:(formData)=>{
+						    // 可在此处修改 formData 后返回 formData，若在此处return false，则表单不触发提交请求。
+
+						    return formData;
+						},
+					}
+				},
+				// 其他弹窗表单
+				// 表单相关结束 -----------------------------------------------------------
+
+			}
+		},
+		created() {
+			that = this
+		},
+		methods: {
+			addBtn() {
+				that.resetForm();
+				that.form1.props.action = 'client/seal/kh/add';
+				that.form1.props.formType = 'add';
+				that.form1.props.title = '添加';
+				that.form1.props.show = true;
+			},
+			// 显示修改页面
+			updateBtn({
+				item
+			}) {
+				that.form1.props.action = 'client/seal/kh/update';
+				that.form1.props.formType = 'update';
+				that.form1.props.title = '编辑';
+				that.form1.props.show = true;
+				that.form1.data = item;
+			},
+			closeForm() {
+				this.form1.props.show = false
+				this.form1.data = {
+					sort: 0,
+					enable: true
+				}
+			},
+			// 删除按钮
+			deleteBtn({
+				item,
+				deleteFn
+			}) {
+				deleteFn({
+					action: "client/seal/kh/delete",
+					data: {
+						_id: item._id
+					},
+				});
+			},
+			// 表单重置
+			resetForm() {
+				vk.pubfn.resetForm(originalForms, that);
+			},
+			// 搜索
+			search() {
+				that.$refs.table1.search();
+			},
+			// 刷新
+			refresh() {
+				that.$refs.table1.refresh();
+			},
+      onStatus(index){
+        this.noticeList[index].status = 1;
+      },
+      onDelete(index){
+        this.noticeList.splice(index,1)
+      },
+      onSetting(){
+        this.$emit('done','setting')
+      }
+		}
+	}
+</script>
+
+<style lang="less">
+.el-icon-setting{
+  padding: 0 5px;
+}
+.notice-list{
+  .item{
+    display: flex;
+    flex-direction: column;
+    .title-box{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .title{
+        font-size: 14px;
+      }
+      .time{
+        margin-left: 10px;
+        color: #999999;
+      }
+      .badge{
+        display: flex;
+        flex-direction: column;
+        margin-right: 10px;
+      }
+    }
+    .desc{
+      color: #999999;
+      line-height: 2em;
+    }
+    .right{
+      display: flex;
+      .btn{
+        color: #bf2b28;
+        cursor: pointer;
+        i{
+          padding: 0 5px;
+          margin-left: 10px;
+        }
+      }
+      .active{
+      }
+    }
+  }
+}
+</style>
diff --git a/pages/user/components/setting.vue b/pages/user/components/setting.vue
new file mode 100644
index 0000000..6607d3a
--- /dev/null
+++ b/pages/user/components/setting.vue
@@ -0,0 +1,169 @@
+<template>
+		<el-card class="box-card">
+      <div slot="header" class="clearfix" style="text-align: center">
+        <span style="font-size: 20px;line-height: 2em;">消息推送设置</span>
+        <div style="color: #999999">我们将针对您的选择，为您精准推送询价信息</div>
+			</div>
+      <el-row class="setting-list" :gutter="50">
+        <el-col span="12" v-for="(item,index) in settingList" :key="index">
+          <div class="item">
+            <div class="title">
+              <el-badge is-dot class="badge"></el-badge>
+              {{ item.title }}
+            </div>
+            <div class="btn">
+              <el-switch
+                  v-model="item.status">
+              </el-switch>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+      <el-divider></el-divider>
+      <div class="form">
+        <div class="form-title">
+          * 请选择产品：
+        </div>
+        <el-form ref="form" :model="form" label-position="left" label-width="120px">
+          <el-form-item label="螺纹钢、高线">
+            <el-checkbox-group v-model="group1" size="small">
+              <el-checkbox label="螺纹钢" border></el-checkbox>
+              <el-checkbox label="盘螺" border></el-checkbox>
+              <el-checkbox label="盘圆" border></el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+          <el-form-item label="钢材">
+            <el-checkbox-group v-model="group1" size="small">
+              <el-checkbox label="螺纹钢" border></el-checkbox>
+              <el-checkbox label="盘螺" border></el-checkbox>
+              <el-checkbox label="盘圆" border></el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+          <el-form-item label="钢版">
+            <el-checkbox-group v-model="group1" size="small">
+              <el-checkbox label="螺纹钢" border></el-checkbox>
+              <el-checkbox label="盘螺" border></el-checkbox>
+              <el-checkbox label="盘圆" border></el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+          <el-form-item label="型材">
+            <el-checkbox-group v-model="group1" size="small">
+              <el-checkbox label="螺纹钢" border></el-checkbox>
+              <el-checkbox label="盘螺" border></el-checkbox>
+              <el-checkbox label="盘圆" border></el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+          <el-form-item label="配件、耗材">
+            <el-checkbox-group v-model="group1" size="small">
+              <el-checkbox label="螺纹钢" border></el-checkbox>
+              <el-checkbox label="盘螺" border></el-checkbox>
+              <el-checkbox label="盘圆" border></el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+          <el-form-item label="二手钢材、设备">
+            <el-checkbox-group v-model="group1" size="small">
+              <el-checkbox label="螺纹钢" border></el-checkbox>
+              <el-checkbox label="盘螺" border></el-checkbox>
+              <el-checkbox label="盘圆" border></el-checkbox>
+            </el-checkbox-group>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-divider></el-divider>
+      <div class="form">
+        <div class="form-title">
+          * 请选择服务地区：
+        </div>
+        <el-form ref="form" :model="form" label-position="left" label-width="120px">
+            广西-南宁
+        </el-form>
+      </div>
+      <el-divider></el-divider>
+      <el-button type="danger" round>保存设置</el-button>
+		</el-card>
+</template>
+
+<script>
+	let that;
+	const originalForms = {sort: 0, enable: true}
+	// import { VueCropper }  from 'vue-cropper'
+	export default {
+		components: {
+			// VueCropper
+		},
+		data() {
+			return {
+        settingList: [
+          {
+            id: 1,
+            title: '金融服务',
+            status: true
+          },
+          {
+            id: 2,
+            title: '金融服务',
+            status: true
+          },
+          {
+            id: 3,
+            title: '找合作信息推送服务',
+            status: true
+          },
+          {
+            id: 4,
+            title: '找加工信息推送服务',
+            status: false
+          },
+          {
+            id: 5,
+            title: '旧货信息交易推送服务',
+            status: true
+          },
+          {
+            id: 6,
+            title: '询价单和选项推送服务',
+            status: false
+          }
+        ],
+        form: {},
+        group1: []
+			}
+		},
+		created() {
+			that = this
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="less">
+.setting-list{
+  .item{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 5px auto;
+    .title{
+      display: flex;
+      align-items: center;
+      .badge{
+        display: flex;
+        align-items: center;
+        padding: 0 5px;
+      }
+    }
+  }
+}
+.form-title{
+  color: #bf2b28;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 2em;
+  margin-bottom: 10px;
+}
+.form{
+  padding: 10px;
+}
+</style>
diff --git a/pages/user/user.vue b/pages/user/user.vue
index 7426c96..c6e9048 100644
--- a/pages/user/user.vue
+++ b/pages/user/user.vue
@@ -20,6 +20,10 @@
                             <i class="el-icon-s-check"></i>
                             <span slot="title">我的印章</span>
                         </el-menu-item> -->
+                      <el-menu-item index="notice">
+                          <i class="el-icon-bell"></i>
+                          <span slot="title">我的消息</span>
+                      </el-menu-item>
                         <el-menu-item index="equity">
                             <i class="el-icon-wallet"></i>
                             <span slot="title">平台权益</span>
@@ -38,6 +42,8 @@
                     <personal v-if="currMenu === 'fadada'"></personal>
                     <business-card v-else-if="currMenu === 'business-card'"></business-card>
                     <seal v-else-if="currMenu === 'seal'"></seal>
+                    <notice v-else-if="currMenu === 'notice'" @done="onDone"></notice>
+                    <setting v-else-if="currMenu === 'setting'" @done="onDone"></setting>
                     <equity v-else-if="currMenu === 'equity'" @done="onDone"></equity>
                     <payment v-else-if="currMenu === 'payment'" @done="onDone"></payment>
                     <grade v-else-if="currMenu === 'grade'" @done="onDone"></grade>
@@ -57,13 +63,15 @@
 import Personal from './components/personal'
 import BusinessCard from './components/business-card'
 import Seal from './components/seal'
+import Notice from './components/notice'
+import Setting from './components/setting'
 import Equity from './components/equity'
 import Grade from './components/grade'
 import Added from './components/added'
 import Payment from './components/payment'
 
 export default {
-    components: {Personal, BusinessCard, Seal, Equity, Grade, Added, Payment},
+    components: {Personal, BusinessCard, Seal, Notice, Equity,Setting, Grade, Added, Payment},
     data() {
         return {
             currMenu: 'fadada',
diff --git a/pages/yellowPage/info.vue b/pages/yellowPage/info.vue
index dee35fe..b358a80 100644
--- a/pages/yellowPage/info.vue
+++ b/pages/yellowPage/info.vue
@@ -285,4 +285,4 @@ export default {
         border-top: 8px solid #F4F4F4;
     }
 }
-</style>
\ No newline at end of file
+</style>