814 lines
22 KiB
Vue
814 lines
22 KiB
Vue
<template>
|
||
<view :class="[posterImageStatus ? 'noscroll product-con' : 'product-con']" v-show="domStatus">
|
||
<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.price"></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="tui-pro-titbox">
|
||
<view class="tui-pro-title">{{ storeInfo.title }}</view>
|
||
</view>
|
||
<view class="tui-padding">
|
||
<view class="tui-sale-info tui-size tui-gray">
|
||
<view>库存：{{ storeInfo.stock }}</view>
|
||
<view>月销{{ storeInfo.sales }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 规格 -->
|
||
<view class="attribute acea-row row-between-wrapper" @click="selecAttrTap">
|
||
<view>
|
||
<text>{{ attrTxt }}：</text>
|
||
<text class="atterTxt">{{ attrValue }}</text>
|
||
</view>
|
||
<view class="iconfont icon-jiantou"></view>
|
||
</view>
|
||
<view class="product-intro">
|
||
<view class="title">产品介绍</view>
|
||
<view class="conter" v-html="storeInfo.description"></view>
|
||
</view>
|
||
|
||
<!-- 操作栏 -->
|
||
<view style="height: 100rpx"></view>
|
||
|
||
<!--底部操作栏-->
|
||
<view class="tui-operation">
|
||
<view class="tui-operation-left tui-col-5">
|
||
<!-- #ifdef MP-WEIXIN -->
|
||
<button class="tui-operation-item" hover-class="tui-opcity" :hover-stay-time="150">
|
||
<view class="iconfont icon-kefu"></view>
|
||
<view class="tui-operation-text tui-scale-small">客服</view>
|
||
</button>
|
||
<!-- #endif -->
|
||
|
||
<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 tui-right-flex tui-col-7 tui-btnbox-4" v-if="seckillStatus == 1 && storeInfo.num > 0 && storeInfo.stock > 0">
|
||
<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 tui-right-flex tui-col-7 tui-btnbox-4" v-if="seckillStatus == 1 && storeInfo.num <= 0 && storeInfo.stock <= 0">
|
||
<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 tui-right-flex tui-col-7 tui-btnbox-4" v-if="seckillStatus == 2">
|
||
<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 tui-right-flex tui-col-7 tui-btnbox-4" v-if="seckillStatus == 0">
|
||
<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"></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 { 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,
|
||
},
|
||
props: {},
|
||
data: function() {
|
||
return {
|
||
seckillStatus: '',
|
||
domStatus: false,
|
||
posterData: {
|
||
image: '',
|
||
title: '',
|
||
price: '',
|
||
code: '',
|
||
},
|
||
posterImageStatus: false,
|
||
action: '',
|
||
imgUrls: [],
|
||
storeInfo: [],
|
||
replyCount: 0,
|
||
reply: [],
|
||
cartNum: 1,
|
||
attrTxt: '请选择',
|
||
productValue: [],
|
||
attrValue: '',
|
||
attr: {
|
||
cartAttr: false,
|
||
productAttr: [],
|
||
productSelect: {},
|
||
},
|
||
datatime: 0,
|
||
userCollect: false,
|
||
}
|
||
},
|
||
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, '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, '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, '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) {
|
||
num.cart_num++
|
||
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, '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, '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">
|
||
.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;
|
||
}
|
||
|
||
.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 {
|
||
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 {
|
||
font-size: 26rpx;
|
||
line-height: 26rpx;
|
||
padding: 0 20rpx;
|
||
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 {
|
||
padding-top: 20rpx;
|
||
}
|
||
|
||
.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: 30rpx;
|
||
}
|
||
|
||
.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%;
|
||
height: 100rpx;
|
||
background: rgba(255, 255, 255, 0.98);
|
||
position: fixed;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
z-index: 100;
|
||
bottom: 0;
|
||
left: 0;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
.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 {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.tui-operation-item {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
position: relative;
|
||
|
||
background: none;
|
||
padding: 0;
|
||
|
||
border: 0;
|
||
line-height: 1em;
|
||
&:after {
|
||
display: none;
|
||
}
|
||
.tui-operation-text {
|
||
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-top: 0;
|
||
padding: 0 12rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
</style>
|