add: 社区关联商品弹框

src/component/selectRelatedGoods/selectRelatedGoods.js

+// 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

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

src/component/selectRelatedGoods/selectRelatedGoods.wxml

+
+<view class="modal-container{{show ? ' active' : ''}}" bindtap="hidePopup"></view>
+<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"></image>
+    <text class="modal-title">选择优惠券</text>
+    <image class="modal-close" mode="widthFix" src="/assets/imgs/7_1_0/close.png" bindtap="hidePopup"></image>
+  </view>
+
+  <view class="modal-info">
+    <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>
+      <image class="coupon-bg" src="/assets/imgs/7_1_0/disabled-coupon.png" mode="widthFix"></image>
+      <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"></image>
+          </view>
+        </view>
+      
+      </view>
+    </view>
+    <view class="empty-coupon">
+      暂无可用优惠券
+    </view>
+  </view>
+ 
+
+</view>

src/component/selectRelatedGoods/selectRelatedGoods.wxss

+/* component/selectRelatedGoods/selectRelatedGoods.wxss */
+@import "/app.wxss";
+.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; 
+}
+
+.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;
+}
\ No newline at end of file

src/subPackage/page/pages/grassCommunity/grassCommunity.js

@@ -9,7 +9,8 @@ wxService.page({
    * 页面的初始数据
    */
   data: {
-    pics:[]
+    pics:[],
+    showSelectRelatedGoods: false
   },
 
   /**
@@ -28,6 +29,9 @@ wxService.page({
   // 关联商品
   handleRelatedGoods(){
     console.log('关联商品')
+    this.setData({
+      showSelectRelatedGoods: true
+    })
   },
   uploadImg(){
     this.chooseImg()

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

@@ -30,4 +30,5 @@
 	</view>
 </view>
 <view class="post-notes fixed-bottom0">发布笔记</view>
+<select-related-goods show="{{showSelectRelatedGoods}}"/>