loumengning
/
shop
1
0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 Commit
3 分支
51 MiB
 
 
 
 
 
 
目錄樹: 697ce4a032
分支列表 標籤列表
${ item.name }
Create branch ${ searchTerm }
from '697ce4a032'
${ noResults }
shop/addons/unishop/uniapp/uni-shop/pages/index/index.vue

1019 line
36 KiB
原始文件 Blame 文件歷史 

  1. <template>

  2. 	<view class="container">

  3. 		<!-- 小程序头部兼容 -->

  4. 		<!-- #ifdef MP -->

  5. 		<!-- <view class="mp-search-box"><input class="ser-input" type="text" value="输入关键字搜索" disabled /></view> -->

  6. 		<!-- #endif -->

  7. 

  8. 		<!-- 头部轮播 -->

  9. 		<view class="carousel-section">

  10. 			<!-- 标题栏和状态栏占位符 -->

  11. 			<view class="titleNview-placing"></view>

  12. 			<!-- 背景色区域 -->

  13. 			<view class="titleNview-background" :style="{ backgroundColor: titleNViewBackground }"></view>

  14. 			<swiper class="carousel" circular @change="swiperChange">

  15. 				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="navToDetailPage({ product_id: item.product_id })">

  16. 					<image mode="aspectFill" :src="item.image" />

  17. 				</swiper-item>

  18. 			</swiper>

  19. 			<!-- 自定义swiper指示器 -->

  20. 			<view class="swiper-dots">

  21. 				<text class="num">{{ swiperCurrent + 1 }}</text>

  22. 				<text class="sign">/</text>

  23. 				<text class="num">{{ swiperLength }}</text>

  24. 			</view>

  25. 		</view>

  26. 		<!-- 分类 -->

  27. <!-- 		<view class="cate-section">

  28. 			<view class="cate-item" v-for="(item, index) in menu" :key="index" @click="navToList(item.id)">

  29. 				<image :src="item.image" ></image>

  30. 				<text>{{item.name}}</text>

  31. 			</view>

  32. 		</view> -->

  33. 		<!-- 秒杀楼层 -->

  34. 		<view class="seckill-section m-t" v-if="flashSale && flashSale.product.length > 0">

  35. 			<view class="s-header" @click="navTo('/pages/flash/list')">

  36. 				<image class="s-img" src="/static/temp/secskill-img.jpg" mode="widthFix"></image>

  37. 				<!-- <text class="tip">{{(new Date(flashSale.starttime*1000)).getHours()}}点场</text> -->

  38. 				<text class="tip" v-if="flashSale.countdown" >下一场倒计时</text>

  39. 				<text class="tip" v-else>{{flashSale.title}}</text>

  40. 				<uni-countdown ref="countd" v-if="flashSale.countdown" @timeup="timeup" :show-day="flashSale.countdown.day ? true : false" :day="day" :hour="hour" :minute="minute" :second="second" color="#FFFFFF" background-color="#00B26A" border-color="#00B26A" ></uni-countdown>

  41. 				<text class="yticon icon-you"></text>

  42. 			</view>

  43. 			<scroll-view class="floor-list" scroll-x>

  44. 				<view class="scoll-wrapper">

  45. 					<view v-for="(item, index) in flashSale.product" :key="index" class="floor-item" @click="navToDetailPage({ product_id: item.flash_product_id }, flashSale.flash_id)">

  46. 						<image :src="item.image" mode="aspectFill"></image>

  47. 						<text class="title clamp">{{item.title }}</text>

  48. 						<text class="price">￥{{item.sales_price }}</text>

  49. 					</view>

  50. 				</view>

  51. 			</scroll-view>

  52. 		</view>

  53. 

  54. 		<!-- 团购楼层 -->

  55. 		<!-- <view class="f-header m-t">

  56. 			<image src="/static/temp/h1.png"></image>

  57. 			<view class="tit-box">

  58. 				<text class="tit">精品团购</text>

  59. 				<text class="tit2">Boutique Group Buying</text>

  60. 			</view>

  61. 			<text class="yticon icon-you"></text>

  62. 		</view> -->

  63. 		<!-- <view class="group-section">

  64. 			<swiper class="g-swiper" :duration="500">

  65. 				<swiper-item class="g-swiper-item" v-for="(item, index) in goodsList" :key="index" v-if="index % 2 === 0" @click="navToDetailPage(item)">

  66. 					<view class="g-item left">

  67. 						<image :src="item.image" mode="aspectFill"></image>

  68. 						<view class="t-box">

  69. 							<text class="title clamp">{{ item.title }}</text>

  70. 							<view class="price-box">

  71. 								<text class="price">￥{{ item.price }}</text>

  72. 								<text class="m-price">￥188</text>

  73. 							</view>

  74. 

  75. 							<view class="pro-box">

  76. 								<view class="progress-box"><progress percent="72" activeColor="#fa436a" active stroke-width="6" /></view>

  77. 								<text>6人成团</text>

  78. 							</view>

  79. 						</view>

  80. 					</view>

  81. 					<view class="g-item right">

  82. 						<image :src="goodsList[index + 1].image" mode="aspectFill"></image>

  83. 						<view class="t-box">

  84. 							<text class="title clamp">{{ goodsList[index + 1].title }}</text>

  85. 							<view class="price-box">

  86. 								<text class="price">￥{{ goodsList[index + 1].price }}</text>

  87. 								<text class="m-price">￥188</text>

  88. 							</view>

  89. 							<view class="pro-box">

  90. 								<view class="progress-box"><progress percent="72" activeColor="#fa436a" active stroke-width="6" /></view>

  91. 								<text>10人成团</text>

  92. 							</view>

  93. 						</view>

  94. 					</view>

  95. 				</swiper-item>

  96. 			</swiper>

  97. 		</view> -->

  98. 

  99. 		<!-- 分类推荐楼层 -->

  100. 		<!-- <view class="f-header m-t">

  101. 			<image src="/static/temp/h1.png"></image>

  102. 			<view class="tit-box">

  103. 				<text class="tit">分类精选</text>

  104. 				<text class="tit2">Competitive Products For You</text>

  105. 			</view>

  106. 			<text class="yticon icon-you"></text>

  107. 		</view> -->

  108. 		<!-- <view class="hot-floor">

  109. 			<view class="floor-img-box">

  110. 				<image

  111. 					class="floor-img"

  112. 					src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553409398864&di=4a12763adccf229133fb85193b7cc08f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201703%2F19%2F20170319150032_MNwmn.jpeg"

  113. 					mode="scaleToFill"

  114. 				></image>

  115. 			</view>

  116. 			<scroll-view class="floor-list" scroll-x>

  117. 				<view class="scoll-wrapper">

  118. 					<view v-for="(item, index) in goodsList" :key="index" class="floor-item" @click="navToDetailPage(item)">

  119. 						<image :src="item.image" mode="aspectFill"></image>

  120. 						<text class="title clamp">{{ item.title }}</text>

  121. 						<text class="price">￥{{ item.price }}</text>

  122. 					</view>

  123. 					<view class="more"> 

  124. 						<text>查看全部</text>

  125. 						<text>More+</text>

  126. 					</view>

  127. 				</view>

  128. 			</scroll-view>

  129. 		</view> -->

  130. 		<!-- <view class="hot-floor">

  131. 			<view class="floor-img-box">

  132. 				<image

  133. 					class="floor-img"

  134. 					src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553409984228&di=dee176242038c2d545b7690b303d65ea&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F5ef4da9f17faaf4612f0d5046f4161e556e9bbcfdb5b-rHjf00_fw658"

  135. 					mode="scaleToFill"

  136. 				></image>

  137. 			</view>

  138. 			<scroll-view class="floor-list" scroll-x>

  139. 				<view class="scoll-wrapper">

  140. 					<view v-for="(item, index) in goodsList" :key="index" class="floor-item" @click="navToDetailPage(item)">

  141. 						<image :src="item.image3" mode="aspectFill"></image>

  142. 						<text class="title clamp">{{ item.title }}</text>

  143. 						<text class="price">￥{{ item.price }}</text>

  144. 					</view>

  145. 					<view class="more">

  146. 						<text>查看全部</text>

  147. 						<text>More+</text>

  148. 					</view>

  149. 				</view>

  150. 			</scroll-view>

  151. 		</view> -->

  152. 		<!-- <view class="hot-floor">

  153. 			<view class="floor-img-box">

  154. 				<image

  155. 					class="floor-img"

  156. 					src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553409794730&di=12b840ec4f5748ef06880b85ff63e34e&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01dc03589ed568a8012060c82ac03c.jpg%40900w_1l_2o_100sh.jpg"

  157. 					mode="scaleToFill"

  158. 				></image>

  159. 			</view>

  160. 			<scroll-view class="floor-list" scroll-x>

  161. 				<view class="scoll-wrapper">

  162. 					<view v-for="(item, index) in goodsList" :key="index" class="floor-item" @click="navToDetailPage(item)">

  163. 						<image :src="item.image2" mode="aspectFill"></image>

  164. 						<text class="title clamp">{{ item.title }}</text>

  165. 						<text class="price">￥{{ item.price }}</text>

  166. 					</view>

  167. 					<view class="more">

  168. 						<text>查看全部</text>

  169. 						<text>More+</text>

  170. 					</view>

  171. 				</view>

  172. 			</scroll-view>

  173. 		</view> -->

  174. 

  175. 		<!-- 猜你喜欢 -->

  176. <!--		<view class="f-header m-t">-->

  177. <!--			<image src="/static/temp/h1.png"></image>-->

  178. <!--			<view class="tit-box">-->

  179. <!--				<text class="tit">猜你喜欢</text>-->

  180. <!--				<text class="tit2">Guess You Like It</text>-->

  181. <!--			</view>-->

  182. <!--			<text class="yticon icon-you"></text>-->

  183. <!--		</view>-->

  184. 

  185. 		<view class="guess-section">

  186. 			<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">

  187. 				<view class="image-wrapper"><image :src="item.image" mode="aspectFill"></image></view>

  188. 				<text class="title clamp">{{ item.title }}</text>

  189. 				<text class="price"><text class="symbol">￥</text> {{ item.sales_price }} <text class="sales"> {{' '+item.sales}}人付款</text></text>

  190. 			</view>

  191. 		</view>

  192. <!--		<view style="text-align: center;margin: 10px 0;	padding-bottom: 170upx;">-->

  193. <!--			<text style="color: #315efb;text-decoration: underline;font-size: 10px" @click="showPolicy">Privacy Policy</text>-->

  194. <!--		</view>-->

  195. 

  196. 

  197. 		<!-- 底部操作菜单 -->

  198. 		<view class="page-bottom">

  199. 			<view class="p-b-btn" @click="showServe(1)">

  200. 				<i class="xbicon">&#xe663;</i>

  201. 				<text>Liên hệ</text>

  202. 			</view>

  203. 			<view class="p-b-btn" @click="showServe(2)">

  204. 				<i class="xbicon">&#xe662;</i>

  205. 				<text>Chính sách bảo mật</text>

  206. 			</view>

  207. 			<view class="p-b-btn" @click="showServe(3)">

  208. 				<i class="xbicon">&#xe629;</i>

  209. 				<text>Hỗ trợ</text>

  210. 			</view>

  211. 

  212. 		</view>

  213. 	</view>

  214. </template>

  215. 

  216. <script>

  217. var _self = this;

  218. import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';

  219. export default {

  220. 	components: {uniCountdown},

  221. 	data() {

  222. 		return {

  223. 			titleNViewBackground: '',

  224. 			swiperCurrent: 0,

  225. 			swiperLength: 0,

  226. 			carouselList: [],

  227. 			goodsList: [],

  228. 			menu:[],

  229. 			flashSale: '',

  230. 			page:1,

  231. 			pageSize: 16,

  232. 			day:0,

  233. 			hour:0,

  234. 			minute:0,

  235. 			second:0

  236. 		};

  237. 	},

  238. 	computed:{

  239. 		

  240. 	},

  241. 	onLoad() {

  242. 		this.loadData();

  243. 	},

  244. 	onReachBottom() {

  245. 		this.getProduct();

  246. 	},

  247. 	onPullDownRefresh() {

  248. 		if (this.$refs && this.$refs.countd) {

  249. 			this.$refs.countd.syncFlag = false;

  250. 		}

  251. 		this.goodsList = [];

  252. 		this.page = 1;

  253. 		this.loadData();

  254. 	},

  255. 	onShareAppMessage(e) {

  256. 		return {

  257. 			title: "MSVENI SHOP",

  258. 		};

  259. 	},

  260. 	methods: {

  261. 		/**

  262. 		 * 请求静态数据只是为了代码不那么乱

  263. 		 * 分次请求未作整合

  264. 		 */

  265. 		loadData() {

  266. 			let that = this;

  267. 			

  268. 			//获取广告图

  269. 			uni.request({

  270. 				url: that.$unishow + '/ads/index',

  271. 				success(res) {

  272. 					let carouselList = res.data.data;

  273. 					that.titleNViewBackground = carouselList[0].background;

  274. 					that.swiperLength = carouselList.length;

  275. 					that.carouselList = carouselList;

  276. 				}

  277. 			});

  278. 			

  279. 			//获取菜单栏

  280. 			uni.request({

  281. 				url: that.$unishow + '/category/menu',

  282. 				success(res) {

  283. 					that.menu = res.data.data;

  284. 				}

  285. 			});

  286. 			

  287. 			uni.stopPullDownRefresh();

  288. 			

  289. 			this.getFlash();

  290. 				

  291. 			this.getProduct();

  292. 		},

  293. 		// 获取产品列表

  294. 		async getProduct() {

  295. 			let goodsList = await this.$api.request('/product/lists', 'GET', {page:this.page, pagesize:this.pageSize});

  296. 			if (goodsList) {

  297. 				if (goodsList.length > 0) {

  298. 					goodsList.forEach(item=>{

  299. 						this.goodsList.push(item);

  300. 					});

  301. 					this.page++;

  302. 				} else {

  303. 					this.$api.msg('没有更多数据');

  304. 				}

  305. 			}

  306. 		},

  307. 		// 获取限时秒杀数据

  308. 		async getFlash() {

  309. 			let data = await this.$api.request('/flash/index');

  310. 			if (data) {

  311. 				this.flashSale = data;

  312. 				this.day = data.countdown.day;

  313. 				this.hour = data.countdown.hour;

  314. 				this.minute = data.countdown.minute;

  315. 				this.second = data.countdown.second;

  316. 				//this.$refs.countd.update();

  317. 			}

  318. 			//console.log(this.$refs)

  319. 		},

  320. 		//轮播图切换修改背景色

  321. 		swiperChange(e) {

  322. 			const index = e.detail.current;

  323. 			this.swiperCurrent = index;

  324. 			this.titleNViewBackground = this.carouselList[index].background;

  325. 		},

  326. 		// 商品详情页

  327. 		navToDetailPage(item, flash_id = 0) {

  328. 			let id = item.product_id;

  329. 			uni.navigateTo({

  330. 				url: `/pages/product/product?id=${id}&flash=${flash_id}`

  331. 			});

  332. 		},

  333. 		/**

  334. 		 * 秒杀倒计时为0时再请求一次接口

  335. 		 */

  336. 		timeup() {

  337. 			this.getFlash();

  338. 		},

  339. 		// 跳转页面

  340. 		navTo(url){

  341. 			uni.navigateTo({  

  342. 				url

  343. 			})  

  344. 		}, 

  345. 		// 跳转到商品列表

  346. 		navToList(fid) {

  347. 			uni.navigateTo({

  348. 				url: `/pages/product/list?fid=${fid}&sid=0`

  349. 			});

  350. 		},

  351. 		showPolicy(){

  352. 			uni.showModal({

  353. 				showCancel: false,

  354. 				title: 'Privacy Policy',

  355. 				content: '"MSVENI" tôn trọng và bảo vệ quyền riêng tư của người dùng. Chính sách bảo mật này sẽ cho bạn biết cách chúng tôi thu thập và sử dụng thông tin về bạn và cách chúng tôi bảo vệ thông tin đó. Trước khi trở thành người dùng "MSVENI", bạn phải đọc chính sách quyền riêng tư này một cách cẩn thận và đồng ý với tất cả các chính sách quyền riêng tư. Các điều khoản của chính sách quyền riêng tư này sẽ có hiệu lực ngay sau khi bạn đăng ký làm người dùng "MSVENI" và sẽ ràng buộc bạn và "MSVENI".\n' +

  356. 					'\n' +

  357. 					'I. Chúng tôi thu thập thông tin người dùng nào\n' +

  358. 					'Thông tin cá nhân: Bao gồm: tên, số điện thoại di động, bằng lái xe, thông tin liên lạc khẩn cấp, hình ảnh, địa chỉ gửi thư, địa điểm, địa chỉ công ty.\n' +

  359. 					'\n' +

  360. 					'Thông tin liên quan đến thiết bị của bạn, chẳng hạn như: gaid, số IMSI, phiên bản Android, thông tin thiết bị điều dưỡng.\n' +

  361. 					'\n' +

  362. 					'Thông tin vị trí (chỉ dành cho các dịch vụ / tính năng đặc biệt): Các loại thông tin khác nhau liên quan đến vị trí của bạn. Ví dụ: mã quốc gia, mã thành phố, mã mạng di động, thông tin vĩ độ và kinh độ để đảm bảo rằng người dùng cung cấp vị trí trong dịch vụ của chúng tôi và đánh giá điểm tín dụng của bạn.\n' +

  363. 					'\n' +

  364. 					'Thông tin ngân hàng: bao gồm tên, số tài khoản, v.v. Chúng tôi cũng thu thập thông tin cá nhân khác và thu thập thông tin việc làm, thông tin của bên thứ ba, v.v. Tất nhiên khi sử dụng một số dịch vụ. Mục đích của việc thu thập thông tin này là để cải thiện các dịch vụ chúng tôi cung cấp cho bạn. Thông tin được cung cấp tùy thuộc vào cách bạn sử dụng nó để tham gia vào các sản phẩm hoặc dịch vụ của chúng tôi. Việc sử dụng dịch vụ của chúng tôi là hoàn toàn tự nguyện và bạn không cần cung cấp thông tin này trừ khi bạn chọn sử dụng dịch vụ của chúng tôi.\n' +

  365. 					'\n' +

  366. 					'Khi sử dụng sản phẩm này, chúng tôi cũng cần bạn cấp các quyền thiết bị sau để bạn có thể sử dụng dịch vụ của chúng tôi tốt hơn.\n' +

  367. 					'- Sổ địa chỉ: Chúng tôi cần có được thông tin liên lạc để xem xét cho vay.\n' +

  368. 					'\n' +

  369. 					'- Quyền camera: Chúng tôi cũng cần sử dụng quyền camera của thiết bị để chụp ảnh ID của bạn để xác nhận danh tính của bạn.\n' +

  370. 					'\n' +

  371. 					'II. Làm thế nào để chúng tôi bảo vệ thông tin người dùng?\n' +

  372. 					'(1) "MSVENI" sử dụng công nghệ mới nhất để bảo vệ thông tin của bạn. Chúng tôi sẽ tuân thủ các điều khoản hiện hành để đảm bảo thông tin của bạn được giữ bí mật và được duy trì và quyền truy cập bị hạn chế để bảo vệ bạn khỏi mọi hình thức lừa đảo. Bạn có trách nhiệm bảo vệ mã truy cập tài khoản và ID người dùng và mật khẩu của mình để đảm bảo rằng những người dùng khác không thể truy cập vào tài khoản của bạn.\n' +

  373. 					'\n' +

  374. 					'(2) Về thông tin của bạn, "MSVENI" đảm bảo tính bảo mật của dữ liệu được truyền qua ứng dụng của chúng tôi. Khi chúng tôi nhận được dữ liệu hoặc thông tin của bạn, chúng tôi sẽ sử dụng các tính năng và quy trình bảo mật để ngăn chặn truy cập trái phép.\n' +

  375. 					'\n' +

  376. 					'(3) "MSVENI" tuân thủ đầy đủ và tuân thủ luật pháp và quy định bảo vệ dữ liệu hiện hành của Việt Nam.\n' +

  377. 					'\n' +

  378. 					'III. Làm thế nào để chúng ta quản lý thông tin người dùng?\n' +

  379. 					'Thông tin chúng tôi thu thập sẽ được lưu trữ và quản lý cho các mục đích sau: Để kiểm tra so sánh giữa thông tin bạn cung cấp và thông tin thực tế, đảm bảo rằng không ai khác sử dụng thông tin đó. Sử dụng danh tính của bạn;\n' +

  380. 					'\n' +

  381. 					'Xác định khả năng của bạn để có được một khoản vay theo các điều khoản hiện có;\n' +

  382. 					'Xác nhận rằng thông tin bạn cung cấp là chính xác trong quá trình đăng ký khoản vay. Nếu khoản vay của bạn được chấp thuận, vui lòng đảm bảo quá trình giao dịch.\n' +

  383. 					'Giải quyết các nghĩa vụ phát sinh từ hợp đồng;\n' +

  384. 					'\n' +

  385. 					'Khi bạn gọi điện hoặc truy cập ứng dụng di động của chúng tôi, vui lòng liên hệ với bạn để tìm hiểu tài khoản của bạn và cung cấp thông tin nhận dạng và cung cấp thông tin cập nhật khi dịch vụ thay đổi. Chúng tôi.\n' +

  386. 					'\n' +

  387. 					'IV. Làm thế nào để chúng tôi bảo vệ thông tin người dùng\n' +

  388. 					'Chúng tôi bảo vệ tất cả thông tin người dùng và sẽ không chia sẻ thông tin người dùng với bên thứ ba trừ khi được người dùng ủy quyền.\n' +

  389. 					'\n' +

  390. 					'"MSVENI" sẽ tiết lộ thông tin cá nhân của người dùng cho các nhà cung cấp dịch vụ, người vay và thành viên nhóm của chúng tôi để giúp chúng tôi thực hiện một số hoạt động kinh doanh. Bao gồm các dịch vụ, thanh toán và thủ tục phòng chống gian lận, "MSVENI" cũng sẽ chia sẻ thông tin về người dùng bên thứ ba với bất kỳ luật pháp và tòa án nào để ngăn chặn tổn thất tài chính và báo cáo hoạt động.\n' +

  391. 					'\n' +

  392. 					'V. Thay đổi chính sách bảo mật\n' +

  393. 					'Chúng tôi sẽ gửi cho bạn một thông báo qua SMS hoặc email về các thay đổi đối với chính sách bảo mật của chúng tôi để bạn có thể xem lại chính sách bảo mật mới.Trong trường hợp đó, nếu bạn tiếp tục sử dụng dịch vụ của chúng tôi, bạn đồng ý bị ràng buộc bởi Chính sách quyền riêng tư sửa đổi này.\n',

  394. 				confirmText: 'OK'

  395. 			})

  396. 		},

  397. 		showServe(flag){

  398. 			if(flag==1){

  399. 				uni.showModal({

  400. 					showCancel: false,

  401. 					showConfirm: false,

  402. 					title: 'Liên hệ',

  403. 					content: 'MSVENI mang đến cho các bạn gái những sản phẩm thời trang mới nhất. Cho dù bạn là ai và chuộng phong cách nào đều có thể hóa thân vào thế giới của riêng mình từ những bộ sưu tập của chúng tôi.\n' +

  404. 						'Các nàng ơi, cùng khoác lên mình những bộ cánh thật xinh đẹp các nàng nhé. \nHotline: 0342261765',

  405. 					confirmText: 'OK',

  406. 					success: (res) => {

  407. 						window.location.href='tel:0342261765'

  408. 					}

  409. 				})

  410. 			}

  411. 			if(flag==2){

  412. 				uni.showModal({

  413. 					showCancel: false,

  414. 					title: 'Chính sách bảo mật',

  415. 					content: '"MSVENI" tôn trọng và bảo vệ quyền riêng tư của người dùng. Chính sách bảo mật này sẽ cho bạn biết cách chúng tôi thu thập và sử dụng thông tin về bạn và cách chúng tôi bảo vệ thông tin đó. Trước khi trở thành người dùng "MSVENI", bạn phải đọc chính sách quyền riêng tư này một cách cẩn thận và đồng ý với tất cả các chính sách quyền riêng tư. Các điều khoản của chính sách quyền riêng tư này sẽ có hiệu lực ngay sau khi bạn đăng ký làm người dùng "MSVENI" và sẽ ràng buộc bạn và "MSVENI".\n' +

  416. 						'\n' +

  417. 						'I. Chúng tôi thu thập thông tin người dùng nào\n' +

  418. 						'Thông tin cá nhân: Bao gồm: tên, số điện thoại di động, bằng lái xe, thông tin liên lạc khẩn cấp, hình ảnh, địa chỉ gửi thư, địa điểm, địa chỉ công ty.\n' +

  419. 						'\n' +

  420. 						'Thông tin liên quan đến thiết bị của bạn, chẳng hạn như: gaid, số IMSI, phiên bản Android, thông tin thiết bị điều dưỡng.\n' +

  421. 						'\n' +

  422. 						'Thông tin vị trí (chỉ dành cho các dịch vụ / tính năng đặc biệt): Các loại thông tin khác nhau liên quan đến vị trí của bạn. Ví dụ: mã quốc gia, mã thành phố, mã mạng di động, thông tin vĩ độ và kinh độ để đảm bảo rằng người dùng cung cấp vị trí trong dịch vụ của chúng tôi và đánh giá điểm tín dụng của bạn.\n' +

  423. 						'\n' +

  424. 						'Thông tin ngân hàng: bao gồm tên, số tài khoản, v.v. Chúng tôi cũng thu thập thông tin cá nhân khác và thu thập thông tin việc làm, thông tin của bên thứ ba, v.v. Tất nhiên khi sử dụng một số dịch vụ. Mục đích của việc thu thập thông tin này là để cải thiện các dịch vụ chúng tôi cung cấp cho bạn. Thông tin được cung cấp tùy thuộc vào cách bạn sử dụng nó để tham gia vào các sản phẩm hoặc dịch vụ của chúng tôi. Việc sử dụng dịch vụ của chúng tôi là hoàn toàn tự nguyện và bạn không cần cung cấp thông tin này trừ khi bạn chọn sử dụng dịch vụ của chúng tôi.\n' +

  425. 						'\n' +

  426. 						'Khi sử dụng sản phẩm này, chúng tôi cũng cần bạn cấp các quyền thiết bị sau để bạn có thể sử dụng dịch vụ của chúng tôi tốt hơn.\n' +

  427. 						'- Sổ địa chỉ: Chúng tôi cần có được thông tin liên lạc để xem xét cho vay.\n' +

  428. 						'\n' +

  429. 						'- Quyền camera: Chúng tôi cũng cần sử dụng quyền camera của thiết bị để chụp ảnh ID của bạn để xác nhận danh tính của bạn.\n' +

  430. 						'\n' +

  431. 						'II. Làm thế nào để chúng tôi bảo vệ thông tin người dùng?\n' +

  432. 						'(1) "MSVENI" sử dụng công nghệ mới nhất để bảo vệ thông tin của bạn. Chúng tôi sẽ tuân thủ các điều khoản hiện hành để đảm bảo thông tin của bạn được giữ bí mật và được duy trì và quyền truy cập bị hạn chế để bảo vệ bạn khỏi mọi hình thức lừa đảo. Bạn có trách nhiệm bảo vệ mã truy cập tài khoản và ID người dùng và mật khẩu của mình để đảm bảo rằng những người dùng khác không thể truy cập vào tài khoản của bạn.\n' +

  433. 						'\n' +

  434. 						'(2) Về thông tin của bạn, "MSVENI" đảm bảo tính bảo mật của dữ liệu được truyền qua ứng dụng của chúng tôi. Khi chúng tôi nhận được dữ liệu hoặc thông tin của bạn, chúng tôi sẽ sử dụng các tính năng và quy trình bảo mật để ngăn chặn truy cập trái phép.\n' +

  435. 						'\n' +

  436. 						'(3) "MSVENI" tuân thủ đầy đủ và tuân thủ luật pháp và quy định bảo vệ dữ liệu hiện hành của Việt Nam.\n' +

  437. 						'\n' +

  438. 						'III. Làm thế nào để chúng ta quản lý thông tin người dùng?\n' +

  439. 						'Thông tin chúng tôi thu thập sẽ được lưu trữ và quản lý cho các mục đích sau: Để kiểm tra so sánh giữa thông tin bạn cung cấp và thông tin thực tế, đảm bảo rằng không ai khác sử dụng thông tin đó. Sử dụng danh tính của bạn;\n' +

  440. 						'\n' +

  441. 						'Xác định khả năng của bạn để có được một khoản vay theo các điều khoản hiện có;\n' +

  442. 						'Xác nhận rằng thông tin bạn cung cấp là chính xác trong quá trình đăng ký khoản vay. Nếu khoản vay của bạn được chấp thuận, vui lòng đảm bảo quá trình giao dịch.\n' +

  443. 						'Giải quyết các nghĩa vụ phát sinh từ hợp đồng;\n' +

  444. 						'\n' +

  445. 						'Khi bạn gọi điện hoặc truy cập ứng dụng di động của chúng tôi, vui lòng liên hệ với bạn để tìm hiểu tài khoản của bạn và cung cấp thông tin nhận dạng và cung cấp thông tin cập nhật khi dịch vụ thay đổi. Chúng tôi.\n' +

  446. 						'\n' +

  447. 						'IV. Làm thế nào để chúng tôi bảo vệ thông tin người dùng\n' +

  448. 						'Chúng tôi bảo vệ tất cả thông tin người dùng và sẽ không chia sẻ thông tin người dùng với bên thứ ba trừ khi được người dùng ủy quyền.\n' +

  449. 						'\n' +

  450. 						'"MSVENI" sẽ tiết lộ thông tin cá nhân của người dùng cho các nhà cung cấp dịch vụ, người vay và thành viên nhóm của chúng tôi để giúp chúng tôi thực hiện một số hoạt động kinh doanh. Bao gồm các dịch vụ, thanh toán và thủ tục phòng chống gian lận, "MSVENI" cũng sẽ chia sẻ thông tin về người dùng bên thứ ba với bất kỳ luật pháp và tòa án nào để ngăn chặn tổn thất tài chính và báo cáo hoạt động.\n' +

  451. 						'\n' +

  452. 						'V. Thay đổi chính sách bảo mật\n' +

  453. 						'Chúng tôi sẽ gửi cho bạn một thông báo qua SMS hoặc email về các thay đổi đối với chính sách bảo mật của chúng tôi để bạn có thể xem lại chính sách bảo mật mới.Trong trường hợp đó, nếu bạn tiếp tục sử dụng dịch vụ của chúng tôi, bạn đồng ý bị ràng buộc bởi Chính sách quyền riêng tư sửa đổi này.\n',

  454. 					confirmText: 'OK'

  455. 				})

  456. 			}

  457. 			if(flag==3){

  458. 				uni.showModal({

  459. 					showCancel: false,

  460. 					title: 'Hỗ trợ',

  461. 					content: 'Đổi trả trong vòng 7 ngày nhận hàng.',

  462. 					confirmText: 'OK'

  463. 				})

  464. 			}

  465. 

  466. 		},

  467. 	},

  468. 	// #ifndef MP

  469. 	// 标题栏input搜索框点击

  470. 	onNavigationBarSearchInputClicked: async function(e) {

  471. 		this.$api.msg('点击了搜索框');

  472. 	},

  473. 	//点击导航栏 buttons 时触发

  474. 	onNavigationBarButtonTap(e) {

  475. 		const index = e.index;

  476. 		if (index === 0) {

  477. 			this.$api.msg('点击了扫描');

  478. 		} else if (index === 1) {

  479. 			// #ifdef APP-PLUS

  480. 			const pages = getCurrentPages();

  481. 			const page = pages[pages.length - 1];

  482. 			const currentWebview = page.$getAppWebview();

  483. 			currentWebview.hideTitleNViewButtonRedDot({

  484. 				index

  485. 			});

  486. 			// #endif

  487. 			uni.navigateTo({

  488. 				url: '/pages/notice/notice'

  489. 			});

  490. 		}

  491. 	}

  492. 	// #endif

  493. };

  494. </script>

  495. 

  496. <style lang="scss">

  497. /* #ifdef MP */

  498. .mp-search-box {

  499. 	position: absolute;

  500. 	left: 0;

  501. 	top: 30upx;

  502. 	z-index: 9999;

  503. 	width: 100%;

  504. 	padding: 0 80upx;

  505. 	.ser-input {

  506. 		flex: 1;

  507. 		height: 56upx;

  508. 		line-height: 56upx;

  509. 		text-align: center;

  510. 		font-size: 28upx;

  511. 		color: $font-color-base;

  512. 		border-radius: 20px;

  513. 		background: rgba(255, 255, 255, 0.6);

  514. 	}

  515. }

  516. /* #endif */

  517. page {

  518. 	.cate-section {

  519. 		position: relative;

  520. 		z-index: 5;

  521. 		border-radius: 16upx 16upx 0 0;

  522. 		margin-top: -20upx;

  523. 	}

  524. 	.carousel-section {

  525. 		padding: 0;

  526. 		.titleNview-placing {

  527. 			padding-top: 0;

  528. 			height: 0;

  529. 		}

  530. 		.carousel {

  531. 			.carousel-item {

  532. 				padding: 0;

  533. 			}

  534. 		}

  535. 		.swiper-dots {

  536. 			left: 45upx;

  537. 			bottom: 40upx;

  538. 		}

  539. 	}

  540. }

  541. 

  542. 

  543. page {

  544. 	background: #f5f5f5;

  545. }

  546. .m-t {

  547. 	margin-top: 16upx;

  548. }

  549. /* 头部 轮播图 */

  550. .carousel-section {

  551. 	position: relative;

  552. 	padding-top: 10px;

  553. 

  554. 	.titleNview-placing {

  555. 		height: var(--status-bar-height);

  556. 		padding-top: 44px;

  557. 		box-sizing: content-box;

  558. 	}

  559. 

  560. 	.titleNview-background {

  561. 		position: absolute;

  562. 		top: 0;

  563. 		left: 0;

  564. 		width: 100%;

  565. 		height: 350upx;

  566. 		transition: 0.4s;

  567. 	}

  568. }

  569. .carousel {

  570. 	width: 100%;

  571. 	height: 350upx;

  572. 

  573. 	.carousel-item {

  574. 		width: 100%;

  575. 		height: 100%;

  576. 		padding: 0 28upx;

  577. 		overflow: hidden;

  578. 	}

  579. 

  580. 	image {

  581. 		width: 100%;

  582. 		height: 100%;

  583. 		border-radius: 10upx;

  584. 		padding: 20rpx;

  585. 	}

  586. }

  587. .swiper-dots {

  588. 	display: flex;

  589. 	position: absolute;

  590. 	left: 60upx;

  591. 	bottom: 15upx;

  592. 	width: 72upx;

  593. 	height: 36upx;

  594. 	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==);

  595. 	background-size: 100% 100%;

  596. 

  597. 	.num {

  598. 		width: 36upx;

  599. 		height: 36upx;

  600. 		border-radius: 50px;

  601. 		font-size: 24upx;

  602. 		color: #fff;

  603. 		text-align: center;

  604. 		line-height: 36upx;

  605. 	}

  606. 

  607. 	.sign {

  608. 		position: absolute;

  609. 		top: 0;

  610. 		left: 50%;

  611. 		line-height: 36upx;

  612. 		font-size: 12upx;

  613. 		color: #fff;

  614. 		transform: translateX(-50%);

  615. 	}

  616. }

  617. /* 分类 */

  618. .cate-section {

  619. 	display: flex;

  620. 	justify-content: space-around;

  621. 	align-items: center;

  622. 	flex-wrap: wrap;

  623. 	padding: 30upx 22upx;

  624. 	background: #fff;

  625. 	.cate-item {

  626. 		display: flex;

  627. 		flex-direction: column;

  628. 		align-items: center;

  629. 		font-size: $font-sm + 2upx;

  630. 		color: $font-color-dark;

  631. 	}

  632. 	/* 原图标颜色太深,不想改图了,所以加了透明度 */

  633. 	image {

  634. 		width: 88upx;

  635. 		height: 88upx;

  636. 		margin-bottom: 14upx;

  637. 		border-radius: 50%;

  638. 		opacity: 0.7;

  639. 		box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);

  640. 	}

  641. }

  642. .ad-1 {

  643. 	width: 100%;

  644. 	height: 210upx;

  645. 	padding: 10upx 0;

  646. 	background: #fff;

  647. 	image {

  648. 		width: 100%;

  649. 		height: 100%;

  650. 	}

  651. }

  652. /* 秒杀专区 */

  653. .seckill-section {

  654. 	padding: 4upx 30upx 24upx;

  655. 	background: #fff;

  656. 	.s-header {

  657. 		display: flex;

  658. 		align-items: center;

  659. 		height: 92upx;

  660. 		line-height: 1;

  661. 		.s-img {

  662. 			width: 140upx;

  663. 			height: 30upx;

  664. 		}

  665. 		.tip {

  666. 			font-size: $font-base;

  667. 			color: $font-color-light;

  668. 			margin: 0 20upx 0 40upx;

  669. 		}

  670. 		.timer {

  671. 			display: inline-block;

  672. 			width: 40upx;

  673. 			height: 36upx;

  674. 			text-align: center;

  675. 			line-height: 36upx;

  676. 			margin-right: 14upx;

  677. 			font-size: $font-sm + 2upx;

  678. 			color: #fff;

  679. 			border-radius: 2px;

  680. 			background: rgba(0, 0, 0, 0.8);

  681. 		}

  682. 		.icon-you {

  683. 			font-size: $font-lg;

  684. 			color: $font-color-light;

  685. 			flex: 1;

  686. 			text-align: right;

  687. 		}

  688. 	}

  689. 	.floor-list {

  690. 		white-space: nowrap;

  691. 	}

  692. 	.scoll-wrapper {

  693. 		display: flex;

  694. 		align-items: flex-start;

  695. 	}

  696. 	.floor-item {

  697. 		width: 150upx;

  698. 		margin-right: 20upx;

  699. 		font-size: $font-sm + 2upx;

  700. 		color: $font-color-dark;

  701. 		line-height: 1.8;

  702. 		image {

  703. 			width: 150upx;

  704. 			height: 150upx;

  705. 			border-radius: 6upx;

  706. 		}

  707. 		.price {

  708. 			color: $uni-color-primary;

  709. 		}

  710. 	}

  711. }

  712. 

  713. .f-header {

  714. 	display: flex;

  715. 	align-items: center;

  716. 	height: 140upx;

  717. 	padding: 6upx 30upx 8upx;

  718. 	background: #fff;

  719. 	image {

  720. 		flex-shrink: 0;

  721. 		width: 80upx;

  722. 		height: 80upx;

  723. 		margin-right: 20upx;

  724. 	}

  725. 	.tit-box {

  726. 		flex: 1;

  727. 		display: flex;

  728. 		flex-direction: column;

  729. 	}

  730. 	.tit {

  731. 		font-size: $font-lg + 2upx;

  732. 		color: #font-color-dark;

  733. 		line-height: 1.3;

  734. 	}

  735. 	.tit2 {

  736. 		font-size: $font-sm;

  737. 		color: $font-color-light;

  738. 	}

  739. 	.icon-you {

  740. 		font-size: $font-lg + 2upx;

  741. 		color: $font-color-light;

  742. 	}

  743. }

  744. /* 团购楼层 */

  745. .group-section {

  746. 	background: #fff;

  747. 	.g-swiper {

  748. 		height: 650upx;

  749. 		padding-bottom: 30upx;

  750. 	}

  751. 	.g-swiper-item {

  752. 		width: 100%;

  753. 		padding: 0 30upx;

  754. 		display: flex;

  755. 	}

  756. 	image {

  757. 		width: 100%;

  758. 		height: 460upx;

  759. 		border-radius: 4px;

  760. 	}

  761. 	.g-item {

  762. 		display: flex;

  763. 		flex-direction: column;

  764. 		overflow: hidden;

  765. 	}

  766. 	.left {

  767. 		flex: 1.2;

  768. 		margin-right: 24upx;

  769. 		.t-box {

  770. 			padding-top: 20upx;

  771. 		}

  772. 	}

  773. 	.right {

  774. 		flex: 0.8;

  775. 		flex-direction: column-reverse;

  776. 		.t-box {

  777. 			padding-bottom: 20upx;

  778. 		}

  779. 	}

  780. 	.t-box {

  781. 		height: 160upx;

  782. 		font-size: $font-base + 2upx;

  783. 		color: $font-color-dark;

  784. 		line-height: 1.6;

  785. 	}

  786. 	.price {

  787. 		color: $uni-color-primary;

  788. 	}

  789. 	.m-price {

  790. 		font-size: $font-sm + 2upx;

  791. 		text-decoration: line-through;

  792. 		color: $font-color-light;

  793. 		margin-left: 8upx;

  794. 	}

  795. 	.pro-box {

  796. 		display: flex;

  797. 		align-items: center;

  798. 		margin-top: 10upx;

  799. 		font-size: $font-sm;

  800. 		color: $font-base;

  801. 		padding-right: 10upx;

  802. 	}

  803. 	.progress-box {

  804. 		flex: 1;

  805. 		border-radius: 10px;

  806. 		overflow: hidden;

  807. 		margin-right: 8upx;

  808. 	}

  809. }

  810. /* 分类推荐楼层 */

  811. .hot-floor {

  812. 	width: 100%;

  813. 	overflow: hidden;

  814. 	margin-bottom: 20upx;

  815. 	.floor-img-box {

  816. 		width: 100%;

  817. 		height: 320upx;

  818. 		position: relative;

  819. 		&:after {

  820. 			content: '';

  821. 			position: absolute;

  822. 			left: 0;

  823. 			top: 0;

  824. 			width: 100%;

  825. 			height: 100%;

  826. 			background: linear-gradient(rgba(255, 255, 255, 0.06) 30%, #f8f8f8);

  827. 		}

  828. 	}

  829. 	.floor-img {

  830. 		width: 100%;

  831. 		height: 100%;

  832. 	}

  833. 	.floor-list {

  834. 		white-space: nowrap;

  835. 		padding: 20upx;

  836. 		padding-right: 50upx;

  837. 		border-radius: 6upx;

  838. 		margin-top: -140upx;

  839. 		margin-left: 30upx;

  840. 		background: #fff;

  841. 		box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);

  842. 		position: relative;

  843. 		z-index: 1;

  844. 	}

  845. 	.scoll-wrapper {

  846. 		display: flex;

  847. 		align-items: flex-start;

  848. 	}

  849. 	.floor-item {

  850. 		width: 180upx;

  851. 		margin-right: 20upx;

  852. 		font-size: $font-sm + 2upx;

  853. 		color: $font-color-dark;

  854. 		line-height: 1.8;

  855. 		image {

  856. 			width: 180upx;

  857. 			height: 180upx;

  858. 			border-radius: 6upx;

  859. 		}

  860. 		.price {

  861. 			color: $uni-color-primary;

  862. 		}

  863. 	}

  864. 	.more {

  865. 		display: flex;

  866. 		align-items: center;

  867. 		justify-content: center;

  868. 		flex-direction: column;

  869. 		flex-shrink: 0;

  870. 		width: 180upx;

  871. 		height: 180upx;

  872. 		border-radius: 6upx;

  873. 		background: #f3f3f3;

  874. 		font-size: $font-base;

  875. 		color: $font-color-light;

  876. 		text:first-child {

  877. 			margin-bottom: 4upx;

  878. 		}

  879. 	}

  880. }

  881. /* 猜你喜欢 */

  882. .guess-section {

  883. 	display: flex;

  884. 	flex-wrap: wrap;

  885. 	padding: 30upx;

  886. 	padding-bottom: 170upx;

  887. 	background: #fff;

  888. 	.guess-item {

  889. 		display: flex;

  890. 		flex-direction: column;

  891. 		width: 48%;

  892. 		padding-bottom: 40upx;

  893. 		&:nth-child(2n + 1) {

  894. 			margin-right: 4%;

  895. 		}

  896. 	}

  897. 	.image-wrapper {

  898. 		width: 100%;

  899. 		height: 330upx;

  900. 		border-radius: 3px;

  901. 		overflow: hidden;

  902. 		image {

  903. 			width: 100%;

  904. 			height: 100%;

  905. 			opacity: 1;

  906. 		}

  907. 	}

  908. 	.title {

  909. 		font-size: $font-lg;

  910. 		color: $font-color-dark;

  911. 		line-height: 80upx;

  912. 	}

  913. 	.price {

  914. 		font-size: $font-lg;

  915. 		color: $uni-color-primary;

  916. 		line-height: 1;

  917. 		.sales{

  918. 			color: #999999;

  919. 			font-size: 24upx;

  920. 		}

  921. 		.symbol{

  922. 			font-size: 24upx;

  923. 		}

  924. 	}

  925. }

  926. 

  927. /* 底部操作菜单 */

  928. .page-bottom {

  929. 	position: fixed;

  930. 	left: 30upx;

  931. 	bottom: 30upx;

  932. 	z-index: 95;

  933. 	display: flex;

  934. 	justify-content: space-around;

  935. 	align-items: center;

  936. 	width: 690upx;

  937. 	height: 100upx;

  938. 	background: rgba(255, 255, 255, .9);

  939. 	box-shadow: 0 0 20upx 0 rgba(0, 0, 0, .5);

  940. 	border-radius: 16upx;

  941. 

  942. 	.p-b-btn {

  943. 		display: flex;

  944. 		flex-direction: column;

  945. 		align-items: center;

  946. 		justify-content: center;

  947. 		font-size: $font-sm;

  948. 		color: $font-color-base;

  949. 		height: 80upx;

  950. 		position: relative;

  951. 

  952. 		/* 购物车数量 */

  953. 		.cart-count{

  954. 			border: 4rpx solid #fa436a;

  955. 			width: 40rpx;

  956. 			height: 40rpx;

  957. 			color: #fa436a;

  958. 			text-align: center;

  959. 			border-radius: 40rpx;

  960. 			position: absolute;

  961. 			background: #fff;

  962. 			top: -10rpx;

  963. 			right: 0;

  964. 		}

  965. 

  966. 		.yticon {

  967. 			font-size: 46upx;

  968. 			line-height: 48upx;

  969. 			color: $font-color-light;

  970. 		}

  971. 

  972. 		&.active,

  973. 		&.active .yticon {

  974. 			color: $uni-color-primary;

  975. 		}

  976. 	}

  977. 

  978. 	.action-btn-group {

  979. 		display: flex;

  980. 		height: 76upx;

  981. 		border-radius: 100px;

  982. 		overflow: hidden;

  983. 		box-shadow: 0 20upx 40upx -16upx #fa436a;

  984. 		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);

  985. 		background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);

  986. 		margin-left: 20upx;

  987. 		position: relative;

  988. 

  989. 		.only {

  990. 			width: 360rpx!important;

  991. 		}

  992. 

  993. 		&:after {

  994. 			content: '';

  995. 			position: absolute;

  996. 			top: 50%;

  997. 			right: 50%;

  998. 			transform: translateY(-50%);

  999. 			height: 28upx;

  1000. 			width: 0;

  1001. 			border-right: 1px solid rgba(255, 255, 255, .5);

  1002. 		}

  1003. 

  1004. 		.action-btn {

  1005. 			display: flex;

  1006. 			align-items: center;

  1007. 			justify-content: center;

  1008. 			width: 180upx;

  1009. 			height: 100%;

  1010. 			font-size: $font-base;

  1011. 			padding: 0;

  1012. 			border-radius: 0;

  1013. 			background: transparent;

  1014. 		}

  1015. 	}

  1016. 

  1017. }

  1018. </style>