ui”

git commit -m ui”

README.en.md

@@ -1,36 +0,0 @@
-# RTCrm_User_Uniapp
-
-#### Description
-客户管理系统小程序端
-
-#### Software Architecture
-Software architecture description
-
-#### Installation
-
-1.  xxxx
-2.  xxxx
-3.  xxxx
-
-#### Instructions
-
-1.  xxxx
-2.  xxxx
-3.  xxxx
-
-#### Contribution
-
-1.  Fork the repository
-2.  Create Feat_xxx branch
-3.  Commit your code
-4.  Create Pull Request
-
-
-#### Gitee Feature
-
-1.  You can use Readme\_XXX.md to support different languages, such as Readme\_en.md, Readme\_zh.md
-2.  Gitee blog [blog.gitee.com](https://blog.gitee.com)
-3.  Explore open source project [https://gitee.com/explore](https://gitee.com/explore)
-4.  The most valuable open source project [GVP](https://gitee.com/gvp)
-5.  The manual of Gitee [https://gitee.com/help](https://gitee.com/help)
-6.  The most popular members  [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

components/StarRating.vue

@@ -0,0 +1,434 @@
+<template>
+  <view 
+    class="star-rating"
+    @touchstart="onTouchStart"
+    @touchmove="onTouchMove"
+    @touchend="onTouchEnd"
+  >
+    <!-- 星星容器 -->
+    <view 
+      v-for="(item, index) in count" 
+      :key="index" 
+      class="star-container"
+      @click="handleClick(index)"
+    >
+      <!-- 灰色背景星星 -->
+      <view class="star-background">
+        <u-icon name="star-fill" :color="inactiveColor" :size="size"></u-icon>
+      </view>
+      <!-- 黄色前景星星，使用宽度百分比控制 -->
+      <view 
+        class="star-foreground" 
+        :style="{ width: getStarWidth(index), color: activeColor }"
+      >
+        <u-icon name="star-fill" :color="activeColor" :size="size"></u-icon>
+      </view>
+    </view>
+    
+    <!-- 可选：显示评分值 -->
+    <text v-if="showScore" class="score-text">{{ displayValue }}</text>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'StarRating',
+  props: {
+    // 当前评分值（支持小数）
+    value: {
+      type: Number,
+      default: 0
+    },
+    // 星星总数
+    count: {
+      type: Number,
+      default: 5
+    },
+    // 是否禁用点击
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示分数
+    showScore: {
+      type: Boolean,
+      default: false
+    },
+    // 星星大小
+    size: {
+      type: [Number, String],
+      default: 28
+    },
+    // 选中颜色
+    activeColor: {
+      type: String,
+      default: '#ffd21e'
+    },
+    // 未选中颜色
+    inactiveColor: {
+      type: String,
+      default: '#e0e0e0'
+    },
+    // 是否允许半星
+    allowHalf: {
+      type: Boolean,
+      default: true
+    },
+    // 点击时是否启用动画
+    animation: {
+      type: Boolean,
+      default: true
+    },
+    // 是否启用滑动评分
+    swipeable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      currentValue: this.value,
+      // 滑动相关
+      startX: 0,
+      starWidth: 0,
+      isSwiping: false,
+      touchId: null
+    }
+  },
+  computed: {
+    // 格式化显示的值
+    displayValue() {
+      return this.currentValue.toFixed(1);
+    }
+  },
+  watch: {
+    value(newVal) {
+      this.currentValue = newVal;
+    }
+  },
+  mounted() {
+    // 获取星星宽度，用于滑动计算
+    this.$nextTick(() => {
+      this.calculateStarWidth();
+    });
+  },
+  methods: {
+    // 计算每个星星的填充百分比
+    getStarWidth(index) {
+      const starIndex = index + 1;
+      const value = this.currentValue;
+      
+      // 如果当前星星完全填充
+      if (value >= starIndex) {
+        return '100%';
+      }
+      
+      // 如果当前星星部分填充
+      if (value > starIndex - 1) {
+        if (this.allowHalf) {
+          // 计算小数部分
+          const decimalPart = value - (starIndex - 1);
+          return (decimalPart * 100) + '%';
+        } else {
+          // 如果不允许半星，则要么全满要么全空
+          return '0%';
+        }
+      }
+      
+      // 当前星星为空
+      return '0%';
+    },
+    
+    // 计算星星宽度
+    calculateStarWidth() {
+      const query = uni.createSelectorQuery().in(this);
+      query.select('.star-container').boundingClientRect(data => {
+        if (data) {
+          this.starWidth = data.width;
+        }
+      }).exec();
+    },
+    
+    // 触摸开始
+    onTouchStart(e) {
+      if (this.disabled || !this.swipeable) return;
+      
+      this.isSwiping = true;
+      this.startX = e.touches[0].clientX;
+      this.touchId = Date.now();
+    },
+    
+    // 触摸移动
+    onTouchMove(e) {
+      if (this.disabled || !this.swipeable || !this.isSwiping) return;
+      
+      const currentX = e.touches[0].clientX;
+      const deltaX = currentX - this.startX;
+      
+      // 如果没有星星宽度数据，则返回
+      if (!this.starWidth) return;
+      
+      // 计算移动的距离对应的星星数量
+      let starDelta = deltaX / this.starWidth;
+      
+      // 根据移动方向计算新评分
+      let newValue = this.currentValue;
+      
+      if (starDelta > 0) {
+        // 向右滑动，增加评分
+        newValue = Math.min(this.count, this.currentValue + starDelta);
+      } else if (starDelta < 0) {
+        // 向左滑动，减少评分
+        newValue = Math.max(0, this.currentValue + starDelta);
+      }
+      
+      // 如果不允许半星，则取整
+      if (!this.allowHalf) {
+        newValue = Math.round(newValue);
+      } else {
+        // 允许半星时，保留一位小数
+        newValue = Math.round(newValue * 2) / 2;
+      }
+      
+      // 限制范围
+      newValue = Math.max(0, Math.min(newValue, this.count));
+      
+      // 更新值
+      if (newValue !== this.currentValue) {
+        this.currentValue = newValue;
+        
+        // 节流触发事件
+        if (this.touchId) {
+          clearTimeout(this.touchId);
+          this.touchId = setTimeout(() => {
+            this.$emit('input', this.currentValue);
+            this.$emit('change', this.currentValue);
+          }, 50);
+        }
+      }
+    },
+    
+    // 触摸结束
+    onTouchEnd(e) {
+      if (this.disabled || !this.swipeable) return;
+      
+      this.isSwiping = false;
+      
+      // 触发最终事件
+      this.$emit('input', this.currentValue);
+      this.$emit('change', this.currentValue);
+      
+      // 添加动画效果
+      if (this.animation) {
+        this.animateAllStars();
+      }
+      
+      if (this.touchId) {
+        clearTimeout(this.touchId);
+        this.touchId = null;
+      }
+    },
+    
+    // 处理星星点击
+    handleClick(index) {
+      if (this.disabled) return;
+      
+      const starIndex = index + 1;
+      let newValue;
+      
+      if (this.allowHalf) {
+        // 如果允许半星，点击时切换 0.5 的增量
+        const currentStarValue = this.currentValue;
+        if (currentStarValue >= starIndex) {
+          // 如果点击已选中的星星，则减0.5
+          newValue = starIndex - 0.5;
+        } else if (currentStarValue >= starIndex - 0.5) {
+          // 如果点击半星，则设为全星
+          newValue = starIndex;
+        } else {
+          // 如果点击未选中的星星，则设为半星
+          newValue = starIndex - 0.5;
+        }
+      } else {
+        // 如果不允许半星，则直接设为整星
+        newValue = starIndex;
+      }
+      
+      // 限制在0到count之间
+      newValue = Math.max(0, Math.min(newValue, this.count));
+      
+      // 更新值
+      this.currentValue = newValue;
+      
+      // 触发动画
+      if (this.animation) {
+        this.animateStar(index);
+      }
+      
+      // 触发事件
+      this.$emit('input', newValue);
+      this.$emit('change', newValue);
+    },
+    
+    // 星星点击动画
+    animateStar(index) {
+      const stars = this.$el.querySelectorAll('.star-container');
+      if (stars && stars[index]) {
+        stars[index].classList.add('star-animate');
+        setTimeout(() => {
+          stars[index].classList.remove('star-animate');
+        }, 300);
+      }
+    },
+    
+    // 所有星星动画
+    animateAllStars() {
+      const stars = this.$el.querySelectorAll('.star-container');
+      if (stars) {
+        stars.forEach((star, index) => {
+          if (this.currentValue > index) {
+            setTimeout(() => {
+              star.classList.add('star-animate');
+              setTimeout(() => {
+                star.classList.remove('star-animate');
+              }, 300);
+            }, index * 50);
+          }
+        });
+      }
+    },
+    
+    // 设置评分（可以从外部调用）
+    setRating(value) {
+      if (this.disabled) return;
+      
+      let newValue = parseFloat(value);
+      if (isNaN(newValue)) return;
+      
+      // 限制范围
+      newValue = Math.max(0, Math.min(newValue, this.count));
+      
+      // 如果不允许半星，则四舍五入到整数
+      if (!this.allowHalf) {
+        newValue = Math.round(newValue);
+      } else {
+        // 允许半星时，保留一位小数
+        newValue = Math.round(newValue * 2) / 2;
+      }
+      
+      this.currentValue = newValue;
+      this.$emit('input', newValue);
+      this.$emit('change', newValue);
+      
+      // 触发动画
+      if (this.animation) {
+        this.animateAllStars();
+      }
+    },
+    
+    // 重置评分
+    reset() {
+      this.currentValue = 0;
+      this.$emit('input', 0);
+      this.$emit('change', 0);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.star-rating {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0;
+  touch-action: pan-x;
+  user-select: none;
+  
+  .star-container {
+    position: relative;
+    display: inline-block;
+    width: 56rpx;
+    height: 56rpx;
+    // margin-right: 8rpx;
+    transition: transform 0.3s ease;
+    
+    &:last-child {
+      margin-right: 0;
+    }
+    
+    &.star-animate {
+      animation: starPulse 0.3s ease;
+    }
+    
+    .star-background {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+    }
+    
+    .star-foreground {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 2;
+      overflow: hidden;
+      height: 56rpx;
+    }
+  }
+  
+  .score-text {
+    margin-left: 16rpx;
+    font-size: 28rpx;
+    color: #f0ad4e;
+    font-weight: 500;
+  }
+}
+
+// 动画效果
+@keyframes starPulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+// 设置不同大小的星星
+.star-rating.size-small {
+  .star-container {
+    width: 32rpx;
+    height: 32rpx;
+    margin-right: 4rpx;
+    
+    .star-foreground {
+      height: 32rpx;
+    }
+  }
+}
+
+.star-rating.size-large {
+  .star-container {
+    width: 80rpx;
+    height: 80rpx;
+    margin-right: 12rpx;
+    
+    .star-foreground {
+      height: 80rpx;
+    }
+  }
+}
+
+// 禁用状态
+.star-rating.disabled {
+  opacity: 0.6;
+  
+  .star-container {
+    cursor: not-allowed;
+  }
+}
+</style>

pages.json

@@ -66,12 +66,14 @@
 		{
 			"path": "pages/home/productSearch",
 			"style": {
-				"navigationBarTitleText": "商品搜索",
+				"navigationBarTitleText": "",
+				"navigationStyle": "custom",
+				"scrollIndicator": "none",
+				"navigationBarTextStyle": "black",
 				"app-plus": {
-					"titleNView": false
+					"bounce": "none"
 				}
 			}
-
 		},
 		{
 			"path": "pages/home/productList",
@@ -783,10 +785,16 @@
 					}
 
 				}, {
+					// 药品列表
 					"path": "shopping/productList",
 					"style": {
-						"navigationBarTitleText": "药品列表",
-						"enablePullDownRefresh": false
+						"navigationBarTitleText": "",
+						"navigationStyle": "custom",
+						"scrollIndicator": "none",
+						"navigationBarTextStyle": "black",
+						"app-plus": {
+							"bounce": "none"
+						}
 					}
 
 				},
@@ -955,7 +963,91 @@
 							"bounce": "none"
 						}
 					}
+				},
+				{
+					"path" : "live/expert",
+					"style": {
+						"navigationBarTitleText": "",
+						"navigationStyle": "custom",
+						"scrollIndicator": "none",
+						"navigationBarTextStyle": "black",
+						"app-plus": {
+							"bounce": "none"
+						}
+					}
+				},
+				{
+					// 直播预告和直播中列表
+					"path" : "live/list",
+					"style": {
+						"navigationBarTitleText": "",
+						"navigationStyle": "custom",
+						"scrollIndicator": "none",
+						"navigationBarTextStyle": "black",
+						"app-plus": {
+							"bounce": "none"
+						}
+					}
+				},{
+					// 实时销售榜
+					"path" : "live/salesRanking",
+					"style": {
+						"navigationBarTitleText": "",
+						"navigationStyle": "custom",
+						"scrollIndicator": "none",
+						"navigationBarTextStyle": "black",
+						"app-plus": {
+							"bounce": "none"
+						}
+					}
+				},{
+					// 生活号
+					"path" : "live/life",
+					"style": {
+						"navigationBarTitleText": "",
+						"navigationStyle": "custom",
+						"scrollIndicator": "none",
+						"navigationBarTextStyle": "black",
+						"app-plus": {
+							"bounce": "none"
+						}
+					}
+				},{
+					"path" : "live/trailer",
+					"style": {
+						"navigationBarTitleText": "直播预告",
+						"navigationBarTextStyle": "black",
+						"app-plus": {
+							"bounce": "none"
+						}
+					}
+				},
+				{
+					// 生活号文章
+					"path" : "live/article",
+					"style": {
+						"navigationBarTitleText": "",
+						"navigationStyle": "custom",
+						"scrollIndicator": "none",
+						"navigationBarTextStyle": "black",
+						"app-plus": {
+							"bounce": "none"
+						}
+					}
+				},{
+					// 店铺
+					"path": "live/shop",
+					"style": {
+						"navigationBarTitleText": "",
+						"navigationStyle": "custom",
+						"scrollIndicator": "none",
+						"navigationBarTextStyle": "black",
+						"app-plus": {
+							"bounce": "none"
+						}
+					}
 				}
+				
 
 			]
 		},

pages/home/productSearch.vue

@@ -1,31 +1,101 @@
 <template>
-	<view class="content">
-		<!-- 搜索框 -->
-		<view class="search-cont">
-			<view class="inner">
-				<image class="icon-search" src="../../static/images/search.png" mode=""></image>
-				<input type="text" value="" placeholder="输入药品名称" confirm-type="搜索" @confirm="goSearch" :focus='setFocus' placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
-			</view>
+	<view class="content">
+		<view class="status_bar" :style="{height: statusBarHeight}"></view>
+		<!-- 搜索框 -->
+		<view class="search-cont">
+			<image class="w64 h64" src="/static/images/back_black.png"></image>
+			<view class="inner">
+				<!-- <image class="icon-search" src="../../static/images/search.png" mode=""></image> -->
+				<input type="text" value="" placeholder="城口腊肉/香肠" confirm-type="搜索" @confirm="goSearch"
+					:focus='setFocus' placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
+				<view class="line"></view>
+				<view class="search">搜索</view>
+			</view>
 		</view>
-		<!-- 搜索历史 -->
-		<view class="title-box">
-			<text class="title">历史搜索</text>
-			<image src="../../static/images/del.png" mode="" @click="clearHistory"></image>
-		</view>
-		<view class="data-list">
-			<view class="item" v-for="(item,index) in searchHistory" :key="index" @click="doSearch(item)">
-				{{ item }}
-			</view>
+		<!-- 搜索历史 -->
+		<!-- <view class="title-box">
+			<text class="title">历史搜索</text>
+			<image src="../../static/images/del.png" mode="" @click="clearHistory"></image>
 		</view>
-		<!-- 推荐搜索 -->
-		<view class="title-box">
-			<text class="title">推荐搜索</text>
-		</view>
-		<view class="data-list">
-			<view class="item" v-for="(item,index) in topSearch" :key="index" @click="doSearch(item)">
-				{{ item }}
-			</view>
+		<view class="data-list">
+			<view class="item" v-for="(item,index) in searchHistory" :key="index" @click="doSearch(item)">
+				{{ item }}
+			</view>
+		</view> -->
+
+		<!-- 热门搜索 -->
+		<view class="title-box">
+			<text class="title">热门搜索</text>
+			<image class="w32 h32" src="/static/images/delete_icon.png"></image>
+		</view>
+		<view class="popular-list">
+			<view class="item" v-for="(item,index) in topSearch" :key="index" @click="doSearch(item)">
+				{{ item }}
+			</view>
+		</view>
+		<!-- 推荐搜索 -->
+		<view class="title-box">
+			<text class="title">大家都在搜</text>
+			<image class="w32 h32" src="/static/images/refresh_icon.png"></image>
 		</view>
+		<view class="data-list">
+			<view class="item" v-for="(item,index) in topSearch" :key="index" @click="doSearch(item)">
+				<text> {{ item }}</text>
+				<image class="w40 h40 ml8" src="/static/images/hot.png"></image>
+			</view>
+		</view>
+
+		<scroll-view class="card-group" scroll-x="true" show-scrollbar="false" enhanced="true" enable-flex="true">
+			<!-- 今日热卖榜 -->
+			<view class="card border1">
+				<image class="card-bg" src="/static/images/hot_selling.png"></image>
+				<view class="card-title">
+					<image class="w40 h40 ml8" src="/static/images/hot.png"></image>
+					<text class="title1">今日热卖榜</text>
+				</view>
+				<view class="product-list">
+					<view class="product-item">
+						<view class="left">
+							<image class="photo" src="/static/images/img.png"></image>
+							<view class="lable">1</view>
+						</view>
+						<view class="right">
+							<view class="title">乌灵胶囊81粒养心安神失乌灵胶囊81粒养心安神失眠乌灵胶囊81粒养心安神失眠眠健...</view>
+							<view class="txt">肌肉酸疼、扭伤拉伤</view>
+							<view class="num-box">
+								<view class="price"><text class="symbol">￥</text><text class="bold">89</text>.48</view>
+								<view class="sale">已售 5485</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<!-- 30天新品热销榜单 -->
+			<view class="card ml24 border2">
+				<image class="card-bg" src="/static/images/new_hot.png"></image>
+				<view class="card-title">
+					<image class="w40 h40 ml8" src="/static/images/new_product.png"></image>
+					<text class="title1">30天新品热销榜单</text>
+				</view>
+				<view class="product-list">
+					<view class="product-item">
+						<view class="left">
+							<image class="photo" src="/static/images/img.png"></image>
+							<view class="lable">1</view>
+						</view>
+						<view class="right">
+							<view class="title">乌灵胶囊81粒养心安神失乌灵胶囊81粒养心安神失眠乌灵胶囊81粒养心安神失眠眠健...</view>
+							<view class="txt">肌肉酸疼、扭伤拉伤</view>
+							<view class="num-box">
+								<view class="price"><text class="symbol">￥</text><text class="bold">89</text>.48</view>
+								<view class="sale">已售 5485</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
 	</view>
 </template>
 
@@ -33,100 +103,280 @@
 	export default {
 		data() {
 			return {
-				setFocus: false,
-				// 历史搜索
-				searchHistory: [],
-				// 推荐搜索
+				// 状态栏的高度
+				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
+				setFocus: false,
+				// 历史搜索
+				searchHistory: [],
+				// 推荐搜索
 				topSearch: []
 			};
-		},
-		onShow() {
-			this.setFocus = true
-			this.searchHistory=this.utils.getHisSearch();
-			var config=uni.getStorageSync('config');
-			if(config!=null&&config!=undefined&&config!=""){
-				this.topSearch=JSON.parse(config).hotSearch.split(',');
-			}
-		},
-		methods:{
-			// 清空历史搜索数据
-			clearHistory() {
-				this.utils.clearHisSearch();
-				this.searchHistory=this.utils.getHisSearch();
-			},
-			doSearch(item){
-				uni.navigateTo({
					url: './productList?key=' + item
				})
-			},
-			goSearch(e) {
-				if(e.detail.value!=null&&e.detail.value!=""){
-					this.utils.addHisSearch(e.detail.value);
-				}
-				uni.navigateTo({
-					url: './productList?key=' + e.detail.value
-				})
-			}
+		},
+		onShow() {
+			this.setFocus = true
+			this.searchHistory = this.utils.getHisSearch();
+			var config = uni.getStorageSync('config');
+			if (config != null && config != undefined && config != "") {
+				this.topSearch = JSON.parse(config).hotSearch.split(',');
+			}
+		},
+		methods: {
+			// 清空历史搜索数据
+			clearHistory() {
+				this.utils.clearHisSearch();
+				this.searchHistory = this.utils.getHisSearch();
+			},
+			doSearch(item) {
+				uni.navigateTo({
+					url: './productList?key=' + item
+				})
+			},
+			goSearch(e) {
+				if (e.detail.value != null && e.detail.value != "") {
+					this.utils.addHisSearch(e.detail.value);
+				}
+				uni.navigateTo({
+					url: './productList?key=' + e.detail.value
+				})
+			}
 		}
 	}
 </script>
 
 <style lang="scss">
-	.content{
-		.search-cont{
-			padding: 16upx 30upx;
-			background-color: #FFFFFF;
-			.inner{
-				box-sizing: border-box;
-				width: 100%;
-				height: 72upx;
-				background: #F7F7F7;
-				border-radius: 36upx;
-				display: flex;
-				align-items: center;
-				padding: 0 30upx;
-				.icon-search{
-					width: 28upx;
-					height: 28upx;
-					margin-right: 20upx;
-				}
-				input{
-					height: 60upx;
-					line-height: 60upx;
-					flex: 1;
-				}
-			}
-		}
-		.title-box{
-			padding: 30upx;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			.title{
-				font-size: 30upx;
-				font-family: PingFang SC;
-				font-weight: bold;
-				color: #111111;
-			}
-			image{
-				width: 30upx;
-				height: 30upx;
-			}
-		}
-		.data-list{
-			padding: 0upx 10upx 30upx;
-			display: flex;
-			flex-wrap: wrap;
-			.item{
-				padding: 0 30upx;
-				height: 56upx;
-				line-height: 56upx;
-				font-size: 26upx;
-				font-family: PingFang SC;
-				font-weight: 500;
-				color: #333333;
-				background: #F5F5F5;
-				border-radius: 28upx;
-				margin: 0 20upx 20upx 0;
-			}
-		}
+	page {
+		background-color: #ffffff;
+	}
+
+	.content {
+		.search-cont {
+			display: flex;
+			padding: 16rpx 30rpx;
+			background-color: #FFFFFF;
+
+			.inner {
+				box-sizing: border-box;
+				width: 436rpx;
+				height: 64rpx;
+				background: #F5F7FA;
+				border-radius: 36rpx;
+				display: flex;
+				align-items: center;
+				padding: 0 24rpx;
+
+				.search {
+					font-weight: 500;
+					font-size: 28rpx;
+					color: #333333;
+				}
+
+				.line {
+					width: 2rpx;
+					height: 24rpx;
+					background: #999999;
+					margin: 0 26rpx;
+				}
+
+				input {
+					height: 60rpx;
+					line-height: 60rpx;
+					flex: 1;
+				}
+			}
+		}
+
+		.title-box {
+			padding: 30rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.title {
+				font-weight: 600;
+				font-size: 32rpx;
+				color: #000000;
+			}
+
+			image {
+				width: 30rpx;
+				height: 30rpx;
+			}
+		}
+
+		.data-list {
+			padding: 0rpx 10rpx 30rpx;
+			display: grid;
+			grid-template-columns: repeat(2, 1fr);
+			/* 两列布局 */
+			grid-gap: 20rpx;
+
+			.item {
+				padding: 0 30rpx;
+				height: 56rpx;
+				line-height: 56rpx;
+				font-size: 26rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #4D4D4D;
+				border-radius: 28rpx;
+				margin: 0;
+				display: flex;
+				align-items: center;
+				text-align: center;
+			}
+		}
+
+		.popular-list {
+			padding: 0rpx 10rpx 30rpx;
+			display: flex;
+			flex-wrap: wrap;
+
+			.item {
+				padding: 0 40rpx;
+				height: 56rpx;
+				line-height: 56rpx;
+				font-size: 26rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #4D4D4D;
+				background: #F5F7FA;
+				border-radius: 28rpx;
+				margin: 0 20rpx 20rpx 0;
+			}
+		}
+
+		.card-group {
+			display: flex;
+			padding: 0 24rpx;
+			box-sizing: border-box;
+
+			.card {
+				width: 600rpx;
+				padding: 26rpx 32rpx 0;
+				background: #FFFFFF;
+				border-radius: 24rpx 24rpx 24rpx 24rpx;
+				position: relative;
+				z-index: 0;
+				.card-bg{
+					width: 100%;
+					height: 96rpx;
+					position: absolute;
+					top: 0;
+					left: 0;
+					border-radius: 24rpx 24rpx 0 0;
+					z-index: -1;
+				}
+				.card-title {
+					display: flex;
+					align-items: center;
+					font-weight: 600;
+					font-size: 32rpx;
+					margin-bottom: 34rpx;
+
+					.title1 {
+						color: #FF4400;
+					}
+
+					.title2 {
+						color: #D46C0D;
+					}
+				}
+
+				.product-list {
+					.product-item {
+						display: flex;
+						align-items: center;
+						margin-bottom: 40rpx;
+
+						.left {
+							margin-right: 22rpx;
+							width: 120rpx;
+							height: 120rpx;
+							border-radius: 8rpx 8rpx 8rpx 8rpx;
+							overflow: hidden;
+							position: relative;
+
+							.photo {
+								width: 100%;
+								height: 100%;
+							}
+
+							.lable {
+								position: absolute;
+								left: 0;
+								top: 0;
+								width: 32rpx;
+								height: 32rpx;
+								text-align: center;
+								line-height: 32rpx;
+								background: linear-gradient(135deg, #C1C5CD 0%, #A5AAB5 100%);
+								border-radius: 8rpx 0rpx 8rpx 0rpx;
+								font-family: Roboto, Roboto;
+								font-weight: 500;
+								font-size: 24rpx;
+								color: #FFFFFF;
+
+							}
+						}
+
+						.right {
+							flex: 1;
+							min-width: 0;
+
+							.title {
+								font-weight: 500;
+								font-size: 28rpx;
+								color: #333333;
+								overflow: hidden;
+								/* 隐藏溢出内容 */
+								text-overflow: ellipsis;
+								/* 显示省略号 */
+								white-space: nowrap;
+								/* 不换行 */
+							}
+
+							.txt {
+								font-size: 22rpx;
+								color: #999999;
+								margin: 4rpx 0 20rpx;
+							}
+
+							.num-box {
+								display: flex;
+								justify-content: space-between;
+								align-items: flex-end;
+
+								.price {
+									font-family: Roboto, Roboto;
+									font-weight: 600;
+									font-size: 26rpx;
+									color: #FA341E;
+
+									.symbol {
+										font-size: 20rpx;
+									}
+
+									.bold {
+										font-size: 36rpx;
+									}
+								}
+
+								.sale {
+									font-size: 21rpx;
+									color: #999999;
+								}
+							}
+						}
+
+					}
+				}
+			}
+			.border1{
+				border: 1rpx solid rgba(241,89,38,0.5);
+			}
+			.border2{
+				border: 1rpx solid rgba(244,160,7,0.5);
+			}
+		}
 	}
-</style>
+</style>

pages/shopping/index.vue

@@ -1,73 +1,190 @@
 <template>
 	<view class="content">
 		<view class="top-content">
+			<image class="bg" src="/static/images/classification-bg.png"></image>
 			<view class="status_bar" :style="{height: statusBarHeight}"></view>
 			<!-- 这里是状态栏 -->
-			<view class="top-title">健康商城</view>
+			<!-- <view class="top-title">健康商城</view> -->
 			<!-- 搜索框 -->
 			<view class="search-cont">
+				<image class="back" src="../../static/images/back_black.png" mode=""></image>
 				<view class="inner">
 					<image class="icon-search" src="../../static/images/search.png" mode=""></image>
-					<input type="text" disabled   confirm-type="搜索" @click="toSearch" placeholder="输入药品名称" placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
+					<input type="text" disabled confirm-type="搜索" @click="toSearch" placeholder="搜索您喜欢的商品"
+						placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
 				</view>
 			</view>
+			<!-- 栏目 -->
+			<view class="column-box" :class="isExpand?'column-box2':''">
+				<!-- <view class="column-list" :class="isExpand?'column-list2':''">
+					<view class="item" v-for="(item,index) in columnList" :key="index" @click="selectColumn(item)">
+						<view class="img-item" :class="index===activeIndex?'active':''">
+							<image class="img" src="../../static/images/img.png" mode=""></image>
+						</view>
+						<view class="name" :class="index===activeIndex?'active':''">{{item.name}}</view>
+					</view>
+				</view> -->
+				<scroll-view 
+				          class="column-list-scroll" 
+				          :class="isExpand?'column-list2':''"
+				          scroll-x="true" 
+				          :scroll-with-animation="true"
+				          :show-scrollbar="false"
+				          :enable-flex="true"
+				        >
+				          <view class="column-list" :class="isExpand?'column-list2':''">
+				            <view class="item" v-for="(item,index) in columnList" :key="index" @click="selectColumn(item)">
+				              <view class="img-item" :class="index===activeIndex?'active':''">
+				                <image class="img" src="../../static/images/img.png" mode=""></image>
+				              </view>
+				              <view class="name" :class="index===activeIndex?'active':''">{{item.name}}</view>
+				            </view>
+				          </view>
+				        </scroll-view>
+				<view class="expand" @click="expand" :class="{'expand2': isExpand}">
+					<view>{{isExpand ? '收起' : '展开'}}</view>
+					<image class="expand-icon"
+						:src="isExpand ? '../../static/images/retract.png' : '../../static/images/expand.png'" mode="">
+					</image>
+				</view>
+			</view>
+
 		</view>
-		<view  :style="{height: divHeight}"   class="medic-box">
+		<view :style="{height: divHeight}" class="medic-box">
 			<view class="cate-list">
-				<view 
-					v-for="(item,index) in cates" 
-					:key="index" 
-					:class="cateSelect == item.cateId?'item active':'item'" 
-					@click="choseCate(item)"
-				>{{item.cateName }}</view>
+				<view v-for="(item,index) in cates" :key="index" :class="cateSelect == item.cateId?'item active':'item'"
+					@click="choseCate(item)">
+					<image class="line" v-if="cateSelect == item.cateId" src="/static/images/select_hover_line.png"
+						mode=""></image>
+					{{item.cateName }}
+				</view>
 			</view>
 			<view class="medic">
+				<view class="medic-list">
+					<view v-for="(item,index) in dataList" :key="index" class="item" @click="showDetail(item)">
+						<view class="img-box">
+							<image :src="item.image" mode="aspectFit"></image>
+						</view>
+						<view class="info-box">
+							<view class="title ellipsis2">{{item.productName}}</view>
+							<view class="intro ellipsis">{{item.productInfo}}</view>
+							<view class="sale">已售 {{item.sales}} {{item.unitName}} | 惊艳度98%</view>
+							<view class="lable-group">
+								<view class="lable-item">9.5折</view>
+								<view class="lable-item">限购1份</view>
+							</view>
+							<view class="prce-num">
+								<view class="price">
+									<text class="unit">¥</text><text
+										class="bold">{{splitPrice(item.price).integer}}</text>.{{splitPrice(item.price).decimal}}
+								</view>
+								<view class="cart-img" @click="navgetTo('../shopping/cart')">
+									<image class="w40 h40" src="/static/images/add_car.png"></image>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
 				<!-- 轮播图 -->
-				<view class="banner-box">
-					<swiper
-						class="swiper" 
-						:indicator-dots="true" 
-						:circular="true" 
-						:autoplay="true" 
-						:interval="3000" 
-						:duration="1000"
-						indicator-color="rgba(255, 255, 255, 0.6)"
-						indicator-active-color="#ffffff"
-					>
-						<swiper-item class="swiper-item" v-for="(item,index) in advs" :key="index" @click="handleAdvClick(item)">
+				<!-- <view class="banner-box">
+					<swiper class="swiper" :indicator-dots="true" :circular="true" :autoplay="true" :interval="3000"
+						:duration="1000" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff">
+						<swiper-item class="swiper-item" v-for="(item,index) in advs" :key="index"
+							@click="handleAdvClick(item)">
 							<image :src="item.imageUrl" mode=""></image>
 						</swiper-item>
 					</swiper>
-				</view>
+				</view> -->
 				<!-- 药品列表 -->
-				<view class="medic-list">
-						<!-- <view class="item" v-for="(item,index) in subCates" :key="index">
-							<view class="title">{{item.cateName}}</view> -->
-							<view class="inner-list">
-								<view class="definite"v-for="(subItem,index) in subCates"   @click="showProductList(subItem)">
-									<view class="img-box">
-										<image :src="subItem.pic" mode="aspectFit"></image>
-									</view>
-									<view class="name ellipsis">{{subItem.cateName}}</view>
-								</view>
+				<!-- <view class="medic-list">
+					<view class="inner-list">
+						<view class="definite" v-for="(subItem,index) in subCates" @click="showProductList(subItem)">
+							<view class="img-box">
+								<image :src="subItem.pic" mode="aspectFit"></image>
 							</view>
-					<!-- 	</view> -->
-				</view>
+							<view class="name ellipsis">{{subItem.cateName}}</view>
+						</view>
+					</view>
+				</view> -->
 			</view>
 		</view>
 	</view>
 </template>
 
 <script>
-	import {getProductCate} from '@/api/product'
-	import {getAdv} from '@/api/adv'
+	import {
+		getProductCate
+	} from '@/api/product'
+	import {
+		getAdv
+	} from '@/api/adv'
 	export default {
 		data() {
 			return {
-				divHeight:'0px',
-				allCates:[],
-				cates:[],
-				subCates:[],
+				isExpand: false, //是否展开
+				activeIndex: 0,
+				columnList: [{
+					name: "中秋佳礼",
+					img: "/static/images/img.png",
+					value: 0
+				}, {
+					name: "中秋佳礼",
+					img: "/static/images/img.png",
+					value: 1
+				}, {
+					name: "中秋佳礼",
+					img: "/static/images/img.png",
+					value: 2
+				}, {
+					name: "中秋佳礼",
+					img: "/static/images/img.png",
+					value: 3
+				}, {
+					name: "中秋佳礼",
+					img: "/static/images/img.png",
+					value: 4
+				}, {
+					name: "中秋佳礼",
+					img: "/static/images/img.png",
+					value: 5
+				}, {
+					name: "中秋佳礼",
+					img: "/static/images/img.png",
+					value: 6
+				}, {
+					name: "中秋佳礼",
+					img: "/static/images/img.png",
+					value: 7
+				}],
+				dataList: [{
+					cateId: 364,
+					image: "https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20251216/6a3c96bd3fc44b15b760871670302e9a.jpg",
+					otPrice: 268,
+					price: 98,
+					productId: 66050,
+					productInfo: "电肌肉刺激(EMS)，又称神经肌肉电刺激，是利用电脉冲诱发多发性肌肉收缩；中枢神经系统使肌肉收缩；EMS被证明是一种积极的肌肉强化工具。↵EMS的用途：肌肉强化，预防废肌萎缩，肌肉松弛，缓解酸痛，放松肌肉，美容肌肉调理。",
+					productName: "佟络宝®健步器",
+					sales: 1026,
+					unitName: "个",
+					warehouseCode: "JST001",
+					warehouseId: 3,
+				}, {
+					cateId: 364,
+					image: "https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20251204/c53bb29cf794468ba59ee2d60983b92f.jpg",
+					otPrice: 298,
+					price: 138,
+					productId: 65920,
+					productInfo: "1、取本品1包放入脚盆，倒入适量沸水浸泡搅拌，约5-10分钟，再加入适量温水或冷水调至适宜水温即可足浴，泡脚15- 25分钟。↵2、取本品1包放入锅内煮约5分钟，将煮好的水倒入脚盆，再加入适量温水或冷水调至适宜温度即可足浴，泡脚15-25分钟。",
+					productName: "[九仙汤]除痹通络汤 30克x30包",
+					sales: 6042,
+					unitName: "盒",
+					warehouseCode: "JST001",
+					warehouseId: 3,
+				}],
+				divHeight: '0px',
+				allCates: [],
+				cates: [],
+				subCates: [],
 				// 状态栏的高度
 				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
 				// 选中药品分类
@@ -78,81 +195,98 @@
 		},
 		onLoad() {
 			uni.showShareMenu({
-				withShareTicket:true,
+				withShareTicket: true,
 				//小程序的原生菜单中显示分享按钮，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
-				menus:["shareAppMessage","shareTimeline"] //不设置默认发送给朋友
+				menus: ["shareAppMessage", "shareTimeline"] //不设置默认发送给朋友
 			})
 			this.getProductCate();
 		},
 		onShow() {
-			var that=this;
-			setTimeout(function(){
+			var that = this;
+			setTimeout(function() {
 				let info = uni.createSelectorQuery().select(".top-content");
-		　　　  info.boundingClientRect(function(data) { //data - 各种参数
-		　　　  　 	console.log(data.height)  // 获取元素宽度
-					// console.log(uni.upx2px(10)) 
-					that.divHeight="calc(100% - "+data.height+"px)"
-		　　    }).exec()
-			},500);
+				info.boundingClientRect(function(data) { //data - 各种参数
+					console.log(data.height) // 获取元素宽度
+					// console.log(uni.rpx2px(10)) 
+					that.divHeight = "calc(100% - " + data.height + "px)"
+				}).exec()
+			}, 500);
 			this.getAdv();
 		},
-		methods:{
-			divHeight(){
-			   return 'height:calc(100% - ${this.top}px);'
+		methods: {
+			splitPrice(price) {
+				const priceStr = parseFloat(price).toFixed(2).toString();
+				return {
+					integer: priceStr.split('.')[0],
+					decimal: priceStr.split('.')[1]
+				};
+			},
+			// 展开
+			expand() {
+				this.isExpand = !this.isExpand;
+			},
+			// 选择栏目
+			selectColumn(item) {
+				console.log("打印item", item.value);
+				this.activeIndex = item.value;
 			},
+
+			// divHeight() {
+			// 	return 'height:calc(100% - ${this.top}px);'
+			// },
 			toSearch() {
 				uni.navigateTo({
 					url: '../home/productSearch'
 				})
 			},
-			handleAdvClick(item){
+			handleAdvClick(item) {
 				console.log(item);
-				if(item.showType==1){
-					uni.setStorageSync('url',item.advUrl);
+				if (item.showType == 1) {
+					uni.setStorageSync('url', item.advUrl);
 					uni.navigateTo({
-						url:"../home/h5"
+						url: "../home/h5"
+					})
+				} else if (item.showType == 2) {
+					uni.navigateTo({
+						url: item.advUrl
+					})
+				} else if (item.showType == 3) {
+					uni.setStorageSync('content', item.content);
+					uni.navigateTo({
+						url: "../home/content"
 					})
 				}
-				else if(item.showType==2){
-					 uni.navigateTo({
-					 	url:item.advUrl
-					 })
-				}
-				else if(item.showType==3){
-					 uni.setStorageSync('content',item.content);
-					 uni.navigateTo({
-					 	url:"../home/content"
-					 })
-				}
-				
+
 			},
-			getAdv(){
-				let data = {advType:2};
+			getAdv() {
+				let data = {
+					advType: 2
+				};
 				getAdv(data).then(
 					res => {
-						if(res.code==200){
-							this.advs=res.data;
+						if (res.code == 200) {
+							this.advs = res.data;
 						}
 					},
 					rej => {}
 				);
 			},
-			getProductCate(){
+			getProductCate() {
 				let data = {};
 				getProductCate(data).then(
 					res => {
-						if(res.code==200){
-							this.allCates=res.data;
-							this.cates = this.allCates.filter(function (item) {
-							     return item.pid==0
+						if (res.code == 200) {
+							this.allCates = res.data;
+							this.cates = this.allCates.filter(function(item) {
+								return item.pid == 0
 							});
-							if(this.cates!=null&&this.cates.length>0){
-								this.cateSelect=this.cates[0].cateId;
+							if (this.cates != null && this.cates.length > 0) {
+								this.cateSelect = this.cates[0].cateId;
 								this.getSubCate()
 							}
-						}else{
+						} else {
 							uni.showToast({
-								icon:'none',
+								icon: 'none',
 								title: "请求失败",
 							});
 						}
@@ -164,29 +298,29 @@
 			choseCate(item) {
 				this.cateSelect = item.cateId;
 				this.getSubCate()
-				
+
 			},
-			getSubCate(){
-				var that=this;
-				this.subCates = this.allCates.filter(function (item) {
+			getSubCate() {
+				var that = this;
+				this.subCates = this.allCates.filter(function(item) {
 					// let subList = that.allCates.filter(child => {
 					// 	//返回每一项的子级数组
 					// 	return child.pid === item.cateId
 					// });
 					// subList.length > 0 ? item.children = subList : [];
-				    return item.pid==that.cateSelect
+					return item.pid == that.cateSelect
 				});
-				 
+
 				console.log(this.subCates);
 			},
 			// 查看药品详情
 			showProductList(item) {
 				uni.navigateTo({
-					url: '/pages_shopping/shopping/productList?cateId='+item.cateId+"&pid="+item.pid
+					url: '/pages_shopping/shopping/productList?cateId=' + item.cateId + "&pid=" + item.pid
 				})
 			},
 			goSearch(e) {
-				if(e.detail.value!=null&&e.detail.value!=""){
+				if (e.detail.value != null && e.detail.value != "") {
 					this.utils.addHisSearch(e.detail.value);
 				}
 				uni.navigateTo({
@@ -198,158 +332,321 @@
 </script>
 
 <style lang="scss">
-	page{
+	page {
 		height: 100%;
 		background-color: #fff;
 	}
-	
-	.content{
+
+	.content {
 		height: 100%;
 		display: flex;
 		flex-direction: column;
-		.top-content{
+
+		.top-content {
+			background: linear-gradient(180deg, #E1FAEF 0%, #FFFFFF 100%);
+			box-shadow: 0rpx 6rpx 8rpx 0rpx rgba(187, 187, 187, 0.15);
 			width: 100%;
 			z-index: 10;
-			.top-title{
-				height: 88upx;
-				line-height: 88upx;
-				font-size: 42upx;
+			position: relative;
+
+			.bg {
+				position: absolute;
+				top: 0;
+				z-index: -1;
+				width: 100%;
+				height: 372rpx;
+			}
+
+			.top-title {
+				height: 88rpx;
+				line-height: 88rpx;
+				font-size: 42rpx;
 				font-family: Source Han Sans CN;
 				font-weight: bold;
 				color: #222222;
-				padding-left: 41upx;
+				padding-left: 41rpx;
 				background-color: #FFFFFF;
 			}
-			.search-cont{
-				padding: 16upx 30upx;
-				background-color: #FFFFFF;
-				.inner{
+
+			.search-cont {
+				display: flex;
+				padding: 6rpx 30rpx;
+
+				.back {
+					width: 64rpx;
+					height: 64rpx;
+				}
+
+				.inner {
 					box-sizing: border-box;
-					width: 100%;
-					height: 72upx;
-					background: #F7F7F7;
-					border-radius: 36upx;
+					width: 436rpx;
+					height: 64rpx;
+					background: #ffffff;
+					border-radius: 32rpx;
 					display: flex;
 					align-items: center;
-					padding: 0 30upx;
-					.icon-search{
-						width: 28upx;
-						height: 28upx;
-						margin-right: 20upx;
+					padding: 0 24rpx;
+
+					.icon-search {
+						width: 28rpx;
+						height: 28rpx;
+						margin-right: 20rpx;
 					}
-					input{
-						height: 60upx;
-						line-height: 60upx;
+
+					input {
+						height: 60rpx;
+						line-height: 60rpx;
 						flex: 1;
 					}
 				}
 			}
+
+			.column-box {
+			  display: flex;
+			  padding-left: 16rpx;
+			  margin: 16rpx 0 24rpx;
+			  
+			  &.column-box2 {
+			    display: flex;
+			    flex-direction: column;
+			  }
+			  
+			  .column-list-scroll {
+			    flex: 1;
+			    overflow: hidden;
+			    white-space: nowrap;
+			    
+			    &.column-list2 {
+			      flex-wrap: wrap;
+			      height: auto;
+			    }
+			    
+			    .column-list {
+			      display: inline-flex;  // 改为行内flex
+			      align-items: center;
+			      padding-bottom: 10rpx; // 增加底部padding，防止滚动条遮挡
+			      
+			      &.column-list2 {
+			        display: flex;
+			        flex-wrap: wrap;
+			        width: 100%;
+			      }
+			      
+			      .item {
+			        display: inline-flex;  // 改为行内flex
+			        flex-direction: column;
+			        align-items: center;
+			        margin-right: 16rpx;
+			        margin-bottom: 20rpx;
+			        flex-shrink: 0; // 防止收缩
+			        
+			        .img-item {
+			          width: 88rpx;
+			          height: 88rpx;
+			          flex-shrink: 0;
+			          
+			          &.active {
+			            border: 3rpx solid #02B176;
+			            box-sizing: border-box;
+			            border-radius: 44rpx;
+			          }
+			          
+			          .img {
+			            width: 100%;
+			            height: 100%;
+			            border-radius: 44rpx;
+			          }
+			        }
+			        
+			        .name {
+			          width: 128rpx;
+			          height: 44rpx;
+			          font-size: 24rpx;
+			          color: #333333;
+			          text-align: center;
+			          line-height: 44rpx;
+			          margin-top: 16rpx;
+			          white-space: nowrap;
+			          overflow: hidden;
+			          text-overflow: ellipsis;
+			          
+			          &.active {
+			            font-weight: 500;
+			            color: #FFFFFF;
+			            background: #02B176;
+			            border-radius: 22rpx;
+			          }
+			        }
+			      }
+			    }
+			  }
+			  
+			  .expand {
+			    margin: 0 20rpx;
+			    font-size: 24rpx;
+			    color: #000000;
+			    width: 24rpx;
+			    display: flex;
+			    flex-direction: column;
+			    align-items: center;
+			    flex-shrink: 0; // 防止收缩
+			    
+			    .expand-icon {
+			      width: 24rpx;
+			      height: 24rpx;
+			      margin-top: 6rpx;
+			    }
+			  }
+			  
+			  .expand2 {
+			    margin-top: 8rpx;
+			    width: 100%;
+			    justify-content: center;
+			    flex-direction: row;
+			    align-items: center;
+			    
+			    .expand-icon {
+			      margin-left: 12rpx;
+			    }
+			  }
+			}
 		}
-		.medic-box{
+
+		.medic-box {
 			display: flex;
-			.cate-list{
+
+			.cate-list {
 				box-sizing: border-box;
-				width: 200upx;
-				background: #F2F5F9;
+				width: 200rpx;
+				background: #F5F7FA;
 				display: flex;
 				flex-direction: column;
-				padding: 20upx 0;
+				padding: 20rpx 0;
 				overflow-y: scroll;
-				.item{
-					height: 100upx;
-					line-height: 100upx;
-					padding-left: 30upx;
-					font-size: 28upx;
+				position: relative;
+
+				.line {
+					position: absolute;
+					left: 0;
+					top: 50%;
+					transform: translateY(-50%);
+					width: 6rpx;
+					height: 28rpx;
+				}
+
+				.item {
+					height: 112rpx;
+					line-height: 112rpx;
+					padding-left: 28rpx;
+					font-size: 28rpx;
 					font-family: PingFang SC;
-					font-weight: 500;
-					color: #333333;
+					color: #666666;
 					position: relative;
-					&.active{
-						color: #2BC7B9;
-						&::after{
-							content: "";
-							width: 8upx;
-							height: 50upx;
-							background: #2BC7B9;
-							position: absolute;
-							top: 25upx;
-							left: 0;
-						}
+
+					&.active {
+						color: #02B176;
+						background: #FFFFFF;
+						font-weight: 500;
 					}
 				}
 			}
-			.medic{
+
+			.medic {
 				box-sizing: border-box;
-				width: calc(100% - 200upx);
+				width: calc(100% - 200rpx);
 				height: 100%;
-				padding: 0 30upx;
-				.banner-box{
-					margin-top: 30rpx;
-					width: 100%;
-					height: 160upx;
-					border-radius: 10upx;
-					overflow: hidden;
-					.swiper,
-					.swiper-item,
-					.swiper-item image{
-						width: 100%;
-						height: 100%;
-					}
-				}
-				.medic-list{
-					box-sizing: border-box;
-					padding: 30upx 0;
-					overflow-y: auto;
-					height: calc(100% - 220upx);
-					position: relative;
-					// .item{
-					// 	.title{
-					// 		font-size: 28upx;
-					// 		font-family: PingFang SC;
-					// 		font-weight: bold;
-					// 		color: #333333;
-					// 		padding-top: 20upx;
-					// 		margin-bottom: 30upx;
-					// 	}
-						
-					// }
-					.inner-list{
+
+				.medic-list {
+					.item {
+						box-sizing: border-box;
+						min-height: 296upx;
+						background: #FFFFFF;
+						border: 4upx solid #FFFFFF;
+						border-radius: 16upx;
+						margin-bottom: 18upx;
+						padding: 24rpx;
 						display: flex;
-						flex-wrap: wrap;
-						.definite{
-							width: calc(33% - 20upx);
-							margin-right: 30upx;
-							margin-bottom: 30upx;
-							.img-box{
+
+						.img-box {
+							flex-shrink: 0;
+							width: 188rpx;
+							height: 188rpx;
+							margin-right: 20upx;
+							border-radius: 16upx;
+							overflow: hidden;
+
+							image {
 								width: 100%;
-								height: 144upx;
-								background: #F5F5F5;
-								border-radius: 8upx;
-								overflow: hidden;
-								display: flex;
-								align-items: center;
-								image{	
-									max-width: 100%;
-								}
+								height: 100%;
 							}
-							.name{
-								width: 100%;
-								margin-top: 20upx;
-								font-size: 24upx;
+						}
+
+						.info-box {
+							flex: 1;
+							min-width: 0;
+
+							.title {
+								font-size: 28upx;
 								font-family: PingFang SC;
 								font-weight: 500;
-								color: #666666;
-								text-align: center;
+								color: #333333;
+								margin-bottom: 4rpx;
+							}
+
+							.intro {
+								font-weight: 400;
+								font-size: 22rpx;
+								color: #D46C0D;
+								margin-bottom: 8upx;
+							}
+
+							.sale {
+								font-size: 21rpx;
+								color: #999999;
+							}
+
+							.lable-group {
+								display: flex;
+								margin-top: 8rpx;
+
+								.lable-item {
+									margin-right: 8rpx;
+									height: 30rpx;
+									padding: 0 8rpx;
+									border-radius: 4rpx 4rpx 4rpx 4rpx;
+									border: 1rpx solid #FFA599;
+									font-size: 21rpx;
+									color: #FF4B33;
+								}
 							}
-							&:nth-child(3n) {
-								margin-right: 0;
+
+							.prce-num {
+								display: flex;
+								align-items: center;
+								justify-content: space-between;
+								margin-top: 8upx;
+
+								.price {
+									font-weight: 600;
+									font-size: 26rpx;
+									color: #FA341E;
+									font-size: 26rpx;
+
+									.unit {
+										font-size: 20upx;
+									}
+
+									.bold {
+										font-size: 36upx;
+									}
+								}
+
 							}
 						}
 					}
 				}
 			}
 		}
-		
+
 	}
-	
-</style>
+</style>

pages_course/components/chatInput.vue

@@ -1,23 +1,30 @@
 <template>
 	<view class="chat-input-container" :class="{ 'parent-container-focused': isFocus }">
-		<view class="x-f input-container-optimized" :class="{
+		<view class="x-f input-container" :class="{
         'input-container-focused': isFocus,
-        'justify-between': !isFocus
-      }" :style="containerStyle">
-			<input id="txgMsg" :placeholder="placeholderText" v-model="inputValue" placeholder-style="color:#e7e7e7;"
-				placeholder-class="placeholder-style" class="ml20 input-native input-optimized"
-				:class="{ 'input-focused': isFocus }" @focus="handleFocus" @blur="handleBlur" cursor-spacing="100"
-				:adjust-position="false" />
-			<view class="send" @click="handleSend">发送</view>
+        'input-container-normal': !isFocus
+      }">
+			<input id="txgMsg" 
+        :placeholder="placeholderText" 
+        v-model="inputValue" 
+        placeholder-style="color:#e7e7e7;"
+        placeholder-class="placeholder-style" 
+        class="ml20 input-native input-field"
+        :class="{ 'input-focused': isFocus }" 
+        @focus="handleFocus" 
+        @blur="handleBlur" 
+        cursor-spacing="100"
+        :adjust-position="false" />
+			<view class="send-btn" @click="handleSend">发送</view>
 		</view>
 
-		<view class="justify-between mr15 align-center shopping-icon-container" :style="iconContainerStyle">
+		<view class="icon-container" :class="{ 'icon-hidden': isFocus }">
 			<view class="icon-bg ml20" @tap="handleOpenCart">
 				<image src="/static/images/shopping.png" class="w58 h58" />
 			</view>
-			<!-- <view class="icon-bg ml20" @click="handleShowGift">
-				<image src="/static/images/gift.png" class="w58 h58" />
-			</view> -->
+			<view class="icon-bg ml20" @click="handleMoreClick">
+				<image src="/static/images/more_icon.png" class="w58 h58" />
+			</view>
 		</view>
 	</view>
 </template>
@@ -26,17 +33,14 @@
 	export default {
 		name: 'ChatInput',
 		props: {
-			// 输入框占位符文本
 			placeholderText: {
 				type: String,
 				default: '说点什么...'
 			},
-			// 初始输入值
 			value: {
 				type: String,
 				default: ''
 			},
-			// 是否聚焦状态（从父组件传递）
 			focused: {
 				type: Boolean,
 				default: false
@@ -48,40 +52,16 @@
 				inputValue: ''
 			};
 		},
-		computed: {
-			// 输入框容器样式
-			containerStyle() {
-				return {
-					padding: this.isFocus ? '10rpx 10rpx 10rpx 20rpx' : '10rpx 14rpx 10rpx 32rpx',
-					
-					width: this.isFocus ? 'calc(100% - 20rpx)' : '100%',
-					maxWidth: this.isFocus ? 'calc(100% - 20rpx)' : 'auto',
-					marginRight: this.isFocus ? '20rpx' : '0',
-					flex: this.isFocus ? '1' : 'auto'
-				};
-			},
-			// 图标容器样式
-			iconContainerStyle() {
-				return {
-					opacity: this.isFocus ? 0 : 1,
-					visibility: this.isFocus ? 'hidden' : 'visible',
-					transform: 'translateZ(0)'
-				};
-			}
-		},
 		watch: {
-			// 监听父组件传递的聚焦状态
 			focused: {
 				immediate: true,
 				handler(newVal) {
 					this.isFocus = newVal;
 				}
 			},
-			// 监听输入值变化，同步到父组件
 			inputValue(newVal) {
 				this.$emit('input', newVal);
 			},
-			// 监听父组件传递的值变化
 			value: {
 				immediate: true,
 				handler(newVal) {
@@ -90,23 +70,23 @@
 			}
 		},
 		methods: {
-			// 输入框聚焦事件
+			handleMoreClick() {
+			  this.$emit('show-more');
+			},
 			handleFocus() {
 				this.isFocus = true;
 				this.$emit('focus', this.inputValue);
 			},
 
-			// 输入框失焦事件
 			handleBlur() {
 				this.isFocus = false;
 				this.$emit('blur', this.inputValue);
 			},
 
-			// 发送消息
 			handleSend() {
 				if (this.inputValue.trim()) {
 					this.$emit('send', this.inputValue);
-					this.inputValue = ''; // 清空输入框
+					this.inputValue = '';
 				} else {
 					uni.showToast({
 						title: '不能发送空消息',
@@ -115,27 +95,22 @@
 				}
 			},
 
-			// 打开购物车
 			handleOpenCart() {
 				this.$emit('open-cart');
 			},
 
-			// 显示礼物弹窗
 			handleShowGift() {
 				this.$emit('show-gift');
 			},
 
-			// 清空输入框（供父组件调用）
 			clearInput() {
 				this.inputValue = '';
 			},
 
-			// 设置输入框值（供父组件调用）
 			setInputValue(value) {
 				this.inputValue = value;
 			},
 
-			// 获取输入框值（供父组件调用）
 			getInputValue() {
 				return this.inputValue;
 			}
@@ -151,89 +126,91 @@
 		padding: 24rpx;
 		width: 100%;
 		box-sizing: border-box;
+		transition: all 0.3s ease;
 
 		&.parent-container-focused {
-			justify-content: flex-start !important;
-			align-items: stretch !important;
+			justify-content: flex-start;
 		}
 	}
 
-	.input-container-optimized {
-		background: rgba(0,0,0,0.3);
+	.input-container {
+		background: rgba(0, 0, 0, 0.3);
 		height: 90rpx;
 		box-sizing: border-box;
 		border-radius: 36rpx;
-		transform: translateZ(0);
-		will-change: transform;
-		backface-visibility: hidden;
-		perspective: 1000px;
 		display: flex;
 		align-items: center;
+		transition: all 0.3s ease;
+		overflow: hidden;
 
-		&.input-container-focused {
-			box-sizing: border-box;
-			width: calc(100% - 20rpx) !important;
-			max-width: calc(100% - 20rpx) !important;
-			min-width: calc(100% - 20rpx) !important;
-			margin-right: 20rpx !important;
-			padding: 10rpx 10rpx 10rpx 20rpx !important;
-			justify-content: flex-start !important;
-			gap: 20rpx !important;
-			flex: 1 !important;
-			flex-grow: 1 !important;
-			flex-shrink: 0 !important;
-			flex-basis: calc(100% - 20rpx) !important;
+		&.input-container-normal {
+			padding: 10rpx 14rpx 10rpx 32rpx;
+			flex: 1;
+			justify-content: space-between;
 		}
 
-		&.justify-between {
-			justify-content: space-between;
+		&.input-container-focused {
+			padding: 10rpx 10rpx 10rpx 20rpx;
+			width: 100%;
+			flex: 1 0 auto;
+			justify-content: flex-start;
+			gap: 20rpx;
 		}
 	}
 
-	.input-optimized {
-		border: none !important;
-		font-size: 32rpx !important;
-		color: #ffffff !important;
-		background: transparent !important;
-		width: 70% !important;
-		transform: translateZ(0);
-		will-change: contents, width;
-		backface-visibility: hidden;
+	.input-field {
+		border: none;
+		font-size: 32rpx;
+		color: #ffffff;
+		background: transparent;
 		flex: 1;
+		min-width: 0;
+		transition: all 0.3s ease;
 
 		&.input-focused {
-			width: auto !important;
-			flex: 1 !important;
-			min-width: 0 !important;
-			margin-left: 10rpx !important;
-			max-width: none !important;
+			flex: 1;
+			min-width: 0;
 		}
 	}
 
-	.send {
+	.send-btn {
 		background-color: #fafafa;
 		border-radius: 28rpx;
 		padding: 12rpx 16rpx;
 		color: #181818;
-		margin-right: 16rpx;
 		font-weight: 500;
 		min-width: 80rpx;
 		text-align: center;
 		flex-shrink: 0;
 		white-space: nowrap;
+		cursor: pointer;
+		transition: all 0.2s ease;
+
+		&:active {
+			opacity: 0.8;
+			transform: scale(0.98);
+		}
 	}
 
-	.shopping-icon-container {
-		will-change: opacity, visibility;
-		backface-visibility: hidden;
+	.icon-container {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		flex-shrink: 0;
+		transition: all 0.3s ease;
+		margin-left: 20rpx;
+
+		&.icon-hidden {
+			opacity: 0;
+			visibility: hidden;
+			width: 0;
+			margin-left: 0;
+			flex: 0;
+		}
 	}
 
 	.icon-bg {
-		background: rgba(0,0,0,0.3);
+		background: rgba(0, 0, 0, 0.3);
 		border-radius: 50%;
 		width: 88rpx;
 		height: 88rpx;
@@ -241,9 +218,26 @@
 		justify-content: center;
 		align-items: center;
 		transition: transform 0.2s ease;
+		cursor: pointer;
 
 		&:active {
 			transform: scale(0.95);
 		}
+		
+		& + & {
+			margin-left: 20rpx;
+		}
+	}
+
+	.ml20 {
+		margin-left: 20rpx;
+	}
+
+	.w58 {
+		width: 58rpx;
+	}
+
+	.h58 {
+		height: 58rpx;
 	}
 </style>

pages_course/components/liveVideo.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="video-player-container">
 		<!-- 直播状态显示 -->
-		<view class="videolist" v-if="liveItem.status == 2">
+		<view class="videolist" v-if="liveItem.status == 2" :class="isFullscreen ? 'screen' : ''">
 			<view class="video" :class="{'video_row': liveItem.showType == 1,'fullscreen-mode': isFullscreen}">
 				<!-- 直播 -->
 				<live-player v-if="liveItem.livingUrl && liveItem.liveType == 1" :id="'myLivePlayer_' + liveId"
@@ -11,16 +11,16 @@
 
 				<!-- 录播 -->
 				<video v-if="liveItem.videoUrl && liveItem.liveType == 2" :id="`myVideo_${liveId}`" :autoplay="true"
-					class="item" :src="liveItem.videoUrl" :controls="false" object-fit="cover" :custom-cache="false"
+					class="item" :src="liveItem.videoUrl" :controls="false"
+					:object-fit="liveItem.showType==2||isFullscreen?'contain':'fill'" :custom-cache="false"
 					:enable-progress-gesture="false" vslide-gesture-in-fullscreen="false" :show-center-play-btn="false"
 					:http-cache="false" loop @error="videoError" @timeupdate="onVideoTimeUpdate"
 					@loadedmetadata="onVideoMetaLoaded" @pause="onVideoPause" @play="onVideoPlay"
 					@waiting="onVideoWaiting" :enable-play-gesture="false" :play-strategy="1"
 					@dblclick="preventDoubleClick" preload="auto" :enable-stash-buffer="false" :stash-initial-size="0"
 					:stash-max-size="0" :stash-time="0" type="application/x-mpegURL"></video>
-
-				<view v-if="liveItem.videoUrl && liveItem.liveType == 2" class="time">{{ diffTotalTime }}</view>
-				<!-- v-if="showCustomControls && liveItem.showType==1 && !isFullscreen" -->
+				<view v-if="liveItem.videoUrl && liveItem.liveType == 2" class="time"
+					:class="isFullscreen ? 'look-time' : 'time'">{{ diffTotalTime }}</view>
 				<view class="custom-controls" @click.stop="toggleFullscreen">
 					<image src="/static/images/full_screen.png" class="control-icon" />
 				</view>
@@ -225,13 +225,18 @@
 		methods: {
 			// 退出全屏
 			exitFullscreen() {
+				console.log('执行退出全屏');
+
 				this.isFullscreen = false;
-				// 恢复竖屏样式
-				this.restoreVideoList();
+
 				// 显示非videolist元素
 				this.showNonVideoElements();
+
 				// 强制页面重排
-				this.$forceUpdate();
+				this.$nextTick(() => {
+					this.$forceUpdate();
+					this.$emit('fullscreen-change', this.isFullscreen);
+				});
 			},
 
 			// 恢复videolist盒子
@@ -251,17 +256,17 @@
 					// 进入全屏
 					this.enterFullscreen();
 				}
+
 			}, // 进入全屏
 			enterFullscreen() {
-				// console.log('执行进入全屏');
+				console.log('执行进入全屏');
 				this.isFullscreen = true;
-
 				// 设置横屏样式
 				this.rotateVideoList();
 
 				// 隐藏非videolist元素
 				this.hideNonVideoElements();
-
+				this.$emit('fullscreen-change', this.isFullscreen);
 				// 强制页面重排
 				this.$forceUpdate();
 			},
@@ -894,6 +899,11 @@
 		height: 100vh;
 		width: 100%;
 
+		&.screen {
+			width: 100%;
+			height: 100%;
+		}
+
 		.video {
 			height: 100vh;
 			width: 100%;
@@ -909,6 +919,18 @@
 				margin-left: 10rpx;
 			}
 
+			.look-time {
+				position: absolute;
+				left: 10vh;
+				bottom: 24rpx;
+				font-size: 20rpx;
+				background-color: rgba(57, 57, 57, 0.6);
+				border-radius: 15rpx;
+				z-index: 999999 !important;
+				padding: 10rpx 16rpx;
+				color: #fff;
+			}
+
 			.end {
 				position: absolute;
 				top: 50%;
@@ -935,34 +957,76 @@
 			max-height: 450rpx;
 			z-index: 99;
 
-			.fullscreen-mode {
-				width: auto !important;
-				height: auto !important;
+			/* ==== 全屏模式样式 ==== */
+			&.fullscreen-mode {
+				// position: fixed !important;
+				// top: 0 !important;
+				// left: 0 !important;
+				top: 0;
+				width: 0;
+				height: auto;
 				z-index: 99999 !important;
 				background-color: #000 !important;
 				transform: rotate(90deg) !important;
 				transform-origin: center center !important;
-				.fullscreen-exit-btn {
-					z-index: 999999 !important;
-				}
-				.video-player {
+				// transform: rotate(0) ;
+				// transform: rotate(90deg) translateY(-100%) !important;
+				// transform-origin: left top !important;
+
+				.item {
+					position: absolute;
+					bottom: 0;
 					width: 100vh !important;
 					height: 100vw !important;
-					// object-fit: contain !important;
+					// transform: rotate(-90deg) !important;
+					transform-origin: center center !important;
+					object-fit: contain !important;
 				}
-			}
 
+				.custom-controls {
+					transform: rotate(-90deg) !important;
+					transform-origin: center center !important;
+					bottom: auto !important;
+					top: 40rpx !important;
+					right: 40rpx !important;
+				}
 
-			/* 全屏时隐藏其他元素 */
-			.video-container.fullscreen-mode~* {
-				display: none !important;
-			}
+				.fullscreen-exit-btn {
+					position: fixed;
+					bottom: 40rpx;
+					left: 82vh;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					z-index: 100001;
+					background: rgba(57, 57, 57, 0.6);
+					border-radius: 40rpx;
+					padding: 20rpx 24rpx;
+					transition: all 0.3s ease;
+
+					&:active {
+						transform: scale(0.95);
+						background: rgba(50, 50, 50, 0.6);
+					}
+
+					.exit-fullscreen-icon {
+						width: 40rpx;
+						height: 40rpx;
+						margin-bottom: 10rpx;
+					}
 
+					.exit-text {
+						color: #ffffff;
+						font-size: 22rpx;
+						white-space: nowrap;
+					}
+				}
+			}
 
 			/* 全屏按钮样式优化 */
 			.custom-controls {
 				position: absolute;
-				// top: 50%;
 				bottom: 10%;
 				right: 40rpx;
 				z-index: 99999999;
@@ -985,7 +1049,6 @@
 					background: rgba(0, 0, 0, 0.8);
 				}
 			}
-
 		}
 	}
 

pages_shopping/live/article.vue

@@ -0,0 +1,533 @@
+<template>
+	<view class="content">
+		<view class="status_bar" :style="{height: statusBarHeight}"></view>
+		<view class="top-block">
+			<view class="left">
+				<image class="w64 h64 " src="/static/images/back_black.png"></image>
+				<image class="head" src="/static/images/img.png"></image>
+				<text class="name">芳华悦选</text>
+			</view>
+			<view class="right">
+				<view class="icon-bg">
+					<image class="w40 h40" src="/static/images/share-icon.png"></image>
+				</view>
+				<view class="icon-bg">
+					<image class="w40 h40" src="/static/images/shopping_car.png"></image>
+				</view>
+			</view>
+		</view>
+
+		<!-- 文章 -->
+		<view class="article">
+			<image class="photo" src="/static/images/img.png"></image>
+			<view class="article-main">
+				<view class="title">秋季常见问题儿科专家直播</view>
+				<view class="txt">
+					<text>秋意渐浓,凉爽的秋风不仅带来了宜人的景色,也悄然引发了儿童鼻炎的高发期。鼻塞、流涕、打喷嚏……这些看似不起眼的症状,却可能严重影响孩子们的日常生活和学习。#儿童鼻炎的高发期</text>
+					<text class="lable">#儿童鼻炎的高发期</text>
+				</view>
+				<view class="card">
+					<view class="card-item">
+						<image class="card-icon" src="/static/images/jinbang_font.png"></image>
+						<text class="ranking">24小时热门榜</text>
+						<text class="top">TOP.3</text>
+					</view>
+					<image class="go" src="/static/images/jb_arrow_right_icon.png"></image>
+				</view>
+				<view class="place">5天前 重庆</view>
+			</view>
+		</view>
+		<view class="line"></view>
+		<!-- 评论 -->
+		<view class="comment">
+			<view class="comment-num">
+				<text>共 124 条评论</text>
+				<image class="w24 h24 ml10" src="/static/images/comment-icon.png"></image>
+			</view>
+			<!--可评论输入框 -->
+			<view class="my-input">
+				<image class="head" src="/static/images/img.png"></image>
+				<view class="input-item">
+					<input class="input" placeholder="说点什么..." />
+					<image class="w40 h40" src="/static/images/emoticon_icon.png"></image>
+				</view>
+			</view>
+
+			<!-- 消息 -->
+			<view class="message">
+				<view class="message-item">
+					<view class="left">
+						<image class="head" src="/static/images/img.png"></image>
+						<view class="column">
+							<view class="chat">
+								<view class="name">
+									<text>爱吃土豆</text>
+								</view>
+								<view class="flex-wrap">
+									<view class="txt">孩子鼻炎很严重，能不能治好呀？</view>
+									<view class="info">
+										<text class="time">1小时前 重庆</text>
+										<view class="reply">回复</view>
+									</view>
+								</view>
+							</view>
+							<view class="left mt26">
+								<image class="head-little" src="/static/images/img.png"></image>
+								<view class="chat">
+									<view class="name">
+										<text>爱吃土豆</text>
+										<view class="author-lable">作者</view>
+									</view>
+									<view class="flex-wrap">
+										<view class="txt">请告诉一下具体症状</view>
+										<view class="info">
+											<text class="time">1小时前 重庆</text>
+											<view class="reply">回复</view>
+										</view>
+									</view>
+								</view>
+							</view>
+							<view class="expand">展开 2 条回复</view>
+						</view>
+					</view>
+					<view class="right">
+						<image v-if="isLike" class="w40 h40" src="/static/images/like_red_icon.png" @click="onLike">
+						</image>
+						<image v-else class="w40 h40" src="/static/images/like_icon.png" @click="onLike"></image>
+						<view class="">20</view>
+					</view>
+				</view>
+
+				<view class="message-item">
+					<view class="left">
+						<image class="head" src="/static/images/img.png"></image>
+						<view class="column">
+							<view class="chat">
+								<view class="name">
+									<text>爱吃土豆</text>
+								</view>
+								<view class="flex-wrap">
+									<view class="txt">孩子鼻炎很严重，能不能治好呀？</view>
+									<view class="info">
+										<text class="time">1小时前 重庆</text>
+										<view class="reply">回复</view>
+									</view>
+								</view>
+							</view>
+							<view class="left mt26">
+								<image class="head-little" src="/static/images/img.png"></image>
+								<view class="chat">
+									<view class="name">
+										<text>爱吃土豆</text>
+										<view class="author-lable">作者</view>
+									</view>
+									<view class="flex-wrap">
+										<view class="txt">请告诉一下具体症状</view>
+										<view class="info">
+											<text class="time">1小时前 重庆</text>
+											<view class="reply">回复</view>
+										</view>
+									</view>
+								</view>
+							</view>
+							<view class="expand">展开 2 条回复</view>
+						</view>
+					</view>
+					<view class="right">
+						<image v-if="isLike" class="w40 h40" src="/static/images/like_red_icon.png" @click="onLike">
+						</image>
+						<image v-else class="w40 h40" src="/static/images/like_icon.png" @click="onLike"></image>
+						<view class="">20</view>
+					</view>
+				</view>
+
+
+			</view>
+		</view>
+
+		<!-- 输入框 -->
+		<view class="chat-input-container">
+			<view class=" input-container">
+				<input id="txgMsg" placeholder="说点什么..." v-model="inputValue" placeholder-style="color:#999999;"
+					class="ml20 input-native input-field" cursor-spacing="100" :adjust-position="false" />
+			</view>
+			<view class="icon-container">
+				<view class="icon-item">
+					<image class="icon" src="/static/images/comment.png" />
+					<text>8</text>
+				</view>
+				<view class="icon-item">
+					<image class="icon" src="/static/images/comment.png" />
+					<text>10</text>
+				</view>
+				<view class="icon-item">
+					<image class="icon" src="/static/images/comment.png" />
+					<text>200</text>
+				</view>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	import Task from '@/pages_shopping/live/components/task.vue'
+	import {
+		liveList
+	} from '@/api/living.js'
+	export default {
+		data() {
+			return {
+				// 状态栏的高度
+				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
+				isLike: false
+
+			}
+		},
+		onLoad() {
+
+		},
+		onUnload() {
+
+		},
+		methods: {
+			onLike() {
+				this.isLike = !this.isLike;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		min-height: 100vh;
+		background: #ffffff;
+		position: relative;
+
+		.top-block {
+			padding-left: 24rpx;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.left {
+				display: flex;
+				align-items: center;
+
+				.head {
+					width: 68rpx;
+					height: 68rpx;
+					border-radius: 34rpx 34rpx 34rpx 34rpx;
+					margin: 0 16rpx;
+				}
+
+				.name {
+					font-weight: 500;
+					font-size: 32rpx;
+					color: #333333;
+				}
+			}
+
+			.right {
+				display: flex;
+				align-items: center;
+				margin-right: 210rpx;
+
+				.icon-bg {
+					width: 64rpx;
+					height: 64rpx;
+					padding: 12rpx;
+					border-radius: 32rpx 32rpx 32rpx 32rpx;
+					border: 1rpx solid #E9E9E9;
+					box-sizing: border-box;
+					background: #FFFFFF;
+					margin-left: 24rpx;
+				}
+			}
+
+			.title-box {
+				position: relative;
+
+				.title {
+					font-weight: 600;
+					font-size: 40rpx;
+					color: #333333;
+				}
+			}
+		}
+
+		// 文章
+		.article {
+			display: flex;
+			flex-direction: column;
+			margin-top: 30rpx;
+
+			.photo {
+				width: 100%;
+				height: 416rpx;
+			}
+
+			.article-main {
+				padding: 0 24rpx;
+
+				.title {
+					margin: 18rpx 0 32rpx;
+					font-weight: 500;
+					font-size: 36rpx;
+					color: #333333;
+				}
+
+				.txt {
+					font-size: 30rpx;
+					color: #333333;
+
+					.lable {
+						color: #153868;
+						margin-left: 8rpx;
+					}
+				}
+
+				.card {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					background: #FFF5EB;
+					width: 100%;
+					height: 64rpx;
+					border-radius: 8rpx;
+					border: 1rpx solid #F3E2D0;
+					padding: 16rpx;
+					box-sizing: border-box;
+					margin: 22rpx 0 32rpx; // 添加边距
+
+					.card-item {
+						display: flex;
+						align-items: center;
+						color: #D46C0D;
+
+						.card-icon {
+							width: 60rpx;
+							height: 32rpx;
+							margin-right: 24rpx;
+						}
+
+						.ranking {
+							font-size: 24rpx;
+						}
+
+						.top {
+							font-family: Roboto Flex, Roboto Flex;
+							font-weight: normal;
+							font-size: 24rpx;
+							transform: skewX(-8deg);
+							display: inline-block;
+							margin-left: 8rpx;
+						}
+					}
+
+					.go {
+						width: 16rpx;
+						height: 16rpx;
+					}
+				}
+
+				.place {
+					font-size: 24rpx;
+					color: #999999;
+				}
+
+			}
+		}
+
+		.line {
+			margin: 32rpx 0;
+			width: 100%;
+			height: 0rpx;
+			border: 1rpx solid #EEEEEE;
+		}
+
+		// 评论
+		.comment {
+			display: flex;
+			flex-direction: column;
+			padding: 0 24rpx 120rpx;
+
+			.comment-num {
+				display: flex;
+				align-items: center;
+				font-weight: 500;
+				font-size: 28rpx;
+				color: #333333;
+				margin-bottom: 30rpx;
+			}
+
+			.my-input {
+				display: flex;
+				margin-bottom: 40rpx;
+
+				.head {
+					width: 68rpx;
+					height: 68rpx;
+					margin-right: 24rpx;
+					border-radius: 50%;
+					flex-shrink: 0;
+				}
+
+				.input-item {
+					flex: 1;
+					display: flex;
+					align-items: center;
+					background: #F5F7FA;
+					padding: 0 24rpx;
+					border-radius: 34rpx;
+
+					.input {
+						flex: 1;
+					}
+				}
+			}
+
+			.message {
+				display: flex;
+				flex-direction: column;
+
+				.message-item {
+					display: flex;
+					justify-content: space-between;
+
+					.left {
+						display: flex;
+
+						.head {
+							width: 68rpx;
+							height: 68rpx;
+							margin-right: 24rpx;
+							border-radius: 50%;
+							flex-shrink: 0;
+						}
+
+						.head-little {
+							width: 48rpx;
+							height: 48rpx;
+							margin-right: 16rpx;
+							border-radius: 50%;
+							flex-shrink: 0;
+						}
+
+						.chat {
+							.name {
+								font-size: 26rpx;
+								color: #999999;
+								display: flex;
+
+								.author-lable {
+									width: 62rpx;
+									height: 32rpx;
+									background: #E0FFF4;
+									border-radius: 16rpx;
+									text-align: center;
+									line-height: 32rpx;
+									font-weight: 500;
+									font-size: 18rpx;
+									color: #02B176;
+									margin-left: 14rpx;
+								}
+							}
+
+							.flex-wrap {
+								display: flex;
+								flex-wrap: wrap;
+								align-items: center;
+
+
+								.txt {
+									font-size: 28rpx;
+									color: #333333;
+									margin: 12rpx 24rpx 12rpx 0;
+								}
+
+								.info {
+									font-size: 24rpx;
+									display: flex;
+
+									.time {
+										color: #999999;
+									}
+
+									.reply {
+										color: #666666;
+										margin-left: 22rpx;
+									}
+								}
+							}
+						}
+					}
+
+					.expand {
+						font-size: 26rpx;
+						color: #153868;
+						padding: 0 64rpx;
+					}
+
+					.right {
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+						font-size: 24rpx;
+						color: #666666;
+					}
+				}
+			}
+		}
+
+		// 输入框
+		.chat-input-container {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			height: 100rpx;
+			box-sizing: border-box;
+			padding: 20rpx 24rpx;
+			width: 100%;
+			box-sizing: border-box;
+			position: fixed;
+			bottom: 0;
+			background-color: #ffffff;
+			border-top: 1rpx solid #EEEEEE;
+			.input-container {
+				background: #F5F7FA;
+				height: 68rpx;
+				box-sizing: border-box;
+				border-radius: 36rpx;
+				display: flex;
+				align-items: center;
+				overflow: hidden;
+				margin-right: 20rpx;
+
+
+			}
+
+			.icon-container {
+				display: flex;
+				align-items: center;
+
+				.icon-item {
+					display: flex;
+					align-items: center;
+					margin-right: 42rpx;
+
+					&:last-child {
+						margin-right: 0rpx;
+					}
+
+					.icon {
+						width: 48rpx;
+						height: 48rpx;
+						margin-right: 8rpx;
+					}
+				}
+			}
+		}
+
+	}
+</style>

pages_shopping/live/complaintList.vue

@@ -4,7 +4,7 @@
 		<view class="list">
 			<view class="item" @click="toComplaint(item)" v-for="(item,index) in list" :key="index">
 				<view>{{item}}</view>
-				<image class="w16" src="/static/images/arrow_gray.png" mode="widthFix"></image>
+				<image class="w32 h32" src="/static/images/arrow4.png" mode="widthFix"></image>
 			</view>
 
 		</view>

pages_shopping/live/components/task.vue

@@ -0,0 +1,291 @@
+<template>
+	<u-popup :show="showTask" @close="handleClose" @open="handleOpen" round="32rpx" bgColor="#ffffff" zIndex="10077">
+		<view class="content">
+			<!-- 头部 -->
+			<view class="header">
+				<view class="row bg">
+					<image class="w40 h40" src="/static/images/answer_icon.png"></image>
+					<image class="w428 h64" src="/static/images/collecting_coins_title.png"></image>
+					<image class="w40 h40" src="/static/images/pop_close_icon.png" @click="showTask=false"></image>
+				</view>
+				<!-- 积分信息 -->
+				<view class="row mtb48 plr24">
+					<view class="points row">
+						<text class="lable">我的积分</text>
+						<text class="num">3688</text>
+					</view>
+					<view class="shop row">
+						<image class="w48 h48" src="/static/images/fanghua_coin_icon.png"></image>
+						<text class="shop-txt">芳华币商城</text>
+						<image class="w24 h24" src="/static/images/coin_arrow.png"></image>
+					</view>
+				</view>
+			</view>
+
+			<!-- 可滚动列表区域 -->
+			<scroll-view scroll-y class="list" :style="{ height: scrollHeight + 'px' }" @scroll="handleScroll">
+				<!-- 列表项 - 这里应该用 v-for 循环，简化代码 -->
+				<view v-for="(item, index) in taskList" :key="index" class="list-item">
+					<view class="row">
+						<view class="left">
+							<image class="w88 h88 mr24" src="/static/images/img.png"></image>
+							<view>
+								<view class="mb8 row">
+									<text class="title">{{ item.title }}({{ item.current }}/{{ item.total }})</text>
+									<image class="w40 h40 mr4 ml8" src="/static/images/fanghua_coin_icon.png"></image>
+									<text class="num">+{{ item.points }}</text>
+								</view>
+								<view class="txt">{{ item.desc }}</view>
+							</view>
+						</view>
+						<view class="button" @click="handleTaskClick(item)">
+							{{ item.buttonText }}
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+	</u-popup>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				showTask: true,
+				scrollHeight: 400, // 根据实际情况调整
+				taskList: [{
+						title: '点赞内容',
+						current: 0,
+						total: 1,
+						points: 1,
+						desc: '最多1条得芳华币',
+						buttonText: '去完成'
+					}, {
+						title: '点赞内容',
+						current: 0,
+						total: 1,
+						points: 1,
+						desc: '最多1条得芳华币',
+						buttonText: '去完成'
+					}, {
+						title: '点赞内容',
+						current: 0,
+						total: 1,
+						points: 1,
+						desc: '最多1条得芳华币',
+						buttonText: '去完成'
+					}, {
+						title: '点赞内容',
+						current: 0,
+						total: 1,
+						points: 1,
+						desc: '最多1条得芳华币',
+						buttonText: '去完成'
+					}, {
+						title: '点赞内容',
+						current: 0,
+						total: 1,
+						points: 1,
+						desc: '最多1条得芳华币',
+						buttonText: '去完成'
+					}, {
+						title: '点赞内容',
+						current: 0,
+						total: 1,
+						points: 1,
+						desc: '最多1条得芳华币',
+						buttonText: '去完成'
+					}, {
+						title: '点赞内容',
+						current: 0,
+						total: 1,
+						points: 1,
+						desc: '最多1条得芳华币',
+						buttonText: '去完成'
+					}, {
+						title: '点赞内容',
+						current: 0,
+						total: 1,
+						points: 1,
+						desc: '最多1条得芳华币',
+						buttonText: '去完成'
+					}, {
+						title: '点赞内容',
+						current: 0,
+						total: 1,
+						points: 1,
+						desc: '最多1条得芳华币',
+						buttonText: '去完成'
+					}, {
+						title: '点赞内容',
+						current: 0,
+						total: 1,
+						points: 1,
+						desc: '最多1条得芳华币',
+						buttonText: '去完成'
+					},
+
+				]
+			}
+		},
+		mounted() {
+			this.calcScrollHeight();
+		},
+		methods: {
+			handleScroll(event) {
+				// 更新当前滚动位置
+				this.scrollTop = event.detail.scrollTop;
+
+				// 判断是否显示返回顶部按钮
+				this.showBackTop = this.scrollTop > 300;
+
+				// 判断是否滚动到底部（需要加载更多）
+				if (!this.loadingMore && this.hasMore) {
+					const {
+						scrollHeight
+					} = event.detail;
+					const scrollViewHeight = this.scrollHeight; // scroll-view 的高度
+
+					// 距离底部50rpx时触发加载
+					if (scrollHeight - this.scrollTop - scrollViewHeight < 50) {
+						this.loadMoreData();
+					}
+				}
+			},
+
+			async loadMoreData() {
+				if (this.loadingMore || !this.hasMore) return;
+
+				this.loadingMore = true;
+				try {
+					// 调用API加载更多数据
+					const newData = await this.fetchMoreTasks();
+					if (newData.length > 0) {
+						this.taskList.push(...newData);
+					} else {
+						this.hasMore = false;
+					}
+				} catch (error) {
+					console.error('加载失败:', error);
+				} finally {
+					this.loadingMore = false;
+				}
+			},
+
+			calcScrollHeight() {
+				// 计算屏幕可用高度
+				const systemInfo = uni.getSystemInfoSync();
+				// 根据实际情况计算，这里减去头部高度
+				this.scrollHeight = systemInfo.windowHeight * 0.6; // 示例值
+			},
+			
+			handleTaskClick(item) {
+				console.log('点击任务:', item);
+				// 处理任务点击逻辑
+			},
+			handleClose() {
+				console.log("关闭")
+				// 关闭弹窗
+			},
+
+			handleOpen() {
+				// 打开弹窗
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		height: 1000rpx;
+		background: #FFFFFF;
+		border-radius: 32rpx 32rpx 0rpx 0rpx;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+
+		.bg {
+			padding: 36rpx 24rpx;
+			background: linear-gradient(180deg, #FFDFCD 0%, #FFFFFF 100%);
+		}
+
+		.row {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+		}
+
+		.points {
+			font-weight: 400;
+			font-size: 28rpx;
+			color: #333333;
+
+			.num {
+				font-weight: 500;
+				font-size: 40rpx;
+				color: #222426;
+				margin-left: 4rpx;
+			}
+
+		}
+
+		.shop {
+			.shop-txt {
+				font-weight: 500;
+				font-size: 28rpx;
+				color: #FF5C03;
+				margin: 0 12rpx;
+			}
+		}
+
+		.list {
+			display: flex;
+			justify-content: space-between;
+			flex-wrap: wrap;
+			padding: 0 24rpx;
+			box-sizing: border-box;
+			flex: 1;
+			overflow: hidden;
+
+			.list-item {
+
+				width: 100%;
+				margin-bottom: 32rpx;
+
+				.button {
+					width: 132rpx;
+					height: 64rpx;
+					background: #FF5C03;
+					border-radius: 32rpx 32rpx 32rpx 32rpx;
+					text-align: center;
+					line-height: 64rpx;
+					color: #FFFFFF;
+					font-weight: 500;
+					font-size: 28rpx;
+				}
+
+				.left {
+					display: flex;
+
+					.title {
+						font-weight: 500;
+						font-size: 30rpx;
+						color: #333333;
+					}
+
+					.num {
+						font-weight: 600;
+						font-size: 28rpx;
+						color: #FF5C03;
+					}
+
+					.txt {
+						font-size: 24rpx;
+						color: #999999;
+					}
+				}
+			}
+		}
+	}
+</style>

pages_shopping/live/expert.vue

@@ -0,0 +1,573 @@
+<template>
+	<view class="content">
+		<!-- 达人信息 -->
+		<view class="info">
+			<image class="info-bg" src="/static/images/expert_top_bg.png"></image>
+			<view class="status_bar" :style="{height: statusBarHeight}"></view>
+			<view class="back-box">
+				<image class="img" src="/static/images/back_white_icon.png"></image>
+			</view>
+			<view class="info-block">
+				<image class="head" src="/static/images/img.png"></image>
+				<view class="right">
+					<view class="user">
+						<text class="name">健康达人</text>
+						<view class="level">
+							<image class="icon" src="/static/images/intelligent_icon.png"></image>LV.2
+						</view>
+					</view>
+					<view class="txt">人生没有白走的路，每一步都算数。</view>
+					<view class="card">
+						<view class="card-item">
+							<image class="img" src="/static/images/jinbang_font.png"></image>
+							<text class="ranking">达人榜 第15名</text>
+						</view>
+						<image class="go" src="/static/images/jb_arrow_right_icon.png"></image>
+					</view>
+				</view>
+			</view>
+			<view class="data-block">
+				<view class="number-block">
+					<view class="item">
+						<text class="number-item">6.2万</text>
+						<text class="txt-item">粉丝</text>
+					</view>
+					<view class="item">
+						<text class="number-item">6.2万</text>
+						<text class="txt-item">粉丝</text>
+					</view>
+					<view class="item">
+						<text class="number-item">6.2万</text>
+						<text class="txt-item">粉丝</text>
+					</view>
+				</view>
+				<!-- 关注 -->
+				<view class="button">
+					<image class="icon" src="/static/images/guanzhu_green_icon.png"></image><text>关注</text>
+				</view>
+			</view>
+		</view>
+		<view class="vedio-block">
+			<view class="tab-wrapper">
+				<!-- 生活号标签 -->
+				<view class="tab-item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
+					<text class="tab-text">生活号(22)</text>
+					<view v-if="activeTab === 0" class="underline"></view>
+				</view>
+
+				<!-- 直播标签 -->
+				<view class="tab-item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
+					<text class="tab-text">直播</text>
+					<view v-if="activeTab === 1" class="underline"></view>
+				</view>
+			</view>
+
+			<!-- 视频文章列表 -->
+			<mescroll-body bottom="0" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
+				:down="downOption" :up="upOption">
+				<view class="list">
+					<view class="list-item" @click="goLive(item)" v-for="(item,index) in list" :key="index">
+						<image class="img" v-if="item.liveImgUrl" :src="item.liveImgUrl" mode="widthFix"></image>
+						<image class="video-icon" src="/static/images/video_icon.png"></image>
+						<image class="suspension-icon" src="/static/images/suspension.png"></image>
+						<view class="info-block">
+							<view class="title">冰乳绿豆糕 冰冰凉凉谁吃谁迷糊! 谁懂，...</view>
+							<view class="item">
+								<view class="flex">
+									<image class="head" src="/static/images/img.png"></image>
+									<text class="name">崔医生</text>
+								</view>
+								<view class="flex">
+									<image class="icon" src="/static/images/zan_icon.png"></image>
+									<text>141</text>
+								</view>
+							</view>
+							<view class="card">
+								<view class="card-item">
+									<image class="img" src="/static/images/jinbang_font.png"></image>
+									<text class="ranking">达人榜 第15名</text>
+								</view>
+								<image class="go" src="/static/images/jb_arrow_right_icon.png"></image>
+							</view>
+						</view>
+					</view>
+					
+					
+				</view>
+			</mescroll-body>
+		</view>
+
+
+	</view>
+</template>
+
+<script>
+	import {
+		liveList
+	} from '@/api/living.js'
+	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+	export default {
+		mixins: [MescrollMixin],
+		data() {
+			return {
+				activeTab: 0,
+				// 状态栏的高度
+				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
+				list: [],
+				downOption: {
+					offset: 80,
+					use: true,
+					auto: false
+				},
+				upOption: {
+					use: true,
+					auto: true,
+					page: {
+						num: 0,
+						size: 10
+					}
+				},
+				mescroll: null,
+			}
+		},
+		onLoad() {
+			// if (!uni.getStorageSync("AppToken")) {
+			// 	uni.navigateTo({
+			// 		url: '/pages/auth/login'
+			// 	});
+			// }
+		},
+		onUnload() {
+
+		},
+		methods: {
+			switchTab(tab) {
+				if (this.activeTab === tab) return;
+				this.activeTab = tab;
+				this.$emit('change', tab);
+			},
+			mescrollInit(mescroll) {
+				this.mescroll = mescroll;
+			},
+
+			// 下拉刷新回调
+			downCallback(mescroll) {
+				this.list = [];
+				mescroll.resetUpScroll();
+			},
+
+			// 上拉加载回调
+			upCallback(mescroll) {
+				const pageNum = mescroll.num;
+				const pageSize = mescroll.size;
+
+				let data = {
+					pageSize: pageSize,
+					pageNum: pageNum,
+				}
+				liveList(data).then(res => {
+					if (!res) {
+						mescroll.endErr();
+						return;
+					}
+					if (res.code == 200) {
+						let curPageData = Array.isArray(res.data.list) ? res.data.list : [];
+						let totalSize = Number(res.data.total) || 0;
+						if (pageNum === 1) {
+							this.list = [];
+						}
+						this.list = this.list.concat(curPageData);
+
+						mescroll.endBySize(curPageData.length, totalSize);
+					} else {
+						mescroll.endErr();
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						});
+					}
+				}).catch(err => {
+					mescroll.endErr();
+				});
+			},
+
+			goLive(item) {
+				uni.navigateTo({
+					// &immediate=true
+					url: `./living?liveId=${item.liveId}`
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		background-color: #111;
+		min-height: 100vh;
+		// padding: 24rpx;
+
+		// 达人信息
+		.info {
+
+			width: 100%;
+			height: 600rpx;
+			position: relative;
+			z-index: 0;
+
+			.info-bg {
+				position: absolute;
+				z-index: -1;
+				width: 100%;
+				height: 100%;
+			}
+
+			.back-box {
+				display: flex;
+				align-items: center;
+				height: 88rpx;
+				margin-left: 24rpx;
+
+				.img {
+					width: 48rpx;
+					height: 48rpx;
+				}
+			}
+
+			.info-block {
+				margin-top: 32rpx;
+				padding: 0 20rpx;
+				display: flex;
+				align-items: center;
+
+				.head {
+					width: 160rpx;
+					height: 160rpx;
+					margin-right: 20rpx;
+					border-radius: 50%;
+				}
+
+				.right {
+					.user {
+						display: flex;
+
+						.name {
+							font-weight: 500;
+							font-size: 40rpx;
+							color: #FFFFFF;
+							margin-right: 16rpx;
+						}
+
+						.level {
+							width: 118rpx;
+							height: 40rpx;
+							display: flex;
+							align-items: center;
+							font-weight: 500;
+							font-size: 22rpx;
+							color: #FEF5EA;
+							background: linear-gradient(90deg, #F5CE3C 0%, #E39414 100%);
+							border-radius: 20rpx 20rpx 20rpx 20rpx;
+							padding: 4rpx 12rpx;
+							box-sizing: border-box;
+
+							.icon {
+								width: 32rpx;
+								height: 32rpx;
+								margin-right: 8rpx;
+							}
+						}
+					}
+
+					.txt {
+						font-weight: 400;
+						font-size: 22rpx;
+						color: #FFFFFF;
+						margin: 8rpx 0 16rpx;
+					}
+
+					.card {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						background: #FFF5EB;
+						width: 302rpx;
+						height: 40rpx;
+						border-radius: 8rpx 8rpx 8rpx 8rpx;
+						border: 1rpx solid #F3E2D0;
+						padding: 8rpx;
+						box-sizing: border-box;
+
+						.card-item {
+							display: flex;
+							align-items: center;
+
+							.img {
+								width: 48rpx;
+								height: 24rpx;
+								margin-right: 8rpx;
+							}
+
+							.ranking {
+								font-size: 22rpx;
+								color: #D46C0D;
+							}
+						}
+
+						.go {
+							width: 16rpx;
+							height: 16rpx;
+						}
+					}
+				}
+			}
+
+			.data-block {
+				padding: 0 20rpx;
+				margin-top: 30rpx;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.number-block {
+					display: flex;
+
+					.item {
+						margin-right: 32rpx;
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+
+						.number-item {
+							font-family: Roboto, Roboto;
+							font-weight: 600;
+							font-size: 36rpx;
+							color: #FFFFFF;
+						}
+
+						.txt-item {
+							margin-top: 6rpx;
+							font-size: 26rpx;
+							color: rgba(255, 255, 255, 0.7);
+						}
+					}
+				}
+
+				.button {
+					width: 144rpx;
+					height: 56rpx;
+					background: #FFFFFF;
+					border-radius: 28rpx 28rpx 28rpx 28rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					font-size: 24rpx;
+					color: #02B176;
+
+					.icon {
+						width: 24rpx;
+						height: 24rpx;
+						margin-right: 4rpx;
+					}
+				}
+			}
+
+		}
+
+		//达人视频
+		.vedio-block {
+			position: relative;
+			z-index: 1;
+			background-color: #FFFFFF;
+			margin-top: -74rpx;
+			border-radius: 32rpx 32rpx 0rpx 0rpx;
+			padding: 26rpx 0;
+
+			.tab-wrapper {
+				display: flex;
+				height: 88rpx;
+				padding: 0 40rpx;
+				position: relative;
+
+				.tab-item {
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					position: relative;
+					color: #666666;
+
+					&.active {
+						font-weight: 600;
+						font-size: 32rpx;
+						color: #02B176;
+					}
+
+					.tab-text {
+						font-size: 32rpx;
+						transition: all 0.3s ease;
+
+
+					}
+
+					.underline {
+						position: absolute;
+						bottom: 0;
+						left: 50%;
+						transform: translateX(-50%);
+						width: 48rpx;
+						height: 6rpx;
+						background: #02B176;
+						border-radius: 3rpx 3rpx 3rpx 3rpx;
+						animation: slideIn 0.3s ease;
+					}
+				}
+			}
+
+			@keyframes slideIn {
+				from {
+					opacity: 0;
+					transform: translateX(-50%) scaleX(0.5);
+				}
+
+				to {
+					opacity: 1;
+					transform: translateX(-50%) scaleX(1);
+				}
+			}
+
+			.list {
+				background: #F5F7FA;
+				padding: 24rpx 24rpx;
+				display: flex;
+				justify-content: space-between;
+				flex-wrap: wrap;
+
+				.list-item {
+					width: 342rpx;
+					margin-bottom: 18rpx;
+					position: relative;
+					display: flex;
+					flex-direction: column;
+
+					.img {
+						width: 100%;
+						border-radius: 16rpx 16rpx 0rpx 0rpx;
+
+					}
+
+					.video-icon {
+						width: 40rpx;
+						height: 40rpx;
+						position: absolute;
+						top: 20rpx;
+						right: 20rpx;
+					}
+					.suspension-icon{
+						width: 144rpx;
+						height: 144rpx;
+						position: absolute;
+						top: -14rpx;
+						right: 0rpx;
+					}
+
+					.info-block {
+						border-radius: 0rpx 0rpx 16rpx 16rpx;
+						padding: 12rpx 20rpx 20rpx;
+						box-sizing: border-box;
+						width: 100%;
+						background: #FFFFFF;
+						display: flex;
+						flex-direction: column;
+
+						.title {
+							font-weight: 500;
+							font-size: 28rpx;
+							color: #333333;
+							margin-bottom: 20rpx;
+						}
+
+						.item {
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+							margin-bottom: 20rpx;
+
+							.flex {
+								display: flex;
+								align-items: center;
+								font-size: 22rpx;
+								color: #999999;
+							}
+
+							.icon {
+								width: 32rpx;
+								height: 32rpx;
+								margin-right: 4rpx;
+							}
+							.head{
+								width: 32rpx;
+								height: 32rpx;
+								border-radius: 50%;
+								margin-right: 8rpx;
+							}
+
+							.name {
+								color: #757575;
+							}
+						}
+
+						text {
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+						}
+
+						.card {
+
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+							background: #FFF5EB;
+							width: 302rpx;
+							height: 40rpx;
+							border-radius: 8rpx 8rpx 8rpx 8rpx;
+							border: 1rpx solid #F3E2D0;
+							padding: 8rpx;
+							box-sizing: border-box;
+
+							.card-item {
+								display: flex;
+								align-items: center;
+
+								.img {
+									width: 48rpx;
+									height: 24rpx;
+									margin-right: 8rpx;
+								}
+
+								.ranking {
+									font-size: 22rpx;
+									color: #D46C0D;
+								}
+							}
+
+							.go {
+								width: 16rpx;
+								height: 16rpx;
+							}
+						}
+					}
+
+				}
+
+				.list-item:nth-child(2n) {
+					margin-right: 0;
+				}
+			}
+		}
+
+
+	}
+</style>

pages_shopping/live/life.vue

@@ -0,0 +1,633 @@
+<template>
+	<view class="content">
+		<view class="info">
+			<image class="info-bg" src="/static/images/live_broadcast_bg.png"></image>
+			<view class="status_bar" :style="{height: statusBarHeight}"></view>
+			<view class="shop-block">
+				<view class="title-box">
+					<view class="title">生活号</view>
+					<image class="line" src="/static/images/header_tabs_icon.png"></image>
+				</view>
+				<view class="shop">
+					<image class="w40 h40" src="/static/images/shopping_car.png"></image>
+				</view>
+			</view>
+			<view class="search-cont" @click="toSearch">
+				<image class="icon-search" src="/static/images/search.png" mode=""></image>
+				<input type="text" disabled value="" placeholder="搜索商品"
+					placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
+			</view>
+			<view class="vedio-block">
+				<!-- tab栏 -->
+				<view class="pub-tab-box">
+					<view class="tab-inner">
+						<view v-for="(item,index) in orderStatus" :key="index"
+							:class="status ==item.value?'item active':'item'" @click="orderStatusChange(item)">
+							<view class="text">
+								{{ item.name }}
+								</image>
+							</view>
+						</view>
+					</view>
+				</view>
+
+				<!-- 专区 -->
+				<view class="zone-box">
+					<view class="zone-item green-bg">
+						<view class="title-item">
+							<image class="icon" src="/static/images/hdzx_icon.png" mode=""></image>
+							<image class="title" src="/static/images/hdzx_title.png" mode=""></image>
+						</view>
+						<view class="entrance-item">
+							<text class="txt">#活动中心标题</text>
+							<image class="icon" src="/static/images/shh_arrow_right_icon.png" mode=""></image>
+						</view>
+					</view>
+
+					<view class="zone-item">
+						<view class="title-item">
+							<image class="icon" src="/static/images/ranking_icon.png" mode=""></image>
+							<image class="title" src="/static/images/yxjb_title.png" mode=""></image>
+						</view>
+						<view class="entrance-item">
+							<view class="left">
+								<text class="bold">TOP.1</text>
+								<text class="txt">冰乳绿豆糕 冰冰</text>
+							</view>
+							<image class="icon" src="/static/images/shh_arrow_right_icon.png" mode=""></image>
+						</view>
+					</view>
+				</view>
+
+				<!-- 视频文章列表 -->
+				<mescroll-body bottom="0" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
+					:down="downOption" :up="upOption">
+					<view class="list">
+						<view class="list-item" @click="goLive(item)" v-for="(item,index) in list" :key="index">
+							<image class="img" v-if="item.liveImgUrl" :src="item.liveImgUrl" mode="widthFix"></image>
+							<image class="video-icon" src="/static/images/video_icon.png"></image>
+							<image class="suspension-icon" src="/static/images/suspension.png"></image>
+							<view class="info-block">
+								<view class="title">冰乳绿豆糕 冰冰凉凉谁吃谁迷糊! 谁懂，...</view>
+								<view class="item">
+									<view class="flex">
+										<image class="head" src="/static/images/img.png"></image>
+										<text class="name">崔医生</text>
+									</view>
+									<view class="flex">
+										<image class="icon" src="/static/images/zan_icon.png"></image>
+										<text>141</text>
+									</view>
+								</view>
+								<view class="card">
+									<view class="card-item">
+										<image class="img" src="/static/images/jinbang_font.png"></image>
+										<text class="ranking">达人榜 第15名</text>
+									</view>
+									<image class="go" src="/static/images/jb_arrow_right_icon.png"></image>
+								</view>
+							</view>
+						</view>
+					</view>
+				</mescroll-body>
+			</view>
+			<Task></Task>
+
+		</view>
+	</view>
+</template>
+
+<script>
+	import Task from '@/pages_shopping/live/components/task.vue'
+	import {
+		liveList
+	} from '@/api/living.js'
+	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+	export default {
+		mixins: [MescrollMixin],
+		components: {
+			Task
+		},
+		data() {
+			return {
+				status: '',
+				orderStatus: [{
+						name: "推荐",
+						value: ""
+					},
+					{
+						name: "今日主推",
+						value: "0"
+					},
+					{
+						name: "溯源相册",
+						value: "1"
+					},
+					{
+						name: "悦选菜谱",
+						value: "2"
+					}, {
+						name: "好物分享",
+						value: "3"
+					}
+				],
+				activeTab: 0,
+				// 状态栏的高度
+				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
+				list: [],
+				downOption: {
+					offset: 80,
+					use: true,
+					auto: false
+				},
+				upOption: {
+					use: true,
+					auto: true,
+					page: {
+						num: 0,
+						size: 10
+					}
+				},
+				mescroll: null,
+			}
+		},
+		onLoad() {
+			// if (!uni.getStorageSync("AppToken")) {
+			// 	uni.navigateTo({
+			// 		url: '/pages/auth/login'
+			// 	});
+			// }
+		},
+		onUnload() {
+
+		},
+		methods: { // 顶部搜索
+			toSearch() {
+				uni.navigateTo({
+					url: 'pages/home/productSearch'
+				})
+			},
+			orderStatusChange(item) {
+				this.status = item.value
+			},
+
+			mescrollInit(mescroll) {
+				this.mescroll = mescroll;
+			},
+
+			// 下拉刷新回调
+			downCallback(mescroll) {
+				this.list = [];
+				mescroll.resetUpScroll();
+			},
+
+			// 上拉加载回调
+			upCallback(mescroll) {
+				const pageNum = mescroll.num;
+				const pageSize = mescroll.size;
+
+				let data = {
+					pageSize: pageSize,
+					pageNum: pageNum,
+				}
+				liveList(data).then(res => {
+					if (!res) {
+						mescroll.endErr();
+						return;
+					}
+					if (res.code == 200) {
+						let curPageData = Array.isArray(res.data.list) ? res.data.list : [];
+						let totalSize = Number(res.data.total) || 0;
+						if (pageNum === 1) {
+							this.list = [];
+						}
+						this.list = this.list.concat(curPageData);
+
+						mescroll.endBySize(curPageData.length, totalSize);
+					} else {
+						mescroll.endErr();
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						});
+					}
+				}).catch(err => {
+					mescroll.endErr();
+				});
+			},
+
+			goLive(item) {
+				uni.navigateTo({
+					// &immediate=true
+					url: `./living?liveId=${item.liveId}`
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		min-height: 100vh;
+		background: #F5F7FA;
+
+		.info {
+			width: 100%;
+			height: 600rpx;
+			position: relative;
+			z-index: 0;
+
+			.shop-block {
+				padding-left: 24rpx;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.title-box {
+					position: relative;
+
+					.title {
+						font-weight: 600;
+						font-size: 40rpx;
+						color: #333333;
+					}
+
+					.line {
+						position: absolute;
+						top: 24rpx;
+						left: 50%;
+						transform: translateX(-50%);
+						width: 68rpx;
+						height: 32rpx;
+						z-index: -1;
+					}
+				}
+
+				.shop {
+					width: 64rpx;
+					height: 64rpx;
+					padding: 12rpx;
+					margin-right: 210rpx;
+					border-radius: 32rpx 32rpx 32rpx 32rpx;
+					border: 1rpx solid #E9E9E9;
+					box-sizing: border-box;
+					background: #FFFFFF;
+
+				}
+			}
+
+			.search-cont {
+				box-sizing: border-box;
+				display: flex;
+				align-items: center;
+				height: 68rpx;
+				background: #FFFFFF;
+				border-radius: 36rpx;
+				padding: 0 24rpx;
+				margin: 24rpx 24rpx 32rpx;
+
+				.icon-search {
+					width: 24rpx;
+					height: 24rpx;
+					margin-right: 16rpx;
+				}
+
+				input {
+					height: 68rpx;
+					line-height: 68rpx;
+					flex: 1;
+				}
+
+				.search-button {
+					width: 120rpx;
+					height: 60rpx;
+					border-radius: 30rpx 30rpx 30rpx 30rpx;
+					font-weight: 500;
+					font-size: 28rpx;
+					color: #FFFFFF;
+					text-align: center;
+					line-height: 60rpx;
+				}
+			}
+
+			.info-bg {
+				position: absolute;
+				z-index: -1;
+				width: 100%;
+				height: 100%;
+			}
+
+			.data-block {
+				padding: 0 20rpx;
+				margin-top: 30rpx;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.number-block {
+					display: flex;
+
+					.item {
+						margin-right: 32rpx;
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+
+						.number-item {
+							font-family: Roboto, Roboto;
+							font-weight: 600;
+							font-size: 36rpx;
+							color: #FFFFFF;
+						}
+
+						.txt-item {
+							margin-top: 6rpx;
+							font-size: 26rpx;
+							color: rgba(255, 255, 255, 0.7);
+						}
+					}
+				}
+
+				.button {
+					width: 144rpx;
+					height: 56rpx;
+					background: #FFFFFF;
+					border-radius: 28rpx 28rpx 28rpx 28rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					font-size: 24rpx;
+					color: #02B176;
+
+					.icon {
+						width: 24rpx;
+						height: 24rpx;
+						margin-right: 4rpx;
+					}
+				}
+			}
+
+			.shop-icon {
+				display: flex;
+				justify-content: flex-end;
+				margin: 12rpx 210rpx 0 0;
+			}
+
+
+			//达人视频
+			.vedio-block {
+				position: relative;
+				z-index: 1;
+				border-radius: 32rpx 32rpx 0rpx 0rpx;
+				padding: 0 0 26rpx;
+
+				// tab栏切换
+				.pub-tab-box {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					box-sizing: border-box;
+					width: 100%;
+					padding: 0 24rpx;
+					justify-content: space-between;
+
+					.tab-inner {
+						width: 100%;
+						height: 88rpx;
+						line-height: 88rpx;
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						overflow-x: auto;
+						position: relative;
+					}
+
+					.item {
+						font-size: 30rpx;
+						white-space: nowrap;
+						line-height: 1;
+						font-family: PingFang SC, PingFang SC;
+						color: #4D4D4D;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						position: relative;
+
+						&.active {
+							font-weight: bold;
+							color: #333333;
+
+							&::after {
+								content: '';
+								position: absolute;
+								left: 50%;
+								bottom: -10rpx;
+								transform: translateX(-50%);
+								width: 100%;
+								height: 12rpx;
+								background: linear-gradient(90deg, rgba(56, 217, 125, 0.5) 0%, rgba(56, 217, 125, 0) 100%);
+								border-radius: 6rpx;
+							}
+						}
+					}
+				}
+
+				// 活动专区
+				.zone-box {
+					display: flex;
+					justify-content: space-between;
+					padding: 0 24rpx;
+					margin-bottom: 20rpx;
+
+					.zone-item {
+						padding: 24rpx;
+						box-sizing: border-box;
+						display: flex;
+						flex-direction: column;
+						width: 342rpx;
+						height: 136rpx;
+						background: linear-gradient(180deg, #FFF9F3 0%, #FFFFFF 40%, #FFFFFF 100%);
+						border-radius: 16rpx 16rpx 16rpx 16rpx;
+						border: 2rpx solid #FFFFFF;
+
+						.title-item {
+							margin-bottom: 20rpx;
+
+							.icon {
+								width: 32rpx;
+								height: 32rpx;
+								margin-right: 8rpx;
+							}
+
+							.title {
+								width: 120rpx;
+								height: 28rpx;
+							}
+						}
+
+						.entrance-item {
+							font-size: 24rpx;
+							color: #666666;
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+
+							.left {
+								display: flex;
+
+								.bold {
+									font-family: Roboto Flex, Roboto Flex;
+									font-weight: 600;
+									font-size: 24rpx;
+									color: #D46C0D;
+									margin-right: 6rpx;
+									transform: skewX(-8deg);
+									/* 负值向左倾斜，正值向右倾斜 */
+									display: inline-block;
+									/* transform需要inline-block或block */
+								}
+							}
+
+							.icon {
+								width: 24rpx;
+								height: 24rpx;
+							}
+						}
+					}
+				}
+
+				.list {
+					padding: 24rpx 24rpx;
+					display: flex;
+					justify-content: space-between;
+					flex-wrap: wrap;
+
+					.list-item {
+						width: 342rpx;
+						margin-bottom: 18rpx;
+						position: relative;
+						display: flex;
+						flex-direction: column;
+
+						.img {
+							width: 100%;
+							border-radius: 16rpx 16rpx 0rpx 0rpx;
+
+						}
+
+						.video-icon {
+							width: 40rpx;
+							height: 40rpx;
+							position: absolute;
+							top: 20rpx;
+							right: 20rpx;
+						}
+
+						.suspension-icon {
+							width: 144rpx;
+							height: 144rpx;
+							position: absolute;
+							top: -14rpx;
+							right: 0rpx;
+						}
+
+						.info-block {
+							border-radius: 0rpx 0rpx 16rpx 16rpx;
+							padding: 12rpx 20rpx 20rpx;
+							box-sizing: border-box;
+							width: 100%;
+							background: #FFFFFF;
+							display: flex;
+							flex-direction: column;
+
+							.title {
+								font-weight: 500;
+								font-size: 28rpx;
+								color: #333333;
+								margin-bottom: 20rpx;
+							}
+
+							.item {
+								display: flex;
+								justify-content: space-between;
+								align-items: center;
+								margin-bottom: 20rpx;
+
+								.flex {
+									display: flex;
+									align-items: center;
+									font-size: 22rpx;
+									color: #999999;
+								}
+
+								.icon {
+									width: 32rpx;
+									height: 32rpx;
+									margin-right: 4rpx;
+								}
+
+								.head {
+									width: 32rpx;
+									height: 32rpx;
+									border-radius: 50%;
+									margin-right: 8rpx;
+								}
+
+								.name {
+									color: #757575;
+								}
+							}
+
+							text {
+								white-space: nowrap;
+								overflow: hidden;
+								text-overflow: ellipsis;
+							}
+
+							.card {
+
+								display: flex;
+								justify-content: space-between;
+								align-items: center;
+								background: #FFF5EB;
+								width: 302rpx;
+								height: 40rpx;
+								border-radius: 8rpx 8rpx 8rpx 8rpx;
+								border: 1rpx solid #F3E2D0;
+								padding: 8rpx;
+								box-sizing: border-box;
+
+								.card-item {
+									display: flex;
+									align-items: center;
+
+									.img {
+										width: 48rpx;
+										height: 24rpx;
+										margin-right: 8rpx;
+									}
+
+									.ranking {
+										font-size: 22rpx;
+										color: #D46C0D;
+									}
+								}
+
+								.go {
+									width: 16rpx;
+									height: 16rpx;
+								}
+							}
+						}
+
+					}
+
+					.list-item:nth-child(2n) {
+						margin-right: 0;
+					}
+				}
+			}
+
+		}
+	}
+</style>

pages_shopping/live/list.vue

@@ -0,0 +1,642 @@
+<template>
+	<view class="content">
+		<view class="info">
+			<image class="info-bg" src="/static/images/live_broadcast_bg.png"></image>
+			<view class="status_bar" :style="{height: statusBarHeight}"></view>
+			<view class="shop-block">
+				<view class="shop">
+					<image class="w40 h40" src="/static/images/shopping_car.png"></image>
+				</view>
+			</view>
+			<view class="vedio-block">
+				<view class="top">
+					<view class="tab-wrapper">
+						<!-- 直播 -->
+						<view class="tab-item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
+							<text class="tab-text">直播中</text>
+							<image class="line" v-if="activeTab === 0" src="/static/images/header_tabs_icon.png"
+								alt="" />
+						</view>
+						<!-- 直播预告-->
+						<view class="tab-item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
+							<text class="tab-text">直播预告</text>
+							<image class="line" v-if="activeTab === 1" src="/static/images/header_tabs_icon.png"
+								alt="" />
+						</view>
+					</view>
+				</view>
+				<!-- 视频文章列表 -->
+				<mescroll-body bottom="0" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
+					:down="downOption" :up="upOption">
+					<view class="list" v-if="activeTab === 0">
+						<view class="list-item" @click="goLive(item)" v-for="(item,index) in list" :key="index">
+							<image class="img" v-if="item.liveImgUrl" :src="item.liveImgUrl" mode="widthFix"></image>
+							<!-- 重庆 · 优选标签 -->
+							<view class="lable">
+								<view class="play-lable">
+									<image class="icon" src="/static/images/play.gif"></image>
+								</view>
+								<view class="place-label">
+									重庆 · 优选
+								</view>
+							</view>
+							<!-- 直播中标签 -->
+							<view class="live-lable" v-if="false">
+								<image class="icon" src="/static/images/play.gif"></image>
+								<text>直播中</text>
+							</view>
+							<view class="info-block">
+								<view class="title ellipsis2">冰乳绿豆糕 冰冰凉凉谁吃谁迷糊! 谁懂，...冰乳绿豆糕 冰冰凉凉谁吃谁迷糊!</view>
+								<view class="item">
+									<view class="flex">
+										<image class="head" src="/static/images/img.png"></image>
+										<text class="name">崔医生</text>
+									</view>
+									<view class="flex">
+										<image class="icon" src="/static/images/watch_number_icon.png"></image>
+										<text>141</text>
+									</view>
+								</view>
+							</view>
+						</view>
+					</view>
+					<view class="list" v-if="activeTab === 1">
+						<view class="list-item2" @click="goLive(item)" v-for="(item,index) in list" :key="index">
+							<view class="img-box">
+								<view class="time-block">
+									<view class="date">9/11</view>
+									<view class="time">20:00开播</view>
+								</view>
+								<image class="img" v-if="item.liveImgUrl" :src="item.liveImgUrl">
+								</image>
+							</view>
+							<!-- <image class="video-icon" src="/static/images/video_icon.png"></image> -->
+							<view class="info-block">
+								<view class="title ellipsis2">冰乳绿豆糕 冰冰凉凉谁吃谁迷糊! 谁懂，...冰乳绿豆糕 冰冰凉凉谁吃谁迷糊!冰乳绿豆糕 冰冰凉凉谁吃谁迷糊!
+								</view>
+								<view class="shop-item">
+									<image class="head" src="/static/images/img.png"></image>
+									<text class="name">芳华悦选旗舰店</text>
+								</view>
+								<view class="item">
+									<view class="flex">
+										<image class="icon" src="/static/images/reservation_icon.png"></image>
+										<text class="name">245人已预约</text>
+									</view>
+									<view class="button">预约</view>
+								</view>
+							</view>
+						</view>
+					</view>
+				</mescroll-body>
+			</view>
+		</view>
+
+
+
+	</view>
+</template>
+
+<script>
+	import {
+		liveList
+	} from '@/api/living.js'
+	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+	export default {
+		mixins: [MescrollMixin],
+		data() {
+			return {
+				activeTab: 0,
+				// 状态栏的高度
+				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
+				list: [],
+				downOption: {
+					offset: 80,
+					use: true,
+					auto: false
+				},
+				upOption: {
+					use: true,
+					auto: true,
+					page: {
+						num: 0,
+						size: 10
+					}
+				},
+				mescroll: null,
+			}
+		},
+		onLoad() {
+			// if (!uni.getStorageSync("AppToken")) {
+			// 	uni.navigateTo({
+			// 		url: '/pages/auth/login'
+			// 	});
+			// }
+		},
+		onUnload() {
+
+		},
+		methods: {
+			switchTab(tab) {
+				if (this.activeTab === tab) return;
+				this.activeTab = tab;
+				this.$emit('change', tab);
+			},
+			mescrollInit(mescroll) {
+				this.mescroll = mescroll;
+			},
+
+			// 下拉刷新回调
+			downCallback(mescroll) {
+				this.list = [];
+				mescroll.resetUpScroll();
+			},
+
+			// 上拉加载回调
+			upCallback(mescroll) {
+				const pageNum = mescroll.num;
+				const pageSize = mescroll.size;
+
+				let data = {
+					pageSize: pageSize,
+					pageNum: pageNum,
+				}
+				liveList(data).then(res => {
+					if (!res) {
+						mescroll.endErr();
+						return;
+					}
+					if (res.code == 200) {
+						let curPageData = Array.isArray(res.data.list) ? res.data.list : [];
+						let totalSize = Number(res.data.total) || 0;
+						if (pageNum === 1) {
+							this.list = [];
+						}
+						this.list = this.list.concat(curPageData);
+
+						mescroll.endBySize(curPageData.length, totalSize);
+					} else {
+						mescroll.endErr();
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						});
+					}
+				}).catch(err => {
+					mescroll.endErr();
+				});
+			},
+
+			goLive(item) {
+				uni.navigateTo({
+					url: `./living?liveId=${item.liveId}`
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.ellipsis2 {
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		overflow: hidden;
+		word-break: break-all;
+	}
+
+	.content {
+		background: #F5F7FA;
+		min-height: 100vh;
+
+		.info {
+			width: 100%;
+			height: 600rpx;
+			position: relative;
+			z-index: 0;
+
+			.shop-block {
+				display: flex;
+				justify-content: flex-end;
+
+				.shop {
+					width: 64rpx;
+					height: 64rpx;
+					padding: 12rpx;
+					margin-right: 210rpx;
+					border-radius: 32rpx 32rpx 32rpx 32rpx;
+					border: 1rpx solid #E9E9E9;
+					box-sizing: border-box;
+					background: #FFFFFF;
+
+				}
+			}
+
+			.info-bg {
+				position: absolute;
+				z-index: -1;
+				width: 100%;
+				height: 100%;
+			}
+
+			.data-block {
+				padding: 0 20rpx;
+				margin-top: 30rpx;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.number-block {
+					display: flex;
+
+					.item {
+						margin-right: 32rpx;
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+
+						.number-item {
+							font-family: Roboto, Roboto;
+							font-weight: 600;
+							font-size: 36rpx;
+							color: #FFFFFF;
+						}
+
+						.txt-item {
+							margin-top: 6rpx;
+							font-size: 26rpx;
+							color: rgba(255, 255, 255, 0.7);
+						}
+					}
+				}
+
+				.button {
+					width: 144rpx;
+					height: 56rpx;
+					background: #FFFFFF;
+					border-radius: 28rpx 28rpx 28rpx 28rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					font-size: 24rpx;
+					color: #02B176;
+
+					.icon {
+						width: 24rpx;
+						height: 24rpx;
+						margin-right: 4rpx;
+					}
+				}
+			}
+
+			.shop-icon {
+				display: flex;
+				justify-content: flex-end;
+				margin: 12rpx 210rpx 0 0;
+			}
+
+			//视频
+			.vedio-block {
+				position: relative;
+				z-index: 1;
+				padding: 26rpx 0;
+
+				.top {
+					display: flex;
+				}
+				.tab-wrapper {
+					display: flex;
+					height: 88rpx;
+					padding: 0 40rpx;
+					position: relative;
+
+					.tab-item {
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+						justify-content: center;
+						position: relative;
+						font-size: 32rpx;
+						color: #333333;
+						margin-right: 44rpx;
+
+						&.active {
+							font-weight: 600;
+							font-size: 40rpx;
+						}
+
+						.tab-text {
+							font-size: 32rpx;
+							transition: all 0.3s ease;
+						}
+
+						.line {
+							width: 68rpx;
+							height: 28rpx;
+							position: absolute;
+							top: 44rpx;
+							z-index: -1;
+						}
+					}
+				}
+				.icon {
+					display: flex;
+					justify-content: flex-end;
+				}
+
+				@keyframes slideIn {
+					from {
+						opacity: 0;
+						transform: translateX(-50%) scaleX(0.5);
+					}
+
+					to {
+						opacity: 1;
+						transform: translateX(-50%) scaleX(1);
+					}
+				}
+				.list {
+					padding: 24rpx 24rpx;
+					display: flex;
+					justify-content: space-between;
+					flex-wrap: wrap;
+
+					.list-item {
+						width: 342rpx;
+						margin-bottom: 18rpx;
+						position: relative;
+						display: flex;
+						flex-direction: column;
+						border-radius: 16rpx 16rpx 16rpx 16rpx;
+						.lable {
+							position: absolute;
+							left: 16rpx;
+							top: 16rpx;
+							display: flex;
+							text-align: center;
+							border-radius: 6rpx 6rpx 6rpx 6rpx;
+							overflow: hidden;
+							.play-lable {
+								width: 40rpx;
+								height: 40rpx;
+								line-height: 40rpx;
+								font-size: 20rpx;
+								color: #FFFFFF;
+								background: linear-gradient(136deg, #38D97D 0%, #02B176 100%);
+								display: flex;
+								justify-content: center;
+								align-items: center;
+								.icon {
+									width: 24rpx;
+									height: 24rpx;
+								}
+							}
+							.place-label {
+								width: 106rpx;
+								height: 40rpx;
+								background: rgba(0, 0, 0, 0.6);
+								line-height: 40rpx;
+								font-size: 20rpx;
+								color: #FFFFFF;
+							}
+						}
+
+						.live-lable {
+							position: absolute;
+							left: 16rpx;
+							top: 16rpx;
+							display: flex;
+							width: 104rpx;
+							height: 40rpx;
+							background: #FA341E;
+							align-items: center;
+							justify-content: center;
+							border-radius: 6rpx 6rpx 6rpx 6rpx;
+							font-size: 20rpx;
+							color: #FFFFFF;
+
+							.icon {
+								width: 24rpx;
+								height: 24rpx;
+								margin-right: 4rpx;
+							}
+						}
+
+
+
+
+						.img {
+							width: 100%;
+							border-radius: 16rpx 16rpx 0rpx 0rpx;
+						}
+
+						
+
+						.info-block {
+							border-radius: 0rpx 0rpx 16rpx 16rpx;
+							padding: 12rpx 20rpx 20rpx;
+							box-sizing: border-box;
+							width: 100%;
+							background: #FFFFFF;
+							display: flex;
+							flex-direction: column;
+
+							.title {
+								font-weight: 500;
+								font-size: 28rpx;
+								color: #333333;
+								margin-bottom: 20rpx;
+							}
+
+							.item {
+								display: flex;
+								justify-content: space-between;
+								align-items: center;
+								margin-bottom: 20rpx;
+
+								.flex {
+									display: flex;
+									align-items: center;
+									font-size: 22rpx;
+									color: #999999;
+								}
+
+								.icon {
+									width: 32rpx;
+									height: 32rpx;
+									margin-right: 4rpx;
+								}
+
+								.head {
+									width: 32rpx;
+									height: 32rpx;
+									border-radius: 50%;
+									margin-right: 8rpx;
+								}
+
+								.name {
+									color: #757575;
+								}
+							}
+
+							text {
+								white-space: nowrap;
+								overflow: hidden;
+								text-overflow: ellipsis;
+							}
+						}
+					}
+
+
+					.list-item2 {
+						width: 100%;
+						margin-bottom: 18rpx;
+						position: relative;
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						margin-bottom: 20rpx;
+						border-radius: 16rpx 16rpx 16rpx 16rpx;
+						background: #ffffff;
+						padding: 24rpx;
+
+						.img-box {
+							position: relative;
+							width: 280rpx;
+							height: 220rpx;
+							overflow: hidden;
+							flex-shrink: 0;
+							border-radius: 16rpx 16rpx 16rpx 16rpx;
+							margin-right: 24rpx;
+
+							.time-block {
+								position: absolute;
+								left: 16rpx;
+								top: 16rpx;
+								display: flex;
+								text-align: center;
+								border-radius: 6rpx 6rpx 6rpx 6rpx;
+								overflow: hidden;
+
+								.date {
+									width: 56rpx;
+									height: 40rpx;
+									line-height: 40rpx;
+									font-size: 20rpx;
+									color: #FFFFFF;
+									background: #F4A007;
+								}
+
+								.time {
+									width: 110rpx;
+									height: 40rpx;
+									background: rgba(0, 0, 0, 0.6);
+									line-height: 40rpx;
+									font-size: 20rpx;
+									color: #FFFFFF;
+
+								}
+							}
+
+							.img {
+								width: 100%;
+								height: 100%;
+							}
+						}
+						.info-block {
+							padding: 12rpx 20rpx 20rpx;
+							box-sizing: border-box;
+							width: 100%;
+							display: flex;
+							flex-direction: column;
+
+							.title {
+								font-weight: 500;
+								font-size: 32rpx;
+								color: #333333;
+								margin-bottom: 12rpx;
+							}
+
+							.shop-item {
+								display: flex;
+								font-size: 24rpx;
+								color: #666666;
+								align-items: center;
+								margin-bottom: 34rpx;
+
+
+								.icon {
+									width: 32rpx;
+									height: 32rpx;
+									margin-right: 12rpx;
+								}
+
+								.head {
+									width: 32rpx;
+									height: 32rpx;
+									border-radius: 50%;
+									margin-right: 8rpx;
+								}
+
+								.name {
+									color: #757575;
+								}
+							}
+
+							.item {
+								display: flex;
+								justify-content: space-between;
+								align-items: center;
+								font-size: 22rpx;
+								color: #999999;
+
+								.flex {
+									display: flex;
+									align-items: center;
+								}
+
+								.icon {
+									width: 24rpx;
+									height: 24rpx;
+									margin-right: 8rpx;
+								}
+
+								.button {
+									width: 136rpx;
+									height: 64rpx;
+									background: linear-gradient(136deg, #38D97D 0%, #02B176 100%);
+									border-radius: 32rpx 32rpx 32rpx 32rpx;
+									font-weight: 500;
+									font-size: 28rpx;
+									color: #FFFFFF;
+									text-align: center;
+									line-height: 64rpx;
+								}
+
+								.name {
+									color: #757575;
+								}
+							}
+
+							text {
+								white-space: nowrap;
+								overflow: hidden;
+								text-overflow: ellipsis;
+							}
+						}
+
+					}
+
+					.list-item:nth-child(2n) {
+						margin-right: 0;
+					}
+				}
+			}
+
+		}
+
+
+
+
+	}
+</style>

pages_shopping/live/points.vue

@@ -0,0 +1,1240 @@
+<template>
+	<view class="container">
+		<view class="uni-nav-bar">
+			<view :style="{height: statusBarHeight,width: '100%'}"></view>
+			<view class="uni-nav-barbox">
+				<view class="uni-nav-back" @click="$navBack()">
+					<image src="@/static/images/back_white_icon.png" mode="aspectFill"></image>
+				</view>
+				<view class="uni-nav-title" style="flex: 1;text-align: center;">我的芳华币</view>
+			</view>
+			<image class="uni-nav-bar_bg" src="@/static/images/integral/integral_top_bg.png" mode="widthFix"></image>
+		</view>
+		
+		<image class="integral_top_bg" src="@/static/images/integral/integral_top_bg.png" mode="widthFix"></image>
+		<u-popup :show="isShow" mode="center"  @close="closeBox" :round="16" style="width: 80%;">
+			<view class="tips-box">
+		      <view class="tips-title">
+				  提示
+			  </view>
+			  <view class="desc">
+				  您有{{withdrawIntegral}}芳华币可兑换现金{{withdrawCash}}元,是否兑换
+			  </view>
+			  <view class="btn-box x-ac">
+				  <view class="okbtn" @click="integralExchange">确定</view>
+				  <view class="okbtn cancel" @click="closeBox">取消</view>
+			  </view>
+			</view>
+		</u-popup>
+		<view class="container-body">
+			<view class="pointsbox">
+				<view class="pointsbox-left">
+					<view>我的芳华币</view>
+					<view class="pointsbox-num">
+						<text>{{integral}}</text>
+						<text class="pointsbox-detail" @click="handleDetail">明细</text>
+					</view>
+					<!-- <view class="pointsbox-desc">可抵现金{{money}}元，最高可100%抵扣</view> -->
+					<view class="pointsbox-desc">其中{{withdrawIntegral}}芳华币可兑换现金提现<text v-if="withdrawIntegral!==0" class="" @click="openBox">【去兑换】</text></view>
+					
+				</view>
+				<image class="pointsbox-right" src="@/static/images/integral/integral_img.png" mode="aspectFill"></image>
+			</view>
+			<view style="padding: 0 24rpx;">
+				<!-- 签到 -->
+				<view class="signbox box">
+					<view class="signbox-head">
+						<text class="box-title">连续签到领芳华币</text>
+						<view class="signbox-head-r">已签到<text>{{signNum}}</text>天</view>
+					</view>
+					
+					<view class="signbox-con">
+						<view class="signbox-item" v-for="(item,index) in sign"  :key="index">
+							<block v-if="index<6" >
+								<view  class="imgbox">
+									<view v-if="index + 1 <= signNum" class="signdaybox">
+										<view class="signday">+{{item.signNum}}</view>
+										<image src="@/static/images/integral/sign_in_on_icon.png" mode="aspectFill"></image>
+									</view>
+									<view v-else class="integral-box">
+										<view class="integral-box-line">
+											<view class="integral-box-con">
+												+{{item.signNum}}
+											</view>
+										</view>
+									</view>
+								</view>
+								<view  :style="{color: index + 1 <= signNum ? '#FF5C03':''}">第{{index + 1}}天</view>
+							</block>
+							<block v-else>
+								<view class="imgbox">
+									<image class="imgbox" src="@/static/images/integral/gift_img.png" mode="aspectFill"></image>
+								</view>
+								<view :style="{color: 7 <= signNum ? '#FF5C03':''}">芳华礼包</view>
+							</block>
+						</view>
+					</view>
+					
+					<view class="signbox-footer">
+						<button class="signbox-footer-btn" :loading="signLoading" :disabled="signLoading"  @click="doSign()">{{isDaySign?'已签到':'立即签到'}}</button>
+					</view>
+				</view>
+				<!-- 福利兑换 -->
+				<view class="benefit box">
+					<text class="box-title">福利兑换</text>
+					<view class="benefit-box">
+						<view class="benefit-item" v-for="(item,index) in benefitList" @click="handleMenu(item)" :key="index">
+							<image :src="item.icon" mode="aspectFill"></image>
+							<view>{{item.name}}</view>
+						</view>
+					</view>
+				</view>
+				
+				<!-- 新人福利 -->
+				<view class="task box">
+					<text class="box-title">新人福利</text>
+					<view class="newusertask-box task-box" v-for="(item,index) in newUserTask" :key="index">
+						<view class="newusertask-list task-list">
+							<image class="task-list-icon" :src="item.icon" mode="aspectFill"></image>
+							<view class="task-list-r">
+								
+						<!-- 	<block v-if="index<newUserTask.length-1">
+									<view v-if="index==0" class="task-btn" :class="isBindMobile?'task-btn-disable':''" @tap="handleNewTask(index)">{{isBindMobile?"已完成":"去完成"}}</view>
+									<view v-if="index==1" class="task-btn" :class="isBindMobile?'task-btn-disable':''" @tap="handleNewTask(index)">{{isBindMobile?"已完成":"去完成"}}</view>
+									<view v-else class="task-btn" >{{item.btntxt}}</view>
+								</block> -->
+								
+								<block v-if="index==0">
+									<view>
+										<view class="task-title">{{item.title}}</view>
+										<view v-html="item.desc"></view>
+									</view>
+									<view class="task-btn" :class="isBindMobile?'task-btn-finish':''" @tap="handleNewTask(index)">{{isBindMobile?"已领取":"去完成"}}</view>
+								</block>
+								
+								<!--专家免费咨询-->
+								<block v-else-if="index==1">
+									<view>
+										<view class="task-title">{{item.title}}</view>
+										<view v-html="item.desc"></view>
+										<view v-if="isNewUser && userBenefits.taskTwo==0" class="es-mt-5">截止时间：{{ countdownText }}</view>
+									</view>
+									<view v-if="isNewUser && userBenefits.taskTwo==0" class="task-btn" @tap="goToCourse()" >{{ "去完成" }}</view>
+									<view v-else-if="userBenefits.taskTwo==1" class="task-btn task-btn-finish">{{ "已完成" }}</view>
+									<view v-else-if="!isNewUser&& userBenefits.taskTwo==0" class="task-btn task-btn-disable">{{ "已过期" }}</view>
+								</block>
+								
+								<block v-else-if="index==2">
+									<view>
+										<view class="task-title">{{item.title}}</view>
+										<view>下单后返现<span style='color:#FF5C03'>{{integralInfo.integralNewTask||0}}</span>芳华币</view>
+										<view v-if="isNewUser && userBenefits.taskThree==0" class="es-mt-5">截止时间：{{countdownText}}</view>
+									</view>
+									<view v-if="isNewUser && userBenefits.taskThree==0" class="task-btn" @tap="loginNavTo(item.pageUrl)" >{{ "去完成" }}</view>
+									<view v-else-if="userBenefits.taskThree==1" class="task-btn task-btn-finish">{{ "已完成" }}</view>
+									<view v-else-if="!isNewUser&& userBenefits.taskThree==0" class="task-btn task-btn-disable">{{ "已过期" }}</view>
+								</block>
+								
+								<block v-else-if="index==3">
+									<view>
+										<view class="task-title">{{item.title}}</view>
+										<view v-html="item.desc"></view>
+										<view v-if="isNewUser && userBenefits.taskFour==0" class="es-mt-5">截止时间：{{ countdownText }}</view>
+									</view>
+									<view v-if="isNewUser && userBenefits.taskFour==0" class="task-btn" @tap="loginNavTo(item.pageUrl)" >{{ "去完成" }}</view>
+									<view v-else-if="userBenefits.taskFour==1" class="task-btn task-btn-finish">{{ "已完成" }}</view>
+									<view v-else-if="!isNewUser&& userBenefits.taskFour==0" class="task-btn task-btn-disable">{{ "已过期" }}</view>
+								</block>
+								<block v-else-if="index==4">
+									<view>
+										<view class="task-title">{{item.title}}</view>
+										<view v-html="item.desc"></view>
+										<view v-if="isNewUser && userBenefits.taskFive==0" class="es-mt-5">截止时间：{{ countdownText }}</view>
+									</view>
+									<view v-if="isNewUser && userBenefits.taskFive==0" class="task-btn" @tap="loginNavTo(item.pageUrl)" >{{ "去完成" }}</view>
+									<view v-else-if="userBenefits.taskFive==1" class="task-btn task-btn-finish">{{ "已完成" }}</view>
+									<view v-else-if="!isNewUser&& userBenefits.taskFive==0" class="task-btn task-btn-disable">{{ "已过期" }}</view>
+								</block>
+								
+								<block v-else>
+									<view>
+										<view class="task-title">{{item.title}}</view>
+										<view>填码即得<text style='color:#FF5C03'>+{{integralInfo.integralInvited||0}}</text>芳华币</view>
+									</view>
+									<template v-if="item.title =='填写朋友邀请码'" >
+										<view v-if="userBenefits.taskSix==1" class="task-btn task-btn-finish">已领取</view>
+									</template>
+									<view class="task-btn" v-else @tap="loginNavTo(item.pageUrl)" >{{item.btntxt}}</view>
+								</block>
+								
+							</view>
+						</view>
+						
+						
+						<view v-if="item.title =='填写朋友邀请码'&&userBenefits.taskSix!=1" class="invitation-code">
+							<view>
+								<input class="input" v-model.trim="invitationCode" maxlength="50" :placeholder-style="placeholderStyle" placeholder="填码得芳华币" />
+							</view>
+							<button :class="!invitationCode ? 'task-btn task-btn-disable':'task-btn'" :disabled="bindLoading" :loading="bindLoading" @click="bindCode">{{item.btntxt}}</button>
+						</view>
+					</view>
+				</view>
+				
+				<!-- 每日任务 -->
+				<view class="task box">
+					<text class="box-title">每日任务</text>
+					<view class="task-box" v-for="(item,index) in taskList" :key="index">
+						<view class="task-list">
+							<image class="task-list-icon" :src="item.icon" mode="aspectFill"></image>
+							<view class="task-list-r">
+								<view>
+									<view class="task-title">
+										<text>{{item.title}}</text>
+										<text class="title-tip" v-if="item.title =='邀请好友享福利'">最高一万元</text>
+									</view>
+									<view v-show="item.id==0||item.id==2||item.id==7" v-html="item.desc"></view>
+									<view v-show="item.id==1">每日首次成功发布视频<text style="color: #FF5C03;">+{{integralInfo.integralTalentVideo||0}}</text>芳华币</view>
+									<view v-show="item.id==3">每集<text style="color: #FF5C03;">+{{integralInfo.integralCourse||0}}</text>芳华币</view>
+									<view v-show="item.id==4">实际消费满1元<text style="color: #FF5C03;">+{{integralInfo.integralRatio||0}}</text>芳华币</view>
+									<view v-show="item.id==5">填写即送<text style="color: #FF5C03;">+{{integralInfo.integralFollow||0}}芳华币/条</text></view>
+									<view v-show="item.id==6">分享至微信、朋友圈<text style="color: #FF5C03;">+{{integralInfo.integralShare||0}}芳华币/条</text></view>
+								</view>
+								<view class="task-btn" @tap="handleDayTask(item)">{{item.btntxt}}</view>
+							</view>
+						</view>
+						
+						<view v-if="item.title =='邀请好友享福利'" class="task-footer">
+							<button class="task-footer-btn" @click="copyCode">
+								<image src="@/static/images/integral/copy_icon.png" mode="aspectFill"></image>
+								<text>复制邀请码</text>
+							</button>
+							<button class="task-footer-btn" style="margin-left: 22rpx;" @click="handleInvite">
+								<image src="@/static/images/integral/weixin_icon.png" mode="aspectFill"></image>
+								<text>邀请好友</text>
+							</button>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 邀请海报 -->
+		<uni-popup ref="invitePopup" type="center" style="z-index: 9999;">
+			<view class="invite" @click="closepop">
+				<image :src="downUrlImg" mode="aspectFit" show-menu-by-longpress="true" @click.stop @longpress="longpressImg"></image>
+				<button class="downtbn" @click.stop="downImg">保存图片</button>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script>
+	import {getDictByKey,getConfigByKey} from '@/api/common.js'
+	import {getUserSign,getUserIntegralLogsList,doSign,getNewcomerBenefits,getDownloadPoster,invited} from '@/api/integral';
+	import {getUserInfo,getWallet,integralExchange} from '@/api/user'
+	import Loading from "@/components/Loading";
+	export default {
+		data() {
+			return {
+				withdrawIntegral:0,
+				withdrawCash:0,
+				isShow:false,
+				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
+				signLoading: false,
+				signList: [10,10,10,50,50,60],
+				typeOptions:[],
+				isDaySign:false,
+				signNum:0,
+				integral:0,
+				sign:[],
+				timer:null,
+				user:{"phone":""},
+				isBindMobile:false,
+				expireTime: "",
+				countdownText: '',
+				userBenefits:{},
+				isNewUser: 0,
+				benefitList: [
+							{
+							icon: '/static/images/integral/go_consultation_icon.png',
+							name: '去问诊',
+							pageUrl:"/pages/doctor/doctorList"
+						},{
+							icon: '/static/images/integral/go_exchange_icon.png',
+							name: '去兑换',
+							pageUrl:"/pages/user/integral/integralGoodsList"
+						},{
+							icon: '/static/images/integral/go_buy_medicine_icon.png',
+							name: '去购药',
+							pageUrl:"/pages/store/packageList"
+						},{
+							icon: '/static/images/integral/go_change_course_icon.png',
+							isCourse:true,
+							name: '去换课'
+						}
+				],
+				newUserTask: [
+						{
+						icon: '/static/images/integral/member_icon.png',
+						title: '10天会员限时领',
+						desc: "首次注册，完成<span style='color:#FF5C03'>手机号绑定</span>领取",
+						btntxt: '去完成',
+					},{
+						icon: '/static/images/integral/consult_icon.png',
+						title: '专家免费咨询',
+						desc: "观看<span style='color:#FF5C03'>10分钟</span>课程领取",
+						btntxt: '去学习',
+					},{
+						icon: '/static/images/integral/first_order_icon.png',
+						pageUrl:"/pages/store/packageList",
+						title: '首单立返',
+						desc: "下单后返现<span style='color:#FF5C03'>5000</span>芳华币",
+						btntxt: '去下单',
+					},{
+						icon: '/static/images/integral/patient_information_icon.png',
+						pageUrl:"/pages/user/patient",
+						title: '填写就诊人信息',
+						desc: "填写即送<span style='color:#FF5C03'>+1000</span>芳华币",
+						btntxt: '去填写',
+					},{
+						icon: '/static/images/integral/address_icon.png',
+						pageUrl:"/pages/user/address",
+						title: '填写收货地址',
+						desc: "填写即送<span style='color:#FF5C03'>+1000</span>芳华币",
+						btntxt: '去填写',
+					},{
+						icon: '/static/images/integral/invitation_code_icon.png',
+						title: '填写朋友邀请码',
+						desc: "填码即得<span style='color:#FF5C03'>+2000</span>芳华币",
+						btntxt: '领奖励',
+					}
+				],
+				invitationCode: "",
+				placeholderStyle: 'font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 26rpx;color: #999999;',
+				taskList: [
+						{
+							id:0,
+							icon: '/static/images/integral/ssp_icon.png',
+							title: '刷视频',
+							desc: "每次浏览<span style='color:#FF5C03'>10秒</span>可获取1次芳华币",
+							btntxt: '去逛逛',
+							isVideo:true,
+						},{
+							id:1,
+							icon: '/static/images/integral/ssp_icon.png',
+							title: '发布视频',
+							desc: "每日首次成功发布视频<span style='color:#FF5C03'>+100</span>芳华币",
+							btntxt: '去发布',
+							pageUrl:"/pages/expert/index"
+						},{
+							id:2,
+							icon: '/static/images/integral/kzb_icon.png',
+							title: '看直播',
+							desc: "每次浏览<span style='color:#FF5C03'>10秒</span>可获取1次芳华币",
+							btntxt: '去观看',
+							isLive:true,
+						},{
+							id:3,
+							icon: '/static/images/integral/xxkc_icon.png',
+							title: '学习课程',
+							desc: "每集<span style='color:#FF5C03'>+200</span>芳华币",
+							btntxt: '去学习',
+							isCourse:true,
+						},{
+							id:4,
+							icon: '/static/images/integral/xfdjf_icon.png',
+							title: '消费得芳华币',
+							desc: "实际消费满1元<span style='color:#FF5C03'>+1</span>芳华币",
+							btntxt: '去逛逛',
+							pageUrl:"/pages/store/packageList"
+						},{
+							id:5,
+							icon: '/static/images/integral/txyysf_icon.png',
+							title: '填写用药随访',
+							desc: "填写即送<span style='color:#FF5C03'>+50芳华币/条</span>",
+							btntxt: '去填写',
+							pageUrl:"/pages/user/followList"
+						},{
+							id:6,
+							icon: '/static/images/integral/fxjkzs_icon.png',
+							title: '分享健康知识',
+							desc: "分享至微信、朋友圈<span style='color:#FF5C03'>+10芳华币/条</span>",
+							btntxt: '去分享',
+						},{
+							id:7,
+							icon: '/static/images/integral/yqhyxfl_icon.png',
+							title: '邀请好友享福利',
+							desc: "先复制邀请码，再邀请好友",
+							btntxt: '去邀请',
+						}
+				],
+				downUrlImg: "",
+				bindLoading: false,
+				integralInfo: {}
+			}
+		},
+		computed: {
+			money() {
+				const num = Number(this.integral || 0) / 1000
+				return num.toFixed(2)
+			}
+		},
+		onLoad(option) {
+			this.getDictByKey("sys_integral_log_type");
+			this.getConfigByKey();
+			this.user = this.$getUserInfo();
+			this.getWallet(this.user.userId)
+			this.isBindMobile=!this.$isEmpty(this.user.phone);
+			this.getNewcomerBenefits();
+			//this.getUserIntegralLogsList()
+		},
+		onShow() {
+			this.getUserSign();
+		},
+		methods: {
+			// 兑换现金
+			openBox(){
+				this.isShow=true
+			},
+			closeBox() {
+				this.isShow = false
+			},
+			handleDetail() {
+				uni.navigateTo({
+					url: '/pages/user/integral/integralLogsList'
+				})
+			},
+			getWallet(id){
+				getWallet({userId:id}).then(
+					res => {
+						if(res.code==200){
+							this.withdrawIntegral=res.data.withdrawIntegral
+							this.withdrawCash=res.data.withdrawCash
+						}
+					},
+					err => {
+					}
+				);
+			},
+			integralExchange(){
+				if(this.withdrawIntegral==0){
+					uni.showToast({
+						icon:'none',
+						title:"您没有可兑换的芳华币",
+					});
+					return;
+				}
+				integralExchange({userId:this.user.userId}).then(
+					res => {
+						if(res.code==200){
+							uni.showToast({
+								icon:'none',
+								title: "兑换成功",
+							});
+							this.isShow=false
+							this.getWallet(this.user.userId);
+							this.getUserSign()
+						}
+					},
+					err => {
+					}
+				);
+			},
+			getDictByKey(key){
+				var data={key:key}
+				getDictByKey(data).then(
+					res => {
+						if(res.code==200){
+							this.typeOptions=res.data;
+						}
+					},
+					err => {
+					}
+				);
+			},
+			getConfigByKey(){
+				let param = {key:"his.integral"};
+				getConfigByKey(param).then(
+					res => {
+						if(res.code==200){
+							let data=res.data ? JSON.parse(res.data) : {};
+							this.integralInfo = data;
+						}else{
+							uni.showToast({
+								icon:'none',
+								title: "请求失败",
+							});
+						}
+					},
+					rej => {}
+				);
+			},
+			doSign(){
+				// if(this.isDaySign){
+				// 	uni.showToast({
+				// 		title:"今日已签到",
+				// 		icon:"none",
+				// 		duration:2000
+				// 	})
+				// 	return;
+				// }
+				
+				uni.showLoading({
+					title:"正在加载中..."
+				});
+				var data={};
+			    let that=this;
+				doSign(data).then(res => {
+						uni.hideLoading()
+						if(res.code==200){
+							that.isDaySign = true
+							uni.showToast({icon:'success',title: res.msg});
+							setTimeout(e=>{
+								that.getUserInfo();
+								that.getUserSign();	
+								uni.$emit('refreshUserSign',{});
+							},1000);
+							
+						}else{
+							uni.showToast({
+								icon:'none',
+								title: res.msg,
+							});
+						}
+					},
+					rej => {}
+				);
+			},
+			getUserSign(){
+				getUserSign().then(res => {
+						if(res.code==200){
+							this.data=res.member;
+							this.signNum=res.signNum;
+							this.isDaySign=res.isDaySign;
+							this.integral=res.integral;
+							this.sign=JSON.parse(res.sign);
+						}else{
+							uni.showToast({
+								icon:'none',
+								title: "请求失败",
+							});
+						}
+					},
+					rej => {}
+				);
+			},
+			getNewcomerBenefits(){
+				getNewcomerBenefits().then(res => {
+						if(res.code==200){
+							this.userBenefits=res.data;
+							console.log("qxj userBenefits:"+JSON.stringify(this.userBenefits));
+							this.expireTime=this.$timeFormat(res.createTime,"yyyy-mm-dd hh:MM:ss");
+							console.log("this.expireTime==",this.expireTime)
+							this.isNewUser=res.isNewUser;
+							if(!this.timer){
+								this.timer=setInterval(() => {
+									this.calculateCountdown();			
+								}, 1000);
+							} else {
+								this.calculateCountdown();
+							}
+						}else{
+							uni.showToast({
+								icon:'none',
+								title: "请求失败",
+							});
+						}
+					},
+					rej => {}
+				);
+			},
+			getUserIntegralLogsList() {
+			  let that = this;
+			  if (that.loaded == true || that.loading == true) return;
+			  that.loading = true;
+			  uni.showLoading({
+			  	title:"加载中..."
+			  });
+			  getUserIntegralLogsList(that.page).then(res => {
+			      that.loading = false;
+			      that.loaded = res.data.list.length < that.page.pageSize;
+			      that.page.page = that.page.page + 1;
+			      that.list.push.apply(that.list, res.data.list);
+				  uni.hideLoading()
+			    },
+			    err => {
+					uni.hideLoading();
+					uni.showToast({
+							title: err.msg ,
+							icon: 'none',
+							duration: 2000
+					});
+			    }
+			  );
+			},
+			getUserInfo(){
+				let that=this;
+				getUserInfo().then(res => {
+						if(res.code==200){
+							if(res.user!=null){
+								uni.setStorageSync('userInfo',JSON.stringify(res.user));
+								this.user=res.user;
+							}
+							else{
+								uni.showToast({
+									icon:'none',
+									title: res.msg,
+								});
+							}
+						}
+					},
+					rej => {}
+				);
+			},		
+			handleMenu(item) {
+				console.log("qxj handleMenu:"+JSON.stringify(item));
+				if(item.isCourse!=undefined && item.isCourse){
+					this.goToCourse();
+				}
+				else if(item.isVideo!=undefined && item.isVideo){
+					uni.switchTab({url: '/pages/course/video/living-app' });
+				}
+				else if(item.isLive!=undefined && item.isLive){
+					this.goToCourse();
+				}else{
+					this.loginNavTo(item.pageUrl);
+				}
+			},
+			goToCourse(){
+				uni.switchTab({url: '/pages/course/index' });
+			},
+			handleNewTask(index){  //新人福利任务
+				
+			},
+			handleDayTask(item){  //每日任务
+				if(item.isCourse!=undefined && item.isCourse){
+					this.goToCourse();
+				}else if(item.isVideo!=undefined && item.isVideo){
+					uni.switchTab({url: '/pages/course/video/living-app' });
+				}
+				else if(item.isLive!=undefined && item.isLive){
+					this.goToCourse();
+				}else if(item.title == '分享健康知识') {
+					const list = [{
+						name: "药膳食疗",
+						pageUrl:"/pages/article/medicatedFoodList"
+					},
+					{
+						name: "经络穴位",
+						pageUrl:"/pages/article/vesselList"
+					}, {
+						name: "问答专区",
+						pageUrl:"/pages/article/questionsList"
+					}, {
+						name: "疾病",
+						pageUrl:"/pages/article/diseaseList"
+					}, {
+						name: "中药图解",
+						pageUrl:"/pages/article/chineseMedicineList"
+					},
+					{
+						name: "名方今用",
+						pageUrl:"/pages/article/famousPrescribeList"
+					}, {
+						name: "养生讲堂",
+						pageUrl:"/pages/doctor/doctorArticleList"
+					}, {
+						name: "养生干货",
+						pageUrl:"/pages/article/articleList"
+					}]
+					const num = Math.floor(Math.random() * list.length); 
+					this.loginNavTo(list[num].pageUrl);
+				}else if(item.title == '邀请好友享福利'){
+					this.handleInvite()
+				}else{
+					this.loginNavTo(item.pageUrl);
+				}
+			},
+			calculateCountdown() {
+				const targetTime = new Date(this.expireTime.replace(/-/g, '/'));
+				targetTime.setDate(targetTime.getDate() + 7); // ➕7天
+				const timeDiff = targetTime - new Date(); // 剩余毫秒
+			
+				if (timeDiff <= 0) {
+					this.countdownText = '已结束';
+					clearInterval(this.timer);
+				} else {
+					const days = Math.floor(timeDiff / (24 * 60 * 60 * 1000));
+					const hours = Math.floor((timeDiff % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
+					const minutes = Math.floor((timeDiff % (60 * 60 * 1000)) / (60 * 1000));
+					const seconds = Math.floor((timeDiff % (60 * 1000)) / 1000);
+					this.countdownText = `${days}天${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`;
+				}
+			},
+			padZero(num) {
+				return num < 10 ? '0' + num : num;
+			},
+			loginNavTo(url){
+				if(!this.$isLogin()){
+					this.$showLoginPage();
+					return;
+				}
+				uni.navigateTo({
+					url: url
+				});
+			},
+			// 绑定邀请码领奖励
+			bindCode() {
+				if(!uni.$u.test.digits(this.invitationCode)) {
+					uni.showToast({
+						title:'请输入正确的邀请码',
+						icon:'none'
+					})
+					return
+				}
+				this.bindLoading = true
+				invited({userId: this.invitationCode}).then(res=>{
+					this.bindLoading = false
+					if(res.code == 200) {
+						this.invitationCode = ""
+						uni.showToast({
+							title:'领取成功',
+							icon:'none'
+						})
+						this.getUserSign();
+					} else {
+						uni.showToast({
+							title:res.msg,
+							icon:'none'
+						})
+					}
+				}).catch(()=>{
+					this.bindLoading = false
+				})
+			},
+			copyCode() {
+				let user=JSON.parse(uni.getStorageSync('userInfo'));
+				uni.setClipboardData({
+					data: String(user.userId),
+					success:()=>{
+						uni.showToast({
+							title:'邀请码复制成功',
+							icon:'none'
+						})
+					},
+					complete: (err) => {
+						console.log(err)
+					}
+				});
+			},
+			// 邀请
+			handleInvite() {
+				uni.showLoading({
+					title: "海报生成中"
+				})
+				getDownloadPoster().then(res=>{
+					uni.hideLoading()
+					if(res.code == 200) {
+						this.downUrlImg = res.msg
+						this.$refs.invitePopup.open()
+					} else {
+						uni.showToast({
+							title:'生成海报失败',
+							icon:'none'
+						})
+					}
+				}).catch(()=>{
+					uni.hideLoading()
+					uni.showToast({
+						title:'生成海报失败',
+						icon:'none'
+					})
+				})
+			},
+			closepop() {
+				this.$refs.invitePopup.close()
+			},
+			longpressImg() {
+				// #ifndef MP-WEIXIN
+				uni.showActionSheet({
+					title: "",
+					itemList: ["保存图片"],
+					success: (res)=> {
+						console.log("保存图片")
+						this.downImg()
+					}
+				});
+				// #endif
+			},
+			downImg() {
+				uni.showLoading({
+					title: "图片保存中..."
+				})
+				uni.downloadFile({
+					url: this.downUrlImg,
+					fail: function(res) {
+					  uni.showModal({
+						title: '提示',
+						content: '保存失败',
+					  })
+					  uni.hideLoading();
+					},
+					success: function(res) {
+						var tempFilePath = res.tempFilePath;
+						uni.saveImageToPhotosAlbum({
+							filePath: tempFilePath,
+							success:()=> {
+							  uni.showToast({
+								title: "保存成功",
+								duration: 2000
+							  })
+							},
+							fail:()=>{
+							  console.log("保存失败");
+							  uni.showToast({
+									title: "保存失败",
+									duration: 2000,
+									icon: "error"
+							  })
+							  uni.hideLoading();
+							},
+							complete: function() {
+							  uni.hideLoading();
+							}
+						})
+					},
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	
+	@mixin u-flex($flexD, $alignI, $justifyC) {
+		display: flex;
+		flex-direction: $flexD;
+		align-items: $alignI;
+		justify-content: $justifyC;
+	}
+	::v-deep .u-popup__content{
+		width: 80% !important;
+	}
+	.tips-box{
+		padding: 36rpx;
+		.tips-title{
+			font-family: PingFang SC, PingFang SC;
+			font-weight: 600;
+			font-size: 40rpx;
+			color: #FF5C03;
+			line-height: 42rpx;
+			text-align: center;
+		}
+		.desc{
+			padding: 32rpx 0;
+			font-family: PingFang SC, PingFang SC;
+			font-weight: 400;
+			font-size: 32rpx;
+			line-height: 48rpx;
+			color: #222222;
+			text-align: center;
+		}
+		.btn-box{
+			margin-top: 40rpx;
+			.okbtn{
+				padding:10rpx 50rpx;
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 400;
+				font-size: 36rpx;
+				color: #FFFFFF;
+				background: #FF5C03;
+				border:1px solid  #FF5C03;
+				border-radius: 44rpx 44rpx 44rpx 44rpx;
+				&.cancel{
+					background:#fff ;
+					color: #FF5C03;
+				}
+			}
+		}
+	}
+	.invite {
+		width: 100vw;
+		height: calc(100vh - var(--status-bar-height) - 88rpx);
+		@include u-flex(column, center, center);
+		image {
+			width: 100%;
+			flex: 1;
+		}
+		.downtbn {
+			margin-top: 24rpx;
+			min-width: 254rpx;
+			min-height: 88rpx;
+			padding: 0 16rpx;
+			box-sizing: border-box;
+			border-radius: 44rpx 44rpx 44rpx 44rpx;
+			border: 2rpx solid #FF5C03;
+			font-family: PingFang SC, PingFang SC;
+			font-weight: 400;
+			font-size: 32rpx;
+			color: #FF5C03;
+			@include u-flex(column, center, center);
+			&::after {
+				border: none;
+			}
+		}
+	}
+	.container {
+		position: relative;
+		font-family: PingFang SC, PingFang SC;
+		font-weight: 400;
+		font-size: 24rpx;
+		color: #222222;
+		&-body {
+			position: relative;
+			padding-top: calc(var(--status-bar-height) + 88rpx);
+			padding-bottom: calc(var(--window-bottom) + 50rpx);
+		}
+	}
+	.integral_top_bg {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: auto;
+	}
+	.uni-nav-bar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		z-index: 999;
+		overflow: hidden;
+		font-family: PingFang SC, PingFang SC;
+		font-weight: 500;
+		color: #FFFFFF;
+	
+		.uni-nav-bar_bg {
+			width: 100%;
+			position: absolute;
+			top: 0;
+			left: 0;
+			z-index: -1;
+		}
+	
+		.uni-nav-barbox {
+			width: 100%;
+			height: 88rpx;
+			@include u-flex(row, center, center);
+			position: relative;
+			font-size: 24rpx;
+		}
+	
+		.uni-nav-title {
+			/* #ifdef APP-PLUS */
+			font-size: 34rpx;
+			/* #endif */
+			/* #ifndef APP-PLUS */
+			font-size: 16px;
+			/* #endif */
+		}
+	
+		.uni-nav-back {
+			position: absolute;
+			bottom: 0;
+			left: 20rpx;
+			height: 88rpx;
+			@include u-flex(row, center, flex-start);
+			image {
+				height: 58rpx;
+				width: 58rpx;
+			}
+		}
+	}
+	.box {
+		margin-bottom: 20rpx;
+		padding: 28rpx 24rpx 40rpx 24rpx;
+		box-sizing: border-box;
+		background: #FFFFFF;
+		border-radius: 16rpx 16rpx 16rpx 16rpx;
+	}
+	.box-title {
+		font-family: PingFang SC, PingFang SC;
+		font-weight: 600;
+		font-size: 36rpx;
+		color: #222222;
+	}
+	.pointsbox {
+		width: 100%;
+		padding-left: 24rpx;
+		box-sizing: border-box;
+		overflow: hidden;
+		@include u-flex(row, center, space-between);
+		&-left {
+			font-weight: 500;
+			font-size: 28rpx;
+			color: #FFFFFF;
+		}
+		&-num {
+			font-family: DIN, DIN;
+			font-weight: bold;
+			font-size: 80rpx;
+			line-height: 60rpx;
+			margin-top: 34rpx;
+			margin-bottom: 34rpx;
+		}
+		&-detail {
+			font-weight: 400;
+			font-size: 24rpx;
+			margin-left: 20rpx;
+			text-decoration: underline;
+		}
+		&-desc {
+			font-weight: 400;
+			font-size: 24rpx;
+		}
+		&-right {
+			flex-shrink: 0;
+			width: 302rpx;
+			height: 304rpx;
+			margin-right: -18rpx;
+		}
+	}
+	.signbox {
+		&-head{
+			@include u-flex(row, center, space-between);
+			font-weight: 600;
+			font-size: 36rpx;
+			&-r {
+				font-weight: 400;
+				font-size: 26rpx;
+				color: #757575;
+				text {
+					color: #FF5C03;
+					padding: 0 10rpx;
+				}
+			}
+		}
+		&-con {
+			margin: 38rpx 0 38rpx 0;
+			@include u-flex(row, center, space-between);
+			font-weight: 400;
+			font-size: 24rpx;
+			color: #757575;
+		}
+		&-item {
+			text-align: center;
+			.imgbox {
+				flex-shrink: 0;
+				height: 92rpx;
+				width: 92rpx;
+				margin-bottom: 4rpx;
+				@include u-flex(row, center, center);
+			}
+			.signdaybox {
+				position: relative;
+				image {
+					width: 24rpx;
+					height: 24rpx;
+					position: absolute;
+					right: 0;
+					bottom: 0;
+				}
+			}
+			.signday {
+				flex-shrink: 0;
+				width: 72rpx;
+				height: 72rpx;
+				@include u-flex(row, center, center);
+				box-sizing: border-box;
+				background: #FCF0E7;
+				border-radius: 0rpx 0rpx 0rpx 0rpx;
+				border: 2rpx dashed rgba(255,92,3,0.5);
+				border-radius: 50%;
+				font-weight: 500;
+				font-size: 22rpx;
+				color: #FF5C03;
+			}
+			.integral-box {
+				width: 72rpx;
+				height: 72rpx;
+				background: linear-gradient( 180deg, #FBE69B 0%, #F2A54E 100%);
+				border-radius: 50%;
+				@include u-flex(row, center, center);
+				&-line {
+					width: 64rpx;
+					height: 64rpx;
+					@include u-flex(row, center, center);
+					font-weight: 500;
+					font-size: 22rpx;
+					color: #FFFFFF;
+					border-radius: 50%;
+					position: relative;
+					background: linear-gradient(180deg, rgba(241, 161, 75, 1), rgba(249, 225, 137, 1));
+				}
+				&-con {
+					width: 60rpx;
+					height: 60rpx;
+					border-radius: 50%;
+					@include u-flex(row, center, center);
+					background: linear-gradient( 180deg, #FFCD88 0%, #F4B55C 47%, #F49C49 100%);
+				}
+			}
+		}
+		&-footer {
+			&-btn {
+				width: 598rpx;
+				height: 72rpx;
+				@include u-flex(row, center, center);
+				background: linear-gradient( 90deg, #FF5701 0%, #FFB501 100%);
+				box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(238,124,80,0.2);
+				border-radius: 36rpx 36rpx 36rpx 36rpx;
+				font-weight: 500;
+				font-size: 28rpx;
+				color: #FFFFFF;
+				&::after {
+					border: none;
+				}
+			}
+		}
+	}
+	.benefit {
+		&-box {
+			margin-top: 38rpx;
+			@include u-flex(row, center, space-around);
+		}
+		&-item {
+			width: 104rpx;
+			height: 104rpx;
+			text-align: center;
+			image {
+				width: 64rpx;
+				height: 64rpx;
+				margin-bottom: 6rpx;
+			}
+		}
+	}
+	.newusertask-box {
+		background: #FAFAFA !important;
+		border: none !important;
+		.task-list-icon {
+			width: 88rpx !important;
+			height: 88rpx !important;
+			margin-right: 22rpx !important;
+		}
+	}
+	.title-tip {
+		min-width: 134rpx;
+		height: 38rpx;
+		margin-left: 8rpx;
+		padding: 8rpx 12rpx;
+		box-sizing: border-box;
+		background: #FCF0E7;
+		border-radius: 24rpx 24rpx 24rpx 24rpx;
+		font-family: PingFang SC, PingFang SC;
+		font-weight: 400;
+		font-size: 22rpx;
+		color: #FF5C03;
+	}
+	.task-footer {
+		margin-top: 32rpx;
+		margin-left: 80rpx;
+		@include u-flex(row, center, flex-start);
+		&-btn {
+			width: 252rpx;
+			height: 80rpx;
+			margin: 0;
+			@include u-flex(row, center, center);
+			background: #F5F7FA;
+			border-radius: 40rpx 40rpx 40rpx 40rpx;
+			font-family: PingFang SC, PingFang SC;
+			font-weight: 500;
+			font-size: 26rpx;
+			color: #222222;
+			position: relative;
+			&::after {
+				border: none;
+			}
+			image {
+				flex-shrink: 0;
+				width: 48rpx;
+				height: 48rpx;
+				margin-right: 8rpx;
+			}
+		}
+	}
+	.task{
+		&-box {
+			padding: 24rpx;
+			margin-top: 20rpx;
+			background: #fff;
+			border-radius: 16rpx 16rpx 16rpx 16rpx;
+			border: 2rpx solid #F5F7FA;
+			&:first-of-type {
+				margin-top: 36rpx;
+			}
+			.invitation-code {
+				margin-left: 100rpx;
+				margin-top: 22rpx;
+				margin-bottom: 16rpx;
+				width: 496rpx;
+				height: 80rpx;
+				padding: 8rpx 8rpx 8rpx 24rpx;
+				box-sizing: border-box;
+				background: #ECECEC;
+				border-radius: 40rpx 40rpx 40rpx 40rpx;
+				@include u-flex(row, center, space-between);
+			}
+			.input {
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 400;
+				font-size: 26rpx;
+				color: #222;
+			}
+		}
+		&-list {
+			@include u-flex(row, center, space-between);
+			&-icon {
+				width: 54rpx;
+				height: 54rpx;
+				margin-right: 24rpx;
+			}
+			&-r {
+				flex: 1;
+				@include u-flex(row, center, space-between);
+				font-weight: 400;
+				font-size: 24rpx;
+				color: #999999;
+			}
+		}
+		&-title {
+			margin-bottom: 8rpx;
+			font-weight: 500;
+			font-size: 32rpx;
+			color: #222222;
+			line-height: 38rpx;
+		}
+		&-btn {
+			flex-shrink: 0;
+			min-width: 132rpx;
+			height: 64rpx;
+			margin: 0 0 0 12rpx;
+			padding:0 14rpx;
+			background: #FF5C03 !important;
+			border-radius: 32rpx 32rpx 32rpx 32rpx;
+			text-align: center;
+			@include u-flex(row, center, center);
+			font-weight: 500;
+			font-size: 28rpx;
+			color: #FFFFFF !important;
+			&::after {
+				border: none;
+			}
+			&-disable {
+				background-color: #FDAB8D !important;
+			}
+			&-finish {
+				background:#FAFAFA !important;
+				color:#FF5C03 !important;
+			}
+		}
+	}
+</style>

pages_shopping/live/salesRanking.vue

@@ -0,0 +1,470 @@
+<template>
+	<view class="content">
+		<view class="info">
+
+			<image class="info-bg" src="/static/images/sales_bg.png"></image>
+			<image class="info-title" src="/static/images/sales_title.png"></image>
+			<view class="status_bar" :style="{height: statusBarHeight}"></view>
+			<view class="search-box">
+				<view class="back-box">
+					<image class="img" src="/static/images/back_white_icon.png"></image>
+				</view>
+			</view>
+		</view>
+		<!-- 产品列表 -->
+		<view class="shop-block">
+			<view class="tab-inner" v-if="activeTab === 0">
+				<view v-for="(item,index) in selectList" :key="index"
+					:class="activeIndex == item.value?'item active':'item'" @click="onSelect(item)">
+					<view class="text">
+						<text>{{ item.name }}</text>
+						</image>
+					</view>
+				</view>
+			</view>
+			<!-- 视频文章列表 -->
+			<mescroll-body bottom="0" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
+				:down="downOption" :up="upOption">
+				<view class="medic-list">
+					<view v-for="(item,index) in dataList" :key="index" class="item" @click="showDetail(item)">
+						<view class="img-box">
+							<view class="label" :class="[index < 3 ? ['bg1', 'bg2', 'bg3'][index] : 'bg']">
+								{{ index + 1 }}</view>
+							<image :src=" item.image" mode="aspectFit">
+							</image>
+							<view class="sales-label">已售{{item.sales}}+</view>
+						</view>
+						<view class="info-box">
+							<view class="hot-sale">
+								<image class="w20 h20 ml10 mr8" src="/static/images/hot.png"></image>
+								<text>今日热销1545件</text>
+							</view>
+							<view class="title ellipsis2">{{item.productName}}</view>
+							<view class="sale">肌肉酸疼、扭伤拉伤</view>
+							<view class="lable-group">
+								<view class="lable-item">9.5折</view>
+								<view class="lable-item">限购1份</view>
+							</view>
+							<view class="prce-num">
+								<view class="price">
+									<text class="unit">¥</text><text
+										class="bold">{{splitPrice(item.price).integer}}</text>.{{splitPrice(item.price).decimal}}
+								</view>
+								<view class="cart-img" @click="navgetTo('../shopping/cart')">
+									<image class="w40 h40" src="/static/images/add_car.png"></image>
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</mescroll-body>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		liveList
+	} from '@/api/living.js'
+	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+	export default {
+		mixins: [MescrollMixin],
+		data() {
+			return {
+				isFollow: false, //关注
+				activeIndex: 0,
+				selectList: [{
+					name: '全部',
+					value: 0
+				}, {
+					name: '健康新品',
+					value: 1
+				}, {
+					name: '营养保健',
+					value: 2
+				}, {
+					name: '健康滋补',
+					value: 3
+				}, {
+					name: '天然食品',
+					value: 4
+				}],
+				activeTab: 0,
+				// 状态栏的高度
+				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
+				list: [],
+				downOption: {
+					offset: 80,
+					use: true,
+					auto: false
+				},
+				upOption: {
+					use: true,
+					auto: true,
+					page: {
+						num: 0,
+						size: 10
+					}
+				},
+				mescroll: null,
+				dataList: [{
+					cateId: 364,
+					image: "https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20251216/6a3c96bd3fc44b15b760871670302e9a.jpg",
+					otPrice: 268,
+					price: 98,
+					productId: 66050,
+					productInfo: "电肌肉刺激(EMS)，又称神经肌肉电刺激，是利用电脉冲诱发多发性肌肉收缩；中枢神经系统使肌肉收缩；EMS被证明是一种积极的肌肉强化工具。↵EMS的用途：肌肉强化，预防废肌萎缩，肌肉松弛，缓解酸痛，放松肌肉，美容肌肉调理。",
+					productName: "佟络宝®健步器",
+					sales: 1026,
+					unitName: "个",
+					warehouseCode: "JST001",
+					warehouseId: 3,
+				}, {
+					cateId: 364,
+					image: "https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20251204/c53bb29cf794468ba59ee2d60983b92f.jpg",
+					otPrice: 298,
+					price: 138,
+					productId: 65920,
+					productInfo: "1、取本品1包放入脚盆，倒入适量沸水浸泡搅拌，约5-10分钟，再加入适量温水或冷水调至适宜水温即可足浴，泡脚15- 25分钟。↵2、取本品1包放入锅内煮约5分钟，将煮好的水倒入脚盆，再加入适量温水或冷水调至适宜温度即可足浴，泡脚15-25分钟。",
+					productName: "[九仙汤]除痹通络汤 30克x30包",
+					sales: 6042,
+					unitName: "盒",
+					warehouseCode: "JST001",
+					warehouseId: 3,
+				}],
+			}
+		},
+		onLoad() {
+
+		},
+		onUnload() {
+
+		},
+		methods: {
+			// 一键到顶
+			scrollToTop() {
+				uni.pageScrollTo({
+					scrollTop: 0,
+					duration: 300 // 动画时间，单位ms
+				});
+			},
+			onSelect(item) {
+				console.log("item", item)
+				this.activeIndex = item.value
+			},
+			splitPrice(price) {
+				const priceStr = parseFloat(price).toFixed(2).toString();
+				return {
+					integer: priceStr.split('.')[0],
+					decimal: priceStr.split('.')[1]
+				};
+			},
+			switchTab(tab) {
+				if (this.activeTab === tab) return;
+				this.activeTab = tab;
+				this.$emit('change', tab);
+			},
+			mescrollInit(mescroll) {
+				this.mescroll = mescroll;
+			},
+
+			// 下拉刷新回调
+			downCallback(mescroll) {
+				this.list = [];
+				mescroll.resetUpScroll();
+			},
+
+			// 上拉加载回调
+			upCallback(mescroll) {
+				const pageNum = mescroll.num;
+				const pageSize = mescroll.size;
+
+				let data = {
+					pageSize: pageSize,
+					pageNum: pageNum,
+				}
+				liveList(data).then(res => {
+					if (!res) {
+						mescroll.endErr();
+						return;
+					}
+					if (res.code == 200) {
+						let curPageData = Array.isArray(res.data.list) ? res.data.list : [];
+						let totalSize = Number(res.data.total) || 0;
+						if (pageNum === 1) {
+							this.list = [];
+						}
+						this.list = this.list.concat(curPageData);
+
+						mescroll.endBySize(curPageData.length, totalSize);
+					} else {
+						mescroll.endErr();
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						});
+					}
+				}).catch(err => {
+					mescroll.endErr();
+				});
+			},
+
+			goLive(item) {
+				uni.navigateTo({
+					// &immediate=true
+					url: `./living?liveId=${item.liveId}`
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		min-height: 100vh;
+		background: #F5F7FA;
+
+		.info {
+			width: 100%;
+			height: 454rpx;
+			position: relative;
+			z-index: 0;
+
+			.info-bg {
+				position: absolute;
+				z-index: -1;
+				width: 100%;
+				height: 100%;
+			}
+
+			.info-title {
+				width: 560rpx;
+				height: 176rpx;
+				position: absolute;
+				bottom: 68rpx;
+				left: 50%;
+				transform: translateX(-50%);
+			}
+
+			.search-box {
+				.back-box {
+					height: 88rpx;
+					display: flex;
+					align-items: center;
+					margin-left: 24rpx;
+
+					.img {
+						width: 48rpx;
+						height: 48rpx;
+					}
+				}
+			}
+		}
+
+		//产品
+		.shop-block {
+			position: relative;
+			z-index: 1;
+			background-color: #FFFFFF;
+			margin-top: -28rpx;
+			border-radius: 32rpx 32rpx 0rpx 0rpx;
+			padding: 26rpx 0;
+
+
+			.tab-inner {
+				margin-left: 24rpx;
+				height: 88upx;
+				line-height: 88upx;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				font-size: 26rpx;
+				color: #666666;
+
+				.item {
+					white-space: nowrap;
+					line-height: 1;
+					margin-right: 40upx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+
+					&:last-child {
+						margin-right: 0;
+					}
+
+					&.active {
+						font-weight: 600;
+						color: #02B176;
+
+						.text {
+							position: relative;
+
+							// 使用伪元素添加横线
+							&::after {
+								content: '';
+								position: absolute;
+								bottom: -10rpx; // 调整横线距离文字的位置
+								left: 50%;
+								transform: translateX(-50%);
+								width: 100%;
+								height: 12rpx;
+								background: linear-gradient(90deg, #02B176 0%, rgba(2, 177, 118, 0) 100%);
+								border-radius: 6rpx;
+								z-index: 1;
+							}
+						}
+					}
+				}
+			}
+
+			.medic-list {
+				padding: 20upx;
+
+				.item {
+					box-sizing: border-box;
+					min-height: 296upx;
+					background: #FFFFFF;
+					border: 4upx solid #FFFFFF;
+					border-radius: 16upx;
+					margin-bottom: 18upx;
+					padding: 24rpx;
+					display: flex;
+
+					.img-box {
+						flex-shrink: 0;
+						width: 248upx;
+						height: 248upx;
+						margin-right: 20upx;
+						border-radius: 16upx;
+						overflow: hidden;
+						text-align: center;
+						position: relative;
+
+						.sales-label {
+							position: absolute;
+							bottom: 0;
+							right: 0;
+							width: 116rpx;
+							height: 36rpx;
+							line-height: 36rpx;
+							background: rgba(245, 247, 250, 0.8);
+							border-radius: 16rpx 0rpx 16rpx 0rpx;
+							font-size: 20rpx;
+							color: #626468;
+						}
+
+						.label {
+							position: absolute;
+							top: 0;
+							left: 0;
+							font-weight: 500;
+							font-size: 24rpx;
+							color: #FFFFFF;
+							width: 40rpx;
+							height: 40rpx;
+							line-height: 40rpx;
+							border-radius: 16rpx 0rpx 16rpx 0rpx;
+						}
+
+						.bg1 {
+							background: linear-gradient(135deg, #FB7E4C 0%, #ED4B17 100%);
+						}
+
+						.bg2 {
+							background: linear-gradient(135deg, #FBCF3F 0%, #F9B71B 100%);
+						}
+
+						.bg3 {
+							background: linear-gradient(135deg, #D5AB78 0%, #C39760 100%);
+						}
+
+						.bg {
+							background: linear-gradient(135deg, #C1C5CD 0%, #A5AAB5 100%);
+						}
+
+						image {
+							width: 100%;
+							height: 100%;
+						}
+					}
+
+					.info-box {
+						flex: 1;
+						min-width: 0;
+
+						.hot-sale {
+							font-size: 22rpx;
+							color: #FA341E;
+							text-align: left;
+							width: 260rpx;
+							height: 36rpx;
+							display: flex;
+							align-items: center;
+							background: linear-gradient(90deg, #FFE1D7 3.85%, #FFE8E1 53.85%, #FFFFFF 100%);
+							border-radius: 20rpx 20rpx 20rpx 20rpx;
+							margin-bottom: 8rpx;
+						}
+
+						.title {
+							font-size: 28upx;
+							font-family: PingFang SC;
+							font-weight: 500;
+							color: #333333;
+							margin-bottom: 4rpx;
+						}
+
+						.intro {
+							font-weight: 400;
+							font-size: 22rpx;
+							color: #D46C0D;
+							margin-bottom: 8upx;
+						}
+
+						.sale {
+							font-size: 21rpx;
+							color: #999999;
+						}
+
+						.lable-group {
+							display: flex;
+							margin-top: 8rpx;
+
+							.lable-item {
+								margin-right: 8rpx;
+								height: 30rpx;
+								padding: 0 8rpx;
+								border-radius: 4rpx 4rpx 4rpx 4rpx;
+								border: 1rpx solid #FFA599;
+								font-size: 21rpx;
+								color: #FF4B33;
+							}
+						}
+
+						.prce-num {
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+							margin-top: 8upx;
+
+							.price {
+								font-weight: 600;
+								font-size: 26rpx;
+								color: #FA341E;
+								font-size: 26rpx;
+
+								.unit {
+									font-size: 20upx;
+								}
+
+								.bold {
+									font-size: 36upx;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages_shopping/live/shop.vue

@@ -0,0 +1,1030 @@
+<template>
+	<view class="content">
+		<!-- 达人信息 -->
+		<view class="info">
+			<image class="info-bg" src="/static/images/dianpu_top_bg.png"></image>
+			<view class="status_bar" :style="{height: statusBarHeight}"></view>
+			<view class="search-box">
+				<view class="back-box">
+					<image class="img" src="/static/images/back_white_icon.png"></image>
+				</view>
+				<view class="search-cont">
+					<image class="icon-search" src="../../static/images/search.png" mode=""></image>
+					<input type="text" disabled value="" placeholder="搜索本店"
+						placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" @click="toSearch" />
+				</view>
+			</view>
+			<view class="shop-info">
+				<view class="info-block">
+					<view class="left">
+						<image class="head" src="/static/images/img.png"></image>
+						<view class="shop-box">
+							<view class="shop-name">
+								<text class="name">芳华悦选旗舰店</text>
+							</view>
+							<view class="txt">
+								<view class="rating">
+									<image class="star" src="/static/images/star.png"></image><text>5.0分</text>
+								</view>
+								<view class="line"></view>
+								<view class="fans">5000粉丝</view>
+							</view>
+						</view>
+					</view>
+					<view class="right">
+						<view :class="isFollow?'button isFollow':'button '" @click="isFollow=!isFollow">
+							<image v-if="!isFollow" class="icon" src="/static/images/guanzhu.png"></image>
+							<text>{{isFollow?'已关注':'关注'}}</text>
+						</view>
+					</view>
+				</view>
+				<view class="data-block">
+					<view class="number-block">
+						<view class="item">
+							<text class="txt-item">商品品质</text>
+							<text class="number-item">平均惊艳度 98%</text>
+						</view>
+						<view class="item">
+							<text class="txt-item">发货时效</text>
+							<text class="number-item">发货准时率 99.9%</text>
+						</view>
+						<view class="item">
+							<text class="txt-item">客服响应</text>
+							<text class="number-item">平均22秒回复</text>
+						</view>
+					</view>
+				</view>
+				<view class="card">
+					<view class="card-item">
+						<image class="img" src="/static/images/fanghua_golden.png"></image>
+						<text class="ranking">达人榜 第15名</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="vedio-block">
+			<view class="tab-wrapper">
+				<!-- 商品标签 -->
+				<view class="tab-item" :class="{ active: activeTab === 0 }" @click="switchTab(0)">
+					<text class="tab-text">商品</text>
+					<image v-if="activeTab === 0" src="/static/images/tab_hover.png" class="underline"></image>
+				</view>
+				<!-- 生活号标签 -->
+				<view class="tab-item" :class="{ active: activeTab === 1 }" @click="switchTab(1)">
+					<text class="tab-text">生活号</text>
+					<image v-if="activeTab === 1" src="/static/images/tab_hover.png" class="underline"></image>
+				</view>
+			</view>
+			<view class="tab-inner" v-if="activeTab === 0">
+				<view v-for="(item,index) in selectList" :key="index"
+					:class="activeIndex == item.value?'item active':'item'" @click="onSelect(item)">
+					<view class="text">
+						<text>{{ item.name }}</text>
+						<image v-if="item.value==1" class="tab-bg" src="/static/images/shaixuan_moren.png" mode="">
+						</image>
+					</view>
+				</view>
+			</view>
+			<view class="tab-inner" v-if="activeTab === 1">
+				<view v-for="(item,index) in selectList2" :key="index"
+					:class="activeIndex == item.value?'item active':'item'" @click="onSelect(item)">
+					<view class="text">
+						<text>{{ item.name }}</text>
+					</view>
+				</view>
+			</view>
+			<!-- 视频文章列表 -->
+			<mescroll-body bottom="0" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
+				:down="downOption" :up="upOption">
+				<view class="list" v-if="activeTab === 1">
+					<view class="list-item" @click="goLive(item)" v-for="(item,index) in list" :key="index">
+						<image class="img" v-if="item.liveImgUrl" :src="item.liveImgUrl" mode="widthFix"></image>
+						<image class="video-icon" src="/static/images/video_icon.png"></image>
+						<image class="suspension-icon" src="/static/images/suspension.png"></image>
+						<view class="info-block">
+							<view class="title">冰乳绿豆糕 冰冰凉凉谁吃谁迷糊! 谁懂，...</view>
+							<view class="item">
+								<view class="flex">
+									<image class="head" src="/static/images/img.png"></image>
+									<text class="name">崔医生</text>
+								</view>
+								<view class="flex">
+									<image class="icon" src="/static/images/zan_icon.png"></image>
+									<text>141</text>
+								</view>
+							</view>
+							<view class="card">
+								<view class="card-item">
+									<image class="img" src="/static/images/jinbang_font.png"></image>
+									<text class="ranking">达人榜 第15名</text>
+									<text class="bold">top.1</text>
+								</view>
+								<image class="go" src="/static/images/jb_arrow_right_icon.png"></image>
+							</view>
+						</view>
+					</view>
+				</view>
+
+				<view class="goods-list" v-if="activeTab === 0">
+					<view class="item" v-for="(item,index) in dataList" :key="index" @click="showDetail(item)">
+						<view class="img-box">
+							<image :src="item.image" mode="aspectFit"></image>
+						</view>
+						<view class="info-box">
+							<view class="title ellipsis2">{{item.productName}}</view>
+							<view class="intro ellipsis">{{item.productInfo}}</view>
+							<view class="sale">已售 {{item.sales}} {{item.unitName}} | 惊艳度98%</view>
+							<view class="lable-group">
+								<view class="lable-item">9.5折</view>
+								<view class="lable-item">限购1份</view>
+							</view>
+							<view class="prce-num">
+								<view class="price">
+									<text class="unit">¥</text><text
+										class="bold">{{splitPrice(item.price).integer}}</text>.{{splitPrice(item.price).decimal}}
+								</view>
+								<view class="cart-img" @click="navgetTo('../shopping/cart')">
+									<image class="w40 h40" src="/static/images/add_car.png"></image>
+								</view>
+							</view>
+							<view class="card">
+								<view class="card-item">
+									<image class="img" src="/static/images/ranking_icon.png"></image>
+									<text class="ranking">健康新品热销榜</text>
+									<text class="bold">TOP.2</text>
+								</view>
+								<image class="go" src="/static/images/jb_arrow_right_icon.png"></image>
+							</view>
+						</view>
+					</view>
+				</view>
+			</mescroll-body>
+		</view>
+		<view class="side">
+			<view class="side-item">
+				<button class="button-reset" open-type="contact">
+					<image class="icon" src="/static/images/service_icon.png"></image>
+				</button>
+			</view>
+			<view class="side-item">
+				<button open-type="share" class="button-reset">
+					<image class="icon" src="/static/images/share_icon.png" mode="widthFix" />
+				</button>
+			</view>
+			<view class="side-item" @click="scrollToTop">
+				<image class="icon" src="/static/images/top_icon.png"></image>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	import {
+		liveList
+	} from '@/api/living.js'
+	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+	export default {
+		mixins: [MescrollMixin],
+		data() {
+			return {
+				isFollow: false, //关注
+				activeIndex: 0,
+				selectList: [{
+					name: '销量',
+					value: 0
+				}, {
+					name: '价格',
+					value: 1
+				}, {
+					name: '新品',
+					value: 2
+				}, {
+					name: '惊艳度',
+					value: 3
+				}],
+				selectList2: [{
+					name: '最新',
+					value: 0
+				}, {
+					name: '浏览量',
+					value: 1
+				}, {
+					name: '下载量',
+					value: 2
+				}],
+				activeTab: 0,
+				// 状态栏的高度
+				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
+				list: [],
+				downOption: {
+					offset: 80,
+					use: true,
+					auto: false
+				},
+				upOption: {
+					use: true,
+					auto: true,
+					page: {
+						num: 0,
+						size: 10
+					}
+				},
+				mescroll: null,
+				dataList: [{
+					cateId: 364,
+					image: "https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20251216/6a3c96bd3fc44b15b760871670302e9a.jpg",
+					otPrice: 268,
+					price: 98,
+					productId: 66050,
+					productInfo: "电肌肉刺激(EMS)，又称神经肌肉电刺激，是利用电脉冲诱发多发性肌肉收缩；中枢神经系统使肌肉收缩；EMS被证明是一种积极的肌肉强化工具。↵EMS的用途：肌肉强化，预防废肌萎缩，肌肉松弛，缓解酸痛，放松肌肉，美容肌肉调理。",
+					productName: "佟络宝®健步器",
+					sales: 1026,
+					unitName: "个",
+					warehouseCode: "JST001",
+					warehouseId: 3,
+				}, {
+					cateId: 364,
+					image: "https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20251204/c53bb29cf794468ba59ee2d60983b92f.jpg",
+					otPrice: 298,
+					price: 138,
+					productId: 65920,
+					productInfo: "1、取本品1包放入脚盆，倒入适量沸水浸泡搅拌，约5-10分钟，再加入适量温水或冷水调至适宜水温即可足浴，泡脚15- 25分钟。↵2、取本品1包放入锅内煮约5分钟，将煮好的水倒入脚盆，再加入适量温水或冷水调至适宜温度即可足浴，泡脚15-25分钟。",
+					productName: "[九仙汤]除痹通络汤 30克x30包",
+					sales: 6042,
+					unitName: "盒",
+					warehouseCode: "JST001",
+					warehouseId: 3,
+				}],
+			}
+		},
+		onLoad() {
+			// if (!uni.getStorageSync("AppToken")) {
+			// 	uni.navigateTo({
+			// 		url: '/pages/auth/login'
+			// 	});
+			// }
+		},
+		onUnload() {
+
+		},
+		methods: {
+			// 一键到顶
+			scrollToTop() {
+				uni.pageScrollTo({
+					scrollTop: 0,
+					duration: 300 // 动画时间，单位ms
+				});
+			},
+			onSelect(item) {
+				console.log("item", item)
+				this.activeIndex = item.value
+			},
+			splitPrice(price) {
+				const priceStr = parseFloat(price).toFixed(2).toString();
+				return {
+					integer: priceStr.split('.')[0],
+					decimal: priceStr.split('.')[1]
+				};
+			},
+			switchTab(tab) {
+				if (this.activeTab === tab) return;
+				this.activeTab = tab;
+				this.$emit('change', tab);
+			},
+			mescrollInit(mescroll) {
+				this.mescroll = mescroll;
+			},
+
+			// 下拉刷新回调
+			downCallback(mescroll) {
+				this.list = [];
+				mescroll.resetUpScroll();
+			},
+
+			// 上拉加载回调
+			upCallback(mescroll) {
+				const pageNum = mescroll.num;
+				const pageSize = mescroll.size;
+
+				let data = {
+					pageSize: pageSize,
+					pageNum: pageNum,
+				}
+				liveList(data).then(res => {
+					if (!res) {
+						mescroll.endErr();
+						return;
+					}
+					if (res.code == 200) {
+						let curPageData = Array.isArray(res.data.list) ? res.data.list : [];
+						let totalSize = Number(res.data.total) || 0;
+						if (pageNum === 1) {
+							this.list = [];
+						}
+						this.list = this.list.concat(curPageData);
+
+						mescroll.endBySize(curPageData.length, totalSize);
+					} else {
+						mescroll.endErr();
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						});
+					}
+				}).catch(err => {
+					mescroll.endErr();
+				});
+			},
+
+			goLive(item) {
+				uni.navigateTo({
+					// &immediate=true
+					url: `./living?liveId=${item.liveId}`
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		min-height: 100vh;
+		background: #F5F7FA;
+
+		// 达人信息
+		.info {
+
+			width: 100%;
+			height: 600rpx;
+			position: relative;
+			z-index: 0;
+
+			.info-bg {
+				position: absolute;
+				z-index: -1;
+				width: 100%;
+				height: 100%;
+			}
+
+			.search-box {
+				display: flex;
+				align-items: center;
+
+				.search-cont {
+					box-sizing: border-box;
+					display: flex;
+					align-items: center;
+					width: 436rpx;
+					height: 64rpx;
+					background: #FFFFFF;
+					border-radius: 34rpx 34rpx 34rpx 34rpx;
+					padding: 4rpx 4rpx 4rpx 24rpx;
+
+					.icon-search {
+						width: 28rpx;
+						height: 28rpx;
+						margin-right: 20rpx;
+					}
+
+					input {
+						height: 60rpx;
+						line-height: 60rpx;
+						flex: 1;
+					}
+				}
+
+				.back-box {
+					display: flex;
+					align-items: center;
+					margin-left: 24rpx;
+
+					.img {
+						width: 48rpx;
+						height: 48rpx;
+					}
+				}
+			}
+
+			.shop-info {
+				padding: 24rpx;
+				background-color: #fff;
+				margin: 36rpx 24rpx 24rpx;
+				border-radius: 16rpx 16rpx 16rpx 16rpx;
+
+				.info-block {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+
+					.left {
+						display: flex;
+
+						.head {
+							width: 88rpx;
+							height: 88rpx;
+							margin-right: 20rpx;
+							border-radius: 16rpx 16rpx 16rpx 16rpx;
+						}
+
+						.shop-box {
+							.shop-name {
+								display: flex;
+
+								.name {
+									font-weight: 600;
+									font-size: 34rpx;
+									color: #333333;
+									margin-right: 16rpx;
+								}
+							}
+
+							.txt {
+								margin-top: 4rpx;
+								font-weight: 400;
+								font-size: 22rpx;
+								color: #FFFFFF;
+								margin: 8rpx 0 16rpx;
+								display: flex;
+								align-items: center;
+
+								.rating {
+									font-weight: 500;
+									font-size: 24rpx;
+									color: #F4A007;
+									display: flex;
+									align-items: center;
+
+									.star {
+										width: 24rpx;
+										height: 24rpx;
+										margin-right: 4rpx;
+									}
+								}
+
+								.line {
+									width: 2rpx;
+									height: 20rpx;
+									background: #CCCCCC;
+									margin: 0 20rpx;
+								}
+
+								.fans {
+									font-size: 24rpx;
+									color: #999999;
+								}
+
+							}
+						}
+					}
+
+					.right {
+						.button {
+							width: 128rpx;
+							height: 52rpx;
+							background: linear-gradient(127deg, #38D97D 12.38%, #02B176 100%);
+							border-radius: 26rpx 26rpx 26rpx 26rpx;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							font-size: 24rpx;
+							color: #ffffff;
+
+							&.isFollow {
+								background: #F0F0F0;
+								color: #666666;
+							}
+
+							.icon {
+								width: 24rpx;
+								height: 24rpx;
+								margin-right: 4rpx;
+							}
+						}
+					}
+				}
+
+				.data-block {
+					margin-top: 30rpx;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+
+					.number-block {
+						display: flex;
+
+						.item {
+							margin-right: 40rpx;
+							display: flex;
+							flex-direction: column;
+							align-items: center;
+
+							&:last-child {
+								margin-right: 0;
+							}
+
+							.number-item {
+								font-size: 26rpx;
+								color: #333333;
+							}
+
+							.txt-item {
+								margin-bottom: 10rpx;
+								font-size: 24rpx;
+								color: #666666;
+							}
+						}
+					}
+
+				}
+
+				.card {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					background: #FFF5EB;
+					width: 100%;
+					height: 48rpx;
+					border-radius: 8rpx 8rpx 8rpx 8rpx;
+					padding: 12rpx 16rpx;
+					box-sizing: border-box;
+					margin-top: 28rpx;
+
+					.card-item {
+						display: flex;
+						align-items: center;
+
+						.img {
+							width: 142rpx;
+							height: 24rpx;
+							margin-right: 14rpx;
+						}
+
+						.ranking {
+							font-size: 22rpx;
+							color: #D46C0D;
+						}
+					}
+
+
+				}
+			}
+
+		}
+
+		//达人视频
+		.vedio-block {
+			position: relative;
+			z-index: 1;
+			background-color: #FFFFFF;
+			// margin-top: -74rpx;
+			border-radius: 32rpx 32rpx 0rpx 0rpx;
+			padding: 26rpx 0;
+
+			.tab-wrapper {
+				display: flex;
+				height: 88rpx;
+				padding: 0 40rpx;
+				position: relative;
+
+				.tab-item {
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					position: relative;
+					color: #666666;
+
+					&.active {
+						font-weight: 600;
+						font-size: 32rpx;
+						color: #02B176;
+					}
+
+					.tab-text {
+						font-size: 32rpx;
+						transition: all 0.3s ease;
+					}
+
+					.underline {
+						position: absolute;
+						bottom: 0;
+						left: 50%;
+						transform: translateX(-50%);
+						width: 40rpx;
+						height: 12rpx;
+						animation: slideIn 0.3s ease;
+					}
+				}
+			}
+
+			@keyframes slideIn {
+				from {
+					opacity: 0;
+					transform: translateX(-50%) scaleX(0.5);
+				}
+
+				to {
+					opacity: 1;
+					transform: translateX(-50%) scaleX(1);
+				}
+			}
+
+			.tab-inner {
+				padding: 0 88rpx;
+				height: 88upx;
+				line-height: 88upx;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				font-size: 26rpx;
+				color: #666666;
+
+				.item {
+					white-space: nowrap;
+					line-height: 1;
+					font-family: PingFang SC;
+					margin-right: 48upx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+
+					&:last-child {
+						margin-right: 0;
+					}
+
+					&.active {
+						font-weight: 600;
+						color: #02B176;
+					}
+
+					.text {
+						position: relative;
+						z-index: 1;
+						display: flex;
+						align-items: center;
+					}
+
+					.tab-bg {
+						width: 24upx;
+						height: 24upx;
+						margin-left: 8rpx;
+					}
+				}
+
+				.icon-search {
+					display: flex;
+					align-items: center;
+
+					.line {
+						width: 2rpx;
+						height: 24rpx;
+						background: #EEEEEE;
+						border-radius: 0rpx 0rpx 0rpx 0rpx;
+						margin: 0 20rpx;
+					}
+
+					image {
+						width: 32upx;
+						height: 32upx;
+					}
+
+					.filter {
+						display: flex;
+						align-items: center;
+					}
+
+				}
+
+			}
+
+			.list {
+				padding: 24rpx 24rpx;
+				display: flex;
+				justify-content: space-between;
+				flex-wrap: wrap;
+
+				.list-item {
+					width: 342rpx;
+					margin-bottom: 18rpx;
+					position: relative;
+					display: flex;
+					flex-direction: column;
+
+					.img {
+						width: 100%;
+						border-radius: 16rpx 16rpx 0rpx 0rpx;
+
+					}
+
+					.video-icon {
+						width: 40rpx;
+						height: 40rpx;
+						position: absolute;
+						top: 20rpx;
+						right: 20rpx;
+					}
+
+					.suspension-icon {
+						width: 144rpx;
+						height: 144rpx;
+						position: absolute;
+						top: -14rpx;
+						right: 0rpx;
+					}
+
+					.info-block {
+						border-radius: 0rpx 0rpx 16rpx 16rpx;
+						padding: 12rpx 20rpx 20rpx;
+						box-sizing: border-box;
+						width: 100%;
+						background: #FFFFFF;
+						display: flex;
+						flex-direction: column;
+
+						.title {
+							font-weight: 500;
+							font-size: 28rpx;
+							color: #333333;
+							margin-bottom: 20rpx;
+						}
+
+						.item {
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+							margin-bottom: 20rpx;
+
+							.flex {
+								display: flex;
+								align-items: center;
+								font-size: 22rpx;
+								color: #999999;
+							}
+
+							.icon {
+								width: 32rpx;
+								height: 32rpx;
+								margin-right: 4rpx;
+							}
+
+							.head {
+								width: 32rpx;
+								height: 32rpx;
+								border-radius: 50%;
+								margin-right: 8rpx;
+							}
+
+							.name {
+								color: #757575;
+							}
+						}
+
+						text {
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+						}
+
+						.card {
+
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+							background: #FFF5EB;
+							width: 302rpx;
+							height: 40rpx;
+							border-radius: 8rpx 8rpx 8rpx 8rpx;
+							border: 1rpx solid #F3E2D0;
+							padding: 8rpx;
+							box-sizing: border-box;
+
+							.card-item {
+								display: flex;
+								align-items: center;
+
+								.img {
+									width: 48rpx;
+									height: 24rpx;
+									margin-right: 8rpx;
+								}
+
+								.ranking {
+									font-size: 22rpx;
+									color: #D46C0D;
+								}
+
+								.bold {
+									font-family: Roboto Flex, Roboto Flex;
+									font-weight: 600;
+									font-size: 24rpx;
+									color: #F4A007;
+									margin-right: 6rpx;
+									transform: skewX(-8deg);
+									margin-left: 4rpx;
+									/* 负值向左倾斜，正值向右倾斜 */
+									display: inline-block;
+								}
+							}
+
+							.go {
+								width: 16rpx;
+								height: 16rpx;
+							}
+						}
+					}
+
+				}
+
+				.list-item:nth-child(2n) {
+					margin-right: 0;
+				}
+			}
+
+			.goods-list {
+				padding: 20upx;
+				display: flex;
+				flex-wrap: wrap;
+
+				.item {
+					margin-right: 18rpx;
+					margin-bottom: 18rpx;
+					width: 342rpx;
+					background: #FFFFFF;
+					border-radius: 16rpx;
+					overflow: hidden;
+
+					&:nth-child(2n) {
+						margin-right: 0;
+					}
+
+					.img-box {
+						width: 100%;
+						height: 342upx;
+
+						image {
+							width: 100%;
+							height: 100%;
+						}
+					}
+
+					.info-box {
+						box-sizing: border-box;
+						padding: 20upx 20upx 30upx;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+
+						.title {
+							font-size: 26upx;
+							font-family: PingFang SC;
+							font-weight: 500;
+							color: #111111;
+							margin-bottom: 4rpx;
+						}
+
+						.intro {
+							font-weight: 400;
+							font-size: 22rpx;
+							color: #D46C0D;
+							margin-bottom: 8upx;
+						}
+
+						.sale {
+							font-size: 21rpx;
+							color: #999999;
+						}
+
+						.lable-group {
+							display: flex;
+							margin-top: 8rpx;
+
+							.lable-item {
+								margin-right: 8rpx;
+								height: 30rpx;
+								padding: 0 8rpx;
+								border-radius: 4rpx 4rpx 4rpx 4rpx;
+								border: 1rpx solid #FFA599;
+								font-size: 21rpx;
+								color: #FF4B33;
+							}
+						}
+
+						.prce-num {
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+							margin-top: 8upx;
+
+							.price {
+								font-weight: 600;
+								font-size: 26rpx;
+								color: #FA341E;
+								font-size: 26rpx;
+
+								.unit {
+									font-size: 20upx;
+								}
+
+								.bold {
+									font-size: 36upx;
+								}
+							}
+						}
+
+						.card {
+							margin-top: 20rpx;
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+							background: #FFF4E8;
+							border-radius: 6rpx 6rpx 6rpx 6rpx;
+							width: 100%;
+							height: 40rpx;
+							padding: 8rpx 10rpx;
+							box-sizing: border-box;
+
+							.card-item {
+								display: flex;
+								align-items: center;
+
+								.img {
+									width: 24rpx;
+									height: 24rpx;
+									margin-right: 4rpx;
+								}
+
+								.ranking {
+									font-size: 20rpx;
+									color: #4D4D4D;
+								}
+
+								.bold {
+									font-family: Roboto Flex, Roboto Flex;
+									font-weight: 600;
+									font-size: 24rpx;
+									color: #F4A007;
+									margin-right: 6rpx;
+									transform: skewX(-8deg);
+									/* 负值向左倾斜，正值向右倾斜 */
+									display: inline-block;
+									margin-left: 4rpx;
+									/* transform需要inline-block或block */
+								}
+							}
+
+							.go {
+								width: 16rpx;
+								height: 16rpx;
+							}
+						}
+					}
+				}
+			}
+		}
+
+		.side {
+			position: fixed;
+			top: 52%;
+			right: 32rpx;
+			z-index: 1000;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			will-change: transform;
+
+			.side-item {
+				padding: 12rpx;
+				background: #FFFFFF;
+				box-shadow: 0rpx 0rpx 10rpx 2rpx rgba(0, 0, 0, 0.05);
+				margin-bottom: 24rpx;
+				border-radius: 50%;
+
+				.button-reset {
+					background-color: transparent !important;
+					padding: 0 !important;
+					line-height: 1 !important;
+					margin: 0 !important;
+					width: auto !important;
+					font-weight: 500 !important;
+					border-radius: none !important;
+
+					&::after {
+						border: none !important;
+						padding: 0 !important;
+						margin: 0 !important;
+					}
+				}
+
+				.icon {
+					display: block;
+					width: 48rpx;
+					height: 48rpx;
+				}
+			}
+		}
+
+
+	}
+</style>

pages_shopping/live/trailer.vue

@@ -0,0 +1,188 @@
+<template>
+	<view class="content">
+
+
+		<mescroll-body bottom="0" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
+			:down="downOption" :up="upOption">
+			<!-- <view class="list">
+				<view class="list-item" @click="goLive(item)" v-for="(item,index) in list" :key="index">
+					<image class="img" v-if="item.liveImgUrl" :src="item.liveImgUrl"></image>
+					<view class="info">
+						<text>{{item.liveName}}</text>
+					</view>
+				</view>
+			</view> -->
+
+			<view class="list">
+				<view class="left">
+					<view class="label">
+						<view class="">9/11</view>
+						<view class="">20:00开播</view>
+					</view>
+					<image src="/static/images/img.png"></image>
+				</view>
+				<view class="right">
+					<view class="title">秋季常见问题儿科专家直播</view>
+					<view class="shop-item">
+						<image class="shop-img" src="/static/images/img.png"></image>
+						<text class="shop">芳华悦选旗舰店</text>
+					</view>
+					<view class="trailer-button">
+						<image class="icon" src="/static/images/img.png"></image>
+						<text class="txt">245人已预约</text>
+						<view class="button">预约</view>
+					</view>
+				</view>
+			</view>
+
+		</mescroll-body>
+	</view>
+</template>
+
+<script>
+	import {
+		liveList
+	} from '@/api/living.js'
+	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+	export default {
+		mixins: [MescrollMixin],
+		data() {
+			return {
+
+				list: [],
+				downOption: {
+					offset: 80,
+					use: true,
+					auto: false
+				},
+				upOption: {
+					use: true,
+					auto: true,
+					page: {
+						num: 0,
+						size: 10
+					}
+				},
+				mescroll: null,
+			}
+		},
+		onLoad() {
+			// if (!uni.getStorageSync("AppToken")) {
+			// 	uni.navigateTo({
+			// 		url: '/pages/auth/login'
+			// 	});
+			// }
+		},
+		onUnload() {
+
+		},
+		methods: {
+			mescrollInit(mescroll) {
+				this.mescroll = mescroll;
+			},
+
+			// 下拉刷新回调
+			downCallback(mescroll) {
+				this.list = [];
+				mescroll.resetUpScroll();
+			},
+
+			// 上拉加载回调
+			upCallback(mescroll) {
+				const pageNum = mescroll.num;
+				const pageSize = mescroll.size;
+
+				let data = {
+					pageSize: pageSize,
+					pageNum: pageNum,
+				}
+				liveList(data).then(res => {
+					if (!res) {
+						mescroll.endErr();
+						return;
+					}
+					if (res.code == 200) {
+						let curPageData = Array.isArray(res.data.list) ? res.data.list : [];
+						let totalSize = Number(res.data.total) || 0;
+						if (pageNum === 1) {
+							this.list = [];
+						}
+						this.list = this.list.concat(curPageData);
+
+						mescroll.endBySize(curPageData.length, totalSize);
+					} else {
+						mescroll.endErr();
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						});
+					}
+				}).catch(err => {
+					mescroll.endErr();
+				});
+			},
+
+			goLive(item) {
+				uni.navigateTo({
+					// &immediate=true
+					url: `./living?liveId=${item.liveId}`
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		background-color: #111;
+		min-height: 100vh;
+		padding: 24rpx;
+
+		.list {
+			display: flex;
+			justify-content: space-between;
+			.left{
+				width: 280rpx;
+				height: 220rpx;
+				background: #F29696;
+				border-radius: 16rpx 16rpx 16rpx 16rpx;
+				position: relative;
+				overflow: hidden;
+				.label{
+					position: absolute;
+					left: 16rpx;
+					top: 16rpx;
+				}
+			}
+			.right{
+				.title{
+					font-weight: 500;
+					font-size: 32rpx;
+					color: #333333;
+				}
+					
+				.shop-item{
+					.shop-img{
+						width: 32rpx;
+						height: 32rpx;
+						background: #02B176;
+						margin-right: 12rpx;
+					}
+					.shop{
+						font-size: 24rpx;
+						color: #666666;
+					}
+				}
+				.trailer-button{
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					.button{
+						display: flex;
+									justify-content: space-between;
+					}
+				}
+			}
+		}
+	}
+</style>

pages_shopping/shopping/components/filter.vue

@@ -0,0 +1,205 @@
+<template>
+	<u-popup :show="showTask" @close="handleClose" @open="handleOpen" round="32rpx" bgColor="#ffffff" zIndex="10077"
+		mode="right">
+		<view class="content">
+			<view class="option">
+				<view class="title-box">服务/折扣</view>
+				<view class="list">
+					<view v-for="(item,index) in serviceList" :key="index" @click="onSelect(item)"
+						:class="activeIndex == item.value?'item active':'item'">{{item.txt}}</view>
+				</view>
+			</view>
+			<view class="option">
+				<view class="title-box">
+					<text>价格</text>
+				</view>
+				<view class="list">
+					<input class="input" placeholder="最低价" />
+					<view class="symbol"></view><input class="input" placeholder="最高价" />
+				</view>
+			</view>
+			<view class="option">
+				<view class="title-box">
+					<text>品牌</text>
+					<view class="expand">
+						<text class="txt">展开</text>
+						<image class="icon" src="/static/images/arrow_down.png"></image>
+					</view>
+				</view>
+				<view class="list">
+					<view v-for="(item,index) in serviceList" :key="index" @click="onSelect(item)"
+						:class="activeIndex == item.value?'item active':'item'">{{item.txt}}</view>
+				</view>
+			</view>
+			<view class="btn-group">
+				<view class="btn clear">清空选择</view>
+				<view class="btn confirm">确定</view>
+			</view>
+
+		</view>
+	</u-popup>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				showTask: true,
+				activeIndex: 0,
+				serviceList: [{
+						txt: '顺丰物流',
+						value: 0
+					}, {
+						txt: '顺丰物流',
+						value: 1
+					}, {
+						txt: '顺丰物流',
+						value: 2
+					}, {
+						txt: '顺丰物流',
+						value: 3
+					}
+
+				]
+			}
+		},
+		mounted() {},
+		methods: {
+			onSelect(item) {
+				console.log("item", item)
+				this.activeIndex = item.value
+			},
+			handleClose() {
+				console.log("关闭")
+				// 关闭弹窗
+			},
+
+			handleOpen() {
+				// 打开弹窗
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		height: 100%;
+		width: 660rpx;
+		background: #FFFFFF;
+		display: flex;
+		flex-direction: column;
+		padding: 192rpx 24rpx 16rpx;
+		position: relative;
+		box-sizing: border-box;
+
+		.option {
+			.title-box {
+				height: 80rpx;
+				font-weight: 500;
+				font-size: 32rpx;
+				color: #000000;
+				margin-bottom: 16rpx;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.expand {
+					display: flex;
+					align-items: center;
+
+					.txt {
+						font-weight: 400;
+						font-size: 24rpx;
+						color: #333333;
+					}
+
+					.icon {
+						width: 24rpx;
+						height: 24rpx;
+						margin-left: 16rpx;
+					}
+				}
+
+			}
+
+			.list {
+				display: flex;
+				flex-wrap: wrap;
+				align-items: center;
+				margin-bottom: 48rpx;
+
+				.input {
+					width: 280rpx;
+					height: 72rpx;
+					background: #F5F7FA;
+					border-radius: 12rpx 12rpx 12rpx 12rpx;
+					text-align: center;
+				}
+
+				.symbol {
+					margin: 0 20rpx;
+					width: 12rpx;
+					height: 2rpx;
+					background: #333333;
+					border-radius: 0rpx 0rpx 0rpx 0rpx;
+				}
+
+				.item {
+					width: 192rpx;
+					height: 72rpx;
+					background: #F5F7FA;
+					border-radius: 12rpx 12rpx 12rpx 12rpx;
+					text-align: center;
+					line-height: 72rpx;
+					font-size: 28rpx;
+					color: #333333;
+					box-sizing: border-box;
+					border: 2rpx solid transparent;
+					margin: 0 18rpx 18rpx 0;
+
+					&:nth-child(3n) {
+						margin-right: 0;
+					}
+
+					&.active {
+						background: #E6FFF4;
+						border-radius: 12rpx 12rpx 12rpx 12rpx;
+						border: 2rpx solid #02B176;
+						font-weight: 500;
+						color: #02B176;
+					}
+				}
+			}
+		}
+
+		.btn-group {
+			display: flex;
+			justify-content: space-between;
+			position: absolute;
+			bottom: 16rpx;
+
+
+			.btn {
+				width: 297rpx;
+				height: 88rpx;
+				border-radius: 16rpx 16rpx 16rpx 16rpx;
+				text-align: center;
+				font-weight: 500;
+				font-size: 32rpx;
+				line-height: 88rpx;
+			}
+
+			.clear {
+				background: #E6FFF4;
+				color: #02B176;
+				margin-right: 18rpx;
+			}
+
+			.confirm {
+				background: #02B176;
+				color: #FFFFFF;
+			}
+		}
+
+	}
+</style>

pages_shopping/shopping/productList.vue

@@ -1,37 +1,60 @@
 <template>
 	<view>
 		<view class="top-fixed">
+			<view class="status_bar" :style="{height: statusBarHeight}"></view>
+			
 			<view class="search-cont">
+				<image class="w64 h64" src="/static/images/back_black.png"></image>
 				<view class="inner">
-					<image class="icon-search" src="../../static/images/search.png" mode=""></image>
-					<input type="text" @confirm="goSearch" :value="searchValue" placeholder="输入药品名称" placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
-				</view>
-				<view class="icon-search">
-					<image @click="showChange(2)" v-if="showType==1"  src="../../static/images/search1.png" mode=""></image>
-					<image @click="showChange(1)" v-if="showType==2"  src="../../static/images/search2.png" mode=""></image>
+					<!-- <image class="icon-search" src="../../static/images/search.png" mode=""></image> -->
+					<input type="text" value="" placeholder="城口腊肉/香肠" confirm-type="搜索" @confirm="goSearch"
+						:focus='setFocus' placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" />
+					<image class="w32 h32" src="/static/images/search_close_gray.png"></image>
+					<view class="line"></view>
+					<view class="search">搜索</view>
 				</view>
 			</view>
+
 			<!-- tab切换 -->
 			<view class="pub-tab-box">
-				<view class="tab-inner">
-					<view 
-						 
-						v-for="(item,index) in cates" 
-						:key="index"
-						:class="cateId == item.cateId?'item active':'item'"
-						@click="cateChange(item)"
-					>
+				<!-- <view class="tab-inner">
+					<view v-for="(item,index) in cates" :key="index" :class="cateId == item.cateId?'item active':'item'"
+						@click="cateChange(item)">
 						<view class="text">
 							{{ item.cateName }}
-							<image v-show="cateId == item.cateId" class="tab-bg" src="../../static/images/tab_bg.png" mode=""></image>
+							<image v-show="cateId == item.cateId" class="tab-bg" src="../../static/images/tab_bg.png"
+								mode=""></image>
+						</view>
+					</view>
+				</view> -->
+				<view class="tab-inner">
+					<view v-for="(item,index) in selectList" :key="index"
+						:class="activeIndex == item.value?'item active':'item'" @click="onSelect(item)">
+						<view class="text">
+							<text>{{ item.name }}</text>
+							<image v-if="item.value==2||item.value==3" class="tab-bg"
+								src="/static/images/shaixuan_moren.png" mode=""></image>
+						</view>
+					</view>
+					<view class="icon-search">
+						<image @click="showChange(2)" v-if="showType==1" src="../../static/images/demonstrations1.png"
+							mode="">
+						</image>
+						<image @click="showChange(1)" v-if="showType==2" src="../../static/images/demonstrations2.png"
+							mode="">
+						</image>
+						<view class="line"></view>
+						<view class="filter">
+							<text>筛选</text>
+							<image class="ml8" @click="toFilter" src="../../static/images/filter_icon.png" mode="">
 						</view>
 					</view>
-					
 				</view>
 			</view>
 		</view>
-		<!-- 数据列表 --> 
-		<mescroll-body  top="190upx" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
+		<!-- 数据列表 -->
+		<mescroll-body top="190upx" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
+			:down="downOption" :up="upOption">
 			<view class="medic-list" v-if="showType==1">
 				<view v-for="(item,index) in dataList" :key="index" class="item" @click="showDetail(item)">
 					<view class="img-box">
@@ -40,13 +63,18 @@
 					<view class="info-box">
 						<view class="title ellipsis2">{{item.productName}}</view>
 						<view class="intro ellipsis">{{item.productInfo}}</view>
+						<view class="sale">已售 {{item.sales}} {{item.unitName}} | 惊艳度98%</view>
+						<view class="lable-group">
+							<view class="lable-item">9.5折</view>
+							<view class="lable-item">限购1份</view>
+						</view>
 						<view class="prce-num">
 							<view class="price">
-								<text class="unit">¥</text>
-								<text class="num">{{item.price.toFixed(2)}} </text>
+								<text class="unit">¥</text><text
+									class="bold">{{splitPrice(item.price).integer}}</text>.{{splitPrice(item.price).decimal}}
 							</view>
 							<view class="cart-img" @click="navgetTo('../shopping/cart')">
-								<view class="sale">已售 {{item.sales}} {{item.unitName}}</view>
+								<image class="w40 h40" src="/static/images/add_car.png"></image>
 							</view>
 						</view>
 					</view>
@@ -59,36 +87,76 @@
 					</view>
 					<view class="info-box">
 						<view class="title ellipsis2">{{item.productName}}</view>
-						<view class="price-box">
-							<view class="now">
-								<text class="unit">¥</text>
-								<text class="num">{{item.price.toFixed(2)}}</text>
+						<view class="intro ellipsis">{{item.productInfo}}</view>
+						<view class="sale">已售 {{item.sales}} {{item.unitName}} | 惊艳度98%</view>
+						<view class="lable-group">
+							<view class="lable-item">9.5折</view>
+							<view class="lable-item">限购1份</view>
+						</view>
+						<view class="prce-num">
+							<view class="price">
+								<text class="unit">¥</text><text
+									class="bold">{{splitPrice(item.price).integer}}</text>.{{splitPrice(item.price).decimal}}
+							</view>
+							<view class="cart-img" @click="navgetTo('../shopping/cart')">
+								<image class="w40 h40" src="/static/images/add_car.png"></image>
 							</view>
-							<view class="old">¥{{item.otPrice.toFixed(2)}}</view>
+						</view>
+						<view class="card">
+							<view class="card-item">
+								<image class="img" src="/static/images/ranking_icon.png"></image>
+								<text class="ranking">健康新品热销榜</text>
+								<text class="bold">top.1</text>
+							</view>
+							<image class="go" src="/static/images/jb_arrow_right_icon.png"></image>
 						</view>
 					</view>
 				</view>
 			</view>
 		</mescroll-body>
+		<Filter />
 	</view>
 </template>
 
 <script>
-	import {getProductCateByPid,getProducts} from '@/api/product'
+	import Filter from '@/pages_shopping/shopping/components/filter.vue'
+	import {
+		getProductCateByPid,
+		getProducts
+	} from '@/api/product'
 	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
 	export default {
-		mixins: [MescrollMixin], 
+		mixins: [MescrollMixin],
+		components: {
+			Filter
+		},
 		data() {
 			return {
-				searchValue:"",
-				showType:2,
-				cates:[],
-				cateId:null,
-				defaultOrder:'desc',
-				pid:null,
+				activeIndex: 0,
+				// 状态栏的高度
+				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
+				searchValue: "",
+				showType: 2,
+				selectList: [{
+					name: '综合',
+					value: 0
+				}, {
+					name: '销量',
+					value: 1
+				}, {
+					name: '价格',
+					value: 2
+				}, {
+					name: '惊艳度',
+					value: 3
+				}],
+				cates: [],
+				cateId: null,
+				defaultOrder: 'desc',
+				pid: null,
 				//上拉加载的配置
 				upOption: {
-					onScroll:true,
+					onScroll: true,
 					use: true, // 是否启用上拉加载; 默认true
 					page: {
 						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
@@ -96,11 +164,11 @@
 					},
 					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
 					empty: {
-						icon:'/static/images/no_data.png',
+						icon: '/static/images/no_data.png',
 						tip: '暂无数据',
-						
+
 					},
-					textNoMore:"已经到底了",
+					textNoMore: "已经到底了",
 				},
 				// 列表数据
 				dataList: []
@@ -108,29 +176,38 @@
 		},
 		onLoad(options) {
 			this.cateId = options.cateId;
-			this.pid=options.pid;
+			this.pid = options.pid;
 			console.log(this.cateId)
 			//获取分类列表
 			this.getProductCateByPid();
-		 
+
 		},
 		methods: {
+			splitPrice(price) {
+				const priceStr = parseFloat(price).toFixed(2).toString();
+				return {
+					integer: priceStr.split('.')[0],
+					decimal: priceStr.split('.')[1]
+				};
+			},
 			goSearch(e) {
-				this.searchValue=e.detail.value;
+				this.searchValue = e.detail.value;
 				this.mescroll.resetUpScroll();
 			},
-			showChange(type){
-				this.showType=type;
+			showChange(type) {
+				this.showType = type;
 			},
-			getProductCateByPid(){
-				let data = {pid:this.pid};
+			getProductCateByPid() {
+				let data = {
+					pid: this.pid
+				};
 				getProductCateByPid(data).then(
 					res => {
-						if(res.code==200){
-							this.cates=res.data;
-						}else{
+						if (res.code == 200) {
+							this.cates = res.data;
+						} else {
 							uni.showToast({
-								icon:'none',
+								icon: 'none',
 								title: "请求失败",
 							});
 						}
@@ -138,6 +215,11 @@
 					rej => {}
 				);
 			},
+
+			onSelect(item) {
+				console.log("item", item)
+				this.activeIndex = item.value
+			},
 			// tab切换
 			cateChange(item) {
 				this.cateId = item.cateId;
@@ -150,27 +232,28 @@
 				//联网加载数据
 				var that = this;
 				var data = {
-					productName:this.searchValue,
-					cateId:this.cateId,
-					defaultOrder:this.defaultOrder,
+					productName: this.searchValue,
+					cateId: this.cateId,
+					defaultOrder: this.defaultOrder,
 					page: page.num,
 					pageSize: page.size
 				};
 				getProducts(data).then(res => {
-					if(res.code==200){
+					if (res.code == 200) {
 						//设置列表数据
 						if (page.num == 1) {
-							that.dataList = res.data.list; 
-							
+							that.dataList = res.data.list;
+
+
 						} else {
 							that.dataList = that.dataList.concat(res.data.list);
-							 
+
 						}
 						that.mescroll.endBySize(res.data.list.length, res.data.total);
-						
-					}else{
+
+					} else {
 						uni.showToast({
-							icon:'none',
+							icon: 'none',
 							title: "请求失败",
 						});
 						that.dataList = null;
@@ -181,254 +264,409 @@
 			// 查看药品详情
 			showDetail(item) {
 				uni.navigateTo({
-					url: '/pages_shopping/shopping/productDetails?productId='+item.productId
+					url: '/pages_shopping/shopping/productDetails?productId=' + item.productId
 				})
 			}
-			
+
 		}
 	}
 </script>
 
 <style lang="scss">
-	.top-fixed{
+	page {
+		background: #F5F7FA;
+	}
+
+	.top-fixed {
 		width: 100%;
 		position: fixed;
 		top: 0;
 		left: 0;
 		z-index: 10;
 	}
-	.pub-tab-box{
+
+	.pub-tab-box {
 		box-sizing: border-box;
 		width: 100%;
 		padding: 0 33upx;
 		background-color: #FFFFFF;
-		.tab-inner{
+
+		.tab-inner {
 			height: 88upx;
 			line-height: 88upx;
 			display: flex;
 			overflow-x: auto;
-			justify-content: flex-start;
+			justify-content: space-between;
 			align-items: center;
-			
-		}
-		.item{
-			font-size: 28upx;
-			white-space: nowrap;
-			line-height: 1;
-			font-family: PingFang SC;
-			font-weight: 500;
+			font-size: 26rpx;
 			color: #666666;
-			margin-right: 60upx;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			&:last-child{
-				margin-right: 0;
-			}
-			&.active{
-				font-weight: bold;
-				color: #333333;
-			}
-			.text{
-				position: relative;
-				z-index: 1;
+
+			.item {
+				font-size: 28upx;
+				white-space: nowrap;
+				line-height: 1;
+				font-family: PingFang SC;
+
+				margin-right: 48upx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				&:last-child {
+					margin-right: 0;
+				}
+
+				&.active {
+					font-weight: 600;
+					color: #02B176;
+				}
+
+				.text {
+					position: relative;
+					z-index: 1;
+					display: flex;
+					align-items: center;
+				}
+
+				.tab-bg {
+					width: 24upx;
+					height: 24upx;
+					margin-left: 8rpx;
+				}
 			}
-			.tab-bg{
-				width: 72upx;
-				height: 28upx;
-				position: absolute;
-				top: 17upx;
-				left: 50%;
-				transform: translateX(-36upx);
-				z-index: -1;
+
+			.icon-search {
+				display: flex;
+				align-items: center;
+
+				.line {
+					width: 2rpx;
+					height: 24rpx;
+					background: #EEEEEE;
+					border-radius: 0rpx 0rpx 0rpx 0rpx;
+					margin: 0 20rpx;
+				}
+
+				image {
+					width: 32upx;
+					height: 32upx;
+				}
+
+				.filter {
+					display: flex;
+					align-items: center;
+				}
+
 			}
+
 		}
-		
 	}
-	 
-	.medic-list{
+
+
+
+	.medic-list {
 		padding: 20upx;
-		.item{
+
+		.item {
 			box-sizing: border-box;
-			min-height: 285upx;
+			min-height: 296upx;
 			background: #FFFFFF;
 			border: 4upx solid #FFFFFF;
 			border-radius: 16upx;
-			margin-bottom: 20upx;
-			padding: 40upx 30upx;
+			margin-bottom: 18upx;
+			padding: 24rpx;
 			display: flex;
-			.img-box{
-				width: 200upx;
-				height: 200upx;
-				margin-right: 30upx;
-				image{
+
+			.img-box {
+				flex-shrink: 0;
+				width: 248upx;
+				height: 248upx;
+				margin-right: 20upx;
+				border-radius: 16upx;
+				overflow: hidden;
+
+				image {
 					width: 100%;
 					height: 100%;
 				}
 			}
-			.info-box{
-				width: calc(100% - 210upx);
-				.title{
-					font-size: 32upx;
+
+			.info-box {
+				flex: 1;
+				min-width: 0;
+
+				.title {
+					font-size: 28upx;
 					font-family: PingFang SC;
 					font-weight: 500;
-					color: #111111;
-					line-height: 40rpx;
-					height: 80rpx;
+					color: #333333;
+					margin-bottom: 4rpx;
 				}
-				.intro{
-					font-size: 26upx;
-					font-family: PingFang SC;
-					font-weight: 500;
+
+				.intro {
+					font-weight: 400;
+					font-size: 22rpx;
+					color: #D46C0D;
+					margin-bottom: 8upx;
+				}
+
+				.sale {
+					font-size: 21rpx;
 					color: #999999;
-					line-height: 1;
-					margin-top: 26upx;
 				}
-			 
-				.prce-num{
+
+				.lable-group {
+					display: flex;
+					margin-top: 8rpx;
+
+					.lable-item {
+						margin-right: 8rpx;
+						height: 30rpx;
+						padding: 0 8rpx;
+						border-radius: 4rpx 4rpx 4rpx 4rpx;
+						border: 1rpx solid #FFA599;
+						font-size: 21rpx;
+						color: #FF4B33;
+					}
+				}
+
+				.prce-num {
 					display: flex;
 					align-items: center;
 					justify-content: space-between;
-					margin-top: 30upx;
-					.price{
-						display: flex;
-						align-items: flex-end;
-						.unit{
-							font-size: 24upx;
-							font-family: PingFang SC;
-							font-weight: 500;
-							color: #FF6633;
-							line-height: 1.2;
-							margin-right: 4upx;
+					margin-top: 8upx;
+
+					.price {
+						font-weight: 600;
+						font-size: 26rpx;
+						color: #FA341E;
+						font-size: 26rpx;
+
+						.unit {
+							font-size: 20upx;
 						}
-						.num{
+
+						.bold {
 							font-size: 36upx;
-							font-family: PingFang SC;
-							font-weight: bold;
-							color: #FF6633;
-							line-height: 1;
 						}
 					}
-					.cart-img{
-						.sale{
-							font-size: 20upx;
-							font-family: PingFang SC;
-							color: #999999;
-						}
-						 
-					}
+
 				}
 			}
 		}
 	}
-	
-	.goods-list{
+
+	.goods-list {
 		padding: 20upx;
 		display: flex;
 		flex-wrap: wrap;
-		.item{
-			margin-right: 20rpx;
-			margin-bottom: 20rpx;
-			width: 345rpx;
+
+		.item {
+			margin-right: 18rpx;
+			margin-bottom: 18rpx;
+			width: 342rpx;
 			background: #FFFFFF;
-			box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
-			border-radius: 20rpx;
+			border-radius: 16rpx;
 			overflow: hidden;
+
 			&:nth-child(2n) {
 				margin-right: 0;
 			}
-			.img-box{
+
+			.img-box {
 				width: 100%;
-				height: 334upx;
-				image{
+				height: 342upx;
+
+				image {
 					width: 100%;
 					height: 100%;
 				}
 			}
-			.info-box{
+
+			.info-box {
 				box-sizing: border-box;
-				height: 182upx;
 				padding: 20upx 20upx 30upx;
 				display: flex;
 				flex-direction: column;
 				justify-content: space-between;
-				.title{
+
+				.title {
 					font-size: 26upx;
 					font-family: PingFang SC;
 					font-weight: 500;
 					color: #111111;
-					line-height: 40upx;
+					margin-bottom: 4rpx;
+				}
+
+				.intro {
+					font-weight: 400;
+					font-size: 22rpx;
+					color: #D46C0D;
+					margin-bottom: 8upx;
+				}
+
+				.sale {
+					font-size: 21rpx;
+					color: #999999;
 				}
-				.price-box{
+
+				.lable-group {
 					display: flex;
-					align-items: flex-end;
-					.now{
-						display: flex;
-						align-items: flex-end;
-						margin-right: 20upx;
-						.unit{
-							font-size: 24upx;
-							font-family: PingFang SC;
-							font-weight: 500;
-							color: #FF6633;
-							line-height: 1.2;
-							margin-right: 4upx;
+					margin-top: 8rpx;
+
+					.lable-item {
+						margin-right: 8rpx;
+						height: 30rpx;
+						padding: 0 8rpx;
+						border-radius: 4rpx 4rpx 4rpx 4rpx;
+						border: 1rpx solid #FFA599;
+						font-size: 21rpx;
+						color: #FF4B33;
+					}
+				}
+
+				.prce-num {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					margin-top: 8upx;
+
+					.price {
+						font-weight: 600;
+						font-size: 26rpx;
+						color: #FA341E;
+						font-size: 26rpx;
+
+						.unit {
+							font-size: 20upx;
 						}
-						.num{
+
+						.bold {
 							font-size: 36upx;
-							font-family: PingFang SC;
-							font-weight: bold;
-							color: #FF6633;
-							line-height: 1;
 						}
 					}
-					.old{
-						font-size: 26upx;
-						font-family: PingFang SC;
-						font-weight: 500;
-						text-decoration: line-through;
-						color: #BBBBBB;
-						line-height: 1.1;
+				}
+
+				.card {
+					margin-top: 20rpx;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					background: #FFF4E8;
+					border-radius: 6rpx 6rpx 6rpx 6rpx;
+					width: 100%;
+					height: 40rpx;
+					padding: 8rpx 10rpx;
+					box-sizing: border-box;
+
+					.card-item {
+						display: flex;
+						align-items: center;
+
+						.img {
+							width: 24rpx;
+							height: 24rpx;
+							margin-right: 4rpx;
+						}
+
+						.ranking {
+							font-size: 20rpx;
+							color: #4D4D4D;
+						}
+
+						.bold {
+							font-family: Roboto Flex, Roboto Flex;
+							font-weight: 600;
+							font-size: 24rpx;
+							color: #F4A007;
+							margin-right: 6rpx;
+							transform: skewX(-8deg);
+							/* 负值向左倾斜，正值向右倾斜 */
+							display: inline-block;
+							/* transform需要inline-block或block */
+						}
+					}
+
+					.go {
+						width: 16rpx;
+						height: 16rpx;
 					}
 				}
 			}
 		}
 	}
-	.search-cont{
-		padding: 16upx 30upx;
+
+	// .search-cont{
+	// 	padding: 16upx 30upx;
+	// 	background-color: #FFFFFF;
+	// 	display:flex;
+	// 	align-items: center;
+	// 	justify-content: space-between;
+	// 	.inner{
+	// 		box-sizing: border-box;
+	// 		width: 100%;
+	// 		height: 72upx;
+	// 		background: #F7F7F7;
+	// 		border-radius: 36upx;
+	// 		display: flex;
+	// 		align-items: center;
+	// 		padding: 0 30upx;
+	// 		.icon-search{
+	// 			width: 28upx;
+	// 			height: 28upx;
+	// 			margin-right: 20upx;
+	// 		}
+	// 		input{
+	// 			height: 60upx;
+	// 			line-height: 60upx;
+	// 			flex: 1;
+	// 		}
+	// 	}
+	// 	.icon-search{
+	// 		margin-left: 10upx;
+	// 		width: 40upx;
+	// 		height: 40upx;
+	// 		image{
+	// 			width: 40upx;
+	// 			height: 40upx;
+	// 		}
+
+	// 	}
+	// }
+
+	.search-cont {
+		display: flex;
+		padding: 16rpx 30rpx;
 		background-color: #FFFFFF;
-		display:flex;
-		align-items: center;
-		justify-content: space-between;
-		.inner{
+
+		.inner {
 			box-sizing: border-box;
-			width: 100%;
-			height: 72upx;
-			background: #F7F7F7;
-			border-radius: 36upx;
+			width: 436rpx;
+			height: 64rpx;
+			background: #F5F7FA;
+			border-radius: 36rpx;
 			display: flex;
 			align-items: center;
-			padding: 0 30upx;
-			.icon-search{
-				width: 28upx;
-				height: 28upx;
-				margin-right: 20upx;
+			padding: 0 24rpx;
+
+			.search {
+				font-weight: 500;
+				font-size: 28rpx;
+				color: #333333;
 			}
-			input{
-				height: 60upx;
-				line-height: 60upx;
-				flex: 1;
+
+			.line {
+				width: 2rpx;
+				height: 24rpx;
+				background: #999999;
+				margin: 0 26rpx;
 			}
-		}
-		.icon-search{
-			margin-left: 10upx;
-			width: 40upx;
-			height: 40upx;
-			image{
-				width: 40upx;
-				height: 40upx;
+
+			input {
+				height: 60rpx;
+				line-height: 60rpx;
+				flex: 1;
 			}
-			
 		}
 	}
-</style>
+</style>