You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1140 lines
40 KiB
1140 lines
40 KiB
<template>
|
|
<view>
|
|
<skeleton :loading="skeletonLoading" :row="12" :showAvatar="false" :showTitle="true">
|
|
<block v-if="isRight(goods_detail)">
|
|
<!-- 商品图片轮播 -->
|
|
<swiper :current="current" :autoplay="false" :interval="2500"
|
|
:indicator-dots="goods_detail.pictures.length > 1 ? true : false" :circular="true"
|
|
class="swiper-box" indicator-active-color="#1998FE">
|
|
<swiper-item v-for="(item, index) in goods_detail.pictures" :key="index">
|
|
<image mode="aspectFill" :src="item" style="width: 100%; height: 100%;" @click="lookImg(index)">
|
|
</image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<!-- 商品主要信息 -->
|
|
<view class="head-info">
|
|
<view class="lf-font-32 lf-color-333 lf-font-bold">{{ goods_detail.title }}</view>
|
|
<view class="lf-row-between lf-font-24 lf-m-t-30 lf-p-b-20">
|
|
<view class="lf-flex price">
|
|
<lf-price :price="goods_detail.price"></lf-price>
|
|
<view class="lf-m-l-20">¥{{ goods_detail.original_price }}</view>
|
|
<view v-if="goods_detail.cost">{{ goods_detail.cost }}折</view>
|
|
</view>
|
|
<view class="lf-font-24 lf-text-right">
|
|
<view class="lf-color-gray">已售 {{ goods_detail.sale }}</view>
|
|
<view class="lf-color-gray">库存 {{ goods_detail.stock }}</view>
|
|
<!-- <view class="lf-color-primary">{{ goods_detail.specs[0].stock_text }}</view> -->
|
|
</view>
|
|
</view>
|
|
<view class="label-box" v-if="goods_detail.coupon && goods_detail.coupon.length">
|
|
<view class="label-item" v-for="(item, index) in goods_detail.coupon" :key="index">
|
|
{{ item.tag }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="lf-row-between list-item lf-m-t-20" @click="changePop(goods_detail.product.type)">
|
|
<view class="lf-row-center">
|
|
<text class="lf-font-28 lf-color-gray">操作</text>
|
|
<text class="lf-text-vertical lf-m-l-40 lf-font-28 lf-color-black">套餐/类型</text>
|
|
</view>
|
|
<view>
|
|
<text class="lf-iconfont lf-icon-xiangyou lf-text-vertical"></text>
|
|
</view>
|
|
</view>
|
|
<view v-if="goods_detail.product.type == 0 && goods_detail.product.extends.field_0_departure_place && goods_detail.product.extends.field_0_destination">
|
|
<view class="lf-row-between list-item lf-m-t-20">
|
|
<view class="lf-row-center">
|
|
<text class="lf-font-28 lf-color-gray">出发地</text>
|
|
<text class="lf-text-vertical lf-m-l-40 lf-font-28 lf-color-black">{{goods_detail.product.extends.field_0_departure_place}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="lf-row-between list-item">
|
|
<view class="lf-row-center">
|
|
<text class="lf-font-28 lf-color-gray">目的地</text>
|
|
<text class="lf-text-vertical lf-m-l-40 lf-font-28 lf-color-black">{{goods_detail.product.extends.field_0_destination}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 景区类型 -->
|
|
<view v-if="goods_detail.product.extends && goods_detail.product && goods_detail.product.type == 2">
|
|
<view class="goods-detail"
|
|
v-if="goods_detail.product.extends.field_2_name && goods_detail.product.extends.field_2_address"
|
|
@click="openMap(goods_detail.product.extends.field_2_address,goods_detail.product.extends.field_2_latitude,goods_detail.product.extends.field_2_longitude)">
|
|
<view class="lf-font-32 lf-font-bold lf-m-b-20">{{goods_detail.product.extends.field_2_name}}
|
|
</view>
|
|
<view class="lf-row-between">
|
|
<view class="lf-line-2 lf-font-28 lf-color-333">
|
|
{{goods_detail.product.extends.field_2_address}}</view>
|
|
<view class="lf-flex-column lf-row-center">
|
|
<view class="lf-iconfont lf-icon-dizhi lf-color-blue"></view>
|
|
<view class="lf-font-24 lf-color-222 lf-m-t-10" v-if="$isRight(shop_distance)">距您{{shop_distance}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="goods-detail" v-if="goods_detail.product.extends.field_2_open_time">
|
|
<view class="lf-font-32 lf-font-bold lf-m-b-20">景区开放时间</view>
|
|
<view>
|
|
<u-table>
|
|
<u-tr v-for="(item,index) in goods_detail.product.extends.field_2_open_time"
|
|
:key="index">
|
|
<u-th>{{item.node}}</u-th>
|
|
<u-th>{{item.summer}}</u-th>
|
|
<u-th>{{item.winter}}</u-th>
|
|
</u-tr>
|
|
</u-table>
|
|
</view>
|
|
</view>
|
|
<view class="goods-detail" v-if="goods_detail.product.extends.field_2_project">
|
|
<view class="lf-font-32 lf-font-bold lf-m-b-20">包含项目</view>
|
|
<view class="lf-flex-column">
|
|
|
|
<view v-for="(item,index) in goods_detail.product.extends.field_2_project" :key="index"
|
|
class="lf-row-between child-tag">
|
|
<view class="lf-font-28 lf-color-black lf-flex-1">{{item.name}}</view>
|
|
<view class="lf-font-28 lf-color-black lf-flex-1" style="text-align: center;">
|
|
{{item.num}}</view>
|
|
<view class="lf-font-28 lf-color-black lf-flex-1" style="text-align: right;">
|
|
{{item.price}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<block v-if="$isRight(goods_detail.spec)">
|
|
<!-- 景区类型弹窗 -->
|
|
<u-calendar v-model="show" mode="date" zIndex="100000" :monthPrice="goods_detail.spec[type_index].list"
|
|
:min-date='goods_detail.spec[type_index].date_start'
|
|
:max-date="goods_detail.spec[type_index].date_end" @change="change" z-index="9999"></u-calendar>
|
|
<u-popup class="pop-self" v-model="scenic_spot" mode="bottom" :closeable="true" border-radius="20">
|
|
<view class="lf-p-32">
|
|
<view class="price lf-flex">
|
|
<lf-price :price="choose_date_price*buy_num || goods_detail.spec[type_index].price*buy_num"></lf-price>
|
|
<view class="pop-price lf-m-l-20 lf-font-24">
|
|
¥{{ choose_date_orangilprice*buy_num || goods_detail.spec[type_index].original_price*buy_num}}</view>
|
|
</view>
|
|
<view class="lf-font-24 lf-m-t-20 lf-color-555">
|
|
使用时间：{{ go_date }}
|
|
</view>
|
|
<view style="margin-top: 60rpx;">
|
|
<text class="lf-font-32 lf-font-bold" style="color: #131315;">套餐类型</text>
|
|
<view class="lf-m-t-30 choose-father">
|
|
<view class="choose-span" :class="type_index==index?'choose-active':''"
|
|
v-for="(item,index) of goods_detail.spec" :key="index" @click="chooseType(index)">
|
|
{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="lf-m-t-30">
|
|
<text class="lf-font-32 lf-font-bold" style="color: #131315;">使用时间</text>
|
|
<view class="lf-row-between list-item lf-m-t-20" style="padding: 0!important;">
|
|
<view class="lf-row-center">
|
|
<text class="lf-font-28 lf-color-gray" @click="show = true">使用时间</text>
|
|
</view>
|
|
<view class="lf-flex">
|
|
<!-- <picker mode="date" :end="goods_detail.spec[type_index].date_end" :start="goods_detail.spec[type_index].date_start" :value="go_date" @change="goChange">
|
|
<view class="lf-color-333 lf-text-right lf-font-28" style="width: 400rpx;">{{ go_date }}</view>
|
|
</picker> -->
|
|
<text @click="show = true">{{go_date}}</text>
|
|
<text class="lf-iconfont lf-icon-xiangyou lf-text-vertical lf-m-l-10"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="lf-m-t-30 lf-row-between">
|
|
<view class="lf-font-28 lf-color-gray">数量</view>
|
|
<view>
|
|
<u-number-box :min="1" v-model="buy_num" @change="valChange"></u-number-box>
|
|
</view>
|
|
</view>
|
|
<view style="margin-top: 60rpx;">
|
|
<button class="choose_btn" @click="toAddOrder()">立即购买</button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</block>
|
|
|
|
<!-- 餐厅类型 -->
|
|
<view v-if="goods_detail.product.extends && goods_detail.product && goods_detail.product.type == 3">
|
|
<view class="goods-detail"
|
|
@click="openMap(goods_detail.product.extends.field_3_address,goods_detail.product.extends.field_3_latitude,goods_detail.product.extends.field_3_longitude)">
|
|
<view class="lf-font-32 lf-font-bold lf-m-b-20">{{goods_detail.product.extends.field_3_name}}
|
|
</view>
|
|
<view class="lf-row-between">
|
|
<view class="lf-line-2 lf-font-28 lf-color-333">
|
|
{{goods_detail.product.extends.field_3_address}}</view>
|
|
<view class="lf-flex-column lf-row-center">
|
|
<view class="lf-iconfont lf-icon-dizhi lf-color-blue"></view>
|
|
<view class="lf-font-24 lf-color-222 lf-m-t-10" v-if="$isRight(shop_distance)">距您{{shop_distance}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="goods-detail">
|
|
<view class="lf-font-32 lf-font-bold lf-m-b-20">开放时间</view>
|
|
<view>
|
|
<u-table>
|
|
<u-tr v-for="(item,index) in goods_detail.product.extends.field_3_open_time"
|
|
:key="index">
|
|
<u-th>{{item.section}}</u-th>
|
|
<u-th>{{item.time}}</u-th>
|
|
<u-th>{{item.week}}</u-th>
|
|
</u-tr>
|
|
</u-table>
|
|
</view>
|
|
</view>
|
|
<view class="goods-detail">
|
|
<view class="lf-font-32 lf-font-bold lf-m-b-20">包含套餐</view>
|
|
<view class="lf-flex-column">
|
|
<view class="lf-row-between child-tag"
|
|
v-for="(item,index) in goods_detail.product.extends.field_3_package" :key="index">
|
|
<view class="lf-color-333 lf-font-28">{{item.name}} {{item.num}}</view>
|
|
<view class="lf-color-333 lf-font-28">{{item.price}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 酒店类型 -->
|
|
<view v-if="goods_detail.product && goods_detail.product.extends && goods_detail.product.type == 1">
|
|
<view class="goods-detail" v-if="goods_detail.product.extends.field_1_name"
|
|
@click="openMap(goods_detail.product.extends.field_1_address,goods_detail.product.extends.field_1_latitude,goods_detail.product.extends.field_1_longitude)">
|
|
<view class="lf-font-32 lf-font-bold lf-m-b-20"
|
|
v-if="goods_detail.product.extends.field_1_name">
|
|
{{goods_detail.product.extends.field_1_name}}</view>
|
|
<view class="lf-row-between" v-if="goods_detail.product.extends.field_1_address">
|
|
<view class="lf-line-2 lf-font-28 lf-color-333">
|
|
{{goods_detail.product.extends.field_1_address}}</view>
|
|
<view class="lf-flex-column lf-row-center">
|
|
<view class="lf-iconfont lf-icon-dizhi lf-color-blue"></view>
|
|
<view class="lf-font-24 lf-color-222 lf-m-t-10" v-if="$isRight(shop_distance)">距您{{shop_distance}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <zwyCalendar class="lf-m-t-20" type="sign" :startTime="'2021-10-01'" :endTime="'2021-11-01'"/> -->
|
|
<view class="goods-detail" style="padding-bottom: 0;">
|
|
<view class="lf-font-32 lf-font-bold lf-m-b-20">酒店设施</view>
|
|
<view>
|
|
<view class="label-box1">
|
|
<view class="label-item"
|
|
v-for="(item,index) in goods_detail.product.extends.field_1_tags" :key="index" v-if="item.tag">
|
|
{{item.tag}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<block v-if="$isRight(goods_detail.spec)">
|
|
<!-- 酒店类型弹窗 -->
|
|
<u-calendar v-model="hotel_show_range" mode="range" zIndex="100000" :monthPrice="goods_detail.spec[type_index].list"
|
|
:min-date='goods_detail.spec[type_index].date_start'
|
|
:max-date="goods_detail.spec[type_index].date_end" @change="changeRange()" z-index="9999"></u-calendar>
|
|
<u-picker v-model="hotel_show_single" @confirm="changeArrive()" mode="time" :params="params" zIndex="100000"></u-picker>
|
|
<u-popup v-model="hotel" mode="bottom" :closeable="true" border-radius="20">
|
|
<view class="lf-p-32">
|
|
<view class="price lf-flex">
|
|
<lf-price :price="total_hotel_price*buy_num || goods_detail.spec[type_index].price*buy_num"></lf-price>
|
|
<view class="pop-price lf-m-l-20 lf-font-24">
|
|
¥{{ total_hotel_orginalprice*buy_num || goods_detail.spec[type_index].original_price*buy_num }}</view>
|
|
</view>
|
|
<view class="lf-font-24 lf-m-t-20 lf-color-555">
|
|
酒店住房日期：{{live_date}}~{{leave_date}} <text class="lf-m-l-20" v-if="totalLive">共{{totalLive}}晚</text>
|
|
</view>
|
|
<view style="margin-top: 60rpx;">
|
|
<text class="lf-font-32 lf-font-bold" style="color: #131315;">套餐类型</text>
|
|
<view class="lf-m-t-30 choose-father">
|
|
<view class="choose-span" :class="type_index==index?'choose-active':''"
|
|
v-for="(item,index) of goods_detail.spec" :key="index"
|
|
@click="chooseTypehotel(index)">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="lf-m-t-30">
|
|
<view class="lf-row-between list-item lf-m-t-20" style="padding: 0!important;">
|
|
<view class="lf-row-center">
|
|
<text class="lf-font-28 lf-color-gray" @click="hotel_show_range = true">住店时间</text>
|
|
</view>
|
|
<view class="lf-flex">
|
|
<text @click="hotel_show_range = true">{{live_date}}~{{leave_date}}</text>
|
|
<text class="lf-iconfont lf-icon-xiangyou lf-text-vertical lf-m-l-10"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="lf-m-t-30">
|
|
<view class="lf-row-between list-item lf-m-t-20" style="padding: 0!important;">
|
|
<view class="lf-row-center">
|
|
<text class="lf-font-28 lf-color-gray" @click="hotel_show_single = true">到店时间</text>
|
|
</view>
|
|
<view class="lf-flex">
|
|
<text @click="hotel_show_single = true">{{arrive_date}}</text>
|
|
<text class="lf-iconfont lf-icon-xiangyou lf-text-vertical lf-m-l-10"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="lf-m-t-30 lf-row-between">
|
|
<view class="lf-font-28 lf-color-gray">数量</view>
|
|
<view>
|
|
<u-number-box :min="1" v-model="buy_num" @change="valChange"></u-number-box>
|
|
</view>
|
|
</view>
|
|
<view style="margin-top: 60rpx;">
|
|
<button class="choose_btn" @click="toAddOrder()">立即购买</button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</block>
|
|
|
|
<!-- 旅游路线类型 -->
|
|
<view
|
|
v-if="goods_detail.product && goods_detail.product.type == 0 && goods_detail.product.extends.field_0_project">
|
|
<view class="goods-detail">
|
|
<view class="lf-font-32 lf-font-bold lf-m-b-20">包含项目</view>
|
|
<view class="lf-flex-column">
|
|
|
|
<view class="lf-row-between child-tag"
|
|
v-for="(item,index) in goods_detail.product.extends.field_0_project" :key="index">
|
|
<view class="lf-font-28 lf-color-black lf-flex-1">{{item.name}}</view>
|
|
<view class="lf-font-28 lf-color-black lf-flex-1" style="text-align: center;">
|
|
{{item.num}}</view>
|
|
<view class="lf-font-28 lf-color-black lf-flex-1" style="text-align: right;">
|
|
{{item.price}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="goods-detail"
|
|
v-if="goods_detail.product.extends.field_0_date.end && goods_detail.product.extends.field_0_date.start">
|
|
<view class="lf-row-between">
|
|
<view class="lf-font-32 lf-font-bold">
|
|
行程时间
|
|
</view>
|
|
<view class="lf-font-28 lf-color-black">
|
|
<view>
|
|
{{goods_detail.product.extends.field_0_date.start}}~{{goods_detail.product.extends.field_0_date.end}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <zwyCalendar class="lf-m-t-20" type="sign" :startTime="'2021-10-01'" :endTime="'2021-11-01'"/> -->
|
|
</view>
|
|
</view>
|
|
|
|
<block v-if="$isRight(goods_detail.spec)">
|
|
<!-- 旅游路线类型弹窗 -->
|
|
<u-popup v-model="travel_route" mode="bottom" :closeable="true" border-radius="20">
|
|
<view class="lf-p-32">
|
|
<view class="price lf-flex">
|
|
<lf-price :price="choose_date_price*buy_num || goods_detail.spec[type_index].price*buy_num"></lf-price>
|
|
<view class="pop-price lf-m-l-20 lf-font-24">
|
|
¥{{ choose_date_orangilprice*buy_num || goods_detail.spec[type_index].original_price*buy_num}}</view>
|
|
</view>
|
|
<view class="lf-font-24 lf-m-t-20 lf-color-555">
|
|
套餐类型：{{goods_detail.spec[type_index].name}}
|
|
</view>
|
|
<view style="margin-top: 60rpx;">
|
|
<text class="lf-font-32 lf-font-bold" style="color: #131315;">套餐类型</text>
|
|
<view class="lf-m-t-30 choose-father">
|
|
<view class="choose-span" :class="type_index==index?'choose-active':''"
|
|
v-for="(item,index) of goods_detail.spec" @click="chooseType(index)" :key="index">
|
|
{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="lf-m-t-30">
|
|
<view class="lf-row-between list-item lf-m-t-20" style="padding: 0!important;">
|
|
<view class="lf-row-center">
|
|
<text class="lf-font-28 lf-color-gray" @click="show = true">使用时间</text>
|
|
</view>
|
|
<view class="lf-flex">
|
|
<!-- <picker mode="date" :end="goods_detail.spec[type_index].date_end" :start="goods_detail.spec[type_index].date_start" :value="go_date" @change="goChange">
|
|
<view class="lf-color-333 lf-text-right lf-font-28" style="width: 400rpx;">{{ go_date }}</view>
|
|
</picker> -->
|
|
<text @click="show = true">{{go_date}}</text>
|
|
<text class="lf-iconfont lf-icon-xiangyou lf-text-vertical lf-m-l-10"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="lf-m-t-30 lf-row-between">
|
|
<view class="lf-font-28 lf-color-gray">数量</view>
|
|
<view>
|
|
<u-number-box :min="1" v-model="buy_num" @change="valChange"></u-number-box>
|
|
</view>
|
|
</view>
|
|
<view style="margin-top: 60rpx;">
|
|
<button class="choose_btn" @click="toAddOrder()">立即购买</button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<!-- 车队 -->
|
|
<u-popup v-model="car" mode="bottom" :closeable="true" border-radius="20">
|
|
<view class="lf-p-32">
|
|
<view class="price lf-flex">
|
|
<lf-price :price="choose_date_price*buy_num || goods_detail.spec[type_index].price*buy_num"></lf-price>
|
|
<view class="pop-price lf-m-l-20 lf-font-24">
|
|
¥{{ choose_date_orangilprice*buy_num || goods_detail.spec[type_index].original_price*buy_num}}</view>
|
|
</view>
|
|
<view class="lf-font-24 lf-m-t-20 lf-color-555">
|
|
套餐类型：{{goods_detail.spec[type_index].name}}
|
|
</view>
|
|
<view style="margin-top: 60rpx;">
|
|
<text class="lf-font-32 lf-font-bold" style="color: #131315;">套餐类型</text>
|
|
<view class="lf-m-t-30 choose-father">
|
|
<view class="choose-span" :class="type_index==index?'choose-active':''"
|
|
v-for="(item,index) of goods_detail.spec" @click="chooseType(index)" :key="index">
|
|
{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="lf-m-t-30">
|
|
<view class="lf-row-between list-item lf-m-t-20" style="padding: 0!important;">
|
|
<view class="lf-row-center">
|
|
<text class="lf-font-28 lf-color-gray" @click="show = true">使用时间</text>
|
|
</view>
|
|
<view class="lf-flex">
|
|
<!-- <picker mode="date" :end="goods_detail.spec[type_index].date_end" :start="goods_detail.spec[type_index].date_start" :value="go_date" @change="goChange">
|
|
<view class="lf-color-333 lf-text-right lf-font-28" style="width: 400rpx;">{{ go_date }}</view>
|
|
</picker> -->
|
|
<text @click="show = true">{{go_date}}</text>
|
|
<text class="lf-iconfont lf-icon-xiangyou lf-text-vertical lf-m-l-10"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="lf-m-t-30 lf-row-between">
|
|
<view class="lf-font-28 lf-color-gray">数量</view>
|
|
<view>
|
|
<u-number-box :min="1" v-model="buy_num" @change="valChange"></u-number-box>
|
|
</view>
|
|
</view>
|
|
<view style="margin-top: 60rpx;">
|
|
<button class="choose_btn" @click="toAddOrder()">立即购买</button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<!-- 单项 -->
|
|
<u-popup v-model="single" mode="bottom" :closeable="true" border-radius="20">
|
|
<view class="lf-p-32">
|
|
<view class="price lf-flex">
|
|
<lf-price :price="choose_date_price*buy_num || goods_detail.spec[type_index].price*buy_num"></lf-price>
|
|
<view class="pop-price lf-m-l-20 lf-font-24">
|
|
¥{{ choose_date_orangilprice*buy_num || goods_detail.spec[type_index].original_price*buy_num}}</view>
|
|
</view>
|
|
<view class="lf-font-24 lf-m-t-20 lf-color-555">
|
|
套餐类型：{{goods_detail.spec[type_index].name}}
|
|
</view>
|
|
<view style="margin-top: 60rpx;">
|
|
<text class="lf-font-32 lf-font-bold" style="color: #131315;">套餐类型</text>
|
|
<view class="lf-m-t-30 choose-father">
|
|
<view class="choose-span" :class="type_index==index?'choose-active':''"
|
|
v-for="(item,index) of goods_detail.spec" @click="chooseType(index)" :key="index">
|
|
{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="lf-m-t-30">
|
|
<view class="lf-row-between">
|
|
<text class="lf-font-32 lf-font-bold" style="color: #131315;">出行日期</text>
|
|
</view>
|
|
<view class="lf-row-between list-item lf-m-t-20" style="padding: 0!important;">
|
|
<view class="lf-row-center">
|
|
<text class="lf-font-28 lf-color-gray" @click="show = true">使用时间</text>
|
|
</view>
|
|
<view class="lf-flex">
|
|
<!-- <picker mode="date" :end="goods_detail.spec[type_index].date_end" :start="goods_detail.spec[type_index].date_start" :value="go_date" @change="goChange">
|
|
<view class="lf-color-333 lf-text-right lf-font-28" style="width: 400rpx;">{{ go_date }}</view>
|
|
</picker> -->
|
|
<text @click="show = true">{{go_date}}</text>
|
|
<text class="lf-iconfont lf-icon-xiangyou lf-text-vertical lf-m-l-10"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="lf-m-t-30 lf-row-between">
|
|
<view class="lf-font-28 lf-color-gray">数量</view>
|
|
<view>
|
|
<u-number-box :min="1" v-model="buy_num" @change="valChange"></u-number-box>
|
|
</view>
|
|
</view>
|
|
<view style="margin-top: 60rpx;">
|
|
<button class="choose_btn" @click="toAddOrder()">立即购买</button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</block>
|
|
|
|
<!-- 公共部分 -->
|
|
<!-- 商品详情 -->
|
|
<view class="goods-detail" v-if="goods_detail.know">
|
|
<view class="lf-font-32 lf-font-bold lf-m-b-20">购买须知</view>
|
|
<rich-text :nodes="formatRichText(goods_detail.know)"></rich-text>
|
|
</view>
|
|
<view class="goods-detail" v-if="goods_detail.content">
|
|
<view class="lf-font-32 lf-font-bold lf-m-b-20">商品详情</view>
|
|
<rich-text :nodes="formatRichText(goods_detail.content)"></rich-text>
|
|
</view>
|
|
<!-- 修饰专用 -->
|
|
<view class="extra"></view>
|
|
<!-- 吸底操作按钮 -->
|
|
<view class="lf-row-between fixed-bottom">
|
|
<view class="lf-flex lf-p-t-10 lf-p-b-10">
|
|
<view class="lf-flex-column lf-row-center icon-item"
|
|
@click="$url('/pages/index/index', {type: 'switch'})">
|
|
<image class="icon-img" src="../../static/tabbar/home1.png"></image>
|
|
<view class="lf-m-t-1">首页</view>
|
|
</view>
|
|
<button class="lf-flex-column lf-row-center icon-item" open-type="contact">
|
|
<image class="icon-img" src="../../static/center/service.png"></image>
|
|
<view class="lf-m-t-1">客服</view>
|
|
</button>
|
|
<view class="lf-flex-column lf-row-center icon-item" @click="switchCollect">
|
|
<image class="icon-img" src="../../static/center/collect-active.png" v-if="is_collect">
|
|
</image>
|
|
<image class="icon-img" src="../../static/center/collect.png" v-else></image>
|
|
<view class="lf-m-t-1">{{ is_collect ? '已收藏' : '收藏' }}</view>
|
|
</view>
|
|
<button class="lf-flex-column lf-row-center icon-item" open-type="share">
|
|
<image class="icon-img" src="../../static/center/share.png"></image>
|
|
<view class="lf-m-t-1">分享</view>
|
|
</button>
|
|
</view>
|
|
<button class="btn" @click="changePop(goods_detail.product.type)">立即购买</button>
|
|
</view>
|
|
<!-- 回到顶部 -->
|
|
<!-- <u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}" :icon-style="{color: '#ffffff'}"></u-back-top> -->
|
|
<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}">
|
|
</u-back-top>
|
|
</block>
|
|
</skeleton>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
params: {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: true,
|
|
minute: true,
|
|
second: false
|
|
},
|
|
buy_num: 1,
|
|
year: new Date().getFullYear(), // 当前年
|
|
month: new Date().getMonth() + 1, // 当前月
|
|
now_time: '',
|
|
current: 0, // 轮播下标
|
|
goods_id: 0,
|
|
goods_detail: {},
|
|
is_collect: false, // 1为当前收藏商品了，0为否
|
|
skeletonLoading: true,
|
|
//景区类型相关
|
|
scenic_spot: false,
|
|
type_index: 0,
|
|
choose_date: '请选择使用时间',
|
|
//酒店相关
|
|
hotel: false,
|
|
live_date: '请选择入住日期',
|
|
leave_date: '请选择离店日期',
|
|
arrive_date: '请选择到店日期',
|
|
arrive_time: '请选择到店时间',
|
|
totalLive: '', //住宿时间
|
|
//旅游路线相关
|
|
travel_route: false,
|
|
go_date: '请选择使用时间',
|
|
back_date: '请选择回程日期',
|
|
//餐厅
|
|
canteen: false,
|
|
car: false,
|
|
single: false,
|
|
choose_date_price: '',
|
|
choose_date_orangilprice: '',
|
|
choose_date_specid: '',
|
|
//酒店
|
|
total_hotel_price: 0,
|
|
total_hotel_orginalprice: 0,
|
|
live_index: 0,
|
|
leave_index: 0,
|
|
hotel_specid: [],
|
|
//uview picker
|
|
show: false,
|
|
hotel_show_range: false,
|
|
hotel_show_single: false,
|
|
shop_distance: 0
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.goods_id = options.goods_id || options.id;
|
|
|
|
console.log('商品', this.goods_id)
|
|
this.getGoodsDetail();
|
|
},
|
|
computed: {
|
|
isRight() {
|
|
return function(val) {
|
|
return this.$shared.isRight(val);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
getGoodsDetail() {
|
|
this.$http(this.API.API_ADVICEDETAILS, {
|
|
id: this.goods_id
|
|
}).then(res => {
|
|
this.skeletonLoading = false;
|
|
this.goods_detail = res.data;
|
|
if(this.goods_detail) {
|
|
this.getShopDistance();
|
|
}
|
|
if(!this.$isRight(this.goods_detail.spec)){
|
|
uni.showModal({
|
|
title: '',
|
|
content: '该商品暂无规格，无法购买',
|
|
showCancel: false,
|
|
success: result => {
|
|
this.$toBack();
|
|
}
|
|
})
|
|
}
|
|
this.is_collect = Boolean(res.data.is_collect) || false;
|
|
}).catch(err => {
|
|
this.skeletonLoading = false;
|
|
setTimeout(() => {
|
|
this.$toBack();
|
|
}, 1000);
|
|
})
|
|
},
|
|
//获取当前位置 计算商店距离
|
|
getShopDistance() {
|
|
let that = this;
|
|
wx.getLocation({
|
|
type: 'wgs84',
|
|
isHighAccuracy: true,
|
|
success (res) {
|
|
const self_latitude = res.latitude
|
|
const self_longitude = res.longitude
|
|
console.log('当前经纬度',self_latitude,self_longitude,res);
|
|
if(that.goods_detail.product && that.$isRight(that.goods_detail.product.extends)) {
|
|
const shop_latitude = that.goods_detail.latitude;
|
|
const shop_longitude = that.goods_detail.longitude;
|
|
console.log('商家经纬度',shop_latitude,shop_longitude);
|
|
//计算
|
|
var radLat1 = self_latitude* Math.PI / 180.0;
|
|
var radLat2 = shop_latitude* Math.PI / 180.0;
|
|
var a = radLat1 - radLat2;
|
|
var b = (self_longitude* Math.PI / 180.0) - (shop_longitude* Math.PI / 180.0);
|
|
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
|
|
s = s * 6378.137;//地球半径
|
|
s = Math.round(s * 10000) / 10000;
|
|
s = s.toFixed(2) + 'km' //保留两位小数
|
|
that.shop_distance = s
|
|
console.log('经纬度计算的距离:' + s)
|
|
}
|
|
|
|
},
|
|
fail(err) {
|
|
console.log(err)
|
|
}
|
|
})
|
|
},
|
|
valChange(e) {
|
|
this.buy_num = e.value;
|
|
},
|
|
changeArrive(e) {
|
|
let arrrive_day = e.year+'-'+e.month+'-'+e.day;
|
|
this.compareDate(arrrive_day)
|
|
if(this.compareDate(arrrive_day)) {
|
|
this.arrive_date = e.year+'-'+e.month+'-'+e.day+' '+e.hour+':'+e.minute;
|
|
}else {
|
|
this.$msg('不能选择过去的时间!');
|
|
}
|
|
},
|
|
changeRange(e) {
|
|
if(e.startDate == e.endDate) {
|
|
this.$msg('不能选择同一天!');
|
|
return
|
|
}else {
|
|
this.total_hotel_price = 0;
|
|
this.total_hotel_orginalprice = 0;
|
|
this.live_date = e.startDate;
|
|
this.leave_date = e.endDate;
|
|
let live_date = new Date(new Date(this.live_date).toLocaleDateString()).getTime();
|
|
let leave_date = new Date(new Date(this.leave_date).toLocaleDateString()).getTime();
|
|
this.totalLive = parseInt(Math.abs(leave_date - live_date) / 1000 / 60 / 60 / 24);
|
|
|
|
|
|
let differrentList = this.goods_detail.spec[this.type_index].list;
|
|
differrentList.forEach((item, index) => {
|
|
if (item.date == this.live_date) {
|
|
this.live_index = index;
|
|
} else if (item.date == this.leave_date) {
|
|
this.leave_index = index;
|
|
}
|
|
})
|
|
let total_date = differrentList.slice(this.live_index, this.leave_index);
|
|
this.hotel_specid = [];
|
|
total_date.reduce((list, item) => {
|
|
this.total_hotel_price += parseFloat(item.price);
|
|
this.total_hotel_orginalprice += parseFloat(item.original_price);
|
|
this.hotel_specid.push(item.id);
|
|
console.log('当前价格',this.total_hotel_price);
|
|
console.log('当前11',item.price);
|
|
}, []);
|
|
}
|
|
},
|
|
change(e) {
|
|
console.log(e);
|
|
this.go_date = e.result
|
|
let differrentList = this.goods_detail.spec[this.type_index].list;
|
|
console.log(differrentList)
|
|
differrentList.forEach((item, index) => {
|
|
if (item.date == this.go_date) {
|
|
this.choose_date_price = this.goods_detail.spec[this.type_index].list[index].price;
|
|
this.choose_date_orangilprice = this.goods_detail.spec[this.type_index].list[index]
|
|
.original_price;
|
|
this.choose_date_specid = this.goods_detail.spec[this.type_index].list[index].id;
|
|
}
|
|
})
|
|
},
|
|
compareDate(val) {
|
|
var nowTime = new Date(new Date().toLocaleDateString()).getTime();
|
|
let oldTime = new Date(new Date(val).toLocaleDateString()).getTime();
|
|
if (nowTime > oldTime) {
|
|
return false;
|
|
} else {
|
|
return true;
|
|
}
|
|
},
|
|
chooseType(index) {
|
|
this.type_index = index;
|
|
this.choose_date_price = 0;
|
|
this.choose_date_orangilprice = 0;
|
|
let differrentList = this.goods_detail.spec[this.type_index].list;
|
|
differrentList.forEach((item, index) => {
|
|
if (item.date == this.go_date) {
|
|
this.choose_date_price = this.goods_detail.spec[this.type_index].list[index].price;
|
|
this.choose_date_orangilprice = this.goods_detail.spec[this.type_index].list[index]
|
|
.original_price;
|
|
this.choose_date_specid = this.goods_detail.spec[this.type_index].list[index].id;
|
|
}
|
|
})
|
|
},
|
|
chooseTypehotel(index) {
|
|
this.type_index = index;
|
|
this.total_hotel_price = 0;
|
|
this.total_hotel_orginalprice = 0;
|
|
let differrentList = this.goods_detail.spec[this.type_index].list;
|
|
console.log(differrentList)
|
|
differrentList.forEach((item, index) => {
|
|
if (item.date == this.live_date) {
|
|
this.live_index = index;
|
|
} else if (item.date == this.leave_date) {
|
|
this.leave_index = index;
|
|
}
|
|
})
|
|
let total_date = differrentList.slice(this.live_index, this.leave_index);
|
|
this.hotel_specid = [];
|
|
total_date.reduce((list, item) => {
|
|
this.total_hotel_price += parseInt(item.price);
|
|
this.total_hotel_orginalprice += parseInt(item.original_price);
|
|
this.hotel_specid.push(item.id);
|
|
console.log(this.hotel_specid);
|
|
}, []);
|
|
},
|
|
changePop(type) {
|
|
if (type == 2) {
|
|
//景区
|
|
this.scenic_spot = true;
|
|
} else if (type == 1) {
|
|
//酒店
|
|
this.hotel = true;
|
|
} else if (type == 0) {
|
|
//旅游路线
|
|
this.travel_route = true;
|
|
} else if (type == 3) {
|
|
//餐厅
|
|
this.canteen = true;
|
|
this.scenic_spot = true; // PS 餐厅弹窗未开发，直接与景区弹窗共用！！！！！！
|
|
} else if (type == 4) {
|
|
//车队
|
|
this.car = true;
|
|
} else if (type == 5) {
|
|
//单项
|
|
this.single = true;
|
|
}
|
|
|
|
},
|
|
// 打开地图
|
|
openMap(address, lat, lng) {
|
|
// let { address, lat, lng } = this.goods_detail?.store || {};
|
|
uni.openLocation({
|
|
longitude: Number(lng),
|
|
latitude: Number(lat),
|
|
scale: 20,
|
|
name: address
|
|
});
|
|
},
|
|
// 切换商品收藏
|
|
switchCollect() {
|
|
let userInfo = uni.getStorageSync('userinfo') || {};
|
|
if (!userInfo.id || !userInfo.nickname || !userInfo.avatar) {
|
|
this.$url('/pages/login/index?type=userinfo');
|
|
return;
|
|
}
|
|
|
|
if (this.is_collect) {
|
|
this.$http(this.API.API_DELCOLLECT, {
|
|
agent_product_id: this.goods_id
|
|
}).then(res => {
|
|
this.$msg('取消收藏成功!')
|
|
this.is_collect = false
|
|
console.log(res)
|
|
})
|
|
} else {
|
|
this.$http(this.API.API_ADDCOLLECT, {
|
|
agent_product_id: this.goods_id
|
|
}).then(res => {
|
|
this.$msg('添加收藏成功!')
|
|
this.is_collect = true
|
|
console.log(res)
|
|
})
|
|
}
|
|
},
|
|
// 拨打电话
|
|
makePhoneCall(phoneStr) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: String(phoneStr)
|
|
})
|
|
},
|
|
// 跳转到确认下单页面
|
|
toAddOrder() {
|
|
//0旅游路线1酒店2景区3餐厅
|
|
if(this.goods_detail.product.type == 1) {
|
|
if(this.live_date=='请选择入住日期') {
|
|
this.$msg('请选择住店日期!')
|
|
return
|
|
}
|
|
if(this.leave_date=='请选择离店日期') {
|
|
this.$msg('请选择住店日期!')
|
|
return
|
|
}
|
|
if(this.arrive_date=='请选择到店日期') {
|
|
this.$msg('请选择到店日期!')
|
|
return
|
|
}
|
|
let arrival_timedate = this.arrive_date;
|
|
let goods_id = this.goods_detail.id;
|
|
let godds_type = this.goods_detail.product.type;
|
|
let spec_id = this.hotel_specid;
|
|
let type_text = this.goods_detail.spec[this.type_index].name;
|
|
//酒店
|
|
let check_in_time = this.live_date;
|
|
let check_out_time = this.leave_date;
|
|
let totalLive = this.totalLive;
|
|
let form_type = encodeURIComponent(JSON.stringify(this.goods_detail.product.diy_form));
|
|
this.$url('/pages/order/confirm_order?goods_id=' + goods_id + '&spec_id=' + spec_id +
|
|
'&goods_type=' + godds_type + '&check_in_time=' + check_in_time + '&goods_typetext=' +
|
|
type_text + '&check_out_time=' + check_out_time + '&arrival_time=' + arrival_timedate +
|
|
'&totalLive=' + totalLive+'&form_type='+form_type+'&buy_num='+this.buy_num);
|
|
}else {
|
|
if(this.go_date=='请选择使用时间') {
|
|
this.$msg('请选择使用时间!')
|
|
return
|
|
}
|
|
let goods_id = this.goods_detail.id;
|
|
let godds_type = this.goods_detail.product.type;
|
|
let departure_time = this.go_date;
|
|
let spec_id = this.choose_date_specid;
|
|
let type_text = this.goods_detail.spec[this.type_index].name;
|
|
let form_type = encodeURIComponent(JSON.stringify(this.goods_detail.product.diy_form));
|
|
this.$url('/pages/order/confirm_order?goods_id=' + goods_id + '&spec_id=' + spec_id +
|
|
'&goods_type=' + godds_type + '&departure_time=' + departure_time +
|
|
'&goods_typetext=' + type_text+'&form_type='+form_type+'&buy_num='+this.buy_num);
|
|
}
|
|
},
|
|
// 预览图片
|
|
lookImg(index) {
|
|
this.$u.throttle(() => {
|
|
let goods_banner = this.goods_detail.banners || [];
|
|
let banners = goods_banner.map(item => item.cover);
|
|
uni.previewImage({
|
|
urls: banners,
|
|
current: index
|
|
})
|
|
}, 200);
|
|
},
|
|
// 富文本处理
|
|
formatRichText(richText) {
|
|
if (richText != null) {
|
|
let newRichText = richText.replace(/<img[^>]*>/gi, function(match, capture) {
|
|
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
|
|
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
|
|
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
|
|
return match;
|
|
});
|
|
newRichText = newRichText.replace(/style="[^"]+"/gi, function(match, capture) {
|
|
match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi,
|
|
'width:100%;');
|
|
return match;
|
|
});
|
|
newRichText = newRichText.replace(/<br[^>]*\/>/gi, '');
|
|
newRichText = newRichText.replace(/\<img/gi,
|
|
'<img style="width:100%;height:auto;display:block;margin:10px 0;"');
|
|
return newRichText;
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
},
|
|
onShareAppMessage() {
|
|
let goods = this.goods_detail;
|
|
let title = goods.title;
|
|
let imageUrl = goods.pictures[0] || goods.picture;
|
|
let path = '/pages/route/index?route=goods_detail&id=' + goods.id;
|
|
console.log("path", path);
|
|
return {
|
|
title,
|
|
path,
|
|
imageUrl
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #f5f5f5;
|
|
overflow-x: hidden;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped="scoped">
|
|
/deep/.pop-self .u-drawer .u-mask {
|
|
z-index: 99 !important;
|
|
}
|
|
|
|
.choose_btn {
|
|
width: 686rpx;
|
|
height: 100rpx;
|
|
background: #1998FE;
|
|
border-radius: 10rpx;
|
|
font-size: 32rpx;
|
|
color: white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.choose-father {
|
|
display: flex;
|
|
width: 700rpx;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.choose-active {
|
|
background: #1998FE !important;
|
|
font-size: 24rpx;
|
|
color: white !important;
|
|
}
|
|
|
|
.choose-span {
|
|
width: max-content;
|
|
margin: 0 30rpx 30rpx 0;
|
|
height: 64rpx;
|
|
background: #F5F5F5;
|
|
border-radius: 32rpx;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
padding: 0 32rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.pop-price {
|
|
text-decoration: line-through;
|
|
color: #777777;
|
|
margin-right: 22rpx;
|
|
}
|
|
|
|
.list-item {
|
|
height: 80rpx;
|
|
background-color: white;
|
|
box-sizing: border-box;
|
|
padding: 0 32rpx;
|
|
position: relative;
|
|
|
|
.feedback-btn {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
.child-tag {
|
|
margin-bottom: 20rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.swiper-box {
|
|
width: 750rpx;
|
|
height: 490rpx;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.head-info {
|
|
width: 750rpx;
|
|
height: auto;
|
|
box-sizing: border-box;
|
|
padding: 0 32rpx;
|
|
padding-top: 20rpx;
|
|
background-color: #FFFFFF;
|
|
|
|
// .price>view:nth-of-type(1){
|
|
// color: #FF0000;
|
|
// margin-right: 22rpx;
|
|
// font-weight: bold;
|
|
// }
|
|
.price>view:nth-of-type(1) {
|
|
text-decoration: line-through;
|
|
color: #777777;
|
|
margin-right: 22rpx;
|
|
}
|
|
|
|
.price>view:nth-of-type(2) {
|
|
width: max-content;
|
|
padding: 0 18rpx;
|
|
height: 46rpx;
|
|
background-color: #1998FE;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
|
|
.label-box {
|
|
min-height: 130rpx;
|
|
width: 100%;
|
|
border-top: 1rpx solid #E5E5E5;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 30rpx 0 10rpx 0;
|
|
|
|
.label-item {
|
|
width: max-content;
|
|
padding: 20rpx;
|
|
height: 70rpx;
|
|
border-radius: 10rpx;
|
|
border: 2rpx solid #1998FE;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #1998FE;
|
|
margin-right: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
|
|
.label-box1 {
|
|
min-height: 130rpx;
|
|
width: 100%;
|
|
border-top: 1rpx solid #E5E5E5;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 30rpx 0 10rpx 0;
|
|
|
|
.label-item {
|
|
width: max-content;
|
|
padding: 0 10rpx;
|
|
height: 54rpx;
|
|
border-radius: 10rpx;
|
|
border: 2rpx solid #1998FE;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 24rpx;
|
|
color: #1998FE;
|
|
background: rgba(25, 152, 254, 0.05);
|
|
margin-right: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
|
|
.address-box {
|
|
width: 750rpx;
|
|
height: auto;
|
|
box-sizing: border-box;
|
|
background-color: #FFFFFF;
|
|
padding: 32rpx;
|
|
margin-top: 20rpx;
|
|
|
|
.shop-img {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.goods-detail {
|
|
width: 750rpx;
|
|
height: auto;
|
|
background-color: #FFFFFF;
|
|
padding: 32rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 20rpx;
|
|
|
|
.goods-img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.extra {
|
|
width: 100%;
|
|
height: 120rpx;
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
.fixed-bottom {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: #FFFFFF;
|
|
width: 100%;
|
|
height: auto;
|
|
padding: 0 32rpx;
|
|
border-top: 1rpx solid #e5e5e5;
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
|
|
.icon-item {
|
|
margin-right: 16rpx;
|
|
background-color: transparent;
|
|
margin: 0;
|
|
line-height: initial;
|
|
font-size: 28rpx;
|
|
font-weight: inherit;
|
|
margin-right: 10rpx;
|
|
padding: 0;
|
|
width: 88rpx;
|
|
position: relative;
|
|
|
|
&:first-child {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.icon-img {
|
|
height: 50rpx;
|
|
width: 50rpx;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 208rpx;
|
|
height: 80rpx;
|
|
background-color: #1998FE;
|
|
color: #FFFFFF;
|
|
line-height: 80rpx;
|
|
font-size: 32rpx;
|
|
border-radius: 42rpx;
|
|
}
|
|
}
|
|
</style>
|