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.
903 lines
22 KiB
903 lines
22 KiB
<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="demandRegion"> |
|
<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" :checked="productDate.productStatus=='1'" |
|
color="#FE0606" @change="switchChange" 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 style="margin: 10rpx 0;">商品规格：</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 mode="tag" |
|
@change="changeCheckBox(item,index)" multiple v-model="item.checkboxAttributes" |
|
:localdata="item.attributesList"></uni-data-checkbox> |
|
</view> |
|
|
|
</view> |
|
</uni-section> |
|
</view> |
|
</view> |
|
<view style="padding-bottom: 20rpx;border-bottom: 1rpx solid #f6f6f6;"> |
|
<view>批量填充：<text style="color: #999999;margin: 10rpx 0;">批量填充填入信息后，可以批量将内容填写到SKU 信息里</text></view> |
|
<view style="display: inline-block;position: relative;" v-for="item in bottonList"> |
|
<view class="tagButton"> |
|
<input type="text" v-model="item.marketPrice" placeholder="市场价格" /> |
|
</view> |
|
<view class="tagButton"> |
|
<input type="text" v-model="item.sellPrice" placeholder="销售价格" /> |
|
</view> |
|
<view class="tagButton"> |
|
<input type="text" v-model="item.stock" placeholder="库存数量" /> |
|
</view> |
|
<view class="tagButton"> |
|
<input type="text" v-model="item.integral" placeholder="积分价值" /> |
|
</view> |
|
<view class="redButton" @tap="addStockList">确定</view> |
|
</view> |
|
</view> |
|
<view style="padding: 20rpx 0;;border-bottom: 1rpx solid #f6f6f6;" v-for="(items,index) in stockList"> |
|
<view style="margin: 10rpx 0;"> |
|
<text style="color: red;">*</text> |
|
<text>规格：</text> |
|
<text v-for="(value,key,index) in JSON.parse(items.attributeJson)"> |
|
<text v-if="index==0">{{value}}</text> |
|
<text v-else> + {{value}}</text> |
|
</text> |
|
</view> |
|
<view class="tagButton"> |
|
<input type="text" v-model="items.marketPrice" placeholder="市场价格" /> |
|
</view> |
|
<view class="tagButton"> |
|
<input type="text" v-model="items.sellPrice" placeholder="销售价格" /> |
|
</view> |
|
<view class="tagButton"> |
|
<input type="text" v-model="items.stock" placeholder="库存数量" /> |
|
</view> |
|
<view class="tagButton"> |
|
<input type="text" v-model="items.integral" placeholder="积分价值" /> |
|
</view> |
|
<view style="display: inline-block;vertical-align: top;margin-top: 10rpx;" |
|
@click="deleteCheckAll(index)">删除</view> |
|
</view> |
|
<view> |
|
<view style="margin: 10rpx 0;"> |
|
<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" @click="setMainImage(items,index)">设为主图</view> |
|
<uni-icons class="cameraClear" type="clear" size="20" @tap="clearImage(index)"></uni-icons> |
|
</view> |
|
</view> |
|
<view class="imageBlack" style="background-color: #fafafa;" @tap="srcFileImage"> |
|
<view style="margin-top: 46rpx;"> |
|
<uni-icons type="camera-filled" size="30"></uni-icons> |
|
</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: 'chooseType', //当前显示的view的id |
|
isBoxShow: false, |
|
productDate: { |
|
productStatus: '1', |
|
newMark: 1, |
|
images: [] |
|
}, |
|
productList: [], |
|
brandIdList: [], |
|
radioItem: [{ |
|
name: '新品', |
|
checked: true |
|
}, { |
|
name: '推荐', |
|
checked: false |
|
}], |
|
rules: { |
|
demandRegion: { |
|
rules: [{ |
|
required: true, |
|
errorMessage: '请选择商品分类' |
|
}] |
|
}, |
|
productName: { |
|
rules: [{ |
|
required: true, |
|
errorMessage: '请输入商品名称' |
|
}] |
|
}, |
|
brandId: { |
|
rules: [{ |
|
required: true, |
|
errorMessage: '请选择商品品牌' |
|
}] |
|
}, |
|
price: { |
|
rules: [{ |
|
required: true, |
|
errorMessage: '请输入商品售价' |
|
}] |
|
}, |
|
}, |
|
attributesTypeList: [], |
|
attributesList: [], |
|
bottonList: [{ |
|
marketPrice: '', |
|
sellPrice: '', |
|
stock: '', |
|
integral: '' |
|
}], |
|
|
|
stockList: [], |
|
checkedList: [] |
|
} |
|
}, |
|
|
|
onLoad() { |
|
this.classfication() |
|
this.getProductBrands() |
|
this.getAttributesType() |
|
}, |
|
watch: { |
|
'productDate.demandRegion'(val) { |
|
if (val) { |
|
this.productDate.categoryOneId = val.split(',')[0] |
|
this.productDate.categoryTwoId = val.split(',')[1] |
|
} |
|
}, |
|
'productDate.attributesTypeId'(val) { |
|
if (!val) { |
|
this.stockList = [] |
|
} |
|
} |
|
}, |
|
methods: { |
|
switchChange(e) { |
|
if (e.detail.value == true) { |
|
this.productDate.productStatus = '1' |
|
} else if (e.detail.value == false) { |
|
this.productDate.productStatus = '2' |
|
} |
|
}, |
|
classfication() { |
|
serve.classification().then(res => { |
|
this.productList = res.data |
|
}) |
|
}, |
|
getProductBrands() { |
|
this.brandIdList = [] |
|
serve.getProductBrands().then(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 |
|
}) |
|
checkboxArr[index].checked = true; //改变当前选中的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; |
|
if (currentFlag == 'next') { |
|
this.$refs.productForm.validate().then(res => { |
|
if (this.isNumber(this.productDate.price) == false) { |
|
uni.showToast({ |
|
title: '商品售价不是数字', |
|
icon: 'none' |
|
}) |
|
return |
|
} |
|
switch (currentFlag) { |
|
case 'next': |
|
this.currentBoxId = 'instruction' |
|
break; |
|
case 'previous': |
|
this.currentBoxId = 'chooseType' |
|
break; |
|
default: |
|
this.currentBoxId = 'viewInstruction' |
|
break; |
|
} |
|
if (currentFlag == 'next') { |
|
this.getAttributesType() |
|
} |
|
}).catch(err => {}) |
|
} else { |
|
switch (currentFlag) { |
|
case 'next': |
|
this.currentBoxId = 'instruction' |
|
break; |
|
case 'previous': |
|
this.currentBoxId = 'chooseType' |
|
break; |
|
default: |
|
this.currentBoxId = 'viewInstruction' |
|
break; |
|
} |
|
} |
|
|
|
}, |
|
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() { |
|
this.bottonList = [{ |
|
marketPrice: '', |
|
sellPrice: '', |
|
stock: '', |
|
integral: '' |
|
}] |
|
this.stockList = [] |
|
if (this.productDate.attributesTypeId) { |
|
this.attributesTypeList.forEach(tab => { |
|
if (tab.value == this.productDate.attributesTypeId) { |
|
this.attributesList = tab.attributesList |
|
this.attributesList.forEach(tab => { |
|
tab.attributesList = [] |
|
tab.checkboxAttributes=[] |
|
tab.attributeContent.split(',').forEach(item => { |
|
tab.attributesList.push({ |
|
value: item, |
|
text: item |
|
}) |
|
}) |
|
}) |
|
|
|
} |
|
}) |
|
} else { |
|
this.attributesList = [] |
|
} |
|
|
|
}, |
|
changeCheckBox(item, index) { |
|
if (this.checkedList.length < index + 1) { |
|
this.checkedList.push({ |
|
attributeId: item.id, |
|
checked: item.checkboxAttributes[index] |
|
}) |
|
} else { |
|
let checked = [] |
|
item.checkboxAttributes.forEach(tab => { |
|
checked.push(tab) |
|
}) |
|
this.checkedList[index].checked = checked.join(',') |
|
} |
|
let arrays = [] |
|
this.attributesList.forEach(tab=>{ |
|
arrays.push(tab.checkboxAttributes) |
|
}) |
|
let arrList = this.combineArrays(arrays) |
|
this.stockCheck(arrList) |
|
}, |
|
combineArrays(arr) { |
|
if (arr.length === 0) { |
|
return []; |
|
} else if (arr.length === 1) { |
|
return arr[0]; |
|
} else if (arr.length === 2 && JSON.stringify(arr[1])=='[]') { |
|
let result = []; |
|
arr[0].forEach(tab=>{ |
|
result.push([tab]) |
|
}) |
|
return result; |
|
} else { |
|
let result = []; |
|
let subCombinations = this.combineArrays(arr.slice(1)); |
|
for (let elem of arr[0]) { |
|
if (Array.isArray(subCombinations)) { |
|
for (let subComb of subCombinations) { |
|
result.push([elem].concat(subComb)); |
|
} |
|
} else { |
|
result.push([elem, subCombinations]); |
|
} |
|
} |
|
return result; |
|
} |
|
}, |
|
stockCheck(arrList) { |
|
this.stockList = [] |
|
let obj = { |
|
marketPrice: '', |
|
sellPrice: '', |
|
stock: '', |
|
integral: '' |
|
} |
|
arrList.forEach(tab=>{ |
|
let data = {} |
|
let tabName = '' |
|
let tabValue = '' |
|
tab.forEach((item,i)=>{ |
|
tabName = this.attributesList[i].attributeName |
|
tabValue = item |
|
data[tabName] = tabValue |
|
}) |
|
obj.attributeJson = JSON.stringify(data) |
|
let stockObj = JSON.parse(JSON.stringify(obj)) |
|
this.stockList.push(stockObj) |
|
}) |
|
}, |
|
deleteCheckAll(i) { |
|
this.stockList.splice(i, 1) |
|
}, |
|
addStockList() { |
|
this.stockList.forEach(tab => { |
|
tab.marketPrice = this.bottonList[0].marketPrice |
|
tab.sellPrice = this.bottonList[0].sellPrice |
|
tab.stock = this.bottonList[0].stock |
|
tab.integral = this.bottonList[0].integral |
|
}) |
|
}, |
|
//调起上传图片 |
|
srcFileImage() { |
|
let _that = this |
|
let imageUrl = '' |
|
uni.chooseImage({ |
|
count: 1, //默认9 |
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 |
|
sourceType: ['album'], //从相册选择 |
|
success: function(res) { |
|
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) { |
|
let obj = JSON.parse(e.data), |
|
imageUrl = obj.data.publicUrl |
|
_that.getImage(imageUrl) |
|
}, |
|
fail(err) {} |
|
}) |
|
}, |
|
fail() { |
|
console.log('相机调用失败') |
|
} |
|
}) |
|
}, |
|
getImage(imageUrl) { |
|
if (this.productDate.images.length < 10) { |
|
if (JSON.stringify(this.productDate.images) == '[]') { |
|
this.productDate.images.push({ |
|
url: imageUrl, |
|
mainMark: 1 |
|
}) |
|
} else { |
|
this.productDate.images.push({ |
|
url: imageUrl, |
|
mainMark: '' |
|
}) |
|
} |
|
} else { |
|
uni.showToast({ |
|
title: '最多只能上传十张图片~', |
|
icon: 'none' |
|
}) |
|
} |
|
|
|
}, |
|
setMainImage(items, index) { |
|
let obj = items |
|
obj.mainMark = 1 |
|
this.productDate.images.splice(index, 1) |
|
this.productDate.images.forEach((tab, i) => { |
|
tab.mainMark = '' |
|
}) |
|
|
|
this.productDate.images.unshift(obj) |
|
}, |
|
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) |
|
} |
|
}, |
|
closed() { |
|
uni.navigateTo({ |
|
url: '/pages/index/index' |
|
}) |
|
}, |
|
isNumber(value) { |
|
return /^[0-9]+$/.test(value); |
|
}, |
|
addCompleted() { |
|
if (this.radioItem[0].checked = true) { |
|
this.productDate.newMark == 1 |
|
} else { |
|
this.productDate.newMark == 2 |
|
} |
|
if (this.radioItem[1].checked = true) { |
|
this.productDate.recommend == 1 |
|
} else { |
|
this.productDate.recommend == 2 |
|
} |
|
if (!this.productDate.attributesTypeId) { |
|
uni.showToast({ |
|
title: '请选择请选择规格', |
|
icon: 'none' |
|
}) |
|
return |
|
} |
|
this.attributesList.forEach(tab=>{ |
|
if(JSON.stringify(tab.checkboxAttributes) == '[]'){ |
|
uni.showToast({ |
|
title: '请选择商品规格', |
|
icon: 'none' |
|
}) |
|
throw Error(`请选择商品规格！`) |
|
} |
|
}) |
|
if (JSON.stringify(this.stockList.length) == '[]') { |
|
uni.showToast({ |
|
title: '请选择商品规格', |
|
icon: 'none' |
|
}) |
|
return |
|
} else { |
|
this.stockList.forEach(tab => { |
|
|
|
if (!tab.marketPrice) { |
|
uni.showToast({ |
|
title: '市场价格必填！', |
|
icon: 'none' |
|
}) |
|
throw Error(`市场价格必填！`) |
|
} else { |
|
if (this.isNumber(tab.marketPrice) == false) { |
|
uni.showToast({ |
|
title: '市场价格不是数字！', |
|
icon: 'none' |
|
}) |
|
throw Error(`市场价格不是数字！`) |
|
} |
|
} |
|
if (!tab.sellPrice) { |
|
uni.showToast({ |
|
title: '销售价格必填！', |
|
icon: 'none' |
|
}) |
|
throw Error(`销售价格必填！`) |
|
} else { |
|
if (this.isNumber(tab.sellPrice) == false) { |
|
uni.showToast({ |
|
title: '销售价格不是数字！', |
|
icon: 'none' |
|
}) |
|
throw Error(`销售价格不是数字！`) |
|
} |
|
} |
|
if (!tab.stock) { |
|
uni.showToast({ |
|
title: '库存数量必填！', |
|
icon: 'none' |
|
}) |
|
throw Error(`库存数量必填！`) |
|
} else { |
|
if (this.isNumber(tab.stock) == false) { |
|
uni.showToast({ |
|
title: '库存数量不是数字！', |
|
icon: 'none' |
|
}) |
|
throw Error(`库存数量不是数字！`) |
|
} |
|
} |
|
if (!tab.integral) { |
|
uni.showToast({ |
|
title: '积分价值必填！', |
|
icon: 'none' |
|
}) |
|
throw Error(`积分价值必填！`) |
|
} else { |
|
if (this.isNumber(tab.integral) == false) { |
|
uni.showToast({ |
|
title: '积分价值不是数字！', |
|
icon: 'none' |
|
}) |
|
throw Error(`积分价值不是数字！`) |
|
} |
|
} |
|
}) |
|
} |
|
if (JSON.stringify(this.productDate.images) == '[]') { |
|
uni.showToast({ |
|
title: '请上传商品图片', |
|
icon: 'none' |
|
}) |
|
return |
|
} |
|
this.productDate.checkedList = this.checkedList |
|
this.productDate.stockList = this.stockList |
|
serve.saveProduct(this.productDate).then(res => { |
|
uni.showToast({ |
|
title: res.msg, |
|
icon: 'none' |
|
}) |
|
this.closed() |
|
}) |
|
} |
|
} |
|
} |
|
</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; |
|
} |
|
} |
|
|
|
.content { |
|
padding-bottom: 20rpx; |
|
border-bottom: 1rpx solid #F6F6F6; |
|
} |
|
|
|
.tagButton { |
|
display: inline-block; |
|
width: 133rpx; |
|
background: #f5f5f5; |
|
color: #666666; |
|
border-radius: 8rpx; |
|
line-height: 58rpx; |
|
text-align: center; |
|
margin: 8rpx; |
|
|
|
input { |
|
height: 58rpx; |
|
} |
|
} |
|
|
|
.checkedTag { |
|
background-color: #2979ff; |
|
color: #FFFFFF; |
|
} |
|
|
|
.redButton { |
|
position: absolute; |
|
right: -84rpx; |
|
top: 10rpx; |
|
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; |
|
vertical-align: middle; |
|
text-align: center; |
|
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>
|
|
|