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.
1720 lines
56 KiB
1720 lines
56 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 class="item-picker" mode="multiSelector" range-key="name"
|
|
@change="classifyChange" @columnchange="columnchange" :value="classifyIndex"
|
|
:range="classifyArr">
|
|
<view style="text-align: right;">{{ name }}</view>
|
|
</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" style="text-align: right;">
|
|
<picker mode="selector" range-key="name" :range="timesList" @change="pickerTimes">
|
|
<text class="gui-text gui-secondary-text"
|
|
v-if="TimesIndex > -1">{{ timesList[TimesIndex].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" style="text-align: right;">
|
|
<picker mode="selector" range-key="name" :range="usesList" @change="pickerUses">
|
|
<text class="gui-text gui-secondary-text"
|
|
v-if="UsesIndex > -1">{{ usesList[UsesIndex].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">
|
|
<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 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="confirm2" :value="use_time" :isSecond="false"
|
|
:isMinute="false" :isTime="false">
|
|
{{ use_time ? use_time : '请选择使用截止日期' }}
|
|
</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" :value="item.goods_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="line_price" :value="item.line_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" :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.sum }}</text>
|
|
</view>
|
|
<view class="td b-r">
|
|
<text
|
|
class="twoline-hide">{{ titem.unit }}
|
|
</text>
|
|
</view>
|
|
<!-- <view class="td"><text class="twoline-hide">{{titem.money}}</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 20rpx "
|
|
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;font-size: 24rpx;
|
|
min-height: 200rpx;max-height: 400rpx;overflow: auto;">
|
|
<mp-html :content="gmxz"/>
|
|
</view>
|
|
<view style="margin: 20rpx 20rpx "
|
|
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;font-size: 24rpx;">
|
|
<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.sum" 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.money" 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,taocanIndex)">确认
|
|
</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'
|
|
import * as PageApi from '@/api/page'
|
|
|
|
const maxImageLength = 6
|
|
export default {
|
|
|
|
data() {
|
|
return {
|
|
timesList: [],
|
|
usesList: [],
|
|
UsesIndex: -1,
|
|
TimesIndex: -1,
|
|
name: '请选择类目',
|
|
classifyArr: [
|
|
[],
|
|
[]
|
|
], // picker - 数据源
|
|
classifyIndex: [0, 0], // picker - 索引
|
|
|
|
childArr: [], // 二级分类数据源
|
|
category_id: -1,
|
|
guige_name: '',
|
|
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: '',
|
|
sum: '',
|
|
unit: '',
|
|
money: '',
|
|
|
|
}],
|
|
// 最大图片数量
|
|
maxImageLength,
|
|
textareaVal: '', // 文本内容
|
|
maxWords: 100, // 最多字符数
|
|
textareatimer: null, // 延迟记录
|
|
radiochecked: false,
|
|
ArticleDetail: '',
|
|
CategoryList: '',
|
|
CategoryIndex: '-1',
|
|
spxq: '',
|
|
gmxz: '',
|
|
demo1Val: '',
|
|
use_time: '',
|
|
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;
|
|
},
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
async onLoad(options) {
|
|
this.goodsId = options.goodsId
|
|
await this.getCategory()
|
|
this.getArticleDetail()
|
|
this.getTimesList()
|
|
this.getUsesList()
|
|
},
|
|
onShow() {
|
|
this.spxq = uni.getStorageSync('spxq')
|
|
this.gmxz = uni.getStorageSync('gmxz')
|
|
},
|
|
methods: {
|
|
getTimesList() {
|
|
let _this = this
|
|
PageApi.getTimesList()
|
|
.then(result => {
|
|
_this.timesList = result.data.list
|
|
})
|
|
},
|
|
getUsesList() {
|
|
let _this = this
|
|
PageApi.getUsesList()
|
|
.then(result => {
|
|
_this.usesList = result.data.list
|
|
})
|
|
},
|
|
gglistInput: function (e) {
|
|
var index = e.currentTarget.dataset.index;
|
|
var field = e.currentTarget.dataset.field;
|
|
var gglist = this.gglist;
|
|
gglist[index][field] = e.detail.value;
|
|
this.gglist = gglist;
|
|
console.log(gglist)
|
|
},
|
|
showTancanPop(index) {
|
|
this.taocanIndex = index
|
|
this.formDataTaocan = {
|
|
name: '',
|
|
sum: '',
|
|
unit: ''
|
|
}
|
|
this.taocanShow = true
|
|
},
|
|
queuPi(index, tindex) {
|
|
let app = this
|
|
//var index = this.taocanIndex
|
|
if (app.formDataTaocan.name == '') {
|
|
uni.showToast({
|
|
title: '请输入名称',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (app.formDataTaocan.sum == '') {
|
|
uni.showToast({
|
|
title: '请输入数量',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
if (app.formDataTaocan.unit == '') {
|
|
uni.showToast({
|
|
title: '请输入单位',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
// if (app.formDataTaocan.money == '') {
|
|
// uni.showToast({
|
|
// title: '请输入价格',
|
|
// icon: 'none'
|
|
// })
|
|
// return
|
|
// }
|
|
app.gglist.forEach((item, key) => {
|
|
var taocanList = item.taocanList ? item.taocanList : [];
|
|
if (tindex == key) {
|
|
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
|
|
})
|
|
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;
|
|
that.guigedata.forEach(function (element, index) {
|
|
element.items.splice(ggindex2, 1)
|
|
return element
|
|
})
|
|
that.gglist.splice(ggindex2, 1)
|
|
},
|
|
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 = this.gglist;
|
|
var len = guigedata.length;
|
|
var newlen = 1;
|
|
var guige = {}
|
|
guige.name = this.guige_name
|
|
guige.goods_price = ''
|
|
guige.line_price = ''
|
|
guige.stock = 100
|
|
guige.taocanList = []
|
|
this.gglist.push(guige);
|
|
console.log(555);
|
|
console.log(gglist);
|
|
},
|
|
getGoods() {
|
|
let _this = this
|
|
GoodsApi.shopdetail(_this.goodsId)
|
|
.then(result => {
|
|
_this.goods = result.data.detail
|
|
_this.gglist = result.data.gglist
|
|
_this.guigedata = result.data.guigedata
|
|
_this.spxq = _this.goods.content
|
|
_this.gmxz = _this.goods.contents
|
|
_this.demo1Val = _this.goods.become_time
|
|
_this.use_time = _this.goods.use_time
|
|
_this.category_id = result.data.detail.category_id
|
|
|
|
uni.setStorageSync('spxq', _this.goods.content)
|
|
uni.setStorageSync('gmxz', _this.goods.contents)
|
|
|
|
_this.timesList.forEach(function (element, index) {
|
|
if (element.times_id == _this.goods.times_id) {
|
|
_this.TimesIndex = index
|
|
}
|
|
})
|
|
_this.usesList.forEach(function (element, index) {
|
|
if (element.uses_id == _this.goods.uses_id) {
|
|
_this.UsesIndex = index
|
|
}
|
|
})
|
|
// _this.childArr.forEach(function (elements, index) {
|
|
// elements.forEach(function (element, indess) {
|
|
// if (element.category_id == _this.category_id) {
|
|
// _this.name = element.name
|
|
// }
|
|
// });
|
|
//
|
|
// });
|
|
_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)
|
|
});
|
|
_this.dataSource.forEach((parent, parentIndex) => {
|
|
if (parent.children && parent.children.length > 0) {
|
|
const index = parent.children.findIndex(child => child.category_id === _this.category_id)
|
|
if (index > -1) {
|
|
_this.name = parent.children[index].name
|
|
_this.classifyIndex = [parentIndex, index]
|
|
_this.classifyArr[1] = parent.children
|
|
}
|
|
}
|
|
})
|
|
|
|
})
|
|
},
|
|
submit: function (e) {
|
|
const app = this
|
|
var fromData = e.detail.value;
|
|
if (!fromData['goods_name']) {
|
|
app.$toast('请填写商品名称')
|
|
return false
|
|
}
|
|
if (app.category_id < 0) {
|
|
app.$toast('请选择商品分类')
|
|
return false
|
|
}
|
|
// if (!fromData['goods_price']) {
|
|
// app.$toast('请填写商品价格')
|
|
// return false
|
|
// }
|
|
// if (!fromData['stock_num']) {
|
|
// app.$toast('请填写库存数量')
|
|
// return false
|
|
// }
|
|
|
|
if (app.TimesIndex == -1) {
|
|
app.$toast('请选择可用时间')
|
|
return false
|
|
}
|
|
if (app.TimesIndex == -1) {
|
|
app.$toast('请选择使用方式')
|
|
return false
|
|
}
|
|
if (!app.demo1Val) {
|
|
app.$toast('请选择抢购日期')
|
|
return false
|
|
}
|
|
if (!app.use_time) {
|
|
app.$toast('请选择使用日期')
|
|
return false
|
|
}
|
|
if (app.gglist.length == 0) {
|
|
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
|
|
}
|
|
fromData.uses_id = app.usesList[app.UsesIndex].uses_id
|
|
fromData.times_id = app.timesList[app.TimesIndex].times_id
|
|
|
|
fromData.category_id = app.category_id
|
|
fromData.become_time = app.demo1Val
|
|
fromData.use_time = app.use_time
|
|
fromData.content = app.spxq
|
|
fromData.contents = app.gmxz
|
|
|
|
// 判断是否重复提交
|
|
if (app.disabled === true) return false
|
|
// 按钮禁用
|
|
app.disabled = true
|
|
// 判断是否需要上传图片
|
|
console.log(imagesLength)
|
|
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
|
|
fromData.gglist = app.gglist
|
|
|
|
GoodsApi.edit(app.goodsId, 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 = []
|
|
var uploaded = app.formData[0].uploaded
|
|
console.log(formData)
|
|
var newrr = []
|
|
formData.forEach((item, index) => {
|
|
item.imageList.forEach((item2, index2) => {
|
|
if (uploaded[index2] > 0) {
|
|
|
|
} else {
|
|
newrr.push(item2)
|
|
}
|
|
})
|
|
if (newrr.length) {
|
|
const images = newrr.map(image => image)
|
|
files.push({
|
|
formDataIndex: index,
|
|
images
|
|
})
|
|
}
|
|
})
|
|
console.log(files)
|
|
// 批量上传
|
|
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 = app.formData[index]
|
|
.uploaded.concat(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];
|
|
},
|
|
confirm2: function (res) {
|
|
this.use_time = res[0] + '-' + res[1] + '-' + res[2];
|
|
},
|
|
pickerCategory(e) {
|
|
this.CategoryIndex = e.detail.value;
|
|
},
|
|
getCategory() {
|
|
return new Promise(resolve => {
|
|
let _this = this
|
|
CategoryApi.shoplist()
|
|
.then(result => {
|
|
_this.dataSource = result.data.list.filter(item => item.parent_id === 0)
|
|
_this.getAllClassify()
|
|
_this.getGoods()
|
|
resolve()
|
|
})
|
|
})
|
|
|
|
},
|
|
// 获取数据源并分出一级二级
|
|
getAllClassify() {
|
|
let dataLen = this.dataSource.length;
|
|
|
|
for (let i = 0; i < dataLen; i++) {
|
|
// 将数据源中的二级分类 push 进 childArr，作为二级分类的数据源
|
|
this.childArr.push(this.dataSource[i].children)
|
|
}
|
|
|
|
// 一级分类的数据源
|
|
this.classifyArr[0] = this.dataSource;
|
|
|
|
// 第一次打开时，默认给一级分类添加它的二级分类
|
|
this.classifyArr[1] = this.childArr[0]
|
|
},
|
|
|
|
// 选择商品分类
|
|
classifyChange(e) {
|
|
let value = e.target.value;
|
|
this.classifyIndex = value;
|
|
|
|
// if (this.classifyArr[0].length != 0) {
|
|
// this.name = this.classifyArr[0][this.classifyIndex[0]].name
|
|
// this.category_id = this.classifyArr[0][this.classifyIndex[0]].category_id
|
|
// };
|
|
if (this.classifyArr[1].length != 0) {
|
|
this.name = this.classifyArr[1][this.classifyIndex[1]].name
|
|
this.category_id = this.classifyArr[1][this.classifyIndex[1]].category_id
|
|
}
|
|
},
|
|
|
|
// 获取二级分类
|
|
columnchange(e) {
|
|
// 当滚动切换一级分类时，为当前的一级分类添加它的子类
|
|
if (e.detail.column == 0) {
|
|
// #ifdef H5
|
|
// 在小程序中直接赋值无效 H5 可直接赋值
|
|
this.classifyArr[1] = this.childArr[e.detail.value]
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
// 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行
|
|
this.$set(this.classifyArr, 1, this.childArr[e.detail.value])
|
|
// #endif
|
|
}
|
|
},
|
|
|
|
bianjiqi(type) {
|
|
uni.navigateTo({
|
|
url: './editor?type=' + type
|
|
})
|
|
|
|
},
|
|
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)
|
|
this.formData[index].uploaded.splice(imageIndex, 1)
|
|
},
|
|
|
|
fanhui() {
|
|
uni.navigateBack()
|
|
},
|
|
pickerTimes(e) {
|
|
this.TimesIndex = e.detail.value;
|
|
},
|
|
pickerUses(e) {
|
|
this.UsesIndex = e.detail.value;
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
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;
|
|
border-radius: 40rpx;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
.btn-item-main {
|
|
background: linear-gradient(to top, #0E001F, #7B0373);
|
|
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;
|
|
|
|
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>
|