|
|
@@ -130,30 +130,45 @@
|
|
|
<!-- 商品图标 -->
|
|
|
<view class="shopicon">商品图标</view>
|
|
|
<view class="iconcontent">
|
|
|
- <text class="icon" @tap="uploadImg"></text>
|
|
|
- <image class="shopLogo" :src="img"></image>
|
|
|
+ <image class="shopLogo" :src="img" v-if="img"></image>
|
|
|
+ <text class="icon" @tap="uploadImg">点击上传</text>
|
|
|
</view>
|
|
|
<view class="shopicon">商品图册</view>
|
|
|
- <view class="uploading"> </view>
|
|
|
+ <view class="uploading">
|
|
|
+ <view class="item-warp" v-for="(item, index) in pickList" :key="index">
|
|
|
+ <view class="img-warp">
|
|
|
+ <image :src="item" class="item list"></image>
|
|
|
+ <view class="delete">
|
|
|
+ <image
|
|
|
+ src="../../static/images/delete.png"
|
|
|
+ class="delete-icon"
|
|
|
+ @tap="deleteThisImg(index)"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-warp">
|
|
|
+ <image
|
|
|
+ src="../../static/images/upload.png"
|
|
|
+ class="item upload"
|
|
|
+ @tap="uploadList"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<!-- 购票须知 -->
|
|
|
<view class="shopicon">商品描述（购票须知）</view>
|
|
|
<view class="know">
|
|
|
- <view class="txt-list">服务信息</view>
|
|
|
- <view class="txt-list">本商品支付完成即可顺利出行,无需等待确认</view>
|
|
|
- <view class="txt-list"
|
|
|
- >本商品无需出团通知书/确认单,预定成功后即可出行</view
|
|
|
- >
|
|
|
- <view class="txt-list">取消政策</view>
|
|
|
- <view class="txt-list">按规则退</view>
|
|
|
- <view class="txt-list">旅游者违约退改规则</view>
|
|
|
- <view class="txt-list">购买须知</view>
|
|
|
- <view class="txt-list"
|
|
|
- >商品过了使用期限后将不可再使用,请您一定要在使用时间</view
|
|
|
- >
|
|
|
- <view class="txt-list">范围内及时使用哦</view>
|
|
|
+ <view class="container">
|
|
|
+ <editor
|
|
|
+ id="editor"
|
|
|
+ class="ql-container"
|
|
|
+ :placeholder="placeholder"
|
|
|
+ @blur="onEditorReady"
|
|
|
+ ></editor>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
|
|
|
- <view class="btn">确认</view>
|
|
|
+ <view class="btn" @tap="submitMesage">确认</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -172,6 +187,8 @@ export default {
|
|
|
num2: 9999,
|
|
|
showoperat: true,
|
|
|
img: '',
|
|
|
+ pickList: [],
|
|
|
+ placeholder: '请输入内容...',
|
|
|
storeList: [{ name: '所属店铺', id: '' }],
|
|
|
storeIndex: 0,
|
|
|
storeId: '',
|
|
|
@@ -198,6 +215,7 @@ export default {
|
|
|
// 跳转到管理分类页面
|
|
|
toClassify() {
|
|
|
console.log('我跳了');
|
|
|
+ this.$mRouter.push({ route: '/pages/shop/classify' });
|
|
|
},
|
|
|
// 选择店铺
|
|
|
changeStore(e) {
|
|
|
@@ -316,19 +334,61 @@ export default {
|
|
|
addDate() {
|
|
|
this.num2++;
|
|
|
},
|
|
|
-
|
|
|
// 图片上传
|
|
|
uploadImg() {
|
|
|
+ let _self = this;
|
|
|
uni.chooseImage({
|
|
|
- count: 1, //
|
|
|
+ count: 1,
|
|
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
|
sourceType: ['album'], // camera 使用相机 album 从相册中选
|
|
|
- success: function (res) { // 成功则返回图片的本地文件路径列表 tempFilePaths
|
|
|
- console.log(res);
|
|
|
- console.log(JSON.stringify(res.tempFilePaths));
|
|
|
+ success: function (res) {
|
|
|
+ // 成功则返回图片的本地文件路径列表 tempFilePaths
|
|
|
+
|
|
|
+ _self.img = res.tempFilePaths[0];
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
+ // 图册上传
|
|
|
+ uploadList() {
|
|
|
+ let _self = this;
|
|
|
+ uni.chooseImage({
|
|
|
+ count: 6,
|
|
|
+ sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
|
+ sourceType: ['album'], // camera 使用相机 album 从相册中选
|
|
|
+ success: function (res) {
|
|
|
+ // 成功则返回图片的本地文件路径列表 tempFilePaths
|
|
|
+ console.log(res.tempFilePaths);
|
|
|
+ let img = [];
|
|
|
+ img.push(res.tempFilePaths);
|
|
|
+ if (_self.pickList.length >= 6) {
|
|
|
+ _self.$mHelper.toast('最多只可上传6张图片');
|
|
|
+ } else {
|
|
|
+ _self.pickList = _self.pickList.concat(img);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 删除图册中的图片
|
|
|
+ deleteThisImg(index) {
|
|
|
+ console.log(index);
|
|
|
+ this.pickList.splice(index, 1);
|
|
|
+ },
|
|
|
+ // 保存富文本
|
|
|
+ onEditorReady() {
|
|
|
+ uni
|
|
|
+ .createSelectorQuery()
|
|
|
+ .select('#editor')
|
|
|
+ .context((res) => {
|
|
|
+ this.editorCtx = res.context;
|
|
|
+ })
|
|
|
+ .exec();
|
|
|
+ },
|
|
|
+ // 清空富文本
|
|
|
+ // undo() {
|
|
|
+ // this.editorCtx.undo();
|
|
|
+ // },
|
|
|
+ // 内容提交
|
|
|
+ submitMesage() {},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
@@ -434,34 +494,75 @@ export default {
|
|
|
line-height: 100upx;
|
|
|
}
|
|
|
.iconcontent {
|
|
|
- padding: 0 33upx;
|
|
|
+ padding: 25upx 33upx;
|
|
|
background-color: #f9f9f9;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- height: 200upx;
|
|
|
.icon {
|
|
|
display: inline-block;
|
|
|
- width: 156upx;
|
|
|
- height: 156upx;
|
|
|
- background-color: #b4b8b7;
|
|
|
+ height: 56upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ color: #a3a8a8;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-left: 20upx;
|
|
|
+ border: 1px dashed #ccc;
|
|
|
+ border-radius: 5%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56upx;
|
|
|
+ padding: 0 15upx;
|
|
|
}
|
|
|
.shopLogo {
|
|
|
- width: 156upx;
|
|
|
- height:156upx;
|
|
|
- background-color: green;
|
|
|
+ width: 56upx;
|
|
|
+ height: 56upx;
|
|
|
+ border-radius: 50%;
|
|
|
}
|
|
|
}
|
|
|
.uploading {
|
|
|
- height: 208upx;
|
|
|
- background-color: pink;
|
|
|
+ padding: 25upx 33upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ background-color: #fff;
|
|
|
+ .item-warp {
|
|
|
+ border-radius: 17upx;
|
|
|
+ margin-right: 15upx;
|
|
|
+ margin-bottom: 15upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ .img-warp {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ width: 160upx;
|
|
|
+ height: 160upx;
|
|
|
+ }
|
|
|
+ &:nth-child(4) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .delete {
|
|
|
+ position: absolute;
|
|
|
+ right: -35upx;
|
|
|
+ top: -35upx;
|
|
|
+ width: 70upx;
|
|
|
+ height: 70upx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #8064f7;
|
|
|
+ .delete-icon {
|
|
|
+ position: absolute;
|
|
|
+ left: 13upx;
|
|
|
+ bottom: 13upx;
|
|
|
+ width: 14upx;
|
|
|
+ height: 14upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.know {
|
|
|
padding: 24upx 33upx;
|
|
|
background-color: #fff;
|
|
|
- .txt-list {
|
|
|
- font-size: 26upx;
|
|
|
- color: #232828;
|
|
|
- margin-bottom: 8upx;
|
|
|
+ #editor {
|
|
|
+ width: 100%;
|
|
|
+ height: 300px;
|
|
|
}
|
|
|
}
|
|
|
.btn {
|
