|
@@ -1,1277 +1,1158 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <van-skeleton :loading="loading">
|
|
|
- <scroll-view style="height: 100vh;" class="floor-list"
|
|
|
- :scroll-top="scrollTop" scroll-y="true" @scroll="scroll" @scrolltoupper="upper" @scrolltolower="lower"
|
|
|
- :refresher-enabled="false">
|
|
|
- <view class="carousel">
|
|
|
- <swiper indicator-dots circular=true duration="400">
|
|
|
- <swiper-item class="swiper-item" v-for="(item,index) in datalist.images" :key="index">
|
|
|
- <view @click="shoupicture(item)" class="image-wrapper">
|
|
|
- <image
|
|
|
- :src="pictureUrl+'/uploads/home/store/goods/'+item.goodsimage_url.substr(0, item.goodsimage_url.indexOf('\_')) + '/' + item.goodsimage_url"
|
|
|
- class="loaded"
|
|
|
- mode="aspectFill"
|
|
|
- ></image>
|
|
|
- </view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="introduce-section">
|
|
|
- <view class="titleLayout" >
|
|
|
- <view class="title">{{datalist.goods_name}}</view>
|
|
|
- <view @tap="shopDetail" style="display: flex;flex-direction: row;">
|
|
|
- <view class="titleRight">
|
|
|
- <view style="font-size: 36upx;color: #D9332E;text-align: right;">{{datalist.praise}}%</view>
|
|
|
- <view style="color: #606266;font-size: 28upx;">好评率</view>
|
|
|
+ <view class="container">
|
|
|
+ <van-skeleton :loading="loading">
|
|
|
+ <scroll-view
|
|
|
+ style="height: 100vh;"
|
|
|
+ class="floor-list"
|
|
|
+ :scroll-top="scrollTop"
|
|
|
+ scroll-y="true"
|
|
|
+ @scroll="scroll"
|
|
|
+ :refresher-enabled="false">
|
|
|
+ <view class="carousel">
|
|
|
+ <swiper indicator-dots circular="true" duration="400">
|
|
|
+ <swiper-item class="swiper-item" v-for="(item, index) in datalist.images" :key="index">
|
|
|
+ <view @click="shoupicture(item)" class="image-wrapper">
|
|
|
+ <image
|
|
|
+ :src="pictureUrl + '/uploads/home/store/goods/' + item.goodsimage_url.substr(0, item.goodsimage_url.indexOf('\_')) + '/' + item.goodsimage_url"
|
|
|
+ class="loaded"
|
|
|
+ mode="aspectFill"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="introduce-section">
|
|
|
+ <view class="titleLayout">
|
|
|
+ <view class="title">{{ datalist.goods_name }}</view>
|
|
|
+ <view @tap="shopDetail" style="display: flex;flex-direction: row;">
|
|
|
+ <view class="titleRight">
|
|
|
+ <view style="font-size: 36upx;color: #D9332E;text-align: right;">{{ datalist.praise }}%</view>
|
|
|
+ <view style="color: #606266;font-size: 28upx;">好评率</view>
|
|
|
+ </view>
|
|
|
+ <view style="display: flex;align-items: center;"><uni-icon size="18" type="arrowright"></uni-icon></view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view style="display: flex;align-items: center;">
|
|
|
- <uni-icon size="18" type="arrowright"></uni-icon>
|
|
|
+ <view style="color: #909399;padding: 10upx 0 15upx 0;" v-if="datalist.points > 0">购买得{{ datalist.points }}圈币</view>
|
|
|
+ <view class="titleLayout price-box">
|
|
|
+ <view>
|
|
|
+ <text class="price-tip">¥</text>
|
|
|
+ <text class="price" style="color: #D9332E;">{{ datalist.goods_price }}</text>
|
|
|
+ <text class="m-price">¥{{ datalist.goods_marketprice }}</text>
|
|
|
+ <text class="price-tip" style="color: #D9332E;" v-if="datalist.goods_storage == 0 || datalist.store_id != store_id || datalist.goods_state != 1">
|
|
|
+ 已售罄
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <text style="color: #909399">月销售{{ datalist.sale_number }}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view style="color: #909399;padding: 10upx 0 15upx 0;" v-if="datalist.points>0">购买得{{datalist.points}}圈币</view>
|
|
|
- <view class="titleLayout price-box">
|
|
|
- <view>
|
|
|
- <text class="price-tip">¥</text>
|
|
|
- <text class="price" style="color: #D9332E;">{{datalist.goods_price}}</text>
|
|
|
- <text class="m-price">¥{{datalist.goods_marketprice}}</text>
|
|
|
- <text class="price-tip" style="color: #D9332E;"
|
|
|
- v-if="datalist.goods_storage == 0 ||
|
|
|
- datalist.store_id!= store_id
|
|
|
- || datalist.goods_state != 1
|
|
|
- ">已下架</text>
|
|
|
+
|
|
|
+ <view class="c-list">
|
|
|
+ <view style="display: flex;justify-content: space-between;" class="c-row b-b" @click="toggleSpec">
|
|
|
+ <view style="font-size: 32upx;color: #303133;">规则数量选择</view>
|
|
|
+ <view><uni-icon size="20" type="arrowright"></uni-icon></view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view>
|
|
|
- <text style="color: #909399">月销售{{datalist.sale_number}}</text>
|
|
|
+ <!-- 评价 -->
|
|
|
+ <view @tap="shopDetail" style="border-bottom: 20rpx solid #F5F5F5;" class="eva-section">
|
|
|
+ <view style="display: flex;justify-content: space-between;" class="c-row b-b">
|
|
|
+ <view style="font-size: 32upx;color: #303133;">评价</view>
|
|
|
+ <view><uni-icon size="20" type="arrowright"></uni-icon></view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="c-list">
|
|
|
- <view style="display: flex;justify-content: space-between;" class="c-row b-b" @click="toggleSpec">
|
|
|
- <view style="font-size: 32upx;color: #303133;">规则数量选择</view>
|
|
|
- <view>
|
|
|
- <uni-icon size="20" type="arrowright"></uni-icon>
|
|
|
+ <view class="detail-desc">
|
|
|
+ <van-tabs v-model="active" @click="onChange">
|
|
|
+ <van-tab :name="0" title="详情">
|
|
|
+ <view style="padding: 0 32upx;"><rich-text :nodes="datalist.goods_body"></rich-text></view>
|
|
|
+ </van-tab>
|
|
|
+ <van-tab :name="1" title="常见问题">
|
|
|
+ <view style="padding: 0 32upx;"><rich-text :nodes="datalist.issue"></rich-text></view>
|
|
|
+ </van-tab>
|
|
|
+ </van-tabs>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 评价 -->
|
|
|
- <view @tap="shopDetail" style="border-bottom: 20rpx solid #F5F5F5;" class="eva-section">
|
|
|
- <view style="display: flex;justify-content: space-between;" class="c-row b-b">
|
|
|
- <view style="font-size: 32upx;color: #303133;">评价</view>
|
|
|
- <view>
|
|
|
- <uni-icon size="20" type="arrowright"></uni-icon>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
- <!-- <assess /> -->
|
|
|
- <!-- :class="iScrolltop == 2?'activeColor' : ''" -->
|
|
|
- <view class="detail-desc" >
|
|
|
- <van-tabs v-model="active" @click="onChange">
|
|
|
- <van-tab :name="0" title="详情">
|
|
|
- <view style="padding: 0 32upx;">
|
|
|
- <rich-text :nodes="datalist.goods_body"></rich-text>
|
|
|
- </view>
|
|
|
- </van-tab>
|
|
|
- <van-tab :name="1" title="常见问题">
|
|
|
- <view style="padding: 0 32upx;">
|
|
|
- <rich-text :nodes="datalist.issue"></rich-text>
|
|
|
- </view>
|
|
|
- </van-tab>
|
|
|
- </van-tabs>
|
|
|
- </view>
|
|
|
- </scroll-view>
|
|
|
+ </scroll-view>
|
|
|
|
|
|
- <!-- 规格-模态层弹窗 -->
|
|
|
- <view
|
|
|
- class="popup spec"
|
|
|
- :class="specClass"
|
|
|
- @touchmove.stop.prevent="stopPrevent"
|
|
|
- @click="toggleSpec">
|
|
|
- <!-- 遮罩层 -->
|
|
|
- <view class="mask"></view>
|
|
|
- <view class="layer attr-content" @click.stop="stopPrevent">
|
|
|
- <view class="a-t">
|
|
|
- <image :src="nuberImg==''?firstImg:nuberImg"></image>
|
|
|
- <view class="right">
|
|
|
- <text class="price" style="font-size: 36upx;color: #303133">¥{{totalprice==0?datalist.goods_price:totalprice}}</text>
|
|
|
- <view v-if="datalist.spec_list.length > 0 ">
|
|
|
- <view class="selected" v-if="chosename.length > 0 ">
|
|
|
- <text class="selected-text" v-for="(sItem, sIndex) in chosename" :key="sIndex">
|
|
|
- {{sItem.value_name}}
|
|
|
- </text>
|
|
|
- X {{shopnumber}}
|
|
|
- </view>
|
|
|
- <view class="selected" v-else>
|
|
|
- <text class="selected-text">
|
|
|
- 请选择规格数量
|
|
|
- </text>
|
|
|
+ <!-- 规格-模态层弹窗 -->
|
|
|
+ <view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
|
|
|
+ <!-- 遮罩层 -->
|
|
|
+ <view class="mask"></view>
|
|
|
+ <view class="layer attr-content" @click.stop="stopPrevent">
|
|
|
+ <view class="a-t">
|
|
|
+ <image :src="nuberImg == '' ? firstImg : nuberImg"></image>
|
|
|
+ <view class="right">
|
|
|
+ <text class="price" style="font-size: 36upx;color: #303133">¥{{ totalprice == 0 ? datalist.goods_price : totalprice }}</text>
|
|
|
+ <view v-if="datalist.spec_list.length > 0">
|
|
|
+ <view class="selected" v-if="chosename.length > 0">
|
|
|
+ <text class="selected-text" v-for="(sItem, sIndex) in chosename" :key="sIndex">
|
|
|
+ {{ sItem.value_name }}
|
|
|
+ </text>
|
|
|
+ X {{ shopnumber }}
|
|
|
+ </view>
|
|
|
+ <view class="selected" v-else><text class="selected-text">请选择规格数量</text></view>
|
|
|
</view>
|
|
|
+ <view v-else>X {{ shopnumber }}</view>
|
|
|
</view>
|
|
|
- <view v-else>
|
|
|
- X {{shopnumber}}
|
|
|
+ <view @click="closeCar" style="position: absolute;right: 10%;font-size: 40upx;">x</view>
|
|
|
+ </view>
|
|
|
+ <view v-for="(item, index) in datalist.spec_list" :key="index" class="attr-list">
|
|
|
+ <text>{{ item.spec_name }}</text>
|
|
|
+ <view class="item-list">
|
|
|
+ <text v-for="(childItem, childIndex) in item.value_list"
|
|
|
+ :key="childIndex"
|
|
|
+ class="tit"
|
|
|
+ :class="{ selected: childItem.selected, disabled: childItem.disabled }"
|
|
|
+ @click="selectSpec(index, childItem.value_id, childItem, item, childItem.goods_storage)">
|
|
|
+ {{ childItem.value_name }}
|
|
|
+ </text>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view @click="closeCar" style="position: absolute;right: 10%;font-size: 40upx;">
|
|
|
- <!-- <uni-icon size="20" type="close"></uni-icon> -->
|
|
|
- x
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view v-for="(item,index) in datalist.spec_list" :key="index" class="attr-list">
|
|
|
- <text>{{item.spec_name}}</text>
|
|
|
- <view class="item-list">
|
|
|
- <!-- v-if="childItem.pid === item.id" disabled: childItem.goods_storage==0, disabled: childItem.goods_storage==0-->
|
|
|
- <text
|
|
|
- v-for="(childItem, childIndex) in item.value_list"
|
|
|
- :key="childIndex" class="tit"
|
|
|
- :class="{selected: childItem.selected, disabled:childItem.disabled}"
|
|
|
- @click="selectSpec(index, childItem.value_id, childItem, item,childItem.goods_storage)"
|
|
|
- >
|
|
|
- {{childItem.value_name}}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- :max="goods_storage" -->
|
|
|
- <view class="numberchange">
|
|
|
- <span>数量</span>
|
|
|
- <uninumberbox :max="goods_storage" :min="1" @change="changestorage"/>
|
|
|
+ <view class="numberchange">
|
|
|
+ <span>数量</span>
|
|
|
+ <uninumberbox :max="goods_storage" :value="shopnumber" :min="1" @change="changestorage" />
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <View class="page-bottom">
|
|
|
- <van-goods-action>
|
|
|
- <!-- <van-goods-action-icon @click="goIndex" icon="bag-o" /> -->
|
|
|
- <van-goods-action-icon @click="goIndex">
|
|
|
- <template slot="icon" style="width: 40upx;height: 40upx;">
|
|
|
- <image style="width: 100%;height: 100%;" src='/static/bottombtn0101.png'>
|
|
|
- </image>
|
|
|
- </template>
|
|
|
- </van-goods-action-icon>
|
|
|
- <van-goods-action-icon icon="cart-o" @click="openCar" :info="cartnumber" />
|
|
|
- <van-goods-action-icon icon="star-o" v-if="has_collected == 0" @click="toFavorite"/>
|
|
|
- <van-goods-action-icon icon="star" v-if="has_collected == 1" icon-class="colored" @click="toFavorite"/>
|
|
|
- <van-goods-action-button @click="addCar" text="加入购物车" type="warning" />
|
|
|
- <van-goods-action-button text="立即购买" @click="buynow" />
|
|
|
- </van-goods-action>
|
|
|
- </View>
|
|
|
- <Gobacktop @getop="getop" :bottomtop="2" v-if="isTop" />
|
|
|
- <unipopup :images="images" :show="ishow"/>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <View class="page-bottom">
|
|
|
+ <van-goods-action>
|
|
|
+ <van-goods-action-icon @click="goIndex">
|
|
|
+ <template slot="icon" style="width: 40upx;height: 40upx;">
|
|
|
+ <image style="width: 100%;height: 100%;" src="/static/bottombtn0101.png"></image>
|
|
|
+ </template>
|
|
|
+ </van-goods-action-icon>
|
|
|
+ <van-goods-action-icon icon="cart-o" @click="openCar" :info="cartnumber" />
|
|
|
+ <van-goods-action-icon icon="star-o" v-if="has_collected == 0" @click="toFavorite" />
|
|
|
+ <van-goods-action-icon icon="star" v-if="has_collected == 1" icon-class="colored" @click="toFavorite" />
|
|
|
+ <van-goods-action-button color="#fff" class="font-text" @click="dianAddCar()" text="加入购物车"/>
|
|
|
+ <van-goods-action-button color="#E72028" text="立即购买" @click="dianBuynow()"/>
|
|
|
+ </van-goods-action>
|
|
|
+ </View>
|
|
|
+ <Gobacktop @getop="getop" :bottomtop="2" v-if="isTop" />
|
|
|
+ <unipopup :images="images" :show="ishow" />
|
|
|
</van-skeleton>
|
|
|
- <view class="home" v-if="isfx" @click="openHome()">
|
|
|
- <image src="../../static/bottombtn0101.png"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
-
|
|
|
- <script>
|
|
|
- import {
|
|
|
- mapMutations,mapState
|
|
|
- } from 'vuex'
|
|
|
- // import logionDialog from '@/component/loginDialog.vue'
|
|
|
- import Gobacktop from '@/component/Gobacktop.vue'
|
|
|
- import uninumberbox from '@/component/uinNumber.vue'
|
|
|
- import assess from '@/component/assess.vue' // 评价列表
|
|
|
- import uniIcon from '@/component/uni-icon/uni-icon.vue'
|
|
|
- import unipopup from '@/component/openpictrue.vue'
|
|
|
- export default{
|
|
|
- components: {
|
|
|
- uniIcon,
|
|
|
- assess,
|
|
|
- uninumberbox,
|
|
|
- Gobacktop,
|
|
|
- unipopup
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- ishow: false,
|
|
|
- images: '',
|
|
|
- loading: true,
|
|
|
- firstloading: 0,
|
|
|
- isTop: false,
|
|
|
- chosename: [],
|
|
|
- arrayId:[],
|
|
|
- bottomtop: '55upx',
|
|
|
- scopemapId: 0,
|
|
|
- showdialog: false,
|
|
|
- has_collected: false, // 是否收藏
|
|
|
- cartnumber: 0, // 购物车数量
|
|
|
- changnumber: 100,
|
|
|
- ismax: false, // 输入狂禁止数量
|
|
|
- goods_storage: '', // 规格商品参数
|
|
|
- nuberImg:'',
|
|
|
- firstImg:'',
|
|
|
- shopnumber: 1,
|
|
|
- pictureUrl: this.pictureUrl,
|
|
|
- datalist: {},
|
|
|
- store_id: 0, // 酒店id
|
|
|
- goodId: 0, // 商品公共id
|
|
|
- goods_id: 0, // 商品规格id
|
|
|
- windowHeight: 0, // 窗口高度
|
|
|
- iScrolltop: 1,
|
|
|
- active: 0,
|
|
|
- scrollTop: 0,
|
|
|
- old: {
|
|
|
- scrollTop: 0
|
|
|
- },
|
|
|
- specClass: 'none',
|
|
|
- specSelected:[],
|
|
|
- totalprice:0,
|
|
|
- firstprice: 0,
|
|
|
- favorite: true,
|
|
|
- shareList: [],
|
|
|
- imgList: [],
|
|
|
- desc:'',
|
|
|
- specList: [],
|
|
|
- onlystoreId: 0 ,// 总酒店id
|
|
|
- isfx:false,
|
|
|
- };
|
|
|
- },
|
|
|
- onLaunch: function(){
|
|
|
- this.active = 1;
|
|
|
+ <view class="home" v-if="isfx" @click="openHome()"><image src="../../static/bottombtn0101.png"></image></view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { mapMutations, mapState } from 'vuex';
|
|
|
+// import logionDialog from '@/component/loginDialog.vue'
|
|
|
+import Gobacktop from '@/component/Gobacktop.vue';
|
|
|
+import uninumberbox from '@/component/uinNumber.vue';
|
|
|
+import assess from '@/component/assess.vue'; // 评价列表
|
|
|
+import uniIcon from '@/component/uni-icon/uni-icon.vue';
|
|
|
+import unipopup from '@/component/openpictrue.vue';
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ uniIcon,
|
|
|
+ assess,
|
|
|
+ uninumberbox,
|
|
|
+ Gobacktop,
|
|
|
+ unipopup
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ ishow: false,
|
|
|
+ images: '',
|
|
|
+ loading: true,
|
|
|
+ firstloading: 0,
|
|
|
+ isTop: false,
|
|
|
+ chosename: [],
|
|
|
+ arrayId: [],
|
|
|
+ bottomtop: '55upx',
|
|
|
+ scopemapId: 0,
|
|
|
+ showdialog: false,
|
|
|
+ has_collected: false, // 是否收藏
|
|
|
+ cartnumber: 0, // 购物车数量
|
|
|
+ changnumber: 100,
|
|
|
+ ismax: false, // 输入狂禁止数量
|
|
|
+ goods_storage: '', // 规格商品参数
|
|
|
+ nuberImg: '',
|
|
|
+ firstImg: '',
|
|
|
+ shopnumber: 1,
|
|
|
+ pictureUrl: this.pictureUrl,
|
|
|
+ datalist: {},
|
|
|
+ store_id: 0, // 酒店id
|
|
|
+ goodId: 0, // 商品公共id
|
|
|
+ goods_id: 0, // 商品规格id
|
|
|
+ windowHeight: 0, // 窗口高度
|
|
|
+ iScrolltop: 1,
|
|
|
+ active: 0,
|
|
|
+ scrollTop: 0,
|
|
|
+ old: {
|
|
|
+ scrollTop: 0
|
|
|
+ },
|
|
|
+ specClass: 'none',
|
|
|
+ specSelected: [],
|
|
|
+ totalprice: 0,
|
|
|
+ firstprice: 0,
|
|
|
+ favorite: true,
|
|
|
+ shareList: [],
|
|
|
+ imgList: [],
|
|
|
+ desc: '',
|
|
|
+ specList: [],
|
|
|
+ onlystoreId: 0, // 总酒店id
|
|
|
+ isfx: false
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLaunch: function() {
|
|
|
+ this.active = 1;
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['hasLogin', 'userInfo', 'successlogion'])
|
|
|
+ },
|
|
|
+ onShow: function() {
|
|
|
+ let _this = this;
|
|
|
+ this.getshopdetail(); // 获取商品详情
|
|
|
+ // this.getNum();
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: function(res) {
|
|
|
+ _this.windowHeight = res.screenHeight;
|
|
|
+ // console.log("屏幕宽度:"+res.screenWidth);
|
|
|
+ // console.log("屏幕高度:"+res.screenHeight);
|
|
|
+ // console.log("可使用窗口宽度:"+res.windowWidth);
|
|
|
+ // console.log("可使用窗口高度:"+res.windowHeight);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async onLoad(options) {
|
|
|
+ if (options.isfx) {
|
|
|
+ this.isfx = true;
|
|
|
+ } else {
|
|
|
+ this.isfx = false;
|
|
|
+ }
|
|
|
+ this.goodId = options.id; // 商品公共id
|
|
|
+ this.store_id = options.store_id; // 酒店id
|
|
|
+ this.onlystoreId = options.goodId;
|
|
|
+ // this.getshopdetail(); // 获取商品详情
|
|
|
+ uni.$on('changshow', e => {
|
|
|
+ this.changeshow();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onShareAppMessage(res) {
|
|
|
+ uni.showShareMenu({
|
|
|
+ withShareTicket: true
|
|
|
+ });
|
|
|
+ let that = this;
|
|
|
+ let id = this.goodId; // 商品Id
|
|
|
+ let store_id = this.store_id;
|
|
|
+ if (res.from === 'button') {
|
|
|
+ // 来自页面内分享按钮
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ title: that.datalist.goods_name,
|
|
|
+ path: `/pages/index/shop?id=${id}&store_id=${store_id}`,
|
|
|
+ imageUrl: that.nuberImg
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onReady: function() {},
|
|
|
+ methods: {
|
|
|
+ openHome() {
|
|
|
+ uni.switchTab({
|
|
|
+ url: `/pages/index/index`
|
|
|
+ });
|
|
|
},
|
|
|
- computed:{
|
|
|
- ...mapState([
|
|
|
- 'hasLogin',
|
|
|
- 'userInfo',
|
|
|
- 'successlogion'
|
|
|
- ]),
|
|
|
+ shoupicture(item) {
|
|
|
+ this.images = this.pictureUrl + '/uploads/home/store/goods/' + item.goodsimage_url.substr(0, item.goodsimage_url.indexOf('\_')) + '/' + item.goodsimage_url;
|
|
|
+ this.ishow = true;
|
|
|
},
|
|
|
- onShow: function() {
|
|
|
- let _this = this;
|
|
|
- uni.getSystemInfo({
|
|
|
- success: function (res) {
|
|
|
- _this.windowHeight = res.screenHeight;
|
|
|
- // console.log("屏幕宽度:"+res.screenWidth);
|
|
|
- // console.log("屏幕高度:"+res.screenHeight);
|
|
|
- // console.log("可使用窗口宽度:"+res.windowWidth);
|
|
|
- // console.log("可使用窗口高度:"+res.windowHeight);
|
|
|
- }
|
|
|
+ changeshow() {
|
|
|
+ this.ishow = false;
|
|
|
+ },
|
|
|
+ getop() {
|
|
|
+ this.scrollTop = this.old.scrollTop;
|
|
|
+ this.$nextTick(function() {
|
|
|
+ this.scrollTop = 0;
|
|
|
});
|
|
|
+ this.isTop = false;
|
|
|
},
|
|
|
- async onLoad(options){
|
|
|
- if(options.isfx){
|
|
|
- this.isfx=true;
|
|
|
- }else{
|
|
|
- this.isfx=false;
|
|
|
+
|
|
|
+ // 跳转到首页
|
|
|
+ goIndex() {
|
|
|
+ let id = this.store_id;
|
|
|
+ uni.redirectTo({
|
|
|
+ url: `/pages/index/hotel?id=${id}`
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 更改商品数量
|
|
|
+ changestorage(e) {
|
|
|
+ if (e == this.goods_storage) {
|
|
|
+ this.$msg('您选择的数量已超过最大库存数');
|
|
|
+ return;
|
|
|
}
|
|
|
- this.goodId = options.id; // 商品公共id
|
|
|
- this.store_id = options.store_id; // 酒店id
|
|
|
- this.onlystoreId = options.goodId;
|
|
|
- this.getshopdetail(); // 获取商品详情
|
|
|
- uni.$on('changshow', (e) => {
|
|
|
- this.changeshow();
|
|
|
- })
|
|
|
- //规格 默认选中第一条
|
|
|
- // this.datalist.spec_list[0].value_list.forEach(item=>{
|
|
|
- // for(let cItem of this.specChildList){
|
|
|
- // if(cItem.pid === item.id){
|
|
|
- // this.$set(cItem, 'selected', true);
|
|
|
- // this.specSelected.push(cItem);
|
|
|
- // break; //forEach不能使用break
|
|
|
- // }
|
|
|
- // }
|
|
|
- // })
|
|
|
- //this.shareList = await this.$api.json('shareList');
|
|
|
- },
|
|
|
- onShareAppMessage(res) {
|
|
|
- uni.showShareMenu({
|
|
|
- withShareTicket: true
|
|
|
- });
|
|
|
- let that = this;
|
|
|
- let id = this.goodId; // 商品Id
|
|
|
+ this.shopnumber = e;
|
|
|
+ let firstprice = this.firstprice;
|
|
|
+ this.totalprice = firstprice * this.shopnumber;
|
|
|
+ },
|
|
|
+ // 获取商品详情
|
|
|
+ getshopdetail() {
|
|
|
+ let params = {};
|
|
|
+ params.goods_commonid = this.goodId;
|
|
|
+ params.store_id = this.store_id;
|
|
|
+ this.request({
|
|
|
+ url: '/v2/goods/detail',
|
|
|
+ method: 'POST',
|
|
|
+ data: params,
|
|
|
+ success: res => {
|
|
|
+ console.log(res.data);
|
|
|
+ let { data } = res.data;
|
|
|
+ this.cartnumber = data.cart;
|
|
|
+ // this.getNum();
|
|
|
+ this.has_collected = data.has_collected;
|
|
|
+ let array = data;
|
|
|
+ array.images.forEach(item => {
|
|
|
+ this.firstImg =this.pictureUrl + '/uploads/home/store/goods/' + item.goodsimage_url.substr(0, item.goodsimage_url.indexOf('\_')) + '/' + item.goodsimage_url;
|
|
|
+ });
|
|
|
+ if (array.spec_list.length == 0) {
|
|
|
+ this.datalist = data;
|
|
|
+ this.goods_id = data.goods_list[0].goods_id;
|
|
|
+ this.goods_storage = data.goods_storage;
|
|
|
+ } else {
|
|
|
+ array.spec_list[0].value_list.forEach((item, idx) => {
|
|
|
+ item.goods_storage = data.goods_list[idx].goods_storage;
|
|
|
+ });
|
|
|
+ this.datalist = array;
|
|
|
+ }
|
|
|
+ const regex1 = new RegExp('stlye="" ', 'gi');
|
|
|
+ this.datalist.goods_body = this.datalist.goods_body.replace(/\(<img\)/gi, '');
|
|
|
+ const regex = new RegExp('<img', 'gi');
|
|
|
+ this.datalist.goods_body = this.datalist.goods_body.replace(regex, `<img class="changeimg"`);
|
|
|
+ if (this.firstloading == 0) {
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ this.firstloading = 1;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ shopDetail() {
|
|
|
+ let goodId = this.goodId; // 商品Id
|
|
|
let store_id = this.store_id;
|
|
|
- if (res.from === 'button') {
|
|
|
- // 来自页面内分享按钮
|
|
|
-
|
|
|
- }
|
|
|
- return {
|
|
|
- title: that.datalist.goods_name,
|
|
|
- path: `/pages/index/shop?id=${id}&store_id=${store_id}`,
|
|
|
- imageUrl:that.nuberImg
|
|
|
- }
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/index/commemt?goodId=${goodId}&store_id=${store_id}`
|
|
|
+ });
|
|
|
},
|
|
|
- onReady: function() {
|
|
|
-
|
|
|
+ onChange(event) {
|
|
|
+ this.active = event.detail.name;
|
|
|
},
|
|
|
- methods:{
|
|
|
- openHome(){
|
|
|
- uni.switchTab({
|
|
|
- url: `/pages/index/index`
|
|
|
- })
|
|
|
- },
|
|
|
- shoupicture(item) {
|
|
|
- this.images =this.pictureUrl+'/uploads/home/store/goods/'+item.goodsimage_url.substr(0, item.goodsimage_url.indexOf('\_')) + '/' + item.goodsimage_url;
|
|
|
- this.ishow = true;
|
|
|
- console.log(this.ishow)
|
|
|
- },
|
|
|
- changeshow() {
|
|
|
- this.ishow = false;
|
|
|
- },
|
|
|
- getop() {
|
|
|
- this.scrollTop = this.old.scrollTop
|
|
|
- this.$nextTick(function(){
|
|
|
- this.scrollTop=0;
|
|
|
- });
|
|
|
- this.isTop = false;
|
|
|
- },
|
|
|
-
|
|
|
- // 跳转到首页
|
|
|
- goIndex() {
|
|
|
- let id = this.store_id;
|
|
|
- uni.redirectTo({
|
|
|
- url: `/pages/index/hotel?id=${id}`
|
|
|
- })
|
|
|
- // uni.switchTab({
|
|
|
- // url:'./index'
|
|
|
- // })
|
|
|
- // uni.navigateBack();
|
|
|
- },
|
|
|
- // 更改商品数量
|
|
|
- changestorage(e) {
|
|
|
- if(e == this.goods_storage) {
|
|
|
- this.$msg("您选择的数量已超过最大库存数");
|
|
|
+ //规格弹窗开关
|
|
|
+ toggleSpec() {
|
|
|
+ if (this.hasLogin && this.successlogion) {
|
|
|
+ if (this.datalist.store_id != this.store_id || this.datalist.goods_state != 1 || this.datalist.goods_storage < 1) {
|
|
|
+ this.$msg('商品已售罄');
|
|
|
return;
|
|
|
}
|
|
|
- this.shopnumber = e;
|
|
|
- let firstprice = this.firstprice;
|
|
|
- this.totalprice = firstprice*this.shopnumber;
|
|
|
- },
|
|
|
- // 获取商品详情
|
|
|
- getshopdetail() {
|
|
|
-
|
|
|
- let params = {};
|
|
|
- params.goods_commonid =this.goodId;
|
|
|
- params.store_id = this.store_id;
|
|
|
- this.request({
|
|
|
- url:'/v2/goods/detail',
|
|
|
- method:'POST',
|
|
|
- data: params,
|
|
|
- success: (res)=> {
|
|
|
- let { data } = res.data;
|
|
|
- this.cartnumber = data.cart;
|
|
|
- this.has_collected = data.has_collected;
|
|
|
- let array = data;
|
|
|
- array.images.forEach(item => {
|
|
|
- this.firstImg = this.pictureUrl+'/uploads/home/store/goods/'+item.goodsimage_url.substr(0, item.goodsimage_url.indexOf('\_')) + '/' + item.goodsimage_url
|
|
|
- })
|
|
|
- if(array.spec_list.length == 0) {
|
|
|
- this.datalist = data;
|
|
|
- this.goods_id = data.goods_list[0].goods_id;
|
|
|
- this.goods_storage = data.goods_storage;
|
|
|
- //this.specSelected = data.goods_list;
|
|
|
- }else {
|
|
|
- array.spec_list[0].value_list.forEach( (item,idx) => {
|
|
|
- item.goods_storage = data.goods_list[idx].goods_storage;
|
|
|
- })
|
|
|
- this.datalist = array;
|
|
|
- }
|
|
|
- const regex1 = new RegExp('stlye="" ', 'gi');
|
|
|
- this.datalist.goods_body = this.datalist.goods_body.replace(/\(<img\)/ig, '');
|
|
|
- const regex = new RegExp('<img', 'gi');
|
|
|
- this.datalist.goods_body = this.datalist.goods_body.replace(regex,
|
|
|
- `<img class="changeimg"`);
|
|
|
- if(this.firstloading == 0) {
|
|
|
- this.loading = false;
|
|
|
- }
|
|
|
- this.firstloading = 1;
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- shopDetail() {
|
|
|
- // url: `/pages/index/shop?id=${id}&store_id=${store_id}`
|
|
|
- let goodId = this.goodId; // 商品Id
|
|
|
- let store_id = this.store_id;
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/index/commemt?goodId=${goodId}&store_id=${store_id}`
|
|
|
- });
|
|
|
- },
|
|
|
- onChange(event) {
|
|
|
- this.active = event.detail.name;
|
|
|
- console.log(this.active)
|
|
|
- },
|
|
|
- //规格弹窗开关
|
|
|
- toggleSpec() {
|
|
|
this.specClass = 'show';
|
|
|
- //this.specSelected = [];
|
|
|
- // if(this.specClass === 'show'){
|
|
|
- // this.specClass = 'hide';
|
|
|
- // setTimeout(() => {
|
|
|
- // this.specClass = 'none';
|
|
|
- // }, 250);
|
|
|
- // }else if(this.specClass === 'none'){
|
|
|
- // this.specClass = 'show';
|
|
|
- // }
|
|
|
- },
|
|
|
-
|
|
|
- // 关闭弹窗
|
|
|
- // cancelDiaolog() {
|
|
|
- // this.showdialog = false;
|
|
|
- // },
|
|
|
- // // 确定
|
|
|
- // confirmDiaolog() {
|
|
|
- // this.showdialog = false;
|
|
|
- // uni.navigateTo({
|
|
|
- // url: '../myCenter/information' // 我的收藏
|
|
|
- // })
|
|
|
- // },
|
|
|
-
|
|
|
- openCar() {
|
|
|
- if(this.hasLogin && this.successlogion) {
|
|
|
- let store_id = this.store_id;
|
|
|
- uni.navigateTo({
|
|
|
- url:`/pages/index/cart?store_id=${store_id}`
|
|
|
- })
|
|
|
- }else {
|
|
|
- //this.showdialog = true;
|
|
|
- uni.navigateTo({
|
|
|
- url:'/pages/myCenter/logion'
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- // 立即购买
|
|
|
- buynow() {
|
|
|
- if(this.hasLogin && this.successlogion) {
|
|
|
- if(this.datalist.store_id != this.store_id || this.datalist.goods_state != 1 || this.datalist.goods_storage < 1) {
|
|
|
- this.$msg("商品已下架");
|
|
|
- return;
|
|
|
- }
|
|
|
- if(this.specSelected.length == 0&&this.datalist.spec_list.length != 0 ) {
|
|
|
- this.$msg("请选择规格数量");
|
|
|
- this.specClass = 'show';
|
|
|
- return;
|
|
|
- }
|
|
|
- if(this.specSelected.length == 0&&this.datalist.spec_list.length == 0) {
|
|
|
- this.specClass = 'show';
|
|
|
- this.specSelected = this.datalist.goods_list;
|
|
|
- return;
|
|
|
- }
|
|
|
- let goods = [];
|
|
|
- goods.push({});
|
|
|
- goods[0].goods_id = this.goods_id;
|
|
|
- goods[0].buy_num = this.shopnumber;
|
|
|
- this.request({
|
|
|
- url:'/v1/order/save_og',
|
|
|
- method: 'post',
|
|
|
- data: {
|
|
|
- store_id: this.store_id,
|
|
|
- goods: JSON.stringify(goods)
|
|
|
- },
|
|
|
- success:(res) => {
|
|
|
- let store = this.store_id;
|
|
|
- let order_id = res.data.data.order_id;
|
|
|
- this.specClass = 'none';
|
|
|
- this.specSelected = [];
|
|
|
- this.chosename = [];
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/index/sureBuy?store=${store}&order_id=${order_id}`
|
|
|
- });
|
|
|
-
|
|
|
- }
|
|
|
- })
|
|
|
- }else {
|
|
|
- uni.navigateTo({
|
|
|
- url:'/pages/myCenter/logion'
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- // 加入购物车
|
|
|
- addCar() {
|
|
|
- if(this.hasLogin && this.successlogion) {
|
|
|
- if(this.datalist.store_id != this.store_id || this.datalist.goods_state != 1 || this.datalist.goods_storage < 1) {
|
|
|
- this.$msg("商品已下架");
|
|
|
- return;
|
|
|
- }
|
|
|
- if(this.specSelected.length == 0&&this.datalist.spec_list.length == 0) {
|
|
|
- this.specClass = 'show';
|
|
|
- this.specSelected = this.datalist.goods_list;
|
|
|
- return;
|
|
|
- }
|
|
|
- // if(this.chosename.length == 0&&this.datalist.spec_list.length != 0) {
|
|
|
- // this.specClass = 'show';
|
|
|
- // return;
|
|
|
- // }
|
|
|
- if(this.specSelected.length == 0&&this.datalist.spec_list.length != 0 ) {
|
|
|
- this.specClass = 'show';
|
|
|
- this.$msg("请选择规格数量");
|
|
|
- return;
|
|
|
- }else {
|
|
|
- this.request({
|
|
|
- url:'/v2/order/add_cart',
|
|
|
- method:'POST',
|
|
|
- data: {
|
|
|
- goods_id: this.goods_id,
|
|
|
- goods_num: this.shopnumber
|
|
|
- },
|
|
|
- success: () => {
|
|
|
- this.specSelected = [];
|
|
|
- this.chosename = [];
|
|
|
- this.$msg("商品添加成功");
|
|
|
- this.specClass = 'none';
|
|
|
- this.getshopdetail();
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- }else {
|
|
|
- uni.navigateTo({
|
|
|
- url:'/pages/myCenter/logion'
|
|
|
- })
|
|
|
+ } else {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/myCenter/logion'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getNum() {
|
|
|
+ this.request({
|
|
|
+ url: '/v2/order/cart',
|
|
|
+ method: 'post',
|
|
|
+ data: {
|
|
|
+ store_id: this.store_id,
|
|
|
+ page: 1
|
|
|
+ },
|
|
|
+ success: res => {
|
|
|
+ let { data } = res.data;
|
|
|
+ var sum = 0;
|
|
|
+ data.cart_list.forEach(item => {
|
|
|
+ sum = sum + item.goods_num;
|
|
|
+ });
|
|
|
+ this.cartnumber = sum;
|
|
|
}
|
|
|
- },
|
|
|
-
|
|
|
- closeCar() {
|
|
|
- this.specClass = 'none';
|
|
|
- },
|
|
|
- //选择规格
|
|
|
- selectSpec(index, pid,chose,first,goods_storage){
|
|
|
- // if(goods_storage == 0) {
|
|
|
- // this.$msg("商品没库存啦");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ openCar() {
|
|
|
+ if (this.hasLogin && this.successlogion) {
|
|
|
+ let store_id = this.store_id;
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/index/cart?store_id=${store_id}`
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ //this.showdialog = true;
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/myCenter/logion'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 立即购买
|
|
|
+ buynow() {
|
|
|
+ // if (this.specSelected.length == 0 && this.datalist.spec_list.length == 0) {
|
|
|
+ // this.specClass = 'show';
|
|
|
+ // this.specSelected = this.datalist.goods_list;
|
|
|
// return;
|
|
|
// }
|
|
|
- let obj = {};
|
|
|
- obj.spec_id = first.spec_id;
|
|
|
- obj.value_name = chose.value_name;
|
|
|
- if(this.datalist.spec_list.length == this.chosename.length) {
|
|
|
- }else {
|
|
|
- this.chosename.push(obj);
|
|
|
- }
|
|
|
- this.specSelected = [];
|
|
|
- let list = this.datalist.spec_list[index].value_list;
|
|
|
- this.datalist.spec_list[index].value_list.forEach(item=>{
|
|
|
- if(item.value_id === pid){
|
|
|
- this.$set(item, 'selected', true);
|
|
|
- }else {
|
|
|
- this.$set(item, 'selected', false);
|
|
|
- }
|
|
|
- })
|
|
|
- this.chosename.forEach(items => {
|
|
|
- if(items.spec_id == first.spec_id) {
|
|
|
- items.value_name = chose.value_name
|
|
|
- };
|
|
|
-
|
|
|
- })
|
|
|
-
|
|
|
- let array = [];
|
|
|
- for(let i = 0; i < this.datalist.spec_list.length; i++) {
|
|
|
- for(let j = 0; j<this.datalist.spec_list[i].value_list.length;j++) {
|
|
|
- if(this.datalist.spec_list[i].value_list[j].selected) {
|
|
|
- array.push(this.datalist.spec_list[i].value_list[j].value_id);
|
|
|
+ if (this.specSelected.length == 0 && this.datalist.spec_list.length != 0) {
|
|
|
+ this.$msg('请选择规格数量');
|
|
|
+ }else{
|
|
|
+ let goods = [];
|
|
|
+ goods.push({});
|
|
|
+ goods[0].goods_id = this.goods_id;
|
|
|
+ goods[0].buy_num = this.shopnumber;
|
|
|
+ this.request({
|
|
|
+ url: '/v1/order/save_og',
|
|
|
+ method: 'post',
|
|
|
+ data: {
|
|
|
+ store_id: this.store_id,
|
|
|
+ goods: JSON.stringify(goods)
|
|
|
+ },
|
|
|
+ success: res => {
|
|
|
+ let store = this.store_id;
|
|
|
+ let order_id = res.data.data.order_id;
|
|
|
+ this.specClass = 'none';
|
|
|
+ // this.specSelected = [];
|
|
|
+ this.chosename = [];
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/index/sureBuy?store=${store}&order_id=${order_id}`
|
|
|
+ });
|
|
|
}
|
|
|
- }
|
|
|
+ });
|
|
|
}
|
|
|
- this.arrayId = array;
|
|
|
- // if(this.arrayId.length == this.datalist.spec_list.length) {
|
|
|
- // let goodIds = this.datalist.spec_map[this.scopemapId];
|
|
|
- // let itemsa = this.datalist.goods_list[goodIds]
|
|
|
- // console.log(itemsa);
|
|
|
- // // if(itemsa.goods_storage == 0) {
|
|
|
- // // this.$msg("商品没库存啦");
|
|
|
- // // return;
|
|
|
- // // }
|
|
|
+ },
|
|
|
+ dianBuynow(){
|
|
|
+ if(this.specClass=='show'){
|
|
|
+ this.buynow();
|
|
|
+ }else{
|
|
|
+ this.toggleSpec();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dianAddCar(){
|
|
|
+ if(this.specClass=='show'){
|
|
|
+ this.addCar();
|
|
|
+ }else{
|
|
|
+ this.toggleSpec();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 加入购物车
|
|
|
+ addCar() {
|
|
|
+ // if (this.specSelected.length == 0 && this.datalist.spec_list.length == 0) {
|
|
|
+ // this.specSelected = this.datalist.goods_list;
|
|
|
// return;
|
|
|
// }
|
|
|
-
|
|
|
- if(this.arrayId.length == this.datalist.spec_list.length) {
|
|
|
- this.scopemapId = array.join("_");
|
|
|
- let goodId = this.datalist.spec_map[this.scopemapId]; //
|
|
|
- let items = this.datalist.goods_list[goodId]
|
|
|
- if(items.goods_storage == 0) {
|
|
|
- this.$msg("商品没库存啦");
|
|
|
- this.datalist.spec_list[index].value_list.forEach(item=>{
|
|
|
- if(item.value_id === pid){
|
|
|
- this.$set(item, 'selected', false);
|
|
|
- // this.$set(item, 'disabled', true);
|
|
|
- }else {
|
|
|
- // this.$set(item, 'disabled', false);
|
|
|
- }
|
|
|
- })
|
|
|
- return;
|
|
|
+ if (this.specSelected.length == 0 && this.datalist.spec_list.length != 0) {
|
|
|
+ this.$msg('请选择商品规格');
|
|
|
+ } else {
|
|
|
+ this.request({
|
|
|
+ url: '/v2/order/add_cart',
|
|
|
+ method: 'POST',
|
|
|
+ data: {
|
|
|
+ goods_id: this.goods_id,
|
|
|
+ goods_num: this.shopnumber
|
|
|
+ },
|
|
|
+ success: () => {
|
|
|
+ this.$msg('商品添加成功');
|
|
|
+ this.totalprice=0;//金额清空
|
|
|
+ this.specSelected = [];//选择的规格清空
|
|
|
+ this.chosename = [];//选择的规格样式清空
|
|
|
+ this.shopnumber = 1;//选择的数量清空
|
|
|
+ this.getshopdetail();
|
|
|
+ this.closeCar();
|
|
|
}
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ closeCar() {
|
|
|
+ this.specClass = 'none';
|
|
|
+ },
|
|
|
+ //选择规格
|
|
|
+ selectSpec(index, pid, chose, first, goods_storage) {
|
|
|
+ let obj = {};
|
|
|
+
|
|
|
+ obj.spec_id = first.spec_id;
|
|
|
+
|
|
|
+ obj.value_name = chose.value_name;
|
|
|
+
|
|
|
+ if (this.datalist.spec_list.length != this.chosename.length) {
|
|
|
+ this.chosename.push(obj);
|
|
|
+ }
|
|
|
+
|
|
|
+ this.specSelected = [];
|
|
|
+
|
|
|
+ let list = this.datalist.spec_list[index].value_list;
|
|
|
+ //设置选中状态
|
|
|
+ this.datalist.spec_list[index].value_list.forEach(item => {
|
|
|
+ if (item.value_id === pid) {
|
|
|
+ this.$set(item, 'selected', true);
|
|
|
+ } else {
|
|
|
+ this.$set(item, 'selected', false);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //设置名字
|
|
|
+ this.chosename.forEach(items => {
|
|
|
+ if (items.spec_id == first.spec_id) {
|
|
|
items.value_name = chose.value_name;
|
|
|
- this.nuberImg = items.spec_img;
|
|
|
- this.specSelected.push(items)
|
|
|
- this.goods_storage = items.goods_storage;
|
|
|
- this.goods_id = items.goods_id;
|
|
|
- this.firstprice = items.goods_price;
|
|
|
- this.totalprice = items.goods_price*this.shopnumber;
|
|
|
}
|
|
|
-
|
|
|
- // if(this.arrayId.length == this.datalist.spec_list.length) {
|
|
|
-
|
|
|
- // }
|
|
|
-
|
|
|
- // let obj = {};
|
|
|
- // obj.firstId = index;
|
|
|
- // obj.pid = pid;
|
|
|
- // this.arrayId.push(obj);
|
|
|
- // console.log(this.arrayId)
|
|
|
- // let arr = this.arrayId;
|
|
|
- // for(var i=0; i<arr.length; i++){
|
|
|
- // for(var j=i+1; j<arr.length; j++){
|
|
|
- // if(arr[i].firstId==arr[j].firstId){
|
|
|
- // arr.splice(j,1);
|
|
|
- // j--;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // let newarray = []
|
|
|
- // arr.forEach(item => {
|
|
|
- // newarray.push(item.pid);
|
|
|
- // })
|
|
|
- // this.arrayId = arr;
|
|
|
- // if(this.arrayId.length == 0) {
|
|
|
- // this.scopemapId = newarray.toString(); ;
|
|
|
- // }else {
|
|
|
- // this.scopemapId = newarray.join("_");
|
|
|
- // }
|
|
|
- // console.log(this.scopemapId);
|
|
|
- //this.datalist.spec_list[index].value_list = list;
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- // 滚动到顶部
|
|
|
- upper(e) {
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- // 滚到底部
|
|
|
- lower(e) {
|
|
|
- console.log("底部")
|
|
|
- },
|
|
|
- // 滚动时触发
|
|
|
- scroll(e) {
|
|
|
- this.old.scrollTop = e.detail.scrollTop
|
|
|
- if(e.detail.scrollTop > this.windowHeight) {
|
|
|
- this.iScrolltop = 2;
|
|
|
- }else {
|
|
|
- this.iScrolltop = 1;
|
|
|
- }
|
|
|
- if(e.detail.scrollTop > 400) {
|
|
|
- this.isTop = true;
|
|
|
- }else{ //当距离小于500时显示回到顶部按钮
|
|
|
- this.isTop = false;
|
|
|
+ });
|
|
|
+ let array = [];
|
|
|
+ for (let i = 0; i < this.datalist.spec_list.length; i++) {
|
|
|
+ for (let j = 0; j < this.datalist.spec_list[i].value_list.length; j++) {
|
|
|
+ if (this.datalist.spec_list[i].value_list[j].selected) {
|
|
|
+ array.push(this.datalist.spec_list[i].value_list[j].value_id);
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+ this.arrayId = array;
|
|
|
|
|
|
- },
|
|
|
-
|
|
|
- //收藏
|
|
|
- toFavorite(){
|
|
|
- if(this.hasLogin && this.successlogion) {
|
|
|
- if(this.datalist.store_id != this.store_id || this.datalist.goods_state != 1 || this.datalist.goods_storage < 1) {
|
|
|
- this.$msg("商品已下架");
|
|
|
- return;
|
|
|
- }
|
|
|
- this.request({
|
|
|
- url: '/v1/favorites/collect',
|
|
|
- method: 'post',
|
|
|
- data: {
|
|
|
- type:'goods',
|
|
|
- fav_id: this.goodId
|
|
|
- },
|
|
|
- success: (res) => {
|
|
|
- if(res.data.data.action == 'add') {
|
|
|
- this.$msg("收藏成功")
|
|
|
- }else {
|
|
|
- this.$msg("取消收藏")
|
|
|
- }
|
|
|
- this.getshopdetail()
|
|
|
+ if (this.arrayId.length == this.datalist.spec_list.length) {
|
|
|
+ this.scopemapId = array.join('_');
|
|
|
+ let goodId = this.datalist.spec_map[this.scopemapId]; //
|
|
|
+ let items = this.datalist.goods_list[goodId];
|
|
|
+ if (items.goods_storage == 0) {
|
|
|
+ this.$msg('商品没库存啦');
|
|
|
+ this.datalist.spec_list[index].value_list.forEach(item => {
|
|
|
+ if (item.value_id === pid) {
|
|
|
+ this.$set(item, 'selected', false);
|
|
|
}
|
|
|
- })
|
|
|
- }else {
|
|
|
- uni.navigateTo({
|
|
|
- url:'/pages/myCenter/logion'
|
|
|
- })
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ items.value_name = chose.value_name;
|
|
|
+ this.nuberImg = items.spec_img;
|
|
|
+ this.specSelected.push(items);
|
|
|
+ this.goods_storage = items.goods_storage;
|
|
|
+ this.goods_id = items.goods_id;
|
|
|
+ this.firstprice = items.goods_price;
|
|
|
+ this.totalprice = items.goods_price * this.shopnumber;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 滚动时触发
|
|
|
+ scroll(e) {
|
|
|
+ this.old.scrollTop = e.detail.scrollTop;
|
|
|
+ if (e.detail.scrollTop > this.windowHeight) {
|
|
|
+ this.iScrolltop = 2;
|
|
|
+ } else {
|
|
|
+ this.iScrolltop = 1;
|
|
|
+ }
|
|
|
+ if (e.detail.scrollTop > 400) {
|
|
|
+ this.isTop = true;
|
|
|
+ } else {
|
|
|
+ //当距离小于500时显示回到顶部按钮
|
|
|
+ this.isTop = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //收藏
|
|
|
+ toFavorite() {
|
|
|
+ if (this.hasLogin && this.successlogion) {
|
|
|
+ if (this.datalist.store_id != this.store_id || this.datalist.goods_state != 1 || this.datalist.goods_storage < 1) {
|
|
|
+ this.$msg('商品已售罄');
|
|
|
+ return;
|
|
|
}
|
|
|
- //this.favorite = !this.favorite;
|
|
|
- },
|
|
|
- buy(){
|
|
|
- uni.navigateTo({
|
|
|
- url: './sureBuy'
|
|
|
- })
|
|
|
- },
|
|
|
- stopPrevent(){}
|
|
|
- },
|
|
|
-
|
|
|
- }
|
|
|
- </script>
|
|
|
-
|
|
|
- <style lang='scss'>
|
|
|
- page{
|
|
|
- /* background: $page-color-base; */
|
|
|
- /* padding-bottom: 160upx; */
|
|
|
+ this.request({
|
|
|
+ url: '/v1/favorites/collect',
|
|
|
+ method: 'post',
|
|
|
+ data: {
|
|
|
+ type: 'goods',
|
|
|
+ fav_id: this.goodId
|
|
|
+ },
|
|
|
+ success: res => {
|
|
|
+ if (res.data.data.action == 'add') {
|
|
|
+ this.$msg('收藏成功');
|
|
|
+ } else {
|
|
|
+ this.$msg('取消收藏');
|
|
|
+ }
|
|
|
+ this.getshopdetail();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/myCenter/logion'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ buy() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: './sureBuy'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ stopPrevent(){}
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ .font-text .van-button__text{
|
|
|
+ color: #222 !important;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+page {
|
|
|
+ /* background: $page-color-base; */
|
|
|
+ /* padding-bottom: 160upx; */
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.home {
|
|
|
+ position: absolute;
|
|
|
+ width: 60upx;
|
|
|
+ height: 60upx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 50%;
|
|
|
+ box-shadow: 0 0 3upx #333333;
|
|
|
+ text-align: center;
|
|
|
+ top: 100upx;
|
|
|
+ z-index: 999;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+.home image {
|
|
|
+ width: 40upx;
|
|
|
+ height: 40upx;
|
|
|
+ padding-top: 8rpx;
|
|
|
+}
|
|
|
+.icon-you {
|
|
|
+ font-size: 28upx + 2upx;
|
|
|
+ color: #888;
|
|
|
+}
|
|
|
+.carousel {
|
|
|
+ height: 722upx;
|
|
|
+ position: relative;
|
|
|
+ swiper {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .image-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .swiper-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-content: center;
|
|
|
+ height: 750upx;
|
|
|
+ overflow: hidden;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.titleLayout {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-bottom: 20upx;
|
|
|
+}
|
|
|
+/* 标题简介 */
|
|
|
+.introduce-section {
|
|
|
+ background: #fff;
|
|
|
+ padding: 20upx 30upx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 36upx;
|
|
|
+ color: #303133;
|
|
|
+ height: 50upx;
|
|
|
+ line-height: 50upx;
|
|
|
+ width: 70%;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .titleRight {
|
|
|
+ border-left: 1px solid #f5f5f5;
|
|
|
+ padding-left: 32upx;
|
|
|
+ }
|
|
|
+ .price-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ height: 64upx;
|
|
|
+ padding: 10upx 0;
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #fa436a;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ font-size: $font-lg + 2upx;
|
|
|
+ }
|
|
|
+ .m-price {
|
|
|
+ margin: 0 12upx;
|
|
|
+ color: #909399;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+ .coupon-tip {
|
|
|
+ align-items: center;
|
|
|
+ padding: 4upx 10upx;
|
|
|
+ background: #fa436a;
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 6upx;
|
|
|
+ line-height: 1;
|
|
|
+ transform: translateY(-4upx);
|
|
|
+ }
|
|
|
+ .bot-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 50upx;
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #909399;
|
|
|
+ text {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/* 分享 */
|
|
|
+.share-section {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #606266;
|
|
|
+ background: linear-gradient(left, #fdf5f6, #fbebf6);
|
|
|
+ padding: 12upx 30upx;
|
|
|
+ .share-icon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 70upx;
|
|
|
+ height: 30upx;
|
|
|
+ line-height: 1;
|
|
|
+ border: 1px solid #fa436a;
|
|
|
+ border-radius: 4upx;
|
|
|
position: relative;
|
|
|
- }
|
|
|
- .home{
|
|
|
- position: absolute;
|
|
|
- width: 60upx;
|
|
|
- height: 60upx;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 50%;
|
|
|
- box-shadow: 0 0 3upx #333333;
|
|
|
- text-align: center;
|
|
|
- top: 100upx;
|
|
|
- z-index: 999;
|
|
|
- left: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 22upx;
|
|
|
+ color: #fa436a;
|
|
|
+ &:after {
|
|
|
+ content: '';
|
|
|
+ width: 50upx;
|
|
|
+ height: 50upx;
|
|
|
+ border-radius: 50%;
|
|
|
+ left: -20upx;
|
|
|
+ top: -12upx;
|
|
|
+ position: absolute;
|
|
|
+ background: #fa436a;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon-xingxing {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ font-size: 24upx;
|
|
|
+ margin-left: 2upx;
|
|
|
+ margin-right: 10upx;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ .tit {
|
|
|
+ font-size: 28upx;
|
|
|
+ margin-left: 10upx;
|
|
|
+ }
|
|
|
+ .icon-bangzhu1 {
|
|
|
+ padding: 10upx;
|
|
|
+ font-size: 30upx;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ .share-btn {
|
|
|
+ flex: 1;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #fa436a;
|
|
|
+ }
|
|
|
+ .icon-you {
|
|
|
+ font-size: 24upx;
|
|
|
+ margin-left: 4upx;
|
|
|
+ color: #fa436a;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.c-list {
|
|
|
+ font-size: 24upx + 2upx;
|
|
|
+ color: #606266;
|
|
|
+ background: #fff;
|
|
|
+ border-top: 20upx solid #f5f5f5;
|
|
|
+ border-bottom: 20upx solid #f5f5f5;
|
|
|
+ .c-row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20upx 30upx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .tit {
|
|
|
+ width: 140upx;
|
|
|
}
|
|
|
- .home image{
|
|
|
- width: 40upx;
|
|
|
+ .con {
|
|
|
+ flex: 1;
|
|
|
+ color: #303133;
|
|
|
+ .selected-text {
|
|
|
+ margin-right: 10upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bz-list {
|
|
|
height: 40upx;
|
|
|
- padding-top: 8rpx;
|
|
|
+ font-size: 24upx+2upx;
|
|
|
+ color: #303133;
|
|
|
+ text {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 30upx;
|
|
|
+ }
|
|
|
}
|
|
|
- .icon-you{
|
|
|
- font-size: 28upx + 2upx;
|
|
|
- color: #888;
|
|
|
- }
|
|
|
- .carousel {
|
|
|
- height: 722upx;
|
|
|
- position:relative;
|
|
|
- swiper{
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .image-wrapper{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .swiper-item {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-content: center;
|
|
|
- height: 750upx;
|
|
|
- overflow: hidden;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .titleLayout {
|
|
|
+ .con-list {
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding-bottom: 20upx;
|
|
|
+ flex-direction: column;
|
|
|
+ color: #303133;
|
|
|
+ line-height: 40upx;
|
|
|
}
|
|
|
- /* 标题简介 */
|
|
|
- .introduce-section{
|
|
|
- background: #fff;
|
|
|
- padding: 20upx 30upx;
|
|
|
-
|
|
|
- .title{
|
|
|
- font-size: 36upx;
|
|
|
- color: #303133;
|
|
|
- height: 50upx;
|
|
|
- line-height: 50upx;
|
|
|
- width: 70%;
|
|
|
- white-space:nowrap;
|
|
|
- overflow:hidden;
|
|
|
- text-overflow:ellipsis;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .titleRight {
|
|
|
- border-left: 1px solid #F5F5F5;
|
|
|
- padding-left: 32upx;
|
|
|
+ .red {
|
|
|
+ color: #fa436a;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 评价 */
|
|
|
+.eva-section {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 20upx 30upx;
|
|
|
+ background: #fff;
|
|
|
+ /* margin-top: 16upx; */
|
|
|
+ .e-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 70upx;
|
|
|
+ font-size: 24upx + 2upx;
|
|
|
+ color: #909399;
|
|
|
+ .tit {
|
|
|
+ font-size: 28upx + 2upx;
|
|
|
+ color: #303133;
|
|
|
+ margin-right: 4upx;
|
|
|
}
|
|
|
- .price-box{
|
|
|
- display:flex;
|
|
|
- align-items:baseline;
|
|
|
- height: 64upx;
|
|
|
- padding: 10upx 0;
|
|
|
- font-size: 26upx;
|
|
|
- color:#fa436a;
|
|
|
- }
|
|
|
- .price{
|
|
|
- font-size: $font-lg + 2upx;
|
|
|
- }
|
|
|
- .m-price{
|
|
|
- margin:0 12upx;
|
|
|
- color: #909399;
|
|
|
- text-decoration: line-through;
|
|
|
- }
|
|
|
- .coupon-tip{
|
|
|
- align-items: center;
|
|
|
- padding: 4upx 10upx;
|
|
|
- background: #fa436a;
|
|
|
- font-size: 24upx;
|
|
|
- color: #fff;
|
|
|
- border-radius: 6upx;
|
|
|
- line-height: 1;
|
|
|
- transform: translateY(-4upx);
|
|
|
- }
|
|
|
- .bot-row{
|
|
|
- display:flex;
|
|
|
- align-items:center;
|
|
|
- height: 50upx;
|
|
|
- font-size: 24upx;
|
|
|
- color: #909399;
|
|
|
- text{
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- /* 分享 */
|
|
|
- .share-section{
|
|
|
- display:flex;
|
|
|
- align-items:center;
|
|
|
- color: #606266;
|
|
|
- background: linear-gradient(left, #fdf5f6, #fbebf6);
|
|
|
- padding: 12upx 30upx;
|
|
|
- .share-icon{
|
|
|
- display:flex;
|
|
|
- align-items:center;
|
|
|
- width: 70upx;
|
|
|
- height: 30upx;
|
|
|
- line-height: 1;
|
|
|
- border: 1px solid #fa436a;
|
|
|
- border-radius: 4upx;
|
|
|
- position:relative;
|
|
|
- overflow: hidden;
|
|
|
- font-size: 22upx;
|
|
|
- color: #fa436a;
|
|
|
- &:after{
|
|
|
- content: '';
|
|
|
- width: 50upx;
|
|
|
- height: 50upx;
|
|
|
- border-radius: 50%;
|
|
|
- left: -20upx;
|
|
|
- top: -12upx;
|
|
|
- position:absolute;
|
|
|
- background: #fa436a;
|
|
|
- }
|
|
|
- }
|
|
|
- .icon-xingxing{
|
|
|
- position:relative;
|
|
|
- z-index: 1;
|
|
|
- font-size: 24upx;
|
|
|
- margin-left: 2upx;
|
|
|
- margin-right: 10upx;
|
|
|
- color: #fff;
|
|
|
- line-height: 1;
|
|
|
- }
|
|
|
- .tit{
|
|
|
- font-size: 28upx;
|
|
|
- margin-left:10upx;
|
|
|
- }
|
|
|
- .icon-bangzhu1{
|
|
|
- padding: 10upx;
|
|
|
- font-size: 30upx;
|
|
|
- line-height: 1;
|
|
|
- }
|
|
|
- .share-btn{
|
|
|
- flex: 1;
|
|
|
- text-align:right;
|
|
|
- font-size: 24upx;
|
|
|
- color: #fa436a;
|
|
|
- }
|
|
|
- .icon-you{
|
|
|
- font-size: 24upx;
|
|
|
- margin-left: 4upx;
|
|
|
- color: #fa436a;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .c-list{
|
|
|
- font-size: 24upx + 2upx;
|
|
|
- color: #606266;
|
|
|
- background: #fff;
|
|
|
- border-top: 20upx solid #F5F5F5;
|
|
|
- border-bottom: 20upx solid #F5F5F5;
|
|
|
- .c-row{
|
|
|
- display:flex;
|
|
|
- align-items:center;
|
|
|
- padding: 20upx 30upx;
|
|
|
- position:relative;
|
|
|
- }
|
|
|
- .tit{
|
|
|
- width: 140upx;
|
|
|
- }
|
|
|
- .con{
|
|
|
- flex: 1;
|
|
|
- color: #303133;
|
|
|
- .selected-text{
|
|
|
- margin-right: 10upx;
|
|
|
- }
|
|
|
- }
|
|
|
- .bz-list{
|
|
|
- height: 40upx;
|
|
|
- font-size: 24upx+2upx;
|
|
|
- color: #303133;
|
|
|
- text{
|
|
|
- display: inline-block;
|
|
|
- margin-right: 30upx;
|
|
|
- }
|
|
|
- }
|
|
|
- .con-list{
|
|
|
- flex: 1;
|
|
|
- display:flex;
|
|
|
- flex-direction: column;
|
|
|
- color: #303133;
|
|
|
- line-height: 40upx;
|
|
|
- }
|
|
|
- .red{
|
|
|
- color: #fa436a;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* 评价 */
|
|
|
- .eva-section{
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding: 20upx 30upx;
|
|
|
- background: #fff;
|
|
|
- /* margin-top: 16upx; */
|
|
|
- .e-header{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 70upx;
|
|
|
- font-size: 24upx + 2upx;
|
|
|
- color: #909399;
|
|
|
- .tit{
|
|
|
- font-size: 28upx + 2upx;
|
|
|
- color: #303133;
|
|
|
- margin-right: 4upx;
|
|
|
- }
|
|
|
- .tip{
|
|
|
- flex: 1;
|
|
|
- text-align: right;
|
|
|
- }
|
|
|
- .icon-you{
|
|
|
- margin-left: 10upx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .eva-box{
|
|
|
- display: flex;
|
|
|
- padding: 20upx 0;
|
|
|
- .portrait{
|
|
|
- flex-shrink: 0;
|
|
|
- width: 80upx;
|
|
|
- height: 80upx;
|
|
|
- border-radius: 100px;
|
|
|
- }
|
|
|
- .right{
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- font-size: 28upx;
|
|
|
- color: #606266;
|
|
|
- padding-left: 26upx;
|
|
|
- .con{
|
|
|
- font-size: 28upx;
|
|
|
- color: #303133;
|
|
|
- padding: 20upx 0;
|
|
|
- }
|
|
|
- .bot{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 24upx;
|
|
|
- color:#909399;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- /* 详情 */
|
|
|
- .detail-desc{
|
|
|
- background: #fff;
|
|
|
- margin-top: 16upx;
|
|
|
- margin-bottom: 135rpx;
|
|
|
- width: 100%;
|
|
|
- .d-header{
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- height: 80upx;
|
|
|
- font-size: 28upx + 2upx;
|
|
|
- color: #303133;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- text{
|
|
|
- padding: 0 20upx;
|
|
|
- background: #fff;
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
- &:after{
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 300upx;
|
|
|
- height: 0;
|
|
|
- content: '';
|
|
|
- border-bottom: 1px solid #ccc;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* 规格选择弹窗 */
|
|
|
- .attr-content{
|
|
|
- padding: 10upx 30upx;
|
|
|
- .a-t{
|
|
|
- display: flex;
|
|
|
- image{
|
|
|
- width: 170upx;
|
|
|
- height: 170upx;
|
|
|
- flex-shrink: 0;
|
|
|
- margin-top: -40upx;
|
|
|
- border-radius: 8upx;;
|
|
|
- }
|
|
|
- .right{
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding-left: 24upx;
|
|
|
- font-size: 24upx + 2upx;
|
|
|
- color: #606266;
|
|
|
- line-height: 42upx;
|
|
|
- justify-content: space-around;
|
|
|
- .price{
|
|
|
- font-size: $font-lg;
|
|
|
- color: #D9332E;
|
|
|
- margin-bottom: 10upx;
|
|
|
- }
|
|
|
- .selected-text{
|
|
|
- margin-right: 10upx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .attr-list{
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- font-size: 28upx + 2upx;
|
|
|
- color: #606266;
|
|
|
- padding-top: 30upx;
|
|
|
- padding-left: 10upx;
|
|
|
- }
|
|
|
- .item-list{
|
|
|
- padding: 20upx 0 0;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- text{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background: #eee;
|
|
|
- margin-right: 20upx;
|
|
|
- margin-bottom: 20upx;
|
|
|
- border-radius: 100upx;
|
|
|
- min-width: 60upx;
|
|
|
- height: 60upx;
|
|
|
- padding: 0 20upx;
|
|
|
- font-size: 28upx;
|
|
|
- color: #303133;
|
|
|
- }
|
|
|
- .selected{
|
|
|
- background: #fbebee;
|
|
|
- color: #D9332E;
|
|
|
- }
|
|
|
-
|
|
|
- .disabled {
|
|
|
- color:#999;
|
|
|
- background: rgba(245,245,245, 0.5);
|
|
|
-
|
|
|
+ .tip {
|
|
|
+ flex: 1;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .icon-you {
|
|
|
+ margin-left: 10upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.eva-box {
|
|
|
+ display: flex;
|
|
|
+ padding: 20upx 0;
|
|
|
+ .portrait {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 80upx;
|
|
|
+ height: 80upx;
|
|
|
+ border-radius: 100px;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #606266;
|
|
|
+ padding-left: 26upx;
|
|
|
+ .con {
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #303133;
|
|
|
+ padding: 20upx 0;
|
|
|
+ }
|
|
|
+ .bot {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #909399;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/* 详情 */
|
|
|
+.detail-desc {
|
|
|
+ background: #fff;
|
|
|
+ margin-top: 16upx;
|
|
|
+ margin-bottom: 135rpx;
|
|
|
+ width: 100%;
|
|
|
+ .d-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 80upx;
|
|
|
+ font-size: 28upx + 2upx;
|
|
|
+ color: #303133;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ text {
|
|
|
+ padding: 0 20upx;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ &:after {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 300upx;
|
|
|
+ height: 0;
|
|
|
+ content: '';
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 规格选择弹窗 */
|
|
|
+.attr-content {
|
|
|
+ padding: 10upx 30upx;
|
|
|
+ .a-t {
|
|
|
+ display: flex;
|
|
|
+ image {
|
|
|
+ width: 170upx;
|
|
|
+ height: 170upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-top: -40upx;
|
|
|
+ border-radius: 8upx;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-left: 24upx;
|
|
|
+ font-size: 24upx + 2upx;
|
|
|
+ color: #606266;
|
|
|
+ line-height: 42upx;
|
|
|
+ justify-content: space-around;
|
|
|
+ .price {
|
|
|
+ font-size: $font-lg;
|
|
|
+ color: #d9332e;
|
|
|
+ margin-bottom: 10upx;
|
|
|
+ }
|
|
|
+ .selected-text {
|
|
|
+ margin-right: 10upx;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /* 弹出层 */
|
|
|
- .popup {
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 100upx;
|
|
|
- z-index: 99;
|
|
|
-
|
|
|
- &.show {
|
|
|
- display: block;
|
|
|
- .mask{
|
|
|
- animation: showPopup 0.2s linear both;
|
|
|
- }
|
|
|
- .layer {
|
|
|
- animation: showLayer 0.2s linear both;
|
|
|
- }
|
|
|
- }
|
|
|
- &.hide {
|
|
|
- .mask{
|
|
|
- animation: hidePopup 0.2s linear both;
|
|
|
- }
|
|
|
- .layer {
|
|
|
- animation: hideLayer 0.2s linear both;
|
|
|
- }
|
|
|
- }
|
|
|
- &.none {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .mask{
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 90%;
|
|
|
- z-index: 1;
|
|
|
- background-color: rgba(0, 0, 0, 0.4);
|
|
|
- }
|
|
|
- .layer {
|
|
|
- position: fixed;
|
|
|
- z-index: 99;
|
|
|
- bottom: 100upx;
|
|
|
- width: 100%;
|
|
|
- border-radius: 10upx 10upx 0 0;
|
|
|
- background-color: #fff;
|
|
|
- .btn{
|
|
|
- height: 66upx;
|
|
|
- line-height: 66upx;
|
|
|
- border-radius: 100upx;
|
|
|
- background: #fa436a;
|
|
|
- font-size: 28upx + 2upx;
|
|
|
- color: #fff;
|
|
|
- margin: 30upx auto 20upx;
|
|
|
- }
|
|
|
- }
|
|
|
- @keyframes showPopup {
|
|
|
- 0% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- }
|
|
|
- @keyframes hidePopup {
|
|
|
- 0% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- 90% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- @keyframes showLayer {
|
|
|
- 0% {
|
|
|
- transform: translateY(120%);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: translateY(0%);
|
|
|
- }
|
|
|
- }
|
|
|
- @keyframes hideLayer {
|
|
|
- 0% {
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: translateY(120%);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .colored {
|
|
|
- color: red;
|
|
|
+ }
|
|
|
}
|
|
|
- .van-sticky {
|
|
|
- /* z-index: 0!important; */
|
|
|
+ .attr-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-size: 28upx + 2upx;
|
|
|
+ color: #606266;
|
|
|
+ padding-top: 30upx;
|
|
|
+ padding-left: 10upx;
|
|
|
}
|
|
|
- /* 详情固定 */
|
|
|
- .activeColor {
|
|
|
- /* background: #fff!important; */
|
|
|
+ .item-list {
|
|
|
+ padding: 20upx 0 0;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ text {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #fff;
|
|
|
+ margin-right: 20upx;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+ border-radius: 5upx;
|
|
|
+ border:1px solid #f1f1f1;
|
|
|
+ min-width: 60upx;
|
|
|
+ height: 60upx;
|
|
|
+ padding: 0 20upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+ .selected {
|
|
|
+ border:1px solid #d9251c;
|
|
|
+ color: #d9251c;
|
|
|
+ }
|
|
|
+
|
|
|
+ .disabled {
|
|
|
+ color: #999;
|
|
|
+ background: rgba(245, 245, 245, 0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 弹出层 */
|
|
|
+.popup {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 100upx;
|
|
|
+ z-index: 99;
|
|
|
+
|
|
|
+ &.show {
|
|
|
+ display: block;
|
|
|
+ .mask {
|
|
|
+ animation: showPopup 0.2s linear both;
|
|
|
+ }
|
|
|
+ .layer {
|
|
|
+ animation: showLayer 0.2s linear both;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.hide {
|
|
|
+ .mask {
|
|
|
+ animation: hidePopup 0.2s linear both;
|
|
|
+ }
|
|
|
+ .layer {
|
|
|
+ animation: hideLayer 0.2s linear both;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.none {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .mask {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 90%;
|
|
|
+ z-index: 1;
|
|
|
+ background-color: rgba(0, 0, 0, 0.4);
|
|
|
+ }
|
|
|
+ .layer {
|
|
|
position: fixed;
|
|
|
- background-color: #fff;
|
|
|
- top: 0upx;
|
|
|
z-index: 99;
|
|
|
- margin-top: 0;
|
|
|
+ bottom: 100upx;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 10upx 10upx 0 0;
|
|
|
+ background-color: #fff;
|
|
|
+ .btn {
|
|
|
+ height: 66upx;
|
|
|
+ line-height: 66upx;
|
|
|
+ border-radius: 100upx;
|
|
|
+ background: #fa436a;
|
|
|
+ font-size: 28upx + 2upx;
|
|
|
+ color: #fff;
|
|
|
+ margin: 30upx auto 20upx;
|
|
|
+ }
|
|
|
}
|
|
|
- .numberchange {
|
|
|
- padding-top: 48px;
|
|
|
- overflow: hidden;
|
|
|
- clear: both;
|
|
|
- padding-right: 59rpx;
|
|
|
- padding-bottom: 50rpx;
|
|
|
+ @keyframes showPopup {
|
|
|
+ 0% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
}
|
|
|
- .uni-numbox {
|
|
|
- float: right;
|
|
|
+ @keyframes hidePopup {
|
|
|
+ 0% {
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ 90% {
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- /* 底部操作菜单 */
|
|
|
- .page-bottom{
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- width: 100vw;
|
|
|
- height: 80upx;
|
|
|
- z-index: 99;
|
|
|
- background: rgba(255,255,255,.9);
|
|
|
- .p-b-btn{
|
|
|
- display:flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 24upx;
|
|
|
- color: #606266;
|
|
|
- width: 96upx;
|
|
|
- height: 80upx;
|
|
|
- .yticon{
|
|
|
- font-size: 40upx;
|
|
|
- line-height: 48upx;
|
|
|
- color: #909399;
|
|
|
- }
|
|
|
- &.active, &.active .yticon{
|
|
|
- color: #fa436a;
|
|
|
- }
|
|
|
- .icon-fenxiang2{
|
|
|
- font-size: 42upx;
|
|
|
- transform: translateY(-2upx);
|
|
|
- }
|
|
|
- .icon-shoucang{
|
|
|
- font-size: 46upx;
|
|
|
- }
|
|
|
- }
|
|
|
- .action-btn-group{
|
|
|
- display: flex;
|
|
|
- height: 76upx;
|
|
|
- border-radius: 100px;
|
|
|
- overflow: hidden;
|
|
|
- box-shadow: 0 20upx 40upx -16upx #fa436a;
|
|
|
- box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
|
|
|
- background: linear-gradient(to right, #ffac30,#fa436a,#F56C6C);
|
|
|
- margin-left: 20upx;
|
|
|
- position:relative;
|
|
|
- &:after{
|
|
|
- content: '';
|
|
|
- position:absolute;
|
|
|
- top: 50%;
|
|
|
- right: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- height: 28upx;
|
|
|
- width: 0;
|
|
|
- border-right: 1px solid rgba(255,255,255,.5);
|
|
|
- }
|
|
|
- .action-btn{
|
|
|
- display:flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 180upx;
|
|
|
- height: 100%;
|
|
|
- font-size: 28upx ;
|
|
|
- padding: 0;
|
|
|
- border-radius: 0;
|
|
|
- background: transparent;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .van-goods-action-button--last {
|
|
|
- border-radius: none!important;
|
|
|
- --button-border-radius: none!important;
|
|
|
+ @keyframes showLayer {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(120%);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translateY(0%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @keyframes hideLayer {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: translateY(120%);
|
|
|
+ }
|
|
|
}
|
|
|
- .van-goods-action-button--first {
|
|
|
- border-radius: none!important;
|
|
|
- --button-border-radius: none!important;
|
|
|
+}
|
|
|
+.colored {
|
|
|
+ color: red;
|
|
|
+}
|
|
|
+.van-sticky {
|
|
|
+ /* z-index: 0!important; */
|
|
|
+}
|
|
|
+/* 详情固定 */
|
|
|
+.activeColor {
|
|
|
+ /* background: #fff!important; */
|
|
|
+ position: fixed;
|
|
|
+ background-color: #fff;
|
|
|
+ top: 0upx;
|
|
|
+ z-index: 99;
|
|
|
+ margin-top: 0;
|
|
|
+}
|
|
|
+.numberchange {
|
|
|
+ padding-top: 48px;
|
|
|
+ overflow: hidden;
|
|
|
+ clear: both;
|
|
|
+ padding-right: 59rpx;
|
|
|
+ padding-bottom: 50rpx;
|
|
|
+}
|
|
|
+.uni-numbox {
|
|
|
+ float: right;
|
|
|
+}
|
|
|
+
|
|
|
+/* 底部操作菜单 */
|
|
|
+.page-bottom {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 100vw;
|
|
|
+ height: 80upx;
|
|
|
+ z-index: 99;
|
|
|
+ background: rgba(255, 255, 255, 0.9);
|
|
|
+ .p-b-btn {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 24upx;
|
|
|
+ color: #606266;
|
|
|
+ width: 96upx;
|
|
|
+ height: 80upx;
|
|
|
+ .yticon {
|
|
|
+ font-size: 40upx;
|
|
|
+ line-height: 48upx;
|
|
|
+ color: #909399;
|
|
|
+ }
|
|
|
+ &.active,
|
|
|
+ &.active .yticon {
|
|
|
+ color: #fa436a;
|
|
|
+ }
|
|
|
+ .icon-fenxiang2 {
|
|
|
+ font-size: 42upx;
|
|
|
+ transform: translateY(-2upx);
|
|
|
+ }
|
|
|
+ .icon-shoucang {
|
|
|
+ font-size: 46upx;
|
|
|
+ }
|
|
|
}
|
|
|
- .changeimg {
|
|
|
- width: 100%;
|
|
|
- height: auto!important;
|
|
|
- display: block;
|
|
|
- text-align: center;
|
|
|
+ .action-btn-group {
|
|
|
+ display: flex;
|
|
|
+ height: 76upx;
|
|
|
+ border-radius: 100px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 20upx 40upx -16upx #fa436a;
|
|
|
+ box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
|
|
|
+ background: linear-gradient(to right, #ffac30, #fa436a, #f56c6c);
|
|
|
+ margin-left: 20upx;
|
|
|
+ position: relative;
|
|
|
+ &:after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ right: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ height: 28upx;
|
|
|
+ width: 0;
|
|
|
+ border-right: 1px solid rgba(255, 255, 255, 0.5);
|
|
|
+ }
|
|
|
+ .action-btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 180upx;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 28upx;
|
|
|
+ padding: 0;
|
|
|
+ border-radius: 0;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
}
|
|
|
- </style>
|
|
|
-
|
|
|
+}
|
|
|
+.van-goods-action-button--last {
|
|
|
+ border-radius: none !important;
|
|
|
+ --button-border-radius: none !important;
|
|
|
+}
|
|
|
+.van-goods-action-button--first {
|
|
|
+ border-radius: none !important;
|
|
|
+ --button-border-radius: none !important;
|
|
|
+}
|
|
|
+.changeimg {
|
|
|
+ width: 100%;
|
|
|
+ height: auto !important;
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|