|
|
@@ -0,0 +1,479 @@
|
|
|
+<template>
|
|
|
+ <view class="page" :style="{'height':(h)+'px','padding-top':mt+'px'}">
|
|
|
+ <c-nav-bar title="添加商品" :showIcon="true"></c-nav-bar>
|
|
|
+ <view class="body">
|
|
|
+
|
|
|
+ <view class="typeInfo">
|
|
|
+ <view class="cellBox">
|
|
|
+ <text style="font-size: 32rpx; font-weight: 700;">商品名称</text>
|
|
|
+ <input v-model="fromData.comboName" type="text" placeholder="请输入商品名称"
|
|
|
+ style="width: 210rpx;height: 42rpx; font-size: 30rpx;flex:1" />
|
|
|
+ </view>
|
|
|
+ <view class="cellBox">
|
|
|
+ <text style="font-size: 32rpx; font-weight: 700;">价格</text>
|
|
|
+ <input v-model="fromData.price" type="text" placeholder="请输入价格"
|
|
|
+ style="width: 210rpx;height: 42rpx; font-size: 30rpx;flex:1" />
|
|
|
+ </view>
|
|
|
+ <!-- <view class="cellBox">
|
|
|
+ <text style="font-size: 32rpx; font-weight: 700;">库存</text>
|
|
|
+ <input v-model="fromData.shortName" type="text" placeholder="请输入库存"
|
|
|
+ style="width: 210rpx;height: 42rpx; font-size: 30rpx;flex:1" />
|
|
|
+ </view> -->
|
|
|
+ <view class="cellBox">
|
|
|
+ <text style="font-size: 32rpx; font-weight: 700;">类型</text>
|
|
|
+ <input v-model="fromData.comboType" type="text" placeholder="请输入类型"
|
|
|
+ style="width: 210rpx;height: 42rpx; font-size: 30rpx;flex:1" />
|
|
|
+ </view>
|
|
|
+ <view class="uploadPic">
|
|
|
+ <view style=" margin-left: 16rpx; margin-bottom: 22rpx;">
|
|
|
+ <text style="font-size: 32rpx; font-weight: 700; ">套餐内容</text>
|
|
|
+ </view>
|
|
|
+ <view class="textarea">
|
|
|
+ <u--textarea v-model="fromData.comboExplain" height='310' placeholder="最多输入60个汉字"
|
|
|
+ count></u--textarea>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="uploadPic">
|
|
|
+ <view style=" margin-left: 16rpx;">
|
|
|
+ <text style="font-size: 32rpx; font-weight: 700; "> 主图/封面</text>
|
|
|
+ </view>
|
|
|
+ <view class="pic">
|
|
|
+ <!-- 图片 -->
|
|
|
+ <u-upload :fileList="cover" multiple :maxCount="1" :maxSize="1 * 1024 * 1024"
|
|
|
+ @afterRead="afterReadcover" @oversize="overSize" width="180" height="180"
|
|
|
+ @delete="deletePic">
|
|
|
+ </u-upload>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="uploadPic">
|
|
|
+ <view style=" margin-left: 16rpx;">
|
|
|
+ <text style="font-size: 32rpx; font-weight: 700; ">套餐照片</text>
|
|
|
+ </view>
|
|
|
+ <view class="pic">
|
|
|
+ <!-- 图片 -->
|
|
|
+ <u-upload :fileList="introduction" multiple :maxCount="5" :maxSize="5 * 1024 * 1024"
|
|
|
+ @afterRead="afterRead" @oversize="overSize" width="180" height="180" @delete="deletePic">
|
|
|
+ </u-upload>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 图片上传
|
|
|
+ -->
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="btn-btn">
|
|
|
+ <view class="hander-two">
|
|
|
+ <view class="pop-btn-del" @click="Shelves(0)">
|
|
|
+ 保存
|
|
|
+ </view>
|
|
|
+ <view class="pop-btn-add" @click="Shelves(1)">
|
|
|
+ 立即上架
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ checked: false,
|
|
|
+ weekedChecked: false,
|
|
|
+ action: '', //图片服务器地址
|
|
|
+ value2: '统计字数',
|
|
|
+ introduction: [],
|
|
|
+ introductioned: [],
|
|
|
+ cover: [],
|
|
|
+ covered: [],
|
|
|
+ fromData: {
|
|
|
+ comboName: "", //套餐名称
|
|
|
+ comboType: '1', //套餐类型: 1包桌 2按人头
|
|
|
+ cover: '', //主图/封面
|
|
|
+ introduction: '', //图片 多个以,分割
|
|
|
+ price: '', //价格
|
|
|
+ status: '0', //是否上下架: 1是0否
|
|
|
+ comboExplain: '', //说明
|
|
|
+ homestayId: uni.getStorageSync('homestayId'),
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ onLoad() {},
|
|
|
+ methods: {
|
|
|
+ // 保存 上架
|
|
|
+ Shelves(status) {
|
|
|
+ if (!this.fromData.comboName) return this.$showToast("请添商品名称");
|
|
|
+ if (!this.fromData.price) return this.$showToast("请填写价格");
|
|
|
+ if (!this.fromData.comboType) return this.$showToast("请选择套餐类型");
|
|
|
+ if (!this.fromData.comboExplain) return this.$showToast("请填写套餐内容");
|
|
|
+ if (!this.fromData.cover) return this.$showToast("请上传主图/封面");
|
|
|
+ if (!this.fromData.introduction) return this.$showToast("请上传套餐照片");
|
|
|
+
|
|
|
+ this.$api.post('/merchant/hotel/repast', this.fromData).then(res => {
|
|
|
+ console.log(res.data);
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 删除图片
|
|
|
+ deletePic(event) {
|
|
|
+ this.introduction.splice(event.index, 1)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 新增图片
|
|
|
+ async afterReadcover(event) {
|
|
|
+ const result = await this.uploadFilePromisecover(event.file[0].url);
|
|
|
+ //图片路径
|
|
|
+ },
|
|
|
+ // 新增图片
|
|
|
+ async afterRead(event) {
|
|
|
+ // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
|
+ let Lists = [].concat(event.file)
|
|
|
+
|
|
|
+ for (let i = 0; i < Lists.length; i++) {
|
|
|
+ const result = await this.uploadFilePromise(Lists[i].url)
|
|
|
+ wx.getImageInfo({
|
|
|
+ src: Lists[i].url,
|
|
|
+ success: res => {
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //上传图片
|
|
|
+ uploadFilePromisecover(url) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ let a = uni.uploadFile({
|
|
|
+ url: 'https://i.ringzle.com/island-cloud-server/oss/file/upload',
|
|
|
+ filePath: url,
|
|
|
+ name: 'file',
|
|
|
+ header: {
|
|
|
+ token: wx.getStorageSync('access_token')
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ let data = JSON.parse(res.data) //最终传给的是字符串，这里需要转换格式
|
|
|
+ this.cover.push({
|
|
|
+ url: data.data.url
|
|
|
+ })
|
|
|
+ this.covered.push(data.data.url)
|
|
|
+ this.fromData.cover = this.covered.toString()
|
|
|
+ console.log(this.covered);
|
|
|
+ console.log(this.fromData.cover);
|
|
|
+ resolve(data.data.url)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //上传图片
|
|
|
+ uploadFilePromise(url) {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ let a = uni.uploadFile({
|
|
|
+ url: 'https://i.ringzle.com/island-cloud-server/oss/file/upload',
|
|
|
+ filePath: url,
|
|
|
+ name: 'file',
|
|
|
+ header: {
|
|
|
+ token: wx.getStorageSync('access_token')
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ let data = JSON.parse(res.data) //最终传给的是字符串，这里需要转换格式
|
|
|
+ this.introduction.push({
|
|
|
+ url: data.data.url
|
|
|
+ })
|
|
|
+ this.introductioned.push(data.data.url)
|
|
|
+ this.fromData.introduction = this.introductioned.toString()
|
|
|
+ console.log(this.introductioned);
|
|
|
+ console.log(this.fromData.introduction);
|
|
|
+ resolve(data.data.url)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ // 图片大小超出最大允许大小
|
|
|
+ overSize(e) {
|
|
|
+ uni.$u.toast('上传图片大小不能超过10MB!')
|
|
|
+ },
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .uicon-camera-fill {
|
|
|
+ font-size: 50rpx !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 136rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ // margin: 0 auto;
|
|
|
+ z-index: 999999;
|
|
|
+ // margin-top: 30rpx;
|
|
|
+ // margin-left: 30rpx;
|
|
|
+
|
|
|
+ .hander-two {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin: 30rpx 0;
|
|
|
+
|
|
|
+ .pop-btn-del {
|
|
|
+ margin: 0 15rpx;
|
|
|
+ padding: 22rpx 136rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #111111;
|
|
|
+ font-weight: Regular;
|
|
|
+ background-color: #F0F2F5;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pop-btn-add {
|
|
|
+ border-radius: 50rpx;
|
|
|
+ margin: 0 15rpx;
|
|
|
+ background-color: #1372FF;
|
|
|
+ padding: 22rpx 100rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-weight: Regular;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 690rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ background-color: #1372FF;
|
|
|
+ color: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 34rpx;
|
|
|
+ border-radius: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uicon-close {
|
|
|
+ font-size: 30rpx !important;
|
|
|
+ top: 8rpx !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page {
|
|
|
+ background: #F3F4F4;
|
|
|
+ padding-bottom: 260rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .body {
|
|
|
+ padding-top: 20rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ padding-right: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .typeInfo {
|
|
|
+ background-color: #fff;
|
|
|
+ width: 100%;
|
|
|
+ // height: 145px;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding-top: 15px;
|
|
|
+ padding-left: 7px;
|
|
|
+ padding-right: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .titleInfo {
|
|
|
+ // margin-top: 30rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cellBox {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ padding: 20rpx 0 30rpx;
|
|
|
+ border-bottom: 1rpx solid #E1E1E1;
|
|
|
+
|
|
|
+ text {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ width: 170rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bigRoom {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 102rpx;
|
|
|
+ display: flex;
|
|
|
+ // justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .shelves {
|
|
|
+ width: 695rpx;
|
|
|
+ height: 102rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ // padding-left: 30rpx;
|
|
|
+ // padding-right: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploadPic {
|
|
|
+ padding-top: 28rpx;
|
|
|
+ // width: 690rpx;
|
|
|
+ // height: 293rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pic {
|
|
|
+ // margin-left: 30rpx;
|
|
|
+ // margin-top: 20rpx;
|
|
|
+ // width: 190rpx;
|
|
|
+ // height: 120rpx;
|
|
|
+ margin: 20rpx 26rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ // .custom-upload-button{
|
|
|
+ // width: 190rpx;
|
|
|
+ // height: 120rpx;
|
|
|
+
|
|
|
+ // }
|
|
|
+ .priceInfo {
|
|
|
+ width: 690rpx;
|
|
|
+ // height: 908rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .week {
|
|
|
+
|
|
|
+ padding-left: 30rpx;
|
|
|
+ padding-right: 30rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .weekend {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1rpx solid #E1E1E1;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .everyDay {
|
|
|
+ padding-left: 30rpx;
|
|
|
+ padding-right: 30rpx;
|
|
|
+ width: 100%;
|
|
|
+ // background-color: pink;
|
|
|
+ height: 102rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .days {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1rpx solid #E1E1E1;
|
|
|
+ padding-bottom: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .priceBoxWeek {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ padding-right: 30rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .weekendBox {
|
|
|
+ width: 630rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ // margin-right: 90rpx;
|
|
|
+ // justify-content: space-between;
|
|
|
+ border-bottom: 1rpx solid #E1E1E1;
|
|
|
+ height: 102rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .everyHouseList {
|
|
|
+ // padding-right: 30rpx;
|
|
|
+ width: 690rpx;
|
|
|
+ // height: 908rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ // padding-top: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .HouseListTitleInfo {
|
|
|
+ margin-right: 30rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ width: 690rpx;
|
|
|
+ height: 102rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .addSubmit {
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ /* 固定定位 */
|
|
|
+ bottom: 20rpx;
|
|
|
+ /* 底部对齐 */
|
|
|
+ left: 0;
|
|
|
+ /* 可选：左对齐 */
|
|
|
+ // width: 690rpx;
|
|
|
+ /* 可选：宽度为 100% */
|
|
|
+ height: 96rpx;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ // padding-top: 20rpx;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ background-color: #1372FF;
|
|
|
+ border-radius: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploadPicPic {
|
|
|
+ position: relative;
|
|
|
+ top: -96rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-upload__deletable[data-v-69e2a36e] {
|
|
|
+ width: 0 !important;
|
|
|
+ }
|
|
|
+</style>
|
2912631854@qq.com