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.
804 lines
22 KiB
804 lines
22 KiB
<template>
|
|
<view class="inviteSpell-con">
|
|
<global-loading />
|
|
|
|
<view class="grouped">
|
|
<view class="fs32 font-color-FFF">{{remainPerson !== 0?'等待成团':'已成团'}}</view>
|
|
<view class="fs26 number">{{inviteSpell.person}}人团</view>
|
|
</view>
|
|
<view class="topBox">
|
|
<view class="title-box flex-row-plus">
|
|
<image class="pro-img" :src="inviteSpell.image"></image>
|
|
<view class="flex-column-plus mar-left-30">
|
|
<view class="title-lab fs28">{{inviteSpell.productName}}</view>
|
|
<view class="flex-row-plus flex-sp-between">
|
|
<view class="flex-column-plus">
|
|
<!-- <view class="spellNum flex-items-plus font-color-C5AA7B mar-top-30 fs24">{{inviteSpell.person}}人团</view>-->
|
|
<view class="flex-row-plus mar-top-30 flex-items">
|
|
<label class="font-color-C83732 fs24">¥</label>
|
|
<label class="font-color-C83732 fs36 mar-left-5">{{inviteSpell.price}}</label>
|
|
<label class="font-color-CCC discountsPriceLine fs26 mar-left-20">¥{{inviteSpell.originalPrice}}</label>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="mar-top-20">-->
|
|
<!-- <image class="issueregiment" src="http://36.138.125.206:8081/ceres-local-file/static/images/issueregiment.png"></image>-->
|
|
<!-- </view>-->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="spellpersonnel-box">
|
|
<view class="bgBox flex-items-plus flex-column">
|
|
<view class="flex-items flex-sp-around flex-row-plus mar-right-20">
|
|
<view class="flex-column flex-items-plus mar-left-20" v-for="(item,index) in inviteSpell.personList" :key="index">
|
|
<image v-if="index == 0" class="head-icon border-FF7 z-index-0" :src="item.headImage"></image>
|
|
<image v-else class="head-icon " :src="item.headImage"></image>
|
|
<view v-if="index == 0" class="fs18 colonel-box">团长</view>
|
|
</view>
|
|
<view v-for="ritem in remainPerson">
|
|
<view class="replenish-icon flex-items-plus mar-left-20">?</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="remainPerson !== 0">
|
|
<view class="mar-top-50 font-color-333">还差<label class="font-color-C5AA7B">{{remainPerson}}</label>人成团，距结束还剩{{hou}}:{{min}}:{{sec}}</view>
|
|
<view v-if="type == 1" @click="shareClick" class="offered-but font-color-FFF flex-items-plus mar-top-60">邀请好友拼单</view>
|
|
<view v-if="type == 0" @click="getOffered" class="offered-but font-color-FFF flex-items-plus mar-top-60">立即参团</view>
|
|
<view v-if="type == 1" @click="goinvitePoster" class="poster-but flex-items-plus mar-top-40">生成邀请海报</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="spellrule flex-items-plus flex-column mar-top-20">
|
|
<view class="flex-row-plus">
|
|
<view class="flex-row-plus flex-items-plus text-align">
|
|
<view class="dot1"></view>
|
|
<view class="dot2"></view>
|
|
<view class="dot3"></view>
|
|
</view>
|
|
<label class="fs28 mar-left-20">拼团玩法</label>
|
|
<view class="flex-row-plus flex-items-plus text-align mar-left-10">
|
|
<view class="dot3"></view>
|
|
<view class="dot2"></view>
|
|
<view class="dot1"></view>
|
|
</view>
|
|
</view>
|
|
<view class="mar-top-40">
|
|
<u-steps :list="numList" mode="number" :current="-1"></u-steps>
|
|
</view>
|
|
</view>
|
|
<!-- 商品详情 -->
|
|
<u-popup class="goosDetailshow-box" v-model="goosDetailshowFlag" mode="bottom" border-radius="14">
|
|
<view>
|
|
<view class="detailImg-box flex-row-plus">
|
|
<image class="detailImg" :src="skuImg"></image>
|
|
<view class="flex-column-plus mar-left-40">
|
|
<view class="font-color-C5AA7B">
|
|
<label class="fs24">¥</label>
|
|
<label class="fs36 mar-left-10">{{skuPrice}}</label>
|
|
</view>
|
|
<label class="fs24 font-color-999 mar-top-20">{{$t('common.stocknum', {number:stockNumber})}}</label>
|
|
<label class="fs24 mar-top-20">已选</label>
|
|
</view>
|
|
</view>
|
|
<view class="color-box flex-column-plus">
|
|
<view v-for="(attritem,index) in skuProdList.names" :key="index">
|
|
<label class="fs24 font-color-999">{{attritem.skuName}}</label>
|
|
<view class="colorName-box">
|
|
<view class="pad-bot-30" v-for="(attrRes, resIndex) in attritem.values" :key="resIndex">
|
|
<label class="colorName" :class="{'colorName-on' :subIndex[index] == resIndex}" @click="colorActiveClick(attrRes,index,resIndex)">{{attrRes.skuValue}}</label>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="goodsNum-box flex-row-plus flex-sp-between">
|
|
<label class="font-color-999 fs24">数量</label>
|
|
<view class="goodsNum">
|
|
<label class="subtract" @click="numSub">-</label>
|
|
<label class="goodsNumber" v-model="buyNum">{{buyNum}}</label>
|
|
<label class="add" @click="numAdd">+</label>
|
|
</view>
|
|
</view>
|
|
<view class="goosDetailbut-box flex-items-plus" :style="{'padding-bottom':(isIphone===true? 50:20)+'rpx'}">
|
|
<view class="joinbuyBut" @click="getGroupSettlement(2)">确定</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<shareSpell ref="shareSpell" @shareCancel='shareCancel' :url="url" :urlParms="urlParms" :img="inviteSpell.image" title="好友邀请您来拼单啦">
|
|
</shareSpell>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const NET = require('../../utils/request')
|
|
const API = require('../../config/api')
|
|
import shareSpell from '@/component/share.vue'
|
|
import ClipboardJS from "clipboard"
|
|
export default {
|
|
data() {
|
|
return {
|
|
numList: [{
|
|
name: '选择商品 完成下单'
|
|
}, {
|
|
name: '支付开团 或参团'
|
|
}, {
|
|
name: '邀请好友 参与拼团'
|
|
}, {
|
|
name: '人满成团 失败退款'
|
|
}, ],
|
|
collageId:0,
|
|
orderId:0,
|
|
type:0,
|
|
inviteSpell:{},
|
|
personLen:0,
|
|
remainPerson:0,
|
|
hou: "00",
|
|
min: "00",
|
|
sec: "00",
|
|
timeOut:undefined,
|
|
goosDetailshowFlag: false,
|
|
productId:0,
|
|
skuId:0,
|
|
shopGroupWorkId:0,
|
|
buyNum:1,
|
|
skuProdId:0,
|
|
skuImg:'',
|
|
skuPrice:0,
|
|
stockNumber:0,
|
|
skuProdList:{},
|
|
isIphone: "",
|
|
selectArr: [], // 存放被选中的值
|
|
subIndex: [], // 是否选中 因为不确定是多规格还是单规格，所以这里定义数组来判断
|
|
attrItemIdArr: [], //存放被选中的id
|
|
shopId:0,
|
|
attrList: [],
|
|
productDetail:{},
|
|
userInfo: {},
|
|
url: '',
|
|
shareTitle: '',
|
|
showJoinGroup: false,
|
|
showGroupText: '立即参团',
|
|
urlParms: ''
|
|
};
|
|
},
|
|
components:{
|
|
shareSpell
|
|
},
|
|
onShareAppMessage: function(res) {
|
|
var that = this;
|
|
//console.log('res=====',res);
|
|
if (res.from === 'button') {
|
|
//console.log('来自页面内转发按钮');
|
|
} else if (res.from === 'menu'){
|
|
//console.log('右上角菜单转发按钮');
|
|
}
|
|
this.url = '/pages_category_page1/goodsModule/inviteSpell?collageId='
|
|
+ this.collageId +'&orderId='+ this.orderId+'&type=0'+'&productId='+this.productId+'&skuId='+this.skuId+'&shopGroupWorkId='+this.shopGroupWorkId
|
|
this.shareTitle = `【仅剩${this.remainPerson}个名额】我${this.inviteSpell.price}元拼了${this.inviteSpell.productName}`
|
|
// 返回数据
|
|
return {
|
|
title: that.shareTitle,
|
|
path: that.url,
|
|
success: function(res) {
|
|
// 转发成功，可以把当前页面的链接发送给后端，用于记录当前页面被转发了多少次或其他业务
|
|
wx.request({
|
|
url: app.buildUrl("/member/share"),
|
|
data: {
|
|
url: utils.getCurrentPageUrlWithArgs()
|
|
},
|
|
success: function(res) {
|
|
//console.log('成功');
|
|
}
|
|
});
|
|
},
|
|
fail: function(res) {
|
|
// 转发失败
|
|
}
|
|
}
|
|
},
|
|
onUnload() {
|
|
if(this.timeOut){
|
|
clearTimeout(this.timeOut)
|
|
}
|
|
},
|
|
onShow(){
|
|
//判断是否登录
|
|
let item = {}
|
|
if(uni.getStorageSync('storage_key')){
|
|
item = uni.getStorageSync('storage_key');
|
|
}
|
|
if(JSON.stringify(item) == '{}'){
|
|
let data = {
|
|
collageId : this.collageId,
|
|
orderId : this.orderId,
|
|
productId : this.productId,
|
|
skuId : this.skuId,
|
|
type : this.type,
|
|
}
|
|
uni.setStorageSync("inviteSpell",data)
|
|
// uni.navigateTo({
|
|
// url:'../../pages_category_page2/userModule/accountLogin?inviteSpell=1'
|
|
// })
|
|
}else{
|
|
this.userInfo = uni.getStorageSync('storage_userInfo')
|
|
}
|
|
this.getInviteSpell()
|
|
},
|
|
onLoad(options) {
|
|
this.isIphone = getApp().globalData.isIphone;
|
|
let item = getApp().globalData.inviteSpellShareIte
|
|
if (item) {
|
|
this.collageId = parseInt(item.collageId)
|
|
this.orderId = parseInt(item.orderId)
|
|
this.productId = parseInt(item.productId)
|
|
this.skuId = parseInt(item.skuId)
|
|
this.shopGroupWorkId = parseInt(item.shopGroupWorkId)
|
|
getApp().globalData.inviteSpellShareItem = undefined
|
|
} else {
|
|
this.collageId = parseInt(options.collageId)
|
|
this.orderId = parseInt(options.orderId)
|
|
this.productId = parseInt(options.productId)
|
|
this.skuId = parseInt(options.skuId)
|
|
this.shopGroupWorkId = parseInt(options.shopGroupWorkId)
|
|
}
|
|
// #ifdef MP-WEIXIN
|
|
this.url = '/pages_category_page1/goodsModule/inviteSpell?collageId=' +
|
|
this.collageId + '&orderId=' + this.orderId + '&productId=' + this.productId + '&skuId=' + this.skuId +
|
|
'&shopGroupWorkId=' + this.shopGroupWorkId
|
|
this.urlParms = this.collageId + '&orderId=' + this.orderId + '&productId=' + this.productId + '&skuId=' + this.skuId +
|
|
'&shopGroupWorkId=' + this.shopGroupWorkId
|
|
// #endif
|
|
// #ifndef MP-WEIXIN
|
|
this.url = '/h5/#/pages_category_page1/goodsModule/inviteSpell?collageId=' +
|
|
this.collageId + '&orderId=' + this.orderId + '&productId=' + this.productId + '&skuId=' + this.skuId +
|
|
'&shopGroupWorkId=' + this.shopGroupWorkId
|
|
// #endif
|
|
},
|
|
methods:{
|
|
getOffered(){
|
|
this.goosDetailshowFlag = true
|
|
},
|
|
//拼团下单
|
|
getGroupSettlement(type){
|
|
uni.removeStorageSync("skuItemDTOList")
|
|
let data={}
|
|
data= {
|
|
collageId:this.collageId,
|
|
number:this.buyNum,
|
|
productId:this.productId,
|
|
shopId:this.shopId,
|
|
skuId:this.skuProdId,
|
|
shopGroupWorkId:this.shopGroupWorkId,
|
|
type:type
|
|
}
|
|
uni.setStorageSync('skuItemList',data)
|
|
this.goosDetailshowFlag = false
|
|
this.buyNum = 1
|
|
uni.navigateTo({
|
|
url: '../orderModule/orderConfirm?type=1',
|
|
})
|
|
},
|
|
//获取商品详情
|
|
queryProductDetail() {
|
|
NET.request(API.QueryProductDetail,
|
|
{
|
|
shopId:this.shopId,
|
|
productId:this.productId,
|
|
skuId:this.skuId,
|
|
terminal:1
|
|
},
|
|
"GET").then(res => {
|
|
this.productDetail = res.data
|
|
for (let i = 0; i < res.data.attrList.length; i++) {
|
|
this.subIndex[i] = 0
|
|
}
|
|
this.attrItemIdArr[0] = res.data.attrList[0].attrValueList[0].id
|
|
}).catch(res => {
|
|
})
|
|
},
|
|
getProductSku(){
|
|
NET.request(API.QueryProductSku, {
|
|
skuId:this.skuId,
|
|
productId:this.productId
|
|
}, 'GET').then(res => {
|
|
this.skuProdList = res.data
|
|
this.attrList = res.data.names
|
|
this.attrValueList = res.data.names[0].values
|
|
//渲染商详之后，默认先选中第一个规格
|
|
this.colorActiveClick(this.attrValueList[0],0,0)
|
|
this.skuProdId = this.skuId
|
|
this.skuImg = res.data.image
|
|
this.skuPrice = res.data.price
|
|
this.stockNumber = res.data.stockNumber
|
|
this.shopId = res.data.shopId
|
|
|
|
}).catch(res => {
|
|
|
|
})
|
|
|
|
},
|
|
// 数量减
|
|
numSub() {
|
|
if (this.buyNum > 1) {
|
|
this.buyNum = this.buyNum - 1
|
|
} else {
|
|
uni.showToast({
|
|
title: '亲！至少一件哦！',
|
|
icon: "none"
|
|
})
|
|
}
|
|
},
|
|
// 数量加
|
|
numAdd() {
|
|
if(this.buyNum < this.stockNumber){
|
|
this.buyNum = this.buyNum + 1
|
|
}else{
|
|
uni.showToast({
|
|
title: this.$t('common.understock'),
|
|
icon: "none"
|
|
})
|
|
}
|
|
},
|
|
//颜色选中事件
|
|
colorActiveClick(res, index, resIndex) {
|
|
let t = this;
|
|
t.selectArr[index] = res;
|
|
t.subIndex[index] = resIndex;
|
|
t.attrItemIdArr[index] = res.valueCode
|
|
t.checkItem();
|
|
t.checkItemDataClick(t.attrItemIdArr)
|
|
},
|
|
checkItem() {
|
|
var self = this;
|
|
var option = self.attrList;
|
|
var result = []; // 定义数组存储被选中的值
|
|
for (let i in option) {
|
|
result[i] = self.selectArr[i] ? self.selectArr[i] : "";
|
|
if (!self.subIndex[i]) {
|
|
self.subIndex[i] = 0
|
|
}
|
|
if (!self.attrItemIdArr[i]) {
|
|
self.attrItemIdArr[i] = option[i].values[0].valueCode
|
|
}
|
|
}
|
|
for (let i in option) {
|
|
var last = result[i]; // 把选中的值存放到字符串last去
|
|
for (let k in option[i].item) {
|
|
result[i] = option[i].item[k].name; // 赋值，存在直接覆盖，不存在往里面添加name值
|
|
}
|
|
result[i] = last; // 还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
|
|
}
|
|
self.$forceUpdate(); // 重绘
|
|
},
|
|
checkItemDataClick(attrItemIdArr) {
|
|
let attrkey = ''
|
|
for(let i =0;i<attrItemIdArr.length;i++){
|
|
attrkey += attrItemIdArr[i]+','
|
|
}
|
|
attrkey = attrkey.substring(0,attrkey.length - 1)
|
|
let mapinfo = this.skuProdList.map
|
|
for (var key in mapinfo){
|
|
if(attrkey == key){
|
|
this.skuProdId = mapinfo[key].skuId
|
|
this.skuImg = mapinfo[key].skuImg
|
|
this.skuPrice = mapinfo[key].price
|
|
this.stockNumber = mapinfo[key].stockNumber
|
|
}
|
|
}
|
|
},
|
|
shareClick(){
|
|
this.$refs.shareSpell.shareShow = true
|
|
},
|
|
shareCancel(){
|
|
this.$refs.shareSpell.shareShow = false
|
|
},
|
|
goinvitePoster(){
|
|
let data = {
|
|
image:this.inviteSpell.image,
|
|
headImage:this.inviteSpell.headImage,
|
|
productName:this.inviteSpell.productName,
|
|
person:this.inviteSpell.person,
|
|
originalPrice:this.inviteSpell.originalPrice,
|
|
price:this.inviteSpell.price,
|
|
collageId:this.collageId,
|
|
productId:this.productId,
|
|
skuId:this.skuId,
|
|
orderId:this.orderId
|
|
}
|
|
uni.navigateTo({
|
|
url:'invitePoster?data='+ JSON.stringify(data)
|
|
})
|
|
},
|
|
getInviteSpell(){
|
|
// uni.showLoading({
|
|
// mask: true,
|
|
// title: '加载中...',
|
|
// })
|
|
NET.request(API.getInviteSpell, {
|
|
collageId:this.collageId,
|
|
orderId: this.orderId
|
|
}, 'POST').then(res => {
|
|
this.inviteSpell = res.data
|
|
this.type = 0
|
|
this.inviteSpell.personList.forEach(item=>{
|
|
if(item.buyerUserId === this.userInfo.buyerUserId){
|
|
this.type = 1
|
|
}
|
|
})
|
|
this.personLen = res.data.personList.length
|
|
this.remainPerson = res.data.person - this.personLen
|
|
this.dateformat(res.data.time)
|
|
this.countDown()
|
|
uni.hideLoading()
|
|
}).catch(res => {
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
//时分秒换算
|
|
dateformat(micro_second) {
|
|
// 总秒数
|
|
let second = Math.floor(micro_second / 1000);
|
|
// 天数
|
|
let day = Math.floor(second / 3600 / 24);
|
|
// 小时
|
|
let hr = Math.floor(second / 3600 % 24);
|
|
// 分钟
|
|
let min = Math.floor(second / 60 % 60);
|
|
// 秒
|
|
let sec = Math.floor(second % 60);
|
|
this.hou = hr
|
|
this.min = min
|
|
this.sec = sec
|
|
},
|
|
countDown(){
|
|
let timeOut = setTimeout(() => {
|
|
let hou = parseInt(this.hou);
|
|
let min = parseInt(this.min);
|
|
let sec = parseInt(this.sec);
|
|
|
|
let netxSec = sec - 1;
|
|
let netxMin = min
|
|
let netxHou = hou;
|
|
|
|
if (netxHou == 0 && netxMin == 0 && netxSec == -1) {
|
|
clearTimeout(timeOut)
|
|
// uni.switchTab({
|
|
// url:'../../pages/tabbar/index/index'
|
|
// })
|
|
} else {
|
|
if (netxSec == -1) {
|
|
netxSec = 59
|
|
netxMin = netxMin - 1;
|
|
}
|
|
if (netxMin == -1) {
|
|
netxMin = 59
|
|
netxHou = netxHou - 1
|
|
}
|
|
if (netxHou == -1) {
|
|
netxHou = 23
|
|
}
|
|
|
|
this.hou = this.timeFormat(netxHou),
|
|
this.min = this.timeFormat(netxMin),
|
|
this.sec = this.timeFormat(netxSec),
|
|
this.timeOut = timeOut
|
|
this.countDown();
|
|
}
|
|
}, 1000)
|
|
},
|
|
timeFormat(param) { //小于10的格式化函数
|
|
return param < 10 ? '0' + param : param;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page{background-color: #F7F7F7;}
|
|
.copy-color{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items:center;
|
|
flex-direction: column;
|
|
}
|
|
.inviteSpell-con{
|
|
background: url("http://36.138.125.206:8081/ceres-local-file/static/images/pintuanbg.png") no-repeat left top;
|
|
background-size: contain;
|
|
.grouped {
|
|
text-align: center;
|
|
padding-top: 40rpx;
|
|
.number {
|
|
display: inline-block;
|
|
color: #FFEBC4;
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
padding: 0 30rpx;
|
|
background: #525252;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
.z-index-0{
|
|
z-index: 0;
|
|
}
|
|
.border-FF7{
|
|
border: 2rpx solid #FFF;
|
|
}
|
|
.colonel-box{
|
|
color: #FFEBC4;
|
|
background-color: #333333;
|
|
width: 86rpx;
|
|
height: 32rpx;
|
|
line-height: 32rpx;
|
|
border-radius: 15rpx;
|
|
text-align: center;
|
|
margin-top: -20rpx;
|
|
z-index: 2;
|
|
}
|
|
.font-color-C5AA7B{
|
|
color: #C5AA7B;
|
|
}
|
|
.topBox {
|
|
padding: 40rpx 20rpx 0 20rpx;
|
|
}
|
|
.title-box{
|
|
padding: 30rpx;
|
|
background: #FFFFFF;
|
|
.title-lab{
|
|
width: 400rpx;
|
|
height: 130rpx;
|
|
}
|
|
.spellNum{
|
|
background-color: #FFEDDF;
|
|
border-radius: 22rpx;
|
|
width: 144rpx;
|
|
height: 44rpx;
|
|
}
|
|
.pro-img{
|
|
width: 222rpx;
|
|
height: 222rpx;
|
|
}
|
|
.issueregiment{
|
|
width: 120rpx;
|
|
height: 122rpx;
|
|
}
|
|
}
|
|
.spellpersonnel-box{
|
|
margin-top: 20rpx;
|
|
padding: 0 20rpx;
|
|
.bgBox {
|
|
background-color: #FFFFFF;
|
|
padding: 30rpx 0;
|
|
}
|
|
.head-icon{
|
|
width: 102rpx;
|
|
height: 102rpx;
|
|
border-radius: 50%;
|
|
}
|
|
.replenish-icon{
|
|
width: 102rpx;
|
|
height: 102rpx;
|
|
border-radius: 50%;
|
|
border: 1rpx #E5E5E5 dashed;
|
|
font-size: 60rpx;
|
|
color: #DBDBDB;
|
|
}
|
|
.offered-but{
|
|
background-color: #333333;
|
|
border-radius: 5rpx;
|
|
width: 420rpx;
|
|
height: 66rpx;
|
|
color: #FFEBC4;
|
|
}
|
|
.poster-but{
|
|
border: #C5AA7B 1rpx solid;
|
|
border-radius: 5rpx;
|
|
width: 420rpx;
|
|
height: 66rpx;
|
|
color: #C5AA7B;
|
|
}
|
|
}
|
|
.spellrule{
|
|
background-color: #FFFFFF;
|
|
padding: 50rpx 20rpx;
|
|
.dot1{
|
|
width: 4rpx;
|
|
height: 4rpx;
|
|
background-color: #B6B6C1;
|
|
border-radius: 50%;
|
|
margin-left: 10rpx;
|
|
}
|
|
.dot2{
|
|
width: 6rpx;
|
|
height: 6rpx;
|
|
background-color: #B6B6C1;
|
|
border-radius: 50%;
|
|
margin-left: 10rpx;
|
|
}
|
|
.dot3{
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
background-color: #B6B6C1;
|
|
border-radius: 50%;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
.inactive-box{
|
|
padding: 40rpx 40rpx;
|
|
.weixin-box{
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
background-color: #F5F5F5;
|
|
border-radius: 50%;
|
|
image{
|
|
width: 55rpx;
|
|
height: 55rpx;
|
|
}
|
|
}
|
|
}
|
|
.goosDetailshow-box {
|
|
.detailImg-box {
|
|
margin-top: 30upx;
|
|
margin-left: 30upx;
|
|
border-radius: 10upx;
|
|
border-bottom: 1upx solid #EDEDED;
|
|
padding-bottom: 20upx;
|
|
width: 690upx;
|
|
|
|
.detailImg {
|
|
width: 180upx;
|
|
height: 180upx;
|
|
}
|
|
}
|
|
|
|
.color-box {
|
|
padding: 30upx 30upx;
|
|
border-bottom: 1upx solid #EDEDED;
|
|
width: 690upx;
|
|
|
|
.colorName-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-top: 30upx;
|
|
margin-left: -30upx;
|
|
|
|
.colorName-on {
|
|
background-color: #FFE5D0;
|
|
color: #C5AA7B;
|
|
margin-left: 30upx;
|
|
padding: 10upx 32upx;
|
|
border-radius: 28upx;
|
|
border: 1upx solid #C5AA7B;
|
|
font-size: 26upx;
|
|
text-align: center;
|
|
z-index: 1;
|
|
}
|
|
|
|
.colorName {
|
|
background-color: #F5F5F5;
|
|
margin-left: 30upx;
|
|
padding: 10upx 32upx;
|
|
border-radius: 28upx;
|
|
font-size: 26upx;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.modelNum-box {
|
|
padding: 30upx 30upx;
|
|
border-bottom: 1upx solid #EDEDED;
|
|
width: 690upx;
|
|
|
|
.modelNumName-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-top: 30upx;
|
|
margin-left: -30upx;
|
|
|
|
.modelNumName-on {
|
|
background-color: #FFE4D0;
|
|
color: #C5AA7B;
|
|
margin-left: 30upx;
|
|
padding: 10upx 32upx;
|
|
border-radius: 28upx;
|
|
border: 1upx solid #C5AA7B;
|
|
font-size: 26upx;
|
|
text-align: center;
|
|
}
|
|
|
|
.modelNumName {
|
|
background-color: #F5F5F5;
|
|
margin-left: 30upx;
|
|
padding: 10upx 32upx;
|
|
border-radius: 28upx;
|
|
font-size: 26upx;
|
|
}
|
|
}
|
|
}
|
|
.joinbuyBut{
|
|
width: 690upx;
|
|
height: 80upx;
|
|
border-radius: 40upx 40upx;
|
|
background-color: #3D3C3D;
|
|
color: #FFFEFE;
|
|
font-size: 28upx;
|
|
line-height: 80upx;
|
|
text-align: center;
|
|
}
|
|
.goodsNum-box {
|
|
padding: 30upx 30upx;
|
|
width: 690upx;
|
|
padding-bottom: 268upx;
|
|
|
|
.goodsNumber {
|
|
border: 1upx solid #999999;
|
|
padding: 3upx 20upx;
|
|
}
|
|
|
|
.subtract {
|
|
border: 1upx solid #999999;
|
|
padding: 3upx 20upx;
|
|
margin-right: -1upx;
|
|
}
|
|
|
|
.add {
|
|
border: 1upx solid #999999;
|
|
padding: 3upx 20upx;
|
|
margin-left: -1upx;
|
|
}
|
|
}
|
|
|
|
.goosDetailbut-box {
|
|
.joinShopCartBut {
|
|
width: 343upx;
|
|
height: 80upx;
|
|
border-radius: 40upx 0 0 40upx;
|
|
background-color: #3D3C3D;
|
|
color: #FFFEFE;
|
|
font-size: 28upx;
|
|
line-height: 80upx;
|
|
text-align: center;
|
|
margin-left: 30upx;
|
|
}
|
|
|
|
.buyNowBut {
|
|
width: 343upx;
|
|
height: 80upx;
|
|
border-radius: 0 40upx 40upx 0;
|
|
background-color: #3D3C3D;
|
|
color: #FFFEFE;
|
|
font-size: 28upx;
|
|
line-height: 80upx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<style scoped>
|
|
.spellrule /deep/ .u-steps__item__num {
|
|
background: #F3F4F5 !important;
|
|
border: none !important;
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
.spellrule /deep/ .u-steps .u-steps__item--row .u-steps__item__line {
|
|
left: 66%;
|
|
width: 67%;
|
|
}
|
|
.spellrule /deep/ .u-steps .u-steps__item--row .u-line {
|
|
height: 6rpx;
|
|
border-bottom: none;
|
|
background: #F3F4F5;
|
|
border-bottom: none !important;
|
|
}
|
|
.spellrule /deep/ .u-steps .u-steps__item--row .u-steps__item__text--row {
|
|
width: 180rpx;
|
|
padding: 0 25rpx;
|
|
}
|
|
</style>
|