Skip to content

7
7-Eleven
Commit d1a387bd by 赵雅纹
Options

Merge branch 'dev_7.1.0' into feature-zyw-sc

parents a9334d7a 57acef2a
Showing with 428 additions and 21 deletions
src/component/selectRelatedGoods/selectRelatedGoods.js 0 → 100644
// component/selectRelatedGoods/selectRelatedGoods.js
Component({
/**
* 组件的属性列表
*/
properties: {
show: { // 显示标识
type: Boolean,
value: false
}
},
/**
* 组件的初始数据
*/
data: {
isSelect:false
},
/**
* 组件的方法列表
*/
methods: {
selectCoupon() {
console.log('2222')
this.setData({
isSelect: !this.data.isSelect
})
},
hidePopup: function () { // 隐藏弹出框
this.setData({
show: false
})
},
},
})
src/component/selectRelatedGoods/selectRelatedGoods.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
src/component/selectRelatedGoods/selectRelatedGoods.wxml 0 → 100644
<view class="modal-container{{show ? ' active' : ''}}" bindtap="hidePopup" />
<view class="modal-content{{show ? ' active' : ''}}">
<view class="modal-header">
<image src="/assets/imgs/7_1_0/arrow-right.png" class="modal-to-back" mode="widthFix" />
<text class="modal-title">选择订单商品</text>
<image
class="modal-close"
mode="widthFix"
src="/assets/imgs/7_1_0/close.png"
bindtap="hidePopup"
/>
</view>
<view class="modal-info">
<view class="order-input weui-flex weui-progress">
<input class="order-name border_box" placeholder=" 请输入商品名称" auto-focus />
<text class="order-search">搜索</text>
</view>
<view class="coupon-list" bindtap="selectCoupon">
<image
wx:if="{{false}}"
class="coupon-bg"
src="/assets/imgs/7_1_0/coupon-bg.png"
mode="widthFix"
/>
<image class="coupon-bg" src="/assets/imgs/7_1_0/disabled-coupon.png" mode="widthFix" />
<view class="coupon-info">
<view class="left-price">
<view class="top-price">
<text>￥</text>
<text class="amount">50</text>
</view>
<view class="bottom-desc">
满99可用
</view>
</view>
<view class="right-info">
<view class="coupon-title">新人礼包劵</view>
<view class="coupon-time">有效期</view>
<view class="coupon-desc">拼团及特殊商品不可用</view>
</view>
<view class="select-radio">
<view class="{{isSelect ? 'theme-color' : ''}} coupon-radio">
<image
wx:if="{{isSelect}}"
class="tick-success"
src="/assets/imgs/7_1_0/tick-success.png"
mode="widthFix"
/>
</view>
</view>
</view>
</view>
<view class="empty-coupon">
暂无订单
</view>
</view>
<view class="post-notes fixed-bottom0">确认添加</view>
</view>
src/component/selectRelatedGoods/selectRelatedGoods.wxss 0 → 100644
/* component/selectRelatedGoods/selectRelatedGoods.wxss */
@import '/app.wxss';
@import './../../base/base.wxss';
.order-input {
height: 112rpx;
line-height: 112rpx;
background-color: rgba(246, 246, 246, 1);
}
.order-name {
width: 550rpx;
height: 60rpx;
border-radius: 5rpx;
margin: 0 20rpx;
background-color: rgba(255, 255, 255, 1);
}
.order-search {
width: 122rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 5rpx;
background-color: rgba(203, 60, 60, 1);
color: rgba(255, 255, 255, 1);
font-size: 28rpx;
text-align: left;
font-family: PingFangSC-Regular;
text-align: center;
}
.modal-container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
transform: translateY(100%);
opacity: 0;
transition: opacity 200ms;
z-index: 98;
}
.post-notes {
text-align: center;
height: 88rpx;
line-height: 88rpx;
background-color: rgba(203, 60, 60, 1);
color: rgba(255, 255, 255, 1);
font-size: 25rpx;
font-family: PingFangSC-Medium;
}
.modal-container.active {
opacity: 1;
transform: translateY(0);
}
.modal-content.active {
transform: translateY(0);
}
.modal-content {
position: fixed;
z-index: 99;
width: 100%;
bottom: 0;
left: 0;
background: #ffffff;
transition: transform 300ms;
transform: translateY(100%);
height: 1000rpx;
}
.modal-content .modal-close {
position: absolute;
right: 24rpx;
top: 35rpx;
width: 25rpx;
}
.modal-to-back {
width: 18rpx;
position: absolute;
left: 24rpx;
top: 35rpx;
transform: rotate(180deg);
}
.modal-title {
color: #333333;
font-size: 32rpx;
position: absolute;
left: 295rpx;
top: 28rpx;
}
.coupon-list {
width: 702rpx;
height: 174rpx;
position: relative;
margin-bottom: 25rpx;
}
.coupon-bg {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.modal-info {
padding: 0 24rpx;
margin-top: 95rpx;
}
.left-price,
.right-info {
display: inline-block;
}
.left-price {
font-size: 18rpx;
color: #cb3c3c;
position: absolute;
top: 36rpx;
left: 48rpx;
}
.amount {
font-size: 54rpx;
}
.right-info {
position: absolute;
top: 33rpx;
left: 205rpx;
}
.coupon-title {
font-size: 28rpx;
color: #333333;
}
.coupon-time {
color: #aaaaaa;
font-size: 20rpx;
}
.coupon-desc {
color: #aaaaaa;
font-size: 22rpx;
margin-top: 12rpx;
}
.modal-info {
max-height: 900rpx;
overflow: scroll;
}
.empty-coupon {
width: 100%;
color: #aaaaaa;
margin-top: 211rpx;
text-align: center;
}
.coupon-radio {
width: 32rpx;
height: 32rpx;
border-radius: 50%;
border: 1rpx solid rgba(0, 0, 0, 0.2);
line-height: 26rpx;
text-align: center;
}
.tick-success {
width: 18rpx;
}
.select-radio {
position: absolute;
top: 71rpx;
right: 30rpx;
}
.theme-color {
border: none;
}
src/component/uploadImg/uploadImg.wxml
<!--component/uploadImg/uploadImg.wxml-->
<view class="page-upload-img">
<view class="upload-img-wrap" wx:for="{{pics}}" wx:key="{{index}}">
<image class="upload-img" src="{{item}}"></image>
<view class="flex-wrp" style="padding-bottom:{{pics.length >= 4 ? '100px;' : '0px'}};">
<view class="flex-item bc_green" wx:for="{{pics}}" wx:key="{{index}}">
<image class="item-img" src="{{item}}"></image>
</view>
<view class="flex-item bc_green">
<view class="upload-wrap" bindtap="uploadImg" wx:if="{{pics.length < 5}}">
<view class="upload-text">+图片</view>
</view>
</view>
</view>
</view>
src/component/uploadImg/uploadImg.wxss
......@@ -4,8 +4,8 @@
flex-wrap: wrap;
}
.upload-wrap{
width: 160rpx;
height: 160rpx;
/* width: 160rpx;
height: 160rpx;*/
border-radius: 5rpx;
border: 1px solid rgba(216, 216, 216, 1);
line-height: 160rpx;
......@@ -22,3 +22,21 @@
.upload-img-wrap{
margin-right: 20rpx;
}
.item-img {
width: 100%;
height: 160rpx;
}
.flex-wrp {
width: 100%;
height: 160rpx;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.flex-item {
margin-bottom: 20rpx;
width: 21%;
height: 160rpx;
margin-left: 20rpx;
}
src/component/uploadVideo/uploadVideo.wxml
<!--component/uploadVideo/uploadVideo.wxml-->
<view class="page-upload-img">
<view class="upload-img-wrap" wx:for="{{pics}}" wx:key="{{index}}">
<image class="upload-img" src="{{item}}" />
</view>
<view class="video_area" wx:if="{{video != ''}}">
<view class="video_area" wx:if="{{video}}">
<video class="video_item" src="{{video}}" controls></video>
<!-- 防止视频组件层级太高，导致部分机型覆盖悬浮按钮 -->
<cover-image
<!-- <cover-image
class="video_delete"
src="../../assets/imgs/711_12.png"
mode="aspectFill"
bindtap="videoDelete"
/>
/>-->
</view>
<view class="upload-wrap" bindtap="uploadVideo">
<view class="upload-wrap" wx:if="{{!video}}" bindtap="uploadVideo">
<view class="upload-text">+视频</view>
</view>
</view>
......
src/component/uploadVideo/uploadVideo.wxss
......@@ -14,6 +14,10 @@
.upload-text{
color: #aaaaaa;
}
.video_item {
width: 160rpx;
height: 160rpx;
}
.upload-img{
width: 160rpx;
height: 160rpx;
......
src/subPackage/page/pages/grassCommunity/grassCommunity.js
......@@ -9,7 +9,8 @@ wxService.page({
* 页面的初始数据
*/
data: {
pics:[],
showSelectRelatedGoods: false
},
/**
......@@ -25,7 +26,43 @@ wxService.page({
onReady: function () {
},
// 关联商品
handleRelatedGoods(){
console.log('关联商品')
this.setData({
showSelectRelatedGoods: true
})
},
uploadImg(){
this.chooseImg()
},
chooseImg(){
let that = this;
let pics = this.data.pics;
wx.chooseImage({
count: 5 - pics.length, // 最多可以选择的图片5张，
sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
success: function (res) {
var imgsrc = res.tempFilePaths;
pics = pics.concat(imgsrc);
that.setData({
pics: pics
});
console.log(that.data.pics)
// that.moreImgUpload({
// url: 'https://........',//这里是你图片上传的接口
// path: that.data.pics//这里是选取的图片的地址数组
// });
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
/**
* 生命周期函数--监听页面显示
*/
......
src/subPackage/page/pages/grassCommunity/grassCommunity.json
......@@ -3,6 +3,7 @@
"usingComponents": {
"upload-img": "/component/uploadImg/uploadImg",
"upload-video": "/component/uploadVideo/uploadVideo",
"grass-item": "/component/grassItem/grassItem"
"grass-item": "/component/grassItem/grassItem",
"select-related-goods": "/component/selectRelatedGoods/selectRelatedGoods"
}
}
\ No newline at end of file
src/subPackage/page/pages/grassCommunity/grassCommunity.wxml
<!--subPackage/page/pages/grassCommunity/grassCommunity.wxml-->
<view class="grass-community border_box">
<view class="grass-upload weui-flex">
<view class="upload-img"><upload-img/></view>
<view class="upload-video"><upload-video/></view>
<view class="page-upload-img">
<view class="flex-wrp">
<view class="flex-item" wx:for="{{pics}}" wx:key="{{index}}">
<image class="item-img" src="{{item}}" />
</view>
<view class="flex-item" hidden="{{pics.length >= 5}}">
<view class="upload-wrap" bindtap="uploadImg">
<view class="upload-text">+图片</view>
</view>
</view>
<view class="flex-item">
<upload-video/>
</view>
</view>
</view>
<view class="upload-tip">*只支持.jpg格式图片/ .mp4格式视频，最长60s</view>
<view class="title-border"><input placeholder="添加标题" auto-focus/></view>
<view class="title-border"><input placeholder="这一刻想说什么..." auto-focus/></view>
<view class="title-border">
<input placeholder="添加标题" auto-focus />
</view>
<view class="title-border">
<input placeholder="这一刻想说什么..." auto-focus />
</view>
<view class="related-goods">关联商品</view>
<view class="related-goods" bindtap="handleRelatedGoods">关联商品</view>
<view class="gress-list">
<grass-item />
<grass-item/>
</view>
</view>
<view class="post-notes fixed-bottom0">发布笔记</view>
<select-related-goods show="{{showSelectRelatedGoods}}"/>
src/subPackage/page/pages/grassCommunity/grassCommunity.wxss
......@@ -24,6 +24,7 @@
font-family: PingFangSC-Medium;
}
.title-border {
height: 66rpx;
border-bottom: 1px solid rgba(151, 151, 151, 0.3);
}
.related-goods {
......@@ -42,3 +43,46 @@
margin: 0 auto;
margin-top: 30rpx;
}
.page-upload-img{
display: flex;
flex-wrap: wrap;
margin-bottom: 20rpx;
}
.upload-wrap{
border-radius: 5rpx;
border: 1px solid rgba(216, 216, 216, 1);
line-height: 160rpx;
text-align: center;
}
.upload-text{
color: #aaaaaa;
}
.upload-img{
width: 160rpx;
height: 160rpx;
border: 1px solid rgba(216, 216, 216, 1);
}
.upload-img-wrap{
margin-right: 20rpx;
}
.item-img {
width: 100%;
height: 160rpx;
}
.flex-wrp {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.flex-item {
margin-bottom: 20rpx;
width: 21%;
height: 160rpx;
margin-left: 20rpx;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment