uniapp开发号卡系统

我们先来看一下效果图

商品分享、店铺分享等功能

部分代码

html 复制代码
<template>
	<view class="">
		<view class="uy-bg-ffffff uy-p-20 uy-m-t-20 uy-b-r-20 uy-rel" v-for="(item,index) in list" :key="index">
			<view class="uy-flex uy-flex-between uy-flex-initial">
				<view class="uy-w-200 uy-h-200">
					<uy-image width="200" height="200" :src="item.goods_cover" radius="5"></uy-image>
				</view>
				<view class="uy-w-p-66 uy-rel">
					<view class="uy-font-40 uy-font-w-600">{{item.goods_name || ''}}</view>
					<view class="uy-font-28 uy-color-545454 uy-m-t-10">{{item.goods_intro || ''}}</view>
					<view class="uy-font-30 uy-flex uy-flex-e uy-abs uy-w-p-100 uy-b-0">
						<view class="uy-w-100 uy-text-c uy-l-h-44 uy-b-r-15 uy-color-ffffff uy-m-r-10" style="background: linear-gradient(210.18deg, rgba(52, 98, 210, 1) 0%, rgba(87, 157, 255, 1) 100%);" @tap="tapTo('share', item)">鍒嗕韩</view>
						<view class="uy-w-100 uy-text-c uy-l-h-44 uy-b-r-15 uy-color-ffffff" style="background: linear-gradient(210.18deg, rgba(52, 98, 210, 1) 0%, rgba(87, 157, 255, 1) 100%);" @click="$openPage({name: 'webView', query: {name: item.goods_name, url: item.link_url}})">鍔炵悊</view>
					</view>
				</view>
			</view>
			<view class="uy-flex uy-flex-wrap">
				<view class="uy-font-24 uy-p-10 uy-b-r-10 uy-m-r-20 uy-m-t-20" :style="{background: item2.bgColor}" v-for="(item2,index2) in item.goods_label" :key="index2">{{item2.name || ''}}</view>
			</view>
			<view class="uy-abs uy-t-10 uy-r-10" v-if="item.is_hot">
				<uy-image width="50" height="50" :src="$mAssetsPath.index1"></uy-image>
			</view>
		</view>
		
		<uy-poster-popup :data="shareData" :show.sync="showShare"></uy-poster-popup>
	</view>
</template>

<script>
	export default {
		name:"uy-list-goods",
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				showShare: false,
				shareData: {},
			};
		},
		methods: {
			tapTo(state, e) {
				switch(state) {
					case 'share':
						this.shareData = e;
						this.showShare = true;
						break
					default:
						break
				}
			}
		}
	}
</script>

<style>

</style>

点击前往

需要的可扫码小程序客服联系

相关推荐
游戏开发爱好者83 小时前
iOS 26 iPhone 使用记录分析 多工具组合构建全方位设备行为洞察体系
android·ios·小程序·uni-app·cocoa·iphone·webview
开发者小天8 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
游戏开发爱好者81 天前
iOS 开发推送功能全流程详解 从 APNs 配置到上架发布的完整实践(含跨平台上传方案)
android·macos·ios·小程序·uni-app·cocoa·iphone
栈狮1 天前
uniApp使用支付宝云开发问题集合
uni-app
Heyuan_Xie1 天前
uni-app facebook登录
uni-app·uni-app插件
Heyuan_Xie1 天前
uni-app OCR图文识别
uni-app·ocr·uni-app插件
一只程序熊1 天前
uniapp引入uniim后聊天列表无法加载出来
uni-app
学会煎墙2 天前
使用uniapp——实现微信小程序的拖拽排序(vue3+ts)
微信小程序·uni-app·vue·ts
淡淡蓝蓝2 天前
uni-app小程序往飞书多维表格写入内容(包含图片)
小程序·uni-app·飞书
晨枫阳2 天前
uniapp兼容问题处理总结
前端·vue.js·uni-app