fix:投放页面ui原型调整

src/views/Survey/views/Publish/Index.vue

@@ -2,36 +2,30 @@
   <div class="container">
     <layout />
     <div class="content">
-      <van-cell-group v-if="status === 1" inset style="padding-top: 15px">
+      <div v-if="status === 1" inset>
         <div>
-          <img
+          <img width="100%" :src="bg" alt="" />
-            width="100%"
-            src="https://files.axshare.com/gsc/DR6075/44/1a/03/441a03a8b1004755a7a392b311acf97f/images/%E6%8A%95%E6%94%BE/u14.jpg?pageId=2f9ba10c-92b8-4c9b-b40b-04e65a0b4333"
-            alt=""
-          />
         </div>
         <div class="qrcode">
           <img :src="publishInfo?.img_url" alt="" width="100px" height="100px" />
           <div class="tit">
             <div>{{ publishInfo?.download_url?.title || '' }}</div>
-            <div>扫码填写问卷</div>
+            <div style="font-size: 14px;font-weight: 600;">扫码填写问卷</div>
           </div>
         </div>
-        <div style="color: #7f7f7f">移动端仅做数据回收，问卷数据分析请前往PC端浏览</div>
+        <div class="tip">移动端仅做数据回收，问卷数据分析请前往PC端浏览</div>
         <div class="operation">
           <span v-for="(item, index) in operateList" :key="index" @click="operateBtn(item)">
-            <img width="30px" :src="item.icon" />
+            <img width="30px" :src="item.icon" alt="" />
             {{ item.title }}
           </span>
         </div>
-      </van-cell-group>
+      </div>
       <div v-if="status === 0 || status === 2" class="pulish-container">
         <img class="not-publish-icon" src="@/assets/img/publish/not_pulish.png" alt="" />
         <div class="text">点击"启用"按钮后，问卷才可以开始回收数据</div>
-        <van-button
+        <van-button type="primary" style="margin-top: 20px" class="publish-btn" color="#70b936"
-          type="primary" style="margin-top: 20px" class="publish-btn" color="#70b936"
+          @click="openPublishModal">
-          @click="openPublishModal"
-        >
           <template #icon>
             <i class="mobilefont icon-fabu3" style="margin-right: 6px"></i>
           </template>
@@ -52,6 +46,7 @@ import appBridge from '@/assets/js/appBridge';
 import { getQrcode, getSurveyInfo, publishSurvey } from '@/api/survey';
 import { canPlanetPublish } from '@/layouts/utils.js';
 // import configUrl from '../../../../config';
+import bg from '@/assets/img/publish/bg.png';
 import copyIcon from '@/assets/img/publish/copy_icon.png';
 import shareIcon from '@/assets/img/publish/share_icon.png';
 import downloadIcon from '@/assets/img/publish/download_icon.png';
@@ -60,15 +55,13 @@ const route = useRoute();
 const surveyTitle = route.meta.title as string;
 appBridge.setTitle(surveyTitle);
 const sn = route.query.sn;
-// `0`: 编辑中 `1`: 投放中 `2`: 已结束
+const status = ref<number>(0); // `0`: 编辑中 `1`: 投放中 `2`: 已结束
-const status = ref<number>(0);
 const publishType = ref(0);
 const operateList = reactive([
   {
     title: '复制链接',
     type: 'copyLink',
     icon: copyIcon
-    // icon: 'https://files.axshare.com/gsc/DR6075/44/1a/03/441a03a8b1004755a7a392b311acf97f/images/%E6%8A%95%E6%94%BE/u21.png?pageId=2f9ba10c-92b8-4c9b-b40b-04e65a0b4333'
   },
   {
     title: '转发到微信',
@@ -97,21 +90,21 @@ type OperateItem = (typeof operateList)[0];
 
 const operateBtn = (item: OperateItem) => {
   switch (item.type) {
-  case 'shareLink':
+    case 'shareLink':
-    shareLink();
+      shareLink();
-    break;
+      break;
-  case 'copyLink':
+    case 'copyLink':
-    copyLink();
+      copyLink();
-    break;
+      break;
-  case 'qrCode':
+    case 'qrCode':
-    downLoadImg();
+      downLoadImg();
-    break;
+      break;
-  default:
+    default:
-    break;
+      break;
   }
 };
 // 复制链接
-function copyLink() {
+function copyLink () {
   const input = document.createElement('input');
   input.value = publishInfo.value.url;
   document.body.appendChild(input);
@@ -121,22 +114,22 @@ function copyLink() {
   showToast('复制成功');
 }
 // 分享链接
-function shareLink() {
+function shareLink () {
   const params = {
     type: 'shareToWx',
     title: publishInfo.value.download_url.title,
     description: publishInfo.value.desc || '',
     thumbImageUrl: publishInfo.value.img_url,
     webpageUrl: publishInfo.value.url,
-    // 朋友圈1  微信好友0
+    scene: 0 // 朋友圈1  微信好友0
-    scene: 0
   };
-  // console.log('shareUrl', publishInfo.value.url);
+  console.log('shareUrl', publishInfo.value.url);
-  appBridge.shareToWeChat(params);
+  appBridge.shareToWeChat(params, () => {
+  });
 }
 
 // 下载二维码
-function downLoadImg() {
+function downLoadImg () {
   const { title, url } = publishInfo.value.download_url;
   if (utils.getSessionStorage('xToken')) {
     appBridge.save2Album(url, () => {
@@ -151,7 +144,7 @@ function downLoadImg() {
     document.body.removeChild(link);
   }
 }
-async function openPublishModal() {
+async function openPublishModal () {
   const res = await canPlanetPublish(route.query.sn as string, publishType.value);
   if (res) {
     await publishSurvey({
@@ -167,7 +160,7 @@ async function openPublishModal() {
   }
 }
 
-function getCode() {
+function getCode () {
   getQrcode(sn)
     .then((res) => {
       if (res.data) {
@@ -178,7 +171,7 @@ function getCode() {
       showFailToast(error.data?.message || error.message || '服务器错误');
     });
 }
-function fetchInfo() {
+function fetchInfo () {
   getSurveyInfo(sn)
     .then((res) => {
       status.value = Number(res.data.data.status);
@@ -192,8 +185,8 @@ watch(status, (val) => {
     getCode();
   }
 });
-onMounted(async() => {
+onMounted(async () => {
-  // status.value = 0;
+  // status.value = 1;
   // publishInfo.value.img_url
   //   = 'https://test-cxp-pubcos.yili.com/uat-yls//survey-api/publish/202503130938138261340.png';
   // publishInfo.value.url = `${configUrl.proxyDomain}/publish?sn=${sn && sn !== undefined ? sn : ''}`;
@@ -208,41 +201,49 @@ onMounted(async() => {
 <style scoped lang="scss">
 .container {
   height: 100vh;
-  background-color: #f5f5f5;
+  background: linear-gradient(to bottom, #70B937 5.33333rem, #F2F2F2 8rem);
 
   button {
     padding: 3px 20px;
     border: none;
-    background-color: #f2f2f2;
+    /* background-color: #f2f2f2; */
   }
 }
 
 .content {
-  margin: 10px 15px;
+  margin: 10px;
   padding-bottom: 30px;
-  border-radius: 3px;
+  border-radius: 8px;
   background: #fff;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
-}
 
-.qrcode {
+  .qrcode {
-  display: flex;
-  margin: 10px 0;
-
-  .tit {
     display: flex;
-    flex-direction: column;
+    margin: 10px 24px;
-    justify-content: center;
+
-    margin: 0 10px;
+    .tit {
-    line-height: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      margin: 0 10px;
+      line-height: 20px;
+    }
+  }
+
+  .tip {
+    margin: 18px 24px;
+    font-size: 12px;
+    color: #7f7f7f;
   }
 }
 
+
+
 .operation {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  margin: 25px 10px 0 0;
+  margin: 0 24px;
 
   span {
     display: flex;