feat：购物车增加滑动删除

components/SwipeAction/SwipeAction.vue

@@ -0,0 +1,148 @@
+<template>
+  <view class="slide">
+    <view class="slide-left" :style="'position: relative;left:' + left + 'rpx'" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
+      <slot></slot>
+    </view>
+    <view class="slide-right">
+      <view
+        class="btn-item"
+        v-for="(item, index) in btnList"
+        :key="index"
+        :style="'width:' + item.width + ';height:' + height + 'rpx;background-color:' + item.bgColor + ';color:' + item.color + ';font-size:' + item.fontSize"
+        @click.stop="clickItem(item)"
+      >
+        {{ item.name }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    //操作按钮数组
+    btnList: {
+      type: Array,
+      default: () => {
+        return [
+          {
+            id: "1",
+            name: "删除",
+            width: "100rpx",
+            bgColor: "#ed656d",
+            color: "#FFFFFF",
+            fontSize: "28rpx",
+          },
+        ];
+      },
+    },
+    //当前列索引
+    index: {
+      type: Number,
+      require: true,
+      default: 0,
+    },
+    //是否禁用
+    disable: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      x: 0,
+      left: 0,
+      operation: 0,
+      height: 0,
+      screenWidth: 0,
+    };
+  },
+  mounted() {
+    this.$nextTick((res) => {
+      const systemInfo = uni.getSystemInfoSync();
+      this.screenWidth = systemInfo.screenWidth;
+      this.getBtnWidth();
+      this.getListHeight();
+    });
+  },
+  methods: {
+    clickItem(e) {
+      this.$emit("clickItem", {
+        index: this.index,
+        id: e.id,
+      });
+    },
+    //重置方法
+    reset() {
+      this.left = 0;
+    },
+    getBtnWidth() {
+      let view = uni.createSelectorQuery().in(this).select(".slide-right");
+      view
+        .boundingClientRect((rect) => {
+          this.operation = this.px2rpx(rect.width, this.screenWidth);
+        })
+        .exec();
+    },
+    getListHeight() {
+      let view = uni.createSelectorQuery().in(this).select(".slide-left");
+      view
+        .boundingClientRect((rect) => {
+          this.height = this.px2rpx(rect.height, this.screenWidth);
+        })
+        .exec();
+    },
+    px2rpx(px, screenWidth) {
+      return px / (screenWidth / 750);
+    },
+    touchstart(e) {
+      if (this.disable) return;
+      this.x = this.px2rpx(e.touches[0].clientX, this.screenWidth);
+    },
+    touchmove(e) {
+      if (this.disable) return;
+      let clientX = this.x - this.px2rpx(e.touches[0].clientX, this.screenWidth);
+      if (clientX <= 0) this.left = 0;
+      else if (this.operation <= clientX) this.left = this.operation * -1;
+      else this.left = clientX * -1;
+    },
+    touchend(e) {
+      if (this.disable) return;
+      let clientX = this.x - this.px2rpx(e.changedTouches[0].clientX, this.screenWidth);
+      this.left = clientX > this.operation / 2 ? this.operation * -1 : 0;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.slide {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.slide-left {
+  width: 100%;
+  overflow: hidden;
+  background-color: #ffffff;
+  transition: left 0.2s ease-in-out;
+  z-index: 999;
+}
+
+.slide-right {
+  position: absolute;
+  top: 0rpx;
+  right: 0;
+  z-index: 99;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.btn-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

pages/car/index.vue

@@ -1,480 +1,510 @@
 <template>
-	<view>
-		<view class="to_bottom" v-if="!cartList.length"> -----还没有产品啦-----</view>
-		<view class="car_list">
-			<view class="car_item" @longpress="deleteCar(index)" v-for="(item,index) in cartList" :key="index">
-				<view class="check_label"  @click="checkedItem(index)" >
-					<image class="checkbox" :src="item.checked?'../../static/icon/checked.png':'../../static/icon/checkbox.png'" ></image>
-				</view>
-				<view class="box_left">
-					<navigator :url="'/pages/product/index?product_id='+item.product_id" >
-						<image class="car_image" :src="item.thumb" mode=""></image>
-					</navigator>
-				</view>
-				<view class="box_center">
-					<navigator :url="'/pages/product/index?product_id='+item.product_id" class="car_name">{{item.name}}</navigator>
-					<navigator :url="'/pages/product/index?product_id='+item.product_id" class="car_spec">{{item.spec}}</navigator>
-          <view v-if="item.promo_title" class="promo_title">{{item.promo_title}}</view>
-					<navigator :url="'/pages/product/index?product_id='+item.product_id"  class="car_price">
-						<text class="price">￥{{item.price}}</text>
-						<text class="market_price">￥{{item.market_price}}</text>
-					</navigator>
-				</view>
-				<view class="box_right">
-					<view class="buy_num_box">
-						<button class="buy_num_sub" @click="changeQuantity(index,-1)" data-eventsync="true">
-							<image class="sub_icon" src="../../static/icon/sub_icon.png" mode=""></image>
-						</button>
-						<input type="number" class="buy_num" placeholder="数量" v-model="item.buy_num" @blur="changeQuantity(index,0)" />
-						<button class="buy_num_add" @click="changeQuantity(index,+1)" data-eventsync="true">
-							<image class="add_icon" src="../../static/icon/add_icon.png" mode=""></image>
-						</button>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="to_bottom" > -----到底啦-----</view>
-		<view class="bottom_box">
-			<view class="check_all_label" @click="checkAll()">
-				<image class="checkbox" :src="checkedAll?'../../static/icon/checked.png':'../../static/icon/checkbox.png'" ></image>
-				<text class="checkall">全选</text>
-			</view>
-			<view class="price_box">
-				合计：<text class="price_total">￥{{priceTotal}}</text>
-			</view>
-			<view class="to_order" @click="toOrder()" >预约</view>
-		</view>
-	</view>
+  <view>
+    <view class="car_list">
+      <view @longpress="deleteCar(index)" v-for="(item, index) in cartList" :key="index" style="margin-bottom: 20rpx">
+        <SwipeAction @clickItem="clickItem" :index="index" ref="swipeAction">
+          <view class="car_item">
+            <view class="check_label" @click="checkedItem(index)">
+              <image class="checkbox" :src="item.checked ? '../../static/icon/checked.png' : '../../static/icon/checkbox.png'"></image>
+            </view>
+            <view class="box_left">
+              <navigator :url="'/pages/product/index?product_id=' + item.product_id">
+                <image class="car_image" :src="item.thumb" mode=""></image>
+              </navigator>
+            </view>
+            <view class="box_center">
+              <navigator :url="'/pages/product/index?product_id=' + item.product_id" class="car_name">{{ item.name }}</navigator>
+              <navigator :url="'/pages/product/index?product_id=' + item.product_id" class="car_spec">{{ item.spec }}</navigator>
+              <view v-if="item.promo_title" class="promo_title">{{ item.promo_title }}</view>
+              <navigator :url="'/pages/product/index?product_id=' + item.product_id" class="car_price">
+                <text class="price">￥{{ item.price }}</text>
+                <text class="market_price">￥{{ item.market_price }}</text>
+              </navigator>
+            </view>
+            <view class="box_right">
+              <view class="buy_num_box">
+                <button class="buy_num_sub" @click="changeQuantity(index, -1)" data-eventsync="true">
+                  <image class="sub_icon" src="../../static/icon/sub_icon.png" mode=""></image>
+                </button>
+                <input type="number" class="buy_num" placeholder="数量" v-model="item.buy_num" @blur="changeQuantity(index, 0)" />
+                <button class="buy_num_add" @click="changeQuantity(index, +1)" data-eventsync="true">
+                  <image class="add_icon" src="../../static/icon/add_icon.png" mode=""></image>
+                </button>
+              </view>
+            </view>
+          </view>
+        </SwipeAction>
+      </view>
+    </view>
+    <Empty v-if="!cartList.length" text="----- 还没有产品啦 -----" />
+    <view class="to_bottom" v-if="cartList.length"> -----到底啦-----</view>
+    <view class="bottom_box">
+      <view class="check_all_label" @click="checkAll()">
+        <image class="checkbox" :src="checkedAll ? '../../static/icon/checked.png' : '../../static/icon/checkbox.png'"></image>
+        <text class="checkall">全选</text>
+      </view>
+      <view class="price_box">
+        合计：<text class="price_total">￥{{ priceTotal }}</text>
+      </view>
+      <view class="to_order" @click="toOrder()">预约</view>
+    </view>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				// 购物车列表
-				cartList:[],
-				// 请求参数
-				requestParam:{},
-				// 是否全选
-				checkedAll:false,
-				// 总价
-				priceTotal:'0.00',
-				// 是否请求中
-				isReqing:false,
-			}
-		},
-		onLoad() {
-			// #ifdef MP-WEIXIN
-			//分享按钮
-			uni.showShareMenu({
-				withShareTicket: true,
-				menus: ['shareAppMessage', 'shareTimeline']
-			})
-			// #endif
-		},
-		onShareAppMessage(obj) {
-			// 获取分享信息
-			let shareList 	= getApp().globalData.shareList;
-			// 获取分享信息
-			let shareObj	= {
-								title: '药优惠 得积分 兑豪礼',
-								path: '/pages/index/index',
-								imageUrl:'',
-							};
-			// 循环列表
-			for ( let i in shareList ) {
-				if( shareList[i].pages == 'pages/car/index' ) {
-					shareObj.path  = shareList[i].path ? shareList[i].path : shareObj.path ;
-					shareObj.title  = shareList[i].title ? shareList[i].title : shareObj.title ;
-					shareObj.imageUrl  = shareList[i].image_url ? shareList[i].image_url : shareObj.imageUrl ;
-				}
-			}
-			// 返回分享信息
-			return shareObj;
-		},
-		onShow() {
-			// 登录提示
-			if( !this.$checkAccess.alterLogin() )  return ;
-			// 请求中，不允许刷新
-			if( this.isReqing )		return ;
-			// 设置请求中
-			this.isReqing			= true;
-			// 非全选
-			this.checkedAll			= 0;
-			// 请求列表
-			this.$http.request('api/shop_cart/get_list',this.requestParam).then((re)=>{
-				// 设置非请求中
-				this.isReqing		= false;
-				// 成功结果
-				if( re.code == 'success' ){
-					// 赋值
-					this.cartList = re.data;
-					// 计算价格
-					this.priceHandler();
-				}
-			});
-		},
-		onPullDownRefresh() {
-			// 登录提示
-			if( !this.$checkAccess.alterLogin() )  return ;
-			// 请求列表
-			this.$http.request('api/shop_cart/get_list',this.requestParam).then((re)=>{
-				if( re.code == 'success' ){
-					// 赋值
-					this.cartList = re.data;
-					// 计算价格
-					this.priceHandler();
-				}
-			});
-			uni.stopPullDownRefresh();
-		},
-		onReachBottom() {
-			
-		},
-		methods: {
-			// 数量调整
-			changeQuantity(index,number){
-				// 如果不是0.表示两侧按钮点击，0表示输入的修改
-				if( number != 0 ) {
-					// 计算个数
-					this.cartList[index].buy_num = this.cartList[index].buy_num + number;
-				}
-				// 如果大于库存
-				if( this.cartList[index].buy_num > this.cartList[index].stock ) {
-					// 设置为库存
-					this.cartList[index].buy_num = this.cartList[index].stock;
-					// 提示
-					uni.showToast({
-						title:"购买数量不能大于库存",
-						icon:"none",
-					})
-					return ;
-				}
-				// 如果小于1.设置为1
-				if( this.cartList[index].buy_num < 1 ) {
-					// 恢复1
-					this.cartList[index].buy_num = 1;
-					// 提示
-					uni.showToast({
-						title:"数量不可小于1",
-						icon:"none",
-					})
-					return ;
-				}
-				// 请求列表
-				this.$http.request('api/shop_cart/edit',{id:this.cartList[index].id,buy_num:this.cartList[index].buy_num}).then((re)=>{
-					if( re.code == 'success' ){
-						// 计算价格
-						this.priceHandler();
-					}else{
-						uni.showToast({
-							title: re.msg,
-							icon:"none"
-						})
-					}
-				});
-			},
-			// 删除购物车
-			deleteCar(index){
-				uni.showModal({
-					title:"是否删除？",
-					success: (re) => {
-						if(re.confirm){
-							// 请求列表
-							this.$http.request('api/shop_cart/del',{id:this.cartList[index].id}).then((re)=>{
-								// 如果删除成功的话
-								if( re.code == 'success' ){
-									this.cartList.splice(index,1);
-									// 计算价格
-									this.priceHandler();
-								}
-							});
-						}
-					}
-				})
-			},
-			checkedItem(index){
-				// 默认全选
-				let checkedAll = 1;
-				// 单个设置选中/未选
-				this.cartList[index].checked = this.cartList[index].checked ? 0 : 1;
-				// 循环处理
-				for (let i in this.cartList) {
-					// 有未选的就不做全选
-					if( !this.cartList[i].checked ) checkedAll = 0;
-				}
-				// 全选赋值
-				this.checkedAll  = checkedAll;
-				// 计算价格
-				this.priceHandler();
-			},
-			checkAll(){
-				// 设置全选/单选
-				this.checkedAll  = this.checkedAll ? 0 : 1;
-				// 循环处理
-				for (let index in this.cartList) {
-					this.cartList[index].checked = this.checkedAll;
-				}
-				// 计算价格
-				this.priceHandler();
-			},
-			priceHandler(){
-				// 总价格
-				let priceTotal 	= 0;
-				// 循环处理
-				for (let index in this.cartList) {
-					// 如果选中的
-					if( this.cartList[index].checked ){
-						priceTotal = this.$decimal.add(priceTotal,this.$decimal.mul(this.cartList[index].price,this.cartList[index].buy_num));
-					}
-				}
-				// 小数点处理
-				this.priceTotal = priceTotal.toFixed(2);
-			},
-			toOrder(){
-				// 等待支付的信息
-				let waitList = [];
-				// 循环处理
-				for (let index in this.cartList) {
-					// 如果选中的
-					if( this.cartList[index].checked ){
-						// 如果库存不足
-						if( this.cartList[index].buy_num < 1 ){
-							uni.showToast({icon:"none",title:"选择的产品至少需要1个"})
-							return ;
-						}
-						// 如果库存不足
-						if( this.cartList[index].buy_num > this.cartList[index].stock  ){
-							uni.showToast({icon:"none",title:"产品库存不足"})
-							return ;
-						}
-						waitList.push(this.cartList[index].id);
-					}
-				}
-				// 如果没有选择
-				if( !waitList.length ) {
-					uni.showToast({icon:"none",title:"请选择需要结算的产品"})
-					return ;
-				}
-				// 如果没有选择
-				if( waitList.length > 99 ) {
-					uni.showToast({icon:"none",title:"这么多产品一个预约单写不下哦"})
-					return ;
-				}
-				uni.navigateTo({
-					url:"/pages/car/order?cart_ids="+waitList.join(',')
-				})
-			}
-		}
-	}
+import Empty from "@/components/Empty/Empty.vue";
+import SwipeAction from "@/components/SwipeAction/SwipeAction.vue";
+export default {
+  components: { Empty, SwipeAction },
+  data() {
+    return {
+      // 购物车列表
+      cartList: [],
+      // 请求参数
+      requestParam: {},
+      // 是否全选
+      checkedAll: false,
+      // 总价
+      priceTotal: "0.00",
+      // 是否请求中
+      isReqing: false,
+    };
+  },
+  onLoad() {
+    // #ifdef MP-WEIXIN
+    //分享按钮
+    uni.showShareMenu({
+      withShareTicket: true,
+      menus: ["shareAppMessage", "shareTimeline"],
+    });
+    // #endif
+  },
+  onShareAppMessage(obj) {
+    // 获取分享信息
+    let shareList = getApp().globalData.shareList;
+    // 获取分享信息
+    let shareObj = {
+      title: "药优惠 得积分 兑豪礼",
+      path: "/pages/index/index",
+      imageUrl: "",
+    };
+    // 循环列表
+    for (let i in shareList) {
+      if (shareList[i].pages == "pages/car/index") {
+        shareObj.path = shareList[i].path ? shareList[i].path : shareObj.path;
+        shareObj.title = shareList[i].title ? shareList[i].title : shareObj.title;
+        shareObj.imageUrl = shareList[i].image_url ? shareList[i].image_url : shareObj.imageUrl;
+      }
+    }
+    // 返回分享信息
+    return shareObj;
+  },
+  onShow() {
+    // 登录提示
+    if (!this.$checkAccess.alterLogin()) return;
+    // 请求中，不允许刷新
+    if (this.isReqing) return;
+    // 设置请求中
+    this.isReqing = true;
+    // 非全选
+    this.checkedAll = 0;
+    // 请求列表
+    this.$http.request("api/shop_cart/get_list", this.requestParam).then((re) => {
+      // 设置非请求中
+      this.isReqing = false;
+      // 成功结果
+      if (re.code == "success") {
+        // 赋值
+        this.cartList = re.data;
+        // 计算价格
+        this.priceHandler();
+      }
+    });
+  },
+  onPullDownRefresh() {
+    // 登录提示
+    if (!this.$checkAccess.alterLogin()) return;
+    // 请求列表
+    this.$http.request("api/shop_cart/get_list", this.requestParam).then((re) => {
+      if (re.code == "success") {
+        // 赋值
+        this.cartList = re.data;
+        // 计算价格
+        this.priceHandler();
+      }
+    });
+    uni.stopPullDownRefresh();
+  },
+  onReachBottom() {},
+  methods: {
+    // 数量调整
+    changeQuantity(index, number) {
+      // 如果不是0.表示两侧按钮点击，0表示输入的修改
+      if (number != 0) {
+        // 计算个数
+        this.cartList[index].buy_num = this.cartList[index].buy_num + number;
+      }
+      // 如果大于库存
+      if (this.cartList[index].buy_num > this.cartList[index].stock) {
+        // 设置为库存
+        this.cartList[index].buy_num = this.cartList[index].stock;
+        // 提示
+        uni.showToast({
+          title: "购买数量不能大于库存",
+          icon: "none",
+        });
+        return;
+      }
+      // 如果小于1.设置为1
+      if (this.cartList[index].buy_num < 1) {
+        // 恢复1
+        this.cartList[index].buy_num = 1;
+        // 提示
+        uni.showToast({
+          title: "数量不可小于1",
+          icon: "none",
+        });
+        return;
+      }
+      // 请求列表
+      this.$http.request("api/shop_cart/edit", { id: this.cartList[index].id, buy_num: this.cartList[index].buy_num }).then((re) => {
+        if (re.code == "success") {
+          // 计算价格
+          this.priceHandler();
+        } else {
+          uni.showToast({
+            title: re.msg,
+            icon: "none",
+          });
+        }
+      });
+    },
+    // 删除购物车
+    deleteCar(index) {
+      uni.showModal({
+        title: "是否删除？",
+        success: (re) => {
+          if (re.confirm) {
+            // 请求列表
+            this.$http.request("api/shop_cart/del", { id: this.cartList[index].id }).then((re) => {
+              // 如果删除成功的话
+              if (re.code == "success") {
+                this.cartList.splice(index, 1);
+                // 计算价格
+                this.priceHandler();
+                if (this.$refs.swipeAction.length) {
+                  this.$refs.swipeAction[this.$refs.swipeAction.length - 1]?.reset();
+                }
+              }
+            });
+          } else {
+            this.$refs.swipeAction[this.$refs.swipeAction.length - 1]?.reset();
+          }
+        },
+      });
+    },
+    checkedItem(index) {
+      // 默认全选
+      let checkedAll = 1;
+      // 单个设置选中/未选
+      this.cartList[index].checked = this.cartList[index].checked ? 0 : 1;
+      // 循环处理
+      for (let i in this.cartList) {
+        // 有未选的就不做全选
+        if (!this.cartList[i].checked) checkedAll = 0;
+      }
+      // 全选赋值
+      this.checkedAll = checkedAll;
+      // 计算价格
+      this.priceHandler();
+    },
+    checkAll() {
+      // 设置全选/单选
+      this.checkedAll = this.checkedAll ? 0 : 1;
+      // 循环处理
+      for (let index in this.cartList) {
+        this.cartList[index].checked = this.checkedAll;
+      }
+      // 计算价格
+      this.priceHandler();
+    },
+    priceHandler() {
+      // 总价格
+      let priceTotal = 0;
+      // 循环处理
+      for (let index in this.cartList) {
+        // 如果选中的
+        if (this.cartList[index].checked) {
+          priceTotal = this.$decimal.add(priceTotal, this.$decimal.mul(this.cartList[index].price, this.cartList[index].buy_num));
+        }
+      }
+      // 小数点处理
+      this.priceTotal = priceTotal.toFixed(2);
+    },
+    toOrder() {
+      // 等待支付的信息
+      let waitList = [];
+      // 循环处理
+      for (let index in this.cartList) {
+        // 如果选中的
+        if (this.cartList[index].checked) {
+          // 如果库存不足
+          if (this.cartList[index].buy_num < 1) {
+            uni.showToast({ icon: "none", title: "选择的产品至少需要1个" });
+            return;
+          }
+          // 如果库存不足
+          if (this.cartList[index].buy_num > this.cartList[index].stock) {
+            uni.showToast({ icon: "none", title: "产品库存不足" });
+            return;
+          }
+          waitList.push(this.cartList[index].id);
+        }
+      }
+      // 如果没有选择
+      if (!waitList.length) {
+        uni.showToast({ icon: "none", title: "请选择需要结算的产品" });
+        return;
+      }
+      // 如果没有选择
+      if (waitList.length > 99) {
+        uni.showToast({ icon: "none", title: "这么多产品一个预约单写不下哦" });
+        return;
+      }
+      uni.navigateTo({
+        url: "/pages/car/order?cart_ids=" + waitList.join(","),
+      });
+    },
+    clickItem(e) {
+      this.deleteCar(e.index);
+    },
+  },
+};
 </script>
 
 <style lang="less">
-	.car_list{
-		display: block;
-		overflow: hidden;
-		margin: 0rpx auto;
-		margin-top: 20rpx;
-		.car_item{
-			height: 180rpx;
-			display: block;
-			background: #FFFFFF;
-			margin: 0rpx auto;
-			margin-bottom: 20rpx;
-			padding: 20rpx 0rpx;
-			.check_label{
-				float: left;
-				width: 40rpx;
-				height: 40rpx;
-				display: block;
-				margin-top: 10rpx;
-				padding: 50rpx 20rpx;
-				.checkbox{
-					float: left;
-					width: 40rpx;
-					height: 40rpx;
-				}
-			}
-			.box_left{
-				float: left;
-				width: 140rpx;
-				height: 200rpx;
-				margin-top: 10rpx;
-				.car_image{
-					width: 140rpx;
-					height: 140rpx;
-					border-radius: 5rpx;
-				}
-			}
-			.box_center{
-				float: left;
-				width: 300rpx;
-				margin-left: 25rpx;
-				.car_name{
-					max-height: 60rpx;
-					font-size: 30rpx;
-					line-height: 30rpx;
-					overflow: hidden;
-          white-space: nowrap; /* 不换行 */
-          overflow: hidden; /* 隐藏超出的内容 */
-          text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
-				}
-        .promo_title{
-          max-height: 80rpx;
-          font-size: 20rpx;
-          line-height: 40rpx;
-          overflow: hidden;
+.car_list {
+  display: block;
+  overflow: hidden;
+  margin: 0rpx auto;
+  margin-top: 20rpx;
+  .car_item {
+    height: 180rpx;
+    display: block;
+    background: #ffffff;
+    margin: 0rpx auto;
+    margin-bottom: 20rpx;
+    padding: 20rpx 0rpx 0;
+    position: relative;
+    .delete_btn {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 80px;
+      background-color: #f44336;
+      color: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .swipe-content {
+      transition: transform 0.3s ease;
+    }
+    .check_label {
+      float: left;
+      width: 40rpx;
+      height: 40rpx;
+      display: block;
+      margin-top: 10rpx;
+      padding: 50rpx 20rpx;
+      .checkbox {
+        float: left;
+        width: 40rpx;
+        height: 40rpx;
+      }
+    }
+    .box_left {
+      float: left;
+      width: 140rpx;
+      height: 200rpx;
+      margin-top: 10rpx;
+      .car_image {
+        width: 140rpx;
+        height: 140rpx;
+        border-radius: 5rpx;
+      }
+    }
+    .box_center {
+      float: left;
+      width: 300rpx;
+      margin-left: 25rpx;
+      .car_name {
+        max-height: 60rpx;
+        font-size: 30rpx;
+        line-height: 30rpx;
+        overflow: hidden;
+        white-space: nowrap; /* 不换行 */
+        overflow: hidden; /* 隐藏超出的内容 */
+        text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
+      }
+      .promo_title {
+        max-height: 80rpx;
+        font-size: 20rpx;
+        line-height: 40rpx;
+        overflow: hidden;
+        padding: 0rpx 0rpx;
+        color: #dd524d;
+      }
+      .car_spec {
+        color: #999999;
+        font-size: 24rpx;
+        max-height: 60rpx;
+        line-height: 60rpx;
+        overflow: hidden;
+      }
+      .car_price {
+        font-size: 30rpx;
+        line-height: 60rpx;
+        .price {
+          color: red;
+        }
+        .market_price {
+          font-size: 24rpx;
+          color: #999999;
+          margin-left: 10rpx;
+          padding-left: 10rpx;
+          text-decoration: line-through;
+          border-left: 2rpx solid #dddddd;
+        }
+      }
+    }
+    .box_right {
+      float: right;
+      width: 185rpx;
+      padding-right: 15rpx;
+      .buy_num_box {
+        float: right;
+        color: #333333;
+        overflow: hidden;
+        font-size: 24rpx;
+        margin-top: 70rpx;
+        text-align: center;
+        .buy_num_sub {
+          float: left;
+          border: none;
+          height: 36rpx;
+          background: none;
+          text-align: center;
+          line-height: 36rpx;
+          padding: 10rpx 10rpx;
+          .sub_icon {
+            width: 22rpx;
+            height: 22rpx;
+            display: block;
+          }
+        }
+        .buy_num_sub::after {
+          border: none;
+          background: none;
+        }
+        .buy_num {
+          float: left;
+          width: 90rpx;
+          height: 36rpx;
+          font-size: 24rpx;
+          min-height: 36rpx;
+          line-height: 36rpx;
           padding: 0rpx 0rpx;
-          color: #dd524d;
+          border-radius: 8rpx;
+          border: 2rpx solid #dddddd;
+        }
+        .buy_num_add {
+          float: left;
+          border: none;
+          height: 36rpx;
+          background: none;
+          text-align: center;
+          padding: 10rpx 10rpx;
+          line-height: 36rpx;
+          .add_icon {
+            width: 22rpx;
+            height: 22rpx;
+            display: block;
+          }
+        }
+        .buy_num_add::after {
+          border: none;
+          background: none;
         }
-				.car_spec{
-					color: #999999;
-					font-size: 24rpx;
-					max-height: 60rpx;
-					line-height: 60rpx;
-					overflow: hidden;
-				}
-				.car_price{
-					font-size: 30rpx;
-					line-height: 60rpx;
-					.price{
-						color: red;
-					}
-					.market_price{
-						font-size: 24rpx;
-						color: #999999;
-						margin-left: 10rpx;
-						padding-left: 10rpx;
-						text-decoration: line-through;
-						border-left: 2rpx solid #DDDDDD;
-					}
-				}
-			}
-			.box_right{
-				float: right;
-				width: 185rpx;
-				.buy_num_box{
-					float: right;
-					color: #333333;
-					overflow: hidden;
-					font-size: 24rpx;
-					margin-top: 70rpx;
-					text-align: center;
-					.buy_num_sub{
-						float: left;
-						border: none;
-						height: 36rpx;
-						background: none;
-						text-align: center;
-						line-height: 36rpx;
-						padding: 10rpx 10rpx;
-						.sub_icon{
-							width: 22rpx;
-							height: 22rpx;
-							display: block;
-						}
-					}
-					.buy_num_sub::after{
-						border: none;
-						background: none;
-					}
-					.buy_num{
-						float: left;
-						width: 90rpx;
-						height: 36rpx;
-						font-size: 24rpx;
-						min-height: 36rpx;
-						line-height: 36rpx;
-						padding: 0rpx 0rpx;
-						border-radius: 8rpx;
-						border: 2rpx solid #dddddd;
-					}
-					.buy_num_add{
-						float: left;
-						border: none;
-						height: 36rpx;
-						background: none;
-						text-align: center;
-						padding: 10rpx 10rpx;
-						line-height: 36rpx;
-						.add_icon{
-							width: 22rpx;
-							height: 22rpx;
-							display: block;
-						}
-					}
-					.buy_num_add::after{
-						border: none;
-						background: none;
-					}
-				}
-			}
-		}
-	}
-	.bottom_box{
-		z-index: 9;
-		left: 0rpx;
-		width: 100%;
-		height: 100rpx;
-		display: block;
-		position: fixed;
-		overflow: hidden;
-		background: #FFFFFF;
-		padding: 0rpx 35rpx;
-		bottom: var(--window-bottom);
-		.check_all_label{
-			float: left;
-			width: 120rpx;
-			height: 40rpx;
-			font-size: 24rpx;
-			line-height: 40rpx;
-			padding: 30rpx 0rpx;
-			.checkbox{
-				float: left;
-				width: 40rpx;
-				height: 40rpx;
-			}
-			.checkbox.active{
-				border: 2rpx solid red;
-				.checkbox_active{
-					background-color: #E03519;
-				}
-			}
-			.checkall{
-				float: left;
-				height: 40rpx;
-				display: block;
-				margin-left: 10rpx;
-				line-height: 40rpx;
-			}
-		}
-		.price_box{
-			float: left;
-			width: 400rpx;
-			display: block;
-			color: #666666;
-			font-size: 26rpx;
-			text-align: right;
-			line-height: 100rpx;
-			margin-right: 20rpx;
-			.price_total{
-				color: red;
-				font-size: 30rpx;
-			}
-		}
-		.to_order{
-			float: left;
-			width: 140rpx;
-			height: 60rpx;
-			display: block;
-			color: #FFFFFF;
-			font-size: 28rpx;
-			margin-top: 20rpx;
-			line-height: 60rpx;
-			padding: 0rpx 0rpx;
-			text-align: center;
-			border-radius: 30rpx;
-			background-color: #E03519;
-		}
-	}
+      }
+    }
+  }
+}
+.bottom_box {
+  z-index: 9;
+  left: 0rpx;
+  width: 100%;
+  height: 100rpx;
+  display: block;
+  position: fixed;
+  overflow: hidden;
+  background: #ffffff;
+  padding: 0rpx 35rpx;
+  bottom: var(--window-bottom);
+  .check_all_label {
+    float: left;
+    width: 120rpx;
+    height: 40rpx;
+    font-size: 24rpx;
+    line-height: 40rpx;
+    padding: 30rpx 0rpx;
+    .checkbox {
+      float: left;
+      width: 40rpx;
+      height: 40rpx;
+    }
+    .checkbox.active {
+      border: 2rpx solid red;
+      .checkbox_active {
+        background-color: #e03519;
+      }
+    }
+    .checkall {
+      float: left;
+      height: 40rpx;
+      display: block;
+      margin-left: 10rpx;
+      line-height: 40rpx;
+    }
+  }
+  .price_box {
+    float: left;
+    width: 400rpx;
+    display: block;
+    color: #666666;
+    font-size: 26rpx;
+    text-align: right;
+    line-height: 100rpx;
+    margin-right: 20rpx;
+    .price_total {
+      color: red;
+      font-size: 30rpx;
+    }
+  }
+  .to_order {
+    float: left;
+    width: 140rpx;
+    height: 60rpx;
+    display: block;
+    color: #ffffff;
+    font-size: 28rpx;
+    margin-top: 20rpx;
+    line-height: 60rpx;
+    padding: 0rpx 0rpx;
+    text-align: center;
+    border-radius: 30rpx;
+    background-color: #e03519;
+  }
+}
 </style>

pages/index/index.vue

@@ -1,405 +1,408 @@
 <template>
-	<view>
-		<!-- 轮播图 -->
-		<view class="banner_box" >
-			<view class="banner_list" v-if="bannerList.length">
-				<swiper class="banner_swiper" :autoplay="true" >
-					<swiper-item v-for="(item,index) in bannerList" :key="index">
-						<image :src="item.thumb" class="image" @click="navLottery(item.link_url)"></image>
-					</swiper-item>
-				</swiper>
-			</view>
-		</view>
-		<view class="product_box">
-			<view class="to_bottom" v-if="!productList.length"> -----还没有产品啦-----</view>
-			<!-- 产品列表 -->
-			<view class="product_list" >
-				<!-- Vue3 项目部分小程序端事件延迟或调用失败 在执行事件的元素上添加 data-eventsync="true" 属性以解决此问题 -->
-				<view @click="toDetail(item)" data-eventsync="true" class="product_item" v-for="(item,index) in productList" :key="index" >
-					<image class="product_image" :src="item.thumb" mode=""></image>
-					<view class="product_name">
-            <text v-if="item.promo_title" class="regiment_title">{{item.promo_title}}</text>
-            <text v-if="item.regiment_title" class="regiment_title">{{item.regiment_title}}</text>
-            <text>{{item.name}}</text></view>
-					<view class="product_spec"><text>{{item.spec}}</text></view>
-					<view class="stock_price">
-						<view class="product_price" v-if="isShowPrice">
-							<text >￥{{item.price}} </text>
-						</view>
-						<view class="product_stock">剩{{item.stock}}个</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="search_fixed" >
-			<view class="search_box">
-				<view class="city_name" v-if="!toSelectedCity">
-					<navigator url="/pages/user/info" v-if="isManager" >{{cityName}}</navigator>
-					<text v-if="!isManager" >{{cityName}}</text>
-				</view>
-				<navigator url="/pages/user/info" v-if="toSelectedCity" class="city_name uncheck">选城市</navigator>
-				<input class="search_input" type="text" v-model="requestParam.name" @input="searchChange" placeholder="请输入产品名称搜索" />
-				<button class="search_btn" @click.stop="searchOpen()"  data-eventsync="true"> 搜索</button>
-			</view>
-		</view>
-		<view class="to_bottom" v-if="isLast"> -----{{ !productList.length && toSelectedCity?'请选择您的城市':'到底啦'}}-----</view>
-	</view>
+  <view>
+    <!-- 轮播图 -->
+    <view class="banner_box">
+      <view class="banner_list" v-if="bannerList.length">
+        <swiper class="banner_swiper" :autoplay="true">
+          <swiper-item v-for="(item, index) in bannerList" :key="index">
+            <image :src="item.thumb" class="image" @click="navLottery(item.link_url)"></image>
+          </swiper-item>
+        </swiper>
+      </view>
+    </view>
+    <view class="product_box">
+      <view class="to_bottom" v-if="!productList.length"> -----还没有产品啦-----</view>
+      <!-- 产品列表 -->
+      <view class="product_list">
+        <!-- Vue3 项目部分小程序端事件延迟或调用失败 在执行事件的元素上添加 data-eventsync="true" 属性以解决此问题 -->
+        <view @click="toDetail(item)" data-eventsync="true" class="product_item" v-for="(item, index) in productList" :key="index">
+          <image class="product_image" :src="item.thumb" mode=""></image>
+          <view class="product_name">
+            <text v-if="item.promo_title" class="regiment_title">{{ item.promo_title }}</text>
+            <text v-if="item.regiment_title" class="regiment_title">{{ item.regiment_title }}</text>
+            <text>{{ item.name }}</text></view
+          >
+          <view class="product_spec"
+            ><text>{{ item.spec }}</text></view
+          >
+          <view class="stock_price">
+            <view class="product_price" v-if="isShowPrice">
+              <text>￥{{ item.price }} </text>
+            </view>
+            <view class="product_stock">剩{{ item.stock }}个</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="search_fixed">
+      <view class="search_box">
+        <view class="city_name" v-if="!toSelectedCity">
+          <navigator url="/pages/user/info" v-if="isManager">{{ cityName }}</navigator>
+          <text v-if="!isManager">{{ cityName }}</text>
+        </view>
+        <navigator url="/pages/user/info" v-if="toSelectedCity" class="city_name uncheck">选城市</navigator>
+        <input class="search_input" type="text" v-model="requestParam.name" @input="searchChange" placeholder="请输入产品名称搜索" />
+        <button class="search_btn" @click.stop="searchOpen()" data-eventsync="true">搜索</button>
+      </view>
+    </view>
+    <view class="to_bottom" v-if="isLast"> -----{{ !productList.length && toSelectedCity ? "请选择您的城市" : "到底啦" }}-----</view>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				// 轮播图
-				bannerList:[],
-				// 产品列表
-				productList:[],
-				// 请求参数
-				requestParam:{
-					name:"",
-					page:1,
-				},
-				// 是否最后一页
-				isLast:false,
-				// 是否请求中
-				isReqing:false,
-				// 是否显示价格
-				isShowPrice:false,
-				// 城市名称
-				cityName:"选城市",
-				// 选择城市
-				toSelectedCity:false,
-				// 是否是管理员
-				isManager:false,
-			}
-		},
-		onLoad() {
-			// #ifdef MP-WEIXIN
-			//分享按钮
-			uni.showShareMenu({
-				withShareTicket: true,
-				menus: ['shareAppMessage', 'shareTimeline']
-			})
-			// #endif
-		},
-		onShareAppMessage(obj) {
-			// 获取分享信息
-			let shareList 	= getApp().globalData.shareList;
-			// 获取分享信息
-			let shareObj	= {
-								title: '药优惠 得积分 兑豪礼',
-								path: '/pages/index/index',
-								imageUrl:'',
-							};
-			// 循环列表
-			for ( let i in shareList ) {
-				if( shareList[i].pages == 'pages/index/index' ) {
-					shareObj.path  = shareList[i].path ? shareList[i].path : shareObj.path ;
-					shareObj.title  = shareList[i].title ? shareList[i].title : shareObj.title ;
-					shareObj.imageUrl  = shareList[i].image_url ? shareList[i].image_url : shareObj.imageUrl ;
-				}
-			}
-			// 返回分享信息
-			return shareObj;
-		},
-		onShow() {
-			// 是否显示价格
-			this.isShowPrice 		= this.$checkAccess.checkShowPrice();
-			// 城市名
-			this.cityName			= this.$checkAccess.getCity();
-			// 选城市
-			this.cityName			= this.cityName ? this.cityName : "选城市",
-			// 登录并且未选择城市，才可以选择城市
-			this.toSelectedCity 	= !this.$checkAccess.getCity() ? true : false;
-			// 数据
-			this.isManager			= this.$checkAccess.isManager();
-			// 没有数据的话，或者请求中，不允许刷新
-			if( this.isReqing )		return ;
-			// 获取列表
-			this.$http.request("/api/banner/get_list").then((re)=>{
-				if(re.code === "success"){
-					this.bannerList = re.data;
-				}
-			})
-			// 请求参数
-			this.requestParam.name	= "";
-			// 请求参数
-			this.requestParam.page	= 1;
-			// 是否是最后一页
-			this.isLast			 	= false;
-			// 设置请求中
-			this.isReqing			= true;
-			// 请求
-			this.$http.request('api/product/get_list',this.requestParam).then((re)=>{
-				// 设置非请求中
-				this.isReqing		= false;
-				// 成功结果
-				if( re.code == 'success' ){
-					if(re.data.last_page <= this.requestParam.page ) this.isLast = true;
-					this.productList = re.data.data;
-				}
-			});
-		},
-		onPullDownRefresh() {
-			// 如果请求中，不允许请求，
-			if( this.isReqing )		return false;
-			// 初始化页码为1
-			this.requestParam.page	= 1;
-			// 是否是最后一页
-			this.isLast			 	= false;
-			// 设置请求中
-			this.isReqing			= true;
-			// 请求列表
-			this.$http.request('api/product/get_list',this.requestParam).then((re)=>{
-				// 设置非请求中
-				this.isReqing		= false;
-				// 成功结果
-				if( re.code == 'success' ){
-					if(re.data.last_page <= this.requestParam.page ) this.isLast = true;
-					this.productList = re.data.data;
-				}
-			});
-			uni.stopPullDownRefresh();
-		},
-		onReachBottom() {
-			// 如果页码是0，避免第一页重复
-			if( this.requestParam.page < 1 ) return;
-			// 最后一页不再请求
-			if( this.isLast ) 	return;
-			// 请求中，不再请求
-			if( this.isReqing ) return;
-			// 增加一页
-			this.requestParam.page = this.requestParam.page+1;
-			// 设置请求中
-			this.isReqing			= true;
-			// 请求列表
-			this.$http.request('api/product/get_list',this.requestParam).then((re)=>{
-				// 设置非请求中
-				this.isReqing		= false;
-				// 成功结果
-				if( re.code == 'success' ){
-					// 最后一页
-					if(re.data.last_page <= this.requestParam.page ) this.isLast = true;
-					// 追加数据
-					this.productList.push(...re.data.data);
-				}
-			});
-		},
-		methods: {
-			searchChange(e){
-				// 如果没有搜索词
-				if( !this.requestParam.name ){
-					this.searchOpen();
-				}
-			},
-			searchOpen(){
-				// 请求中，不再请求
-				if( this.isReqing ) 	return;
-				// 是否是最后一页
-				this.isLast			 	= false;
-				// 初始化页码为1
-				this.requestParam.page	= 1;
-				// 设置请求中
-				this.isReqing			= true;
-				// 请求列表
-				this.$http.request('api/product/get_list',this.requestParam).then((re)=>{
-					// 设置非请求中
-					this.isReqing		= false;
-					// 成功结果
-					if( re.code == 'success' ){
-						this.productList = re.data.data;
-						if( re.data.data.length && re.data.last_page >= this.requestParam.page ) this.isLast = true;
-					}
-				});
-			},
-			toDetail(item){
-				uni.navigateTo({
-					url:"/pages/product/index?product_id="+item.id,
-				})
-			},
-			navLottery(url){
-				// 没有路径，不跳转
-				if( !url )	return;
-				// 判断是不是小程序链接
-				if( url.includes('http') ){
-					// 转码
-					let link_url = encodeURIComponent(url);
-					// 跳转到webview
-					uni.redirectTo({
-						url:`/pages/webview/index?link_url=${link_url}`
-					})
-				}else{
-					// 跳转到webview
-					uni.navigateTo({
-						url:url
-					})
-				}
-			}
-		}
-	}
+export default {
+  data() {
+    return {
+      // 轮播图
+      bannerList: [],
+      // 产品列表
+      productList: [],
+      // 请求参数
+      requestParam: {
+        name: "",
+        page: 1,
+      },
+      // 是否最后一页
+      isLast: false,
+      // 是否请求中
+      isReqing: false,
+      // 是否显示价格
+      isShowPrice: false,
+      // 城市名称
+      cityName: "选城市",
+      // 选择城市
+      toSelectedCity: false,
+      // 是否是管理员
+      isManager: false,
+    };
+  },
+  onLoad() {
+    // #ifdef MP-WEIXIN
+    //分享按钮
+    uni.showShareMenu({
+      withShareTicket: true,
+      menus: ["shareAppMessage", "shareTimeline"],
+    });
+    // #endif
+  },
+  onShareAppMessage(obj) {
+    // 获取分享信息
+    let shareList = getApp().globalData.shareList;
+    // 获取分享信息
+    let shareObj = {
+      title: "药优惠 得积分 兑豪礼",
+      path: "/pages/index/index",
+      imageUrl: "",
+    };
+    // 循环列表
+    for (let i in shareList) {
+      if (shareList[i].pages == "pages/index/index") {
+        shareObj.path = shareList[i].path ? shareList[i].path : shareObj.path;
+        shareObj.title = shareList[i].title ? shareList[i].title : shareObj.title;
+        shareObj.imageUrl = shareList[i].image_url ? shareList[i].image_url : shareObj.imageUrl;
+      }
+    }
+    // 返回分享信息
+    return shareObj;
+  },
+  onShow() {
+    // 是否显示价格
+    this.isShowPrice = this.$checkAccess.checkShowPrice();
+    // 城市名
+    this.cityName = this.$checkAccess.getCity();
+    // 选城市
+    (this.cityName = this.cityName ? this.cityName : "选城市"),
+      // 登录并且未选择城市，才可以选择城市
+      (this.toSelectedCity = !this.$checkAccess.getCity() ? true : false);
+    // 数据
+    this.isManager = this.$checkAccess.isManager();
+    // 没有数据的话，或者请求中，不允许刷新
+    if (this.isReqing) return;
+    // 获取列表
+    this.$http.request("/api/banner/get_list").then((re) => {
+      if (re.code === "success") {
+        this.bannerList = re.data;
+      }
+    });
+    // 请求参数
+    this.requestParam.name = "";
+    // 请求参数
+    this.requestParam.page = 1;
+    // 是否是最后一页
+    this.isLast = false;
+    // 设置请求中
+    this.isReqing = true;
+    // 请求
+    this.$http.request("api/product/get_list", this.requestParam).then((re) => {
+      // 设置非请求中
+      this.isReqing = false;
+      // 成功结果
+      if (re.code == "success") {
+        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
+        this.productList = re.data.data;
+      }
+    });
+  },
+  onPullDownRefresh() {
+    // 如果请求中，不允许请求，
+    if (this.isReqing) return false;
+    // 初始化页码为1
+    this.requestParam.page = 1;
+    // 是否是最后一页
+    this.isLast = false;
+    // 设置请求中
+    this.isReqing = true;
+    // 请求列表
+    this.$http.request("api/product/get_list", this.requestParam).then((re) => {
+      // 设置非请求中
+      this.isReqing = false;
+      // 成功结果
+      if (re.code == "success") {
+        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
+        this.productList = re.data.data;
+      }
+    });
+    uni.stopPullDownRefresh();
+  },
+  onReachBottom() {
+    // 如果页码是0，避免第一页重复
+    if (this.requestParam.page < 1) return;
+    // 最后一页不再请求
+    if (this.isLast) return;
+    // 请求中，不再请求
+    if (this.isReqing) return;
+    // 增加一页
+    this.requestParam.page = this.requestParam.page + 1;
+    // 设置请求中
+    this.isReqing = true;
+    // 请求列表
+    this.$http.request("api/product/get_list", this.requestParam).then((re) => {
+      // 设置非请求中
+      this.isReqing = false;
+      // 成功结果
+      if (re.code == "success") {
+        // 最后一页
+        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
+        // 追加数据
+        this.productList.push(...re.data.data);
+      }
+    });
+  },
+  methods: {
+    searchChange(e) {
+      // 如果没有搜索词
+      if (!this.requestParam.name) {
+        this.searchOpen();
+      }
+    },
+    searchOpen() {
+      // 请求中，不再请求
+      if (this.isReqing) return;
+      // 是否是最后一页
+      this.isLast = false;
+      // 初始化页码为1
+      this.requestParam.page = 1;
+      // 设置请求中
+      this.isReqing = true;
+      // 请求列表
+      this.$http.request("api/product/get_list", this.requestParam).then((re) => {
+        // 设置非请求中
+        this.isReqing = false;
+        // 成功结果
+        if (re.code == "success") {
+          this.productList = re.data.data;
+          if (re.data.data.length && re.data.last_page >= this.requestParam.page) this.isLast = true;
+        }
+      });
+    },
+    toDetail(item) {
+      uni.navigateTo({
+        url: "/pages/product/index?product_id=" + item.id,
+      });
+    },
+    navLottery(url) {
+      // 没有路径，不跳转
+      if (!url) return;
+      // 判断是不是小程序链接
+      if (url.includes("http")) {
+        // 转码
+        let link_url = encodeURIComponent(url);
+        // 跳转到webview
+        uni.redirectTo({
+          url: `/pages/webview/index?link_url=${link_url}`,
+        });
+      } else {
+        // 跳转到webview
+        uni.navigateTo({
+          url: url,
+        });
+      }
+    },
+  },
+};
 </script>
 
 <style lang="less">
-	.search_fixed{
-		top: var(--window-top);
-		left: 0rpx;
-		width: 750rpx;
-		display: block;
-		position: fixed;
-		margin: 0rpx auto;
-		padding: 20rpx 0rpx;
-		background-color: #FFFFFF;
-		.search_box{
-			width: 750rpx;
-			height: 60rpx;
-			display: block;
-			position: relative;
-			.city_name{
-				float: left;
-				width: 80rpx;
-				height: 60rpx;
-				display: block;
-				font-size: 24rpx;
-				overflow: hidden;
-				margin-left: 35rpx;
-				line-height: 60rpx;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-			}
-			.city_name.uncheck{
-				color: #E03519;
-			}
-			.search_input{
-				z-index: 0;
-				float: left;
-				width: 510rpx;
-				height: 56rpx;
-				display: block;
-				font-size: 24rpx;
-				padding-left: 20rpx;
-				position: relative;
-				border-top-left-radius: 40rpx;
-				border-bottom-left-radius: 40rpx;
-				border: 2rpx solid #dddddd;
-			}
-			.search_btn{
-				top: 0rpx;
-				z-index: 9;
-				left: 610rpx;
-				color: #FFFFFF;
-				position: absolute;
-				display: block;
-				width: 120rpx;
-				height: 60rpx;
-				font-size: 24rpx;
-				margin: 0rpx 0rpx;
-				padding: 0rpx 0rpx;
-				line-height: 60rpx;
-				border-radius: 40rpx;
-				background-color: #E03519;
-			}
-		}
-	}
-	.banner_box{
-		width: 680rpx;
-		display: block;
-		overflow: hidden;
-		margin: 0rpx auto;
-		margin-top: 120rpx;
-		.banner_list{
-			display: block;
-			width: 680rpx;
-			height: 382rpx;
-			line-height: 382rpx;
-			text-align: center;
-			.banner_swiper{
-				display: block;
-				width: 680rpx;
-				height: 382rpx;
-				line-height: 382rpx;
-				text-align: center;
-				.image{
-					width: 680rpx;
-					height: 382rpx;
-				}
-			}
-		}
-	}
-	.product_box{
-		display: block;
-		overflow: hidden;
-		margin: 20rpx auto;
-		padding: 0rpx 35rpx;
-		.product_list{
-			display: block;
-			overflow: hidden;
-			margin: 0rpx auto;
-			.product_item{
-				float: left;
-				width: 320rpx;
-				height: 520rpx;
-				display: block;
-				overflow: hidden;
-				margin: 20rpx 0rpx;
-				margin-right: 40rpx;
-				background-color: #FFFFFF;
-				border-radius: 20rpx;
-				.product_image{
-					width: 320rpx;
-					height: 320rpx;
-				}
-				.product_name{
-					height: 80rpx;
-					font-size: 30rpx;
-					line-height: 40rpx;
-					overflow: hidden;
-					margin: 10rpx 0rpx;
-					padding: 0rpx 10rpx;
-					text-overflow: ellipsis;
-          .regiment_title{
-            background-color: red;
-            color: #F9F9F9;
+.search_fixed {
+  top: var(--window-top);
+  left: 0rpx;
+  width: 750rpx;
+  display: block;
+  position: fixed;
+  margin: 0rpx auto;
+  padding: 20rpx 0rpx;
+  background-color: #ffffff;
+  .search_box {
+    width: 750rpx;
+    height: 60rpx;
+    display: block;
+    position: relative;
+    .city_name {
+      float: left;
+      width: 80rpx;
+      height: 60rpx;
+      display: block;
+      font-size: 24rpx;
+      overflow: hidden;
+      margin-left: 35rpx;
+      line-height: 60rpx;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .city_name.uncheck {
+      color: #e03519;
+    }
+    .search_input {
+      z-index: 0;
+      float: left;
+      width: 510rpx;
+      height: 56rpx;
+      display: block;
+      font-size: 24rpx;
+      padding-left: 20rpx;
+      position: relative;
+      border-top-left-radius: 40rpx;
+      border-bottom-left-radius: 40rpx;
+      border: 2rpx solid #dddddd;
+    }
+    .search_btn {
+      top: 0rpx;
+      z-index: 9;
+      left: 610rpx;
+      color: #ffffff;
+      position: absolute;
+      display: block;
+      width: 120rpx;
+      height: 60rpx;
+      font-size: 24rpx;
+      margin: 0rpx 0rpx;
+      padding: 0rpx 0rpx;
+      line-height: 60rpx;
+      border-radius: 40rpx;
+      background-color: #e03519;
+    }
+  }
+}
+.banner_box {
+  width: 680rpx;
+  display: block;
+  overflow: hidden;
+  margin: 0rpx auto;
+  margin-top: 120rpx;
+  .banner_list {
+    display: block;
+    width: 680rpx;
+    height: 382rpx;
+    line-height: 382rpx;
+    text-align: center;
+    .banner_swiper {
+      display: block;
+      width: 680rpx;
+      height: 382rpx;
+      line-height: 382rpx;
+      text-align: center;
+      .image {
+        width: 680rpx;
+        height: 382rpx;
+      }
+    }
+  }
+}
+.product_box {
+  display: block;
+  overflow: hidden;
+  margin: 20rpx auto;
+  padding: 0rpx 35rpx;
+  .product_list {
+    display: block;
+    overflow: hidden;
+    margin: 0rpx auto;
+    .product_item {
+      float: left;
+      width: 320rpx;
+      height: 520rpx;
+      display: block;
+      overflow: hidden;
+      margin: 20rpx 0rpx;
+      margin-right: 40rpx;
+      background-color: #ffffff;
+      border-radius: 20rpx;
+      .product_image {
+        width: 320rpx;
+        height: 320rpx;
+      }
+      .product_name {
+        height: 80rpx;
+        font-size: 30rpx;
+        line-height: 40rpx;
+        overflow: hidden;
+        margin: 10rpx 0rpx;
+        padding: 0rpx 10rpx;
+        text-overflow: ellipsis;
+        .regiment_title {
+          background-color: red;
+          color: #f9f9f9;
+        }
+      }
+      .product_spec {
+        height: 30rpx;
+        color: #999999;
+        font-size: 24rpx;
+        line-height: 30rpx;
+        padding: 0rpx 10rpx;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .stock_price {
+        color: #dddddd;
+        font-size: 20rpx;
+        overflow: hidden;
+        line-height: 30rpx;
+        padding: 0rpx 10rpx;
+        .product_price {
+          float: left;
+          color: red;
+          font-size: 30rpx;
+          line-height: 60rpx;
+          .product_market {
+            font-size: 24rpx;
+            color: #999999;
+            line-height: 30rpx;
+            vertical-align: top;
+            text-decoration: line-through;
           }
-				}
-				.product_spec{
-					height: 30rpx;
-					color: #999999;
-					font-size: 24rpx;
-					line-height: 30rpx;
-					padding: 0rpx 10rpx;
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
-				}
-				.stock_price{
-					color: #dddddd;
-					font-size: 20rpx;
-					overflow: hidden;
-					line-height: 30rpx;
-					padding: 0rpx 10rpx;
-					.product_price{
-						float: left;
-						color: red;
-						font-size: 30rpx;
-						line-height: 60rpx;
-						.product_market{
-							font-size: 24rpx;
-							color: #999999;
-							line-height: 30rpx;
-							vertical-align: top;
-							text-decoration: line-through;
-						}
-					}
-					.product_stock{
-						float: right;
-						font-size: 20rpx;
-						line-height: 60rpx;
-					}
-				}
-			}
-			.product_item:nth-child(even){
-				margin-right: 0rpx;
-			}
-		}
-	}
+        }
+        .product_stock {
+          float: right;
+          font-size: 20rpx;
+          line-height: 60rpx;
+        }
+      }
+    }
+    .product_item:nth-child(even) {
+      margin-right: 0rpx;
+    }
+  }
+}
 </style>