|
@@ -0,0 +1,368 @@
|
|
|
+<template>
|
|
|
+ <van-popup
|
|
|
+ v-model="popupShow"
|
|
|
+ position="bottom"
|
|
|
+ bgColor="transparent"
|
|
|
+ @close="close"
|
|
|
+ >
|
|
|
+ <div class="popupBox">
|
|
|
+ <div class="popupBox_title">
|
|
|
+ <img
|
|
|
+ src="https://wrj-songlanyn.oss-cn-beijing.aliyuncs.com/static/img/icon_2.png"
|
|
|
+ mode=""
|
|
|
+ />
|
|
|
+ <div>
|
|
|
+ <div class="popupBox_title_l">限时特惠</div>
|
|
|
+ <div class="popupBox_title_r">
|
|
|
+ <text class="popupBox_title_r_l" v-if="details.originalPriceShow"
|
|
|
+ >¥{{ details.originalPrice }}</text
|
|
|
+ >
|
|
|
+ <text class="popupBox_title_r_r">¥{{ details.sellingPrice }}</text>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="popupBox_list">
|
|
|
+ <div class="popupBox_border mb18">
|
|
|
+ <div class="list_info">
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ details.coverImage || details.businessImage || shopDetails.logo
|
|
|
+ "
|
|
|
+ mode=""
|
|
|
+ />
|
|
|
+ <div class="list_info_r">
|
|
|
+ <div class="list_info_r_title">{{ details.title }}</div>
|
|
|
+ <div class="list_info_r_hint">{{ details.costIncluded }}</div>
|
|
|
+ <div class="list_info_r_num">已售 {{ details.salesVolume }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="scroll">
|
|
|
+ <div class="scroll_box">
|
|
|
+ <div class="popupBox_border">
|
|
|
+ <div class="list_item">
|
|
|
+ <div class="list_item_title">购买须知</div>
|
|
|
+ <div
|
|
|
+ class="list_item_1"
|
|
|
+ v-for="(v, i) in details.businessProductNotesList"
|
|
|
+ :key="i"
|
|
|
+ >
|
|
|
+ <div class="list_item_1_title">{{ v.noteTitle }}</div>
|
|
|
+ <div class="list_item_1_text">{{ v.noteContent }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="popupBox_border">
|
|
|
+ <div class="list_item">
|
|
|
+ <div class="list_item_title">使用说明</div>
|
|
|
+ <div class="list_item_1">
|
|
|
+ <div class="list_item_1_text1">
|
|
|
+ <text>可飞时间:</text>
|
|
|
+ <div>{{ details.enteringParkTime }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="list_item_1_text1">
|
|
|
+ <text>无人机地址:</text>
|
|
|
+ <div style="margin-top: 5rpx">
|
|
|
+ {{ details.enteringParkAddress }}
|
|
|
+ </div>
|
|
|
+ <img
|
|
|
+ class="text1_navigation"
|
|
|
+ src="@/assets/navigation.png"
|
|
|
+ mode=""
|
|
|
+ @click.stop="openLocation"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="popupBox_border">
|
|
|
+ <div class="list_item">
|
|
|
+ <div class="list_item_title">费用说明</div>
|
|
|
+ <div class="list_item_1">
|
|
|
+ <div class="list_item_1_text1">
|
|
|
+ <text>费用包含:</text>
|
|
|
+ <div>{{ details.costIncluded }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="list_item_1_text1" v-if="details.costDescription">
|
|
|
+ <text>详细说明:</text>
|
|
|
+ <div>{{ details.costDescription }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import wx from "weixin-js-sdk";
|
|
|
+import { Toast } from "vant";
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ popupShow: false,
|
|
|
+ details: {
|
|
|
+ sellingPrice: 0.0,
|
|
|
+ },
|
|
|
+ shopDetails: {},
|
|
|
+ tiems: 3,
|
|
|
+ collectObj: {},
|
|
|
+ collectStatus: false,
|
|
|
+ timer: null,
|
|
|
+ timer1: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ type: {
|
|
|
+ type: String | Number,
|
|
|
+ default: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ open(val, shopDetails) {
|
|
|
+ this.details = val;
|
|
|
+ if (!this.details.businessProductNotesList) {
|
|
|
+ this.details.businessProductNotesList = this.details.productNotesList;
|
|
|
+ }
|
|
|
+ console.log(this.details, this.details.sellingPrice, shopDetails);
|
|
|
+ // this.shopDetails = shopDetails;
|
|
|
+ this.popupShow = true;
|
|
|
+ },
|
|
|
+ dealPrice(val, index) {
|
|
|
+ let value = val + "";
|
|
|
+ let arr = value.split(".");
|
|
|
+ return arr[index];
|
|
|
+ },
|
|
|
+ closeFun() {
|
|
|
+ if (this.tiems <= 0) {
|
|
|
+ this.close();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.popupShow = false;
|
|
|
+ this.$emit("close");
|
|
|
+ },
|
|
|
+ openLocation() {
|
|
|
+ // console.log(this.details);
|
|
|
+ // Toast("打开");
|
|
|
+ if (!this.details.latitude && !this.details.longitude) {
|
|
|
+ Toast("缺少经纬度");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let url = `/pages/map/map?latitude=${
|
|
|
+ this.details.latitude
|
|
|
+ }&longitude=${this.details.longitude}&name=${encodeURIComponent(
|
|
|
+ this.details.enteringParkAddress
|
|
|
+ )}`;
|
|
|
+ wx.miniProgram.redirectTo({
|
|
|
+ url,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+::v-deep.van-popup {
|
|
|
+ overflow-y: inherit !important;
|
|
|
+ background-color: rgba(0, 0, 0, 0) !important;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.mb18 {
|
|
|
+ margin-bottom: 18rpx !important;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox .popupBox_title {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: -37px;
|
|
|
+ /* top: 0; */
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox .popupBox_title > img {
|
|
|
+ max-width: 100%;
|
|
|
+ width: 360px;
|
|
|
+ height: 102px;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox .popupBox_title > div {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 37px 0 0 15px;
|
|
|
+ position: absolute;
|
|
|
+ top: -5px;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox .popupBox_title > div .popupBox_title_l {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 22px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-family: FZCuYuan-M03;
|
|
|
+ margin-right: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox .popupBox_title > div .popupBox_title_r .popupBox_title_r_l {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #ffffff;
|
|
|
+ text-decoration: line-through;
|
|
|
+ opacity: 0.74;
|
|
|
+}
|
|
|
+.popupBox .popupBox_title > div .popupBox_title_r .popupBox_title_r_r {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #ffffff;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox .popupBox_list {
|
|
|
+ padding: 30px 0 0;
|
|
|
+ background: linear-gradient(180deg, #c90700 0%, #ffe8e6 58%, #ffffff 32%);
|
|
|
+ border-radius: 20px 20px 0 0;
|
|
|
+ background-size: 100% 1500px;
|
|
|
+ background-position-y: -150px;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox .popupBox_list .scroll {
|
|
|
+ max-height: 60vh;
|
|
|
+ overflow-y: scroll;
|
|
|
+ position: relative;
|
|
|
+ z-index: 20;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox .popupBox_list .popupBox_border {
|
|
|
+ width: 351px;
|
|
|
+ margin: 5px auto 0;
|
|
|
+ background: linear-gradient(180deg, #fb2715, #ff0901);
|
|
|
+ border-radius: 15px;
|
|
|
+ background-size: 351px 113px;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ padding: 3px;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 5px;
|
|
|
+ z-index: 11;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox .popupBox_list .list_info {
|
|
|
+ display: flex;
|
|
|
+ background: #fff5f3;
|
|
|
+ padding: 10px 15px;
|
|
|
+ border-radius: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox .popupBox_list .list_item {
|
|
|
+ background: #fff5f3;
|
|
|
+ padding: 10px 15px;
|
|
|
+ border-radius: 15px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox .popupBox_list .scroll .scroll_box {
|
|
|
+ padding-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox .popupBox_list .list_info img {
|
|
|
+ width: 77px;
|
|
|
+ height: 77px;
|
|
|
+ background: rgba(0, 0, 0, 0);
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-right: 12px;
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+.popupBox .popupBox_list .list_info .list_info_r .list_info_r_title {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #242424;
|
|
|
+ font-family: FZCuYuan-M03;
|
|
|
+ padding-top: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox .popupBox_list .list_info .list_info_r .list_info_r_hint {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #1a1a1a;
|
|
|
+ margin-top: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox .popupBox_list .list_info .list_info_r .list_info_r_num {
|
|
|
+ font-size: 11px;
|
|
|
+ color: #666666;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.popupBox .popupBox_list .list_item > img {
|
|
|
+ width: 27px;
|
|
|
+ height: 38px;
|
|
|
+ position: absolute;
|
|
|
+ top: -4px;
|
|
|
+ left: -8px;
|
|
|
+ z-index: 100;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox .popupBox_list .list_item .list_item_title {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #fa353b;
|
|
|
+ font-family: FZCuYuan-M03;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox
|
|
|
+ .popupBox_list
|
|
|
+ .list_item
|
|
|
+ .list_item_1:first-child
|
|
|
+ .list_item_1_title {
|
|
|
+ margin-top: 0 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox .popupBox_list .list_item .list_item_1 .list_item_1_title {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #242424;
|
|
|
+ font-family: FZCuYuan-M03;
|
|
|
+ margin: 5px 0 5px;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+.popupBox .popupBox_list .list_item .list_item_1 .list_item_1_text {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox .popupBox_list .list_item .list_item_1 .list_item_1_text text {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #1a1a1a;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox .popupBox_list .list_item .list_item_1 .list_item_1_text1 {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 18px;
|
|
|
+ display: flex;
|
|
|
+ /* align-items: center; */
|
|
|
+ padding: 2px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox .popupBox_list .list_item .list_item_1 .list_item_1_text1 text {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #1a1a1a;
|
|
|
+ display: inline-block;
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+.popupBox
|
|
|
+ .popupBox_list
|
|
|
+ .list_item
|
|
|
+ .list_item_1
|
|
|
+ .list_item_1_text1
|
|
|
+ .text1_navigation {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+</style>
|