From 1b141d02568460f394e79e17e02179994c5c3201 Mon Sep 17 00:00:00 2001
From: Gao xiaosong <704041637@qq.com>
Date: Wed, 9 Jun 2021 23:13:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=BA=E4=BD=A0=E6=8E=A8?=
 =?UTF-8?q?=E8=8D=90=E6=98=BE=E7=A4=BA=E6=97=A7=E4=BB=B7=E6=A0=BC=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/PromotionGood.vue          | 411 +++++++++++++-------------
 pages/user/promotion/Poster/index.vue | 286 +++++++++---------
 2 files changed, 350 insertions(+), 347 deletions(-)

diff --git a/components/PromotionGood.vue b/components/PromotionGood.vue
index 59852ca..c909b3a 100644
--- a/components/PromotionGood.vue
+++ b/components/PromotionGood.vue
@@ -1,215 +1,212 @@
 <template>
-	<view>
-		<view class="sh-title-card mb10">
-			<view class="title-box">
-				<image class="title-bg" :src="`${$VUE_APP_RESOURCES_URL}/images/title1.png`" mode="aspectFill" />
-				<view class="title-text">为你推荐</view>
-				<!-- <view class="title-text" :style="{ color: detail.color }">为你推荐</view> -->
-			</view>
-		</view>
-		<view class="hot-goods mx20 mb10" v-if="benefit.length">
-			<view class="goods-list x-f">
-				<view class="goods-item" v-for="(item, promotionGoodIndex) in benefit" :key="promotionGoodIndex">
-					<view class="goods-box" @tap="routerGo(item)">
-						<view class="img-box">
-							<!-- <image class="tag-img" :src="item.image" mode=""></image> -->
-							<image class="img" :src="item.image" lazy-load mode="aspectFill"></image>
-						</view>
-						<view class="tip one-t">{{ item.storeName }}</view>
-						<view class="title more-t">{{ item.storeName }}</view>
-						<view class="price-box">
-							<view class="flex x-bc align-end">
-								<view class="current">{{ item.activity_type === 'groupon' ? item.price : item.otPrice }}
-								</view>
-								<view class="sales miso-font">仅剩：{{ item.stock }}{{ item.unitName }}</view>
-							</view>
-							<view class="x-f tag-box">
-								<!-- <view class="discount">新人礼</view>
+  <view>
+    <view class="sh-title-card mb10">
+      <view class="title-box">
+        <image class="title-bg" :src="`${$VUE_APP_RESOURCES_URL}/images/title1.png`" mode="aspectFill" />
+        <view class="title-text">为你推荐</view>
+        <!-- <view class="title-text" :style="{ color: detail.color }">为你推荐</view> -->
+      </view>
+    </view>
+    <view class="hot-goods mx20 mb10" v-if="benefit.length">
+      <view class="goods-list x-f">
+        <view class="goods-item" v-for="(item, promotionGoodIndex) in benefit" :key="promotionGoodIndex">
+          <view class="goods-box" @tap="routerGo(item)">
+            <view class="img-box">
+              <!-- <image class="tag-img" :src="item.image" mode=""></image> -->
+              <image class="img" :src="item.image" lazy-load mode="aspectFill"></image>
+            </view>
+            <view class="tip one-t">{{ item.storeName }}</view>
+            <view class="title more-t">{{ item.storeName }}</view>
+            <view class="price-box">
+              <view class="flex x-bc align-end">
+                <view class="current">{{ item.price }} </view>
+                <view class="sales miso-font">仅剩：{{ item.stock }}{{ item.unitName }}</view>
+              </view>
+              <view class="x-f tag-box">
+                <!-- <view class="discount">新人礼</view>
 					<view class="discount">满100减60</view> -->
-							</view>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
-
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 <script>
-	export default {
-		name: 'PromotionGood',
-		props: ['benefit'],
-		data: function () {
-			return {};
-		},
-		methods: {
-			routerGo(item) {
-				this.$yrouter.push({
-					path: '/pages/shop/GoodsCon/index',
-					query: {
-						id: item.id
-					}
-				});
-			}
-		},
-		mounted() {
-    }
-	};
+export default {
+  name: 'PromotionGood',
+  props: ['benefit'],
+  data: function() {
+    return {}
+  },
+  methods: {
+    routerGo(item) {
+      this.$yrouter.push({
+        path: '/pages/shop/GoodsCon/index',
+        query: {
+          id: item.id,
+        },
+      })
+    },
+  },
+  mounted() {},
+}
 </script>
 
 <style lang="scss">
-	.sh-title-card {
-		width: 750rpx;
-	}
-
-	.title-box {
-		width: 710rpx;
-		height: 88rpx;
-		margin: 0 auto;
-		position: relative;
-		border-radius: 30rpx;
-
-		.title-bg {
-			width: 100%;
-			height: 100%;
-		}
-
-		.title-text {
-			position: absolute;
-			top: 50%;
-			left: 50%;
-			transform: translate(-50%, -50%);
-			font-weight: bold;
-		}
-	}
-
-	.goods-box {
-		width: 345rpx;
-		background: #fff;
-		padding-bottom: 20rpx;
-		border-radius: 20rpx;
-		overflow: hidden;
-
-		.img-box {
-			width: 345rpx;
-			height: 345rpx;
-			overflow: hidden;
-			position: relative;
-
-			.tag-img {
-				position: absolute;
-				left: 0;
-				top: 0;
-				z-index: 2;
-				width: 80rpx;
-				height: 40rpx;
-			}
-
-			.img {
-				width: 345rpx;
-				height: 345rpx;
-				background-color: #ccc;
-			}
-		}
-
-		.tip {
-			width: 346rpx;
-			line-height: 56rpx;
-			background: rgba(246, 242, 234, 1);
-			font-size: 22rpx;
-			font-family: PingFang SC;
-			font-weight: 400;
-			color: rgba(168, 112, 13, 1);
-			padding: 0 20rpx;
-		}
-
-		.title {
-			font-size: 24rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
-			line-height: 36rpx;
-			height: 72rpx;
-			margin: 20rpx 20rpx 10rpx;
-		}
-
-		.price-box {
-			padding: 10rpx 20rpx 0;
-			width: 344rpx;
-			box-sizing: border-box;
-
-			.sales {
-				font-size: 20rpx;
-				font-family: PingFang SC;
-				font-weight: 400;
-				color: rgba(153, 153, 153, 1);
-				line-height: 20rpx;
-				margin-bottom: 20rpx;
-			}
-
-			.current {
-				font-size: 30rpx;
-				font-weight: 500;
-				color: rgba(225, 33, 43, 1);
-				line-height: 30rpx;
-				margin-bottom: 20rpx;
-
-				&:before {
-					content: '￥';
-					font-size: 26rpx;
-				}
-			}
-
-			.original {
-				font-size: 22rpx;
-				font-weight: 400;
-				text-decoration: line-through;
-				color: rgba(153, 153, 153, 1);
-				margin-left: 14rpx;
-				line-height: 22rpx;
-				margin-bottom: 10rpx;
-
-				&:before {
-					content: '￥';
-					font-size: 20rpx;
-				}
-			}
-
-			.tag-box {
-				.discount {
-					line-height: 28rpx;
-					border: 1rpx solid rgba(225, 33, 43, 1);
-					border-radius: 8rpx;
-					font-size: 18rpx;
-					font-family: PingFang SC;
-					font-weight: 500;
-					color: rgba(225, 33, 43, 1);
-					padding: 0 8rpx;
-					margin-right: 10rpx;
-				}
-			}
-		}
-	}
-
-	// 为你推荐
-	.hot-goods {
-		// background: linear-gradient(#fff 200rpx, #f6f6f6 500rpx, #f6f6f6);
-		// border-radius: 20rpx;
-
-		.goods-list {
-			flex-wrap: wrap;
-			width: 710rpx;
-
-			.goods-item {
-				margin-right: 20rpx;
-				margin-bottom: 20rpx;
-				width: 345rpx;
-				box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
-				border-radius: 20rpx;
-
-				&:nth-child(2n) {
-					margin-right: 0;
-				}
-			}
-		}
-	}
+.sh-title-card {
+  width: 750rpx;
+}
+
+.title-box {
+  width: 710rpx;
+  height: 88rpx;
+  margin: 0 auto;
+  position: relative;
+  border-radius: 30rpx;
+
+  .title-bg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .title-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-weight: bold;
+  }
+}
+
+.goods-box {
+  width: 345rpx;
+  background: #fff;
+  padding-bottom: 20rpx;
+  border-radius: 20rpx;
+  overflow: hidden;
+
+  .img-box {
+    width: 345rpx;
+    height: 345rpx;
+    overflow: hidden;
+    position: relative;
+
+    .tag-img {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 2;
+      width: 80rpx;
+      height: 40rpx;
+    }
+
+    .img {
+      width: 345rpx;
+      height: 345rpx;
+      background-color: #ccc;
+    }
+  }
+
+  .tip {
+    width: 346rpx;
+    line-height: 56rpx;
+    background: rgba(246, 242, 234, 1);
+    font-size: 22rpx;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: rgba(168, 112, 13, 1);
+    padding: 0 20rpx;
+  }
+
+  .title {
+    font-size: 24rpx;
+    font-family: PingFang SC;
+    font-weight: 500;
+    line-height: 36rpx;
+    height: 72rpx;
+    margin: 20rpx 20rpx 10rpx;
+  }
+
+  .price-box {
+    padding: 10rpx 20rpx 0;
+    width: 344rpx;
+    box-sizing: border-box;
+
+    .sales {
+      font-size: 20rpx;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: rgba(153, 153, 153, 1);
+      line-height: 20rpx;
+      margin-bottom: 20rpx;
+    }
+
+    .current {
+      font-size: 30rpx;
+      font-weight: 500;
+      color: rgba(225, 33, 43, 1);
+      line-height: 30rpx;
+      margin-bottom: 20rpx;
+
+      &:before {
+        content: '￥';
+        font-size: 26rpx;
+      }
+    }
+
+    .original {
+      font-size: 22rpx;
+      font-weight: 400;
+      text-decoration: line-through;
+      color: rgba(153, 153, 153, 1);
+      margin-left: 14rpx;
+      line-height: 22rpx;
+      margin-bottom: 10rpx;
+
+      &:before {
+        content: '￥';
+        font-size: 20rpx;
+      }
+    }
+
+    .tag-box {
+      .discount {
+        line-height: 28rpx;
+        border: 1rpx solid rgba(225, 33, 43, 1);
+        border-radius: 8rpx;
+        font-size: 18rpx;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: rgba(225, 33, 43, 1);
+        padding: 0 8rpx;
+        margin-right: 10rpx;
+      }
+    }
+  }
+}
+
+// 为你推荐
+.hot-goods {
+  // background: linear-gradient(#fff 200rpx, #f6f6f6 500rpx, #f6f6f6);
+  // border-radius: 20rpx;
+
+  .goods-list {
+    flex-wrap: wrap;
+    width: 710rpx;
+
+    .goods-item {
+      margin-right: 20rpx;
+      margin-bottom: 20rpx;
+      width: 345rpx;
+      box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
+      border-radius: 20rpx;
+
+      &:nth-child(2n) {
+        margin-right: 0;
+      }
+    }
+  }
+}
 </style>
diff --git a/pages/user/promotion/Poster/index.vue b/pages/user/promotion/Poster/index.vue
index ff2ea9d..e827724 100644
--- a/pages/user/promotion/Poster/index.vue
+++ b/pages/user/promotion/Poster/index.vue
@@ -13,160 +13,166 @@
   </view>
 </template>
 <script>
-  // import { swiper, swiperSlide } from "vue-awesome-swiper";
-  import {
-    getSpreadImg
-  } from "@/api/user";
+// import { swiper, swiperSlide } from "vue-awesome-swiper";
+import { getSpreadImg } from '@/api/user'
 
-  export default {
-    name: "Poster",
-    components: {
-      // swiper,
-      // swiperSlide
-    },
-    props: {},
-    data: function () {
-      return {
-        swiperPosters: {
-          speed: 1000,
-          effect: "coverflow",
-          slidesPerView: "auto",
-          centeredSlides: true,
-          coverflowEffect: {
-            rotate: 0, // 旋转的角度
-            stretch: -20, // 拉伸   图片间左右的间距和密集度
-            depth: 100, // 深度   切换图片间上下的间距和密集度
-            modifier: 3, // 修正值 该值越大前面的效果越明显
-            slideShadows: false // 页面阴影效果
-          },
-          observer: true,
-          observeParents: true
+export default {
+  name: 'Poster',
+  components: {
+    // swiper,
+    // swiperSlide
+  },
+  props: {},
+  data: function() {
+    return {
+      swiperPosters: {
+        speed: 1000,
+        effect: 'coverflow',
+        slidesPerView: 'auto',
+        centeredSlides: true,
+        coverflowEffect: {
+          rotate: 0, // 旋转的角度
+          stretch: -20, // 拉伸   图片间左右的间距和密集度
+          depth: 100, // 深度   切换图片间上下的间距和密集度
+          modifier: 3, // 修正值 该值越大前面的效果越明显
+          slideShadows: false, // 页面阴影效果
         },
-        info: [],
-        activeIndex: 0
-      };
-    },
-    mounted: function () {
-      this.getIndex();
-      let that = this;
-      // this.swiper.on("slideChange", function() {
-      //   that.activeIndex = that.swiper.activeIndex;
-      // });
+        observer: true,
+        observeParents: true,
+      },
+      info: [],
+      activeIndex: 0,
+    }
+  },
+  mounted: function() {
+    this.getIndex()
+    let that = this
+    // this.swiper.on("slideChange", function() {
+    //   that.activeIndex = that.swiper.activeIndex;
+    // });
+  },
+  computed: {
+    swiper() {
+      // return this.$refs.mySwiper.swiper;
     },
-    computed: {
-      swiper() {
-        // return this.$refs.mySwiper.swiper;
-      }
+  },
+  methods: {
+    getIndex: function() {
+      let that = this
+      getSpreadImg({
+        from: this.$deviceType == 'weixin' || this.$deviceType == 'weixinh5' ? 'uniappH5' : this.$deviceType,
+      }).then(
+        res => {
+          that.info = res.data
+        },
+        err => {
+          uni.showToast({
+            title: err.msg || err.response.data.msg || err.response.data.message,
+            icon: 'none',
+            duration: 2000,
+          })
+        }
+      )
     },
-    methods: {
-      getIndex: function () {
-        let that = this;
-        getSpreadImg({
-          from: this.$deviceType == 'weixin' || this.$deviceType == 'weixinh5' ? 'uniappH5' : this.$deviceType
-        }).then(
-          res => {
-            that.info = res.data;
-          },
-          err => {
-            uni.showToast({
-              title: err.msg || err.response.data.msg || err.response.data.message,
-              icon: "none",
-              duration: 2000
-            });
-          }
-        );
-      },
-      downloadIamge (imgsrc, name) {
-        var that = this;
-        this.isDown = true;
-        var downloadUrl = imgsrc;
+    downloadIamge(imgsrc, name) {
+      var that = this
+      this.isDown = true
+      var downloadUrl = imgsrc
 
-        if (!wx.saveImageToPhotosAlbum) {
-          uni.showModal({
-            title: "提示",
-            content: "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。"
-          });
-          that.openDialogVisible = true;
+      // if (!wx.saveImageToPhotosAlbum) {
+      //   uni.showModal({
+      //     title: '提示',
+      //     content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。',
+      //   })
+      //   that.openDialogVisible = true
 
-          return;
-        }
+      //   return
+      // }
 
-        // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.writePhotosAlbum" 这个 scope
-        wx.getSetting({
-          success(res) {
-            if (!res.authSetting["scope.writePhotosAlbum"]) {
-              that.openDialogVisible = true;
+      that.downloadFile(downloadUrl)
 
-              // 接口调用询问
-              wx.authorize({
-                scope: "scope.writePhotosAlbum",
-                success() {
-                  that.downloadFile(downloadUrl);
-                },
-                fail() {
-                  // 用户拒绝了授权
-                  // 打开设置页面
-                  wx.openSetting({
-                    success: function (data) {},
-                    fail: function (data) {}
-                  });
-                }
-              });
-            } else {
-              that.downloadFile(downloadUrl);
-            }
-          },
-          fail(res) {
-            that.openDialogVisible = true;
-          }
-        });
-      },
-      saveImg: function () {
-        this.downloadIamge(
-          this.info[this.activeIndex].wap_poster,
-          "poster" + this.activeIndex
-        );
-      },
-      downloadFile(url){
-        uni.downloadFile({
-          url,
-          fail: function(res) {
-            uni.showModal({
-            title: "提示",
-            content: "保存失败"
-          });
-          },
-          success: function(res) {
-            uni.showModal({
-            title: "提示",
-            content: "保存成功"
-          });
-          }
-        });
-      }
-    }
-  };
+      // 可以通过 uni.getSetting 先查询一下用户是否授权了 "scope.writePhotosAlbum" 这个 scope
+      // uni.getSetting({
+      //   success(res) {
+      //     if (!res.authSetting["scope.writePhotosAlbum"]) {
+      //       that.openDialogVisible = true;
+
+      //       // 接口调用询问
+      //       uni.authorize({
+      //         scope: "scope.writePhotosAlbum",
+      //         success() {
+      //           that.downloadFile(downloadUrl);
+      //         },
+      //         fail() {
+      //           // 用户拒绝了授权
+      //           // 打开设置页面
+      //           uni.openSetting({
+      //             success: function (data) {},
+      //             fail: function (data) {}
+      //           });
+      //         }
+      //       });
+      //     } else {
+      //       that.downloadFile(downloadUrl);
+      //     }
+      //   },
+      //   fail(res) {
+      //     that.openDialogVisible = true;
+      //   }
+      // });
+    },
+    saveImg: function() {
+      this.downloadIamge(this.info[this.activeIndex].wap_poster, 'poster' + this.activeIndex)
+    },
+    downloadFile(url) {
+      uni.downloadFile({
+        url,
+        fail: function(res) {
+          uni.showModal({
+            title: '提示',
+            content: '保存失败',
+          })
+        },
+        success: function(res) {
+          uni.showModal({
+            title: '提示',
+            content: '保存成功',
+          })
+        },
+      })
+    },
+  },
+}
 </script>
 
 <style lang="less">
-  page {
-    height: 100%;
-  }
+page {
+  height: 100%;
+}
 
-  .distribution-posters {
-    height: 100%;
-  }
+.distribution-posters {
+  height: 100%;
+}
 
-  .banenr {
-    height: 100%;
-  }
+.banenr {
+  height: 100%;
+}
 
-  .banner swiper {
-    height: 100%;
-  }
+.banner swiper {
+  height: 100%;
+}
 
-  .banner .slide-image {
-    width: 100%;
-    height: auto;
+.banner .slide-image {
+  width: 100%;
+  height: auto;
+}
+.distribution-posters {
+  .keep {
+    position: absolute;
+    bottom: 60rpx;
+    left: 60rpx;
+    right: 60rpx;
+    width: auto;
   }
+}
 </style>