ch
3 years ago
parent
019197fc61
commit
c347578bef
@ -0,0 +1,58 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: ch
|
||||||
|
* @Date: 2022-03-20 16:45:27
|
||||||
|
* @LastEditors: ch
|
||||||
|
* @LastEditTime: 2022-04-07 18:24:25
|
||||||
|
* @Description: file content
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<UiGoodsGroup :listData="listData"></UiGoodsGroup>
|
||||||
|
<u-loadmore :status="loadingStatus" />
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {ApiGetGoodsList} from '@/common/api/goods';
|
||||||
|
import BsEmpty from './BsEmpty.vue';
|
||||||
|
import UiGoodsGroup from './UiGoodsGroup.vue';
|
||||||
|
export default {
|
||||||
|
components: { BsEmpty, UiGoodsGroup },
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
loadingStatus : 'loading',
|
||||||
|
listData : [],
|
||||||
|
params : {
|
||||||
|
length : 10,
|
||||||
|
pageIndex : 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.getGoodsList();
|
||||||
|
},
|
||||||
|
methods : {
|
||||||
|
async getGoodsList(){
|
||||||
|
this.loadingStatus = 'loading';
|
||||||
|
const query = this.$Route.query;
|
||||||
|
const {error, result} = await ApiGetGoodsList({
|
||||||
|
...this.params
|
||||||
|
});
|
||||||
|
this.listData = this.listData.concat(result.records);
|
||||||
|
|
||||||
|
// 标记是否为最后一页
|
||||||
|
if(!result.records.length){
|
||||||
|
this.loadingStatus = 'nomore';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
next(){
|
||||||
|
if(this.loadingStatus === 'nomore'){
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
this.params.pageIndex++;
|
||||||
|
this.getGoodsList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,162 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- 商品评价 -->
|
|
||||||
<view v-if="!isLoading && list.length" class="goods-comment m-top20">
|
|
||||||
<view class="item-title dis-flex">
|
|
||||||
<view class="block-left flex-box">
|
|
||||||
商品评价 (<text class="total">{{ total }}条</text>)
|
|
||||||
</view>
|
|
||||||
<view class="block-right">
|
|
||||||
<text @click="onTargetToComment" class="show-more col-9">查看更多</text>
|
|
||||||
<text class="iconfont icon-arrow-right"></text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 评论列表 -->
|
|
||||||
<view class="comment-list">
|
|
||||||
<view class="comment-item" v-for="(item, index) in list" :key="index">
|
|
||||||
<view class="comment-item_row dis-flex flex-y-center">
|
|
||||||
<view class="user-info dis-flex flex-y-center">
|
|
||||||
<avatar-image class="user-avatar" :url="item.user.avatar_url" :width="50" />
|
|
||||||
<text class="user-name">{{ item.user.nick_name }}</text>
|
|
||||||
</view>
|
|
||||||
<!-- 评星 -->
|
|
||||||
<view class="star-rating">
|
|
||||||
<u-rate active-color="#f4a213" :current="rates[item.score]" :disabled="true" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="item-content m-top20">
|
|
||||||
<text class="f-26 twoline-hide">{{ item.content }}</text>
|
|
||||||
</view>
|
|
||||||
<view class="comment-time">{{ item.create_time }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import AvatarImage from '@/components/avatar-image'
|
|
||||||
import * as CommentApi from '@/api/comment'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
AvatarImage
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
// 商品ID
|
|
||||||
goodsId: {
|
|
||||||
type: Number,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
// 加载多少条记录 默认2条
|
|
||||||
limit: {
|
|
||||||
type: Number,
|
|
||||||
default: 2
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
// 正在加载
|
|
||||||
isLoading: true,
|
|
||||||
// 评星数据转换
|
|
||||||
rates: { 10: 5, 20: 3, 30: 1 },
|
|
||||||
// 评价列表数据
|
|
||||||
list: [],
|
|
||||||
// 评价总数量
|
|
||||||
total: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
// 加载评价列表数据
|
|
||||||
this.getCommentList()
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
// 加载评价列表数据
|
|
||||||
getCommentList() {
|
|
||||||
const app = this
|
|
||||||
app.isLoading = true
|
|
||||||
CommentApi.listRows(app.goodsId, app.limit)
|
|
||||||
.then(result => {
|
|
||||||
app.list = result.data.list
|
|
||||||
app.total = result.data.total
|
|
||||||
})
|
|
||||||
.catch(err => err)
|
|
||||||
.finally(() => app.isLoading = false)
|
|
||||||
},
|
|
||||||
|
|
||||||
// 跳转到评论列表页
|
|
||||||
onTargetToComment() {
|
|
||||||
const app = this
|
|
||||||
app.$navTo('pages/comment/index', { goodsId: app.goodsId })
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.goods-comment {
|
|
||||||
padding: 20rpx 30rpx;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-title {
|
|
||||||
font-size: 28rpx;
|
|
||||||
margin-bottom: 25rpx;
|
|
||||||
|
|
||||||
.total {
|
|
||||||
margin: 0 4rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.show-more {
|
|
||||||
margin-right: 8rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-item {
|
|
||||||
padding: 15rpx 5rpx;
|
|
||||||
margin-bottom: 10rpx;
|
|
||||||
border-bottom: 1rpx solid #f5f5f5;
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-item_row {
|
|
||||||
margin-bottom: 10rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-info {
|
|
||||||
margin-right: 15rpx;
|
|
||||||
|
|
||||||
.user-avatar {
|
|
||||||
width: 50rpx;
|
|
||||||
height: 50rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin-right: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-name {
|
|
||||||
font-size: 24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-content {
|
|
||||||
color: #333;
|
|
||||||
margin: 16rpx 0;
|
|
||||||
max-height: 76rpx;
|
|
||||||
line-height: 38rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-time {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #999;
|
|
||||||
margin-top: 10rpx;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,157 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view v-if="list.length" class="service-wrapper">
|
|
||||||
<!-- 服务简述 -->
|
|
||||||
<view class="service-simple" @click="handlePopup">
|
|
||||||
<view class="s-list">
|
|
||||||
<view class="s-item" v-for="(item, index) in list" :key="index">
|
|
||||||
<text class="item-icon iconfont icon-fuwu"></text>
|
|
||||||
<text class="item-val">{{ item.name }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 扩展箭头 -->
|
|
||||||
<view class="s-arrow f-26 col-9 t-r">
|
|
||||||
<text class="iconfont icon-arrow-right"></text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- 详情内容弹窗 -->
|
|
||||||
<u-popup v-model="showPopup" mode="bottom" :closeable="true" :border-radius="26">
|
|
||||||
<view class="service-content">
|
|
||||||
<view class="title">服务</view>
|
|
||||||
<scroll-view class="content-scroll" :scroll-y="true">
|
|
||||||
<view class="s-list clearfix">
|
|
||||||
<view class="s-item" v-for="(item, index) in list" :key="index">
|
|
||||||
<text class="item-icon iconfont icon-fuwu"></text>
|
|
||||||
<view class="item-val">{{ item.name }}</view>
|
|
||||||
<view class="item-summary">{{ item.summary }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
</u-popup>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
// 商品ID
|
|
||||||
goodsId: {
|
|
||||||
type: Number,
|
|
||||||
default: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
// 正在加载
|
|
||||||
isLoading: true,
|
|
||||||
// 显示详情内容弹窗
|
|
||||||
showPopup: false,
|
|
||||||
// 服务列表数据
|
|
||||||
list: []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
// 获取商品服务列表
|
|
||||||
this.getServiceList()
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
// 获取商品服务列表
|
|
||||||
getServiceList() {
|
|
||||||
const app = this
|
|
||||||
app.isLoading = true
|
|
||||||
// ServiceApi.list(app.goodsId)
|
|
||||||
// .then(result => app.list = result.data.list)
|
|
||||||
// .finally(() => app.isLoading = false)
|
|
||||||
},
|
|
||||||
|
|
||||||
// 显示弹窗
|
|
||||||
handlePopup() {
|
|
||||||
this.showPopup = !this.showPopup
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.service-wrapper {
|
|
||||||
min-height: 24rpx;
|
|
||||||
margin-bottom: -24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 服务简述
|
|
||||||
.service-simple {
|
|
||||||
padding: 24rpx 30rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.s-list {
|
|
||||||
flex: 1;
|
|
||||||
margin-left: -15rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.s-item {
|
|
||||||
float: left;
|
|
||||||
font-size: 26rpx;
|
|
||||||
margin: 8rpx 15rpx;
|
|
||||||
|
|
||||||
.item-icon {
|
|
||||||
color: #FA2209;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-val {
|
|
||||||
margin-left: 12rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// 服务详细内容
|
|
||||||
.service-content {
|
|
||||||
padding: 24rpx;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 30rpx;
|
|
||||||
margin-bottom: 50rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-scroll {
|
|
||||||
min-height: 400rpx;
|
|
||||||
max-height: 760rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.s-list {
|
|
||||||
padding: 0 30rpx 0 80rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.s-item {
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 60rpx;
|
|
||||||
|
|
||||||
.item-icon {
|
|
||||||
position: absolute;
|
|
||||||
top: 6rpx;
|
|
||||||
left: -50rpx;
|
|
||||||
color: #FA2209;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-val {
|
|
||||||
font-size: 28rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-summary {
|
|
||||||
font-size: 26rpx;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
color: #6d6d6d;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,179 +0,0 @@
|
|||||||
<template>
|
|
||||||
<goods-sku-popup :value="value" @input="onChangeValue" border-radius="20" :localdata="goodsInfo" :mode="skuMode"
|
|
||||||
:maskCloseAble="true" @open="openSkuPopup" @close="closeSkuPopup" @add-cart="addCart" @buy-now="buyNow"
|
|
||||||
buyNowText="立即购买" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// import { setCartTotalNum } from '@/core/app'
|
|
||||||
// import * as CartApi from '@/api/cart'
|
|
||||||
import GoodsSkuPopup from '@/components/goods-sku-popup'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
GoodsSkuPopup
|
|
||||||
},
|
|
||||||
model: {
|
|
||||||
prop: 'value',
|
|
||||||
event: 'input'
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
// true 组件显示 false 组件隐藏
|
|
||||||
value: {
|
|
||||||
Type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
|
|
||||||
skuMode: {
|
|
||||||
type: Number,
|
|
||||||
default: 1
|
|
||||||
},
|
|
||||||
// 商品详情信息
|
|
||||||
goods: {
|
|
||||||
type: Object,
|
|
||||||
default: {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
goodsInfo: {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
const app = this
|
|
||||||
const { goods } = app
|
|
||||||
app.goodsInfo = {
|
|
||||||
_id: goods.goods_id,
|
|
||||||
name: goods.goods_name,
|
|
||||||
goods_thumb: goods.goods_image,
|
|
||||||
sku_list: app.getSkuList(),
|
|
||||||
spec_list: app.getSpecList()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
// 监听组件显示隐藏
|
|
||||||
onChangeValue(val) {
|
|
||||||
this.$emit('input', val)
|
|
||||||
},
|
|
||||||
|
|
||||||
// 整理商品SKU列表
|
|
||||||
getSkuList() {
|
|
||||||
const app = this
|
|
||||||
const { goods: { goods_name, goods_image, skuList } } = app
|
|
||||||
const skuData = []
|
|
||||||
skuList.forEach(item => {
|
|
||||||
skuData.push({
|
|
||||||
_id: item.id,
|
|
||||||
goods_sku_id: item.goods_sku_id,
|
|
||||||
goods_id: item.goods_id,
|
|
||||||
goods_name: goods_name,
|
|
||||||
image: item.image_url ? item.image_url : goods_image,
|
|
||||||
price: item.goods_price * 100,
|
|
||||||
stock: item.stock_num,
|
|
||||||
spec_value_ids: item.spec_value_ids,
|
|
||||||
sku_name_arr: app.getSkuNameArr(item.spec_value_ids)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
return skuData
|
|
||||||
},
|
|
||||||
|
|
||||||
// 获取sku记录的规格值列表
|
|
||||||
getSkuNameArr(specValueIds) {
|
|
||||||
const app = this
|
|
||||||
const defaultData = ['默认']
|
|
||||||
const skuNameArr = []
|
|
||||||
if (specValueIds) {
|
|
||||||
specValueIds.forEach((valueId, groupIndex) => {
|
|
||||||
const specValueName = app.getSpecValueName(valueId, groupIndex)
|
|
||||||
skuNameArr.push(specValueName)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return skuNameArr.length ? skuNameArr : defaultData
|
|
||||||
},
|
|
||||||
|
|
||||||
// 获取指定的规格值名称
|
|
||||||
getSpecValueName(valueId, groupIndex) {
|
|
||||||
const app = this
|
|
||||||
const { goods: { specList } } = app
|
|
||||||
const res = specList[groupIndex].valueList.find(specValue => {
|
|
||||||
return specValue.spec_value_id == valueId
|
|
||||||
})
|
|
||||||
return res.spec_value
|
|
||||||
},
|
|
||||||
|
|
||||||
// 整理规格数据
|
|
||||||
getSpecList() {
|
|
||||||
const { goods: { specList } } = this
|
|
||||||
const defaultData = [{ name: '默认', list: [{ name: '默认' }] }]
|
|
||||||
const specData = []
|
|
||||||
specList.forEach(group => {
|
|
||||||
const children = []
|
|
||||||
group.valueList.forEach(specValue => {
|
|
||||||
children.push({ name: specValue.spec_value })
|
|
||||||
})
|
|
||||||
specData.push({
|
|
||||||
name: group.spec_name,
|
|
||||||
list: children
|
|
||||||
})
|
|
||||||
})
|
|
||||||
return specData.length ? specData : defaultData
|
|
||||||
},
|
|
||||||
|
|
||||||
// sku组件 开始-----------------------------------------------------------
|
|
||||||
openSkuPopup() {
|
|
||||||
// console.log("监听 - 打开sku组件")
|
|
||||||
},
|
|
||||||
|
|
||||||
closeSkuPopup() {
|
|
||||||
// console.log("监听 - 关闭sku组件")
|
|
||||||
},
|
|
||||||
|
|
||||||
// 加入购物车按钮
|
|
||||||
addCart(selectShop) {
|
|
||||||
const app = this
|
|
||||||
const { goods_id, goods_sku_id, buy_num } = selectShop
|
|
||||||
// CartApi.add(goods_id, goods_sku_id, buy_num)
|
|
||||||
// .then(result => {
|
|
||||||
// // 显示成功
|
|
||||||
// app.$toast(result.message)
|
|
||||||
// // 隐藏当前弹窗
|
|
||||||
// app.onChangeValue(false)
|
|
||||||
// // 购物车商品总数量
|
|
||||||
// const cartTotal = result.data.cartTotal
|
|
||||||
// // 缓存购物车数量
|
|
||||||
// setCartTotalNum(cartTotal)
|
|
||||||
// // 传递给父级
|
|
||||||
// app.$emit('addCart', cartTotal)
|
|
||||||
// })
|
|
||||||
},
|
|
||||||
|
|
||||||
// 立即购买
|
|
||||||
buyNow(selectShop) {
|
|
||||||
// 跳转到订单结算页
|
|
||||||
|
|
||||||
this.$Router.push({path : '/orderSubmit', query:{
|
|
||||||
mode: 'buyNow',
|
|
||||||
skuId: selectShop.goods_sku_id,
|
|
||||||
num: selectShop.buy_num
|
|
||||||
}})
|
|
||||||
// this.$navTo('pages/checkout/index', {
|
|
||||||
// mode: 'buyNow',
|
|
||||||
// goodsId: selectShop.goods_id,
|
|
||||||
// goodsSkuId: selectShop.goods_sku_id,
|
|
||||||
// goodsNum: selectShop.buy_num
|
|
||||||
// })
|
|
||||||
// 隐藏当前弹窗
|
|
||||||
this.onChangeValue(false)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,230 +0,0 @@
|
|||||||
.container {
|
|
||||||
// 设置ios刘海屏底部横线安全区域
|
|
||||||
// 110 - 18 + 4
|
|
||||||
padding-bottom: calc(constant(safe-area-inset-bottom) + 106rpx + 6rpx);
|
|
||||||
padding-bottom: calc(env(safe-area-inset-bottom) + 106rpx + 6rpx);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 商品信息
|
|
||||||
.goods-info {
|
|
||||||
background: #fff;
|
|
||||||
padding: 25rpx 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-item__top {
|
|
||||||
min-height: 40rpx;
|
|
||||||
margin-bottom: 20rpx;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.floor-price__samll {
|
|
||||||
font-size: 26rpx;
|
|
||||||
line-height: 1;
|
|
||||||
color: #FA2209;
|
|
||||||
margin-bottom: -10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 商品价
|
|
||||||
.floor-price {
|
|
||||||
color: #FA2209;
|
|
||||||
margin-right: 15rpx;
|
|
||||||
font-size: 42rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.original-price {
|
|
||||||
font-size: 26rpx;
|
|
||||||
text-decoration: line-through;
|
|
||||||
color: #959595;
|
|
||||||
margin-right: 15rpx;
|
|
||||||
margin-bottom: -6rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 会员价标签
|
|
||||||
.user-grade {
|
|
||||||
background: #3c3c3c;
|
|
||||||
border-radius: 6rpx;
|
|
||||||
padding: 8rpx 14rpx;
|
|
||||||
margin-right: 15rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #EEE0C3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-sales {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #959595;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-item__name .goods-name {
|
|
||||||
font-size: 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 商品分享 */
|
|
||||||
|
|
||||||
.goods-share__line {
|
|
||||||
border-left: 1rpx solid #f4f4f4;
|
|
||||||
height: 60rpx;
|
|
||||||
margin: 0 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-share .share-btn {
|
|
||||||
line-height: normal;
|
|
||||||
padding: 0;
|
|
||||||
background: none;
|
|
||||||
border-radius: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
font-size: 8pt;
|
|
||||||
border: none;
|
|
||||||
color: #191919;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-share .share-btn::after {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-share .share__icon {
|
|
||||||
font-size: 40rpx;
|
|
||||||
margin-bottom: 5rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 商品卖点
|
|
||||||
.info-item_selling-point {
|
|
||||||
margin-top: 8rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #808080;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 选择商品规格
|
|
||||||
.goods-choice {
|
|
||||||
padding: 26rpx 30rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
|
|
||||||
.spec-list {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.spec-name {
|
|
||||||
margin-right: 10rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 商品详情
|
|
||||||
.goods-content .item-title {
|
|
||||||
padding: 26rpx 30rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 底部操作栏
|
|
||||||
.footer-fixed {
|
|
||||||
position: fixed;
|
|
||||||
bottom: var(--window-bottom);
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
display: flex;
|
|
||||||
z-index: 11;
|
|
||||||
box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
|
|
||||||
background: #fff;
|
|
||||||
|
|
||||||
// 设置ios刘海屏底部横线安全区域
|
|
||||||
padding-bottom: constant(safe-area-inset-bottom);
|
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-container {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
height: 106rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 快捷菜单
|
|
||||||
.foo-item-fast {
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 256rpx;
|
|
||||||
line-height: 1;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.fast-item {
|
|
||||||
position: relative;
|
|
||||||
padding: 4rpx 10rpx;
|
|
||||||
line-height: 1;
|
|
||||||
// text-align: center;
|
|
||||||
|
|
||||||
.fast-icon {
|
|
||||||
margin-bottom: 6rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--home {
|
|
||||||
margin-right: 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--cart {
|
|
||||||
.fast-icon { padding-left: 3px; }
|
|
||||||
}
|
|
||||||
|
|
||||||
// 角标
|
|
||||||
.fast-badge {
|
|
||||||
display: inline-block;
|
|
||||||
box-sizing: border-box;
|
|
||||||
min-width: 16px;
|
|
||||||
padding: 0 3px;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 12px;
|
|
||||||
font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
|
|
||||||
line-height: 1.2;
|
|
||||||
text-align: center;
|
|
||||||
background-color: #ee0a24;
|
|
||||||
border: 1px solid #fff;
|
|
||||||
border-radius: 999px;
|
|
||||||
}
|
|
||||||
.fast-badge--fixed {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
transform-origin: 100%
|
|
||||||
}
|
|
||||||
|
|
||||||
.fast-icon {
|
|
||||||
font-size: 46rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fast-text {
|
|
||||||
font-size: 24rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 操作按钮
|
|
||||||
.foo-item-btn {
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
.btn-wrapper {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-item {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 28rpx;
|
|
||||||
height: 72rpx;
|
|
||||||
margin-right: 16rpx;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 50rpx;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 立即购买按钮
|
|
||||||
.btn-item-main {
|
|
||||||
background: linear-gradient(to right, #f9211c, #ff6335);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 购物车按钮
|
|
||||||
.btn-item-deputy {
|
|
||||||
background: linear-gradient(to right, #ffa600, #ffbb00);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
After Width: | Height: | Size: 168 KiB |
Loading…
Reference in new issue