Browse Source

小程序:视频详情

panyong 2 years ago
parent
commit
57f593f2d1

+ 1 - 1
htmldev/wxMini/README.md

@@ -13,7 +13,7 @@
   - [x] VR看菜园 VR 4
   - [x] 频道:村长说农货 media 5
     - [x] 视频详情 mediaDetail 2
-- 优秀合作社 partner 4
+- [x] 优秀合作社 partner 4
 - 农事天地 news 4
 - 我的 mine 4
 - 商户端 businessHome 4

+ 5 - 0
htmldev/wxMini/pages/partner/partner.js

@@ -59,5 +59,10 @@ Page({
    */
   onShareAppMessage() {
 
+  },
+  jumpLeavingAMessage() {
+    wx.navigateTo({
+      url: '/pages/leavingAMessage/leavingAMessage'
+    })
   }
 })

+ 136 - 0
htmldev/wxMini/pages/partner/partner.scss

@@ -0,0 +1,136 @@
+.wrapper {
+  padding-top: 20rpx;
+  background: #FFF;
+}
+
+.leaving-a-message {
+  position: relative;
+  left: 0;
+  top: 0;
+}
+
+.leaving-a-message image {
+  display: block;
+  width: 40rpx;
+  height: 50rpx;
+  background: pink;
+}
+
+.leaving-a-message view {
+  position: absolute;
+  top: -9rpx;
+  right: -9rpx;
+  z-index: 1;
+  min-width: 36rpx;
+  min-height: 36rpx;
+  border-radius: 18rpx;
+  background: #FA5151;
+  font-size: 24rpx;
+  font-weight: 500;
+  color: #FFF;
+  line-height: 36rpx;
+  text-align: center;
+}
+
+.main {
+  width: 100%;
+  padding: 22rpx 0 328rpx;
+}
+
+.list {
+  width: 690rpx;
+  //min-height: 328rpx;
+  padding: 40rpx 20rpx 30rpx 34rpx;
+  margin: 0 auto;
+  border-radius: 24rpx;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
+}
+
+.top {
+  display: flex;
+}
+
+.photo-wrap {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 5rpx;
+  overflow: hidden;
+
+  image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: pink;
+  }
+}
+
+.name-wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 400rpx;
+  min-height: 100rpx;
+  padding: 0 22rpx;
+}
+
+.name {
+  display: -webkit-box;
+  width: 100%;
+  line-height: 40rpx;
+  font-size: 30rpx;
+  color: rgba(51, 51, 51, 1);
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  word-break: break-all;
+  word-wrap: break-word;
+}
+
+.abstract {
+  line-height: 34rpx;
+  font-size: 24rpx;
+  color: rgba(102, 102, 102, 1);
+}
+
+button.btn[type="default"] {
+  width: 136rpx;
+  height: 50rpx;
+  border-radius: 16rpx;
+  border: 2rpx solid rgba(107, 133, 89, 1);
+  background-color: transparent;
+  font-size: 24rpx;
+  color: rgba(107, 133, 89, 1);
+}
+
+.phone {
+  margin-top: 24rpx;
+}
+
+.wechat,
+.adress {
+  margin-top: 10rpx;
+}
+
+.phone,
+.wechat,
+.adress {
+  display: flex;
+
+  .label,
+  .value {
+    line-height: 38rpx;
+    font-size: 24rpx;
+    color: rgba(153, 153, 153, 1);
+  }
+}
+
+.label {
+  white-space: nowrap;
+}
+
+.value {
+  width: calc(100% - 72rpx);
+  word-break: break-all;
+  word-wrap: break-word;
+}

+ 45 - 0
htmldev/wxMini/pages/partner/partner.wxml

@@ -0,0 +1,45 @@
+<view class="wrapper">
+  <view class="app_page-header-search">
+    <view class="app_page-header-search-warp">
+      <label for="header-search">
+        <image src=""></image>
+      </label>
+      <input
+        placeholder-class="app_header-search-placeholder"
+        value=""
+        placeholder="搜索"></input>
+    </view>
+    <view
+      class="leaving-a-message"
+      bind:tap="jumpLeavingAMessage">
+      <image src=""></image>
+      <view>8</view>
+    </view>
+  </view>
+  <view class="main">
+    <view class="list">
+      <view class="top">
+        <view class="photo-wrap">
+          <image src=""></image>
+        </view>
+        <view class="name-wrap">
+          <view class="name">上三村合作社</view>
+          <view class="abstract">5商品 20人关注</view>
+        </view>
+        <button class="btn" type="default">查看详情</button>
+      </view>
+      <view class="phone">
+        <view class="label">电话:</view>
+        <view class="value">12345678901</view>
+      </view>
+      <view class="wechat">
+        <view class="label">微信:</view>
+        <view class="value">12345678901</view>
+      </view>
+      <view class="adress">
+        <text class="label">地址:</text>
+        <text class="value">浙江省绍兴市红河街道吧啦吧啦301</text>
+      </view>
+    </view>
+  </view>
+</view>