Client-Teapay/src/pagesB/orderingfood/orderingfood.vue

<template>
    <view class="content">
        <block v-if="loading">
            <view class="loadingBox">
                <img class="loading" lazy-load src="http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/3a96ff52efce6661adb41c54c29a87241b6e72f5gif" />
            </view>
        </block>
        <block v-else>
            <view class="header flex_r flex_jb">
                <view class="left flex_c flex_jc">
                    <view class="title ellipsis">{{MerchantInfo.restaurant_name}}</view>
                    <view v-if="distance" class="address">距离您 {{$h.Div(distance, 1000).toFixed(2)}}km</view>
                    <view v-else class="address">{{MerchantInfo.restaurant_address}}</view>
                </view>
                <view class="right flex_c flex_jc">
                    <span @click="openm" class="iconfont">&#xe634;</span>
                </view>
            </view>
            <view style="height: 130rpx;"></view>
            <view class="goodsBox" v-if="goodsAllList.length">
                <view class="left">
                    <scroll-view scroll-y scroll-with-animation class="menuList">
                        <view class="menu" :class="menuCurrent==index?'active':''" :style="menuCurrent==index?'color:'+template.color.color2+';border-color:'+template.color.color1:'color:'+template.color.color3" @click="selectMenuTap(index)" v-for="(item, index) in goodsAllList" :key="index">{{item.title}}</view>
                        <view style="height: 200rpx;"></view>
                    </scroll-view>
                </view>
                <view class="right">
                    <scroll-view scroll-y scroll-with-animation :scroll-into-view="goodsInto" class="goodList">
                        <!-- <view v-if="swiperList.length>0" class="swiperBpx">
                            <swiper class="swiper" circular autoplay interval="6000" duration="500" @change="swiperChange">
                                <swiper-item v-for="(item, index) in swiperList" :key="index" @click="getBannerTap(item.target_data)">
                                    <image lazy-load="true" mode="aspectFill" :src="item.pic" />
                                </swiper-item>
                            </swiper>
                            <view class="swiperDots">
                                <block v-for="(item, index) in swiperList" :key="index">
                                    <view class="dot" :class="swiperCurrent==index?'active':''"></view>
                                </block>
                            </view>
                        </view> -->
                        <view id="goodsQuery" v-for="(item, index) in goodsAllList" :key="index">
                            <view class="goodsList" :id="'gory-'+index">
                                <view class="gheader" :style="'color:'+template.color.color2">{{item.title}}</view>
                                <view class="goods lineBottom" v-for="(itm, idx) in item.goods" :key="idx" @click="getDteailsTap(index, idx)">
                                    <view class="left">
                                        <view class="image">
                                            <img :src="itm.product_img" class="product_img" alt="">
                                            <icon v-if="itm.recom_status" class="icon" type="hot" size="30" color="#d3aa79"></icon>
                                            <view v-if="itm.stock_number==0" class="none" :style="'color:'+template.color.color5">已售罄</view>
                                        </view>
                                    </view>
                                    <view class="right">
                                        <view class="title" :style="'color:'+template.color.color2">{{itm.product_name}}</view>
                                        <view class="intro" :style="'color:'+template.color.color3">{{itm.product_description || ""}}</view>
                                        <view class="box">
                                            <view class="price" :style="'color:'+template.color.color1">¥{{itm.product_price}}</view>
                                            <view class="button">
                                                <view v-if="itm.product_choose" class="text" :style="'background-color:'+template.color.color1">选规格</view>
                                                <icon v-else type="jia" size="23" :color="template.color.color1"></icon>
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view style="height: 180rpx;"></view>
                    </scroll-view>
                </view>
            </view>
            <div class="hahaha">
                <img src="http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/769023cde4b820d36e75baf7b3faef6ea3095cb3png" alt="">
            </div>
            <!-- 购物袋 - 底部栏 -->
            <view v-if="openStoreStatus && cartList.length>0" class="footer" :class="ios>=0?'footerX':''">
                <view class="left">
                    <view class="cart" @click="cartShow=!cartShow" :style="'color:'+template.color.color2">
                        <icon type="liwu" size="18" color="#343434"></icon>购物袋<text :style="'background-color:'+template.color.color1">{{cartNumber}}</text>
                    </view>
                    <view class="price" :style="'color:'+template.color.color2">¥{{cartTotal}}</view>
                </view>
                <view class="right">
                    <view v-if="cartNumber>0" class="button" @click="toPaypalTap()" :style="'background-color:'+template.color.color1">去结算</view>
                    <view v-else class="button none" :style="'background-color:'+template.color.color5">去结算</view>
                </view>
            </view>
            <!-- 购物袋 - 弹窗列表 -->
            <view v-if="cartShow && cartList.length>0" class="showPopBox" style="z-index: 898;">
                <view class="bg" @click="cartShow=false"></view>
                <view class="showContent" :style="ios>=0?'bottom:96rpx;':''">
                    <view class="sheade">
                        <view class="left">
                            <view class="text">共{{cartNumber}}件商品</view>
                        </view>
                        <view class="right">
                            <view class="text" @click="delNoneCartTap()">
                                <icon type="shanchu" size="14" />清空购物袋</view>
                        </view>
                    </view>
                    <view class="sconten">
                        <view class="goods" v-for="(item, index) in cartList" :key="index" :style="cartList.length==(index+1)?'border-bottom: none;':''">
                            <view class="left">
                                <view class="title">{{item.product_name}}</view>
                                <view class="label" v-if="item.spec">
                                    <text v-for="(value, name) in item.spec.selectSpecification" :key="name" class="good_spec">{{value}}</text>
                                </view>
                            </view>
                            <view class="right">
                                <view class="price">¥{{$h.Add(item.product_price, item.spec_price)}}</view>
                                <view class="buy">
                                    <icon type="jian" @click="editGoods(item, 'jian')" size="23" :color="item.number==1?'#ccc':'#d3aa79'"></icon>
                                    <input type="number" :value="item.number" disabled />
                                    <icon type="jia" @click="editGoods(item, 'jia')" size="23" color="#d3aa79"></icon>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view v-if="!openStoreStatus" class="footer" :class="ios>=0?'footerX':''" style="overflow: hidden;">
                <view class="label" :style="'background-color:'+template.color.color2">本店已休息，<block v-if="MerchantInfo.open_time">营业时间{{MerchantInfo.open_time}}</block>
                </view>
            </view>
            <!-- 选规格-看详情 -->
            <view v-if="goodShow" class="showPopBox" style="display: flex;align-items: center;justify-content: center;">
                <view class="bg" @click="goodShow=false"></view>
                <view class="goodsConten">
                    <view class="image">
                        <image :src="goodsOneData.product_img" class="img" mode="aspectFill" />
                        <icon @click="goodShow=false" type="close" size="25" :color="template.color.color5" style="top: 10rpx; right: 10rpx;"></icon>
                    </view>
                    <view class="title" :style="'color:'+template.color.color2">{{goodsOneData.product_name}}</view>
                    <scroll-view scroll-y class="moreBox" style="max-height: 500rpx;">

                        <!-- 奈雪规格 -->
                        <template v-if="mda.brand_id == 2">
                            <view class="label" v-for="(item, index) in goodsOneData.details.spu_specs" :key="index">
                                <view class="stitle"><text>{{item.name}}</text></view>
                                <view class="specBox">
                                    <view class="spec" :class="{active:itm.checked}" @click="naixues(index, idx)" v-for="(itm, idx) in item.values" :key="idx">{{itm.name + (itm.price ? ` +${itm.price}` : "")}}</view>
                                </view>
                            </view>
                            <view class="label">
                                <view class="stitle"><text>加料</text></view>
                                <view class="specBox">
                                    <view class="spec" :class="{active:itm.checked}" @click="naixue(idx,itm.checked)" v-for="(itm, idx) in goodsOneData.details.accessories" :key="idx">{{itm.name + (itm.price ? ` +${itm.price}` : "")}}</view>
                                </view>
                            </view>
                        </template>
                        <!-- 瑞辛规格 -->
                        <template v-else-if="mda.brand_id == 13">
                            <view class="label" v-for="(item, index) in goodsOneData.details.specifications" :key="index">
                                <view class="stitle"><text>{{item.name}}</text></view>
                                <view class="specBox">
                                    <view class="spec" :class="{active:itm.checked}" @click="ruixins(index, idx)" v-for="(itm, idx) in item.ingredients" :key="idx">{{itm.name + (itm.price ? ` +${itm.price}` : "")}}</view>
                                </view>
                            </view>
                        </template>
                        <!-- 喜茶规格 -->
                        <template v-else-if="mda.brand_id == 19">
                            <view class="label" v-for="(item, index) in goodsOneData.details.specifications" :key="index">
                                <view class="stitle"><text>{{item.name}}</text></view>
                                <view class="specBox">
                                    <view class="spec" :class="{active:itm.checked}" @click="xichas(index, idx)" v-for="(itm, idx) in item.values" :key="idx">{{itm.name + (itm.price ? ` +${itm.price}` : "")}}</view>
                                </view>
                            </view>
                        </template>
                        <!-- 其他规格 -->
                        <template v-else>
                            <view class="label" v-for="(item, index) in goodsOneData.details.optional" :key="index">
                                <view class="stitle"><text>{{item.name}}</text></view>
                                <view class="specBox">
                                    <view class="spec" :class="{active:itm.checked}" @click="selectSpecsTap(index, idx)" v-for="(itm, idx) in item.sku_infos" :key="idx">{{itm.name + (itm.price ? ` +${itm.price}` : "")}}</view>
                                </view>
                            </view>
                        </template>

                        <view class="more" v-if="goodsOneData.product_description">
                            <view class="labtit" :style="'color:'+template.color.color3">产品介绍</view>
                            <view class="intro" :style="'color:'+template.color.color3">{{goodsOneData.product_description}}</view>
                        </view>
                    </scroll-view>
                    <view class="gfooter">
                        <view class="price">
                            <view class="left">
                                <view v-if="childProductData.spec_price" class="text" :style="'color:'+template.color.color1">¥{{childProductData.spec_price + goodsOneData.product_price}}</view>
                                <view v-else class="text" :style="'color:'+template.color.color1">¥{{goodsOneData.product_price}}</view>
                                <view class="label" v-if="childProductData.selectSpecification" :style="'color:'+template.color.color3">
                                    <text v-for="(value, name) in childProductData.selectSpecification" :key="name" class="good_spec">{{value}} </text>
                                </view>
                            </view>
                            <view class="right">
                                <view class="buy">
                                    <icon type="jian" @click="editGoodsOne('jian')" size="23" :color="template.color.color1"></icon>
                                    <input type="number" :value="buyNumber" disabled :style="'color:'+template.color.color2" />
                                    <icon type="jia" @click="editGoodsOne('jia')" size="23" :color="template.color.color1"></icon>
                                </view>
                            </view>
                        </view>
                        <view class="button" @click="addShopCar()" :style="'background-color:'+template.color.color1">加入购物袋</view>
                    </view>
                </view>
            </view>
        </block>
    </view>
</template>
<script>
import Icon from "@/pagesB/components/icon/icon.vue";
import { post } from "@/request/api.js";
export default {
    components: { Icon },
    props: {
        goods: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            loading: true,
            ios: 1,
            template: {
                color: {
                    color1: "#d3aa79",
                    color2: "#323232",
                    color3: "#999",
                    color5: "#bbb"
                }
            },
            menuCurrent: 0,
            menuList: [],
            swiperCurrent: 0,
            swiperList: [],
            cartTotal: 0,
            cartNumber: 0,
            cartList: [],
            goodsOneData: '',
            buyNumber: 1,
            canSubmit: false,
            childProductData: {},
            // buyActive: false,
            cartShow: false,
            infoShow: false,
            goodShow: false,
            goodsInto: '',
            goodsAllList: [],
            distance: 0,
            openStoreStatus: true,
            openStoreTime: '',
            MerchantInfo: uni.getStorageSync("MerchantItem"),
            mda: {},
        }
    },
    onReady() {
        this.distance = this.MerchantInfo.distance;
        uni.setNavigationBarTitle({ title: this.MerchantInfo.restaurant_name });
        this.getCartList();

        let that = this;
        uni.getSystemInfo({
            success: function(e) {
                that.ios = e.model.search("iPhone");
            }
        })
    },
    onLoad(da) {
        this.getGoodsAllList(da)
        this.mda = da
    },
    methods: {
        // 获取当下店铺所有商品
        getGoodsAllList(da) {
            post("local/getMerchantMenu", da).then(res => {
                this.loading = false;
                if (res.code == 0) {
                    if (res.data.error_code == 200) {
                        let da = res.data.data.products;
                        let arr = [],
                            obj = [];
                        for (const it of da) {
                            // if ([2, 13, 19].includes(res.data.data.brand_id)) it.product_choose = false
                            if (!arr.includes(it.category_name)) arr.push(it.category_name)
                        }
                        for (const i of arr) {
                            obj.push({ title: i, goods: [] })
                        }
                        for (const it of da) {
                            obj[arr.indexOf(it.category_name)].goods.push(it)
                        }
                        this.goodsAllList = obj
                    }
                } else if (res.code == -1) {
                    this.openStoreStatus = false
                }
            })
        },
        // 商品类别导航跳转
        selectMenuTap(index) {
            this.menuCurrent = index;
            this.goodsInto = 'gory-' + index;
        },
        // 获取商品详情 - 展开规格选择
        getDteailsTap(index, idx) {
            this.childProductData = {};
            let data = this.goodsAllList[index].goods[idx];
            // if (![2,13,19].includes(data.brand_id) && data.product_choose) {
            if (data.product_choose) {
                post("local/getProduct", { ...this.mda, product_id: data.product_id }).then(res => {
                    if (res.code === 0) {
                        let da = res.data.data
                        this.goodsOneData = da;
                        this.goodShow = true;

                        if(this.mda.brand_id == 2) this.naixueSpec()
                        else if(this.mda.brand_id == 13) this.ruixinSpec()
                        else if(this.mda.brand_id == 19) this.xichasSpec()
                        else this.selectSpec()
                    }
                })
            } else {
                this.goodsOneData = data;
                this.goodShow = true;
            }
        },
        // 选择规格标签 奈雪
        naixues(index, key) {
            let da = this.goodsOneData.details.spu_specs;
			da[index].values.forEach(value => this.$set(value, 'checked', 0))
			da[index].values[key].checked = 1
            this.naixueSpec();
        },
        naixueSpec(){
            this.childProductData.product_details = []
            let da = this.goodsOneData.details.spu_specs;
            let arr = [], obj = this.childProductData.selectSpecification || {};
            let arrs = [];
            for (let it of da) {
                for (let i of it.values) {
                    if(i.checked) {
                        arr.push(i);
                        obj[it.name] = i.name
                        let arrb = []
                        if(arr.length == 1) arrs = this.goodsOneData.details.sku_infos
                        for (const a of arrs) {
                            for (const b of a.specs) {
                                if(i.code == b.spec_code) arrb.push(a)
                            }
                        }
                        arrs = arrb
                    }
                }
            }
            this.childProductData.selectSpecArr = arr
            this.childProductData.selectSpecification = obj
            this.childProductData.product_details[0].sku_code = arrs[0].code
        },
        naixue(key,r) {
            let selectSpecification = this.childProductData.selectSpecification || {};
            let da = this.goodsOneData.details.accessories;
			da.forEach(value => this.$set(value, 'checked', 0))
			da[key].checked = r ? 0 : 1;
            this.childProductData.spec_price = !r ? da[key].price : 0
            if(!r) selectSpecification['加料'] = da[key].name
            else delete selectSpecification['加料']
            this.childProductData.selectSpecification = selectSpecification
            this.childProductData.product_details[0].accessories_code = da[key].code
        },
        // 选择规格标签 瑞辛
        ruixins(index, key) {
            let da = this.goodsOneData.details.specifications;
			da[index].ingredients.forEach(value => this.$set(value, 'checked', false))
			da[index].ingredients[key].checked = true
            this.ruixinSpec();
        },
        ruixinSpec(){
            let da = this.goodsOneData.details.specifications;
            let arr = [], obj = this.childProductData.selectSpecification || {};
            let arrs = [];
            for (let it of da) {
                for (let i of it.ingredients) {
                    if(i.checked) {
                        arr.push(i);
                        obj[it.name] = i.name
                        let arrb = []
                        if(arr.length == 1) arrs = this.goodsOneData.details.sku_infos
                        for (const a of arrs) {
                            for (const b of a.values) {
                                if(i.name == b.spec_name) arrb.push(a)
                            }
                        }
                        arrs = arrb
                    }
                }
            }
            let sku = {
                sku_code : arrs[0].code
            }
            this.childProductData = {
                selectSpecArr: arr,
                selectSpecification: obj,
                product_details: [sku]
            }
        },
        xichas(index, key){
            let da = this.goodsOneData.details.specifications;
			da[index].values.forEach(value => this.$set(value, 'checked', 0))
			da[index].values[key].checked = 1
            this.xichasSpec();
        },
        xichasSpec(){
            let spec_price = 0;
            let da = this.goodsOneData.details.specifications;
            let arr = [], obj = this.childProductData.selectSpecification || {};
            let accessories_id = [], sku_id = [];
            for (let it of da) {
                for (let i of it.values) {
                    if(i.checked) {
                        arr.push(i);
                        obj[it.name] = i.name
                        spec_price = this.$h.Add(spec_price,i.price)
                        if(it.mandatory) sku_id.push(i.id)
                        else accessories_id.push(i.id)
                    }
                }
            }
            let product_details = [{
                accessories_id: accessories_id.join(),
                sku_id: sku_id.join()
            }]
            this.childProductData = {
                selectSpecArr: arr,
                selectSpecification: obj,
                spec_price,
                product_details
            }
        },
        // 选择规格标签
        selectSpecsTap(index, key) {
            let da = this.goodsOneData.details.optional;
			da[index].sku_infos.forEach(value => this.$set(value, 'checked', false))
			da[index].sku_infos[key].checked = true
            this.selectSpec();
        },
        selectSpec(){
            let spec_price = 0, product_details = [];
            let da = this.goodsOneData.details.optional;
            let arr = [], obj = this.childProductData.selectSpecification || {};
            for (let it of da) {
                for (let i of it.sku_infos) {
                    if(i.checked) {
                        arr.push(i);
                        obj[it.name] = i.name
                        spec_price = this.$h.Add(spec_price,i.price)
                        product_details.push({
                            specification_id: it.id,
                            sku_id: i.id
                        })
                    }
                }
            }
            this.childProductData = {
                selectSpecArr: arr,
                selectSpecification: obj,
                spec_price,
                product_details
            }
        },
        // 添加购物袋前  修改购买数量
        editGoodsOne(type) {
            let self = this;
            if (type == 'jian') {
                if (self.buyNumber > 1) {
                    self.buyNumber--
                }
            } else if (type == 'jia') {
                self.buyNumber++
            }
        },
        // 添加进购物袋
        addShopCar() {
            let data = this.goodsOneData;
            this.addCartGoods(data, this.buyNumber, this.childProductData);
        },
        // 添加购物袋
        addCartGoods(da, num, spec = []) {
            let json = {
                ...this.mda,
                product_id: da.product_id,
                product_img: da.product_img,
                product_name: da.product_name,
                product_price: da.product_price,
                spec_price: spec.spec_price,
                number: num,
                spec: JSON.stringify(spec)
            }
            post("local/addMyCart", json).then(res => {
                if (res.code == 0) {
                    this.goodShow = false;
                    setTimeout(() => {
                        this.getCartList();
                    }, 100)
                }
            })
        },
        // 编辑购物袋中商品数量
        editGoods(data, type) {
            let self = this;
            if (type == 'jian') {
                data.number--
            } else if (type == 'jia') {
                data.number++
            }
            let url = "local/editMyCart",
                da = {};
            if (data.number < 1) {
                data.number = 1;
                url = "local/delMyCart";
                da = { cart_id: data.id }
            } else {
                url = "local/editMyCart";
                da = { cart_id: data.id, number: data.number }
            }
            post(url, da).then(res => {
                if (res.code == 0) {
                    setTimeout(() => {
                        this.getCartList();
                    }, 100)
                }
            })
        },
        // 购物袋列表 获取当前店铺
        getCartList() {
            post("local/myCart", {
                restaurant_id: this.mda.restaurant_id,
            }).then(res => {
                if (res.code == 0) {
                    let data = res.data;
                    let totals = 0;
                    let number = 0;
                    data.forEach(itm => {
                        number += itm.number;
                        totals = this.$h.Add(totals, this.$h.Mul(this.$h.Add(itm.product_price, itm.spec_price), itm.number));
                        itm.spec = JSON.parse(itm.spec)
                    })
                    this.cartList = data;
                    this.cartTotal = totals;
                    this.cartNumber = number;
                }
            })
        },
        // 清空购物袋
        delNoneCartTap() {
            let self = this;
            if (self.cartList.length > 0) {
                uni.showModal({
                    title: '清空购物袋',
                    content: '是否清空已经加入购物袋的商品？',
                    success(res) {
                        if (res.confirm) {
                            post("local/cleanCart", {
                                restaurant_id: self.mda.restaurant_id,
                            }).then(res => {
                                if (res.code == 0) {
                                    self.cartShow = false;
                                    self.cartList = [];
                                }
                            })
                        }
                    }
                })
            }
        },

        // 去结算页
        toPaypalTap() {
            this.goto("/pagesB/orderingfood/payTheBill", {
                restaurant_id: this.mda.restaurant_id,
                brand_id: this.mda.brand_id,
            })
        },
        openm() {
            let latitude = parseFloat(this.MerchantInfo.latitude);
            let longitude = parseFloat(this.MerchantInfo.longitude);
            let name = this.MerchantInfo.brand_name;
            let address = this.MerchantInfo.restaurant_address;
            uni.openLocation({
                latitude, longitude, scale: 18, name, address,
                success: function() {
                    console.log('success');
                }
            });
        },
    }
}
</script>
<style lang="scss">
page {
    background-color: #f5f5f5;
    overflow: hidden;
}

.header {
    width: 100%;
    height: 130rpx;
    position: fixed;
    top: 0;
    z-index: 900;
    background-color: #fff;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, .05);
    padding: 0 32rpx;

    .left {
        width: calc(100% - 60rpx);

        .title {
            width: 90%;
            color: #343434;
            font-size: 30rpx;
            font-weight: bold;
        }

        .address {
            width: 90%;
            color: #999;
            font-size: 26rpx;
            padding-top: 6rpx;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    }

    .right {
        width: 60rpx;
        text-align: right;

        .iconfont {
            font-size: 50rpx;
            color: #666;
        }
    }
}

.goodsBox {
    width: 100%;
    display: flex;
    height: calc(100vh - 130rpx);

    .left {
        flex: 0 0 28%;

        .menuList {
            overflow-y: scroll;
            height: calc(100vh - 130rpx);

            .menu {
                color: #999999;
                font-size: 26rpx;
                padding: 30rpx 10rpx;
                text-align: center;
                background-color: transparent;
                border-left: 16rpx solid transparent;
                transition: all 0.6s;
            }

            .active {
                font-weight: bold;
                background-color: #FFFFFF;
            }
        }
    }

    .right {
        flex: 0 0 72%;
        background-color: #FFFFFF;

        .swiperBpx {
            width: 95%;
            margin: 0 auto;
            padding-top: 14rpx;
            position: relative;

            swiper {
                height: 220rpx;

                .swiper-item {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #FFFFFF;
                    font-size: 56rpx;
                }
            }

            .swiperDots {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 12rpx;
                display: flex;
                justify-content: center;
                height: 10rpx;

                .dot {
                    margin: 0 5rpx;
                    width: 25rpx;
                    height: 4rpx;
                    background: #fff;
                    border-radius: 20rpx;
                    transition: all 0.6s;
                    opacity: 0.5;
                }

                .active {
                    opacity: 1;
                }
            }
        }

        .goodList {
            height: calc(100vh - 130rpx);
        }

        .goodsList {
            width: 95%;
            margin: 0 auto;

            .gheader {
                font-weight: bold;
                font-size: 26rpx;
                display: flex;
                height: 100rpx;
                align-items: center;
            }

            .goods {
                display: flex;
                position: relative;
                padding-bottom: 20rpx;
                margin-bottom: 20rpx;

                .left {
                    flex: 0 0 30%;
                    display: flex;

                    .image {
                        width: 140rpx;
                        height: 140rpx;
                        background-color: #f5f5f5;
                        border-radius: 6rpx;
                        overflow: hidden;
                        position: relative;

                        .icon {
                            position: absolute;
                            top: 0;
                            left: 0;
                        }

                        .none {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            background-color: rgba(255, 255, 255, .6);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 26rpx;
                            color: #999;
                        }
                    }
                }

                .right {
                    flex: 0 0 70%;

                    .title {
                        color: #343434;
                        font-size: 26rpx;
                        font-weight: bold;
                    }

                    .intro {
                        color: #999;
                        font-size: 24rpx;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        padding-top: 4rpx;
                    }

                    .box {
                        display: flex;
                        align-items: center;
                        padding-top: 10rpx;
                        position: relative;

                        .price {
                            color: #343434;
                            font-size: 28rpx;
                            font-weight: bold;
                            flex: 0 0 50%
                        }

                        .button {
                            flex: 0 0 50%;
                            display: flex;
                            justify-content: flex-end;

                            .text {
                                background-color: #d3aa79;
                                color: #fff;
                                font-size: 24rpx;
                                padding: 4rpx 16rpx;
                                border-radius: 100rpx;
                            }
                        }
                    }
                }

            }
        }
    }
}

.hahaha {
    text-align: center;
    margin-top: calc(30vh - 150rpx);
}

.footer {
    position: fixed;
    bottom: 80rpx;
    width: 92%;
    left: 0;
    right: 0;
    height: 100rpx;
    margin: 0 auto;
    border-radius: 100rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    z-index: 899;
    box-shadow: 0 0 20rpx rgba(0, 0, 0, .05);

    .label {
        color: #fff;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .left {
        flex: 0 0 70%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 100%;

        .cart {
            position: absolute;
            width: 180rpx;
            height: 100%;
            left: 0;
            color: #343434;
            font-size: 26rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            icon {
                padding-right: 8rpx;
            }

            text {
                position: absolute;
                top: -8rpx;
                right: -12rpx;
                background-color: #d3aa79;
                border-radius: 100%;
                width: 36rpx;
                height: 36rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-size: 24rpx;
            }
        }

        .price {
            color: #343434;
            font-size: 30rpx;
            padding-right: 30rpx;
            font-weight: bold;
        }
    }

    .right {
        flex: 0 0 30%;
        height: 100%;
        border-top-right-radius: 100rpx;
        border-bottom-right-radius: 100rpx;
        overflow: hidden;

        .button {
            width: 100%;
            height: 100%;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #d3aa79;
        }

        .none {
            background-color: #bbbbbb;
        }
    }
}

.footerX {
    bottom: 106rpx;
}

.showPopBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 970;
    transition: all 0.3s;

    .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 971;
    }

    .showContent {
        position: absolute;
        bottom: 70rpx;
        left: 0;
        z-index: 972;
        width: 100%;
        max-height: 600rpx;
        background-color: #fff;
        border-radius: 26rpx 26rpx 0 0;

        .sheade {
            width: 100%;
            background-color: #f2f2f2;
            font-size: 24rpx;
            height: 68rpx;
            display: flex;
            align-items: center;
            border-radius: 26rpx 26rpx 0 0;

            .left {
                flex: 0 0 50%;

                .text {
                    color: #999;
                    padding-left: 20rpx;
                }
            }

            .right {
                flex: 0 0 50%;

                .text {
                    color: #999;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    padding-right: 20rpx;

                    icon {
                        padding-right: 6rpx;
                    }
                }
            }
        }

        .sconten {
            padding: 20rpx 0 120rpx;
            max-height: 544rpx;
            overflow-y: scroll;

            .goods {
                width: 95%;
                margin: 0 auto;
                display: flex;
                align-items: center;
                border-bottom: 1px dashed #f5f5f5;
                padding: 15rpx 0;

                .left {
                    flex: 0 0 60%;

                    .title {
                        color: #343434;
                    }
                }

                .right {
                    flex: 0 0 40%;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;

                    .price {
                        flex: 0 0 40%;
                        color: #343434;
                    }

                    .buy {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex: 0 0 60%;

                        input {
                            text-align: center;
                            color: #343434;
                        }

                        text {
                            color: #999;
                            font-size: 24rpx;
                        }
                    }
                }
            }
        }
    }

    .infoContent {
        position: absolute;
        z-index: 972;
        width: 100%;
        max-height: 55vh;
        top: 130rpx;
        background-color: #fff;
        left: 0;
        overflow-y: scroll;
        padding-bottom: 20rpx;
        padding-top: 10rpx;

        .label {
            width: 95%;
            margin: 0 auto;
            padding: 12rpx 0;

            .title {
                color: #343434;
                font-size: 26rpx;
            }

            .text {
                color: #999;
                font-size: 24rpx;
                padding-top: 4rpx;
            }
        }

        .images {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding-top: 6rpx;

            .image {
                width: 200rpx;
                height: 200rpx;
                border: 2rpx solid #f5f5f5;
                background-color: #f5f5f5;
                margin-right: 20rpx;
                position: relative;

                .text {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    background-color: rgba(255, 255, 255, .6);
                    height: 50rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #666;
                    font-size: 26rpx;
                }
            }
        }
    }

    .goodsConten {
        position: absolute;
        z-index: 972;
        width: 80%;
        background-color: #fff;
        border-radius: 10rpx;
        padding-bottom: 20rpx;
        margin-top: -5vh;
        box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, .06);

        .image {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;

            .img {
                width: 100%;
                height: 320rpx;
                border-radius: 10rpx 10rpx 0 0;
            }

            icon {
                position: absolute;
            }
        }

        .title {
            width: 90%;
            margin: 0 auto;
            padding-top: 10rpx;
            padding-bottom: 10rpx;
            color: #343434;
            font-weight: bold;
        }

        .moreBox {
            width: 90%;
            margin: 0 auto;

            .label {
                padding-bottom: 10rpx;

                .stitle {
                    padding-bottom: 10rpx;

                    text {
                        color: #999;
                        font-size: 26rpx;
                    }
                }

                .specBox {
                    display: flex;
                    flex-wrap: wrap;

                    .spec {
                        border: 1px solid #eee;
                        padding: 8rpx 20rpx;
                        margin-right: 12rpx;
                        font-size: 24rpx;
                        color: #999999;
                    }

                    .active {
                        color: #FFFFFF;
                        background-color: #d3aa79;
                        border-color: #d3aa79;
                    }
                }
            }

            .more {
                padding-bottom: 20rpx;

                .labtit {
                    color: #999;
                    font-size: 26rpx;
                    padding-top: 10rpx;
                }

                .intro {
                    color: #999;
                    font-size: 24rpx;
                }
            }
        }

        .gfooter {
            border-top: 1px solid #f5f5f5;
            padding-top: 20rpx;

            .price {
                width: 90%;
                margin: 0 auto;
                display: flex;
                padding: 10rpx 0;
                align-items: center;
                justify-content: center;

                .left {
                    flex: 0 0 65%;

                    .text {
                        color: #d3aa79;
                        font-size: 32rpx;
                        font-weight: bold;
                        display: flex;
                        align-items: center;

                        text {
                            text-decoration: line-through;
                            color: #999;
                            font-size: 26rpx;
                            margin-left: 10rpx;
                            font-weight: normal;
                        }
                    }

                    .label {
                        color: #999;
                        font-size: 24rpx;
                    }
                }

                .right {
                    flex: 0 0 35%;
                    display: flex;
                    justify-content: flex-end;

                    .buy {
                        display: flex;
                        align-items: center;

                        input {
                            text-align: center;
                            color: #343434;
                        }
                    }
                }
            }

            .button {
                width: 90%;
                margin: 0 auto;
                margin-top: 20rpx;
                background-color: #d3aa79;
                color: #fff;
                height: 66rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 100rpx;
                font-size: 26rpx;
            }

            .none {
                background-color: #cccccc;
            }
        }
    }
}

.product_img {
    width: 100%;
    height: 100%;
}

.good_spec {
    color: #999;
    font-size: 22rpx;
    margin-right: 12rpx;

    &:last-child {
        margin-right: 0;
    }
}

.loadingBox {
    .loading {
        width: 100%;
        height: 100vw;
    }
}
</style>