776 lines
24 KiB
Vue
776 lines
24 KiB
Vue
<template>
|
|
<view class="page">
|
|
<view class="mode">
|
|
<view class="line">
|
|
<view class="title">规格模板</view>
|
|
<picker style="flex: 1;" mode="selector" :range="attr_mode_list" range-key="template_name" @change="changAttrMode">
|
|
<view class="input">
|
|
<view>{{template_name}}</view>
|
|
<uni-icons type="right"></uni-icons>
|
|
</view>
|
|
</picker>
|
|
<view class="btn" @click="preAddMode(3)">添加模板</view>
|
|
</view>
|
|
<view class="btn-box" @click="settingSpec()">
|
|
<view class="btn">点击设置规格</view>
|
|
</view>
|
|
<uni-popup ref="modeRef" type="top">
|
|
<view class="mode-ref" style="min-height: 300rpx;width: 100%;background-color: #fff;">
|
|
<view style="height: 1rpx;"></view>
|
|
<scroll-view scroll-y style="max-height: 550rpx;min-height: 220rpx;">
|
|
<view class="mode-item" v-for="(item, index) in attr" :key="item+index">
|
|
<view class="mode-head">{{item.value}}</view>
|
|
<view class="mode-body">
|
|
<view class="box mode-body-box" v-for="(t, i) in item.detail" :key="t+i"
|
|
@click="deleteAttrTow(index, i)">
|
|
{{t}}<uni-icons type="close" color="#f84221" style="margin-left: 10rpx;"></uni-icons>
|
|
</view>
|
|
<view class="box mode-body-add" @click="addSpecTow(index)"><uni-icons type="plus" color="#333"
|
|
style="margin-right: 10rpx;"></uni-icons>添加</view>
|
|
</view>
|
|
<view class="delete-spec" @click="deleteAttrOne(index)"><uni-icons type="close" color="#f84221"
|
|
style="margin-right: 10rpx;"></uni-icons>删除规格</view>
|
|
</view>
|
|
<view v-if="attr.length==0" style="color: #ccc;height: 220rpx;text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;">
|
|
<view>暂无规格</view>
|
|
<view>点击下方按钮添加新规格</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="tab">
|
|
<view class="add-btn" @click="addSpecOne()">添加新规格</view>
|
|
<view class="save" @click="saveAttrMode()">保存模板</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<uni-popup ref="inputModeRef" type="center">
|
|
<view class="input-mode">
|
|
<view class="head-tips">
|
|
<view v-if="addAttrType==1">添加规格值</view>
|
|
<view v-else-if="addAttrType==2">添加新规格</view>
|
|
<view v-else>添加模板</view>
|
|
</view>
|
|
<view class="input-box">
|
|
<input v-if="addAttrType==4||addAttrType==3" v-model="attrMode" placeholder="请输入模板名称" />
|
|
<input v-if="addAttrType==2||addAttrType==3" v-model="attrName" placeholder="请输入规格名称" />
|
|
<input v-if="addAttrType!=4" v-model="attrDetail" placeholder="请输入规格值" />
|
|
</view>
|
|
<view class="show-btn-box">
|
|
<view class="cof prai" @click="addAttr()">确认</view>
|
|
<view class="can" @click="closeAddAttr()">取消</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
<view style="height: 160rpx;"></view>
|
|
<avatar style="height: 1px;" @upload="doUpload" @getName="getImgName" quality="1" ref="avatar" selWidth="250upx"
|
|
selHeight="250upx">
|
|
</avatar>
|
|
<block v-for="(item,index) in attrValue" :key="item.uuid">
|
|
<view class="popup_group head_close">
|
|
<view class="popup_group_item " v-for="(value, key) in item.detail" :key="key">
|
|
<view class="popup_group_item_label">{{key}}</view>
|
|
<view class="popup_group_item_value">
|
|
<input :value="value" type="text" disabled placeholder="请填写规格名称" />
|
|
</view>
|
|
</view>
|
|
<view class="delete_btn" @click="deleteByIndex(index)">
|
|
<image style="width: 50%;height: 50%;" src="../static/images/close.png"></image>
|
|
</view>
|
|
<view class="popup_group_item">
|
|
<view class="popup_group_item_label">规格图片</view>
|
|
<view style="width: 120rpx;height: 120rpx;position: relative;">
|
|
<block v-if="item.image">
|
|
<image @click="clk(item.uuid)" style="width: 120rpx;height: 120rpx;border-radius: 10rpx;"
|
|
:src="item.image"></image>
|
|
<view class="close-icon" @click="deleteImage(item)">
|
|
<image style="width: 50%;height: 50%;" src="../static/images/close.png"></image>
|
|
</view>
|
|
</block>
|
|
<view v-else
|
|
style="width: 120rpx;height: 120rpx;display: flex;justify-content: center;align-items: center;border: 1rpx solid #ccc;border-radius: 10rpx;">
|
|
<image @click="clk(item.uuid)" style="height: 60rpx;width: 60rpx;" src="../static/images/creamer.png">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<priceComponent ref="priceRef" :product_id="product_id" :datas="item" :bar_code="item.bar_code"
|
|
@updateCode="updateCode" :show_sku="true">
|
|
</priceComponent>
|
|
</block>
|
|
<!-- <button class="add_btn" @click="addAttrValue">点击添加规格</button> -->
|
|
<view class="submit">
|
|
<button class="btn" @click="submitAttr">确认<text>({{attrValue.length}})</text></button>
|
|
</view>
|
|
<u-modal title="警告" content="删除后数据不可恢复,是否确认删除?" :show="showDelete" show-cancel-button @cancel="showDelete=false"
|
|
@confirm="deleteAttr()"></u-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import priceComponent from "./components/price.vue";
|
|
import avatar from "@/components/yq-avatar/yq-avatar.vue";
|
|
import { TOKENNAME, HTTP_REQUEST_URL } from '@/config/app.js';
|
|
import { Toast } from "../../../libs/uniApi";
|
|
import {
|
|
specificationUpdate,
|
|
attrList,
|
|
specificationAdd
|
|
} from "@/api/product.js"
|
|
export default {
|
|
components: {
|
|
priceComponent,
|
|
avatar
|
|
},
|
|
data() {
|
|
return {
|
|
attrValue: [],
|
|
attr: [],
|
|
attr_mode_list: [], //规格模板列表
|
|
template_name: '点击选择模板', //选中的模板名字
|
|
attr_mode: { // 规格字段模板
|
|
"detail": {},
|
|
"sku": "",
|
|
"stock": 0,
|
|
"image": "",
|
|
"bar_code": "",
|
|
"cost": "",
|
|
"ot_price": "",
|
|
"price": "",
|
|
"volume": "",
|
|
"weight": "",
|
|
},
|
|
product_id: '',
|
|
uuid: '', //选择图片的id
|
|
deleteIndex: '', //删除图片下标
|
|
showDelete: false,
|
|
userInfo: {},
|
|
addAttrType: 1, // 规格类型, 1为添加规格值, 2为添加新规格, 3为添加新模板, 4为保存模板
|
|
attrName: '', // 规格名称
|
|
attrDetail: '', // 规格值
|
|
attrMode: '', //新增模板名称
|
|
changeAttr: 0, // 选中的规格
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.product_id = options.product_id;
|
|
this.attrValue = JSON.parse(uni.getStorageSync('attrValue') || '[]');
|
|
this.attr = JSON.parse(uni.getStorageSync('attr') || '[]');
|
|
this.getOpenerEventChannel().once('updateAttrValue', (e) => {
|
|
if(e.attrValue.length>0) e.attrValue.forEach((item, index) => {
|
|
item.uuid = Date.now() + '-' + Math.floor(Math.random() * 10000);
|
|
})
|
|
this.attrValue = e.attrValue;
|
|
uni.setStorageSync('attrValue', JSON.stringify(e.attrValue));
|
|
this.attr = e.attr;
|
|
uni.setStorageSync('attr', JSON.stringify(e.attr));
|
|
})
|
|
this.userInfo = this.$store.state.app.userInfo;
|
|
if (typeof this.userInfo == 'string') this.userInfo = JSON.parse(this.userInfo);
|
|
this.initAttrModeList();
|
|
},
|
|
methods: {
|
|
updateCode(e) {
|
|
console.log(e);
|
|
},
|
|
// 点击设置规格
|
|
settingSpec() {
|
|
this.$refs.modeRef.open();
|
|
},
|
|
// 添加规格二级
|
|
addSpecTow(index) {
|
|
this.attrDetail = '';
|
|
this.addAttrType = 1;
|
|
this.changeAttr = index;
|
|
this.$refs.inputModeRef.open();
|
|
},
|
|
// 添加规格一级
|
|
addSpecOne() {
|
|
this.attrName = '';
|
|
this.attrDetail = '';
|
|
this.addAttrType = 2;
|
|
this.$refs.inputModeRef.open();
|
|
},
|
|
// 删除规格二级
|
|
deleteAttrTow(i, j) {
|
|
if(this.attr[i].detail.length<=1){
|
|
return this.deleteAttrOne(i); // 当规格的最后一个属性被删除时,直接删除该规格
|
|
}
|
|
this.attrValue = this.attrValue.filter(item=>{
|
|
return !(item.detail[this.attr[i].value] == this.attr[i].detail[j]);
|
|
})
|
|
this.attr[i].detail.splice(j, 1);
|
|
},
|
|
// 删除规格一级
|
|
deleteAttrOne(i) {
|
|
let attr = this.attr[i];
|
|
if(this.attr.length==1){ // 如果只有一个规格, 并且删除这个规格时, 直接清空规格
|
|
this.$set(this, 'attrValue', []);
|
|
this.attr.splice(i, 1);
|
|
return ;
|
|
}
|
|
// 删除多余的规格值
|
|
this.attrValue.forEach(item => {
|
|
let a = item.sku.split(',');
|
|
a = a.filter(e=>e!=item.detail[attr.value]);
|
|
item.sku = a.join(',');
|
|
delete item.detail[attr.value];
|
|
})
|
|
// 过滤掉重复的值
|
|
this.attrValue = Array.from(new Set(this.attrValue.map(item => item.sku))).map(sku => {
|
|
return this.attrValue.find(item => item.sku === sku);
|
|
});
|
|
this.attr.splice(i, 1);
|
|
},
|
|
// 添加商品规格卡片
|
|
addAttrValueCard(){
|
|
let arr = this.computeAttr(this.attr); // 计算出sku的值
|
|
let t = [];
|
|
let keys = this.attr.map(e => { // 获取规格名称
|
|
return e.value;
|
|
})
|
|
let temp = [];
|
|
arr.forEach((sku) => { // 根据sku遍历当前规格数组
|
|
if (this.attrValue.find(e => e.sku == sku)) return;
|
|
else {
|
|
let detail = {};
|
|
let t = sku.split(',');
|
|
keys.forEach((e, i) => { // 设置detail的值
|
|
detail[e] = t[i];
|
|
})
|
|
temp.push(Object.assign({}, this.attr_mode, {
|
|
sku: sku,
|
|
detail: detail,
|
|
uuid: Date.now() + '-' + Math.floor(Math.random() * 10000) // 重设uuid
|
|
})) // 追加数据
|
|
}
|
|
})
|
|
setTimeout(() => {
|
|
this.attrValue = [...this.attrValue, ...temp] // 延后追加数据
|
|
})
|
|
},
|
|
// 关闭添加规格
|
|
closeAddAttr() {
|
|
this.$refs.inputModeRef.close();
|
|
},
|
|
// 获取产品的组合
|
|
computeAttr(arr) {
|
|
let s = [];
|
|
arr.forEach(item => {
|
|
s.push(item.detail);
|
|
})
|
|
let t = this.getCombination(s);
|
|
t = t.map(item => {
|
|
if (typeof item == 'object') {
|
|
return item.join(',')
|
|
} else return item;
|
|
})
|
|
return t;
|
|
},
|
|
// 递归计算
|
|
getCombination(arr) {
|
|
if (arr.length === 1) {
|
|
return arr[0];
|
|
}
|
|
var result = [];
|
|
var first = arr[0];
|
|
var rest = arr.slice(1);
|
|
for (var i = 0; i < first.length; i++) {
|
|
var subResult = this.getCombination(rest);
|
|
for (var j = 0; j < subResult.length; j++) {
|
|
result.push([first[i]].concat(subResult[j]));
|
|
}
|
|
}
|
|
return result;
|
|
},
|
|
// 确认添加规格
|
|
addAttr() {
|
|
this.attrDetail = this.attrDetail.trim();
|
|
this.attrDetail = this.attrDetail.trim();
|
|
if (this.addAttrType == 1) { // 2级
|
|
if (this.attr[this.changeAttr].detail.find(name => name == this.attrDetail)) {
|
|
this.closeAddAttr();
|
|
this.$nextTick(() => {
|
|
Toast('该规格已存在')
|
|
})
|
|
} else {
|
|
this.attr[this.changeAttr].detail.push(this.attrDetail);
|
|
this.closeAddAttr();
|
|
setTimeout(()=>{
|
|
this.addAttrValueCard();
|
|
})
|
|
}
|
|
} else if (this.addAttrType == 2) { // 1级
|
|
if (this.attr.find(item => item.value == this.attrName)) {
|
|
this.closeAddAttr();
|
|
this.$nextTick(() => {
|
|
Toast('该规格已存在')
|
|
})
|
|
} else {
|
|
console.log('添加新规格');
|
|
this.attr.push({
|
|
value: this.attrName,
|
|
detail: [this.attrDetail]
|
|
});
|
|
if(this.attrValue.length){
|
|
this.attrValue.forEach((item) => {
|
|
item.detail[this.attrName] = this.attrDetail;
|
|
item.sku = item.sku + ',' + this.attrDetail;
|
|
})
|
|
}
|
|
else {
|
|
let detail = {};
|
|
detail[this.attrName] = this.attrDetail;
|
|
this.attrValue.push(Object.assign({}, this.attr_mode, {
|
|
sku: this.attrDetail,
|
|
detail: detail,
|
|
uuid: Date.now() + '-' + Math.floor(Math.random() * 10000)
|
|
}))
|
|
}
|
|
this.closeAddAttr();
|
|
}
|
|
} else if (this.addAttrType == 3 || this.addAttrType == 4){
|
|
this.addNewAttrMode();
|
|
}
|
|
},
|
|
// 保存模板
|
|
saveAttrMode() {
|
|
if(this.attr.length<=0)return Toast('不可保存空模板');
|
|
if(this.attr_template_id){
|
|
this.addAttrType = 4;
|
|
let template = this.attr_mode_list.find(e=>e.attr_template_id==this.attr_template_id);
|
|
specificationUpdate(this.userInfo.service.mer_id, this.attr_template_id, {
|
|
attr_template_id: template.attr_template_id,
|
|
mer_id: template.attr_template_id,
|
|
template_name: template.template_name,
|
|
template_value: this.attr
|
|
}).then((res)=>{
|
|
this.$refs.modeRef.close();
|
|
this.$nextTick(()=>{
|
|
Toast('保存成功');
|
|
})
|
|
}).catch(err=>{
|
|
Toast(err)
|
|
})
|
|
}else {
|
|
this.preAddMode(4)
|
|
}
|
|
},
|
|
// 添加新模板
|
|
addNewAttrMode(){
|
|
this.attrMode = this.attrMode.trim(' ');
|
|
if(this.attrMode==''||this.attrMode===undefined||this.attrMode===null){
|
|
return Toast('模板名称不可为空')
|
|
}
|
|
let attr = [];
|
|
if(this.addAttrType==3){
|
|
attr[0] = {};
|
|
attr[0].value = this.attrName;
|
|
attr[0].detail = [];
|
|
attr[0].detail[0] = this.attrDetail;
|
|
}else attr = this.attr;
|
|
specificationAdd(this.userInfo.service.mer_id, {
|
|
template_name: this.attrMode,
|
|
template_value: attr
|
|
}).then((res)=>{
|
|
this.initAttrModeList();
|
|
this.closeAddAttr();
|
|
this.$nextTick(()=>{
|
|
this.$refs.modeRef.close();
|
|
this.$nextTick(()=>{
|
|
Toast('保存成功');
|
|
})
|
|
})
|
|
}).catch(err=>{
|
|
Toast(err)
|
|
})
|
|
},
|
|
// 预添加模板
|
|
preAddMode(type=3){
|
|
this.attrName = '';
|
|
this.attrDetail = '';
|
|
this.attrMode = '';
|
|
this.addAttrType = type;
|
|
this.$refs.inputModeRef.open();
|
|
},
|
|
// 提交数据
|
|
submitAttr() {
|
|
if (this.attrValue.length < 1) return Toast('请至少添加一种规格');
|
|
let flag = true;
|
|
let str = '请填写完整信息';
|
|
this.attrValue.forEach((item, index) => {
|
|
Object.keys(this.$refs.priceRef[index].singleSpecification).forEach(key => {
|
|
item[key] = this.$refs.priceRef[index].singleSpecification[key];
|
|
})
|
|
if (flag) {
|
|
if (item.sku == undefined || item.sku == null || item.sku == '') {
|
|
flag = false;
|
|
str = '规格不能为空';
|
|
}
|
|
else if (!item.price||+item.price<=0) {
|
|
flag = false;
|
|
str = '零售价不能小于等于0';
|
|
}
|
|
else if (!item.stock||+item.stock<=0) {
|
|
flag = false;
|
|
str = '库存不能小于等于0';
|
|
}
|
|
// else if (!item.cost||+item.cost<=0) {
|
|
// flag = false;
|
|
// str = '成本价不能小于等于0';
|
|
// }
|
|
else if ((!item.procure_price||+item.procure_price<=0) && this.userInfo.mer_info.type_code == 'TypeSupplyChain') {
|
|
flag = false;
|
|
str = '批发价不能小于等于0';
|
|
}
|
|
}
|
|
})
|
|
if (!flag) return Toast(str);
|
|
else {
|
|
uni.$emit('updateSpecType', {
|
|
attr: this.attr,
|
|
attrValue: this.attrValue
|
|
});
|
|
uni.navigateBack();
|
|
}
|
|
},
|
|
// 选择图片
|
|
clk(uuid) {
|
|
this.uuid = uuid;
|
|
let avatar = this.$refs.avatar;
|
|
avatar.fChooseImg(1, { selWidth: '350upx', selHeight: '350upx', inner: true });
|
|
},
|
|
doUpload(rsp) {
|
|
// console.log(rsp);
|
|
let that = this
|
|
uni.uploadFile({
|
|
url: HTTP_REQUEST_URL + '/api/upload/image/field',
|
|
filePath: rsp.path,
|
|
name: 'field',
|
|
formData: {
|
|
'filename': rsp.path,
|
|
'name': that.imgName
|
|
},
|
|
header: {
|
|
// #ifdef MP
|
|
"Content-Type": "multipart/form-data",
|
|
// #endif
|
|
[TOKENNAME]: 'Bearer ' + this.$store.state.app.token
|
|
},
|
|
success: (uploadFileRes) => {
|
|
let imgData = JSON.parse(uploadFileRes.data)
|
|
let item = this.attrValue.find(item => item.uuid == this.uuid);
|
|
item.image = imgData.data.path;
|
|
},
|
|
complete(res) {
|
|
// console.log(res)
|
|
}
|
|
});
|
|
},
|
|
getImgName(name) {
|
|
this.imgName = name
|
|
},
|
|
// 删除图片
|
|
deleteImage(item) {
|
|
item.image = '';
|
|
},
|
|
// 添加规格
|
|
addAttrValue() {
|
|
this.attrValue.push(Object.assign({}, this.attr_mode, {
|
|
uuid: Date.now() + '-' + Math.floor(Math.random() * 10000) // 重设uuid
|
|
}))
|
|
},
|
|
// 预删除
|
|
deleteByIndex(index) {
|
|
this.deleteIndex = index;
|
|
this.showDelete = true;
|
|
},
|
|
// 删除规格
|
|
deleteAttr() {
|
|
this.attrValue.splice(this.deleteIndex, 1);
|
|
this.showDelete = false;
|
|
},
|
|
// 初始化规格模板
|
|
initAttrModeList(){
|
|
attrList(this.userInfo.service.mer_id,{
|
|
page: 1,
|
|
limit: 10000
|
|
}).then((res)=>{
|
|
console.log(res);
|
|
this.attr_mode_list = res.data.list;
|
|
})
|
|
},
|
|
changAttrMode(e){
|
|
this.attr_template_id = this.attr_mode_list[e.detail.value].attr_template_id;
|
|
this.template_name = this.attr_mode_list[e.detail.value].template_name;
|
|
this.attr = JSON.parse(JSON.stringify(this.attr_mode_list[e.detail.value].template_value));
|
|
this.$set(this, 'attrValue', []);
|
|
this.addAttrValueCard();
|
|
}
|
|
},
|
|
onBackPress: () => {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import './scss/index.scss';
|
|
|
|
.page{
|
|
padding-bottom: 150rpx;
|
|
}
|
|
|
|
.popup_group {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.popup_group_item {
|
|
border-bottom: 1rpx solid #eee;
|
|
padding-left: 18rpx !important;
|
|
|
|
.close-icon {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: rgba(#000, 0.4);
|
|
color: #fff;
|
|
}
|
|
|
|
}
|
|
|
|
.head_close {
|
|
position: relative;
|
|
|
|
.delete_btn {
|
|
position: absolute;
|
|
top: -15rpx;
|
|
right: -15rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: red;
|
|
color: #fff;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
}
|
|
|
|
.add_btn {
|
|
width: 710rpx;
|
|
margin: 28rpx auto;
|
|
margin-bottom: 160rpx;
|
|
font-size: 30rpx;
|
|
padding: 28rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.submit {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: #fff;
|
|
padding: 20rpx 0;
|
|
|
|
.btn {
|
|
width: 694rpx;
|
|
height: 80rpx;
|
|
margin: 0 auto;
|
|
background: #e93323;
|
|
border-radius: 43px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 15px;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.mode {
|
|
width: 100%;
|
|
background-color: #fff;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
|
|
.line {
|
|
padding: 0 28rpx;
|
|
height: 80rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
|
|
.btn {
|
|
background-color: #f84221;
|
|
color: #fff;
|
|
width: 140rpx;
|
|
height: 50rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.input {
|
|
flex: 1;
|
|
padding: 0 16rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.btn-box {
|
|
height: 80rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-top: 1rpx solid #eee;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
|
|
.mode-ref {
|
|
|
|
.mode-item {
|
|
margin: 20rpx;
|
|
border: 1rpx solid #eee;
|
|
border-radius: 10rpx;
|
|
font-size: 26rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.mode-head {
|
|
padding-top: 20rpx;
|
|
padding-left: 20rpx;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.mode-body {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 20rpx;
|
|
padding-left: 0;
|
|
|
|
.box {
|
|
padding: 10rpx 20rpx;
|
|
border: 1px solid #f84221;
|
|
margin-left: 20rpx;
|
|
border-radius: 10rpx;
|
|
margin-bottom: 10rpx;
|
|
background-color: rgba(#f84221, 0.1);
|
|
color: #f84221;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.mode-body-add {
|
|
border: 1rpx solid #ddd;
|
|
background-color: #fff;
|
|
color: #333;
|
|
}
|
|
}
|
|
|
|
.delete-spec {
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: #eee;
|
|
padding: 5rpx;
|
|
border-radius: 0 0 0 10rpx;
|
|
color: #f84221;
|
|
}
|
|
}
|
|
|
|
.tab {
|
|
padding: 20rpx;
|
|
border-top: 1rpx solid #eee;
|
|
display: flex;
|
|
font-size: 28rpx;
|
|
|
|
.add-btn {
|
|
flex: 1;
|
|
background-color: #f84221;
|
|
color: #fff;
|
|
padding: 10rpx;
|
|
text-align: center;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.save {
|
|
color: #333;
|
|
border: 1rpx solid #ddd;
|
|
padding: 10rpx;
|
|
text-align: center;
|
|
border-radius: 10rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.input-mode {
|
|
width: 694rpx;
|
|
padding: 28rpx;
|
|
font-size: 28rpx;
|
|
border-radius: 10rpx;
|
|
background-color: #fff;
|
|
|
|
.head-tips {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
|
|
.input-box {
|
|
input {
|
|
height: 80rpx;
|
|
margin-bottom: 20rpx;
|
|
font-size: 28rpx;
|
|
border: 1rpx solid #ddd;
|
|
padding: 0 20rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
|
|
.show-btn-box {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.cof,
|
|
.can {
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
width: 300rpx;
|
|
text-align: center;
|
|
border: 1rpx solid #ddd;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.prai {
|
|
background-color: #f84221;
|
|
border: 1rpx solid #f84221;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |