pull/9/head
parent
de92031284
commit
e7721ff978
5 changed files with 834 additions and 174 deletions
@ -1,137 +0,0 @@ |
||||
<template> |
||||
<view class="container"> |
||||
|
||||
<view class="body"> |
||||
<view class="bodyContent"> |
||||
<uni-collapse ref="collapse"> |
||||
<uni-collapse-item title="属性类型:" style="width: 700rpx;"> |
||||
<view class="content"> |
||||
<view>商品类型：</view> |
||||
<view> |
||||
<uni-section type="line"> |
||||
<view class="uni-px-5"> |
||||
<view style="display: inline-block;">尺码：</view> |
||||
<uni-data-checkbox mode="tag" v-model="radio" :localdata="range"></uni-data-checkbox> |
||||
</view> |
||||
<view class="uni-px-5 uni-pb-5"> |
||||
<view style="display: inline-block;">颜色：</view> |
||||
<uni-data-checkbox mode="tag" multiple v-model="checkbox" :localdata="hobby"></uni-data-checkbox> |
||||
</view> |
||||
</uni-section> |
||||
</view> |
||||
</view> |
||||
</uni-collapse-item> |
||||
</uni-collapse> |
||||
</view> |
||||
<view> |
||||
<view>批量填充：<text style="color: #999999;">批量填充填入信息后，可以批量将内容填写到SKU 信息里</text></view> |
||||
<view class="tagButton" v-for="item in bottonList">{{item.label}}</view> |
||||
<view class="redButton">确定</view> |
||||
</view> |
||||
<view> |
||||
<view> |
||||
<text style="color: red;">*</text> |
||||
<text>规格</text> |
||||
<text>M+红色</text> |
||||
</view> |
||||
<view class="tagButton" v-for="item in bottonList">{{item.label}}</view> |
||||
<view style="display: inline-block;">删除</view> |
||||
</view> |
||||
<view> |
||||
<text style="color: red;">*</text> |
||||
<text>商品图片</text> |
||||
<text>最多可上传10张图片</text> |
||||
<view></view> |
||||
</view> |
||||
<view> |
||||
<text>详情图片</text> |
||||
<text>最多可上传10张图片</text> |
||||
<view></view> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default{ |
||||
data(){ |
||||
return{ |
||||
radio: 0, |
||||
range: [ |
||||
{ |
||||
text: 'M', |
||||
value: 0 |
||||
}, { |
||||
text: 'X', |
||||
value: 1 |
||||
}, { |
||||
text: 'XL', |
||||
value: 2 |
||||
}, { |
||||
text: '2XL', |
||||
value: 3 |
||||
}, |
||||
], |
||||
checkbox:[0], |
||||
hobby: [{ |
||||
text: '黑色', |
||||
value: 0 |
||||
}, { |
||||
text: '红色', |
||||
value: 1 |
||||
}, { |
||||
text: '白色', |
||||
value: 2 |
||||
}, { |
||||
text: '蓝色', |
||||
value: 3 |
||||
}], |
||||
bottonList:[ |
||||
{label:'市场价格'}, |
||||
{label:'销售价格'}, |
||||
{label:'商品库存'}, |
||||
{label:'兑换积分'} |
||||
] |
||||
} |
||||
}, |
||||
methods:{ |
||||
|
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.container{ |
||||
.body{ |
||||
padding: 30rpx; |
||||
width: 100%; |
||||
} |
||||
} |
||||
.bodyContent{ |
||||
width: 100%; |
||||
|
||||
} |
||||
.tagButton{ |
||||
display: inline-block; |
||||
width: 133rpx; |
||||
height: 58rpx; |
||||
background: #f5f5f5; |
||||
color: #666666; |
||||
border-radius: 10rpx; |
||||
line-height: 58rpx; |
||||
text-align: center; |
||||
margin: 10rpx; |
||||
} |
||||
.redButton{ |
||||
display: inline-block; |
||||
width: 84rpx; |
||||
height: 58rpx; |
||||
background: red; |
||||
color: #fff; |
||||
border-radius: 10rpx; |
||||
line-height: 58rpx; |
||||
text-align: center; |
||||
} |
||||
|
||||
</style> |
||||
@ -0,0 +1,684 @@ |
||||
<template> |
||||
<view class="container"> |
||||
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil"> |
||||
<block slot="backText">返回</block> |
||||
<block slot="content">新增商品</block> |
||||
</cu-custom> |
||||
<view id="chooseType" :class="currentBoxId == 'chooseType' ? 'show' : 'hidden'"> |
||||
<uni-forms ref="productForm" :modelValue="productDate" :rules="rules" label-width="200rpx"> |
||||
<uni-forms-item label="商品分类:" name="name"> |
||||
<mulpicker |
||||
v-model="productDate.demandRegion" |
||||
:list="productList" |
||||
rangekey="categoryName" |
||||
code="id" |
||||
pidkey="id" |
||||
childkey="classificationTwoList" |
||||
:emitPath="true" |
||||
:level="2" |
||||
:placeholder="'选择商品分类'" |
||||
/> |
||||
<uni-icons color="#666666" type="right" size="22" style="position: absolute;right: 0;top: 10rpx;"></uni-icons> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="商品名称:" name="productName"> |
||||
<input type="text" v-model="productDate.productName" placeholder="请输入商品名称" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="关键词:" name="keyword"> |
||||
<input type="text" v-model="productDate.keyword" placeholder="请输入关键词(空格分隔)" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="商品品牌:" name="brandId"> |
||||
<!-- <input type="text" v-model="productDate.brandId" placeholder="请输入商品品牌" /> --> |
||||
<uni-data-select |
||||
v-model="productDate.brandId" |
||||
:localdata="brandIdList" |
||||
placeholder="请选择商品品牌" |
||||
></uni-data-select> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="商品售价:" name="price"> |
||||
<input type="text" v-model="productDate.price" placeholder="请输入商品售价" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="商品上架:" name="productStatus"> |
||||
<switch v-model="productDate.productStatus" color="#FE0606" checked style="transform:scale(0.7)" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="商品推荐:" name="age"> |
||||
<view class='checkbox-con'> |
||||
<radio-group> |
||||
<label :class="item.checked?'checkbox checked':'checkbox'" @click="checkbox(index)" v-for="(item, index) in radioItem" :key="item.value"> |
||||
<checkbox :value="item.value" :checked="item.checked"/>{{item.name}} |
||||
</label> |
||||
</radio-group> |
||||
</view> |
||||
</uni-forms-item> |
||||
</uni-forms> |
||||
<view class="buttons"> |
||||
<view @click="closed">取消</view> |
||||
<view id="next" @click="changeBox">下一步</view> |
||||
</view> |
||||
</view> |
||||
|
||||
|
||||
<view id="instruction" :class="currentBoxId == 'instruction' ? 'show' : 'hidden'"> |
||||
<uni-forms :modelValue="productDate" label-width="200rpx"> |
||||
<uni-forms-item label="属性类别:" > |
||||
<uni-data-select |
||||
v-model="productDate.attributesTypeId" |
||||
:localdata="attributesTypeList" |
||||
placeholder="请选择商品品牌" |
||||
@change="attributesData" |
||||
></uni-data-select> |
||||
</uni-forms-item> |
||||
<view class="content" v-show="productDate.attributesTypeId"> |
||||
<view>商品类型：</view> |
||||
<view> |
||||
<uni-section type="line"> |
||||
<view class="uni-px-5" v-for="(item,index) in attributesList"> |
||||
<view style="display: inline-block;">{{item.attributeName}}：</view> |
||||
<view style="display: inline-block;"> |
||||
<uni-data-checkbox v-if="index==0" mode="tag" v-model="radioAttributes" :localdata="item.attributesList"></uni-data-checkbox> |
||||
<uni-data-checkbox v-else-if="index!=0" mode="tag" multiple v-model="checkboxAttributes" :localdata="hobby"></uni-data-checkbox> |
||||
</view> |
||||
|
||||
</view> |
||||
</uni-section> |
||||
</view> |
||||
</view> |
||||
<view> |
||||
<view>批量填充：<text style="color: #999999;">批量填充填入信息后，可以批量将内容填写到SKU 信息里</text></view> |
||||
<view class="tagButton" :class="item.checked == true?'checkedTag':''" @tap="changeChecked(item)" v-for="item in bottonList">{{item.label}}</view> |
||||
<view class="redButton" @tap="addStockList">确定</view> |
||||
</view> |
||||
<view v-if="productDate.attributesTypeId&&checkboxAttributes.length>0" v-for="(items,index) in checkboxAttributes"> |
||||
<view> |
||||
<text style="color: red;">*</text> |
||||
<text>规格：</text> |
||||
<text>{{radioAttributes}}+{{items}}</text> |
||||
</view> |
||||
<view class="tagButton" v-if="item.checked==true" v-for="item in stockList"> |
||||
<input type="text" v-model="item.value" :placeholder="item.label" /> |
||||
</view> |
||||
<view style="display: inline-block;" @click="deleteCheckAll(index)">删除</view> |
||||
</view> |
||||
<view v-if="productDate.attributesTypeId&&radioAttributes" > |
||||
<view> |
||||
<text style="color: red;">*</text> |
||||
<text>规格：</text> |
||||
<text>{{radioAttributes}}</text> |
||||
</view> |
||||
<view class="tagButton" v-if="item.checked==true" v-for="item in bottonList"> |
||||
<input type="text" v-model="item.value" :placeholder="item.label" /> |
||||
</view> |
||||
<view style="display: inline-block;" @click="deleteRadio">删除</view> |
||||
</view> |
||||
<view> |
||||
<view> |
||||
<text style="color: red;">*</text> |
||||
商品图片：<text style="color: #999999;">最多可上传10张图片</text></view> |
||||
<view class="imageList" v-for="(items,index) in productDate.images"> |
||||
<view class="imageBlack" v-if="items.mainMark==1"> |
||||
<image :src="items.url"></image> |
||||
<view class="cameraText">商品主图</view> |
||||
<uni-icons class="cameraClear" type="clear" size="20" @tap="clearImage(index)"></uni-icons> |
||||
</view> |
||||
<view class="imageBlack" v-else-if="items.mainMark!=1"> |
||||
<image :src="items.url"></image> |
||||
<view class="cameraText">设为主图</view> |
||||
<uni-icons class="cameraClear" type="clear" size="20" @tap="clearImage(index)"></uni-icons> |
||||
</view> |
||||
</view> |
||||
<view class="imageBlack" @tap="takePhoto"> |
||||
<view style="cameraImage"> |
||||
<uni-icons type="camera-filled" size="30"></uni-icons> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
<!-- <view> |
||||
<view>详情图片：<text style="color: #999999;">最多可上传10张图片</text></view> |
||||
<view></view> |
||||
</view> --> |
||||
</uni-forms> |
||||
<view class="buttons"> |
||||
<view id="previous" @click="changeBox">上一步</view> |
||||
<view @click="addCompleted">完成</view> |
||||
</view> |
||||
</view> |
||||
|
||||
|
||||
|
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import utils from '@/utils/encode' |
||||
import serve from '@/api/packageIntegral/productList.js' |
||||
import mulpicker from '@/packageIntegral/components/mulpicker.vue' |
||||
export default { |
||||
components: { |
||||
mulpicker |
||||
}, |
||||
data() { |
||||
return { |
||||
currentBoxId: 'instruction', //当前显示的view的id |
||||
isBoxShow: false, |
||||
productDate:{ |
||||
images:[] |
||||
}, |
||||
productList:[], |
||||
brandIdList:[], |
||||
radioItem:[{ |
||||
name: '新品', |
||||
checked: true |
||||
}, { |
||||
name: '推荐', |
||||
checked: false |
||||
}], |
||||
rules:{ |
||||
name:{rules:[{required: true,errorMessage: '请选择商品分类'}]}, |
||||
productName:{rules:[{required: true,errorMessage: '请输入商品名称'}]}, |
||||
brandId:{rules:[{required: true,errorMessage: '请输入商品品牌'}]}, |
||||
price:{rules:[{required: true,errorMessage: '请输入商品售价'}]}, |
||||
}, |
||||
attributesTypeList:[], |
||||
attributesList:[], |
||||
bottonList:[ |
||||
{label:'市场价格',value:'marketPrice',checked:false}, |
||||
{label:'销售价格',value:'sellPrice',checked:false}, |
||||
{label:'商品库存',value:'stock',checked:false}, |
||||
{label:'兑换积分',value:'integral',checked:false} |
||||
], |
||||
radioAttributes:'', |
||||
checkboxAttributes:[], |
||||
stockList:[] |
||||
} |
||||
}, |
||||
|
||||
onLoad(options) { |
||||
// this.get(options.orderId) |
||||
this.classfication() |
||||
this.getProductBrands() |
||||
this.getAttributesType() |
||||
}, |
||||
watch:{ |
||||
'productDate.demandRegion'(val){ |
||||
if(val){ |
||||
this.productDate.categoryOneId = val.split(',')[0] |
||||
this.productDate.categoryTwoId = val.split(',')[1] |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
classfication(){ |
||||
serve.classification().then(res=>{ |
||||
this.productList = res.data |
||||
}) |
||||
}, |
||||
getProductBrands(){ |
||||
this.brandIdList = [] |
||||
serve.getProductBrands().then(res=>{ |
||||
console.log(res) |
||||
res.data.forEach(tab=>{ |
||||
this.brandIdList.push({value:tab.id,text:tab.brandName}) |
||||
}) |
||||
|
||||
}) |
||||
}, |
||||
checkbox (e) { |
||||
var index = e;//获取当前点击的下标 |
||||
var checkboxArr = this.radioItem;//选项集合 |
||||
// if (checkboxArr[index].checked) return;//如果点击的当前已选中则返回 |
||||
// checkboxArr.forEach(item => { |
||||
// item.checked = false |
||||
// }) |
||||
if(checkboxArr[index].checked ==false){ |
||||
checkboxArr[index].checked = true; //改变当前选中的checked值 |
||||
|
||||
}else { |
||||
checkboxArr[index].checked = false; //改变当前选中的checked值 |
||||
} |
||||
if(checkboxArr[0].checked ==true){ |
||||
this.productDate.newMark = 1 |
||||
}else{ |
||||
this.productDate.newMark = 2 |
||||
} |
||||
if(checkboxArr[1].checked ==true){ |
||||
this.productDate.recommend = 1 |
||||
}else{ |
||||
this.productDate.recommend = 2 |
||||
} |
||||
|
||||
}, |
||||
changeBox(e){ |
||||
let currentFlag = e.currentTarget.id; |
||||
switch(currentFlag){ |
||||
case 'next': |
||||
this.currentBoxId = 'instruction' |
||||
break; |
||||
case 'previous': |
||||
this.currentBoxId = 'chooseType' |
||||
break; |
||||
default: |
||||
this.currentBoxId = 'viewInstruction' |
||||
break; |
||||
} |
||||
if(currentFlag == 'next'){ |
||||
this.getAttributesType() |
||||
} |
||||
}, |
||||
getAttributesType(){ |
||||
this.attributesTypeList = [] |
||||
serve.getAttributesType().then(res=>{ |
||||
res.data.forEach(tab=>{ |
||||
this.attributesTypeList.push({ |
||||
value:tab.id, |
||||
text:tab.name, |
||||
number:tab.number, |
||||
attributesList:tab.attributesList |
||||
}) |
||||
}) |
||||
}) |
||||
}, |
||||
attributesData(){ |
||||
if(this.productDate.attributesTypeId){ |
||||
this.attributesTypeList.forEach(tab=>{ |
||||
if(tab.id = this.productDate.attributesTypeId){ |
||||
this.attributesList = tab.attributesList |
||||
this.attributesList.forEach(tab=>{ |
||||
tab.attributesList = [] |
||||
tab.attributeContent.split(',').forEach(item=>{ |
||||
tab.attributesList.push({value:item,text:item}) |
||||
}) |
||||
}) |
||||
|
||||
} |
||||
}) |
||||
}else{ |
||||
this.attributesList = [] |
||||
} |
||||
|
||||
}, |
||||
deleteCheckAll(i){ |
||||
if(this.checkboxAttributes.length>1){ |
||||
this.checkboxAttributes.splice(i,1) |
||||
}else{ |
||||
this.checkboxAttributes.splice(i,1) |
||||
this.radioAttributes = '' |
||||
} |
||||
}, |
||||
deleteRadio(){ |
||||
this.radioAttributes = '' |
||||
}, |
||||
changeChecked(item){ |
||||
|
||||
item.checked = !item.checked |
||||
console.log(this.radioAttributes,this.checkboxAttributes) |
||||
|
||||
}, |
||||
addStockList(){ |
||||
this.stockList = [] |
||||
let obj = {} |
||||
this.bottonList.forEach(tab=>{ |
||||
if(tab.checked == true){ |
||||
if(tab.value == 'marketPrice'){ |
||||
obj.marketPrice = '' |
||||
}else if(tab.value == 'sellPrice'){ |
||||
obj.sellPrice = '' |
||||
}else if(tab.value == 'stock'){ |
||||
obj.stock = '' |
||||
}else if(tab.value == 'integral'){ |
||||
obj.integral = '' |
||||
} |
||||
} |
||||
}) |
||||
this.stockList.push(obj) |
||||
}, |
||||
// 调用系统相机 |
||||
takePhoto() { |
||||
// 先检查权限 |
||||
let _that = this |
||||
uni.getSetting({ |
||||
success(res) { |
||||
if (!res.authSetting['scope.camera']) { |
||||
// 请求权限 |
||||
uni.authorize({ |
||||
scope: 'scope.camera', |
||||
success() { |
||||
// 权限已经获取，可以调用相机 |
||||
_that.srcFileImage() |
||||
}, |
||||
fail() { |
||||
// 用户拒绝授权，需引导用户开启权限 |
||||
uni.showModal({ |
||||
title: '提示', |
||||
content: '需要相机权限才能使用相机功能，请在设置中打开', |
||||
success: (modalRes) => { |
||||
if (modalRes.confirm) { |
||||
// 引导用户去设置中打开权限 |
||||
uni.openSetting({ |
||||
success(res) { |
||||
if (res.authSetting['scope.camera']) { |
||||
re() |
||||
// 授权成功 |
||||
} else { |
||||
// 没有允许相机权限 |
||||
wx.showToast({ |
||||
title: '您拒绝了相机权限，将无法使用相机功能', |
||||
icon: 'none' |
||||
}); |
||||
rj('拒绝了相机权限') |
||||
} |
||||
}, |
||||
fail() { |
||||
rj('openSetting调用失败') |
||||
} |
||||
}) |
||||
} |
||||
}, |
||||
}); |
||||
}, |
||||
}); |
||||
} else { |
||||
// 权限已经获取，可以直接调用相机 |
||||
_that.srcFileImage() |
||||
} |
||||
}, |
||||
fail(err) { |
||||
// 获取设置失败 |
||||
console.error(err); |
||||
}, |
||||
}); |
||||
}, |
||||
//调起上传图片 |
||||
srcFileImage() { |
||||
let _that = this |
||||
let imageUrl = '' |
||||
uni.chooseImage({ |
||||
count: 10, //默认9 |
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 |
||||
sourceType: ['album'], //从相册选择 |
||||
success: function(res) { |
||||
console.log(res) |
||||
console.log('进入1') |
||||
const JSESSIONID = utils.uuid() |
||||
uni.uploadFile({ |
||||
url: 'http://uat.xingoil.com/adminapi/oil-oss/obejct/uploadFile', |
||||
filePath: res.tempFilePaths[0], |
||||
formData: { |
||||
ossKey: 'xingyou', |
||||
pathKey: 'publicxingyou', |
||||
encrypt: 'PUBLIC', |
||||
}, |
||||
name: 'file', |
||||
header: { |
||||
"Content-Type": "multipart/form-data", |
||||
"Authorization": uni.getStorageSync('Authorization'), |
||||
'dataSources': 'MP', |
||||
"imei": uni.getStorageSync('unionid'), |
||||
"openId": uni.getStorageSync('openid'), |
||||
'JSESSIONID': JSESSIONID, |
||||
'token': utils.md5Salt(JSESSIONID) |
||||
}, |
||||
success(e) { |
||||
console.log('进入2') |
||||
console.log(e) |
||||
let obj = JSON.parse(e.data), |
||||
imageUrl = obj.data.publicUrl |
||||
_that.getImage(imageUrl) |
||||
}, |
||||
fail(err) { |
||||
console.log(err) |
||||
} |
||||
}) |
||||
},fail() { |
||||
console.log('相机调用失败') |
||||
} |
||||
}) |
||||
}, |
||||
getImage(imageUrl){ |
||||
if(JSON.stringify(this.productDate.images) == '[]'){ |
||||
this.productDate.images.push({ |
||||
url:imageUrl, |
||||
mainMark:1 |
||||
}) |
||||
}else{ |
||||
this.productDate.images.push({ |
||||
url:imageUrl, |
||||
mainMark:'' |
||||
}) |
||||
} |
||||
}, |
||||
clearImage(index){ |
||||
if(this.productDate.images[index].mainMark == 1){ |
||||
this.productDate.images.splice(index,1) |
||||
this.productDate.images[0].mainMark = 1 |
||||
}else{ |
||||
this.productDate.images.splice(index,1) |
||||
} |
||||
}, |
||||
picker2(e){ |
||||
console.log(e.detail.value) |
||||
this.productDate.value = e.detail.value |
||||
}, |
||||
closed(){ |
||||
uni.navigateTo({ |
||||
url: '/pages/index/index' |
||||
}) |
||||
}, |
||||
addCompleted(){ |
||||
|
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
.fadeBox{ |
||||
width: 100%; |
||||
margin-bottom: 20rpx; |
||||
} |
||||
#chooseType{ |
||||
padding: 30rpx; |
||||
|
||||
mulpicker{ |
||||
height: 72rpx; |
||||
line-height: 72rpx; |
||||
} |
||||
/deep/ .uni-forms{ |
||||
width: 100%; |
||||
} |
||||
.content{ |
||||
font-size: 28rpx; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
|
||||
/deep/ .uni-forms-item{ |
||||
width: 100%; |
||||
} |
||||
|
||||
/deep/ .uni-forms-item__label{ |
||||
color: #333 !important; |
||||
font-size: 30rpx; |
||||
font-weight: 700; |
||||
} |
||||
/deep/ .uni-forms-item__content{ |
||||
width: 100%; |
||||
input{ |
||||
height: 72rpx; |
||||
line-height: 72rpx; |
||||
} |
||||
} |
||||
|
||||
switch{ |
||||
margin-top: 9rpx; |
||||
} |
||||
switch::before{ |
||||
content: ''; |
||||
} |
||||
switch::after{ |
||||
content: ''; |
||||
} |
||||
} |
||||
#instruction{ |
||||
padding: 30rpx; |
||||
|
||||
mulpicker{ |
||||
height: 72rpx; |
||||
line-height: 72rpx; |
||||
} |
||||
/deep/ .uni-forms{ |
||||
width: 100%; |
||||
} |
||||
/deep/ .uni-forms-item{ |
||||
width: 100%; |
||||
} |
||||
|
||||
/deep/ .uni-forms-item__label{ |
||||
color: #333 !important; |
||||
font-size: 30rpx; |
||||
font-weight: 700; |
||||
} |
||||
/deep/ .uni-forms-item__content{ |
||||
width: 100%; |
||||
input{ |
||||
height: 72rpx; |
||||
line-height: 72rpx; |
||||
} |
||||
} |
||||
.tagButton{ |
||||
display: inline-block; |
||||
width: 133rpx; |
||||
height: 58rpx; |
||||
background: #f5f5f5; |
||||
color: #666666; |
||||
border-radius: 8rpx; |
||||
line-height: 58rpx; |
||||
text-align: center; |
||||
margin: 8rpx; |
||||
} |
||||
.checkedTag{ |
||||
background-color: #2979ff; |
||||
color: #FFFFFF; |
||||
} |
||||
.redButton{ |
||||
display: inline-block; |
||||
width: 84rpx; |
||||
height: 58rpx; |
||||
background: red; |
||||
color: #fff; |
||||
border-radius: 10rpx; |
||||
line-height: 58rpx; |
||||
text-align: center; |
||||
} |
||||
.commodityImage{ |
||||
display: inline-block; |
||||
max-width: calc(100%-150rpx); |
||||
} |
||||
.imageList{ |
||||
display: inline-block; |
||||
width: 140rpx; |
||||
margin: 0 10rpx; |
||||
} |
||||
.imageBlack{ |
||||
display: inline-block; |
||||
width: 140rpx; |
||||
height: 140rpx; |
||||
position: relative; |
||||
>image{ |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
.cameraText{ |
||||
width: 140rpx; |
||||
height: 30rpx; |
||||
text-align: center; |
||||
line-height: 30rpx; |
||||
position: absolute; |
||||
background-color: #333; |
||||
opacity: 0.3; |
||||
color: #FFFFFF; |
||||
left: 0rpx; |
||||
top: 110rpx; |
||||
} |
||||
.cameraClear{ |
||||
position: absolute; |
||||
left: 120rpx; |
||||
top: -10rpx; |
||||
z-index: 20; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
.checkbox-con{ |
||||
margin-top: 40rpx; |
||||
text-align: center; |
||||
position: relative; |
||||
} |
||||
.checkbox{ |
||||
width: 180rpx; |
||||
height: 76rpx; |
||||
line-height: 76rpx; |
||||
font-size: 30rpx; |
||||
color: #666666; |
||||
border: 1rpx solid #B6B6B6; |
||||
border-radius: 5rpx; |
||||
display: inline-block; |
||||
margin: 0 10rpx 20rpx 0; |
||||
position: absolute; |
||||
top: 50rpx; |
||||
&:nth-of-type(1){ |
||||
left: -190rpx; |
||||
} |
||||
&:nth-of-type(2){ |
||||
left: 50rpx; |
||||
} |
||||
} |
||||
|
||||
.checked{ |
||||
color: #FFFFFF; |
||||
background: #FE0606; |
||||
border: 1rpx solid #FE0606; |
||||
} |
||||
.checkbox checkbox{ |
||||
display: none |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
.buttons { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: space-evenly; |
||||
margin-top: 180rpx; |
||||
|
||||
>view { |
||||
width: 250rpx; |
||||
height: 76rpx; |
||||
text-align: center; |
||||
line-height: 76rpx; |
||||
border-radius: 10rpx; |
||||
font-size: 28rpx; |
||||
|
||||
&:nth-of-type(1) { |
||||
background: #FFFFFF; |
||||
border: 1rpx solid #B6B6B6; |
||||
color: #333; |
||||
} |
||||
|
||||
&:nth-of-type(2) { |
||||
background: #FE0505; |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
.show{ |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
} |
||||
.hidden{ |
||||
display: none; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue