Loki
/
zsw-farm-bxg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
真食物配套的电商小程序.
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.
417 Commits
4 Branches
0 Tags
43 MiB
 
 
 
Tree: 66b7af52d9
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '66b7af52d9'
${ noResults }
zsw-farm-bxg/pages/activity/SeckillDetails/index.vue

1150 lines
32 KiB
Raw Blame History

<template>
<view :class="[posterImageStatus ? 'noscroll product-con' : 'product-con']" v-show="domStatus">
<view class="header">
<cu-custom :isBack="true" :isCenter="true" >
<block slot="backText">
<view class="backImg">
<image src="@/static/images/back-btn.png" mode=""></image>
</view>
</block>
<!-- <block slot="content">
<view class="tab-title">活动专区</view>
</block> -->
</cu-custom>
</view>
<product-con-swiper :imgUrls="imgUrls"></product-con-swiper>
<view class="tui-pro-detail">
<!-- <view class="tui-product-title tui-border-radius"> -->
<!-- <view class="tui-price__box">
<view class="tui-pro-pricebox tui-padding">
<view class="tui-pro-price">
<view>
<text>￥</text>
<text class="tui-price">{{ formatPrice(storeInfo.price, 0) }}</text>
<text>.{{ formatPrice(storeInfo.price, 1) }}</text>
</view>
<view class="tui-original-price tui-white__gray" v-text="'￥' + storeInfo.otPrice"></view>
</view>
<view class="tui-sold tui-white__gray">
<text>已抢{{ storeInfo.sales }}件</text>
<tui-tag v-if="seckillStatus != 2" type="white" plain size="24rpx" padding="8rpx" :scaleMultiple="0.94">限时秒杀</tui-tag>
</view>
</view>
<view class="tui-right__box">
<image v-if="seckillStatus == 2" src="https://www.thorui.cn/images/mall/img_seckillgood_seckill.png" class="tui-seckill__img" mode="widthFix"></image>
<tui-button v-if="seckillStatus == 2" type="danger" disabled shape="circle" width="140rpx" height="42rpx" :size="24">{{ seckillStatus == 1 ? '活动已结束' : '即将开抢' }}</tui-button>
<text v-if="seckillStatus != 2" class="tui-color-red">距结束还剩:</text>
<count-down :isDay="false" :tipText="' '" :dayText="' '" :hourText="' : '" :minuteText="' : '" :secondText="' '" :datatime="datatime"></count-down>
</view>
</view> -->
<view class="activity-info-box">
<view class="tui-right__box">
<view class="acea-row row-middle row-center">
<image class="icon" src="../../../static/images/order-status1.png" mode=""></image>
<!-- <image class="icon" src="../../../static/images/seckill-icon.png" mode=""></image> -->
<text>{{ seckillStatus != 2 ? '限时秒杀中' : seckillStatus == 1 ? '活动已结束' : '即将开抢' }}</text>
</view>
<view class="count-down-box">
<count-down :isSecond="false" :datatime="datatime" :styleAllStyle="styleAllStyle" :timeTxtStyle="timeTxtStyle"></count-down>
</view>
</view>
</view>
<view class="tui-pro-price">
<text class="tui-price">¥{{storeInfo.price}}</text>
<view class="tui-original-price">¥{{storeInfo.otPrice}}</view>
</view>
<!-- <view class="tui-pro-titbox"> -->
<view class="tui-pro-title">{{ storeInfo.title }}</view>
<view class="tui-pro-info">{{ storeInfo.info }}</view>
<!-- </view> -->
<!-- <view class="tui-padding"> -->
<view class="tui-sale-info">
<view class="tips acea-row">
<view class="tip">甄选品牌</view>
</view>
<view>库存：{{ storeInfo.stock }}{{ storeInfo.unitName }}</view>
<!-- <view>月销{{ storeInfo.sales }}</view> -->
</view>
<!-- </view> -->
<!-- </view> -->
</view>
<!-- 规格 -->
<view class="attribute acea-row row-between-wrapper" @click="selecAttrTap">
<view>选规格</view>
<view class="acea-row attr-content">
<image v-if="item.image" :src="item.image" v-for="(item,index) in productValue" :key="index" mode="aspectFill"></image>
<view class="attrs">共{{attr.productAttr[0].attrValueArr.length}}个{{attr.productAttr[0].attrName}}可选</view>
<!-- <text>{{ attrTxt }}：</text> -->
<!-- <text class="atterTxt">{{ attrValue }}</text> -->
</view>
<view class="jiantou-right"></view>
<!-- <view class="iconfont icon-jiantou"></view> -->
</view>
<view class="safeguard-info acea-row row-between-wrapper">
<view class="safeguard-item">
<image class="img" src="@/static/images/by.png" mode=""></image>
<view>满{{199}}包邮</view>
</view>
<view class="line"></view>
<view class="safeguard-item">
<image class="img" src="@/static/images/fxt.png" mode=""></image>
<view>7天无理由</view>
</view>
<view class="line"></view>
<view class="safeguard-item">
<image class="img" src="@/static/images/bj.png" mode=""></image>
<view>30天保价</view>
</view>
</view>
<!-- 用户评价 -->
<view class="userEvaluation" v-if="replyCount">
<view class="title acea-row row-between-wrapper" @click="goEvaluateList(storeInfo.productId)">
<view class="acea-row row-middle"><text>评价</text><text class="replyCount">{{ replyCount }}</text></view>
<!-- <view @click="goEvaluateList(id)" class="praise acea-row row-middle">
<view>好评率{{ replyChance }}%</view>
<view class="jiantou-right"></view>
</view> -->
</view>
<user-evaluation :reply="reply"></user-evaluation>
</view>
<view class="product-intro">
<view class="title">商品展示</view>
<view class="conter" v-html="storeInfo.description"></view>
</view>
<!-- 操作栏 -->
<view :style="(addBottom?'height: 162rpx;':'height: 122rpx;')+'background: #FFFFFF;'"></view>
<!--底部操作栏-->
<view class="tui-operation acea-row row-between" :style="addBottom?'height: 162rpx;':'height: 122rpx;'">
<view class="tui-operation-left acea-row">
<!-- #ifdef MP-WEIXIN -->
<view class="">
<button class="tui-operation-item" open-type="contact" hover-class="tui-opcity" :hover-stay-time="150">
<image src="@/static/images/service-icon.png" mode=""></image>
<!-- <view class="iconfont icon-kefu"></view> -->
<view class="tui-operation-text">客服</view>
</button>
</view>
<!-- #endif -->
<view class="stock">库存剩余：{{ storeInfo.stock }} {{ storeInfo.unitName }}</view>
<!-- <view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @click="setCollect" v-if="userCollect">
<view class="iconfont icon-shoucang1"></view>
<view class="tui-operation-text tui-scale-small">收藏</view>
</view>
<view class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150" @click="setCollect" v-if="!userCollect">
<view class="iconfont icon-shoucang"></view>
<view class="tui-operation-text tui-scale-small">收藏</view>
</view> -->
</view>
<view class="tui-operation-right" v-if="seckillStatus == 1 && storeInfo.num > 0 && storeInfo.stock > 0">
<view class="btn" @click="tapBuy">立即购买</view>
<!-- <view class="tui-flex-1">
<tui-button height="68rpx" :size="26" type="warning" shape="circle" @click="openAlone">单独购买</tui-button>
</view>
<view class="tui-flex-1">
<tui-button height="68rpx" :size="26" type="danger" shape="circle" @click="tapBuy">立即购买</tui-button>
</view> -->
</view>
<view class="tui-operation-right" v-if="seckillStatus == 1 && storeInfo.num <= 0 && storeInfo.stock <= 0">
<view class="btn">已售罄</view>
<!-- <view class="tui-flex-1">
<tui-button height="68rpx" :size="26" type="warning" shape="circle" disabled>已售罄</tui-button>
</view>
<view class="tui-flex-1">
<tui-button height="68rpx" :size="26" type="danger" shape="circle" @click="openAlone">原价购买</tui-button>
</view> -->
</view>
<view class="tui-operation-right" v-if="seckillStatus == 2">
<view class="btn">即将开始</view>
<!-- <view class="tui-flex-1">
<tui-button height="68rpx" :size="26" type="warning" shape="circle" disabled>即将开始</tui-button>
</view>
<view class="tui-flex-1">
<tui-button height="68rpx" :size="26" type="danger" shape="circle" @click="openAlone">原价购买</tui-button>
</view> -->
</view>
<view class="tui-operation-right" v-if="seckillStatus == 0">
<view class="btn">活动已结束</view>
<!-- <view class="tui-flex-1">
<tui-button height="68rpx" :size="26" type="warning" shape="circle" disabled>活动已结束</tui-button>
</view>
<view class="tui-flex-1">
<tui-button height="68rpx" :size="26" type="danger" shape="circle" @click="openAlone">原价购买</tui-button>
</view> -->
</view>
</view>
<ProductWindow v-on:changeFun="changeFun" :attr="attr" :cartNum="cartNum" :storeInfo="storeInfo.info" :unitName="storeInfo.unitName"></ProductWindow>
<StorePoster v-on:setPosterImageStatus="setPosterImageStatus" :posterImageStatus="posterImageStatus" :posterData="posterData"></StorePoster>
</view>
</template>
<style scoped lang="less">
.noscroll {
height: 100%;
overflow: hidden;
}
</style>
<script>
import ProductConSwiper from '@/components/ProductConSwiper'
import CountDown from '@/components/CountDown'
import ProductWindow from '@/components/ProductWindow'
import StorePoster from '@/components/StorePoster'
import UserEvaluation from '@/components/UserEvaluation';
import { getSeckillDetail } from '@/api/activity'
import { postCartAdd } from '@/api/store'
import { imageBase64 } from '@/api/public'
import { getCoupon, getCollectAdd, getCollectDel, getUserInfo } from '@/api/user'
const NAME = 'SeckillDetails'
export default {
name: 'SeckillDetails',
components: {
ProductConSwiper,
CountDown,
ProductWindow,
StorePoster,
UserEvaluation
},
props: {},
data: function() {
return {
addBottom: this.addBottom,
seckillStatus: '',
domStatus: false,
posterData: {
image: '',
title: '',
price: '',
code: '',
},
posterImageStatus: false,
action: '',
imgUrls: [],
storeInfo: [],
replyCount: 0,
// replyChance: '',
reply: [],
cartNum: 1,
attrTxt: '请选择',
productValue: [],
attrValue: '',
attr: {
cartAttr: false,
productAttr: [],
productSelect: {},
},
datatime: 0,
userCollect: false,
styleAllStyle: 'width:30rpx;height:24rpx;background:#F5F6F8;border-radius:8rpx;font-size:20rpx;color:#3A3A3C;line-height:24rpx;',
timeTxtStyle: 'font-size:20rpx;color:#F5F6F8;line-height:24rpx;padding:0rpx 4rpx;',
}
},
onShow: function() {
this.mountedStart()
},
methods: {
formatPrice(price, index) {
console.log(price)
if (price) {
return price.split('.')[index]
}
return ''
},
onShareAppMessage: function() {
return {
title: this.storeInfo.title,
imageUrl: this.storeInfo.image,
path: 'pages/activity/GoodsSeckill/index?id=' + this.storeInfo.id + '&spread=' + uni.getStorageSync('uid') + '&pageType=good&codeType=routine',
success(res) {
uni.showToast({
title: '分享成功',
})
},
fail(res) {
uni.showToast({
title: '分享失败',
icon: 'none',
})
},
}
},
openAlone: function() {
this.$yrouter.push({
path: '/pages/shop/GoodsCon/index',
query: {
id: this.storeInfo.productId,
},
})
// this.$yrouter.replace({ path: "/detail/" + this.storeInfo.productId });
},
routerGo(item) {
this.$yrouter.push({
path: '/pages/user/CustomerList/index',
})
},
//收藏商品
setCollect: function() {
let that = this,
id = that.storeInfo.id,
category = 'product'
if (that.userCollect) {
getCollectDel(id, category).then(function() {
that.userCollect = !that.userCollect
})
} else {
getCollectAdd(id, category).then(function() {
that.userCollect = !that.userCollect
})
}
},
mountedStart: function() {
var that = this
console.log(this)
let id = that.$yroute.query.id
this.seckillStatus = that.$yroute.query.status
that.datatime = parseInt(that.$yroute.query.time)
getSeckillDetail(id).then(res => {
that.userCollect = res.data.userCollect
res.data.storeInfo.description = res.data.storeInfo.description.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
that.$set(that.attr, 'productAttr', res.data.productAttr)
that.$set(that, 'productValue', res.data.productValue)
that.$set(that, 'storeInfo', res.data.storeInfo)
that.$set(that, 'imgUrls', res.data.storeInfo.sliderImageArr)
that.$set(that, 'replyCount', res.data.replyCount)
that.$set(that, 'reply', res.data.reply)
that.posterData.image = that.storeInfo.image_base
that.updateTitle()
if (that.storeInfo.title.length > 30) {
that.posterData.title = that.storeInfo.title.substring(0, 30) + '...'
} else {
that.posterData.title = that.storeInfo.title
}
that.posterData.price = that.storeInfo.price
that.posterData.code = that.storeInfo.code_base
// that.setProductSelect();
that.domStatus = true
that.DefaultSelect()
})
},
updateTitle() {
// document.title = this.storeInfo.title || this.$yroute.meta.title;
},
setPosterImageStatus: function() {
// var sTop = document.body || document.documentElement;
// sTop.scrollTop = 0;
this.posterImageStatus = !this.posterImageStatus
},
DefaultSelect: function() {
let productAttr = this.attr.productAttr
let value = []
for (let i = 0; i < productAttr.length; i++) {
this.$set(productAttr[i], 'index', 0)
value.push(productAttr[i].attrValueArr[0])
}
//sort();排序函数:数字-英文-汉字；
let productSelect = this.productValue[value.sort().join(',')]
console.log(productSelect)
if (productSelect && productAttr.length) {
this.$set(this.attr.productSelect, 'store_name', this.storeInfo.title)
this.$set(this.attr.productSelect, 'image', productSelect.image)
this.$set(this.attr.productSelect, 'price', productSelect.seckillPrice)
this.$set(this.attr.productSelect, 'otPrice', productSelect.otPrice)
// this.$set(this.attr.productSelect, 'otPrice', productSelect.price)
this.$set(this.attr.productSelect, 'stock', productSelect.seckillStock)
this.$set(this.attr.productSelect, 'unique', productSelect.unique)
this.$set(this.attr.productSelect, 'cart_num', 1)
this.$set(this, 'attrValue', value.sort().join(','))
this.$set(this, 'attrTxt', '已选择')
} else if (!productSelect && productAttr.length) {
this.$set(this.attr.productSelect, 'store_name', this.storeInfo.title)
this.$set(this.attr.productSelect, 'image', this.storeInfo.image)
this.$set(this.attr.productSelect, 'price', this.storeInfo.seckillPrice)
this.$set(this.attr.productSelect, 'otPrice', this.storeInfo.otPrice)
// this.$set(this.attr.productSelect, 'otPrice', this.storeInfo.price)
this.$set(this.attr.productSelect, 'stock', 0)
this.$set(this.attr.productSelect, 'unique', '')
this.$set(this.attr.productSelect, 'cart_num', 0)
this.$set(this, 'attrValue', '')
this.$set(this, 'attrTxt', '请选择')
} else if (!productSelect && !productAttr.length) {
this.$set(this.attr.productSelect, 'store_name', this.storeInfo.title)
this.$set(this.attr.productSelect, 'image', this.storeInfo.image)
this.$set(this.attr.productSelect, 'price', this.storeInfo.seckillPrice)
this.$set(this.attr.productSelect, 'otPrice', this.storeInfo.otPrice)
// this.$set(this.attr.productSelect, 'otPrice', this.storeInfo.price)
this.$set(this.attr.productSelect, 'stock', this.storeInfo.seckillStock)
this.$set(this.attr.productSelect, 'unique', this.storeInfo.unique || '')
this.$set(this.attr.productSelect, 'cart_num', 1)
this.$set(this, 'attrValue', '')
this.$set(this, 'attrTxt', '请选择')
}
},
//将父级向子集多次传送的函数合二为一；
changeFun: function(opt) {
if (typeof opt !== 'object') opt = {}
let action = opt.action || ''
let value = opt.value === undefined ? '' : opt.value
this[action] && this[action](value)
},
changeattr: function(res) {
var that = this
that.attr.cartAttr = res
},
// ChangeCartNum: function (res) {
// var that = this;
// if (res) {
// if (that.attr.productSelect.cart_num < that.storeInfo.seckillStock) {
// that.attr.productSelect.cart_num += 1;
// this.cartNum += 1;
// console.log(this.cartNum)
// }
// } else {
// if (that.attr.productSelect.cart_num > 1) {
// that.attr.productSelect.cart_num -= 1;
// this.cartNum -= 1;
// }
// }
// },
ChangeCartNum: function(changeValue) {
//changeValue:是否 加|减
//获取当前变动属性
let productSelect = this.productValue[this.attrValue]
//如果没有属性,赋值给商品默认库存
if (productSelect === undefined && !this.attr.productAttr.length) {
productSelect = this.attr.productSelect
}
//无属性值即库存为0；不存在加减；
if (productSelect === undefined) return
let stock = productSelect.stock || 0
let num = this.attr.productSelect
if (changeValue) {
if (num) num.cart_num++
if (num.cart_num > this.storeInfo.num) {
num.cart_num = this.storeInfo.num
uni.showToast({
title: '限购' + this.storeInfo.num,
icon: 'none',
duration: 2000,
})
}
if (num.cart_num > stock) {
this.$set(this.attr.productSelect, 'cart_num', stock)
this.$set(this, 'cartNum', stock)
} else {
this.$set(this.attr.productSelect, 'cart_num', num.cart_num)
this.$set(this, 'cartNum', num.cart_num)
}
} else {
num.cart_num--
if (num.cart_num < 1) {
this.$set(this.attr.productSelect, 'cart_num', 1)
this.$set(this, 'cartNum', 1)
} else {
this.$set(this.attr.productSelect, 'cart_num', num.cart_num)
this.$set(this, 'cartNum', num.cart_num)
}
}
},
//选择属性；
ChangeAttr: function(res) {
// 修改了规格
let productSelect = this.productValue[res.value]
if (productSelect) {
this.attr.productAttr[res.indexw].index = res.indexn
this.$set(this.attr.productSelect, 'image', productSelect.image)
this.$set(this.attr.productSelect, 'price', productSelect.seckillPrice)
this.$set(this.attr.productSelect, 'otPrice', productSelect.otPrice)
// this.$set(this.attr.productSelect, 'otPrice', productSelect.price)
this.$set(this.attr.productSelect, 'stock', productSelect.seckillStock)
this.$set(this.attr.productSelect, 'unique', productSelect.unique)
this.$set(this.attr.productSelect, 'cart_num', 1)
this.$set(this, 'attrValue', res.value)
this.$set(this, 'attrTxt', '已选择')
} else {
this.$set(this.attr.productSelect, 'image', this.storeInfo.image)
this.$set(this.attr.productSelect, 'price', this.storeInfo.seckillPrice)
this.$set(this.attr.productSelect, 'otPrice', this.storeInfo.otPrice)
// this.$set(this.attr.productSelect, 'otPrice', this.storeInfo.price)
this.$set(this.attr.productSelect, 'stock', 0)
this.$set(this.attr.productSelect, 'unique', '')
this.$set(this.attr.productSelect, 'cart_num', 0)
this.$set(this, 'attrValue', '')
this.$set(this, 'attrTxt', '请选择')
}
},
selecAttrTap: function() {
this.attr.cartAttr = true
this.isOpen = true
},
tapBuy: function() {
var that = this
if (that.attr.cartAttr == false) {
that.attr.cartAttr = !this.attr.attrcartAttr
} else {
var data = {}
data.productId = that.storeInfo.productId
data.cartNum = that.attr.productSelect.cart_num
data.uniqueId = that.attr.productSelect.unique
data.secKillId = that.storeInfo.id
data.new = 1
postCartAdd(data)
.then(res => {
that.$yrouter.push({
path: '/pages/order/OrderSubmission/index',
query: {
id: res.data.cartId,
},
})
})
.catch(err => {
uni.showToast({
title: err.msg || err.response.data.msg || err.response.data.message,
icon: 'none',
duration: 2000,
})
})
}
},
},
}
</script>
<style scoped lang="less">
.header {
.tab-title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 600;
color: #2DB5AE;
line-height: 42rpx;
}
.backImg {
width: 88rpx;
height: 62rpx;
padding-left: 26rpx;
image {
width: 100%;
height: 100%;
}
}
}
.jiantou-right {
width: 0;
height: 0;
border-top: 6rpx solid transparent;
border-left: 10rpx solid #2DB5AE;
border-bottom: 6rpx solid transparent;
border-right: 0rpx solid transparent;
margin-left: 8rpx;
}
.product-con .nav {
padding: 0 0.2 * 100rpx;
}
.product-con .footer .bnt .buy.bg-color-hui {
background: #ccc;
}
/*内容 部分*/
// .tui-padding {
// padding: 0 30rpx;
// box-sizing: border-box;
// }
.tui-ml-auto {
margin-left: auto;
}
/* #ifdef H5 */
.tui-ptop {
padding-top: 44px;
}
/* #endif */
// .tui-size {
// font-size: 24rpx;
// line-height: 24rpx;
// }
// .tui-gray {
// color: #999;
// }
// .tui-white__gray {
// color: rgba(255, 255, 255, 0.8);
// font-weight: normal;
// font-size: 26rpx;
// }
// .tui-color-red {
// color: #eb0909;
// }
// .tui-border-radius {
// border-bottom-left-radius: 24rpx;
// border-bottom-right-radius: 24rpx;
// overflow: hidden;
// }
.tui-radius-all {
border-radius: 24rpx;
overflow: hidden;
}
.tui-mtop {
margin-top: 26rpx;
}
.tui-pro-detail {
box-sizing: border-box;
color: #333;
margin: 8rpx 32rpx 20rpx;
width: 686rpx;
// height: 230rpx;
background: #F5F6F8;
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
border-radius: 16rpx;
padding: 24rpx;
position: relative;
}
.activity-info-box {
position: absolute;
top: 0rpx;
right: 24rpx;
width: 220rpx;
height: 74rpx;
overflow: hidden;
.tui-right__box {
padding-top: 8rpx;
width: 188rpx;
height: 74rpx;
background: #2DB5AE;
border-radius: 0rpx 0rpx 16rpx 16rpx;
position: relative;
z-index: 1;
margin: 0rpx 16rpx;
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 26rpx;
.icon {
width: 24rpx;
height: 24rpx;
margin-right: 4rpx;
}
.count-down-box {
padding-top: 6rpx;
padding-left: 10rpx;
}
}
.tui-right__box::after {
width: 32rpx;
height: 32rpx;
content: "";
position: absolute;
top: 0;
left: -32rpx;
border-radius: 16rpx;
box-shadow: 16rpx -16rpx 0rpx #2DB5AE;
}
.tui-right__box::before {
width: 32rpx;
height: 32rpx;
content: "";
position: absolute;
top: 0;
right: -32rpx;
border-radius: 16rpx;
box-shadow: -16rpx -16rpx 0rpx #2DB5AE;
}
}
// .tui-product-title {
// background: #fff;
// padding-bottom: 30rpx;
// }
// .tui-price__box {
// width: 100%;
// height: 130rpx;
// display: flex;
// }
// .tui-pro-pricebox {
// width: 540rpx;
// height: 130rpx;
// display: flex;
// flex-direction: column;
// justify-content: center;
// color: #ffffff;
// font-size: 26rpx;
// line-height: 26rpx;
// background: linear-gradient(-30deg, #ff1f2e, #f52c6c);
// flex-shrink: 0;
// }
.tui-pro-price {
font-size: 48rpx;
font-family: Futura;
font-weight: 600;
color: #3A3A3C;
line-height: 64rpx;
display: flex;
// align-items: flex-end;
}
.tui-price {
// font-size: 44rpx;
// line-height: 42rpx;
}
// .tui-sold {
// width: 100%;
// height: 44rpx;
// padding-left: 4rpx;
// display: flex;
// align-items: flex-end;
// justify-content: space-between;
// }
.tui-original-price {
padding-top: 18rpx;
font-size: 30rpx;
font-family: Futura;
font-weight: 600;
color: #999999;
line-height: 40rpx;
padding-left: 16rpx;
// box-sizing: border-box;
text-decoration: line-through;
}
// .tui-right__box {
// flex: 1;
// background-color: #ffe5e5;
// font-size: 24rpx;
// display: flex;
// flex-direction: column;
// align-items: center;
// justify-content: center;
// }
// .tui-right__box text {
// text-align: center;
// padding-bottom: 12rpx;
// }
.tui-seckill__img {
width: 146rpx;
height: 26rpx;
margin-bottom: 16rpx;
}
// .tui-pro-titbox {
// font-size: 32rpx;
// font-weight: 500;
// position: relative;
// padding: 0 150rpx 0 30rpx;
// box-sizing: border-box;
// }
.tui-pro-title {
font-size: 34rpx;
font-family: SourceHanSansSCVF;
font-weight: 600;
color: #3A3A3C;
line-height: 50rpx;
}
.tui-pro-info {
font-size: 20rpx;
font-family: SourceHanSansSCVF;
font-weight: 600;
color: #999999;
line-height: 28rpx;
}
// .tui-share-btn {
// display: block;
// background: transparent;
// margin: 0;
// padding: 0;
// border-radius: 0;
// border: 0;
// }
// .tui-share-btn::after {
// border: 0;
// }
// .tui-share-box {
// display: flex;
// align-items: center;
// }
// .tui-share-position {
// position: absolute;
// right: 0;
// top: 30rpx;
// }
// .tui-share-text {
// padding-left: 8rpx;
// }
// .tui-sub-title {
// padding: 20rpx 0;
// line-height: 32rpx;
// }
.tui-sale-info {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 16rpx;
font-size: 20rpx;
font-family: SourceHanSansSCVF;
font-weight: 500;
color: #999999;
line-height: 28rpx;
.tips {
padding-top: 4rpx;
.tip {
width: 80rpx;
height: 26rpx;
background: #2DB5AE;
border-radius: 6rpx;
margin-right: 4rpx;
font-size: 16rpx;
font-family: PingFang SC;
color: #FFFFFF;
line-height: 26rpx;
text-align: center;
margin-right: 20rpx;
}
}
}
// .tui-discount-box {
// background: #fff;
// }
// .tui-list-cell {
// width: 100%;
// position: relative;
// display: flex;
// align-items: center;
// font-size: 26rpx;
// line-height: 26rpx;
// padding: 36rpx 30rpx;
// box-sizing: border-box;
// }
.tui-right {
position: absolute;
right: 30rpx;
top: 30rpx;
}
.tui-top40 {
top: 40rpx !important;
}
.tui-bold {
font-weight: bold;
}
// .tui-list-cell::after {
// content: '';
// position: absolute;
// border-bottom: 1rpx solid #eaeef1;
// -webkit-transform: scaleY(0.5);
// transform: scaleY(0.5);
// bottom: 0;
// right: 0;
// left: 126rpx;
// }
// .tui-last::after {
// border-bottom: 0 !important;
// }
// .tui-flex-center {
// display: flex;
// align-items: center;
// }
// .tui-cell-title {
// width: 66rpx;
// padding-right: 30rpx;
// flex-shrink: 0;
// }
// .tui-promotion-box {
// display: flex;
// align-items: center;
// padding: 10rpx 0;
// width: 80%;
// }
// .tui-promotion-box text {
// width: 70%;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
// }
// .tui-basic-info {
// background: #fff;
// }
// .tui-addr-box {
// width: 76%;
// }
// .tui-addr-item {
// padding: 10rpx;
// line-height: 34rpx;
// }
// .tui-guarantee {
// background: #fdfdfd;
// display: flex;
// flex-wrap: wrap;
// padding: 20rpx 30rpx 30rpx 30rpx;
// font-size: 24rpx;
// }
// .tui-guarantee-item {
// color: #999;
// padding-right: 30rpx;
// padding-top: 10rpx;
// }
// .tui-pl {
// padding-left: 4rpx;
// }
// .tui-col-7 {
// width: 58.33333333%;
// }
// .tui-col-5 {
// width: 41.66666667%;
// }
.tui-operation {
width: 100%;
position: fixed;
z-index: 100;
bottom: 0;
left: 0;
// padding-bottom: env(safe-area-inset-bottom);
background: #F1F1F1;
box-shadow: 0rpx -4rpx 38rpx 0rpx rgba(0,0,0,0.2);
border-radius: 28rpx 28rpx 0rpx 0rpx;
}
// .tui-safearea-bottom {
// width: 100%;
// height: env(safe-area-inset-bottom);
// }
// .tui-operation::before {
// content: '';
// position: absolute;
// top: 0;
// right: 0;
// left: 0;
// border-top: 1rpx solid #eaeef1;
// -webkit-transform: scaleY(0.5);
// transform: scaleY(0.5);
// }
.tui-operation-left {
padding: 12rpx 28rpx;
// display: flex;
// align-items: center;
.stock {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 600;
color: #3A3A3C;
line-height: 38rpx;
padding-top: 20rpx;
padding-left: 62rpx;
}
}
.tui-operation-item {
// flex: 1;
// width: 50rpx;
// height: 76rxp;
display: flex;
align-items: center;
// justify-content: center;
flex-direction: column;
// position: relative;
background: none;
padding: 0;
margin: 0;
border: 0;
// line-height: 1em;
image {
width: 50rpx;
height: 50rpx;
}
&:after {
display: none;
}
.tui-operation-text {
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 500;
color: #3A3A3C;
line-height: 22rpx;
// margin-top: 9rpx;
// line-height: 1em;
}
}
// .tui-operation-text {
// font-size: 22rpx;
// color: #333;
// }
// .tui-opacity {
// opacity: 0.5;
// }
// .tui-scale-small {
// transform: scale(0.9);
// transform-origin: center center;
// }
.tui-operation-right {
// height: 100rpx;
padding: 18rpx 32rpx;
// box-sizing: border-box;
.btn {
width: 292rpx;
height: 66rpx;
background: #2DB5AE;
border-radius: 16rpx;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 66rpx;
text-align: center;
}
}
// .tui-right-flex {
// display: flex;
// align-items: center;
// justify-content: center;
// }
// .tui-flex-1 {
// flex: 1;
// padding: 6rpx;
// }
// .tui-img__clock {
// width: 30rpx;
// height: 30rpx;
// margin-right: 8rpx;
// }
.product-con .attribute {
.attr-content {
width: 548rpx;
padding-left: 20rpx;
padding-right: 12rpx;
image {
width: 46rpx;
height: 46rpx;
border-radius: 8rpx;
border: 2rpx solid #E3E3E3;
margin-right: 20rpx;
}
.attrs {
padding: 0rpx 8rpx;
min-width: 158rpx;
height: 46rpx;
background: #E3E3E3;
border-radius: 8rpx;
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
line-height: 46rpx;
text-align: center;
}
}
}
.safeguard-info {
width: 686rpx;
height: 120rpx;
background: #F5F6F8;
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
border-radius: 16rpx;
padding: 18rpx 0rpx;
margin: 0rpx 32rpx 20rpx;
.safeguard-item {
width: 226rpx;
font-size: 20rpx;
font-family: SourceHanSansSCVF;
font-weight: 600;
color: #999999;
line-height: 28rpx;
text-align: center;
.img {
width: 46rpx;
height: 46rpx;
// background-color: #FFFFFF;
}
}
.line {
width: 2rpx;
height: 84rpx;
background-color: #979797;
}
}
.userEvaluation .title .replyCount {
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 500;
color: #3A3A3C;
padding-left: 8rpx;
}
</style>