瀏覽代碼

长图文

xiaohaizhao 1 年之前
父節點
當前提交
05e13f098d

+ 160 - 0
packageA/advertising/modules/bottom1.vue

@@ -0,0 +1,160 @@
+<template>
+    <view class="box">
+        <image style="width: 100%;"
+            src="https://yossys06593.obs.cn-east-3.myhuaweicloud.com:443/202404111712812810046B1fbafed9.png" mode="widthFix"
+            lazy-load="true" />
+        <view class="function">
+            <view class="cn-title">预约免费设计</view>
+            <view class="en-title">Appointment Free Design</view>
+
+            <view class="form">
+                <view class="text">
+                    <view class="bg" />
+                    <view class="iconfont icon-renyuan-hui" />
+                    <input class="input" type="text" v-model="name" placeholder="请输入您的姓名">
+                </view>
+
+                <view class="text">
+                    <view class="bg" />
+                    <view class="iconfont icon-dianhua-hui" />
+                    <input class="input" type="number" v-model="phoneNumber" placeholder="请输入您的电话号码">
+                </view>
+
+                <view class="text textarea-box">
+                    <view class="bg" />
+                    <view class="iconfont icon-dizhi-hui1" />
+                    <textarea class="textarea" v-model="address" placeholder="请输入您的具体地址(省、市、区/县)" />
+                </view>
+
+                <view class="but" hover-class="navigator-hover" @click="submit">
+                    立即免费预约 >
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "bottom1",
+    data() {
+        return {
+            name: "",
+            phoneNumber: "",
+            address: ""
+        }
+    },
+    methods: {
+        submit(){
+            console.log(this.name)
+            console.log(this.phoneNumber)
+            console.log(this.address)
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.box {
+    position: relative;
+    width: 100vw;
+
+    .function {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+
+        .cn-title {
+            width: 100%;
+            text-align: center;
+            line-height: 22px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            font-size: 16px;
+            color: #FFFFFF;
+            margin-top: 30px;
+        }
+
+        .en-title {
+            width: 100%;
+            text-align: center;
+            font-family: PingFang SC, PingFang SC;
+            font-size: 10px;
+            color: #FFFFFF;
+        }
+
+        .form {
+            width: 260px;
+            margin: 0 auto;
+            margin-top: 20px;
+
+            .text {
+                position: relative;
+                display: flex;
+                align-items: center;
+                width: 260px;
+                height: 45px;
+                border: 1px solid rgba(255, 255, 255, 0.4);
+                border-radius: 2px;
+                overflow: hidden;
+                padding: 0 10px;
+                box-sizing: border-box;
+                margin-bottom: 10px;
+
+                .input {
+                    color: #fff;
+                    flex: 1;
+                }
+
+                .textarea {
+                    color: #fff;
+                    flex: 1;
+                    height: 62px;
+                }
+
+                .iconfont {
+                    color: #fff;
+                    font-size: 20px;
+                    margin-right: 10px;
+                }
+
+            }
+
+            .textarea-box {
+                padding-top: 13px;
+                height: 90px;
+                align-items: flex-start;
+            }
+
+            .text::after {
+                content: "";
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: #fff;
+                opacity: .2;
+            }
+
+            .but {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 260px;
+                height: 45px;
+                background: #C30D23;
+                border-radius: 2px;
+
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 500;
+                font-size: 14px;
+                color: #FFFFFF;
+            }
+        }
+    }
+}
+</style>

+ 68 - 0
packageA/advertising/modules/page.vue

@@ -0,0 +1,68 @@
+<template>
+    <view>
+        <image v-for="(item, index) in detail.attinfos_pic" :key="item.attachmentid" class="image"
+            :src="item.attinfos[0].url" mode="widthFix" hover-class="navigator-hover" lazy-load="true"
+            @click="onClick(item, index)" />
+   
+        <bottom1 />
+    </view>
+</template>
+
+<script>
+import { viewImage } from "../../../utils/settleFiles";
+import bottom1 from "./bottom1.vue";
+export default {
+    name: "advertisingPage",
+    components: { bottom1 },
+    data() {
+        return {
+            detail: {},
+        }
+    },
+    methods: {
+        getDetail(id) {
+            return new Promise((resolve, reject) => {
+                this.$Http.basic({
+                    "id": "20240408131902",
+                    "content": {
+                        "sat_sharematerialid": id
+                    }
+                }).then(res => {
+                    console.log('获取长图文详情', res)
+                    if (this.cutoff(res.msg)) return;
+                    this.detail = res.data;
+                    resolve(res.data)
+                    uni.setNavigationBarTitle({
+                        title: res.data.title,
+                    })
+                })
+            })
+
+        },
+        onClick(item, index) {
+            console.log(item, index)
+            if (item.jumpurl) {
+                uni.navigateTo({
+                    url: item.jumpurl,
+                    fail: (fail) => {
+                        viewImage(item.attinfos[0].url)
+                    },
+                })
+            } else {
+                viewImage(item.attinfos[0].url)
+            }
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.image {
+    width: 100vw;
+    margin-top: 10px;
+}
+
+.image:first-child {
+    margin-top: 0;
+}
+</style>

+ 48 - 0
packageA/advertising/shareable.vue

@@ -0,0 +1,48 @@
+<template>
+    <view>
+        <page ref="list" />
+        <view style="height: 30px;" />
+    </view>
+</template>
+
+<script>
+import page from "./modules/page.vue";
+export default {
+    components: { page },
+    data() {
+        return {
+            id: "",
+            detail: {}
+        }
+    },
+    onLoad(options) {
+        if (options.id) {
+            this.id = options.id;
+            setTimeout(() => {
+                this.$refs.list.getDetail(options.id).then(detail => {
+                    this.detail = detail;
+                })
+            }, 100)
+        }
+    },
+
+    methods: {
+        getSheraDate() {
+            let detail = this.detail
+            return {
+                title: detail.title, // 标题
+                path: "/packageA/advertising/shareable?id=" + detail.sat_sharematerialid, // 分享路径
+                imageUrl: this.detail.attinfos.find(v => v.usetype == "avatar").url || ""// 分享图
+            };
+        }
+    },
+    onShareAppMessage(res) {
+        return this.getSheraDate()
+    },
+    onShareTimeline() {
+        return this.getSheraDate()
+    }
+}
+</script>
+
+<style></style>

+ 30 - 0
packageA/advertising/unshareable.vue

@@ -0,0 +1,30 @@
+<template>
+    <view>
+        <page ref="list" />
+        <view style="height: 30px;" />
+    </view>
+</template>
+
+<script>
+import page from "./modules/page.vue";
+export default {
+    components: { page },
+    data() {
+        return {
+
+        }
+    },
+    onLoad(options) {
+        if (options.id) {
+            this.id = options.id;
+            setTimeout(() => {
+                this.$refs.list.getDetail(options.id).then(detail => {
+                    this.detail = detail;
+                })
+            }, 100)
+        }
+    }
+}
+</script>
+
+<style></style>

+ 4 - 0
pages.json

@@ -29,6 +29,10 @@
 			"path": "dailyYttendance/index"
 		}, {
 			"path": "dailyYttendance/makePoster"
+		}, {
+			"path": "advertising/shareable"
+		}, {
+			"path": "advertising/unshareable"
 		}]
 	}],
 	"globalStyle": {