You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
yanzong_qianduan/pages/goods/detail.vue

1589 lines
34 KiB

<template>
<view class="detail">
<u-navbar>
<view class="slot-wrap">
<image style="width: 50rpx; height: 50rpx;" @click="goHome()" :src="$picUrl+'/static/detail/home.png'"></image>
<view class="search">
<input type="text" @click="toSearch()" disabled placeholder="iPhone15" class="searInput" />
</view>
</view>
</u-navbar>
<view class="head">
<view class="share" @click="shareImg()">
<view class="sp"></view>
<image :src="$picUrl+'/static/detail/share.png'" class="shareIcon" @click="shareImg"></image>
<button open-type="share"></button>
</view>
<view class="swiper">
<swiper class="swiper" :circular="true" autoplay @change="changeSwiper">
<swiper-item v-for="(item,index) in goods.goods_images1" :key="index" @click="previewImage(index)">
<image :src="item" class="goodsImg"></image>
</swiper-item>
</swiper>
<view class="dots" v-if="goods.goods_images && goods.goods_images.length> 0">{{(currenIndex+1)+"/"+goods.goods_images.length}}</view>
</view>
</view>
<view class="goodsInfo">
<view class="goodsPrice">
<view class="left">
<view class="leftPrice">
<text>¥</text>{{goods.goods_price_min}}
</view>
<view class="sellPrice" v-if="goods.goods_price_min_dealer">
<text class="sellLeft">分销价</text>¥{{goods.goods_price_min_dealer?goods.goods_price_min_dealer:0}}
</view>
</view>
<view class="right">
<view class="rightPrice">
¥{{goods.line_price_min}}
</view>
<view class="rightInfo">
<image :src="$picUrl+'/static/detail/jiangjia.png'"></image>
</view>
</view>
</view>
<view class="pro" v-if="isLogin || userInfo.user_type==10">
<view class="proMem">
<text v-if="userInfo.user_type==10">Plus</text>
<text v-if="userInfo.user_type==20">分销</text>
PRO会员
</view>
<view class="proInfo">
开通<text v-if="userInfo.user_type==10">Plus</text>
<text v-if="userInfo.user_type==20">分销</text>会员预计再省<text style="color: #FF1D1D;">30</text>元
</view>
<view class="proBtn" @click="goMember()">
立即开通
</view>
</view>
<view class="goodsDetail">
<view class="goodsName">
{{goods.goods_name}}
</view>
<view class="goodsOpera">
<view class="goodsNum" @click="copyNum(goods.skuList[0].goods_sku_id)" v-if="goods.specList && goods.specList.length>0">
<text>{{goods.skuList[0].goods_sku_id}}</text>
<image :src="$picUrl+'/static/detail/copy.png'"></image>
</view>
<view class="goodsNum" @click="copyNum(goods.goods_id)" v-else>
<text>{{goods.goods_id}}</text>
<image :src="$picUrl+'/static/detail/copy.png'"></image>
</view>
<view class="operaImg">
<image :src="$picUrl+'/static/detail/jiangjia.png'" class="tips"></image>
<image :src="$picUrl+'/static/detail/tip.png'" class="tips"></image>
<image :src="$picUrl+'/static/detail/ys.png'" class="tips"></image>
</view>
</view>
<view class="rank" @click="goRanking()" v-if="goods && goods.category">
<text>排行榜 {{goods.category.name}}热搜榜第{{goods.paihang}}名</text>
<image :src="$picUrl+'/static/detail/rightIcon.png'"></image>
</view>
</view>
</view>
<view class="orderInfo">
<!-- -->
<view class="chosed" v-if="goods.spec_type == 20">
<view class="title">已选</view>
<view class="info" v-if="goods.skuList.length>0">
<text v-for="(a,idx) in goods.skuList[0].goods_props" :key="idx" style="margin-right: 10rpx;">{{a.group.name}}{{a.value.name}}</text>1件
</view>
</view>
<view class="chosed" v-else>
<view class="title">已选</view>
<view class="info">1件</view>
</view>
<view class="chosed">
<view class="title">送至</view>
<view class="info">
<view class="infoLeft">
现货
<image :src="$picUrl+'/static/detail/rightIcon.png'"></image>
</view>
<view class="box" @click="choseAddress()" >
<view class="address">
{{addressInfo.region?addressInfo.region.province +'-'+addressInfo.region.city+'-'+addressInfo.region.region:'全国'}}
</view>
<u-icon name="arrow-right" color="#7C7C7C"></u-icon>
</view>
</view>
</view>
<view class="chosed">
<view class="serve">
<view class="serveInfo">
服务
</view>
</view>
<view class="box" @click="toFuwu()">
<view class="business">
<view class="busSour">
<text>商家来源:平台认证商户</text>
</view>
<view class="busSour">
<text>商家名称:{{cityInfo.shop_name}}</text>
</view>
</view>
<u-icon name="arrow-right" style="float: right;" color="#7C7C7C"></u-icon>
</view>
</view>
<view class="chosed" v-if="serveList.length>0">
<view class="title">服务</view>
<view class="info">
<image :src="$picUrl+'/static/detail/buy.png'" class="buy"></image>
<text class="li" v-for="(item,index) in serveList" :key="index" style="margin-right: 5rpx;">{{item.name}}</text>
</view>
</view>
<view class="chosed" v-else>
<view class="title">服务</view>
<view class="info">
<image :src="$picUrl+'/static/detail/buy.png'" class="buy"></image>
<text class="li" style="margin-right: 5rpx;">正品保障</text>
<text class="li" style="margin-right: 5rpx;">全程跟踪</text>
</view>
</view>
</view>
<view class="about">
<view class="aboutHead">
<view class="aboutSuggest">
相关推荐
</view>
<!-- <view class="more">
查看更多
</view> -->
</view>
<view class="goodsList">
<view class="goodsItem" v-for="(item,index) in suggestGoodsList" :key="index" @click="toDetail(item.goods_id)">
<view class="img">
<image :src="item.goods_image" mode="" class="goodsImg"></image>
</view>
<view class="goodsName ">
{{item.goods_name}}
</view>
<view class="price">
¥<text>{{item.goods_price_min}}</text>
</view>
</view>
</view>
</view>
<view class="detail-content" v-html="goods.content"></view>
<view class="footer">
<view class="fooLeft">
<view class="footerCus firstBtn" v-if="isLogin == false" @click="addCar()">
<view class="cusIcon">
<image src="/static/detail/customer.png"></image>
</view>
<view class="customer">
客服
</view>
</view>
<view class="footerCus firstBtn" v-else>
<view class="cusIcon">
<image src="/static/detail/customer.png"></image>
</view>
<view class="customer">
客服
</view>
<button open-type="contact"></button>
</view>
<view class="footerCus " @click="shoppingCart()">
<view class="cusIcon">
<image src="/static/detail/car.png" mode=""></image>
</view>
<view class="customer car">
购物车
</view>
</view>
</view>
<view class="fooRight">
<view class="addCar" v-if="!isPre" @click="addCar()">
加入购物车
</view>
<view class="buyNow" v-if="!isPre" @click="buyNow">
立即购买
</view>
<view class="buyNow" @click="onReservation" v-if="isPre">
立即预约
</view>
</view>
</view>
<view class="dia" v-if="openDialog">
<view class="preSuc" v-if="shareType=='pre'">
<view class="preImg">
<image src="../../static/order/ld.png" mode="" class="ldImg"></image>
</view>
<view class="preTitle">
预约成功
</view>
<view class="iKnow" @click="onKonw">
查看预约记录
</view>
</view>
<view class="setMs" v-if="shareType=='setPrice'">
<view class="msprice">
设置秒杀价格
</view>
<view class="msLine">
<u-line class="u-line"></u-line>
</view>
<view class="msp">
<text>秒杀价:</text>
<input type="text" placeholder="秒杀价格可低于成本价" class="inp" />
</view>
<view class="qj">
<text class="msQj">秒杀区间:</text>
<view class="date">
<view class="beginTime timeCommn">
开始时间
</view>
-
<view class="timeCommn endTime">
结束时间
</view>
</view>
</view>
<view class="msLimit">
<text>秒杀限购:</text>
<switch @change="switch1Change" />
</view>
<view class="peoLimit">
<text>每人限购</text>
<view class="num">
1
</view>
<text>次</text>
</view>
<view class="operaBtn">
<view class="cancel btnComm">
取消
</view>
<view class="sureBtn btnComm">
确定
</view>
</view>
</view>
<view class="shareWechat" v-if="shareType=='share'">
<view class="shareGoods">
<image src="/static/detail/tv.png" mode="" class="shareImg"></image>
</view>
<view class="shareInfo">
<view class="shareGoodsInfo">
{{goods.goods_name}}
</view>
<view class="sharePrice">
¥{{goods.goods_price_min}}
</view>
</view>
<view class="shareOpera">
<view class="operaItem" @click="copyText(goods.goods_name)">
<view class="imgIcon">
<u-icon name="order" class="iconIm"></u-icon>
</view>
<view class="shareText" >
复制文案
</view>
</view>
<view class="operaItem" @click="goShare">
<view class="imgIcon weChatIcon">
<u-icon name="order" class="iconIm"></u-icon>
</view>
<view class="shareText">
<button open-type="share" @click="shareWechat">微信好友</button>
</view>
</view>
<view class="operaItem">
<view class="imgIcon hb">
<u-icon name="order" class="iconIm"></u-icon>
</view>
<view class="shareText">
生成海报
</view>
</view>
</view>
<view class="shareCancel" @click="shareCancel">
取消
</view>
</view>
</view>
<view class="toTop" v-if="isTop" @click="openScrollTo()">
<image :src="$picUrl+'/static/toTop.png'"></image>
</view>
<SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @addCart="onAddCart" />
</view>
</template>
<script>
import * as GoodsApi from '@/api/goods'
import * as goodsCar from '@/api/cart.js'
import SkuPopup from './components/SkuPopup'
import * as address from '@/api/address.js'
export default {
components: {
SkuPopup
},
data() {
return {
cityInfo: {},
currenIndex: 0,
isTop: false,
skuMode: 1,
goodShow:false,
showSkuPopup: false,
allPicture: '',
keyword: '',
diaShow: false,
searchValue: '',
isPre: false,
pre_id: '',
setPrice: false,
openDialog: false,
goodsId: '',
goods: {
skuList: []
},
suggestGoodsList: [],
userInfo: {},
addressList: [],
addressInfo: {},
serveList:[],
isLogin: false,
}
},
onLoad(options) {
console.log(options,"oo")
this.isPre = options.isPre?options.isPre:null
this.goodsId = options.goodsId?options.goodsId:null
this.pre_id = options.pre_id?options.pre_id:null;
this.getSuggestGoods()
this.getServeList()
this.getGoodsDetail()
this.cityInfo = uni.getStorageSync("cityInfo");
},
onShow() {
if(uni.getStorageSync('AccessToken')){
this.getAddressList()
this.isLogin = true;
this.userInfo = uni.getStorageSync('userInfo');
}else{
this.isLogin = false;
this.userInfo = {}
}
},
onPageScroll(e) {
if (e.scrollTop <= 200 ) { // 当滚动到顶部且向下滑动时为true
this.isTop = false
} else {
this.isTop = true
}
},
methods: {
//门店图片预览
previewImage(i){
uni.previewImage({
current: this.goods.goods_images1[i],
urls: this.goods.goods_images1
})
},
//监听滚动
changeSwiper(e){
this.currenIndex = e.detail.current
},
openScrollTo(){
uni.pageScrollTo({
scrollTop: 0
})
},
shareImg(){
this.openDialog =true
this.shareType= 'share'
},
preNow(){
const that = this
let params={
goods_id:that.goods.goods_id,
pre_id:1
}
GoodsApi.presale(params).then(res => {
if (res.status == 200) {
that.$toast(res.message)
}
})
.catch()
},
getServeList(){
const that = this
let params = {
goodsId: that.goodsId
}
return new Promise((resolve, reject) => {
GoodsApi.serveList(params).then(res => {
if (res.status == 200) {
that.serveList = res.data.list
}
})
.catch()
})
},
// 预约成功去列表
onKonw(){
uni.navigateTo({
url:'/pages/news/park/recordHistory'
})
},
async onReservation() {
let {
status,
message,
data
} = await GoodsApi.presale({
goods_id: this.goodsId,
pre_id: this.pre_id
});
if (status == 200) {
this.openDialog=true
this.diaShow=true
}
},
// 选择商品规格
getAddressList() {
const that = this
return new Promise((resolve, reject) => {
address.list().then(res => {
if (res.status == 200) {
that.addressList = res.data.list
if(res.data.list && res.data.list.length > 0){
console.log(1111)
that.getDefaultAddress()
}else{
console.log(222)
}
}
})
.catch()
})
},
//获取收货地址
getDefaultAddress() {
console.log('5855555')
const that = this
return new Promise((resolve, reject) => {
address.defaultId().then(res => {
if (res.status == 200) {
for (var i = 0; i < that.addressList.length; i++) {
if (res.data.defaultId == that.addressList[i].address_id) {
that.addressInfo = that.addressList[i];
console.log(that.addressInfo,'获取地址')
}
}
}
})
.catch()
})
},
//选择地址
choseAddress() {
if(!uni.getStorageSync("AccessToken")) {
uni.navigateTo({
url: "/pages/login/index"
})
return ;
}
if(this.addressList && this.addressList.length > 0){
uni.navigateTo({
url: '/pages/address/index'
})
}else{
uni.navigateTo({
url: '/pages/address/create'
})
}
},
toSearch() {
uni.navigateTo({
url: "/pages/search/index"
})
},
choseSku() {
this.showSkuPopup = true
},
copyNum(msg) {
uni.setClipboardData({
data: msg,
success: function () {
uni.getClipboardData({
success: function (res) {
console.log(res.data);
uni.showToast({
icon: "none",
title: "复制成功"
})
}
});
}
});
},
// 获取商品信息
getGoodsDetail() {
const that = this
return new Promise((resolve, reject) => {
GoodsApi.detail(this.goodsId)
.then(result => {
let info = result.data.detail;
info.goods_images1 = []
if(info.goods_images && info.goods_images.length > 0){
info.goods_images.map(a=>{
info.goods_images1.push(a.preview_url)
})
}
if(info.skuList && info.skuList.length > 0){
info.skuList = info.skuList.reverse();
}
info.content = info.content
.replace(/style=""/g,'')
.replace(/<img src=/g,'<img style="width: 100%; display:block" src=')
// that.goods = info;
Object.keys(info).forEach(item=>{
this.$set(this.goods,item,info[item])
// that.goods[item] = info[item]
})
that.allPicture = info.goods_images.length
})
.catch()
})
},
getSuggestGoods() {
// 获取推荐商品列表
const that = this
GoodsApi.recommended()
.then(result => {
console.log(result, '获取推荐商品列表')
let arr = result.data.goodsList
if(arr && arr.length > 0){
arr.map(a=>{
a.goods_price_min = Number(a.goods_price_min)
a.goods_price_max = Number(a.goods_price_max)
a.line_price_min = Number(a.line_price_min)
a.line_price_max = Number(a.line_price_max)
})
}
that.suggestGoodsList = arr
})
.catch()
},
goHome() {
uni.switchTab({
url: '/pages/index/index'
})
},
toDetail(goods_id) {
uni.navigateTo({
url: '/pages/goods/detail?goodsId=' + goods_id
})
},
goRanking() {
// 跳转排行榜
uni.navigateTo({
url: '/pages/activity/ranking'
})
},
goMember() {
if(!uni.getStorageSync("AccessToken")) {
uni.navigateTo({
url: "/pages/login/index"
})
return ;
}
uni.navigateTo({
url: '/pages/member/index'
})
},
toFuwu() {
uni.navigateTo({
url: "/pages/news/consult/about"
})
},
shoppingCart() {
// 购物车
uni.switchTab({
url: '/pages/cart/index'
})
},
addCar() {
if(!uni.getStorageSync("AccessToken")) {
uni.navigateTo({
url: "/pages/login/index"
})
return ;
}
// 加入购物车
const that = this
goodsCar.add(that.goods.goods_id, (that.goods.skuList && that.goods.skuList.length >0?that.goods.skuList[0].goods_sku_id:''), that.goods.spec_type == 20 ? 1 : 1)
.then(res => {
if (res.status == 200) {
that.$toast(res.message)
}
})
.catch()
},
buyNow() {
if(!uni.getStorageSync("AccessToken")) {
uni.navigateTo({
url: "/pages/login/index"
})
return ;
}
// 立即下单
console.log(this.token,'登录信息')
// if(!this.token){
// this.$toast('请登录')
// uni.navigateTo({
// url:'/pages/login/index'
// })
// }
if(this.goods.stock_total==0){
return this.$toast('库存不足,请选择其他商品购买')
}
const item = JSON.stringify(this.goods)
uni.navigateTo({
url: '/pages/sureOrder/index?goodsID=' +encodeURIComponent(item)
})
},
shareCancel() {
//
},
}
}
</script>
<style lang="scss" scoped>
.detail {
width: 100%;
height: 100%;
padding-bottom: 150rpx;
.toTop{
position: fixed;
bottom: 230rpx;
right: 32rpx;
width: 47px;
height: 47px;
background: #FFFFFF;
border-radius: 50%;
z-index:999;
display: flex;
align-items: center;
justify-content: center;
image{
width: 25px;
height: 25px;
}
}
&-content{
padding: 30rpx;
font-size: 26rpx;
line-height: 50rpx;
width: 710rpx;
margin: 0 auto;
margin-top: 30rpx;
background-color: #fff;
box-sizing: border-box;
}
}
.slot-wrap {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.search{
width: 400rpx;
height: 58rpx;
border-radius: 60rpx;
background-color: #F3F3F3;
display: flex;
align-items: center;
padding-left: 20rpx;
box-sizing: border-box;
margin: 0 20rpx;
}
}
.search {
display: flex;
align-items: center;
.icon {
width: 34rpx;
height: 38rpx;
margin: 0 22rpx 0 76rpx;
}
.searInput {
width: 428rpx;
height: 58rpx;
background: #F3F3F3;
border-radius: 60rpx 60rpx 60rpx 60rpx;
opacity: 1;
display: flex;
align-items: center;
.seaIcon {
width: 28rpx;
height: 28rpx;
margin: 0 0 0 26rpx;
}
.input {
flex: 1;
padding-left: 20rpx;
}
}
}
.head{
width: 100%;
height: 750rpx;
position: relative;
}
.share {
z-index: 10;
top: 28rpx;
width: 74rpx;
height: 74rpx;
position: absolute;
background-color: rgba(255, 255, 255, 1);
border-radius: 50%;
text-align: center;
right: 28rpx;
.sp {
width: 54rpx;
height: 54rpx;
display: none;
}
.shareIcon {
width: 54rpx;
height: 54rpx;
margin-top: 10rpx;
}
}
.swiper {
width: 100%;
height: 750rpx;
opacity: 1;
left: 0;
right: 0;
margin: auto;
.goodsImg {
width: 100%;
height: 100%;
}
.dots{
width: 82rpx;
line-height: 56rpx;
background: rgba(38,38,38,0.85);
position: absolute;
bottom: 20rpx;
right: 0;
z-index: 22;
font-size: 28rpx;
font-weight: 400;
color: #FFFFFF;
text-align: center;
border-radius: 56rpx 0 0 56rpx;
}
}
.goodsInfo {
width: 720rpx;
background: #FFFFFF;
border-radius: 6rpx;
padding-bottom: 30rpx;
overflow: hidden;
margin: 20rpx auto 16rpx;
.goodsPrice {
background-image: url('https://www.royaum.com.cn/static/detail/priceback.png');
width: 720rpx;
height: 136rpx;
background-size: cover;
display: flex;
align-items: center;
justify-content: space-between;
.left {
margin: 0 0 0 28rpx;
.leftPrice {
height: 64rpx;
font-size: 46rpx;
font-weight: 400;
color: #FFFFFF;
line-height: 64rpx;
text {
height: 64rpx;
font-size: 32rpx;
font-weight: 400;
color: #FFFFFF;
line-height: 64rpx;
margin-right: 8rpx;
}
}
.sellPrice {
height: 34rpx;
font-size: 24rpx;
font-weight: 400;
color: #FFFFFF;
line-height: 34rpx;
.sellLeft {
width: 72rpx;
margin-right: 8rpx;
}
}
}
.right {
margin-right: 50rpx;
.rightPrice {
text-align: center;
height: 48rpx;
font-size: 34rpx;
font-weight: 400;
color: #FFFFFF;
line-height: 48rpx;
text-decoration: line-through;
}
.rightInfo {
width: 125rpx;
height: 26rpx;
image{
width: 100%;
height: 100%;
}
}
}
}
.pro {
background-image: url('https://www.royaum.com.cn/static/detail/pro.png');
background-size: 100% 100%;
width: 690rpx;
height: 82rpx;
display: flex;
align-items: center;
margin: 20rpx 0 0 10rpx;
.proMem {
width: 142rpx;
font-size: 28rpx;
font-weight: 500;
color: #966542;
margin-left: 18rpx;
padding-right: 24rpx;
border-right: 2rpx solid #EFD4B4;
}
.proInfo {
width: 304rpx;
font-size: 24rpx;
font-weight: 500;
color: #966542;
margin: 0 38rpx 0 26rpx;
}
.proBtn {
width: 126rpx;
height: 50rpx;
background: #9F744D;
border-radius: 82rpx;
opacity: 1;
text-align: center;
line-height: 50rpx;
font-size: 24rpx;
font-weight: 500;
color: #FFFFFF;
}
}
.goodsDetail {
.goodsName {
width: 672rpx;
font-size: 28rpx;
font-weight: 400;
color: #000000;
line-height: 50rpx;
margin: 28rpx auto 0;
}
.goodsOpera {
margin-left: 28rpx;
display: flex;
justify-content: space-between;
align-items: center;
.goodsNum {
text {
display: inline-block;
font-size: 24rpx;
font-weight: 400;
color: #8A8A8A;
margin-right: 4rpx;
}
image {
width: 28rpx;
height: 28rpx;
vertical-align: middle;
margin-left: 10rpx;
}
}
.operaImg {
margin-right: 34rpx;
image {
width: 49rpx;
height: 49rpx;
}
.tips {
margin-left: 10rpx;
}
}
}
.rank {
width: 670rpx;
height: 58rpx;
background: #FFF3EE;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28rpx;
box-sizing: border-box;
margin: 16rpx auto 0;
text {
font-size: 24rpx;
font-weight: 400;
color: #FF1130;
line-height: 58rpx;
}
image {
width: 8rpx;
height: 14rpx;
}
}
}
}
.orderInfo {
width: 720rpx;
background: #FFFFFF;
border-radius: 6rpx;
opacity: 1;
margin: 16rpx auto 20rpx;
padding: 25rpx 25rpx 10rpx;
box-sizing: border-box;
.chosed {
display: flex;
align-items: flex-start;
padding-bottom: 18rpx;
overflow: hidden;
.title {
font-size: 24rpx;
font-weight: 400;
color: #C4C4C4;
margin-right: 38rpx;
}
.info {
flex: 1;
font-size: 24rpx;
font-weight: 400;
color: #3D3D3D;
display: flex;
align-items: center;
.buy {
width: 114rpx;
height: 23rpx;
margin-right: 10rpx;
display: block;
}
.infoLeft {
height: 34rpx;
font-size: 24rpx;
font-weight: 400;
color: #FE3636;
line-height: 34rpx;
image {
width: 8rpx;
height: 14rpx;
margin: 0 10rpx 0 8rpx;
}
}
.address {
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #3D3D3D;
line-height: 34rpx;
}
}
.serve {
.serveInfo {
width: 48rpx;
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #C4C4C4;
line-height: 34rpx;
margin-right: 38rpx;
}
.span {
width: 48rpx;
height: 34rpx;
}
}
.box{
display: flex;
align-items: flex-start;
justify-content: space-between;
flex: 1;
}
.business {
.busSour {
height: 40rpx;
font-size: 24rpx;
font-weight: 400;
color: #3D3D3D;
}
.busName {
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #3D3D3D;
line-height: 34rpx;
}
}
}
}
.about {
width: 720rpx;
// height: 730rpx;
background: #FFFFFF;
border-radius: 6rpx 6rpx 6rpx 6rpx;
opacity: 1;
margin: 14rpx 0 0rpx 20rpx;
padding: 24rpx 0 0 36rpx;
.aboutHead {
display: flex;
justify-content: space-between;
.aboutSuggest {
width: 112rpx;
height: 40rpx;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 40rpx;
}
.more {
width: 96rpx;
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #909090;
line-height: 34rpx;
margin-right: 20rpx;
}
}
.goodsList {
display: flex;
flex-wrap: wrap;
margin-top: 30rpx;
padding-bottom: 20rpx;
overflow: hidden;
.goodsItem {
margin-right: 18rpx;
.img {
width: 204rpx;
height: 168rpx;
background: #FBFBFB;
border-radius: 6rpx 6rpx 6rpx 6rpx;
opacity: 1;
display: flex;
justify-content: center;
align-items: center;
.goodsImg {
width: 190rpx;
height: 144rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
opacity: 1;
}
}
.goodsName {
width: 184rpx;
height: 80rpx;
font-size: 28rpx;
font-weight: 400;
color: #000000;
line-height: 40rpx;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal !important;
word-wrap: break-word;
}
.price {
width: 66rpx;
height: 44rpx;
font-size: 24rpx;
font-weight: 500;
color: #ED2B00;
line-height: 38rpx;
text{
font-size: 32rpx;
}
}
}
}
}
.vacancy {
width: 100%;
height: 150rpx;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
height: 130rpx;
background: #FFFFFF;
box-shadow: -6rpx 14rpx 48rpx 0rpx rgba(0, 0, 0, 0.25);
border-radius: 0rpx 0rpx 0rpx 0rpx;
opacity: 1;
display: flex;
align-items: center;
text-align: center;
justify-content: space-between;
.fooLeft {
display: flex;
align-items: center;
}
.fooRight {
display: flex;
align-items: center;
margin-right: 20rpx;
}
.firstBtn {
margin-left: 60rpx;
}
.footerCus {
margin-right: 44rpx;
text-align: center;
position: relative;
.cusIcon {
width: 38rpx;
height: 38rpx;
margin: 0 auto;
image {
width: 100%;
height: 100%;
}
}
button{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
opacity: 0;
}
.customer {
width: 40rpx;
height: 28rpx;
font-size: 20rpx;
font-weight: 400;
color: #3D3D3D;
line-height: 40rpx;
}
.car {
width: 60rpx;
}
}
.addCar {
width: 196rpx;
height: 78rpx;
background: #FF9E2B;
border-radius: 42rpx 42rpx 42rpx 42rpx;
opacity: 1;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 78rpx;
text-align: center;
}
.buyNow {
width: 212rpx;
height: 78rpx;
background: linear-gradient(102deg, #FE5E06 0%, #F3221A 100%);
border-radius: 42rpx 42rpx 42rpx 42rpx;
opacity: 1;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 78rpx;
text-align: center;
margin-left: 8rpx;
}
}
.dia {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(69, 69, 69, 0.44);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
.preSuc {
width: 560rpx;
height: 400rpx;
background: linear-gradient(180deg, #FFE4E4 0%, #FFFFFF 100%);
border-radius: 12rpx 12rpx 12rpx 12rpx;
opacity: 1;
display: flex;
flex-direction: column;
align-items: center;
.preImg {
width: 100rpx;
height: 100rpx;
position: relative;
top: -50rpx;
.ldImg {
width: 100%;
height: 100%;
}
}
.preTitle {
height: 44rpx;
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #000000;
line-height: 38rpx;
margin-top: 32rpx;
}
.iKnow {
width: 312rpx;
height: 72rpx;
background: #F55349;
border-radius: 8rpx 8rpx 8rpx 8rpx;
opacity: 1;
text-align: center;
line-height: 72rpx;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #FFFFFF;
margin-top: 70rpx;
}
}
.setMs {
width: 656rpx;
height: 690rpx;
background: #FFFFFF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
opacity: 1;
.msprice {
width: 100%;
height: 44rpx;
font-size: 32rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
color: #262626;
line-height: 38rpx;
text-align: center;
margin-top: 24rpx;
margin-bottom: 26rpx;
}
.msLine {
margin-bottom: 30rpx;
}
.msp {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 30rpx;
.inp {
width: 440rpx;
height: 72rpx;
background: #FFFFFF;
border-radius: 4rpx 4rpx 4rpx 4rpx;
opacity: 1;
border: 2rpx solid #EBEBEB;
margin-left: 20rpx;
line-height: 72rpx;
}
}
.qj {
font-size: 28rpx;
font-weight: 400;
color: #262626;
line-height: 33rpx;
margin-bottom: 34rpx;
.msQj {
position: relative;
left: -218rpx;
}
.date {
display: flex;
align-items: center;
justify-content: center;
margin-top: 16rpx;
.timeCommn {
width: 260rpx;
height: 68rpx;
background: #F1F1F1;
border-radius: 62rpx 62rpx 62rpx 62rpx;
opacity: 1;
line-height: 68rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #929292;
padding-left: 34rpx;
}
.beginTime {
margin-right: 16rpx;
}
.endTime {
margin-left: 20rpx;
}
}
}
.msLimit {
display: flex;
justify-content: space-between;
padding: 0 38rpx 0 42rpx;
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #262626;
line-height: 33rpx;
}
.peoLimit {
display: flex;
margin-left: 42rpx;
align-items: center;
.num {
width: 106rpx;
height: 60rpx;
background: #FFFFFF;
border-radius: 4rpx 4rpx 4rpx 4rpx;
opacity: 1;
border: 2rpx solid #EBEBEB;
text-align: center;
line-height: 60rpx;
margin: 0 18rpx 0 16rpx;
}
}
.operaBtn {
display: flex;
justify-content: center;
margin-top: 52rpx;
.btnComm {
width: 216rpx;
height: 70rpx;
background: #EEEEEE;
border-radius: 44rpx 44rpx 44rpx 44rpx;
opacity: 1;
line-height: 70rpx;
text-align: center;
}
.sureBtn {
width: 214rpx;
height: 74rpx;
background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%);
border-radius: 100rpx 100rpx 100rpx 100rpx;
opacity: 1;
text-align: center;
line-height: 74rpx;
font-size: 28rpx;
font-weight: 500;
color: #FFFFFF;
margin-left: 24rpx;
}
}
}
.shareWechat {
width: 656rpx;
height: 884rpx;
background: #FFFFFF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
opacity: 1;
display: flex;
flex-direction: column;
padding-top: 24rpx;
.shareGoods {
margin-left: 28rpx;
width: 604rpx;
height: 382rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
opacity: 1;
image {
width: 100%;
height: 100%;
}
}
.shareInfo {
display: flex;
align-items: center;
margin-top: 12rpx;
.shareGoodsInfo {
width: 410rpx;
height: 120rpx;
font-size: 28rpx;
font-weight: 400;
color: #000000;
line-height: 33rpx;
}
.sharePrice {
height: 64rpx;
font-size: 46rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FF645A;
line-height: 54rpx;
}
}
.shareOpera {
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 36rpx;
margin-bottom: 46rpx;
.operaItem {
.imgIcon {
width: 88rpx;
height: 88rpx;
background: linear-gradient(180deg, #EC6244 0%, #FA938C 100%);
border-radius: 50%;
opacity: 1;
line-height: 88rpx;
text-align: center;
color: #fff;
.iconIm {
font-size: 32rpx;
}
}
.weChatIcon {
background: #28C445;
}
.hb {
background: linear-gradient(180deg, #53A2EE 0%, #6FB2F4 100%);
}
.shareText {
width: 96rpx;
height: 34rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 28rpx;
}
}
}
.shareCancel {
width: 556rpx;
height: 82rpx;
background: #EEEEEE;
border-radius: 44rpx 44rpx 44rpx 44rpx;
opacity: 1;
font-size: 28rpx;
font-weight: 500;
color: #585858;
line-height: 82rpx;
text-align: center;
left: 0;
right: 0;
margin: auto;
}
}
}
</style>