|
|
@@ -1,10 +1,112 @@
|
|
|
<template>
|
|
|
- <view class="container" :style="{ height: winHeight+ 'px' }">
|
|
|
+ <view class="container flex-col":style="{height: winHeight + 'px'}">
|
|
|
<!-- #ifdef MP -->
|
|
|
<view class="cart_nav">
|
|
|
- <nav-bar iconColor='#fff' ref="navBarRef" navTitle="" backgroundColor="#FF6702" :isBackgroundColor="false">
|
|
|
+ <nav-bar iconColor='#fff' ref="navBarRef" navTitle="美食" backgroundColor="#FF6702" :isBackgroundColor="false">
|
|
|
</nav-bar>
|
|
|
</view>
|
|
|
+ <!-- #endif -->
|
|
|
+ <view class="box-color"></view>
|
|
|
+ <view class="box-merchant flex-col">
|
|
|
+ <view class="top-merchant">
|
|
|
+ <view class="flex-y-center">
|
|
|
+ <image style="width: 80rpx; height: 80rpx;" src="/static/img/ic-message.png"></image>
|
|
|
+ <view style="margin-left: 15rpx;">
|
|
|
+ <view class="mer-name">BOOS盖饭·农家大碗香（德思勤店）</view>
|
|
|
+ <view>
|
|
|
+ <text>今日推荐</text>
|
|
|
+ <text>4.8</text>
|
|
|
+ <text>月销7000+</text>
|
|
|
+ <text>配送约￥0</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view style="position: absolute;right: 20rpx;top: 20rpx;">进店</view>
|
|
|
+ <view class="flex-y-center" style="margin: 15rpx 0;">
|
|
|
+ <view class="cert-box">28减1</view>
|
|
|
+ <view class="cert-box">50减2</view>
|
|
|
+ <view class="cert-box">1元优惠券</view>
|
|
|
+ <view class="cert-box">2元优惠券</view>
|
|
|
+ </view>
|
|
|
+ <scroll-view :scroll-x="true" scroll-with-animation style="height: 130px;white-space: nowrap;">
|
|
|
+ <view class="top-box-item">
|
|
|
+ <image style="width: 100%; height: 120rpx;border-radius: 10rpx;" src="/static/img/ic-message.png"></image>
|
|
|
+ <view class="name">请炒土豆丝|放就爱哦但是见附件就能看</view>
|
|
|
+ <view>
|
|
|
+ <text :class="$bg-color-primary">￥</text><text class="bg-color">2.88</text>
|
|
|
+ <text style="text-decoration: line-through;">￥6</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="top-box-item">
|
|
|
+ <image style="width: 100%; height: 120rpx;border-radius: 10rpx;" src="/static/img/ic-message.png"></image>
|
|
|
+ <view class="name">肉末茄子|放就爱哦但是见附件就能看</view>
|
|
|
+ <view>
|
|
|
+ <text :class="$bg-color-primary">￥</text><text class="bg-color">2.88</text>
|
|
|
+ <text style="text-decoration: line-through;">￥6</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="top-box-item">
|
|
|
+ <image style="width: 100%; height: 120rpx;border-radius: 10rpx;" src="/static/img/ic-message.png"></image>
|
|
|
+ <view class="name">辣椒炒肉盖饭|放就爱哦但是见附件就能看</view>
|
|
|
+ <view>
|
|
|
+ <text :class="$bg-color-primary">￥</text><text class="bg-color">2.88</text>
|
|
|
+ <text style="text-decoration: line-through;">￥6</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ <scroll-view :scroll-x="true" scroll-with-animation style="white-space: nowrap;margin: 20rpx 0rpx;">
|
|
|
+ <view style="display: inline-block;margin-right: 30rpx;" v-for="(item, index) in optionData">
|
|
|
+ <view class="flex-col flex-center">
|
|
|
+ <image style="border-radius: 50%;width: 80rpx;height: 80rpx;" src="/static/img/ic-message.png"></image>
|
|
|
+ <view class="name">{{item.name}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <!-- 销量排行 -->
|
|
|
+ <view class="tab-list" style="margin-top: 10rpx;">
|
|
|
+ <view :class=" item.checked ? 'tab-item2' : 'tab-item2-false' " v-for="item in labelList" :key="item.id" @click="item2Click(item)">{{item.label}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <scroll-view scroll-y scroll-with-animation style="flex: 1;overflow: hidden;">
|
|
|
+ <view class="content-goods2" v-for="item in merchantList" :key="item.id" @click="merchantTab(item)">
|
|
|
+ <view>
|
|
|
+ <image :src="item.pcLogo" style="width: 230rpx;height: 230rpx;"></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view style="margin-left: 20rpx;flex: 1;">
|
|
|
+ <view class="">
|
|
|
+ <text class="goods-title">{{item.name}}</text>
|
|
|
+ <image src="/static/img/ic-close.png" style="width: 32rpx;height: 32rpx;float: right; "></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view style="margin-top: 10rpx;">
|
|
|
+ <text class="goods-score">{{item.score}}</text>
|
|
|
+ <text class="goods-info" style="margin-left: 10rpx;">月销 {{item.salesVolume}}</text>
|
|
|
+ <text class="goods-info" style="margin-left: 25rpx;">人均 ¥ {{item.perCapita}}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view style="margin-top: 10rpx;display: flex;align-items: center;">
|
|
|
+ <text class="goods-info">起送 ¥ {{item.perCapita}}</text>
|
|
|
+ <text v-if="!item.isfreeDeliverfee" class="goods-info" style="color: #E5AD21;margin-left: 18rpx;">免配送费</text>
|
|
|
+ <view v-if="!item.isfreeDeliverfee" style="color: #999999;font-size: 21rpx;margin-left: 10rpx;text-decoration: line-through;">¥
|
|
|
+ {{item.freeDeliverFee}}</view>
|
|
|
+ <text v-if="item.isfreeDeliverfee" style="color: #999999;font-size: 21rpx;margin-left: 10rpx;">配送费¥
|
|
|
+ {{item.distCosts}}</text>
|
|
|
+ <text class="goods-info" style="margin-left: 38rpx;">10分钟</text>
|
|
|
+ <text class="goods-info" style="margin-left: 10rpx;">{{item.distance}}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view style="margin-top: 22rpx;"><text class="goods-sales">已售卖{{item.salesVolume}}件</text></view>
|
|
|
+
|
|
|
+ <view style="margin-top: 14rpx;">
|
|
|
+ <text class="goods-labels" v-for="(item2,index2) in item.discountLabel" :key="index2">{{item2}}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -18,22 +120,11 @@
|
|
|
// +----------------------------------------------------------------------
|
|
|
// | Author: CRMEB Team <admin@crmeb.com>
|
|
|
// +----------------------------------------------------------------------
|
|
|
- import {
|
|
|
- getCategoryCacheTree,
|
|
|
- getMerchantInfo,
|
|
|
- getMerchantProList
|
|
|
- } from '@/api/merchant.js';
|
|
|
- import {
|
|
|
- getProductDetail
|
|
|
- } from '@/api/product.js';
|
|
|
- import {
|
|
|
- orderCreate,
|
|
|
- preOrderApi
|
|
|
- } from '@/api/order.js';
|
|
|
import navBar from '@/components/navBar';
|
|
|
import {
|
|
|
- getAddressList
|
|
|
- } from '@/api/user.js';
|
|
|
+ getMerchantList,
|
|
|
+ getHomeInfo
|
|
|
+ } from '@/api/home.js';
|
|
|
let app = getApp();
|
|
|
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'rpx';
|
|
|
export default {
|
|
|
@@ -42,35 +133,56 @@
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- merId: 0,
|
|
|
winHeight: 0,
|
|
|
- merchanInfo: {},
|
|
|
- statusBarHeight: app.globalData.statusBarHeight,
|
|
|
- navigationBarHeight: 112,
|
|
|
- goods: [], //所有商品
|
|
|
- loading: true,
|
|
|
- currentCateId: 1, //默认分类
|
|
|
- cateScrollTop: 0,
|
|
|
- lastScrollTop: 0,
|
|
|
- menuScrollIntoView: '',
|
|
|
- cart: [], //购物车
|
|
|
- goodDetailModalVisible: false, //是否饮品详情模态框
|
|
|
- good: {}, //当前饮品
|
|
|
- category: {}, //当前饮品所在分类
|
|
|
- cartPopupVisible: false,
|
|
|
- sizeCalcState: false,
|
|
|
- orderType: 'takeout',
|
|
|
- store: {
|
|
|
- min_price: 0.01
|
|
|
- },
|
|
|
- specifications: '', //点击的这一项菜品信息
|
|
|
- specificationsList: [], //点击的这一项菜品信息的大类
|
|
|
- selectble: false, //规格弹窗
|
|
|
- productValue: [], //规格数组
|
|
|
- productObj: {}, //规格对象
|
|
|
- productid: '', //选中规格的id
|
|
|
- lockcatble: false, // 购物车弹窗
|
|
|
- addressInfo: {}
|
|
|
+ optionData: [{
|
|
|
+ id: 1,
|
|
|
+ name: '全部',
|
|
|
+ icon: '/static/img/ic-message.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: '饺子混沌',
|
|
|
+ icon: '/static/img/ic-message.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ name: '汉堡薯条',
|
|
|
+ icon: '/static/img/ic-message.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ name: '意面披萨',
|
|
|
+ icon: '/static/img/ic-message.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ name: '包子粥店',
|
|
|
+ icon: '/static/img/ic-message.png'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ name: '快餐',
|
|
|
+ icon: '/static/img/ic-message.png'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ labelList: [{
|
|
|
+ id: 1,
|
|
|
+ label: "销量排行",
|
|
|
+ checked: true
|
|
|
+ }, {
|
|
|
+ id: 2,
|
|
|
+ label: "满减大促",
|
|
|
+ checked: false
|
|
|
+ }, {
|
|
|
+ id: 3,
|
|
|
+ label: "首单立减",
|
|
|
+ checked: false
|
|
|
+ }, {
|
|
|
+ id: 4,
|
|
|
+ label: "减配送费",
|
|
|
+ checked: false
|
|
|
+ }],
|
|
|
+ merchantList: [],
|
|
|
}
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
@@ -80,1406 +192,197 @@
|
|
|
that.winHeight = res.windowHeight
|
|
|
},
|
|
|
});
|
|
|
- this.merId = uni.getStorageSync('merId')
|
|
|
- //首页数据加载
|
|
|
- // 获取商家信息
|
|
|
- getMerchantInfo(this.merId).then(res => {
|
|
|
- this.merchanInfo = res.data
|
|
|
- });
|
|
|
- // 获取商品列表
|
|
|
- getCategoryCacheTree(this.merId).then(res => {
|
|
|
- console.log(res.data)
|
|
|
- this.goods = res.data
|
|
|
- // this.goods.unshift({
|
|
|
- // id: 9999,
|
|
|
- // name: '推荐'
|
|
|
- // })
|
|
|
- this.currentCateId = this.goods[0].id
|
|
|
- // this.menuScrollIntoView = `cate-${9999}`
|
|
|
+ uni.getLocation({
|
|
|
+ type: 'wgs84',
|
|
|
+ geocode: true, //设置该参数为true可直接获取经纬度及城市信息
|
|
|
+ success: function(res) {
|
|
|
+ getMerchantList({
|
|
|
+ latitude: res.latitude,
|
|
|
+ longitude: res.longitude
|
|
|
+ }).then(res => {
|
|
|
+ // that.merchantList = res.data.list;
|
|
|
+ that.merchantList.push(res.data.list[0]);
|
|
|
+ that.merchantList.push(res.data.list[0]);
|
|
|
+ that.merchantList.push(res.data.list[0]);
|
|
|
+ that.merchantList.push(res.data.list[0]);
|
|
|
+ that.merchantList.push(res.data.list[0]);
|
|
|
+ console.log('商品信息:', that.merchantList);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ fail: function() {
|
|
|
+ uni.showToast({
|
|
|
+ title: '获取地址失败，将导致部分功能不可用',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ }
|
|
|
})
|
|
|
- // 获取用户默认地址
|
|
|
- this.getAddressList()
|
|
|
- // this.getIndexConfig();
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
- // 获取微信胶囊的位置信息 width,height,top,right,left,bottom
|
|
|
- const custom = wx.getMenuButtonBoundingClientRect()
|
|
|
- // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
|
|
|
- // this.navigationBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2
|
|
|
- // console.log("导航栏高度："+this.globalData.navigationBarHeight)
|
|
|
- // #endif
|
|
|
|
|
|
},
|
|
|
- computed: {
|
|
|
- goodCartNum() { //计算单个饮品添加到购物车的数量
|
|
|
- // this.good
|
|
|
- return (text) => this.cart.reduce((acc, cur) => {
|
|
|
- !text ? text = this.getGoodSelectedProps(this.good) : ''
|
|
|
- if (cur.props_text === text) {
|
|
|
- return acc += cur.number
|
|
|
- }
|
|
|
- return acc
|
|
|
- }, 0)
|
|
|
- },
|
|
|
- menuCartNum() {
|
|
|
- return (id) => this.cart.reduce((acc, cur) => {
|
|
|
- if (cur.cate_id === id) {
|
|
|
- return acc += cur.number
|
|
|
- }
|
|
|
- return acc
|
|
|
- }, 0)
|
|
|
- },
|
|
|
- getCartGoodsNumber() { //计算购物车总数
|
|
|
- return this.cart.reduce((acc, cur) => acc + cur.number, 0)
|
|
|
- },
|
|
|
- getCartGoodsPrice() { //计算购物车总价
|
|
|
- return this.cart.reduce((acc, cur) => acc + cur.number * cur.price, 0)
|
|
|
- },
|
|
|
- disabledPay() { //是否达到起送价
|
|
|
- return this.orderType == 'takeout' && (this.getCartGoodsPrice < this.store.min_price) ? true : false
|
|
|
- },
|
|
|
- spread() { //差多少元起送
|
|
|
- if (this.orderType != 'takeout') return
|
|
|
- return parseFloat((this.store.min_price - this.getCartGoodsPrice).toFixed(2))
|
|
|
- }
|
|
|
- },
|
|
|
methods: {
|
|
|
- // 获取地址数据
|
|
|
- getAddressList() {
|
|
|
- getAddressList().then(res => {
|
|
|
- console.log('地址', res)
|
|
|
- if (res.code = 200) {
|
|
|
- this.addressInfo = res.data.find(item => item.isDefault === true);
|
|
|
- console.log('默认地址', this.addressInfo)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- handBack() {
|
|
|
- uni.navigateBack({
|
|
|
- delta: 1
|
|
|
- })
|
|
|
- },
|
|
|
- handleMenuTap(id) { //点击菜单项事件
|
|
|
- this.menuScrollIntoView = `cate-${id}`
|
|
|
- if (!this.sizeCalcState) {
|
|
|
- this.calcSize()
|
|
|
- }
|
|
|
-
|
|
|
- this.$nextTick(() => this.cateScrollTop = this.goods.find(item => item.id == id).top)
|
|
|
- },
|
|
|
- handleGoodsScroll({
|
|
|
- detail
|
|
|
- }) { //商品列表滚动事件
|
|
|
- if (!this.sizeCalcState) {
|
|
|
- this.calcSize()
|
|
|
- }
|
|
|
- const {
|
|
|
- scrollTop
|
|
|
- } = detail
|
|
|
- let tabs = this.goods.filter(item => item.top <= scrollTop).reverse()
|
|
|
- if (tabs.length > 0) {
|
|
|
- this.currentCateId = tabs[0].id
|
|
|
- }
|
|
|
- },
|
|
|
- calcSize() {
|
|
|
- let h = 10
|
|
|
-
|
|
|
- this.goods.forEach(item => {
|
|
|
- let view = uni.createSelectorQuery().select(`#cate-${item.id}`)
|
|
|
- view.fields({
|
|
|
- size: true
|
|
|
- }, data => {
|
|
|
- // if (data.goodsList) {
|
|
|
- item.top = h
|
|
|
- h += data.height
|
|
|
- item.bottom = h
|
|
|
- // }
|
|
|
- }).exec()
|
|
|
- })
|
|
|
- this.sizeCalcState = true
|
|
|
- },
|
|
|
- showGoodDetailModal(item, good) {
|
|
|
- this.good = JSON.parse(JSON.stringify({ ...good
|
|
|
- }))
|
|
|
- this.category = JSON.parse(JSON.stringify(item))
|
|
|
- this.goodDetailModalVisible = true
|
|
|
- },
|
|
|
- handlePropertyAdd() {
|
|
|
- this.good.number += 1
|
|
|
- },
|
|
|
- handlePropertyReduce() {
|
|
|
- if (this.good.number === 1) return
|
|
|
- this.good.number -= 1
|
|
|
- },
|
|
|
- changePropertyDefault(index, key) { //改变默认属性值
|
|
|
- this.good.property[index].optionList.forEach(value => this.$set(value, 'is_default', 0))
|
|
|
- this.good.property[index].optionList[key].is_default = 1
|
|
|
- this.good.number = 1
|
|
|
- this.good = JSON.parse(JSON.stringify(this.good))
|
|
|
- },
|
|
|
- handleAddToCartInModal() {
|
|
|
- const product = Object.assign({}, this.good, {
|
|
|
- props_text: this.getGoodSelectedProps(this.good),
|
|
|
- props: this.getGoodSelectedProps(this.good, 'id')
|
|
|
- })
|
|
|
- this.handleAddToCart(this.category, product, this.good.number)
|
|
|
- // this.closeGoodDetailModal()
|
|
|
- },
|
|
|
- getGoodSelectedProps(good, type = 'text') { //计算当前饮品所选属性
|
|
|
- // if (good.use_property) {
|
|
|
- let props = []
|
|
|
- good.property.forEach(({
|
|
|
- optionList
|
|
|
- }) => {
|
|
|
- optionList.forEach(value => {
|
|
|
- if (value.is_default) {
|
|
|
- props.push(type === 'text' ? value.optionName : value.id)
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- return type === 'text' ? props.join(',') : props
|
|
|
- // }
|
|
|
- // return ''
|
|
|
- },
|
|
|
- handleReduceFromCart(item, good) {
|
|
|
- const goodText = this.getGoodSelectedProps(this.good) // 购物车当前选中的规格
|
|
|
- const index = this.cart.findIndex(item => item.id === good.id && item.props_text === goodText)
|
|
|
- this.cart[index].number -= 1
|
|
|
- if (this.cart[index].number <= 0) {
|
|
|
- this.cart.splice(index, 1)
|
|
|
- }
|
|
|
- },
|
|
|
- handleAddToCart(cate, good, num) { //添加到购物车
|
|
|
- const goodText = this.getGoodSelectedProps(this.good) // 购物车当前选中的规格
|
|
|
- const index = this.cart.findIndex(item => {
|
|
|
- // if (good.use_property) {
|
|
|
- // !good.props_text ? good.props_text = this.getGoodSelectedProps(good) : ''
|
|
|
- return (item.id === good.id) && (item.props_text === goodText)
|
|
|
- // } else {
|
|
|
- // return item.id === good.id
|
|
|
- // }
|
|
|
- })
|
|
|
- if (index > -1) {
|
|
|
- this.cart[index].number += num
|
|
|
- } else {
|
|
|
- this.cart.push({
|
|
|
- id: good.id,
|
|
|
- cate_id: cate.id,
|
|
|
- name: good.name,
|
|
|
- price: good.price,
|
|
|
- number: num,
|
|
|
- icon: good.icon,
|
|
|
- use_property: good.use_property,
|
|
|
- props_text: this.getGoodSelectedProps(this.good),
|
|
|
- props: this.getGoodSelectedProps(this.good, 'id'),
|
|
|
- productid: this.productObj[goodText].id,
|
|
|
- iconText: this.productObj[goodText].image,
|
|
|
- ...good
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- console.log(this.cart, '购物车')
|
|
|
- },
|
|
|
- toPay() {
|
|
|
- // if(!this.isLogin) {
|
|
|
- // uni.navigateTo({url: '/pages/login/login'})
|
|
|
- // return
|
|
|
- // }
|
|
|
-
|
|
|
- uni.showLoading({
|
|
|
- title: '加载中'
|
|
|
- })
|
|
|
-
|
|
|
- let orderDetails = this.cart.map((item) => {
|
|
|
- return {
|
|
|
- attrValueId: item.productid, //商品规格属性id（立即购买、活动购买必填）
|
|
|
- groupBuyActivityId: null, //拼团活动id（拼团下单时必填）
|
|
|
- groupBuyRecordId: 0, // 拼团记录id，营销类型2=拼团 时必填 0=开团 实际
|
|
|
- productId: item.id, //商品id
|
|
|
- productNum: item.number //商品数量
|
|
|
- };
|
|
|
- });
|
|
|
- preOrderApi({
|
|
|
- "preOrderType": 'buyNow',
|
|
|
- //类型 预下单类型（“shoppingCart”:购物车下单,“buyNow”:
|
|
|
- // 立即购买,“video”: 视频号商品下单,“seckill”:秒杀下单,“group”:拼团下单）
|
|
|
- "orderDetails": orderDetails //购物车信息
|
|
|
- }).then(res => {
|
|
|
- console.log('预下单接口', res)
|
|
|
- if (res.code == 200) {
|
|
|
- let cartList = JSON.stringify(this.cart)
|
|
|
- // uni.setStorageSync('cart', JSON.parse(JSON.stringify(this.cart)))
|
|
|
- uni.navigateTo({
|
|
|
- // url: `/pages/goods/order_confirm/index?cartList=${cartList}`
|
|
|
- url: '/pages/goods/order_confirm/index?is_address=1&orderNo=' + res.data.orderNo +
|
|
|
- '&addressId=' + this.addressInfo.id
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- uni.setStorageSync('cart', JSON.parse(JSON.stringify(this.cart)))
|
|
|
- uni.hideLoading()
|
|
|
- },
|
|
|
- // 选规格打开
|
|
|
- Selectpox(item, itemInfo) {
|
|
|
- this.specifications = itemInfo //这一项信息
|
|
|
- this.specificationsList = item //这一项信息
|
|
|
- // this.good = Object.assign({}, this.good, itemInfo)
|
|
|
- getProductDetail(
|
|
|
- itemInfo.id,
|
|
|
- 0, 0, ''
|
|
|
- ).then((res) => {
|
|
|
- console.log('规格', res)
|
|
|
- if (res.code == 200) {
|
|
|
- this.good.property = res.data.productAttr.map(item => {
|
|
|
- item.optionList.forEach((items, index) => {
|
|
|
- index === 0 ? items.is_default = true : '' // 规格默认选中
|
|
|
- })
|
|
|
- return { ...item }
|
|
|
- })
|
|
|
- console.log(this.good)
|
|
|
- // this.productValue = res.data.productAttr //规格数组
|
|
|
- this.productObj = res.data.productValue //默认选择的id
|
|
|
- this.selectble = true
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- // 关闭规格
|
|
|
- Close() {
|
|
|
- this.specifications = '' //这一项信息
|
|
|
- this.specificationsList = [] //这一项信息
|
|
|
- this.selectble = false
|
|
|
+ item2Click(item) {
|
|
|
+ item.checked = !item.checked;
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
- /* #ifdef H5 */
|
|
|
- page {
|
|
|
- min-height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- /* #endif */
|
|
|
-
|
|
|
- .bg-color {
|
|
|
- background-color: $bg-color-primary;
|
|
|
- }
|
|
|
-
|
|
|
- .order-nav {
|
|
|
- // height: 111rpx;
|
|
|
- position: relative;
|
|
|
- background-color: #FF6702;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- .back-button {
|
|
|
- position: absolute;
|
|
|
- left: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- text {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 35rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
.container {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
- .loading {
|
|
|
+ .box-color {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 260rpx;
|
|
|
- height: 260rpx;
|
|
|
- position: relative;
|
|
|
- margin-top: -200rpx;
|
|
|
- /* #ifdef h5 */
|
|
|
- margin-top: 0;
|
|
|
- /* #endif */
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .stores {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: flex-start;
|
|
|
- margin-bottom: -40rpx;
|
|
|
-
|
|
|
- .store {
|
|
|
- width: 100%;
|
|
|
- background-color: $bg-color-grey;
|
|
|
- padding: 20rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- border-radius: 6rpx;
|
|
|
-
|
|
|
- .iconfont {
|
|
|
- font-size: 50rpx;
|
|
|
- margin-right: 15rpx;
|
|
|
-
|
|
|
- &.iconradio-button-off {
|
|
|
- color: $text-color-assist;
|
|
|
- }
|
|
|
-
|
|
|
- &.iconradio-button-on {
|
|
|
- color: $color-primary;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .infos {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- color: $text-color-base;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .name_and_distance {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .name {
|
|
|
- flex: 1;
|
|
|
- flex-shrink: 0;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- font-size: $font-size-lg;
|
|
|
- }
|
|
|
-
|
|
|
- .distance {
|
|
|
- flex-shrink: 0;
|
|
|
- font-size: $font-size-lg;
|
|
|
- font-weight: bold;
|
|
|
- margin-left: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .street {
|
|
|
- color: $text-color-assist;
|
|
|
- font-size: $font-size-sm;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ height: 200rpx;
|
|
|
+ margin-top: -1px;
|
|
|
+ background-color: $bg-color-primary;
|
|
|
+ position: absolute;
|
|
|
+ z-index: -1;
|
|
|
}
|
|
|
|
|
|
- .main {
|
|
|
+ .box-merchant {
|
|
|
+ background-color: #F5F5F5;
|
|
|
+ border-radius: 30rpx 30rpx 0 0;
|
|
|
+ padding: 20rpx 20rpx 0 20rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
overflow: hidden;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ flex: 1;
|
|
|
}
|
|
|
|
|
|
- .nav {
|
|
|
- width: 100%;
|
|
|
- flex-shrink: 0;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- border-radius: 23rpx;
|
|
|
- padding: 19rpx 57rpx 38rpx 58rpx;
|
|
|
- background-color: #ffffff;
|
|
|
-
|
|
|
- .header {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .left {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- .store-name {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- font-size: $font-size-lg;
|
|
|
- margin-bottom: 10rpx;
|
|
|
-
|
|
|
- .iconfont {
|
|
|
- margin-left: 10rpx;
|
|
|
- line-height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .store-tip {
|
|
|
- font-weight: 400;
|
|
|
- font-size: 21rpx;
|
|
|
- color: #858687;
|
|
|
- margin-top: 10rpx;
|
|
|
- background: #F8F9FB;
|
|
|
- border-radius: 4rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- background-color: $bg-color-grey;
|
|
|
- border-radius: 38rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: $font-size-sm;
|
|
|
- padding: 0 38rpx;
|
|
|
- color: $text-color-assist;
|
|
|
-
|
|
|
- .dinein,
|
|
|
- .takeout {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- &.active {
|
|
|
- padding: 14rpx 38rpx;
|
|
|
- color: #ffffff;
|
|
|
- background-color: $color-primary;
|
|
|
- border-radius: 38rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .takeout {
|
|
|
- margin-left: 20rpx;
|
|
|
- height: 100%;
|
|
|
- flex: 1;
|
|
|
- padding: 14rpx 0;
|
|
|
- }
|
|
|
-
|
|
|
- .dinein.active {
|
|
|
- margin-left: -38rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .takeout.active {
|
|
|
- margin-right: -38rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .coupon {
|
|
|
- flex: 1;
|
|
|
- width: 100%;
|
|
|
- background-color: $bg-color-primary;
|
|
|
- font-size: $font-size-base;
|
|
|
- color: $color-primary;
|
|
|
- padding: 0 20rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .title {
|
|
|
- flex: 1;
|
|
|
- margin-left: 10rpx;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
+ .top-merchant {
|
|
|
+ background-color: #fff;
|
|
|
+ position: relative;
|
|
|
+ padding: 20rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
|
|
|
- .iconfont {
|
|
|
- line-height: 100%;
|
|
|
- }
|
|
|
+ .mer-name {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 27rpx;
|
|
|
+ color: #141414;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .content {
|
|
|
- flex: 1;
|
|
|
- overflow: hidden;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- border-radius: 23rpx 23rpx 0rpx 0rpx;
|
|
|
-
|
|
|
- .menus {
|
|
|
- width: 200rpx;
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
- background-color: $bg-color-grey;
|
|
|
|
|
|
- .wrapper {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .menu {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-start;
|
|
|
- padding: 30rpx 20rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- color: $text-color-assist;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- &:nth-last-child(1) {
|
|
|
- margin-bottom: 230rpx;
|
|
|
- }
|
|
|
-
|
|
|
- &.current {
|
|
|
- background-color: #ffffff;
|
|
|
- color: $text-color-base;
|
|
|
- }
|
|
|
-
|
|
|
- .dot {
|
|
|
- position: absolute;
|
|
|
- width: 34rpx;
|
|
|
- height: 34rpx;
|
|
|
- line-height: 34rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- background-color: $bg-color-primary;
|
|
|
- color: #ffffff;
|
|
|
- top: 16rpx;
|
|
|
- right: 10rpx;
|
|
|
- border-radius: 100%;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .cert-box {
|
|
|
+ color: #FF4B4B;
|
|
|
+ border: 2rpx solid #FF4B4B;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background: rgba(255, 75, 75, 0.05);
|
|
|
+ padding: 10rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
}
|
|
|
|
|
|
- .goods {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
- background-color: #ffffff;
|
|
|
+ .top-box-item {
|
|
|
+ width: 31%;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ display: inline-block;
|
|
|
|
|
|
- .wrapper {
|
|
|
+ .name {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 23rpx;
|
|
|
+ color: #141414;
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 20rpx;
|
|
|
-
|
|
|
- .ads {
|
|
|
- height: calc(300 / 550 * 510rpx);
|
|
|
-
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 8rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .list {
|
|
|
- width: 100%;
|
|
|
- font-size: $font-size-base;
|
|
|
- padding-bottom: 800rpx;
|
|
|
-
|
|
|
- .category {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .title {
|
|
|
- padding: 30rpx 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: $text-color-base;
|
|
|
-
|
|
|
- .icon {
|
|
|
- width: 38rpx;
|
|
|
- height: 38rpx;
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .items {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding-bottom: -30rpx;
|
|
|
-
|
|
|
- .good {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 30rpx;
|
|
|
-
|
|
|
- .image {
|
|
|
- width: 160rpx;
|
|
|
- height: 160rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- flex: 1;
|
|
|
- // height: 160rpx;
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: space-between;
|
|
|
- padding-right: 14rpx;
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: $font-size-base;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .tips {
|
|
|
- width: 100%;
|
|
|
- height: 40rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- font-size: $font-size-sm;
|
|
|
- color: $text-color-assist;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .price_and_action {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .price {
|
|
|
- font-size: $font-size-base;
|
|
|
- font-weight: 600;
|
|
|
- color: $bg-color-primary;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-group {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .btn {
|
|
|
- padding: 0 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- font-size: $font-size-sm;
|
|
|
- height: 44rpx;
|
|
|
- line-height: 44rpx;
|
|
|
-
|
|
|
- &.property_btn {
|
|
|
- border-radius: 24rpx;
|
|
|
- }
|
|
|
-
|
|
|
- &.add_btn,
|
|
|
- &.reduce_btn {
|
|
|
- padding: 0;
|
|
|
- width: 44rpx;
|
|
|
- border-radius: 44rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .dot {
|
|
|
- position: absolute;
|
|
|
- background-color: #ffffff;
|
|
|
- border: 1px solid $bg-color-primary;
|
|
|
- color: $bg-color-primary;
|
|
|
- font-size: $font-size-sm;
|
|
|
- width: 36rpx;
|
|
|
- height: 36rpx;
|
|
|
- line-height: 36rpx;
|
|
|
- text-align: center;
|
|
|
- border-radius: 100%;
|
|
|
- right: -12rpx;
|
|
|
- top: -10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .number {
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
- line-height: 44rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .modal-box {
|
|
|
- max-height: 90vh;
|
|
|
+ .bg-color {
|
|
|
+ color: $bg-color-primary;
|
|
|
+ font-size: 30rpx;
|
|
|
}
|
|
|
|
|
|
- .good-detail-modal {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ .tab-list {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- .cover {
|
|
|
- height: 320rpx;
|
|
|
- padding: 30rpx 0;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .image {
|
|
|
- width: 260rpx;
|
|
|
- height: 260rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-group {
|
|
|
- position: absolute;
|
|
|
- right: 10rpx;
|
|
|
- top: 30rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 80rpx;
|
|
|
- height: 80rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .detail {
|
|
|
- width: 100%;
|
|
|
- min-height: 1vh;
|
|
|
- max-height: calc(90vh - 320rpx - 80rpx - 120rpx);
|
|
|
-
|
|
|
- .wrapper {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .basic {
|
|
|
- padding: 0 20rpx 30rpx;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: $font-size-base;
|
|
|
- color: $text-color-base;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .tips {
|
|
|
- font-size: $font-size-sm;
|
|
|
- color: $text-color-grey;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .properties {
|
|
|
- width: 100%;
|
|
|
- border-top: 2rpx solid $bg-color-grey;
|
|
|
- padding: 10rpx 30rpx 0;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- .property {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- margin-bottom: 30rpx;
|
|
|
- padding-bottom: -16rpx;
|
|
|
-
|
|
|
- .title {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 20rpx;
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: 26rpx;
|
|
|
- color: $text-color-base;
|
|
|
- margin-right: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .desc {
|
|
|
- flex: 1;
|
|
|
- font-size: $font-size-sm;
|
|
|
- color: $color-primary;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .values {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
-
|
|
|
- .value {
|
|
|
- border-radius: 8rpx;
|
|
|
- background-color: $bg-color-grey;
|
|
|
- padding: 16rpx 30rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- color: $text-color-assist;
|
|
|
- margin-right: 16rpx;
|
|
|
- margin-bottom: 16rpx;
|
|
|
-
|
|
|
- &.default {
|
|
|
- background-color: $bg-color-primary;
|
|
|
- color: $text-color-white;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .action {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- background-color: $bg-color-grey;
|
|
|
- height: 120rpx;
|
|
|
- padding: 0 26rpx;
|
|
|
-
|
|
|
- .left {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- margin-right: 20rpx;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .price {
|
|
|
- font-size: $font-size-lg;
|
|
|
- color: $text-color-base;
|
|
|
- }
|
|
|
-
|
|
|
- .props {
|
|
|
- color: $text-color-assist;
|
|
|
- font-size: 24rpx;
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .btn-group {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
-
|
|
|
- .number {
|
|
|
- font-size: $font-size-base;
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
- line-height: 44rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ /* 启用弹性布局 */
|
|
|
+ flex-direction: row;
|
|
|
+ /* 横向排列 */
|
|
|
+ justify-content: space-between;
|
|
|
+ /* 均匀分布子项 */
|
|
|
+ flex-wrap: wrap;
|
|
|
+ /* 允许换行（适用于屏幕宽度不足时） */
|
|
|
|
|
|
- .btn {
|
|
|
- padding: 0;
|
|
|
- font-size: $font-size-base;
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
- line-height: 44rpx;
|
|
|
- border-radius: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
+ .tab-item2 {
|
|
|
+ width: 23%;
|
|
|
+ /* 5个元素平分宽度，留2%作为间隙 */
|
|
|
+ text-align: center;
|
|
|
+ background-color: #FFC127;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 23rpx;
|
|
|
+ padding: 6rpx;
|
|
|
+ font-weight: 400;
|
|
|
}
|
|
|
|
|
|
- .add-to-cart-btn {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- background-color: $color-primary;
|
|
|
- color: $text-color-white;
|
|
|
- font-size: $font-size-base;
|
|
|
- height: 80rpx;
|
|
|
- border-radius: 0 0 12rpx 12rpx;
|
|
|
+ .tab-item2-false {
|
|
|
+ width: 23%;
|
|
|
+ /* 5个元素平分宽度，留2%作为间隙 */
|
|
|
+ text-align: center;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 23rpx;
|
|
|
+ padding: 6rpx;
|
|
|
+ font-weight: 400;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .cart-box {
|
|
|
- // position: absolute;
|
|
|
- // bottom: 30rpx;
|
|
|
- // left: 30rpx;
|
|
|
- // right: 30rpx;
|
|
|
- height: 96rpx;
|
|
|
- border-radius: 48rpx;
|
|
|
- box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
|
|
|
- background-color: #000;
|
|
|
+ .content-goods2 {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 23rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ padding: 20rpx;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- z-index: 9999;
|
|
|
|
|
|
- .cart-img {
|
|
|
- width: 50rpx;
|
|
|
- height: 47rpx;
|
|
|
- position: relative;
|
|
|
- // margin-top: -48rpx;
|
|
|
+ .goods-title {
|
|
|
+ color: #141414;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 600;
|
|
|
}
|
|
|
|
|
|
- .pay-btn {
|
|
|
- height: 100%;
|
|
|
- padding: 0 30rpx;
|
|
|
- color: #FFFFFF;
|
|
|
- border-radius: 0 50rpx 50rpx 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: $font-size-base;
|
|
|
+ .goods-desc {
|
|
|
+ color: #646464;
|
|
|
+ font-size: 21rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
}
|
|
|
|
|
|
- .mark {
|
|
|
- padding-left: 46rpx;
|
|
|
- margin-right: 30rpx;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .tag {
|
|
|
- background-color: $color-warning;
|
|
|
- color: $text-color-white;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-size: $font-size-sm;
|
|
|
- position: absolute;
|
|
|
- right: -13rpx;
|
|
|
- top: -20rpx;
|
|
|
- border-radius: 100%;
|
|
|
- padding: 4rpx;
|
|
|
- width: 27rpx;
|
|
|
- height: 27rpx;
|
|
|
- opacity: .9;
|
|
|
- }
|
|
|
+ .goods-price {
|
|
|
+ color: #FF9805;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: 600;
|
|
|
}
|
|
|
|
|
|
- .price {
|
|
|
- flex: 1;
|
|
|
- color: $text-color-base;
|
|
|
+ .goods-score {
|
|
|
+ color: #FD6716;
|
|
|
+ font-size: 26rpx;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .cart-popup {
|
|
|
- .top {
|
|
|
- background-color: $bg-color-primary;
|
|
|
- color: $color-primary;
|
|
|
- padding: 10rpx 30rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- text-align: right;
|
|
|
+ .goods-info {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 21rpx;
|
|
|
}
|
|
|
|
|
|
- .cart-list {
|
|
|
- background-color: #FFFFFF;
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- min-height: 1vh;
|
|
|
- max-height: 60vh;
|
|
|
-
|
|
|
- .wrapper {
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding: 0 30rpx;
|
|
|
- margin-bottom: 156rpx;
|
|
|
-
|
|
|
- .item {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 30rpx 0;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: ' ';
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- background-color: $border-color;
|
|
|
- height: 2rpx;
|
|
|
- transform: scaleY(.6);
|
|
|
- }
|
|
|
-
|
|
|
- .left {
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- overflow: hidden;
|
|
|
- margin-right: 30rpx;
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: $font-size-sm;
|
|
|
- color: $text-color-base;
|
|
|
- }
|
|
|
-
|
|
|
- .props {
|
|
|
- color: $text-color-assist;
|
|
|
- font-size: 24rpx;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .center {
|
|
|
- margin-right: 120rpx;
|
|
|
- font-size: $font-size-base;
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .btn {
|
|
|
- width: 46rpx;
|
|
|
- height: 46rpx;
|
|
|
- border-radius: 100%;
|
|
|
- padding: 0;
|
|
|
- text-align: center;
|
|
|
- line-height: 46rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .number {
|
|
|
- font-size: $font-size-base;
|
|
|
- width: 46rpx;
|
|
|
- height: 46rpx;
|
|
|
- text-align: center;
|
|
|
- line-height: 46rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .goods-info3 {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 21rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ text-decoration: line-through;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .back-button {
|
|
|
-
|
|
|
- width: 30rpx;
|
|
|
-
|
|
|
- height: 30rpx;
|
|
|
-
|
|
|
- border-right: 4rpx solid #fff;
|
|
|
- border-bottom: 4rpx solid #fff;
|
|
|
-
|
|
|
- transform: rotate(135deg);
|
|
|
-
|
|
|
- margin-left: 10rpx;
|
|
|
-
|
|
|
- display: inline-block;
|
|
|
-
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .newsTitle {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .mode {
|
|
|
- position: fixed;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- background: rgba(33, 33, 33, 0.8);
|
|
|
- z-index: 99999;
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- }
|
|
|
-
|
|
|
- .mode-1 {
|
|
|
- width: 100%;
|
|
|
- height: 840rpx;
|
|
|
- background: #FFF;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 20rpx;
|
|
|
- // padding: 30rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- overflow: auto;
|
|
|
- /* 添加这个属性使容器可以滚动 */
|
|
|
- }
|
|
|
-
|
|
|
- // 规格弹窗
|
|
|
- .sel-mode-1 {
|
|
|
- width: 100%;
|
|
|
- // height: 440rpx;
|
|
|
- background: #FFF;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- overflow: auto;
|
|
|
- z-index: 99999;
|
|
|
- padding: 20rpx 20rpx 60rpx 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
|
|
|
- .close {
|
|
|
- text-align: right;
|
|
|
- font-size: 40rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .sel-2 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 20rpx;
|
|
|
-
|
|
|
- .nexbox1 {
|
|
|
- flex: 1;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- color: $text-color-assist;
|
|
|
+ .goods-sales {
|
|
|
+ background-color: #FEEFE5;
|
|
|
+ color: #FF6702;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 21rpx;
|
|
|
+ padding: 4rpx 20rpx;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .sel-3 {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .sel-4 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .sel-5 {
|
|
|
- width: 80rpx;
|
|
|
- height: 40rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 24rpx;
|
|
|
- background: #999999;
|
|
|
- color: #FFF;
|
|
|
- padding: 8rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .sel-6 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
-
|
|
|
- .sel-btn {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
|
|
|
- .sel-btn1 {
|
|
|
- width: 110px;
|
|
|
- height: 60rpx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background: rgba(255, 103, 2, 1);
|
|
|
- color: #FFF;
|
|
|
- font-size: 30rpx;
|
|
|
- border-radius: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .neximg {
|
|
|
- width: 160rpx;
|
|
|
- height: 160rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- /* 保持图片等比例缩放，并且不会裁切 */
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .btn-group {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .btn {
|
|
|
- padding: 0 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- font-size: $font-size-sm;
|
|
|
- height: 44rpx;
|
|
|
- line-height: 44rpx;
|
|
|
-
|
|
|
- &.property_btn {
|
|
|
- border-radius: 24rpx;
|
|
|
- }
|
|
|
-
|
|
|
- &.add_btn,
|
|
|
- &.reduce_btn {
|
|
|
- padding: 0;
|
|
|
- width: 44rpx;
|
|
|
- border-radius: 44rpx;
|
|
|
- }
|
|
|
+ .goods-labels {
|
|
|
+ background-color: #FFF6F6;
|
|
|
+ color: #FF4B4B;
|
|
|
+ border: 2rpx solid #FF4B4B;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 21rpx;
|
|
|
+ padding: 4rpx 16rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
}
|
|
|
-
|
|
|
- .dot {
|
|
|
- position: absolute;
|
|
|
- background-color: #ffffff;
|
|
|
- border: 1px solid $bg-color-primary;
|
|
|
- color: $bg-color-primary;
|
|
|
- font-size: $font-size-sm;
|
|
|
- width: 36rpx;
|
|
|
- height: 36rpx;
|
|
|
- line-height: 36rpx;
|
|
|
- text-align: center;
|
|
|
- border-radius: 100%;
|
|
|
- right: -12rpx;
|
|
|
- top: -10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .number {
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
- line-height: 44rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .nexbox-txt3 {
|
|
|
- color: $bg-color-primary;
|
|
|
- }
|
|
|
-
|
|
|
- .mode-box {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 20rpx;
|
|
|
- padding: 30rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
-
|
|
|
- .items {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- padding-bottom: -30rpx;
|
|
|
-
|
|
|
- .good {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 30rpx;
|
|
|
-
|
|
|
- .image {
|
|
|
- width: 160rpx;
|
|
|
- height: 160rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
- flex: 1;
|
|
|
- // height: 160rpx;
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: space-between;
|
|
|
- padding-right: 14rpx;
|
|
|
-
|
|
|
- .name {
|
|
|
- font-size: $font-size-base;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .tips {
|
|
|
- width: 100%;
|
|
|
- height: 40rpx;
|
|
|
- line-height: 40rpx;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- font-size: $font-size-sm;
|
|
|
- color: $text-color-assist;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .price_and_action {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .price {
|
|
|
- font-size: $font-size-base;
|
|
|
- font-weight: 600;
|
|
|
- color: $bg-color-primary;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-group {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .btn {
|
|
|
- padding: 0 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- font-size: $font-size-sm;
|
|
|
- height: 44rpx;
|
|
|
- line-height: 44rpx;
|
|
|
-
|
|
|
- &.property_btn {
|
|
|
- border-radius: 24rpx;
|
|
|
- }
|
|
|
-
|
|
|
- &.add_btn,
|
|
|
- &.reduce_btn {
|
|
|
- padding: 0;
|
|
|
- width: 44rpx;
|
|
|
- border-radius: 44rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .dot {
|
|
|
- position: absolute;
|
|
|
- background-color: #ffffff;
|
|
|
- border: 1px solid $bg-color-primary;
|
|
|
- color: $bg-color-primary;
|
|
|
- font-size: $font-size-sm;
|
|
|
- width: 36rpx;
|
|
|
- height: 36rpx;
|
|
|
- line-height: 36rpx;
|
|
|
- text-align: center;
|
|
|
- border-radius: 100%;
|
|
|
- right: -12rpx;
|
|
|
- top: -10rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .number {
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
- line-height: 44rpx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .mode-clear {
|
|
|
- padding: 30rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- position: sticky;
|
|
|
- z-index: 99;
|
|
|
- top: 0;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- background: #FFF;
|
|
|
- border-bottom: 1px solid burlywood;
|
|
|
- }
|
|
|
-
|
|
|
- .mode-txt {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 8rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .mode-txt1 {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 32rpx;
|
|
|
}
|
|
|
</style>
|
ZZ