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.
1621 lines
36 KiB
1621 lines
36 KiB
<template>
|
|
<gui-page>
|
|
<view slot="gBody" v-if="goods">
|
|
<view style="position: fixed;top:0;z-index: 99;height: 80rpx;overflow: hidden;width: 100%;">
|
|
<image src="/static/3334.png" style="width: 100%;z-index: 8;margin-top: 0;">
|
|
</image>
|
|
<view
|
|
style="position: fixed;top:0;z-index: 98;padding: 25rpx 20rpx;font-size: 32rpx;font-weight: bold;">
|
|
<text class="gui-icons " style="color: #fff;" @click="fanhui"> 编辑商品</text>
|
|
</view>
|
|
</view>
|
|
<view style="position: relative;">
|
|
<view style="width: 100%;height: 80rpx;background-color: #fff;">
|
|
</view>
|
|
<view style="padding: 15rpx;">
|
|
<form @submit="submit">
|
|
<view style="margin: 20rpx 0;">
|
|
<text class="gui-h6 gui-bold">商品信息</text>
|
|
</view>
|
|
<view class="gui-padding" style="background-color: #fff;border-radius: 10rpx;">
|
|
<view class="gui-form-item gui-border-b">
|
|
<text class="gui-form-label"><text style="color: red;">*</text>商品名称</text>
|
|
<view class="gui-form-body">
|
|
<input type="text" class="gui-form-input" name="goods_name"
|
|
v-model="goods.goods_name" style="text-align: right;" placeholder="请输入商品名称" />
|
|
</view>
|
|
</view>
|
|
<view class="gui-form-item gui-border-b">
|
|
<text class="gui-form-label"><text style="color: red;">*</text>商品分类</text>
|
|
<view class="gui-form-body" style="text-align: right;">
|
|
<picker mode="selector" range-key="name" :range="CategoryList"
|
|
@change="pickerCategory">
|
|
<text class="gui-text gui-secondary-text"
|
|
v-if="CategoryIndex > -1">{{CategoryList[CategoryIndex].name}}</text>
|
|
<text class="gui-text gui-secondary-text" v-else>请选择商品分类</text>
|
|
</picker>
|
|
</view>
|
|
<text class="gui-form-icon gui-icons gui-text-center gui-color-gray"></text>
|
|
</view>
|
|
<view class="gui-form-item gui-border-b">
|
|
<text class="gui-form-label"><text style="color: red;">*</text>商品价格</text>
|
|
<view class="gui-form-body">
|
|
<input type="number" class="gui-form-input" name="goods_price"
|
|
v-model="goods.goods_price_min" style="text-align: right;"
|
|
placeholder="请输入商品价格" />
|
|
</view>
|
|
</view>
|
|
<view class="gui-form-item gui-border-b">
|
|
<text class="gui-form-label" style="width: 200rpx;">商品划线价格</text>
|
|
<view class="gui-form-body">
|
|
<input type="number" class="gui-form-input" name="line_price"
|
|
v-model="goods.line_price_min" style="text-align: right;"
|
|
placeholder="请输入商品划线价格" />
|
|
</view>
|
|
</view>
|
|
<view class="gui-form-item gui-border-b">
|
|
<text class="gui-form-label"><text style="color: red;">*</text>库存数量</text>
|
|
<view class="gui-form-body">
|
|
<input type="number" class="gui-form-input" name="stock_num"
|
|
v-model="goods.stock_total" style="text-align: right;" placeholder="请输入库存数量" />
|
|
</view>
|
|
</view>
|
|
<view class="gui-form-item">
|
|
<text class="gui-form-label"><text style="color: red;">*</text>商品主图</text>
|
|
</view>
|
|
<view class="image-list">
|
|
<view class="image-preview" v-for="(image, imageIndex) in formData[0].imageList"
|
|
:key="imageIndex">
|
|
<text class="image-delete iconfont icon-shanchu"
|
|
@click="deleteImage(0, imageIndex)"></text>
|
|
<image class="image" mode="aspectFill" :src="image.path"></image>
|
|
</view>
|
|
<view v-if="!formData[0].imageList || formData[0].imageList.length < maxImageLength"
|
|
class="image-picker" @click="chooseImage(0)">
|
|
<text class="choose-icon iconfont icon-camera"></text>
|
|
<text class="choose-text">上传图片</text>
|
|
</view>
|
|
</view>
|
|
<view style="height: 20rpx;"></view>
|
|
<view class="gui-form-item gui-border-b">
|
|
<text class="gui-form-label" style="width: 200rpx;"><text
|
|
style="color: red;">*</text>活动结束时间</text>
|
|
<view class="gui-form-body" style="text-align: right;">
|
|
<gui-datetime @confirm="confirm1" :value="demo1Val" @change="chang1"
|
|
:isSecond="false" :isMinute="false" :isTime="false">
|
|
{{demo1Val ? demo1Val:'请选择活动结束时间'}}
|
|
</gui-datetime>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view>
|
|
<view class="form-box">
|
|
<view class="form-item2">
|
|
<view class="f1">设置套餐</view>
|
|
<view class="flex-col">
|
|
<view class="ggtitle">
|
|
<view class="t1">套餐分组</view>
|
|
<view class="t2">套餐名称</view>
|
|
</view>
|
|
<view class="ggcontent" v-for="(gg,index) in guigedata" :key="index">
|
|
<view class="t1" @tap="delgggroupname" :data-index="index"
|
|
:data-title="gg.title">
|
|
{{gg.title}}
|
|
<!-- <image class="edit" src="/static/img/edit2.png" /> -->
|
|
</view>
|
|
<view class="t2">
|
|
<view class="ggname" v-for="(ggitem,index2) in gg.items" :key="index2"
|
|
@tap="delggname" :data-index="index" :data-index2="index2"
|
|
:data-title="ggitem.title" :data-k="ggitem.k">{{ggitem.title}}
|
|
<image class="close" src="/static/img/ico-del.png" />
|
|
</view>
|
|
<view class="ggnameadd" @tap="addggname" :data-index="index">+</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="ggcontent">
|
|
<view class="ggadd" @tap="addgggroupname">添加分组</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 规格列表 -->
|
|
<view class="form-box" v-for="(item,index) in gglist" :key="index">
|
|
<view class="form-item" style="height:80rpx;line-height:80rpx">
|
|
<view class="f1">套餐</view>
|
|
<view class="f2" style="font-weight:bold">{{item.name}}</view>
|
|
</view>
|
|
<view class="form-item" style="height:80rpx;line-height:80rpx">
|
|
<view class="f1">商品价（元）</view>
|
|
<view class="f2"><input type="text" @input="gglistInput" :data-index="index"
|
|
data-field="goods_price" :name="'market_price['+index+']'"
|
|
:value="item.market_price" placeholder="请填写商品价"
|
|
placeholder-style="color:#888"></input></view>
|
|
</view>
|
|
<view class="form-item" style="height:80rpx;line-height:80rpx">
|
|
<view class="f1">划线价（元）</view>
|
|
<view class="f2"><input type="text" @input="gglistInput" :data-index="index"
|
|
data-field="cost_price" :name="'line_price['+index+']'"
|
|
:value="item.cost_price" placeholder="请填写划线价"
|
|
placeholder-style="color:#888"></input></view>
|
|
</view>
|
|
|
|
<view class="form-item" style="height:80rpx;line-height:80rpx">
|
|
<view class="f1">库存</view>
|
|
<view class="f2"><input type="text" @input="gglistInput" :data-index="index"
|
|
data-field="stock" :name="'stock['+index+']'" :value="item.stock"
|
|
placeholder="请填写库存" placeholder-style="color:#888"></input></view>
|
|
</view>
|
|
|
|
<view class="form-item2">
|
|
<view class="f1" style="display: flex;padding-bottom: 20rpx;">
|
|
<view>套餐内容</view>
|
|
<view class="tancanadd" @click="showTancanPop(index)" :data-index="index">+
|
|
</view>
|
|
</view>
|
|
|
|
<view>
|
|
<view style="padding-bottom: 120rpx;">
|
|
|
|
|
|
|
|
|
|
<view class="table" v-for="(titem,tindex) in item.taocanList">
|
|
<view class="tr">
|
|
<view class="th b-r"><text class="col-mm">*</text>名称</view>
|
|
<view class="th b-r"><text class="col-mm">*</text>数量</view>
|
|
<view class="th b-r"><text class="col-mm">*</text>单位姓名</view>
|
|
<view class="th"><text class="col-mm">*</text>价格</view>
|
|
</view>
|
|
<view class="tr2">
|
|
<view class="td b-r"><text
|
|
class="twoline-hide">{{titem.name}}</text></view>
|
|
<view class="td b-r"><text
|
|
class="twoline-hide">{{titem.number}}</text>
|
|
</view>
|
|
<view class="td b-r"><text
|
|
class="twoline-hide">{{titem.unit}}</text>
|
|
</view>
|
|
<view class="td"><text class="twoline-hide">{{titem.price}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="tr">
|
|
|
|
<view class="th b-r">操作</view>
|
|
|
|
</view>
|
|
<view class="tr2">
|
|
|
|
<view class="td b-r">
|
|
<view class="edit" @click="editTaocan(tindex,index)">编辑</view>
|
|
<view class="delete" @click="deleteTaocan(tindex,index)">删除
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<view style="margin: 20rpx 0 "
|
|
class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-space-between">
|
|
<text class="gui-h6 gui-bold"><text style="color: red;">*</text>购买须知</text>
|
|
<text style="font-size: 24rpx;color: #9E1A91 ;" @click="bianjiqi('gmxz')">编辑购买须知</text>
|
|
</view>
|
|
<view class="gui-padding"
|
|
style="background-color: #fff;border-radius: 10rpx;min-height: 200rpx;max-height: 400rpx;overflow: auto;">
|
|
<mp-html :content="gmxz" />
|
|
</view>
|
|
<view style="margin: 20rpx 0 "
|
|
class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-space-between">
|
|
<text class="gui-h6 gui-bold"><text style="color: red;">*</text>商品详情</text>
|
|
<text style="font-size: 24rpx;color: #9E1A91 ;" @click="bianjiqi('spxq')">编辑商品详情</text>
|
|
</view>
|
|
<view class="gui-padding"
|
|
style="background-color: #fff;border-radius: 10rpx;min-height: 200rpx;max-height: 400rpx;overflow: auto;">
|
|
<mp-html :content="spxq" />
|
|
</view>
|
|
|
|
<view class="gui-margin-top" style="padding: 0 120rpx;">
|
|
<gui-radio @change="radioChange" :checked="radiochecked">
|
|
<text class="gui-text " style="color: #9e9e9e;">我已阅读并同意<text style="color: #b53190;"
|
|
@click="onagreement">《商家入驻协议》</text></text>
|
|
</gui-radio>
|
|
</view>
|
|
<view class=" gui-flex gui-rows gui-nowrap gui-justify-content-end">
|
|
<button type="default" class="gui-button gui-bg-blue"
|
|
style="width: 90%;text-align: center;padding: 0rpx 0;text-align: center;background: linear-gradient(to bottom, #90178b, #590b6e);margin: 80rpx auto 0;color: #fff;border-radius: 40rpx;"
|
|
formType="submit">
|
|
<text class="gui-icons gui-color-white gui-button-text">提交</text>
|
|
</button>
|
|
|
|
</view>
|
|
<view style="height:80rpx;"></view>
|
|
</form>
|
|
</view>
|
|
<gui-modal ref="guimodal" width="660rpx" :isCloseBtn="false" title="商家协议" :canCloseByShade='false'>
|
|
<template v-slot:content>
|
|
<scroll-view scroll-y :style="{height:contentHeight+'px'}"
|
|
class="gui-bg-gray gui-dark-bg-level-2">
|
|
<mp-html :content="ArticleDetail.content" />
|
|
</scroll-view>
|
|
</template>
|
|
<template v-slot:btns>
|
|
<view class="gui-flex gui-row gui-space-between">
|
|
<view hover-class="gui-tap" class="modal-btns gui-flex1">
|
|
<text class="modal-btns gui-primary-color" @tap="confirm">同意</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</gui-modal>
|
|
</view>
|
|
<!-- 拼团规则弹窗 -->
|
|
<u-modal v-model="showName" title="" show-cancel-button @confirm="setggname">
|
|
<scroll-view :scroll-y="true">
|
|
<view class="pops-content">
|
|
<input type="text" placeholder="输入规格名称" v-model="guige_name" style="padding: 20rpx ;" />
|
|
</view>
|
|
</scroll-view>
|
|
</u-modal>
|
|
|
|
|
|
<u-popup v-model="taocanShow" mode="center" width="90%" border-radius="14">
|
|
<view class="p-title">套餐内容</view>
|
|
<view class="info">
|
|
<view class="form-wrapper">
|
|
<u-form ref="uForm" label-width="180rpx">
|
|
<u-form-item label="名称" required>
|
|
<u-input v-model="formDataTaocan.name" placeholder="请输入名称" />
|
|
</u-form-item>
|
|
<u-form-item label="数量" required>
|
|
<u-input v-model="formDataTaocan.number" type="number" placeholder="请输入数量" />
|
|
|
|
</u-form-item>
|
|
<u-form-item label="单位" required>
|
|
<u-input v-model="formDataTaocan.unit" placeholder="请输入单位" />
|
|
|
|
</u-form-item>
|
|
<u-form-item label="价格" required>
|
|
<u-input v-model="formDataTaocan.price" placeholder="请输入价格" />
|
|
|
|
</u-form-item>
|
|
|
|
|
|
|
|
|
|
</u-form>
|
|
</view>
|
|
|
|
<!-- 操作按钮 -->
|
|
<view class="footer2">
|
|
<view class="btn-wrapper">
|
|
<view class="btn-item btn-item-main" @click="queuPi(formDataTaocan.index)">确认</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</u-popup>
|
|
|
|
</view>
|
|
|
|
</gui-page>
|
|
|
|
</template>
|
|
<script>
|
|
var graceJS = require('@/GraceUI5/js/grace.js');
|
|
import * as ArticleApi from '@/api/article'
|
|
import * as UploadApi from '@/api/upload'
|
|
import * as GoodsApi from '@/api/goods/index.js'
|
|
import * as CategoryApi from '@/api/category'
|
|
const maxImageLength = 6
|
|
export default {
|
|
|
|
data() {
|
|
return {
|
|
taocanIndex: 0,
|
|
taocanShow: false,
|
|
glistshow: false,
|
|
ggname: '',
|
|
ggindex: 0,
|
|
ggindex2: 0,
|
|
oldgglist: [],
|
|
gglist: [],
|
|
showName: false,
|
|
guigedata: [{
|
|
title: '套餐',
|
|
items: []
|
|
}],
|
|
contentHeight: 300,
|
|
// 表单数据
|
|
formData: [{
|
|
imageList: [],
|
|
uploaded: []
|
|
}],
|
|
formDataTaocan: [{
|
|
name: '',
|
|
number: '',
|
|
unit: '',
|
|
price: '',
|
|
|
|
}],
|
|
// 最大图片数量
|
|
maxImageLength,
|
|
textareaVal: '', // 文本内容
|
|
maxWords: 100, // 最多字符数
|
|
textareatimer: null, // 延迟记录
|
|
radiochecked: false,
|
|
ArticleDetail: '',
|
|
CategoryList: '',
|
|
CategoryIndex: '-1',
|
|
spxq: '',
|
|
gmxz: '',
|
|
demo1Val: '',
|
|
disabled: false,
|
|
goodsId: 0,
|
|
goods: ''
|
|
}
|
|
},
|
|
watch: {
|
|
textareaVal: function(val) {
|
|
if (this.textareatimer != null) {
|
|
clearTimeout(this.textareatimer);
|
|
}
|
|
this.textareatimer = setTimeout(() => {
|
|
if (val.length > this.maxWords) {
|
|
this.textareaVal = this.textareaVal.substr(0, this.maxWords);
|
|
}
|
|
}, 200);
|
|
}
|
|
},
|
|
mounted: function() {
|
|
var systemInfo = graceJS.system();
|
|
this.contentHeight = systemInfo.windowHeight * 0.65;
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad(options) {
|
|
this.goodsId = options.goodsId
|
|
this.getArticleDetail()
|
|
this.getCategory()
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
showTancanPop(index) {
|
|
this.taocanIndex = index
|
|
this.formDataTaocan = {}
|
|
this.taocanShow = true
|
|
},
|
|
|
|
queuPi(index) {
|
|
let app = this
|
|
//var index = this.taocanIndex
|
|
if (app.formDataTaocan.name == '') {
|
|
uni.showToast({
|
|
title: '请输入名称',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (app.formDataTaocan.number == '') {
|
|
uni.showToast({
|
|
title: '请输入数量',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (app.formDataTaocan.unit == '') {
|
|
uni.showToast({
|
|
title: '请输入单位',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (app.formDataTaocan.price == '') {
|
|
uni.showToast({
|
|
title: '请输入价格',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
app.gglist.forEach((item, key) => {
|
|
|
|
var taocanList = item.taocanList ? item.taocanList : []
|
|
|
|
if (index >= 0) {
|
|
|
|
var newArr = []
|
|
taocanList.forEach((item, key) => {
|
|
if (key == index) {
|
|
newArr.push(app.formDataTaocan)
|
|
} else {
|
|
newArr.push(item)
|
|
}
|
|
|
|
})
|
|
taocanList= newArr
|
|
console.log(index)
|
|
} else {
|
|
taocanList = taocanList.concat(app.formDataTaocan)
|
|
}
|
|
|
|
item.taocanList=taocanList
|
|
|
|
|
|
|
|
|
|
// if (key == index) {
|
|
// var taocanList = item.taocanList ? item.taocanList : []
|
|
// taocanList.push(app.formDataTaocan)
|
|
// item.taocanList = taocanList
|
|
// }
|
|
|
|
return item
|
|
|
|
})
|
|
|
|
|
|
|
|
console.log(app.gglist)
|
|
|
|
|
|
|
|
|
|
app.taocanShow = false
|
|
|
|
},
|
|
|
|
|
|
editTaocan(index,gindex) {
|
|
let app=this
|
|
app.taocanShow = true
|
|
|
|
app.gglist.forEach((item, key) => {
|
|
|
|
if (key == gindex) {
|
|
app.formDataTaocan = item.taocanList[index]
|
|
app.formDataTaocan.index = index
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
},
|
|
deleteTaocan(index, gindex) {
|
|
let app = this
|
|
|
|
|
|
// app.gglist.forEach((item, key) => {
|
|
// if(item.taocanList){
|
|
// if (key == gindex) {
|
|
// item.taocanList.splice(index,1)
|
|
// }
|
|
// }
|
|
// return item
|
|
// })
|
|
|
|
var gglist = app.gglist
|
|
var newgg = []
|
|
gglist.forEach((item, key) => {
|
|
var taocanList = item.taocanList
|
|
var newArr = []
|
|
if (taocanList) {
|
|
taocanList.forEach((dd, dkey) => {
|
|
if (key == gindex) {
|
|
|
|
} else {
|
|
newArr.push(dd)
|
|
}
|
|
})
|
|
|
|
item.taocanList = newArr
|
|
}
|
|
|
|
|
|
newgg.push(item)
|
|
|
|
})
|
|
|
|
app.gglist = newgg
|
|
|
|
console.log(app.gglist)
|
|
|
|
|
|
},
|
|
|
|
addggname: function(e) {
|
|
var ggindex = e.currentTarget.dataset.index;
|
|
this.guige_name = '';
|
|
this.ggindex = ggindex;
|
|
this.ggindex2 = -1;
|
|
this.showName = true;
|
|
},
|
|
delggname: function(e) {
|
|
var that = this;
|
|
var ggindex = e.currentTarget.dataset.index;
|
|
var ggindex2 = e.currentTarget.dataset.index2;
|
|
var k = e.currentTarget.dataset.k;
|
|
var title = e.currentTarget.dataset.title;
|
|
uni.showActionSheet({
|
|
itemList: ['修改', '删除'],
|
|
success: function(res) {
|
|
if (res.tapIndex >= 0) {
|
|
if (res.tapIndex == 0) { //修改规格项
|
|
that.ggname = title;
|
|
that.ggindex = ggindex;
|
|
that.ggindex2 = ggindex2;
|
|
that.$refs.dialogInput.open();
|
|
return;
|
|
} else if (res.tapIndex == 1) { //删除规格项
|
|
var guigedata = that.guigedata;
|
|
var newguigedata = [];
|
|
for (var i in guigedata) {
|
|
if (i == ggindex) {
|
|
var newitems = [];
|
|
var index2 = 0;
|
|
for (var j in guigedata[i].items) {
|
|
if (j != ggindex2) {
|
|
newitems.push({
|
|
k: index2,
|
|
title: guigedata[i].items[j].title
|
|
});
|
|
index2++;
|
|
}
|
|
}
|
|
guigedata[i].items = newitems;
|
|
}
|
|
newguigedata.push(guigedata[i]);
|
|
}
|
|
that.guigedata = newguigedata;
|
|
console.log(newguigedata)
|
|
that.getgglist();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
setggname: function(done, val) {
|
|
var val = this.guige_name
|
|
var guigedata = this.guigedata;
|
|
var ggindex = this.ggindex;
|
|
var ggindex2 = this.ggindex2;
|
|
if (ggindex2 == -1) { //新增规格名称
|
|
var items = guigedata[ggindex].items;
|
|
ggindex2 = items.length;
|
|
items.push({
|
|
k: ggindex2,
|
|
title: val
|
|
});
|
|
guigedata[ggindex].items = items;
|
|
this.guigedata = guigedata;
|
|
} else { //修改规格名称
|
|
guigedata[ggindex].items[ggindex2].title = val;
|
|
this.guigedata = guigedata;
|
|
}
|
|
//this.$refs.dialogInput.close();
|
|
this.getgglist();
|
|
},
|
|
getgglist: function() {
|
|
var oldgglist = this.oldgglist;
|
|
var guigedata = this.guigedata;
|
|
var gglist = [];
|
|
var len = guigedata.length;
|
|
var newlen = 1;
|
|
var h = new Array(len);
|
|
for (var i = 0; i < len; i++) {
|
|
var itemlen = guigedata[i].items.length;
|
|
if (itemlen <= 0) {
|
|
return;
|
|
};
|
|
newlen *= itemlen;
|
|
h[i] = new Array(itemlen);
|
|
for (var j = 0; j < itemlen; j++) {
|
|
h[i][j] = {
|
|
k: guigedata[i].items[j].k,
|
|
title: guigedata[i].items[j].title
|
|
};
|
|
}
|
|
}
|
|
|
|
//排列组合算法
|
|
var arr = h; //原二维数组
|
|
var sarr = [
|
|
[]
|
|
]; //排列组合后的数组
|
|
for (var i = 0; i < arr.length; i++) {
|
|
var tarr = [];
|
|
for (var j = 0; j < sarr.length; j++)
|
|
for (var k = 0; k < arr[i].length; k++) {
|
|
tarr.push(sarr[j].concat(arr[i][k]));
|
|
}
|
|
sarr = tarr;
|
|
}
|
|
console.log(sarr);
|
|
console.log(' ------ ');
|
|
|
|
for (var i = 0; i < sarr.length; i++) {
|
|
var ks = [];
|
|
var titles = [];
|
|
for (var j = 0; j < sarr[i].length; j++) {
|
|
ks.push(sarr[i][j].k);
|
|
titles.push(sarr[i][j].title);
|
|
}
|
|
ks = ks.join(',');
|
|
titles = titles.join(',');
|
|
//console.log(ks);
|
|
//console.log(titles);
|
|
if (typeof(oldgglist[ks]) != 'undefined') {
|
|
var val = oldgglist[ks];
|
|
} else {
|
|
var val = {
|
|
ks: ks,
|
|
name: titles,
|
|
goods_price: '',
|
|
line_price: '',
|
|
sell_price: '',
|
|
weight: '100',
|
|
stock: '1000',
|
|
pic: '',
|
|
givescore: '0',
|
|
lvprice_data: null
|
|
};
|
|
}
|
|
gglist.push(val);
|
|
}
|
|
this.gglist = gglist;
|
|
console.log(555);
|
|
console.log(gglist);
|
|
},
|
|
getGoods() {
|
|
let _this = this
|
|
GoodsApi.shopdetail(_this.goodsId)
|
|
.then(result => {
|
|
_this.goods = result.data.detail
|
|
_this.spxq = _this.goods.content
|
|
_this.gmxz = _this.goods.contents
|
|
_this.demo1Val = _this.goods.become_time
|
|
|
|
|
|
_this.CategoryList.forEach(function(element, index) {
|
|
if (element.category_id == _this.goods.category_id) {
|
|
_this.CategoryIndex = index
|
|
}
|
|
});
|
|
|
|
_this.goods.goods_images.forEach(function(element, index) {
|
|
uni.downloadFile({
|
|
url: element.preview_url, // 图片的网络地址
|
|
success: (res) => {
|
|
console.log(res)
|
|
if (res.statusCode === 200) {
|
|
_this.formData[0]['imageList'].push({
|
|
path: res.tempFilePath
|
|
})
|
|
}
|
|
},
|
|
});
|
|
// _this.formData[0]['imageList'].push({
|
|
// path: element.preview_url
|
|
// })
|
|
// _this.formData[0]['uploaded'].push(element.file_id)
|
|
});
|
|
|
|
})
|
|
},
|
|
submit: function(e) {
|
|
const app = this
|
|
var fromData = e.detail.value;
|
|
fromData.category_id = app.CategoryList[app.CategoryIndex].category_id
|
|
fromData.become_time = app.demo1Val
|
|
fromData.content = app.spxq
|
|
fromData.contents = app.gmxz
|
|
if (!fromData['goods_name']) {
|
|
app.$toast('请填写商品名称')
|
|
return false
|
|
}
|
|
if (app.CategoryIndex < 0) {
|
|
app.$toast('请选择商品分类')
|
|
return false
|
|
}
|
|
if (!fromData['goods_price']) {
|
|
app.$toast('请填写商品价格')
|
|
return false
|
|
}
|
|
if (!fromData['stock_num']) {
|
|
app.$toast('请填写库存数量')
|
|
return false
|
|
}
|
|
if (!app.demo1Val) {
|
|
app.$toast('请选择活动结束时间')
|
|
return false
|
|
}
|
|
if (!app.gmxz) {
|
|
app.$toast('请编辑购买须知')
|
|
return false
|
|
}
|
|
if (!app.spxq) {
|
|
app.$toast('请编辑商品详情')
|
|
return false
|
|
}
|
|
if (!app.radiochecked) {
|
|
app.$toast('请阅读协议')
|
|
return false
|
|
}
|
|
const imagesLength = app.getImagesLength()
|
|
if (imagesLength == 0) {
|
|
app.$toast('请上传商品图片')
|
|
return false
|
|
}
|
|
// 判断是否重复提交
|
|
if (app.disabled === true) return false
|
|
// 按钮禁用
|
|
app.disabled = true
|
|
// 判断是否需要上传图片
|
|
|
|
if (imagesLength > 0) {
|
|
app.uploadFile()
|
|
.then(() => {
|
|
console.log('then')
|
|
app.onSubmit(fromData)
|
|
})
|
|
.catch(err => {
|
|
console.log('catch')
|
|
app.disabled = false
|
|
if (err.statusCode !== 0) {
|
|
app.$toast(err.errMsg)
|
|
}
|
|
console.log('err', err)
|
|
})
|
|
} else {
|
|
app.onSubmit(fromData)
|
|
}
|
|
},
|
|
getImagesLength() {
|
|
const {
|
|
formData
|
|
} = this
|
|
let imagesLength = 0
|
|
formData.forEach(item => {
|
|
imagesLength += item.imageList.length
|
|
})
|
|
return imagesLength
|
|
},
|
|
|
|
// 提交到后端
|
|
onSubmit(fromData) {
|
|
const app = this
|
|
fromData.uploaded = this.formData[0].uploaded
|
|
GoodsApi.add(fromData)
|
|
.then(result => {
|
|
app.$toast(result.message)
|
|
setTimeout(() => {
|
|
app.disabled = false
|
|
uni.navigateBack()
|
|
}, 1500)
|
|
})
|
|
.catch(err => app.disabled = false)
|
|
},
|
|
|
|
// 上传图片
|
|
uploadFile() {
|
|
const app = this
|
|
const {
|
|
formData
|
|
} = app
|
|
// 整理上传文件路径
|
|
const files = []
|
|
formData.forEach((item, index) => {
|
|
if (item.imageList.length) {
|
|
const images = item.imageList.map(image => image)
|
|
files.push({
|
|
formDataIndex: index,
|
|
images
|
|
})
|
|
}
|
|
})
|
|
// 批量上传
|
|
return new Promise((resolve, reject) => {
|
|
Promise.all(files.map((file, index) => {
|
|
return new Promise((resolve, reject) => {
|
|
UploadApi.image(file.images)
|
|
.then(fileIds => {
|
|
app.formData[index].uploaded = fileIds
|
|
resolve(fileIds)
|
|
})
|
|
.catch(reject)
|
|
})
|
|
}))
|
|
.then(resolve, reject)
|
|
})
|
|
},
|
|
|
|
chang1: function(e) {
|
|
console.log(e);
|
|
},
|
|
confirm1: function(res) {
|
|
this.demo1Val = res[0] + '-' + res[1] + '-' + res[2];
|
|
},
|
|
pickerCategory(e) {
|
|
this.CategoryIndex = e.detail.value;
|
|
},
|
|
getCategory() {
|
|
CategoryApi.shoplist()
|
|
.then(result => {
|
|
this.CategoryList = result.data.list
|
|
this.getGoods()
|
|
})
|
|
},
|
|
bianjiqi(type) {
|
|
uni.navigateTo({
|
|
url: './editor?type=' + type + '&goodsId=' + this.goods.goods_id
|
|
})
|
|
},
|
|
confirm: function() {
|
|
// 客户点击确认按钮后的逻辑请在此处实现
|
|
this.$refs.guimodal.close();
|
|
this.radiochecked = true
|
|
},
|
|
getArticleDetail() {
|
|
const app = this
|
|
ArticleApi.detail(3)
|
|
.then(result => {
|
|
app.ArticleDetail = result.data.detail
|
|
})
|
|
|
|
|
|
},
|
|
radioChange(e) {
|
|
this.radiochecked = !this.radiochecked
|
|
},
|
|
onagreement() {
|
|
this.$refs.guimodal.open();
|
|
},
|
|
// 选择图片
|
|
chooseImage(index) {
|
|
const app = this
|
|
const oldImageList = app.formData[0].imageList
|
|
// 选择图片
|
|
uni.chooseImage({
|
|
count: maxImageLength - oldImageList.length,
|
|
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
|
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
|
success({
|
|
tempFiles
|
|
}) {
|
|
// tempFiles = [{path:'xxx', size:100}]
|
|
console.log(tempFiles)
|
|
app.formData[0].imageList = oldImageList.concat(tempFiles)
|
|
}
|
|
});
|
|
},
|
|
|
|
// 删除图片
|
|
deleteImage(index, imageIndex) {
|
|
this.formData[index].imageList.splice(imageIndex, 1)
|
|
},
|
|
|
|
fanhui() {
|
|
uni.navigateBack()
|
|
},
|
|
|
|
},
|
|
|
|
|
|
}
|
|
</script>
|
|
<style>
|
|
radio {
|
|
transform: scale(0.6);
|
|
}
|
|
|
|
checkbox {
|
|
transform: scale(0.6);
|
|
}
|
|
|
|
.info {
|
|
padding-bottom: 50rpx;
|
|
}
|
|
|
|
.p-title {
|
|
|
|
text-align: center;
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.footer2 {
|
|
|
|
width: 50%;
|
|
margin-left: 25%;
|
|
margin-top: 80rpx;
|
|
|
|
.btn-wrapper {
|
|
height: 100%;
|
|
// display: flex;
|
|
// align-items: center;
|
|
|
|
}
|
|
|
|
.btn-item {
|
|
|
|
font-size: 36rpx;
|
|
height: 76rpx;
|
|
color: #fff;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
.btn-item-main {
|
|
background: #0076DA;
|
|
color: #fff;
|
|
|
|
// 禁用按钮
|
|
&.disabled {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.form-wrapper {
|
|
margin-top: 10rpx;
|
|
padding: 0 40rpx;
|
|
width: 100%;
|
|
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
|
|
border-radius: 16rpx;
|
|
background: #fff;
|
|
}
|
|
|
|
.form-box {
|
|
padding: 2rpx 24rpx 0 24rpx;
|
|
background: #fff;
|
|
margin: 24rpx 0;
|
|
border-radius: 10rpx
|
|
}
|
|
|
|
.form-item2 {
|
|
min-height: 100rpx;
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.form-item {
|
|
line-height: 100rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #eee
|
|
}
|
|
|
|
.form-item .f1 {
|
|
color: #222;
|
|
width: 200rpx;
|
|
flex-shrink: 0
|
|
}
|
|
|
|
.form-item .f2 {
|
|
display: flex;
|
|
align-items: center
|
|
}
|
|
|
|
.form-box .form-item:last-child {
|
|
border: none
|
|
}
|
|
|
|
.form-box .flex-col {
|
|
padding-bottom: 20rpx
|
|
}
|
|
|
|
.form-item input {
|
|
width: 100%;
|
|
border: none;
|
|
color: #111;
|
|
font-size: 28rpx;
|
|
text-align: right
|
|
}
|
|
|
|
.form-item textarea {
|
|
width: 100%;
|
|
min-height: 200rpx;
|
|
padding: 20rpx 0;
|
|
border: none;
|
|
}
|
|
|
|
.form-item .upload_pic {
|
|
margin: 50rpx 0;
|
|
background: #F3F3F3;
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
text-align: center
|
|
}
|
|
|
|
.form-item .upload_pic image {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.savebtn {
|
|
width: 90%;
|
|
height: 96rpx;
|
|
line-height: 96rpx;
|
|
text-align: center;
|
|
border-radius: 48rpx;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
margin: 0 5%;
|
|
margin-top: 60rpx;
|
|
border: none;
|
|
}
|
|
|
|
.ggtitle {
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
color: #111;
|
|
font-weight: bold;
|
|
font-size: 26rpx;
|
|
display: flex;
|
|
border-bottom: 1px solid #f4f4f4
|
|
}
|
|
|
|
.ggtitle .t1 {
|
|
width: 200rpx;
|
|
}
|
|
|
|
.ggcontent {
|
|
line-height: 60rpx;
|
|
margin-top: 10rpx;
|
|
color: #111;
|
|
font-size: 26rpx;
|
|
display: flex
|
|
}
|
|
|
|
.ggcontent .t1 {
|
|
width: 200rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0
|
|
}
|
|
|
|
.ggcontent .t1 .edit {
|
|
width: 40rpx;
|
|
height: 40rpx
|
|
}
|
|
|
|
.ggcontent .t2 {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center
|
|
}
|
|
|
|
.ggcontent .ggname {
|
|
background: #f55;
|
|
color: #fff;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
padding: 0 20rpx;
|
|
border-radius: 8rpx;
|
|
margin-right: 20rpx;
|
|
margin-bottom: 10rpx;
|
|
font-size: 24rpx;
|
|
position: relative
|
|
}
|
|
|
|
.ggcontent .ggname .close {
|
|
position: absolute;
|
|
top: -14rpx;
|
|
right: -14rpx;
|
|
background: #fff;
|
|
height: 28rpx;
|
|
width: 28rpx;
|
|
border-radius: 14rpx
|
|
}
|
|
|
|
.ggcontent .ggnameadd {
|
|
background: #ccc;
|
|
font-size: 36rpx;
|
|
color: #fff;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
padding: 0 20rpx;
|
|
border-radius: 8rpx;
|
|
margin-right: 20rpx;
|
|
margin-left: 10rpx;
|
|
position: relative
|
|
}
|
|
|
|
.tancanadd {
|
|
background: #ccc;
|
|
font-size: 36rpx;
|
|
color: #fff;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
padding: 0 20rpx;
|
|
border-radius: 8rpx;
|
|
margin-right: 20rpx;
|
|
margin-left: 10rpx;
|
|
|
|
}
|
|
|
|
.ggcontent .ggadd {
|
|
font-size: 26rpx;
|
|
color: #558
|
|
}
|
|
|
|
.ggbox {
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
|
|
.layui-imgbox {
|
|
margin-right: 16rpx;
|
|
margin-bottom: 10rpx;
|
|
font-size: 24rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.layui-imgbox-close {
|
|
position: absolute;
|
|
display: block;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
right: -16rpx;
|
|
top: -16rpx;
|
|
z-index: 5;
|
|
color: #999;
|
|
font-size: 32rpx;
|
|
background: #fff;
|
|
border-radius: 50%
|
|
}
|
|
|
|
.layui-imgbox-close image {
|
|
width: 100%;
|
|
height: 100%
|
|
}
|
|
|
|
.layui-imgbox-img {
|
|
display: block;
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
padding: 2px;
|
|
border: #d3d3d3 1px solid;
|
|
background-color: #f6f6f6;
|
|
overflow: hidden
|
|
}
|
|
|
|
.layui-imgbox-img>image {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.layui-imgbox-repeat {
|
|
position: absolute;
|
|
display: block;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
line-height: 28rpx;
|
|
right: 2px;
|
|
bottom: 2px;
|
|
color: #999;
|
|
font-size: 30rpx;
|
|
background: #fff
|
|
}
|
|
|
|
.uploadbtn {
|
|
position: relative;
|
|
height: 200rpx;
|
|
width: 200rpx
|
|
}
|
|
|
|
|
|
.clist-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #f5f5f5;
|
|
padding: 20rpx 30rpx;
|
|
}
|
|
|
|
.radio {
|
|
flex-shrink: 0;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
background: #FFFFFF;
|
|
border: 2rpx solid #BFBFBF;
|
|
border-radius: 50%;
|
|
margin-right: 30rpx
|
|
}
|
|
|
|
.radio .radio-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block
|
|
}
|
|
|
|
.freightitem {
|
|
width: 100%;
|
|
height: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 40rpx
|
|
}
|
|
|
|
.freightitem .f1 {
|
|
color: #666;
|
|
flex: 1
|
|
}
|
|
|
|
.detailop {
|
|
display: flex;
|
|
line-height: 60rpx
|
|
}
|
|
|
|
.detailop .btn {
|
|
border: 1px solid #ccc;
|
|
margin-right: 10rpx;
|
|
padding: 0 16rpx;
|
|
color: #222;
|
|
border-radius: 10rpx
|
|
}
|
|
|
|
.detaildp {
|
|
position: relative;
|
|
line-height: 50rpx
|
|
}
|
|
|
|
.detaildp .op {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
font-size: 24rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
margin-top: 10rpx
|
|
}
|
|
|
|
.detaildp .op .btn {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
margin-right: 10rpx;
|
|
padding: 0 10rpx;
|
|
color: #fff
|
|
}
|
|
|
|
.detaildp .detailbox {
|
|
border: 2px dashed #00a0e9
|
|
}
|
|
|
|
.uni-popup-dialog {
|
|
width: 300px;
|
|
border-radius: 5px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.uni-dialog-title {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
padding-top: 15px;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.uni-dialog-title-text {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.uni-dialog-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 5px 15px 15px 15px;
|
|
}
|
|
|
|
.uni-dialog-content-text {
|
|
font-size: 14px;
|
|
color: #6e6e6e;
|
|
}
|
|
|
|
.uni-dialog-button-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
border-top-color: #f5f5f5;
|
|
border-top-style: solid;
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
.uni-dialog-button {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 45px;
|
|
}
|
|
|
|
.uni-border-left {
|
|
border-left-color: #f0f0f0;
|
|
border-left-style: solid;
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
.uni-dialog-button-text {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.uni-button-color {
|
|
color: #007aff;
|
|
}
|
|
|
|
|
|
.popup__container {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
z-index: 10;
|
|
background: #fff
|
|
}
|
|
|
|
.popup__overlay {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 11;
|
|
opacity: 0.3;
|
|
background: #000
|
|
}
|
|
|
|
.popup__modal {
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
color: #3d4145;
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
opacity: 1;
|
|
padding-bottom: 20rpx;
|
|
background: #fff;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
z-index: 12;
|
|
min-height: 600rpx;
|
|
max-height: 1000rpx;
|
|
}
|
|
|
|
.popup__title {
|
|
text-align: center;
|
|
padding: 30rpx;
|
|
position: relative;
|
|
position: relative
|
|
}
|
|
|
|
.popup__title-text {
|
|
font-size: 32rpx
|
|
}
|
|
|
|
.popup__close {
|
|
position: absolute;
|
|
top: 34rpx;
|
|
right: 34rpx
|
|
}
|
|
|
|
.popup__content {
|
|
width: 100%;
|
|
max-height: 880rpx;
|
|
overflow-y: scroll;
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.service-item {
|
|
display: flex;
|
|
padding: 0 40rpx 20rpx 40rpx;
|
|
}
|
|
|
|
.service-item .prefix {
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.service-item .suffix {
|
|
padding-left: 10rpx;
|
|
}
|
|
|
|
.service-item .suffix .type-name {
|
|
font-size: 28rpx;
|
|
color: #49aa34;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
</style>
|
|
<style>
|
|
page {
|
|
background-color: #f4f4f4;
|
|
}
|
|
</style>
|
|
<style scoped>
|
|
.gui-step-item {
|
|
width: 130rpx;
|
|
}
|
|
|
|
.form-add-footer-btns {
|
|
padding: 0 38rpx;
|
|
font-size: 30rpx;
|
|
line-height: 100rpx;
|
|
}
|
|
|
|
.modal-btns {
|
|
line-height: 100rpx;
|
|
height: 100rpx;
|
|
font-size: 35rpx;
|
|
text-align: center;
|
|
width: 320rpx;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.col-mm {
|
|
color: #ff0000;
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
font-size: 28rpx;
|
|
|
|
.b-r {
|
|
border-right: solid 1rpx #E8E8E8;
|
|
}
|
|
|
|
.tr {
|
|
height: 58rpx;
|
|
line-height: 58rpx;
|
|
border-bottom: solid 1rpx #E8E8E8;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
text-align: center;
|
|
background-color: #F2F2F2;
|
|
|
|
.th {
|
|
width: 33.33%;
|
|
}
|
|
}
|
|
|
|
.tr2 {
|
|
min-height: 58rpx;
|
|
line-height: 38rpx;
|
|
border-bottom: solid 1rpx #E8E8E8;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
text-align: center;
|
|
background-color: #fff;
|
|
|
|
.td {
|
|
width: 33.33%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 5rpx;
|
|
font-size: 20rpx;
|
|
|
|
.edit {
|
|
width: 80rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
background-color: #0076DA;
|
|
text-align: center;
|
|
color: #FFF;
|
|
}
|
|
|
|
.delete {
|
|
margin-left: 10rpx;
|
|
width: 80rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
background-color: #FF0000;
|
|
text-align: center;
|
|
color: #FFF;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.image-list {
|
|
margin-top: 20rpx;
|
|
margin-bottom: -20rpx;
|
|
|
|
&:after {
|
|
clear: both;
|
|
content: " ";
|
|
display: table;
|
|
}
|
|
|
|
.image {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.image-picker,
|
|
.image-preview {
|
|
width: 184rpx;
|
|
height: 184rpx;
|
|
margin-right: 30rpx;
|
|
margin-bottom: 30rpx;
|
|
float: left;
|
|
|
|
&:nth-child(3n+0) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.image-picker {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 1rpx dashed #ccc;
|
|
color: #ccc;
|
|
|
|
.choose-icon {
|
|
font-size: 48rpx;
|
|
margin-bottom: 6rpx;
|
|
}
|
|
|
|
.choose-text {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.image-preview {
|
|
position: relative;
|
|
|
|
.image-delete {
|
|
position: absolute;
|
|
top: -15rpx;
|
|
right: -15rpx;
|
|
height: 42rpx;
|
|
width: 42rpx;
|
|
background: rgba(0, 0, 0, 0.64);
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
font-weight: bolder;
|
|
font-size: 22rpx;
|
|
z-index: 10;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|